6 Time Saving Web Development Tools

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.

Liveweave

Live WeaveLiveweave is a web based application that allows you to write your JavaScript, HTML (HTML4 or HTML5), and CSS and test them in real time. This application is a major help when you’re debugging a specific issue because you can copy your code snippets into their own section and work on fixing the issue. Its major benefit is it allows work on the fly rather than saving after each change, only to find your fix didn’t work.

CSS Lint

CSS LintCSS 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

Style NeatStyleneat 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.

 

Dirty Markup

Dirty Markup auto formats your HTML, CSS or JavaScript. It works perfect when you’re searching through compressed code and need it in a readable format.

SpritePad

Sprite Pad 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

Smush.itSmush.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.

Josh serves as a development team lead at TKG, so it’s his job to ensure web development projects get done on schedule, on budget, and working flawlessly. No pressure! On the blog, he talks general web dev – from HTML5 to responsive design.

Email Josh | Read Full Bio

Leave a Reply

Your email address will not be published. Required fields are marked *

twelve + 18 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>