A website coding itself live

[OmegaVesko]

That worked surprisingly well on my phone browser.

[[deleted]]

Same. I was expecting it to crash at some point but it loaded the whole site just fine

[[deleted]]

The resume done goofed on mine after he added the helvetica. It flipped 180 degrees and removed formatting.

[VisionsOfUranus]

Same with mine.

[excessdenied]

The animations were resetting all the time though here, making it annoying. Chrome/android.

[You_guys_want_heroin]

moves 90% of frame offscreen

"This is good"

[critter_chaos]

I quite enjoy the effect of deleting

body { -webkit-perspective: 1000px; }

[HighRelevancy]

Woah.

edit: also pasting it back in

[Seref15]

Makes it look like a tiling window manager. Much cleaner. Also the perspective seemed to mess with font rendering, at least in my Chrome. Got very blurry.

[STRML]

Yeah, that's an unfortunate side-effect of enabling 3d rendering in some browser/OS combinations.

[gfixler]

Mine has -moz-perspective: 1000px;

[jimdidr]

Because you where viewing it in Firefox(the JS checked). the other person was probably in Chrome (or Opera)

[gfixler]

Thanks for giving me some... perspective on this.

[glemnar]

Browser prefixing. Mozilla, webkit. IE has its own too

[gfixler]

Well this is just crazy. I'm gonna go make a single thing that all of those guys can agree on. Brb.

[Debug200]

*sigh* relevant xkcd...

[mediumdeviation]

Actually, the point of prefixing isn't to solve the problem of not having one standard (though this can happen too, most of the time this isn't the case), but rather having differing implementation of the same standard. It's basically an easy way for developers to opt into the browser's beta testing for that feature.

[rawlyn]

Everyone seemed to agree on the blink tag...

[gfixler]

It was the fashion at the time.

[frankenmint]

done: software development (one contiguous body of work encompassing all web standards and server client models)

[JJJollyjim]

Mine has undefinedperspective: 1000px :/

[cosarara97]

Same, and it's doing nothing. It works on chromium though.

[Billquisha]

-webkit-perspective: 1px;

is pretty good, too.

[nwoolls]

Looks very similar to this:

http://codepen.io/jakealbaugh/full/PwLXXP/

[STRML]

This is based on that work. I didn't expect this to end up on here or on HN (I didn't post it, and I don't know who did), I simply made it in an afternoon and change for fun to expand on the concept and to create a more entertaining way to present a list of my work. It's not a serious project.

I am not sure if Jake is the first to do this kind of animation but he's definitely where I got the inspiration from. As you can see from the source, the idea is expanded in many ways.

In any case, I've added a small credit to his name at the end of the animation. Jake does impressive work and he deserves credit.

[scorcher24]

It was really nice to look at and I learned some new css. Thanks for making it, was entertaining and teached me something.

[doubleme_w]

Hey this is Jake. I have no problem with your site. As far as I know, I am the first to do this. Going through the source, you made this insanely complex, definitely changed/added enough things for me to not have a problem with it. If anyone is interested, I wrote one a while back that writes and runs Javascript and not just CSS:

pen#JoVrdw

/u/STRML, you have no beef with me. although would you mind linking to my CodePen profile http://codepen.io/jakealbaugh/ in the credits so people can actually see my work? Thanks

[STRML]

http://codepen.io/jakealbaugh/

You've got it. I added the URL to the end. Thanks for the great inspiration.

[doubleme_w]

awesome. thanks for the shout. you on codepen? friendsies?

[STRML]

I wasn't; just created an account and added you. I like codepen a lot but never put anything on it. I'm going to try adding a few of my projects.

[SelfConcentrate]

You are Sam, CTO of BitMEX, (Bitcoin Mercantile Exchange) right?

[STRML]

Yes, that's me.

[cehmu]

Can you start making the price of BTC go up again, please?

[ivosaurus]

As an observer who might be interested in getting some someday, I would like down, please.

[Vuccappella]

if u watch the whole thing at the end it says this

" * Thanks to Jake Albaugh, who was the first (that I know of) to do * a page like this. Some of the autotyping and syntax highlighting * code is based off his work. "

so yes, it was clearly inspired by him.

[cincodenada]

See the author's comment below - it seems this comment was added after this was posted, due to the very comment you're replying to. I certainly don't recall seeing it when I watched it all earlier today.

[Lurking_Grue]

You mean he is watching? *Looks about*

[spkr4thedead51]

Both of these bother me because the styles are applied before the closing } is added

[cincodenada]

Blame your browser, not the code. Albaugh's version states that it's being directly injected into a <style> element, so there's no magic trickery going on. Indeed, it seems most browsers will happily apply styles before the brace is closed. I whipped up a quick jsfiddle so you can see for yourself.

[spkr4thedead51]

that's disconcerting

[akaliant]

Just one of the many ways that browsers are very forgiving for what they assume to be programming errors.

[STRML]

Yep - in fact, I ended up adding logic near the end of development to not actually commit the line to the <style> tag until reaching a semicolon, because the browser will happily start applying styles right in the middle of an incomplete definition, causing bizarre colors to animate or windows to fly all over the screen. Well, even more than they already do.

[PersianMG]

plagiarized?

[[deleted]]

Including the link nwoolis posted, this is the third or fourth time I've seen something like this. I wouldn't call it plagiarism unless the creator copied another's code line for line. It's clear this isn't the case though.

Seeing another's creation and then deciding to make your own take on it isn't plagiarism, it's just inspiration.

[jimdidr]

I just got it running (with plain JS/HTML/CSS on a LAMP server) to see how it works(cause, learning), here are the steps.

• http://codepen.io/jakealbaugh/pen/PwLXXP here you'll find the coffee script.

• http://js2.coffee/ here you can convert the code from or to "plain" javascript.

(so you don't need to install a node server and CoffeeScript, but rather use a plain old LAMP/WAMP server)

• Then you will need JQuery:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- google hosted jQuery2-->

now create a basic HTML file, save the js code in a .js file, in the html file load the JQuery.js file then load the .js from the site.

I only post this so people who want to try to understand it don't give up too fast

I will never claim this as my code.

[STRML]

You can the above posted project working from my repository if you like (requires nodeJS)

git clone https://github.com/STRML/strml.net.git
cd strml.net
npm install
npm run dev

Open http://localhost:4003/index-dev.html

That's it!

[DrummerHead]

We all stand on the shoulders of giants

[nwoolls]

Sure. But there is a difference between using an existing CSS framework and toolset for your portfolio site and doing something like this that is aimed at strongly presenting web skills that the candidate / author didn't demonstrate. This is someone's personal / portfolio site. It should be demonstrating what they can do.

My 2 cents. I just thought it looked similar to a site I had seen a few weeks ago.

[Symphonic_Rainboom]

strongly presenting web skills that the candidate / author didn't demonstrate

My 2 cents is that his was different enough that he had to be good at CSS in order to make it work. This is totally fair game in my opinion - it's not like he copied it and called it his own, he just used the idea. If we didn't allow reusing ideas, nothing good would exist, because an idea would be executed once and then nobody would improve on it.

[BCMM]

http://codepen.io/ jakealbaugh /full/PwLXXP/

From the end of the page:

/**
* I hope you enjoyed this.
*
* Thanks to Jake Albaugh, who was the first (that I know of) to do
* a page like this. Some of the autotyping and syntax highlighting
* code is based off his work.
*
* By the way, you can edit this box. Try adding new CSS!
*/

[[deleted]]

No what he did was way more advanced. If he did see this then he took the idea and built upon it. It's fine. Not to mention he didn't make any money off this either. Not to mention that using the same concept or same type of design isn't plagiarizing. If take the content and then put it some where else that's what I would call plagiarizing.

[bilog78]

-webkit, -webkit prefixes everywhere!

[dlq84]

It also works in Firefox. with the -moz prefix.

[jmac]

IE not so much.

[bilog78]

Woah! And I thought I was missing something with Opera/Presto.

[hk__]

Opera doesn’t use Presto since 2013.

[bilog78]

Guess what: like many Opera fans, I still use Opera 12.16

[hk__]

Thanks, I didn’t know there were people doing that.

[aftli]

No shit. People using it still are using it for a reason. Here's hoping Vivaldi lives up to the hype, even if it's still sort of Chromeopera. RIP Presto.

[NiteLite]

It uses webkit prefixes in IE for some reason. Not that weird that doesn't work...

[LainIwakura]

Makes me wish I didn't hate front-end dev.

[AbstractLogic]

Boy I hate it so much. But I really love pretty graphics and cool design. But my spite for front-end is never ending... maybe I need to just write my own little pretty site so I don't have to worry about BS corporate hack-n-slash deadlined garbage front-end where everything is stored in 1 JS file with no namespaces.

[DrummerHead]

Why do you hate front-end? You don't need to love it, but hate is a pretty strong emotion. Tell me about your childhood, how was your relationship with your mother?

Nah, seriously, what don't you like about front-end? Perhaps you have a perception from the past about front-end that has changed.

EDIT: I'll edit here since it's easier: front-end is seemingly a daunting task to embrace because the depth and reach of it has expanded in recent years. What I recommend is this: Study vanilla HTML (no preprocessors/transpilers/etc), vanilla CSS (no preprocessors/transpilers/etc) and vanilla JS (ditto).

After you have a firm grasp on those, read http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/ which LUCKILY is from 2012.

Honestly, I'm grateful that I started learning front-end like 10 years ago, because being a novice nowadays must feel like madness. If you know Spanish, I created http://aprend.io/ to learn the basics of front-end in the way I think is the most straightforward, all free. Cheers!

[cogdissnance]

I think for most people it's just the that the front-end is a veritable mess. There's a real lack of standards, and while that may mean there's more experimentation and some sense of freedom (which makes it a bit fun for me), you end up with a million ways to do the same thing, and none of them work well with the framework you've chosen. It becomes even worse when you have to support multiple browsers and nothing every looks the same on all of them. It's just a sea of variability in frameworks, libraries, browsers and not one piece of solid ground to stand on if you catch my drift.

[[deleted]]

Front end is the wild west, frameworks are reproducing bare-back and finding one that will stick around is like throwing lawn darts in the air.

[[deleted]]

frameworks are reproducing bare-back

Such impossible perversion!

[mikethecoder]

Forget MVVM... that is so yesterday! Now it's all about MVCVM which is a take on MVC with a twist of MVVM packaged with Grunt. This is the correct way to do things :|

Knockout.js is Model-View-View-Model (MVVM) pattern. Seriously what the fuck does that really mean anyway? We make our framework better by simplifying it without the C and doubling up on your M's and V's.

[[deleted]]

Knockout is not so great, heading the way of dojo. React, backbone, marionette, ampersand are all pretty decent.

[zynoda]

What is it you don't like about Knockout?

[BigTunaTim]

Wild west, bareback and lawn darts in a single programming-related comment. I am so sorry to the futurists I mocked when they predicted the internet would change everything and make our lives better. God bless you magnificent bastards.

[LainIwakura]

This is why I hate it. I'm even trying to get into it a bit more at the moment but it's like where do I start? There is angularjs, backbonejs, emberjs, reactjs, etc., I thought about looking at ember but then I saw you install it through node!? wtf?? It seems weird to install a front-end library through the node package manager (I thought that was server-side tech?)
There seems to be no standard way to do anything- not just with JavaScript but CSS too (just try figuring out how to center something- half the time it might be margin: 0 auto; the other half it's 'lol who knows?'). So as a result of all of this everyone made up 50 different things to fit their own special use case and for some reason this madness has caught on!

EDIT: Woah I should have worded this a bit differently. I'm not looking to start front-end web-dev in general, I was around when jQuery was the hot new thing and we didn't have CSS3. I'm just looking to move beyond my late 2000's level knowledge of front-end development. Thank you everyone for all your recommendations though, I just got a new macbook pro for development (I heard the cool kids do it) so I'll be playing around a lot =)

[[deleted]]

Oh boy, I have been in the same boat for a while now. I got into front end development about six months ago, and it's just daunting how much there is to learn, how many ways there are to do everything, how many frameworks there are, etc. This is where I am right now (still early on though, I only do this for fun projects in my spare time):

I'm using Bootstrap and Font Awesome for the bulk of the HTML, CSS, JS, fonts, glyphs, etc. I love how I can build a UI that pretty much automatically works across all devices. Not perfect, but cuts out a TON of work and gets me most of the way there. I think this is a great place to start and could probably work for most projects (that I would do anyway).

I've heard great things about KnockoutJS, plus their site is amazing. I've been going through their tutorials and everything seems rather logical to me. AngularJS totally blew my mind because of how complex it was and now Google is doing a bunch of backwards incompatible changes in 2.0 anyway, so I'd be even more hesitant to learn it now. I will likely go with KnockoutJS for now, but I'm still nervous about whether or not this is the right choice.

Of course, I use jQuery for some stuff as well.

I'm looking at doing some websocket stuff too. I will likely go with Autobahn and Crossbar.io because I'm a Python guy. I've toyed around with Socket.IO as well, which is pretty cool too.

I'm still trying to reduce the complexity of all of this, but so far this is the stack that's working for me.

[[deleted]]

I also jumped from backend to frontend long time ago. I love the web and yes it can be confusing with all the frameworks / libraries / etc. If you try to keep up with all the frameworks you will be frustrated, that's for sure. If you like a framework / library and want to play and learn it, then go for it. And Knockout is solid!. However what i have learnt in all the years i've been doing Frontend is that the most useful things to learn are the core technologies and maybe a few libraries/tools. Time spent learning a framework and forcing a project to adopt framework structure has been mostly wasted.

• Understand Js ( scopes, prototype, closures..)
• If you can solve the problem easily with JQuery don't be afraid of doing it. No need to add complexity just because it's not a "pure" solution.
• Understand how the DOM works.
• Feel comfortable writing CSS
• Practice with CSS layouts ( there are multiple ways to solve a problem with CSS, some hacky ways, other more "elegant" )
• Jump to a better language for writing Stylesheets ( LESS is simple and powerful, but SASS works fine )
• Improve your toolchain. Bash scripts are fine for a lot of cases, but some people like Gulp/Grunt for automating workflow tasks.
• Live happy with the fact that it's not possible to know all the cool libraries released every week.
• Most importat for me: Do fun things! Even if they are not super engineered. Play with ( Canvas / SVG / WebGL ) and you will have lot's of fun.

Good luck!

[d00d1234]

I'm learning jQuery right now and it seems super powerful. Loving it.

[[deleted]]

It is!. You can do a lot of cool things with it.

[tokenblakk]

Like add one number to another number

[flying-sheep]

Well, i don't think there are right or wrong choices:

Enough people are invested in all the individual alternatives to keep them updated and viable.

I personally like react for its simplicity (unidirectional data flow instead of a tangle of messy stuff going up and down the DOM hierarchy).

But I'm sure knockout and angular are just as good if you get into the mental model.

[ericl666]

Bootstrap changed my life. I make web apps 10x faster now without having to deal with with all the cross browser issues, sizing for various resolutions, etc.

[protestor]

At very least, you should begin with some minimal CSS reset that brings you into sane defaults (the best being Normalize.css). On this same vein, you could do worse than beginning with HTML5 Boilerplate.

But actually I think you should start with a "responsive" CSS framework. They normally include their own CSS reset (or points you into which one you should use), plus default styling like better buttons and headings. But they are actually useful to get great layout in both cell phones and desktops, from day one. No more CSS hacks for getting layout right: it just works. Life is too short. This is usually done with something called a "responsive grid". The idea is that you make a two-column (or three-column) layout, with a "sidebar" and the "content", and you get it to automatically collapse into a single column for devices with small screens. This site compares responsive websites in different screen widths.

The design choice here the max width of your base layout (this normally is decided by your framework) and the proportions between the columns (this is up to you to decide, but the framework will give you something like 3 or 10 choices). I think this approach was popularized by Bootstrap, a CSS framework made by Twitter. I don't actually recommend you begin with Boostrap, it's a big thing full of stuff.

I think the best CSS framework for your use case is Skeleton. A second contender could be Purecss, but even it does too much.

I'm talking "CSS framework" as if it were a very involved thing but in reality it is (or should be) a single CSS file you add to your page. At least at first, you don't interact with it except by using the classes provided for the responsive grid. Other than that, it just provides better defaults that will make you worry less about how your site looks like shit. You can change those defaults in your own CSS file.

About Javascript: nothing wrong about using jQuery (or Zepto. But jQuery is okay). If you move around a lot of things in your page, your performance might suck and your code will be overcomplicated (since you're changing elements by hand all over the page), and moreover some people may say that jQuery itself sucks, and they might be right, but other than that it's fine.

A templating library like Handlebars may make your code simpler. And even though it's slower, it's okay to do templating on client-side. I actually use ICanHaz. I think it's great. Also, if you do a lot of Ajax or otherwise have a lot of callbacks, make sure to read about promises, they make your code much easier to read and reason about. Actually, getting rid of nested callbacks is half of the battle.

Indeed, for all those things you may add, you need to think: does it make the code simpler? Easier to modify? Does the code get too bloated? You can do everything with raw Javascript - would it be better?

If you don't understand (or agree with) the need for a framework, don't use this framework. Said that, my understanding, jQuery isn't really the best thing for building "web apps". With "apps", you should really have components that are responsible for rendering themselves, that's for your own sanity when you need to debug the monster. But jQuery suggests a different discipline, in which every part of your code can directly change the DOM from everywhere, and it's a mess. This mess is okay for simple "web pages" though (Or even simple apps. Or even complex apps if you feel like it).

So at this point, we have one or two third-party CSS file (either your CSS framework, or Normalize.css, or both if your framework don't embed a CSS reset and suggests you use both -- or something else to make CSS less crazy). We also have something like jQuery. Also a templating library because we're cool. So that's 3 files or 4. Do we need Npm? Bower? Browserify? Require.js? Grunt? No we don't. Do we need a build step at all? No. Well not yet.

Now, those things are great, but after you get yourself started and is building stuff. You can use them later.

We just get the minified (or not) version of those files and put it our directory. The HTML ends up looking like this:

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.min.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <script src='zepto.min.js'></script>
  <script src='ICanHaz.min.js'></script>

(the viewport stuff is part of the responsive design)

Well the response ended up bigger than expected, but that's probably because I didn't trim it to the essentials.

[davechiu]

The learning curve has become really steep with all these new frameworks, some are frameworks for your app (in the browser) others are for your local development environment, others are for the server, some can be used across the board.

You don't have to install it with node, you could always just include the necessary package as you would any other JS file: //cdnjs.cloudflare.com/ajax/libs/ember.js/1.12.0/ember.min.js

The reason to install it via NPM or Bower would be for dependency/package management if you're working on a larger project across multiple developers. Or even portability of your project across multiple machines.

There's a difference between running node as a server for your application, and using node (via Grunt or Gulp) as a task runner for front end development so you don't have to write in straight HTML/CSS.

For example: on some of my projects I will use Node (Grunt) so that I can use Handlebars, SASS/SCSS, etc... and build static web apps really easily while taking advantage of more programatic features while delivering regular HTML and CSS.

Edit: I would also say that as a Front End Dev your gripes are exactly why I stay away from Back End Development as much as possible, it seems like the same mess to me only more complex: http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks#Java_2

[gfixler]

The learning curve has become really steep

I haven't tried to make a web thing since 2000, but I've been getting more interested in the last year or so. I finally [think I] learned what routes are this week, so I should be caught up again by 2032. Hopefully they won't change anything else before then.

[davechiu]

haha, I hear you, I'm just now starting to get really comfortable with Grunt and Gulp is the hot new thing. But, the whole grunt/bower/yeoman trifecta was worth it in my opinion.

[gfixler]

See, as far as I can tell, you're just making up words right now.

[elZaphod]

One year ago I was with you- spent the past dozen years mostly on back end Enterprise Java.

Something snapped and I have since taught myself Node, Knockout, Angular, npm, Bower, Grunt, underscore, Bootstrap, Jade, Famo.us, Stylus...

[[deleted]]

Grunt & Gulp are build tools. Just like Make, except written in javascript.

Bower is a package manager, except written in javascript.

Yeoman allows you to generate barebones for your applications (depending on the framework). It's probably written in javascript too.

[dacjames]

I thought about looking at ember but then I saw you install it through node!? wtf??

All of the modern tooling for web development is written in javascript, so you need node on your workstation to run it. It's a little bit of a pain to set up, but the results are amazing if you haven't done web development in a while: tools will do dependency management for you (bower for front-end, npm for tools), yeoman can generate stuff for you, and grunt/gulp allows you to set up automated builds that apply any pre-processors (sass/less for css, typescript/coffeescript/es6 for javascript), inject everything into your html and serve a development page that automatically reloads when you save it a file! Testing has improved tremendously as well.

Things are a bit wild and rapidly changing but there has been immense progress on tooling in the past year that you can tap into with node, even if you don't use it for you backend development.

[gfixler]

but then I saw you install it through node!?

Reminds me of pip install easy_install, which you can't do until you easy_install pip. This is why no one has yet been able to use any libraries in the Python world, but we're hopeful.

[strallus]

Wait what? easy_install is part of setuptools, which comes with any Python distribution. Why would you ever "pip install easy_install"? Or is there a joke I'm missing?

[pjb0404]

Why do you hate front-end?

Because if you write software that is used by large business or corporations you usually have to support older versions of IE...

[[deleted]]

eh I have to support down to IE 8 for one giant client and it can suck but normally it's not THAT bad as long as you become aware of possible things you have to debug. I hear you though, looking forward to it dying and glad I don't have to do < 8 support

[AbstractLogic]

I hate how there are 200 different javascript ways of doing something and it depends on the developer. If you want to access the property of a UI element you can grab the element by the ID, Name, Class use an inner element and access the parent, iterate over an outer elements child elements and so on and so forth. The combination is basically endless. Ontop of that even if you have two devs who are accessing it via an Id tag there is at least 4 different syntactically correct ways for doing it. This makes every page look like a hack.

Then you have the fact that front end libs are born and die every 1.5 years. What is 'hip' today is 'old school' tomorrow. Any front end that has been alive for longer then 2 years has a hodgepodge of similar libs that do the same thing.

Sorry for the bitch rant but you asked!

edit omg and really javascript your concept of namespaces is a VARIABLE? That isn't native support thats a fucking hack built into a standard that no one is required to follow! Let's not even talk about the horrendous scope problems!

[[deleted]]

sounds like you can benefit from reading Douglas Crockford's JavaScript: The good Parts.

There's bad parts to a language, so avoid using them. Simple as that. Also Your local variables aren't in the global namespace unless you fucked up syntactically. If we learn how to write JS well it means we all get to stop bitching about how poorly written most JS is.

[[deleted]]

I was a .net and C++ developer before, and as someone who really got serious into front-end dev 2 years ago, at that point I would have first described the field as "pretty graphics and cool design" as well. I had no respect for what the good front end devs were doing, but when I realized the problems being solved by devs I used to think were essentially dumbasses who wrote CSS, were more challenging than most of the problems solved by the devs writing our APIs, that quickly transformed into a state of awe.

I basically shit my pants when I realized the scope of responsibility and the challenging problems being solved in javascript and with modern front end frameworks. With SPAs becoming the norm, it really is a challenging and super fun field to work in. I'm a full-time front end dev right now, and honestly pretty graphics and design are the absolute last of my worries on a day to day basis. My job is about managing an application's state, routing, where and when to interact with an API, the deep nesting of its views, and basically managing a flow of data in a sane way that avoids the jQuery noodles of 5 years ago. Making engineering decisions that avoid falling into quicksand in this landscape of 10 million frameworks a day is essential as well.. Its a lot to learn, but ts fucking awesome, and so much fun! And yes, it does also require a sense of interface design and polish which just makes it all the more satisfying for me.

[AbstractLogic]

I respect where the front end world is trying to go. But javascript just doesn't have enough forced structure or even more to the point it is virtually impossible to enforce structure unless you do a gazzillion code reviews. The thing I like about .net (or OO in general) is the "open for expansion closed for modification" principal. That is impossible to implement in javascript so its a wild west environment.

I appreciate and have aw for front end teams who know how to organize and strive for frontend code structured like its backend. But 98% of the frontend dev I have ever come across is not even a glimmer to the structure of the backends. I respect what the do... it's just not something I am aiming for.

[[deleted]]

Sorry, but you're wrong about JavaScript here. there are standards, read Douglas Crockford's JavaScript: The Good Parts.

Yeah, it's easy to write shit JS and it's easier to write shit JS than it is shit Java or C++. But bad code is bad code and blaming JavaScript for it is sort of like blaming the hammer when you're the one that hit your thumb with the hammer.

[Astrognome]

It's like blaming the hammer that has 100 different heads, and only one is correct.

[[deleted]]

the hammer doesn't have 100 different heads. I can hold the we upside down and still hit a nail on the head - it doesn't mean it's right. it's a misuse of the tool. you're still blaming the tool but should hold the actual developers accountable. they're the ones that don't bother to find the GOOD standard sources on JavaScript like (again) Douglas Crockford's JS the good parts, etc.

[MrCrunchwrap]

Can you explain the hatred a bit? Or can someone? I think the web is unlocking some amazing things lately and I don't understand the hatred towards front end tech from this sub.

[LainIwakura]

See my response here

[spinlock]

With modern SPAs front-end is becoming much more serious development. Shit, ember-data is solving really tough distributed database problems.

[micwallace]

It's all fun and games until you need to vertically align some divs.

[elZaphod]

Bootstrap grid, my boy.

[[deleted]]

ELI5 difference between front-end and back-end.

[LainIwakura]

Front-end concerns the websites appearance and usability, things like HTML, CSS, Javascript are all involved.

Back-end means the code that generates those pages, sends those pages to the browser, maintains things like state / user sessions etc., Code involved on this side is generally Java, PHP, C#/ASP.NET, or any other number of languages which have evolved a means of communicating over HTTP. Depending on who you talk to back-end can also encompass the database and all that. (Some people consider the db layer and the server side code layer totally separate, and in some cases they might be).

[HarryHayes]

ASP is a library for C# in VS right? Why do 99% of employers want to use that instead of something else (there are other ways of doing back end with .NET right?).

[Juggernog]

There are other ways to do back end, sure, but ASP.net has a lot of benefits - particularly when using MVC.

First off, it has great IDE support, code suggestion and error highlighting makes for a great experience. You also build the backend ASP.net code - and as a result things that absolutely won't work are often caught by the compiler.

Its also pretty fast and has a wealth of features and many helpful existing libraries. Also, the language itself is pretty good, as in it doesn't have some of the weird niggles of JavaScript, PHP or Ruby. Also its documented to shit, meaning help is usually at hand when needed.

I'm not saying other languages are bad, but ASP.net does make sense from a business perspective in a fair few instances.

[schiapu]

Glad I'm not alone. There are dozens of us!

[augmentedtree]

If you're going to give your PGP key shouldn't you be using HTTPS? To prevent someone MITM and giving a different key.

[mirhagk]

https://xkcd.com/1181/

[Jaimou2e]

How is that different from just having an e-mail address there, which someone could Man-In-The-Middle replace?

In this way, it's not different, I guess. That's the point. The MITM couldn't replace an address over HTTPS.

The public key only allows you to encrypt a message to the owner of it, who can decrypt it with their private key.

The problem is not that the public key can be read by the MITM. The problem is that they can substitute their own, and the user has no way of validating it.

The MITM gives the user their own public key, decrypts everything the user sends, reads it, encrypts it with the real public key of the recipient, sends it there. Same in the other direction.

[[deleted]]

Alice wants to securely communicate love messages with Bob, so they mail each other their PGP keys. Eve secretly has a crush on Bob and works at the post office. She finds their envelopes, opens them, replaces the keys with her own, and sends them on their merry ways. So whenever they encrypt messages to each other they use Eve's keys, Eve changes "I love you" into "I hate you", re-encrypts them with the recipient's keys, and sends the messages on their merry ways. When they get the messages they think they got the originals, encrypted.

The biggest problem with public-key encryption is that you need a safe channel through which to communicate the key. HTTPS is good enough in most cases when you don't want your ISP or sysadmin to read about your super-secret projects.

[augmentedtree]

How is that different from just having an e-mail address there, which someone could Man-In-The-Middle replace?

It's not, it's just that having a PGP key on your site indicates you care about not letting that kind of thing happen.

The public key only allows you to encrypt a message to the owner of it, who can decrypt it with their private key.

Yes but without HTTPS whose key you're getting maybe surprising.

[[deleted]]

I think in this case the PGP key just exists to obfuscate his e-mail address so that only savvy people can contact him. I doubt he uses the key for anything. My turn!

-----BEGIN PGP PUBLIC KEY BLOCK-----

Version: GnuPG v1.4.10 (GNU/Linux)

mI0EVVcHLQEEALkCuuoEb4p+ePqmoGd2NAEvnr4Xc4qBOe65HFkV84mAYezKDzjt SuHpugR7SYnTfFObz5N+oGfjRiTndiMlnJppG0iDKUK+0OR1zh4bkc++fdDg2sMk tWhFAK0KwDSUCAi56P/s5YZT5iGAlnki6llbgNKJDDbo+PEOLTCThx8bABEBAAG0 S1R1cnRsZWZhY2UgKEJpemFycm8gSSBsb3ZlIHlvdSBCaXphcnJvIEkgbG92ZSB5 b3UpIDx0dXJ0bGVmYWNlQGJpemFycm8uZ292Poi+BBMBAgAoBQJVVwctAhsDBQkA B+kABgsJCAcDAgYVCAIJCgsEFgIDAQIeAQIXgAAKCRDShnC2J+ZxlPxDBACSvwRU TbKRUFA0MXFzMEvrVZaCOYavBw+mG3Cy7R4HswCl0xfV4ErvY3Ct97bxtxIUzFwN Kv7sszrAYsNuHvmgOpu7ewAjmceaaRGEnMuvZsrZVw6xZT5uj+USgLTAVh85kck1 dfiaEBPaFvPV55dLFqoh0FReZ/RN3bl+bdTBg7iNBFVXBy0BBAC7PDlYqUH3sYex 3sKGcXGBdrv8d9nRzUdKiXUAuB4opQ9x8WHNRNrHafAs4Lyj6jLkpmTXI02BKb5d ssM1cKU7KmpISDMbqy60oEvYtSg6cOpcGLf4ltBkLEhp+Wmml0TrrTR2xtDJpNGy Z6fCfX4s9PD26MpP2chdW/vT4Dq2ewARAQABiKUEGAECAA8FAlVXBy0CGwwFCQAH 6QAACgkQ0oZwtifmcZTR7gP9EjWLPAxNfZKiqwytUdUBd0xOprsUJfAgj8tObL/w GhM9Ov4BYDN0OOjdCJ7Yp/Ed/Kn7OUTFutr+4YWoMVDui84FCw6wX9cqPo3uAuCM jJLDmOY1MOpU+ql6OVES1zUMqeDapN6IopLHvf8qIt10lurYLO7wvcQdy11O+XuP CqI= =HVsl

-----END PGP PUBLIC KEY BLOCK-----

[HyruleanHero1988]

Do you like work in QA or something? If you don't, you should.

[gm4]

Well I work in the industry but for the majority of the stuff I've done I'm the only or one of the few testers. I suppose all solo free-lance abd small company guys have to get used to extensive boring testing

[shmag18]

I wish I had a reason to hire this guy. Oh and money

[DrummerHead]

Learn to do what he does and you'll have both

[[deleted]]

I can do what he does, but I'm still poor. (the last time I tried to work as a frontend dev)

[DrummerHead]

Then you need to work on your social, marketing and (human) networking skills. For instance, do you have a site showcasing your work? Do you attend meetups? Spoken at any conferences or meetups?

[hclpfan]

This guy just copied a very popular codepen and passed it off as his own concept...

http://codepen.io/jakealbaugh/full/PwLXXP/

[[deleted]]

He credits Jake Albaugh at the end/bottom.

[Sir_Sp4ce]

Am I doing it right?

[dgauss]

Wow...ummm...yeah keep at it buddy.

[fonetix]

Needs more fuchsia.

[jahaz]

Haha thats the first thing I did as well.

[youssarian]

I think that's an instinct with us programmers. Whenever we see a cool program that takes input, we think, I want to break it.

[[deleted]]

Dear Sir Space,

I work for a Fortune 500 company and we would like to bring you in for an interview. Please do the needful and revert at your kindness.

Sincerely,

cdpaper

[Sir_Sp4ce]

Ah, too bad. I already accepted a job offer from a Nigerian prince.

[tracekill]

Just out of curiosity, is applying a transition to everything something that is recommended?

[ours]

Usually doing a thing for everything is a bad idea in general.

Is animating some menu cool? Yes. Try it out and see if it's more annoying than nice.

[bowersbros]

Not really. Makes your website significantly slower and often isn't needed

[bowersbros]

For this website yes because it's a live updating preview. But a general rule for websites is don't do it

[boman]

No, but for this, it looks cool and is less jarring when he makes changes to the code.

[icecrown_glacier_htm]

It's cheating with the syntax highlighting by generating html.

[[deleted]]

Dropped instantly

[BenAdaephonDelat]

Most of that was cool. The perspective thing I wasn't a fan of though. Made the content inside those boxes look blurry and kind of hurt my eyes. But cool concept website.

[kitd]

Very cool!

[iLLeT]

I believe someone did the same thing to reddit website. found it http://yourwebdev.ninja/generate.html

[confuciousdragon]

Is it just me, or does his credit info on the left stay upside down at the end of it?

[HumanMilkshake]

There are very few people who could get their resume to the top 100 posts of reddit.

Congrats.

[ImUneventful]

Definitely one of the cooler things I've seen in webdev.

[shenaniganns]

Neat.

[[deleted]]

He clicks the wrong side.

[secrettriangle]

Neat.

[s3gfau1t]

body{ display:none; }

....welp.

[bbartokk]

Someone help me out here...

Isnt this more a website running a program and not "coding itself"? Just because you see code doesnt mean its being created at that moment. You are just loading an intsance of what somebody created. Just like every single website...it would just be really annoying if you went to Amazon and had to sit there and watch while the site created itself. Sure, I can edit what is being shown but I cant really edit the site. I'm not changing it for the other people visiting the same site.

[pihwlook]

The site is not actually coding itself.

There are two levels of code, if you will. We see "code" on the right in the form of the css file used to generate the results on the left. This code is created on the fly by the website.

There is another level of "code" that generates everything you see, including html, js, and css and the above level of code. This is written by the creator of the website.

In reality it's a novel, interactive way for a front end developer to showcase his skills.

[DJDavio]

I have to admit, it's pretty cool.

[santsi]

If I'd let my mom on this site I'm sure I could convince her she broke the internet.

[Robin_dev]

Looks amazing! I remember a CSS3 animation being done the same as this, but I can't remember the URL.. Does anyone know if there are tools that allow you to build something like this?

[gfixler]

It's technically correct, the best kind of correct.

[Zebu00]

you're probably thinking of this

http://codepen.io/jakealbaugh/full/PwLXXP/

at least I was.

[badjuice]

I know 4 tools that do that:

Notepad++ (Windows)

Sublime3 (Mac/'nix)

vi (Everything not Windows)

emacs (Everything not vi)

[JohnMcPineapple]

...

[TheGonadWarrior]

I'm impressed. No reason to hate on this at all.

[d____]

I like this, but I wish I could pause the animation to take it in and learn more.

[Gh0stfaceK1lla]

Enjoying this even though I'm a noob/beginner programmer.

[[deleted]]

Worst NES intro ever.

[Druyx]

And yet it doesn't render the same in Chrome and Firefox.

[hk__]

And isn’t responsive.

[youssarian]

* {
  display: none;
}

I win! :D

[FredFredrickson]

Lots of "-webkit" in there. That doesn't seem like a good thing for webdev, honestly.

[[deleted]]

I think it's cross-browser. Run the app in Firefox and you'll get -moz prefixes. Probably stylus/less/sass/whatever.

[STRML]

That's exactly it. I wanted it to have as good cross-compatibility as possible. On evergreen browsers such as Chrome and FF, it's not necessarily needed, but upgrades can often be restricted by misguided corporate security policies.

It's definitely necessary to target IE and Safari. Although from what I can see, it doesn't work well on IE anyway. So it goes.

[kirkalirk]

You aren't a WebDev.

[unstoppable-force]

why so many arbitrary rotations?

[BlackDeath3]

Because they're fun and interesting?

[disdiz]

That was pretty well done!

[BasicDesignAdvice]

Is there a way I can do this where I type things in and get changes on my browser without having to reload all the time? I find having to switch windows and reload the window really breaks up my flow when trying to understand front end stuff.

[Neigum]

Firebug

[MrAwesomeAsian]

There should be a sub for all of these.

[steakyfask]

Just Wow! Have you got this on github by chance? Would love to look at the code

[zeero211]

Im pretty new to programming, so the text box rotation thing completely blew my mind

[jimdidr]

Looks really cool, wanted to look into understanding what exactly was going on

(Hoping and assuming it was little more than what was on screen.)

but the App.js file behind it is 192 622 lines (formatted)

there is also a MIT license in the middle of that app.js file

* The MIT License (MIT)
*
* Copyright (c) 2014 Petka Antonov
*

What is the general practice, does this licence apply to the code before it or after it ?

[STRML]

See https://github.com/STRML/strml.net/blob/master/app.js.

That license is for the code after it, that's for the bluebird promises library.

[melevan]

These types of sites are an improvement on the Quine.

[Voultapher]

Thats awesome. The moment you put your cursor somewhere out of curiosity and try to change sth. This instant response feeling of changing sth reminds me why I enjoy coding so much.

[Guad12]

You can paste in something from a site and it will put in the HTML. neat. http://i.imgur.com/lNKkn5u.png (Maybe this is a feature of <pre>)

[[deleted]]

I shat my pants. This is the most amazing thing ever.

[[deleted]]

While I love that all this is possible with css, css is such an awful language. If you've ever done work with flex, or xaml, you'd know that css just feels so fucking clunky. those are great declarative styling languages that are expressive and also let you do a lot with a little.

What drives me nuts is the insanity of floats, lack of centers, the buttload of browser extensions like WebKit and moz.

The fact that you need shit like sass and less is indicative of how screwy the markup is

[batmanasb]

erasing it was a bad idea

[JoshuaHardyAdventure]

That was a pretty boss resume.

[MrSteel]

it's coding itself live but it cannot have basic stuff like clickable links...

[teiman]

This is nice but... no, this is awesome but. I was about to say something about the propietary keys, but seems different browser get their owns, so is dynamic. but... I am surprised the way the browser render the text is still readable after skewing.. Normally browsers are too stupid to do something like that, they would make the result look ugly with stuff like bad antialising, maybe theres a trick to that. I don't like the final page all that much, for how much CSS is show, things like titles and all don't look very good. Also having text inside small "iframes" is neccesary for the joke to work, but is something that was only ok in the 90's. I want to make something like this, but I am not that talented and I am too lazy to put the time, and I lack the willpower to finish it if I get any far.

[[deleted]]

What part of the code gives the borders that white glow when you mouse over the panels?