Essential Online Tools for Web Developers & Designers

As web development becomes increasingly complex, and the thin line that separates front-end development and server-side development gets blurrier, web enthusiasts are expected to be in possession of more skills than ever before. Unfortunately skills cannot be acquired overnight, so this is where you look to your toolbox and other online resources to simplify and optimize your workflow.

In the past few issues of the HotScripts newsletter, we’ve focused primarily on traditional desktop applications, web scripts and — most recently — hosted applications. While these types of resources may exemplify those you are likely to use most often, many great online tools and web services are also at your disposal. These are in no way full-featured tools, but rather little timesavers that can be prove to be very handy indeed.

To help you locate some development-related online tools and services that might work for your purposes, we explored dozens of forums, blogs, and tweets to find out which are most popular with developers. The result is this list of 20 Online Tools and Services for Web Developers. The collection consists of both front-end and back-end tools, with purposes ranging from generating a favicon for your site, minifying your CSS file, or measuring the page load time for your website. Dive in and uncover some hidden gems!

Online Web Design Tools

Lorempixel
You’re probably already familiar ‘Lorem Ipsum’ – the filler/dummy text that is commonly used in web design and print. LoremPixel takes a similar approach but instead of serving filler text, it allows you to generate and call placeholder images. The online service is extremely easy to use – all you have to do is specify the image dimension, select an image category and it’ll generate an image for you that you can hotlink from your site for retrieving.
Web Resizer
Web Resizer allows you to resize your images and optimize them for web sites. It also includes some basic photo manipulation features like cropping, rotation, brightness and color saturation adjustment. No registration is required to use this tool.
CSS Gradient Generator
CSS3 introduced gradients whereby which you can you can have one color fade gradually into another. Ultimate CSS Gradient Generator is a Photoshop-like gradient selection tool that makes it really easy for you to pick your colors and generate the appropriate CSS codes.
Spritebox
CSS Sprites are becoming increasing popular as they offer a great way to reduce site load time and server resources. SpriteBox eases the process of creating CSS classes and IDs from a single sprite image. After you upload your image, you will use its selection tool to mark the position of the individual sprites and SpiteBox will generate the relevant horizontal and vertical background positions.
BannerSnack
BannerSnack is an online banner maker app that allows you to create interactive Flash banner ads and other types of Flash content very quickly. You can also use it to generate .gif banner. You’ll be amazed to see how easy is to create and publish your animated banners, website headers, intros, microsites or whatever it is that you’re working on.
YUI Compressor
YUI compressor allows you to minify and compress your CSS and JavaScript by reducing the byte footprint all the while preserving the operation qualities of the code. By doing so, you can drastically improve the page load time of your site.
Google Hosted Libraries
The Google Hosted Libraries is a content distribution network (CDN) for the most popular, open-source JavaScript libraries. The hosted libraries provides access to a growing list of the most popular, open-source JavaScript libraries, including jQuery, jQuery UI, MooTools, Prototype, SWFObject, etc.
setmy.browsersize.com
With so many varying screen sizes, it is important to test how your web page renders in these different resolutions. setmy.browsersize.com is a nifty online tool for setting your browser size while you design your page. You can use some of the preset and most commonly used screen resolution that are provided or create your own arbitrary dimensions.
FavICO Generator
FavICO is a free online favicon.ico convertor that is easy to use. After you upload your image (can be of type .gif, .jpeg, .png), the tool will resize and convert it to a ready-to-use website favicon.ico. The great thing about this convertor compared to others we have tried is that it will also provide you with different sharpen levels of your icon.
JSLint
JSLint is a JavaScript tool that looks for problems in your JavaScript code. It does so by scanning the code provided and returning relevant error messages describing the problem. It doesn’t necessarily look for just syntax errors, but will look at style conversions as well as structural problems.
Abobe BrowserLab
Abobe BrowserLab is an online service that helps ensure your web page displays as intended in multiple browsers and operation systems. Screenshots of actual browser renderings are generated in real time, with multiple viewing options and diagnostic tools to help discover cross-browser compatibility issues.

Online Web Development Tools

dbdsgner
dbdsgner is an online tool which allows you to design your database schema without writing SQL. It works similar to UML diagrams whereby which you can create tables, define the fields and their properties and create relationships between your tables. Once you are done, the tool will even generate an SQL script for database engines like SQLite, MySQL, MSSql, Oracle or PostgreSQL.
Snipsave
Snipsave is a great online tool for web developers looking to save their snippets of code in one place for easier reference from any computer. It has a very nice interface where you can quickly create, edit, tag and delete code snippets.
.htaccessEditor
Editing an .htaccess file and making sure you have the right syntax can be quite daunting. .htaccessEditor aims at providing you with a quick way of creating your .htaccess file. Through its easy-to-use wizard like interface, you will be able to deny access to certain files, create authentication, specify paths for error messages and setup redirects.
RegExr
RegExr is an online tool for editing and testing Regular Expressions (RegExp / RegEx). It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text. It also provides a handy RegExp snippet sidebar with descriptions and usage examples to make it easier to learn Regular Expressions through trial and error.
Ideone
Ideone is an online compiler and debugging tool that allows you to compile and run code online in more than 40 programming languages. It’s a great tool to use if you’re looking to learn a new language or want to test something when you’re not in possession of a web server or local compiler.
JSFiddle
JSFiddle a free sandbox tool that allows you to play with HTML, CSS and JavaScript. It has some great features including excellent syntax highlighting, the ability to load popular JavaScript libraries, support for testing AJAX requests, etc. JSFiddle also let you embed the code on your site or share it with others.

Online Networking Tools

net2FTP
net2FTP is a web based FTP client that allows you FTP to your site and perform typical FTP operations like navigation, file upload, download, renaming and deletion. On the top of that, net2FTP also supports editing of text and HTML documents. This can prove handy when you’re on the road or using someone’s computer with no desktop FTP client installed.
Web Page Analyzer
Web Page Analyzer aims at improving web site performance. After you specify your site URL, it will calculate its page size, composition and download time. The tool calculates the size of individual elements (scripts, css files, images) and based on these will provide advice on how to improve your page load time.
Pingdom
Similar to Web Page Analyzer featured above, PingDom provides page-testing services including response time and page load time. It examines all part of a web page so that you can easily identify performance bottlenecks.
Sucuri
Sucuri is a free website malware scanner that detects hidden illicit content on your web pages. It performs checks to verify that your site is free from malicious JavaScript, iFrames, drive-by downloads, suspicious redirections and spam. Sucuri will also ensure that your site is not blacklisted by Google Safe Browsing, Norton Safe Web and SiteAdvisor.