Useful websites for a Front-End Web Developer

First published: Mar 1, 2010 Read time: 5 mins

Over the past few days I’ve compiled a list of websites I use quite frequently that really help speed up the Web Development process. The sites won’t build your pages for you but they can certainly help when it comes to debugging and problem solving.

Clean CSS

I have been using Clean CSS for a few years now to clean up and optimise my CSS. The tool will give you a break down of where you can be making optimisations and also point out potential issues with invalid properties. You can either apply the changes manually, as it gives you a line number (my prefered method) or you can download the output as a file. I must admit I only use it every so often as I’ve merged most of the optimisations into my working process.

An exception to that rule is when working with other peoples CSS, it’s always my first port of call. There’s even the ability to create your own template, so the CSS can be formatted just as you like it when it comes out the other end.

CleanCSS GUI — The CleanCSS interface simple to use with lots of options to play with.

Snipplr

Snipplr has been around for a couple of years now, it’s a excellent place to store all those little snippets of code that you often use. You can view other peoples snippets too, so if you’re looking to a solution to a problem there’s no need to re-invent the wheel; look see if someone else has a solution.

The only real issue I have with Snipplr is the amount of spam it receives, which is a real pity as it’s such a useful tool. Maybe that’s something the developers can look into fixing.

Em Calculator

For a few years now I’ve been setting my font sizes using the relative unit em’s rather than pixels or points. This was due to the fact that if you set your font size in pixels, IE6 users can’t increase the font size due to IE6 being… erm… a truly awful browser; not good at all for accessibility. Luckily IE6 is gradually fading away and IE7+ all scale font sizes properly, so in the future this tool won’t be needed.

The problem with using relative font sizes comes when you have a nested elements. Say you have an unordered list with its font size set to 12px (0.75em) and you want one of your list items to be set to 10px (0.63em). Since we are using relative font sizes the 0.75em has an effect on the lower list items. If you simply set the the list item to 0.63em the text size will be tiny because you are asking the browser to set a size of 0.63em of 0.75em. Not what we wanted at all! This is where Em Calculator comes in useful as it does all the calculations for you. You actually needed to set the list item to 0.83em….duh!

Em Calculator interface for quick relative font size calculations — An example of how Em Calculator works with my example unordered list.

jsFiddle

I’ve mentioned jsFiddle before, it’s a tool that allows you experiment with HTML, CSS and JavaScript and see the results on the same page. In the past couple of days they’ve added a new version of Processing and the RaphaelJS library. A link to my previous post on jsFiddle is available here.

HTML Entity Character Lookup

If you’ve ever had to build a set of multi-lingual HTML emails you will know how tedious it can be to encode all characters so they are valid HTML. Lucky with HTML Entity Character Lookup by LeftLogic it’s simple. Copy and paste the character you want to encode into the tool and it will give you encoded version; do a quick search and replace then you’re done.

For OS X users there’s also a dashboard widget you can use for easy access.

CSS Sprite Generator

Using the sprites method can speed up your page load time by minimising the number of HTTP Requests a users browser has to make to the server. It involves consolidating all your little icons and background images into one file, then moving that one image around using the background-position property.

You could do this manually in Photoshop, or you could get an on-line tool to do it for you. CSS Sprite Generator is my favourite of the sprite generators available. Simply ZIP up the files you want to sprite, upload them to the tool and it will return one large image and all the relevant CSS background-positions for you to copy / paste into your CSS file.

It’s particularly useful when it comes to site navigations. Having the off, on and hover states all in one background image means the user doesn’t see that ugly flash of unstyled content as hovering over the navigation bar, since all states are loaded when the user first hits the page.

Are there any others I’m missing? Leave me a message via the contact form if there are others you use.