Node.js beginner links

This is the minimal list of links that I think you need to get up and running with node, express, and a fully functioning node site.

Node.js homepage
This is the beginning. Node.js actually runs your javascript file. It's the interpreter runtime. 

Express.js
Express gives you Sinatra-like routing. It gives you the baseline to be able to run a functioning web app.

Mongoose ORM
Mongoose gives you pretty syntax for accessing MongoDB models. It can be your data layer. 

Jade
The default HAML-like template format for express 

NPM
it's a package manager like gem or CPAN for the node universe -- install, compile, update all from one command line. 

NPM module listing
listings of useful NPM projects, super useful.


Tutorials

How to Node.org
Great up-to-date blog, thanks for the suggestion @DShankar!

Nodepad: An in-depth tutorial
How to write a full app, In 15 parts...


For Rubyists

Node JS for my tiny ruby brain
via technoweenie of github


Advanced Topics

socket.io - easy realtime long polling library

coffeescript - beautiful syntax for javascript -- you can write an entire node project in coffeescript. Worth +10,000 elegant hacker points.

Node Inspector - debugging for your server

nvm - node version manager, kind of like rvm but for node -- cleanly lets you switch between node.js interpreter versions

God bless @scribd, they've released open source to solve that godawful Flash wmode z-indexing bug.

The dreaded problem that most web developers come across is the z-index issue with flash elements. When the wmode param is not set, or is set to window, flash elements will always be on top of your DOM content. No matter what kind of z-index voodoo you attempt, your content will never break through the flash. This is because flash, when in window mode, is actually rendered on a layer above all web content.

There is a lot of chatter about this issue, and the simple solution is to specify the wmode parameter to opaque or transparent. This works when you control and deliver the flash content yourself. However, this is not the case for flash ads.

...

So, to solve all this, I wrote some javascript that will dynamically add the correct wmode parameter. I call it FlashHeed. You can get it now on the GitHub repo.

It works reliably in all major browsers, and has no dependencies, so feel free to drop it into your Prototype or jQuery dependent website.

 

Three User Experience Lessons from the Terrible Garbage Web App Hall of Shame: MyParkingWorld.com

The web is incredibly empowering. Perhaps that's why when something is so thoroughly broken, I feel it viscerally in my stomach. Nausea and gnashing of teeth ensue.

That's what happened today when I opened up my browser to look for monthly parking in San Francisco and found IMPark's monthly parking search online. At first glance, everything seems fine.


But peer deeper into this web app and you'll find the soul of a twisted, infuriating, horribly broken waste of electrons.


Lesson 1: Reset state in Javascript on DOM load

Just because you set your form elements to be something in your outgoing HTML doesn't mean that you'll be in the correct state. They're doing an elementary AJAX call (why the hell is this in ajax anyway?) to refresh the cities. But what if I select USA, then refresh? This JS totally assumes that it will always be in the correct state -- but my browser stores form values after reload so as to avoid data loss. Incidentally, this is what happens also if you use the BACK button. And contrary to popular belief, the back button is great. Users love it. I love it.

What ensues isn't pretty...


OK, rookie mistake. But what happens when I select something, anything? I should be able to click to Canada, then back to USA, right?

Nope. Amateur hour. Then click around a bit more and you get...

WHAT THE...  How did we get here? Wow, total error fail. I hate you.

Lesson 2: Let me navigate the way I want to navigate

OK so I've searched for San Francisco. Here it is.


But for some reason, I can't cmd-click to open each of these lots in a new tab. This is a habit I've picked up to avoid the general latency of the web -- why round trip and go back/forth when you can just open a ton of tabs and triage as you see fit there?

Actually, this is a form element, of type submit. Are we in like 1995 again? What the hell is the point of

This is bad also for SEO. OK, amateur hour web dev, what are you thinking? You're costing IMPark money by hiding this info from Google. Way to go. If I search for "Mission Bay Parking" I should get to the page you're hiding behind a form input submit. TWO THUMBS DOWN.

Use a link. A HREF! Don't navigate using Javascript. Don't navigate using a POST from a form input submit. I'm starting to understand why people are so obsessed with REST-- because if you're RESTful, you won't do retarded things like this. Now I understand that the RESTful formalism is like a straightjacket that keeps an insane person from cutting themselves.


Lesson 3: Test your damn app people. Please.

OK, so I'm looking for lots cheaper than $250/month in my area. Yes, that's a parking space, not rent. That's the extortionary fee charged by my current apartment building in South of Market.

Oh, I guess there are none. Oh wait. That's not right.

FAIL!!! In fact pretty much all of the listings have rates that are less than $250/month. First, that confirms SoMA Mission Bay is basically the most god-awful overpriced yuppie-trap in all of San Francisco. Second, that confirms that the creator of myparkingworld.com is too busy smoking crack to test if their app works AT ALL.


In conclusion

IRONY OF IRONIES: The creators of this godforsaken mess were nominated for the MSDN Code Awards. Microsoft, HOW COULD YOU!?

I feel the KnowledgeTech development team should win the award because the Monthly Parking System project is a true testament to Microsoft technologies and tools and their high-level of integration and cohesiveness.

For Microsoft's sake... I hope not.

Bleeding edge Javascript techniques from the creators of jQuery, Prototype, Dojo and YUI (liveblogged from #sxsw)

Cross posted from my personal posterous, where I posted a little bit while we were at SXSW...

Here are my quick notes from SXSW talk "More Secrets of Javascript LIbraries"

Bundling/dynamic loading
(Nate Koechley, YUI)
Javascript files for modern websites really have gotten huge. So it makes a difference how you load them. Some cool tools mentioned:


Meta language libraries
(Andrew Dupont, Prototype)

  • GWT turns Java into Javascript
  • Pyjamas turns Python in to Javascript
  • Cappuccino by 280 North turns Objective-J into Javascript
  • Google Caja turns Javascript into safer Javascript.

Google Caja sounds like a fascinating way to allow rich JS embeds on-page, perhaps solving the XSS dangers of embedding 3rd party JS. Definitely going to check that out later.

Dupont points to Resig's blog post about JavaScript Language Abstractions that a lot of these meta-language libs actually divorce you from being able to harness the full power of Javascript because you never actually learn how to write it.

"Thicker abstractions have more hassle, but offer greater rewards." --Andrew Dupont

At the end of the day, I think you use the tools that work best for you. I love what the guys are doing at 280 North, but a site like Posterous probably wouldn't use it because we're more of a native web experience. And in talking to them, they're not meant as a replacement for Prototype, etc. Cappuccino is really for extra-rich internet apps where you might use Flash/Air, instead of classic native websites. So different strokes for different folks!


Accessibility
(Becky Gibson, IBM / Dojo)

ARIA = Accessible Rich Internet Applications. New standard for supporting screen readers, magnfiiers, etc. Lets us JS developers create tree controls, tabs, and rich JS functionality but still have it work great for those needing assistive tech.

Biggest issues with accessibilty and rich JS content:
  • Adding dynamic controls that you create to the tab order -- by default only links and form controls are added, so if you add onClick listeners to direct divs, etc -- screen readers often can't even see these things.
  • AJAX'ed content that gets inserted into the div sometimes doesn't get picked up because assistive technologies don't get notifications of page updates.

Pretty cool stuff coming -- hopefully browser support comes sooner rather than later, since that determines when we'll be viably able to use these new standards. Might have to switch to jQuery to take advantage of this on Posterous.


Performance and Testing
(John Resig, jQuery)

Cool jQuery profiler plugin for Firefox tells you what's happening during load time.

"The very act of measuring it is causing the problems." --Resig. Timer resolution is only 15ms on Windows, for instance -- error rate 50 to 750% using your own JS timers.

Also cool: Firefox, Safari 4 and IE8 all have built-in JS profilers too.

Testing using FireUnit. You can actually add profiling data as part of tests, so if certain tasks take too slow in a given browser you can build that into your JS test suites. Cool.

John Resig is a badass. He just busted out Big-O notation on analyzing JS DOM manipulation.

The jQuery team runs 6 test suites in 11 different browsers (not even including multiple platforms) that must be run on every commit. But luckily they created TestSwarm so you can automate browser JS unit tests. Also awesome -- can script manual testing cross-browser too. Brand new project John Resig is working on now, but he says you can sign up on the site to hear about when it's up.

How to get Internet Explorer javascript debugging really set up using Visual Web Developer 2008 Express (free version)


I don't know why all the existing articles out there in Internet Explorer javascript debugging always tell you to try the Microsoft Script Editor or other such steaming piles of feces from 2002. Microsoft's Visual Web Developer 2008 at least was released in the last year of the Bush presidency, instead of the beginning of the first term. They GET you by disabling the ability to attach to existing processes, but turns out you don't need to attach... you can just create an attached browser directly out of the free version.

Epic win.

First, download the free version of Visual Web Developer 2008 here. Install it. Enjoy waiting twenty minutes. Get a cup of coffee. Don't sit there waiting for the worst out of box experience ever, whatever you do.

Next, go to Internet Explorer's Internet Options and set Internet Explorer as your default browser. I know, terrible, but you gotta do it -- otherwise VWD2008 tries to use Firefox, Chrome or your other superior default browser and you lose the ability to debug IE7 in all of its awful putrescence.

While you're in Internet Options, you should also de-select disabling script debugging and enable debug messages in the Advanced tab.

Now you have to create an Empty Web Project by clicking New > New Website. Now click Debug > Start Debugging. It'll open a new IE window pointed at localhost, but just fire up whatever to-be-debugged website in that window. 

Awesome. Now any errors should drop you into the VWD2008 debugger. ROCK ON.

Javascript super killer tip: Always use innerHTML if you have no JS lib and it has to work in IE.

Recently while writing some features for Posterous, I ran into a super simple but insanely annoying bug where IE fails to properly pick up id and name fields when creating new DOM elements in JavaScript using document.createElement().

Internet Explorer completely fails to add created DOM elements to the lookup table of named elements as targets. If you generate an iframe and want to POST to it from your programmatically generated FORM tag (by setting TARGET="your_new_element_name"), you're out of luck and IE will try to create a new window instead.

InnerHTML to the rescue. The abomination of standards that is innerHTML works pretty well across all browsers. John Resig is so right when he says the DOM is a mess. Thank god for things like jquery.