Learning JavaScript: What You Might Have Missed

I just started teaching my first college course this week in JavaScript, a language I'm sometimes ashamed to say I love. Teaching this class has gotten off to a fantastic start. It became quickly apparent that I've been hoarding a number of golden nuggets of JavaScript resources. I really enjoyed sharing some of them with my class, so I also gave a similar lightning talk at the Memphis Java User Group where it was well received.

The resources below are loosely ordered from beginner to expert. All of them have give me something to think about.

w3schools

w3schools was really the first introduction I had to web programming. Much of the material is out of date, but the quantity and diversity of the tutorials provided more than makes up for it. Each tutorial comes with a quiz, so you can make sure your eyes didn't glaze over during the process. I find it a great reference for quickly getting a start or just refreshing my mind, even if the examples are not exactly idiomatic for modern development.

Komodo Edit

Is a tool I've just learned about, but I can already see why people like it. My students use it almost exclusively for editing HTML, CSS, and now JavaScript. It also claims to support popular scripting languages such as Perl, Python, PHP, and Ruby. The editor has an toolbar icon for launching multiple different browsers to test your web pages. Syntax highlight and auto-completion round out the feature set.

Notepad++

When my mind tires of trying to remember my vim commands, I usually do my text editing in notepad++. Syntax highlighting for more languages than I can list is built in, as well as a tabbed layout. Notepad++ is a very responsive and light weight solution for such a fully featured text editor. I make heavy use of it at home and work.

Chrome Developer Tools
FireBug
Internet Explorer Developer Tools

If you haven't used a modern web browser's developer tools, do yourself the service of checking out the ones in listed above (all should open with shortcut F12). Chrome and IE tools are built right into the browser, and Fiefox's FireBug Add-on gives you the same options. These tools let you live edit your html and css, check javascript errors or run javascript against the page in a console, and let you see the name, speed, and size of resources downloaded on page refresh.

jsFiddle

Liked the live editing in the developer tools, but want a lighter weight tool for prototyping or the ability to easily share? Enter jsFiddle, a tool that shows html, css, and js files all on one page. A number of scripting libraries are quickly included under the panel on the right, rendered pages appear on the bottom right. Save your file and the URL changes to a link you can share with anyone, allowing them to edit and fork your work.

JavaScript: The Good Parts

If I told you this was the best hour spent in learning JavaScript, I'd probably not be lying. A talk given by Douglas Crockford on topics covered in his book of the same name, this Youtube video is part of the very informative Google Tech Talk series. This talk gives a great depth of understanding of the gotchas of the language as well as some history.

jsLint

Again by Douglas Crockford, jsLint proudly states that it will "hurt your feelings". This is because most of our JavaScript is terrible, since the interpreter accepts all types of misconstructed JavaScript. jsLint says no, giving you a long list of warning to pour over to clean up your code (and probably reveal a few bugs along the way). Not for the faint of heart.

Reddit

Reddit, the big bad link aggregator has sometimes been referred to as a milder version of 4chan. While you might not get much JavaScript help out of the main site, there are many subreddits that can give you a step up. After you tire of the /r/javascript subreddit, check out /r/programming, or /r/compsci.

StackOverflow

Whereas language specific subreddits are usually very beginner friendly, StackOverflow demands a little more effort to submit questions. In return you often get better answers, often found with a Google search before you even post. The large size of the community means most common questions have been answered before and fantastic SEO makes the site very navigable from the Google Search bar. Tagging let's you narrow your scope to JavaScript.

jQuery

A JavaScript library for all seasons, jQuery should be the standard library for the JavaScript language. It provides everything you could want for DOM manipulation and event handling.

Backbone.js

If you thought jQuery was the bees knees (hint: it is), you'll probably be impressed with Backbone. Backbone let's you create a fully featured MVC application, in JavaScript. That's no joke, your entire model can run client side using AJAX for REST calls for persistence.

Knockout

Liked the idea of Backbone, but a bigger fan of the MVVM architecture? See Knockout. My employer makes heavy use of this JavaScript framework to create very interactive web pages that responds to user events. Even better the tutorial is written in knockout, so getting a feel for what knockout does for users happens as you learn how to use it in code.

Node.js

Thought that your JavaScript application was bound to the browser? Think again. Node.js is a very powerful JavaScript engine for building server-side JavaScript application. The event model of JavaScript is appealing for many server-side apps.

Canvas

Tired of manipulating DOM elements? Start drawing. The HTML5 Canvas element let's you go nuts with creativity. You've probably already seen what it can do on the Google home screen and plenty of games are now giving it a shot. If you need some graphical splash in your app, Canvas is a good tool to research.

Trello Tech Stack

Not convinced that all of this fancy new tech can be used to build real software? Heard of FogBugz, Fog Creek Software, or Joel Spolsky? If you haven't go search, I'll wait.

No seriously go look them up if you don't, it is more important than this article.

Now that you know I'm about to make an argument from authority. Check out the link above on the Tech Stack for Fog Creek's new product Trello. This is a massively scalable freemium web app, built on Backbone and Node.js. It is expected to be a substantial part of Fog Creek's business in the future.

Conclusion

Whether you are just getting started developing in JavaScript or are a mature web developer looking to expand your reach, there are plenty of tutorials and tools still to be found. Make sure to check out some of the links above and happy coding.