Over the past few months, I’ve discussed new and cool things that you can do with HTML5 and CSS3. Today I would like to step back from this, and focus on how we can speed up your web development time.
The following tools have helped me and will hopefully assist you in establishing faster web development times, more efficient and optimized code, and faster loading sites; ultimately resulting in happier clients.
CSS Lint is an open source web application that will check through your CSS and let you know if you’ve made any syntax errors and suggest accessibility enhancements. Think of this application as your personal CSS syntax teacher.
Styleneat is a web based CSS optimizer. It allows you to organize your selectors and properties and will format your code either on multi or single lines. This application will make quick work of your mess stylesheets and get them in perfect working order.
SpritePad is one of my favorite web applications. It allows you to drag all of you PNG images onto it and create one giant sprite image. If that wasn’t enough to get you excited, perhaps this will, it also writes all of the CSS for the sprite for you! This means, you don’t have to remember where in the sprite you placed your image.
Smush.it optimizes your images for you. Since you can’t optimize PNG images correctly in Photoshop, I use Smush.it to do this for me. You can do this either one at a time or an entire directory! As an added bonus, it’s intelligent enough to not optimize images if they can’t be optimized further; so you don’t have to worry about over optimizing your images.
Are there applications that I’ve missed? Tell me in the comments what your favorite applications are.