Auto-Didacts Will Rule the World
September 20, 2013 6:30 PM   Subscribe

Everything you need to know about web development. Neatly packaged. "Beginners, start by clicking the html box and the next lessons you should learn will get highlighted." [via reddit]
posted by batmonkey (59 comments total) 117 users marked this as a favorite
 
I would take the site more seriously if it wasn't such an epic fail with NoScript. Degrade gracefully, don't show me template markers, FFS.
posted by wierdo at 6:31 PM on September 20, 2013 [13 favorites]


It's a collection of elementary tutorials.
posted by Nomyte at 6:35 PM on September 20, 2013 [1 favorite]


Yay love it
posted by sweetkid at 6:36 PM on September 20, 2013


xml: An alternative to json

That feels... backwards? I am old.
posted by Going To Maine at 6:41 PM on September 20, 2013 [35 favorites]


Also: I do not understand your colors, website. They suggest meaning, but do not seem to possess it.
posted by Going To Maine at 6:43 PM on September 20, 2013 [4 favorites]


YES
posted by Sticherbeast at 7:01 PM on September 20, 2013


Previously
posted by cjorgensen at 7:03 PM on September 20, 2013


> That feels... backwards? I am old.

I thought it was backwards. I am young?

This is cool, but it feels like the most useful aspect is an intro to basic tools (I'd never heard of firebase or heroku, for example). Otherwise a quick google will get you to W3schools for the markup stuff and stackoverflow for the code.

> Also: I do not understand your colors, website. They suggest meaning, but do not seem to possess it.

Click on one of the divs: it'll highlight related knowledge so you can next-step yourself without having to ask the internet, which is kind of neat. I'm apparently supposed to learn that heroku thing.

Also, php will lead you to laravel, which then inculcates you into the ranks of web artisans.
posted by postcommunism at 7:12 PM on September 20, 2013


Actually, now that I look at this the interactive associations are great, the actual links to content are super lazy. Half the time they just point to the basic docs.
posted by postcommunism at 7:17 PM on September 20, 2013 [3 favorites]


Is there a way to highlight the ones that, in five years, will be more useful on my resume than TurboPascal?
posted by thelonius at 7:21 PM on September 20, 2013 [3 favorites]


"So it says here that you've moved a bunch of turtles in Logo."
posted by Sticherbeast at 7:24 PM on September 20, 2013 [12 favorites]


No Fortran? Get with the times!
posted by Renoroc at 7:24 PM on September 20, 2013


An alternative approach, with an open curriculum and design: The Odin Project

Also (ahem) I've been working a series of webdev reading lists for my students, which might prove worthwhile to someone.
posted by Bora Horza Gobuchul at 7:25 PM on September 20, 2013 [15 favorites]


Stay far away from w3schools, its filled with out of date and/or bad information (details: http://www.w3fools.com). I suggest the mozilla developer network - MDN - instead (https://developer.mozilla.org/en-US/).

(Sorry about the links i typed this on my phone)
posted by askmehow at 7:29 PM on September 20, 2013 [15 favorites]


As someone who basically stopped doing web-anything around 2004 (cross-browser issues.. funkiller), this site is pretty awesome. Learned about it earlier today when a classmate posted it to the piazza site for our web programming class. Without the suck (internet explorer and Netscape) development seems exciting again.
posted by unmake at 7:41 PM on September 20, 2013


It's worthwhile noting that a lot of the web developer documentation that was previously congregated around browser makers - Opera, the previously mentioned MDN, some of Microsoft's material - is being centralised, edited and updated at the open Web Platform Docs, which promises to become a canonical resource.

We might also use this opportunity to pour one out for Web Monkey, which has been shuttered for the fourth (and probably final) time. In its heyday, the Monkey was a terrific resource. Add to this .net magazine losing a lot of content when they attempted to move past articles into Creative Bloq yesterday and it's clear that very few people are concerned with archiving and mirroring this stuff. I've compared it to building architecture that is abandoned and swept by fire every few years.
posted by Bora Horza Gobuchul at 7:48 PM on September 20, 2013 [10 favorites]


Aww, poor Microsoft. The site should do ASP.NET MVC at least.
posted by Ad hominem at 7:48 PM on September 20, 2013


Does it teach ColdFusion? All my favorite websites use ColdFusion.
posted by spikeleemajortomdickandharryconnickjrmints at 7:52 PM on September 20, 2013 [15 favorites]


Bug filed: SQL references JSON but not PostgreSQL (?)
posted by RobotVoodooPower at 7:54 PM on September 20, 2013


development seems exciting again.

It really is exciting right now! I'm a bit in love with full stack Javascript and with node-webkit desktop apps. Javascript's come a looong way from its place in the 90's as basically "that thing I can never remember that I need for rollover images" and it's really fun.
posted by jason_steakums at 7:59 PM on September 20, 2013 [3 favorites]


This rubs me a lot of wrong ways. The author's self-described title as "Business Technology Analyst" doesn't surprise me when his site includes links to things like neo4j with a description as "the graph database". Yeah, like MySQL is the relational database.

This approach to teaching should be called "buzzword-first".

Take a newbie who wants to learn about development, then teach her Node and Angular -- don't recommend that she read SICP or similar. Don't focus on the ideas, just on whatever's in vogue right now.
posted by unknownmosquito at 8:14 PM on September 20, 2013 [1 favorite]


If you get into javascript and discover what seems to be anomalous behavior, oh say, '2'+2=22. Try searching stackoverflow.
posted by sammyo at 8:17 PM on September 20, 2013


xml: An alternative to json

That feels... backwards? I am old.
xml: when you need to store structured data, and you hate yourself
posted by deathpanels at 8:26 PM on September 20, 2013 [21 favorites]


SCIP, yep a kid that wants to make a web site to sell punk belt buckles should jump deep into lisp. Everything's data, right?

Good book, wonder it'll convert to mobi, be good to have on the kindle.
posted by sammyo at 8:26 PM on September 20, 2013


SCIP, yep a kid that wants to make a web site to sell punk belt buckles should jump deep into lisp. Everything's data, right?

Ahh...the Wizard Book. I don't think I'm advance enough yet for its magic.
posted by Carius at 8:35 PM on September 20, 2013


SICP has been converted to kindle but honestly it's not worth it IMO. We've learned a lot about how to teach programming in the last 40 years.
posted by I've a Horse Outside at 8:37 PM on September 20, 2013


I haven't done JavaScript heavily for a couple years and I'm now on a project to "modernize" a huge LOB app written in Silverlight. Damn, there are so many frameworks and libraries monkey patching JavaScript now. Gotta know jQuery, knockout.js, and a half a dozen other things nowadays.
posted by Ad hominem at 8:40 PM on September 20, 2013


Apart from the NoScript fail that wierdo noted, the one element of "Everything you need to know about web development" I expected to see at the top of the page is PAGE DESIGN. No such luck.

You can know all of the rest and still wind up with No Visitors thanks to a clumsy, obscure, overloaded, confusing, needlessly dense, artless page.

No "Everything" site can afford to ignore design; bricks, glass and mortar are useful, but great architecture starts with a plan. There are loads of such sites, like:
10 principles
White space
43 Mistakes

Designing high density pages
posted by Twang at 8:41 PM on September 20, 2013 [20 favorites]


xml: when you need to store structured data, and you hate yourself

xml is just fine for an appropriate purpose, it does seem conducive to absurd abuse. Storing an entire database or taging (with several attributes) each bit in a bitmap is just going to break the format. A bunch of somewhat sparse messy hierarchical data that is self describing can be pretty useful. But usually just a pain.
posted by sammyo at 8:41 PM on September 20, 2013 [1 favorite]


Funny thing is, JavaScript sort if is Lisp, with a whole lot less parens and a whole lot more curlies. In the words of crankypants Crockford, it is "Lisp in C's clothing". And now you can run it on the server, in the browser, and share code between the two. There are very good parsers for JavaScript, and a common AST, providing a solid point from which one might jump off and build all kinds of useful things. Oh, and don't forget about the people gradually pushing JS to be the language it always could have been but that the ineffectual TC39 committee have thus far failed to envision, like asm.js and web workers. Oh, sure, ES6/Harmony or whatever it's called now may never get out of development hell but in the meantime, you've got enough bells and whistles and wacky ideas to repurpose the web as a true software platform, and it's all coming through a language that, ten years ago, was something you only used to change the color of a button. Funny, that.

It is, actually, a pretty interesting time to hack around with the web.

Though I'm not sure i like these quick start guides.. something eerily 'cliff notes' about it.
posted by deathpanels at 8:42 PM on September 20, 2013 [1 favorite]


Here's what you need to know about web development:
- There are a bunch of different ways to do everything
- Many of these ways are good in some situations and horrible in others
- Performance is way more important than you think
- Dreamweaver is not a typewriter
- You will always be learning something, if you stop learning you are in trouble
- I don't want to tell you how to do your job, but could you make the logo bigger?
posted by fifteen schnitzengruben is my limit at 8:48 PM on September 20, 2013 [15 favorites]


node.js has been my 'next thing to learn' for a few months now; good to suddenly have a couple arrows on where to get started!
posted by kaibutsu at 8:49 PM on September 20, 2013


deathpanels: "Funny thing is, JavaScript sort if is Lisp, with a whole lot less parens and a whole lot more curlies."

I really don't get this claim, Crockford dictum or no. Plenty of other languages have first-class and anonymous functions, but that's like a third of what makes a Lisp a Lisp. The other two thirds are comprised of a homoiconic syntax that enables powerful and intuitive macros, a language-level emphasis on immutable data, and then probably some other distinguishing features that I'm not thinking of right now.
posted by invitapriore at 9:05 PM on September 20, 2013 [6 favorites]


Virtually every feature in PHP is broken somehow. The language, the framework, the ecosystem, are all just bad. And I can’t even point out any single damning thing, because the damage is so systemic. Every time I try to compile a list of PHP gripes, I get stuck in this depth-first search discovering more and more appalling trivia.
PHP: A Fractal of Bad Design
posted by rustcrumb at 9:08 PM on September 20, 2013 [9 favorites]


That asm.js looks pretty neat - some C- and C++-based libraries could be worked into a pretty useful web app, and still be somewhat performant.
posted by Blazecock Pileon at 10:25 PM on September 20, 2013


It's hilarious when you finally realize how incredibly and arbitrarily fashion-driven tech is.

First everything was on the computer, then it was all in "the cloud." Now we're pretty close to realizing how epically dumb that is and flipping back again.

But hey, gotta have that hot new html5 app that "performs best in Chrome." Just try not to think too hard about how we've come full-circle to MS Frontpage-created sites that were "optimized for Internet Explorer version 5+."

jQuery is really really cool. Everything else is utterly arbitrary and what is AMAZING today will be considered terrible next week when we all go back to the thing that was considered terrible this week.
posted by drjimmy11 at 11:32 PM on September 20, 2013 [10 favorites]


ps this site displays only:


"{{ boxes[more_index].name }}

Even more links!

Close"


For me in the latest version of Firefox. He probably should've bootstrapped his Backbone a little harder.
posted by drjimmy11 at 11:33 PM on September 20, 2013 [6 favorites]


Yes, I'm seeing what drjimmy11 is on all the browsers I have. I don't see any web page advice, I only see a broken web page. This is, I believe, the proper definition of irony, not the Alanis definition.
posted by Hamusutaa at 11:51 PM on September 20, 2013 [1 favorite]


Yes, I'm seeing what drjimmy11 is on all the browsers I have. I don't see any web page advice, I only see a broken web page. This is, I believe, the proper definition of irony, not the Alanis definition.

Ditto. This is ridiculous.

SICP has been converted to kindle but honestly it's not worth it IMO. We've learned a lot about how to teach programming in the last 40 years.

Such as...? The value of SICP is in showing how little has really changed when it comes to understanding the fundamentals of computer science. Perhaps you're advocating for usage of How to Design Programs?

Unfortunately, it rather seems to me that we've shifted from "here's how you actually learn what software engineering and computer science are" to "slap this onto that and configure it and you've got yourself some software, buddy--it's just like lego blocks!"

That said, I will agree, you don't need to buy it when you can download it free here.
posted by dubitable at 12:36 AM on September 21, 2013 [2 favorites]


Lesson 1: The whole thing is still in a ridiculous state of incompatibilities and jankiness for this day and age.
posted by GallonOfAlan at 1:23 AM on September 21, 2013 [3 favorites]


MIT/archive.org hosts SICP as well as the accompanying lectures for free online, so yes, there is no need to buy it.

Anyway, the point dubitable made is the one I was trying to make. I understand that Lisp is very beside-the-point for someone who just wants to whip together a website.

Fundamental computer science however is not beside the point for someone who really wants to learn how to write good software, for the web or otherwise.
posted by unknownmosquito at 2:46 AM on September 21, 2013 [1 favorite]


I've got the same crossbrowser -- oops I mean allbrowser -- problem as drjimmy11 and dubitable have.

Which is my everything I need to know about web development: come back later when somebody's fixed it.
posted by surplus at 2:56 AM on September 21, 2013 [3 favorites]


come back later when somebody's fixed it

Actually, the fact that it doesn't work now means I won't be back to check on it.
posted by urbanwhaleshark at 3:41 AM on September 21, 2013 [3 favorites]


Yeah...I'm getting a useless "About Me" page. No links to lessons. Nada.
I suggest Mods remove this post. Maybe it can be re-posted once there's actually something there?
posted by Thorzdad at 4:31 AM on September 21, 2013


That would remove the public shaming
posted by thelonius at 4:45 AM on September 21, 2013 [1 favorite]


1. Don't use any scripting unless absolutely necessary. Provide graceful degradation where possible if you do.

2. Always choose function over form.

3. Optimize images. Minimize HTTP requests.

4. Cross-browser issues are nothing like they used to be, but they still exist. Plan, and test, for them.

5. Responsive design is more and more important.

6. Flexbox will eventually fix everything.
posted by Benny Andajetz at 4:53 AM on September 21, 2013 [5 favorites]


OK, I have not gotten around the bug that prevents many of us from seeing whatever this site is supposed to be about, but I did click on his "about" button which took me to his LinkedIn page and I am delighted he's a Deloitte tech analyst.

"Everything you need to know" indeed.
posted by surplus at 7:24 AM on September 21, 2013


Looks like the latest version didn't include all the commas in the content.js file. A shame, but I'm not going to take web development advice from someone who doesn't even check the page works before deploying.

Also - Angular.js fails in a pretty rubbish way.
That's put me off using it.

Anyway - I'm a bit bored today, so I'll see if I can fix this and release it to a different web site.
posted by zoo at 7:27 AM on September 21, 2013


Ah - It's back.

That's a shame, because I just finished loading it up onto neocities.
posted by zoo at 7:39 AM on September 21, 2013


It's broken for me. And I could see it when I first saw this post.
posted by hoyland at 7:40 AM on September 21, 2013


So - This is essentially a badly coded skill-tree, and if done properly, I can imagine it looking like this.
posted by zoo at 8:00 AM on September 21, 2013 [2 favorites]


He fixed it. The site was so brittle that one missing comma in the javascript took the entire thing down.
posted by reishus at 8:59 AM on September 21, 2013


It's a work in progress site and this guy's first substantial project on GitHub, so yeah, it'll be flaky until he works the kinks out. Not really all that upset about it, this is increasingly how a lot of these beginner personal projects go - get something up that demonstrates your idea, release it to the community so you can get feedback, and get to work learning and fixing problems. And, y'know, it's a not-quite-there free collection of knowledge and not a flaky cash grab, so ehh not getting the uproar.
posted by jason_steakums at 9:02 AM on September 21, 2013 [3 favorites]


I would say that this is actively harmful to the group he's supposedly trying to attract - beginners.

If I were a beginner and started in the top right hand corner, I would get lost somewhere around the third link.

It's just a link dump with a fancy wrapper.
posted by lupus_yonderboy at 9:47 AM on September 21, 2013 [1 favorite]


On the Pull Request page, he's actively soliciting suggestions for improvements. I think many of you would be enriching a resource by turning your feedback and "public shaming" into constructive advice.
posted by batmonkey at 10:25 AM on September 21, 2013 [2 favorites]


Something that I have noticed is that is getting easier and easier to learn the basics thanks to sites like Code Academy, Code School and an enormous amount of other resources. But no one teaches how to glue everything together.

You can learn HTML, CSS, JS, Python, Ruby and whatever technology is fashionable right now through those sites but you're on your own if you want to create an app that is not a ToDo list.

Learning the basics should just be the beginning, right now it feels like it's an end in itself. I'm not entirely sure where I'm going with this but I feel like the focus is in the wrong place.
posted by Memo at 10:26 AM on September 21, 2013 [2 favorites]


> constructive advice.

My constructive advice would be to do something very different, frankly.

If he just rearranges this site, it's going to remain just a bunch of links to other sites. It is never going to hit its stated goal - basically, to get you from being a beginner to a journeyman web designer.

And there are far too many links to advanced topics that you probably won't need. You certainly won't need most of these links for most projects! Having this huge page will simply serve to frighten away your average beginner.

He'd do a lot better if he had a much shorter curated list with a solid explanation at each step of what was going on and why learning the next lesson is important - in other words, a site that's completely different from this one.

There's one really stellar point, mentioned above - he does not bring up PHP, and that's really good. PHP is an appalling language - I post "A fractal of bad design" somewhere several times a year - and is responsible for wasting millions of hours of work a year. (And I'm actually positively inclined towards almost all languages - even COBOL had an important place!)

This isn't minor - PHP is the first thing people learn for active web pages, because it's available on pretty well every server, and you just have to upload a page that ends in .php to get started.

This great decision is undercut, however, by the fact that none of the articles he posts really explain how to make your webserver speak any of the languages he references.

Look at the Flask installation page, the first web framework he proposes, for example. The installation is a little tricky - but, much more important, that installation doesn't actually leave you with a webserver serving Flask! If you get to the bottom of this tutorial, you get instructions on how to deploy your program - but NOT to the webserver you already have, but one of a set of special purpose servers, or in fact "hosted platforms", with absolutely zero information about "how to make these pages appear on a specific URL".

Don't get me wrong, the Flask documentation is totally reasonable - but it's not aimed at beginners but rather at working programmers with some years of experience.

If I were a young person starting web programming, I'd be wanting to add a few active pages to my existing web site. I'd look at this site, start at the top-left hand corner - but if I went either across or (God forbid!) down, I'd soon end up doing something that had no apparent connection to "making some new web pages".

I'd throw away the page, and I'd look at what my server offered, discover that I could serve PHP just by putting up a few pages. One I discovered that I had a full-featured programming language I could use that way, I'd go wild with it, and probably feel contempt for "academic programmers" until, quite a bit later no doubt, the problems of PHP finally hit me in the face (and at that point, it might be too late to fix - see Facebook and the Wikipedia, both of which spend a great deal of time dealing with the fact that they're based around PHP...)

This page is no service. You'd be better off going right to the first link, Code Academy, and never coming back.

And there's no way a link dump will ever really be of service. The project, as it stands, is not fixable.
posted by lupus_yonderboy at 11:09 AM on September 21, 2013


I am the only juvenile response here...."control the DOM by Javascript"!

Hello? if that's your only way to control the DOM, you need a better safe word, SRLY dude....
posted by kairab at 12:08 PM on September 21, 2013


and then probably some other distinguishing features that I'm not thinking of right now.

Bob Nystrom expands on your line of thought.
posted by Rhomboid at 1:27 PM on September 21, 2013 [1 favorite]


« Older Simon Says   |   Your feel good link of the day. Newer »


This thread has been archived and is closed to new comments