16 Essential Web Development Online Tools

16 Essential Web Development Online Tools


16 Essential Web Development Online Tools

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

6 comments

web geek
Wed, 16th May 2012
good stuff Reply
Puneet Gupta
Wed, 16th May 2012
Great tools! Reply
Pritesh Desai
Thu, 17th May 2012
SpritePad seems to be a lifesaver, normally I use spriteme, but spritepad looks even better. Reply
Osu
Wed, 4th July 2012
Brilliant, thanks for these Reply
Martin
Thu, 4th April 2013
Instead of jpegmini better use http://compressjpg.com
You can achieve better results. Reply
kowalski
Sat, 27th September 2014
I would like to add to the list tool for text comparison http://www.diff-online.com/ Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement