Here’s a listing of some really cool web development tools I’ve come across in the past month or so. Some of these tools are old while some are new, but they are all very useful. If you are a web developer I suggest checking all of them out.
Adobe Browser Lab – browserlab.adobe.com
I’ve previously used other services like http://browsershots.org/ to check browser compatibility but nothing even comes close to being as simple as Adobe Browser Lab is. It’s extremely quick and makes it almost trivial to test out different browsers for any website you are working on. For mac users that don’t have a vm running windows this tool is perfect for checking IE. One great feature is the ‘Onion Skin’ view where the page renderings for two different browsers are overlaid on each other, allowing you to see even the slightest pixel differences. The one flaw of this tool is that it only includes versions of the most popular browsers (Chrome, Firefox, IE, Safari), so if you need to test out other browsers like Opera you need to do so some other way. Either way, this tool is definitely worth checking out.
0to255 – 0to255.com
My friend Arthur told me about this simple color tool a few weeks ago and since then I have found myself using it all the time. What it does is map out light to dark variations of a single input color based on hex value. Sounds pretty basic but it turns out to be really useful when you have some colors in mind already and want to try using some slightly different ones. The site is fast and simple (clicking on a color automatically copies the code to your clipboard), plus it looks really slick. I’ve tried using other color tools like Adobe’s Kuler but they never wound up being as useful as this one did.
iPad Peek – ipadpeek.com
This doesn’t actually render a site like the real mobile safari does on the iPad, but it’s still pretty good. If you need to do some quick iPad rendering tests this tool will do the job just fine. From what I can tell it does some things like a real iPad, such as adjusting to your sites width, but it still doesn’t render an iPad specific site correctly, like Sproutcore’s hedwig example app below.
CSSDesk – cssdesk.com
I’m not sure if I would ever use this but I had to include it because it’s a really slick looking tool. Made with HTML5, CSSDesk is a live updating development environment for html/css snippets. If you want to try out some code fast to see what it will look like, this tool is made for you. You can turn code highlighting off and on, change the background, download the code you’ve developed, and even share it.
Typetester – typetester.org
If your into testing out what different fonts look like in a browser then this tool is key. Typetester lets you try out all sorts of fonts (mac / windows / both) to see how they render within your browser. What’s nice is that you have 3 separate areas to compare fonts and other type options. For instance, the screenshot below shows renderings of Verdana, Trebuchet MS, and Arial from left to right, all set at a size of 1.2em. There are many more options available on the site and when you find a configuration you like, just download load the CSS for it. It’s simple.
Another type tool worth checking out is this Web Font Specimen that allows you to test any font you want on a pre-made html type specimen page. The good thing about this is that once downloaded, you can test out any font you want easily, including those imported via the @font-face tag.
Nav-o-matic – labs.engageinteractive.co.uk/nav-o-matic
Nav-o-matic creates the markup and css needed to create a navigation menu based on an image sprite for normal, hover, and active states. All you have to do is upload your menu image, mark the vertical boundaries of each button, and bam, beautiful css is produced automatically for you within a matter of seconds. I just found out about this but I wish I had known about it long ago. Creating the css to do this is not hard, but nav-0-matic makes it far to easy to do it any other way. Definitely go check this out if your making a sprite based navigation menu.
thanks for the heads up