Here they are by category:
Sites and Lists to Learn From
Debugging Tools That Make Life MUCH Easier
Editors and IDEs
Books – HTML & CSS
Books – Performance
Podcasts & Videos
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.
MIX Online – Great articles and op-ed pieces on web development
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.
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. (my personal fav)
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
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.
Want to minimize browser inconsistencies? Then use a CSS reset stylesheet to specify baseline CSS styles that make browser presentation defaults more consistent.
Raphael.js – simplifies working with vector graphics on the web
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
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. :)
I work at Microsoft so you would expect me to be a Visual Studio whiz. Not so. Only recently starting at MS, I’ve only dipped my toe in the VS waters. What I’ve seen though has impressed me but I still have a long way to go before I understand it. If you’re on a Mac, though, I do highly recommend both TextMate and Coda. Both are truly awesome. I’ve used Coda a little more because I liked the UI of it a little better than TextMate’s but TM’s bundle system and ecosystem is amazing. 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.
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.
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.
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.
DOH Unit Testing (Dojo)
W3C Markup Validation Service
W3C CSS Validation Service
HTML Validator Firefox Add-on
- AdvancED DOM Scripting: Dynamic Web Design Techniques
- Ajax Security
- Accelerated DOM Scripting with Ajax, APIs, and 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)
- 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
- Practical Prototype and script.aculo.us (Expert’s Voice in Web Development)
- Prototype and Scriptaculous in Action [Ajax]
- Learning Ext JS
- Ext JS 3.0 Cookbook
- Ext JS in Action
- 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
Official jQuery Podcast – Discussion with members of the jQuery community
YayQuery – General discussion about front-end development
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
JSMag – Monthly Magazine
Peter van der Zee
Juriy Zaytsev a.k.a. kangax
Dmitry A. Soshnikov
Benjamin Rosseaux a.k.a. BeRo
Peter van der Zee
Christian C. Salvadó
Nicholas C. Zakas
Rey Bango – That’s me! Here’s my feed URL. Subscribe!