Here they are by category:
- Sites and Lists to Learn From
- Debugging Tools That Make Life MUCH Easier
- CSS Editors
- CSS Frameworks
- CSS Resets
- Color Management
- Editors and IDEs
- Browser Testing
- Books – HTML & CSS
- Books – Performance
- Podcasts & Videos
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.
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.
Debugging Tools That Make Life MUCH Easier:
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
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.
960 Grid System
Blueprint CSS Framework
Yahoo YUI Grids CSS
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
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
Dean Edward’s Packer
Microsoft Ajax Minifer
JSApp.us – Shell for node.js development
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.
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.
Microsoft Expression Web SuperPreview for IE
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
Internet Explorer 9 Beta Guide for Developers
Yahoo UI Docs
APIs – Most comprehensive list of APIs on the web
jQuery UI Docs
CommonJS Standards Project
AdvancED DOM Scripting: Dynamic Web Design Techniques
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
HTML & CSS:
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