16 Essential Web Development Online Tools

Written by Kevin Liew on 14 May 2012
31,355 Views • Web Development

Introduction

There are so many useful online tools nowadays, I found myself have a few of them up my sleeve that I have been using because they are straight forward, quick and do exactly what they meant to do precisely and correctly. Most of the web development online tools are great time savers, and some even able to enhance the quality of your work and help you to produce high quality websites. One drawback though, when there isn't Internet connection you would not able to use them; in the other hand, if you are in client site, or remote area with Internet access, you will able to use them without any prior app installation.

In this post, I have gathered 16 essential web development tools and they are being categorised into Javascript, CSS, Image Optimisation and misc. Pretty sure they would be of a great helpers for your workflow.

CSS

  • SimplessSimplessOh well, this isn't an online tool. It's a free offline LESS code compiler. If you're using LESS, this is a great tool that auto detect the changes and compile it. Available for Mac, Windows and Linux.
  • CSSWrapCSSWrapA pretty cool CSS text to path generator.
  • LayerStylesLayerStylesTired of remembering all the new CSS3 new properties and prefixes? Layerstyle using the interface of photoshop layer style and allow you to configure drop shadow, inner shadow, background, border and border radius easily.
  • BearCSSBearCSSBearCSS generates CSS template based on the uploaded HTML document by picking up all the HTML elements used.

Javascript

  • BookmarkleterBookmarkleterBookmarkleter converts your javascript into a bookmarklet. It does all the compression and url encoding for you.
  • JSLintJSLintJSLint is a debugging tool for Javascript. It looks for potential problems of your code and return a message describing the problem and the location within the source.
  • ShowIFShowIFThis is a simple if...else tools that allow user to set the conditions based on the client's environment (browser, OS, resolution...) and perform certain action if it matches the conditions.

Image Optimization

  • JPEG MiniJPEG MiniReduce the file size of your photo by up to 5x, while keeping thier original quality and JPEG format.
  • PunyPNGPunyPNGPunyPNG is an impage compressor for designers and developers. It can dramatically reduces the file size of your images without any loss of quality.
  • SpritePadSpritePadA quick and user friendly online CSS sprite generator that supports drag and drop of images and it will generate the CSS code you need.
  • SpriteMeSpriteMeSpriteMe is a different way to create CSS sprite. It's a bookmarklet that detects images currently on your website and make the CSS sprite accordingly.

Miscellaneous

  • BrowsersBrowsersUseful browser sandbox. It allows you to run any browser instantly without the needs to install it on your computer. However, currently, it only supports Windows platform. Mac and linux are on its way.
  • SpurAppSpurAppSpurApp uses different method to test the usability and design layout by utilising different technique such as grayscale, intersections, spacers, contrast, blur, mirror etc to show you the flaw of your design that you might have overlooked.
  • PingdomPingdomPingdom test the load time of your website, analyze it and find bottlenecks.
  • Loads.inLoads.inLoads.in calculate the loading time of your website.
  • HTML5 TestHTML5 TestThe HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

6 comments
web geek 13 years ago
good stuff
Reply
Puneet Gupta 13 years ago
Great tools!
Reply
Pritesh Desai 13 years ago
SpritePad seems to be a lifesaver, normally I use spriteme, but spritepad looks even better.
Reply
Osu 12 years ago
Brilliant, thanks for these
Reply
Martin 12 years ago
Instead of jpegmini better use http://compressjpg.com
You can achieve better results.
Reply
kowalski 10 years ago
I would like to add to the list tool for text comparison http://www.diff-online.com/
Reply