libraries, webdevelopment tools, learn web design

I’ve been meaning to do a roll-up of top JavaScript, CSS & HTML development tools that I use or have been recommended to me.Today I realized I just needed to do it. It’s definitely not an all-inclusive list so if you see some that you feel I should add or remove, let me know what you think in the comments.

Here they are by category:

  • Sites and Lists to Learn From
  • Debugging Tools That Make Life MUCH Easier
  • CSS Editors
  • CSS Frameworks
  • CSS Resets
  • JavaScript Libraries
  • JavaScript Minifiers
  • JavaScript Shells
  • Color Management
  • Editors and IDEs
  • Wireframing
  • Browser Testing
  • Testing
  • Documentation
  • Server-Side JavaScript
  • Books – JavaScript/DOM
  • Books – JavaScript Libraries
  • Books – HTML & CSS
  • Books – Performance
  • Podcasts & Videos
  • Conferences
  • Blogs

Sites and Lists to Learn From:

You want to make sure you stay up-to-date on the latest and greatest web development best practices and the following sites do a great job of providing information:

Script Junkie – I’m a little biased since I manage that site but I’ve worked hard to get the best developers in the industry to create articles that provide actual solutions to common problems. No theory or odd examples. The articles are solutions-based.
JSMentors Mailing List – Want to learn JavaScript from elite developers? Then sign-up for this list
MIX Online – Great articles and op-ed pieces on web development
Badass JavaScript – It’s exactly that; badass. Great JavaScript-related content and news.
Daily JS – A daily does of great JavaScript content. Love it.
A List Apart – Must read for any web developer.
Smashing Magazine – A nice breadth of articles covering many aspects of web development and design.
Nettuts+ – Absolutely amazing tutorials on current technologies. Covers server-side and client-side development.

Debugging Tools That Make Life MUCH Easier:

Effectively debugging JavaScript applications is a royal pain in the derriere and to compile that, the available tools just don’t stand up to those used by managed code developers. Luckily, we do have a decent set of tools that lessens the pain substantially. Firebug is definitely a must have since it incorporates so much DOM & XHR introspection as well as the Web Developer Toolbar. Both are simply awesome. I also love Charles for HTTP sniffing and it’s saved my butt when Firebug couldn’t handle it.

IE8 Developer Tools – Microsoft’s browser debugger tools
Firebug – Mozilla’s browser debugger add-on
WebKit Web Inspector – Webkit’s browser debugger tools
Fiddler – HTTP Sniffer. Great for seeing Ajax requests.
Charles – HTTP Sniffer. Great for seeing Ajax requests.
Service Capture – HTTP Sniffer. Great for seeing Ajax requests.
dynaTrace Ajax – HTTP performance analyzer
Web Developer’s Toolbar – All purpose Firefox toolbar to inspect everything on a page
YSlow – Analyzes page performance based on accepted industry best practices.
PageSpeed – Analyzes page performance based on accepted industry best practices.
DebugBar – An IE plugin that brings advanced debugging features to IE including JS, DOM & HTTP inspection
Pendule – Chrome extension similar to Firefox’s Web Developer Toolbar Add-on

CSS Editors:

I prefer to write my CSS code by hand. Call me old-school but many swear by the following CSS editors. CSSEdit by MacRabbit (Mac only) is especially loved by many designers.

Rapid CSS

CSS Frameworks:

These frameworks have really taken off. Like their JavaScript brethren, they help to abstract much of the complexity of building consistent layouts in cross-browser fashion. They’re definitely something I need to look into more and from what I’ve read, 960 GS & Blueprint are the ones people are looking at.

960 Grid System
Blueprint CSS Framework
Yahoo YUI Grids CSS
Object-Oriented CSS

CSS Resets:

Want to minimize browser inconsistencies? Then use a CSS reset stylesheet to specify baseline CSS styles that make browser presentation defaults more consistent.

Meyer Reset by Eric Meyer
YUI2: Reset CSS

JavaScript Libraries:

I definitely recommend everyone to learn JavaScript as you’ll need it to be a really effective client-side developer. With that said, a good JS library will go a long way to making your development faster and much more stable. These libraries are all very mature and dramatically help to abstract the complexities of cross-browser development. My personal favorite is jQuery, of which I’m a member of the project team.

jQuery UI
Ext JS
Raphael.js – simplifies working with vector graphics on the web
LabJS Dynamic Script Loader – Allows execution and load management of JavaScript files
RequireJS Dynamic Script Loader – Allows execution and load management of JavaScript files
Lawnchair – A lightweight client-side JSON document store
Sessvars.js – Client-side session data management solution
Reactive Extensions For JS
PURE JS Templating Lib
Underscore.js – Utility lib for jQuery that provides a ton of extended functionality

JavaScript Minifiers

Every byte counts when you’re sending files via HTTP and best practices dictate that on a production, you need to optimize all of your files to minimize page load times. Compressing JavaScript code is one of the easiest ways to do that and these tools will help. On the jQuery project, we’ve started using Google’s Closure compiler because it’s generated the best compression. Try all of them out to see which suits you best.

YUI compressor
Closure compiler
Dean Edward’s Packer
Microsoft Ajax Minifer
Dojo Shrinksafe

JavaScript Shells

There are times when you just want to test a snippet of code without actually going through the trouble of creating a full page. That’s where JavaScript shells shine. JSFiddle and JSBin both rock because apart from supporting plain old JS, they also allow you to include a host of libraries including jQuery, MooTools, & Dojo.
JSBin – Shell for node.js development

Color Management:

As a programmer, I’m insanely color scheme challenged. I’m inclined to mix yellow with mauve causing a concerted moan to occur across the design community. Luckily, these tools help you choose web safe color schemes that are not only consistent but won’t burn the eyeballs off your site visitors. 🙂


Editors and IDEs:

You can get code-complete for just about anything via bundles. For Windows, Notepad++ has been just awesome. I wish it had built-in FTP support like UltraEdit.

Visual Studio
Komodo IDE
Sublime Text


I know some of you are cowboys (or cowgirls) and you just want to start hacking. Well, for the truly impatient, these tools at least let you wireframe your pages quickly and easily. I’ve used Balsamiq and FlairBuilder and both rock. It seems that FlairBuilder is really cranking it up with some nice features. Both are Adobe AIR apps which means they’re cross-platform.


Browser Testing:

I’ve been fortunate to have multiple OS versions over the years. My wife would definitely prefer for me to have a couple of less PCs sitting around but it’s let me test out my web apps on a variety of platforms, browsers and OSes. Shoot, I even have a version of IE6! For those with less hardware, these services should definitely help. Note that services like BrowserCam & Gomez are subscription-based but worth the cash if you can afford it.

Adobe BrowserLab
Microsoft Expression Web SuperPreview for IE
TredoSoft MultipleIE

Testing (based on the list by John Resig):

This was a list I snagged from John Resig. Obviously, he’s done a boatload of testing so I know this list rocks. JSLint is the old mainstay created by Douglas Crockford but other have really become increasingly essential to good testing. jQuery developers should definitely be looking at QUnit & jQuery-Lint. The most complete tool is Selenium but it does have a bit of a learning curve. If you’re into determining JS performance, checkout SunSpider, Dromaeo, Google’s V8 Benchmark and JSLitmus. These measure the performance of the JS engine, not your apps.

jQuery Lint
Selenium Core
JSSpec (MooTools)
UnitTestJS (Prototype)
QUnit (jQuery)
DOH Unit Testing (Dojo)
YUITest 2
YUITest 3
W3C Markup Validation Service
W3C CSS Validation Service
V8 Benchmark
HTML Validator Firefox Add-on


Internet Explorer 9 Beta Guide for Developers
Yahoo UI Docs
APIs – Most comprehensive list of APIs on the web
jQuery Docs
jQuery UI Docs
MooTools Docs
Prototype Docs
Dojo Docs
JSON Reference

Server-Side JavaScript

CommonJS Standards Project


The books below are really a great selection. I have many in my own library and every so often re-read them I’m currently reading High Performance JavaScript by Nicholas Zakas. Another great book is Stoyan Stefanov’s Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries. I also highly recommend Steve Souders performance book at the bottom of the list. They’re basically the definitive sources for optimizing your web apps.


JavaScript: The Definitive Guide
JavaScript: The Good Parts
Professional JavaScript for Web Developers (Wrox Programmer to Programmer)
DOM Scripting: Web Design with JavaScript and the Document Object Model
AdvancED DOM Scripting: Dynamic Web Design Techniques
Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)
Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries
Pro JavaScript Techniques
Secrets of the JavaScript Ninja
Ajax Security
ppk on JavaScript, 1/e
Accelerated DOM Scripting with Ajax, APIs, and Libraries
High Performance JavaScript (Build Faster Web Application Interfaces)
JavaScript Patterns
Pragmatic Guide to JavaScript
Test-Driven JavaScript Development (Developer’s Library)

JavaScript Libraries:

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)
Learning jQuery 1.3
jQuery in Action, Second Edition
jQuery UI 1.7: The User Interface Library for jQuery
Rebecca Murphey’s jQuery Fundamentals Training Materials (Creative Commons License)
Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers)
Practical Dojo Projects (Practical Projects)
Concise Guide to Dojo (Wrox Programmer to Programmer)
Dojo: The Definitive Guide
The Dojo Toolkit: Visual QuickStart Guide
Getting StartED with Dojo
MooTools 1.2 Beginner’s Guide
MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development (Firstpress)
Practical Prototype and (Expert’s Voice in Web Development)
Prototype and You Never Knew JavaScript Could Do This! (Pragmatic Programmers)
Prototype and Scriptaculous in Action [Ajax]
Learning the Yahoo! User Interface library: Develop your next generation web applications with the YUI JavaScript development library.
Learning Ext JS
Ext JS 3.0 Cookbook
Ext JS in Action
Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools (Wrox Programmer to Programmer)
Ext JS in Action

Introducing HTML5 (Voices That Matter)
HTML5: Up and Running
Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development
Pro CSS and HTML Design Patterns
Web Standards Solutions: The Markup and Style Handbook, Special Edition
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)
The Art & Science Of CSS
HTML Utopia: Designing Without Tables Using CSS
Build Your Own Website The Right Way Using HTML & CSS, 2nd Edition
Head First HTML with CSS & XHTML
Web Programming Step by Step
Microformats Made Simple

High Performance Web Sites: Essential Knowledge for Front-End Engineers
Even Faster Web Sites: Performance Best Practices for Web Developers

Podcasts & Videos

Script Junkie Videos – Lots of screencasts to help improve your web development
JSConf Live – Discussions with top JavaScript developers
A Minute with Brendan – Listen to the creator of JavaScript discuss the future of the language
Official jQuery Podcast – Discussion with members of the jQuery community
YayQuery – General discussion about front-end development
YUI Theater – Tons of video presentations about JavaScript and the YUI library

JSConf U.S. – THE event to attend in the U.S. for the best JavaScript presentations
JSConf Europe – THE event to attend in Europe for the best JavaScript presentations
Full Frontal – Great speakers and topics relating to front-end development
Fronteers – Great speakers and topics relating to front-end development
An Event Apart – If you’re into web design, this event is awesome and is held in multiple cities
Official jQuery Conference – The twice yearly jQuery event is the always sold out.
SXSW – SO MUCH TO DO at this event. Covers technology along with music and film

Blogs – I’m a little biased on this one because I manage this site but I work hard to get really good content about JavaScript as well as HTML & CSS – the JavaScript mailing list I started with Asen Bozhilov which provides a safe, professional place to discuss JavaScript and learn from the best
JavaScript Weekly Newsletter
JSMag – Monthly Magazine
YUI Theatre – Tons of videos on JavaScript-related topics
John Resig
Peter van der Zee
Peter Michaux
Garrett Smith
Juriy Zaytsev a.k.a. kangax
Dmitry A. Soshnikov
Steven Levithan
John-David Dalton
Stoyan Stefanov
Benjamin Rosseaux a.k.a. BeRo
Diego Perini
Angus Croll
Peter van der Zee
Christian C. Salvadó
Christophe Porteneuve
Nicholas C. Zakas
David Flanagan



Leave a Reply

Share This

Sharing is Caring

Share this post with your friends!