Learn node/express/jade/ajax/json/javascript/css3/html5 by example

Question

I used to do a lot of freelance web development for sports clubs and self-worshipping individuals back when I was at school.  That was in the days when Internet Explorer 5/6 ruled supreme, animated GIFs were cool, and many other painful memories.
While I am probably still proficient with ASP/VBscript/IIS/MS SQL Server/Access despite doing no web development for almost a decade, I'm not masochistic enough to touch them again so I decided to learn some "modern" and "intelligently designed" web development techniques last week.
If anyone else is interested, and (like me) learns from examples and by fiddling then you will find the following useful.  It's a little demonstration project that I created, which allows editing of an inventory table in a MySQL database, produces aggregates/summaries of the table, and applies a branch-and-bound knapsack solver to work out which combination of items would be the best for you to steal borrow, given the maximum total weight that you can carry.
github.com/battlesnake/nodejs-starter
Feel free to fork it all you want.
As with all most open-source software, the documentation (when it even exists) leaves a lot to be desired.  However, like most "tech startup tools"-style software, the design is so elegant that it explains itself without the need for documentation 95% of the time.  REPL often gives answers quicker than a google/StackOverflow search.
Upon first seeing node.js and mongo, I thought "an entire environment running on JavaScript? what could possibly be worse?!?!"
But after learning JS properly (i.e. not the cargo-culting late 90's style of it), I have taken a real appreciation for the language.  It is probably as slow as Python (or maybe considerably faster with the V8 compiler), but so much nicer to use!  The MySQL package for node.js actually makes it easier to write proper parametrized queries than to write the typical "lazy, insecure" junk of a rushed 90's commercial project.
The Jade template engine is a real pleasure to use, which when combined with the Express web server, makes me think that all my time fighting working with and learning ASP and PHP is going to become a distant waste.
I have yet to use Stylus, a CSS templating engine which presumably solves the problems incurred by the popularity of small-screened pointless, fashion nonsense tablets and smartphones.
CSS3 is... well nothing too drastically different from its predecessors, but the flexbox layout mode is really nice, and even Internet Explorer supports it (well IE9+ anyway).  Thanks to Wine, I have IE6,7,8,9,10 all installed and running simultaneously, so I can see how aweful the IE<9 versions are at rendering pretty much anything involving flexbox layout, html, css, etc.
JSON is easy, so google it if you want to know what that is about.  It solves a problem well and doesn't really do anything flashy, so I'll leave wikipedia to market it.
AJAX always seemed like a simple concept, and indeed it is!  One little gotcha that I found was that when adding HTML fragments from an AJAX response to the document DOM, the default stylesheet doesn't seem to get applied - so everything is "display: inline", amongst various other problems.  This was solved by mercilessly stealing copying from the W3's default HTML4 stylesheet.
I really should learn JQuery and implement that to reduce the code size, but I couldn't quite be bothered at the time.
Happy learning!
Last edited by windows_me (2013-08-26 22:05:36)

Answer 1

I wondered the same thing, until I watched all the way to the very end where he gives a URL for source and slides:
http://mad.com.au/MAX2013/
iBrent