by Smashing Media
Mar 16 2010

100 Essential Web Development Tools

Advertisment

By Neil Skirrow

As web technologies constantly advance, the skills a developer is expected to have are constantly increasing. Web users are beginning to expect Ajax interfaces, charts and graphs and a whole host of other tricks and features. This means web developers not only have to be skilled with HTML and a server-side programming language such as PHP or Perl, but they now also need to be JavaScript gurus, Flash experts, and skilled graphic designers.

When developing your applications, you simply can’t create every element yourself. A graph or mapping solution is an application in itself, so no single developer or small team can create such components while continuing development of the primary application. This means programmers have to use third-party solutions — and thankfully there are thousands of such solutions to make our lives as developers that little bit easier.

In an effort to save you a few hours crawling the web in search of the perfect third-party solution, we have compiled this list of essential development resources.

1. Functions and Classes

You can find a whole array of pre-made classes and functions to help save development time. A great resource directory for finding the perfect PHP classes is PHPClasses.org. For those of you who use Perl, you should be familiar with CPAN.

CAPTCHA

CAPTCHA (Completely Automated Public Turing to tell Computers and Humans Apart) is the term used to describe the use of images which humans can identify, in order to ensure an automated bot/computer program isn’t accessing your application. The ideal use for this is in contact forms to ensure only humans can send messages — therefore eliminating automated spam and junk messages.

The following CAPTCHA systems can be easily integrated with your applications:

  • reCAPTCHA
    One of the most popular CAPTCHA systems that helps to digitize books, newspapers and old time radio shows by using CAPTCHA inputs to help translate. There is also a Perl module available for reCAPTCHA.

  • Securimage
    Securimage is a free open-source PHP CAPTCHA script for generating complex images and CAPTCHA codes.

  • freeCap
    A GPL CAPTCHA script to stop spam.
  • HN CAPTCHA
    A CAPTCHA script written in PHP, licensed under LGPL.

Date Manipulation

Manipulating dates in your applications can be a time-consuming process. PHP and Perl include numerous functions for automating the process, but often don’t offer all the required functions.

The following date manipulation functions can be easily integrated with your applications:

  • PEAR Date
    Generic PHP classes for representation and manipulation of dates, times, and time zones without the need for timestamps.
  • Date Class
    This PHP class allows you to add or subtract periods from dates, and calculate the difference between two dates.
  • Date manipulation in PHP
    A PHP tutorial on PHPBuilder.com, guiding you through a number of common date manipulation processes.
  • Date::Calc Perl Module
    A powerful Perl module for date calculations based on the Gregorian calendar.

Image Manipulation

Manipulating images is a common requirement. Whether you want to resize your images while maintaining aspect ratios, or add watermarks, the process can be entirely automated using a server-side language like PHP or Perl.

Form Validation

Form validation is critical to ensure users enter form information in a suitable format, and is especially important to protect your application against attacks.

Password Validation

Password validation is important to ensure your users choose passwords that offer an adequate level of security to prevent their accounts from being compromised.

2. Ajax and JavaScript

Ajax is a web methodology that uses JavaScript to make HTTP connections to retrieve and process data for the purpose of dynamically updating the content of a static web page. Ajax enables you to update content within a web page without reloading the entire page, thus reducing load times and server loads, making your web pages more interactive and intuitive. A great resource for Ajax tools is MiniAjax.

Auto Suggest

Auto suggest or autocomplete tools are usually applied to text inputs like search fields. When a user begins their input, the input field shows a list of options that match what they have entered so far. This enables users to enter their input more quickly, and can also help them enter terms that match search data that are more likely to return relevant results.

Calendars

Ajax calendars are extremely useful when you need your users to enter a date. They reduce confusion over date formats, and enable users to easily find the date they are looking for rather than typing a date format string.

Sliders

Ajax sliders enable users to use an interactive draggable element to select values. These are very useful for features like colour pickers as they enable users to ‘slide’ through a range of colours to select the one they want.

Data Grids

Ajax data grids enable you to display data in a table, but with the benefit of features like column sorting and pages without the need to reload the entire page.

  • Grid3
    A useful data grid tool which is part of the Ext JS library.

  • dhtmlxGrid
    A powerful data grid tool that includes column sorting and search functionality.

  • Unobtrusive Table Sort Script
    A data grid tool that includes multiple column sorting.
  • AJAX Data Listings Engine
    A powerful open source PHP data grid tool for use with mySQL.
  • TableKit
    A data grid tool based on the Prototype JavaScript framework that features field editing.

Draggable Content

Ajax-based draggable content features can be very useful when used appropriately. Such tools enable users to reorganize a page to suit their needs, and can also serve as a basis for an interactive feature like a shopping basket.

Image Enlarging

Image enlarging scripts, similar to JavaScript light boxes, enable the user to enlarge or zoom in on an image chosen from a set of thumbnail images.

Galleries and Slideshows

Image galleries are very useful when you have a collection of images to show, they allow users to easily browse your images, and features like slideshows allow users to sit back and enjoy watching your images.

Star Ratings

Star rating scripts allow users to rate items through an intuitive and attractive interface, which is an improvement over typical drop-down menus or radio buttons.

Colour Pickers

If you want to let users choose colours in your application, it’s better to present them with an interface rather than asking them to enter a HEX code. Colour pickers allow users to choose colours from a colour palette which then generates a HEX code for use in your HTML.

Progress Bars

Progress bars are very useful when handling user uploads or pages which can be slow to load; they keep the user informed that progress is being made and that the page is loading.

3. APIs

An API (Application Programming Interface) is a set of program functions which can be accessed by another application. One example is a currency conversion API that retrieves currency conversion data by allowing the user to enter a base currency, an amount, and the desired result currency, which returns a result via the API.

  • Alexa Top Sites
    This API provides access to lists of web sites ordered by Alexa Traffic Rank.
  • bit.ly API
    A useful API for the bit.ly URL shortening service.
  • Blinksale API
    Enables you to access Blinksale data such as invoices and customer data.
  • FoXRate
    A basic currency conversion API.
  • eBay API
    eBay’s API which allows you to submit items to be listed and obtain listing data.
  • Twitter API
    The Twitter API allows you to have access to Twitter data, including user and status information.

4. IP Locations

Finding out where your visitors are located can be valuable from a development standpoint. It can help you understand your visitors so you can design your site to better suit their needs. IP location information can help you determine where a user is located, enabling you to display content in the their language. You can also optionally customize other information such as currencies and shipping costs.

  • OpenCrypt IP Location API
    A hosted API service for determining user location by country.

  • IP Details
    A PHP class for determining geographical locations based on IP address.
  • GEO-IP
    A free IP to country database.

5. Charts and Graphs

Charts and graphs enable you to display complex data visually. This is useful for example when trying to determine information like daily pageview counts from detailed statistical logs, enabling the user to immediately see how the data varies over a period of time.

  • amCharts
    A powerful Flash charts tool which supports 3D charts and the ability to combine different graphs.

  • FusionCharts
    A well designed and stylish 3D charts tool.

  • XML/SWF Charts
    A highly customizable Flash charts tool.
  • JFreeChart
    A free Java-based charting tool.
  • pChart
    A powerful PHP class for building attractive charts.

6. Maps

Once you are using IP location tools like those listed above, you will have a collection of user location data. What better way to display it than with an interactive map. Interactive maps are also useful for understanding user location data such as sales information, for example, when you receive delivery and billing address info from a user.

  • amMap
    An interactive mapping tool which includes drill-down functionality.

  • Google Charts API
    A great mapping tool, though limited to a small map size.

  • Flashmaps
    A great collection of different Flash mapping tools.

7. Audio Players

When used well, playing audio on your web site can be a great way of setting a mood or getting a message across.

8. Video Players

Video content is now becoming a standard, but getting the right video player is very important. Video content is the ideal, and often expected tool for promotion, so getting a player which suits your site and needs is now a critical design and development choice.

  • OS FLV
    An open source and well featured Flash video player.

  • Flowplayer
    A full-featured and highly customizable Flash video player.

  • JW FLV Media Player
    A very powerful and flexible Flash video player.
  • FLV Player
    A stylish and customizable Flash video player.

9. Video Conversion

Video conversion/encoding can be a tricky business. Videos can be in a wide range of formats but most players only support a handful of those. If you don’t have a server which supports ffmpeg, converting videos to a format suitable for your player is usually an offline and manual task.

10. WYSIWYG Editors

WYSIWYG (What You See Is What You Get) editors enable you to offer an HTML editor when users enter information, for example, in content management systems, or for entering comments or reviews. These editors enable users to style and format data without the need to understand HTML.

  • TinyMCE
    A lightweight yet powerful JavaScript WYSIWYG editor.

  • XINHA
    A fully featured and open source WYSIWYG editor.

  • NicEdit
    A simple and lightweight WYSIWYG editor.
  • openWYSIWYG
    An open source, cross-browser WYSIWYG editor.
  • CKEditor
    A well designed and feature-rich WYSIWYG editor.

About the author

Neil Skirrow is a professional web developer with over 14 years programming experience and is the Managing Director of ionix Limited, a UK software development company that develops the OpenCrypt Membership Software.

(ll)

About the Author

Comments and Discussions

  • David, 16 March 2010

    Can you email me some ajax info please

  • Johnboy, 16 March 2010

    These are hardly what I would define as essential web development tools.

    Surely the only essential development tools are

    1) A text editor
    2) A webserver

    and maybe 3) image editing software.

    Anything else is just a nice extra

    • c0de, 18 March 2010

      i thought exactly the same while reading this!

      But i nice list! ^^

    • Ben, 24 March 2010

      Maybe they’re not “essential” but you sure wouldn’t want to take the time building all of these things yourself. Great roundup, thanks!

  • Matt, 16 March 2010

    Lots of neat tools though. Not all essential, obviously, but neat nonetheless. Notice how many of them are ajax. There’s a web 2.0 technology that not’s going anywhere soon.

  • BBL, 16 March 2010

    nice tools but not all essential

    Thanks

  • Adamski, 16 March 2010

    wow…. what a great list!

  • lava360blog, 16 March 2010

    great compilation and useful list. thanks for share Neil Skirrow :)

  • Inderjeet, 16 March 2010

    AWESOME collection. First time visit and impressed.

  • kl3tte, 16 March 2010

    Awesome list! I used a lot of tools in the past .. and now much more in the future!

  • Jordan Walker, 16 March 2010

    Great list of resources for web developers. Each in that list should be implemented into a highly dynamic and interactive website.

  • Greg, 16 March 2010

    Good list, actually a few items will be defo useful to me. Surprised not to see more jquery examples though.

    I’d love to see best practices for setting up testing servers as well. Trying to figure out how to do it the smoothest way from a production standpoint.

  • JC, 16 March 2010

    Nice list…some great tools that I didn’t know about!

  • coto, 16 March 2010

    Good job dude, thanks

  • Daniele De Nobili, 16 March 2010

    Great list! Thanks!

  • Amberly | Web Designer, 16 March 2010

    Awesome list.. Very useful collection.

  • Smashing Buzz, 16 March 2010

    you did amazing job in this helping article where you sharing most useful web development tools.

  • Matthias Matz, 16 March 2010

    nice list thx, thats good

  • Rainer Bendig, 16 March 2010

    Thanks for that great collection!

  • Art2code, 16 March 2010

    Thanks for that excellent list !

  • aaron, 16 March 2010

    how can there be 100 essential web dev tools? I think we need to reevaluate our use of the word “Essential”…

    • sickdesigner, 17 March 2010

      I doubt that “WE” are the ones in need of a dictionary.
      Some of these don’t even fit in a category of “things you should consider”, like the Captchas for example. There are waaaaaaay too many reasons Captchas suck donkey schnitzel that we should try to avoid them as much as possible, not recommend them.

  • Can Aydo?an, 16 March 2010

    Great collection. Thanks…

  • David, 16 March 2010

    Great post, I enjoyed this! Any thoughts anyone on tools for the C# (ASP.NET) developer? I see a lot of designers using PHP and I use a Mac @ home but an trying to force myself to use Microsoft ASP.NET since that is what I use @ the office.

  • jay, 16 March 2010

    “This means web developers not only have to be skilled with HTML and a server-side programming language such as PHP or Perl, but they now also need to be JavaScript gurus, Flash experts, and skilled graphic designers.”

    WRONG! Design should be left to designers. Just like back in the 90′s all too often developers think they can be designers, too. It all ends up badly.
    Some developers have a decent sense of what looks nice compared to what does not. But most just think code and numbers. Just as developers cringe when they see designers building a site in Dreamweaver’s WYSIWYG editor, designer’s too cringe at seeing developers trying to strut their stuff on the look and feel of a site.

  • wparena, 16 March 2010

    This the proof of google trend result, it explain that designing is more than developing. Most developer now customizing to develop a project.

  • marushu, 16 March 2010

    It’s great!! Thanks!!

  • piczoom, 16 March 2010

    this is the best web development article I’ve read for long time, and this is the first time i comment on this website because this is must-read article for every web designer or developer.
    good work Neil Skirro; and thank you.

  • Vijay, 16 March 2010

    Awesome collection as always. Thanks for this great collection.

  • Ahmed Faris, 16 March 2010

    Amazing Article,that was useful

  • Nordvind, 17 March 2010

    Thanks, really nice collection =)

  • Adam, 17 March 2010

    Check these sites for your soloutions to questions.

    worldoutdoor.com

  • Irma, 17 March 2010

    Great Article!

    If I could write like this I would be well chuffed ;-)

    The more I read articles of such quality as this (which is rare), the more I think there might be a future for the Web. Keep it up, as it were.

  • Bryan, 17 March 2010

    I love these essentials

  • Peter Nagy, 17 March 2010

    Very cool. Good Stuff!

  • Rapideo, 17 March 2010

    Awesome Man!

  • Manuela, 18 March 2010

    Very useful, thanks for sharing :)

  • HG, 18 March 2010

    Perfect. Incredible list, thanks a lot.

  • xhot, 18 March 2010

    it’s cool,i love this

  • Theo, 18 March 2010

    Realy useful list, keep the good work going.

    Cheers !!!

  • Omer Greenwald, 19 March 2010

    Excellent, comprehensive collection! thanks for sharing this

  • BEBEN, 20 March 2010

    found great list anymore
    thanks ^_^

  • Issa Qandil, 20 March 2010

    Awesome list! Thanks for sharing

  • Mahmud Ahsan, 20 March 2010

    Wow! Excellent List. Most of the tools are very helpful and useful for our daily use. Thanks a lot for sharing!

  • April, 21 March 2010

    Useful List!Thanks.

  • volkr, 23 March 2010

    Wow, a really cool and great state-of-the-art summary! Two big thumbs up for the effort.

  • Robin, 24 March 2010

    Great list! Next time please consider mentioning our opens source form builder library: ValidForm Builder.
    Check out http://www.validformbuilder.org/ . We’ll be online with a complete documentation next week.

    Easy to use save XHTML valid web forms.

  • Pablinho, 25 March 2010

    As someone mentioned earlier, I was surprised not to see more JQuery examples mentioned… which in some cases are easier and less complex than the examples you provided.

  • Cathy, 25 March 2010

    great list….thnx

  • Babar, 25 March 2010

    superb collection…keep up the good work

  • cris, 26 March 2010

    Great Colection!!!

  • deepak kaletha, 30 March 2010

    thnks really important tools ,

  • Max, 31 March 2010

    So usefull! THANKS A LOT!

  • jeff, 07 April 2010

    Really great info. Thanks for the post

  • OVHenri, 16 April 2010

    Pretty amazing compilation. Take notes that YUI also offer a RTE that is pretty easy to use and complete.

  • Bleak, 16 April 2010

    Definitely a good list. There is a real divide developing between designing and developing.

  • Theresa Neil, 19 April 2010

    Nice list! and good organization.

    If you are a designer and need to learn more about common user interface controls, we
    published a list of 43 Essential Controls in March this year, an update of the popular 30 Essential Controls article in 2009. Just Google the term ‘essential controls’.

    Both lists talk about the (+20) most popular RIA frameworks and libraries, like JQuery, ExtJs, Flex, Laszlo, Silverlight… and which ones provide which UI controls.

  • Tim, 21 May 2010

    Nick,

    I love your stuff; it is really useful. Keep up the good work.

  • Buura, 08 August 2010

    Hello..
    many thanks this nice Colection..
    please can i have details about html comment system
    how to make comment system for my web site…
    thank you !!

  • dbthapa, 12 August 2010

    very nice article….

  • Peter, 06 September 2010

    Great stuff!

    I am using the agile platform that aggregates a lot of this stuff out of the box. Namely Ajax!

    outsystems.com

  • putu, 08 September 2010

    Great article bro! two thumbs up and bookmarked!

  • Ted Ko, 09 September 2010

    Great list of resources, thank you.

    For 6. Maps, I would like to suggest adding imapbuilder.net/ Similar to Ammap, it provides a web-based software tool which allows easy publishing of maps without any editing skills. I found it very easy to use, and can work with any HTML based, or CMS sites such as WordPress or Joomla.

  • mahesh, 15 September 2010

    nice controls u have given so our idea will be grown up

  • A, 17 September 2010

    great list

  • Akhilesh kumar, 20 September 2010

    very good discussed

  • Nisha Shah, 22 September 2010

    Hey, great post! There are so many cool techniques described here, big thanks!

  • Vimalkumar, 28 September 2010

    yeah.. It is a very informative one.

  • Dave Said, 06 October 2010

    Thanks for the informative article. I am making use of the grids. I was actually expecting the article to be about things like text editors and image editors. I currently use NetBeans IDE, since it is free and has good intellisense for PHP–but it is a memory hog. Someone was asking for testing setups–here’s a good article to read: http://drupal.org/node/161975

  • vinoth, 10 October 2010

    coooooooooooool

  • Brett Widmann, 05 November 2010

    Thanks for this post. It has a lot of good information and great links to examples and tutorials!

  • Supachet, 05 November 2010

    Thank a lot good list.

  • Rohit, 07 November 2010

    Thanks for very good collection of all the tools

  • Piyush Doshi, 21 November 2010

    Wow, a really good and great summary for web developers.

  • mikwillson, 05 January 2011

    That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems

  • wallpapers, 14 January 2011

    very great collection! thanks!:)
    happy new year!

  • Neil Skirrow, 17 January 2011

    Thanks for all the great comments!

    I must stress, I submitted the article to Noupe with the title ’100 Web Development Tools’ and at my horror, it was published with ‘Essential’ added…

  • rahil, 27 January 2011

    very much thankful to all u..

    getting much useful information from article.

  • Doug, 04 February 2011

    Really good list, must have taken a while to compile! Thanks DT

  • shapewear, 16 February 2011

    This was very well discussed

  • roman, 22 February 2011

    Thank you very much!!!

  • sree, 02 March 2011

    great tool ,i did t find 10 tool in my life ,you guys are great.

  • Andrew, 03 March 2011

    Ohhoho, how long you collected this all? :)

  • Dan-El, 20 March 2011

    Great list!
    Also checkout SharpKit, C# to JavaScript converter during compilation. Makes client-side code development much easier! :-)

  • Brij, 28 March 2011

    Nice Post!!!
    I would like to add 2 more tools:

    jsfiddle: http://jsfiddle.net/
    BrijPad: http://techbrij.com/brijpad/

  • chandrashekae reddy, 04 April 2011

    thank you very much. good collection of web development tools…

  • Atom, 04 April 2011

    Great list. Just tried some of the data grid examples. Thanks.

  • Martin Lewis, 08 May 2011

    Superb. Thanks for sharing.

  • steve, 19 May 2011

    <3

  • Crowdfinch, 13 June 2011

    Helpful post… Thanks for sharing.

  • Austin Cheney, 30 June 2011

    I would like to add one more:

    http://prettydiff.com/

  • Gurinder Singh, 08 July 2011

    Really pleased to see the contents provided

    Thanks a lot for sharing such vauable notes

  • Mahesh Chavan, 27 July 2011

    this web site is good ,it gives the total development tools
    but we also want some basic tools for the development….

    Thanks…..

  • james, 30 August 2011

    Great list! I also use http://rgb2hex.com a lot to get CSS ready color values.

  • Humanshu Patel, 14 October 2011

    Nice Collection….. But this is the list of helpful tools of web development , not essential .

  • SiswaIndo, 04 December 2011

    Wonderfull List !! This is what I’ve been looking for
    Thanx

  • David Glazier, 09 January 2012

    MapInnovations.com offers a great free tool for integrating Google Maps onto a website. It pops up a facebook-like window with the map and driving directions. Pretty useful

  • Tony, 03 February 2012

    Great list…Thanks!

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form

search form
 
image description image description