Courtesy to Rey Bango
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. (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
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
and http://dhtmlx.com/ for professional Ajax components for advanced web UI
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:
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
- 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
HTML & CSS:
- 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
- High Performance Web Sites: Essential Knowledge for Front-End Engineers
- Even Faster Web Sites: Performance Best Practices for Web Developers
- jQuery Still Amazes Me After 3 Years I have some downtime at the moment so I wanted…