There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.
1. CSS Grid Builder
CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds).
Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you. You don’t even have to host the CSS file on your web server (saving you some bandwidth and maintenance hassles), the generated code links to the appropriate stylesheet found on Yahoo!’s Developer Network API.
2. CSS Sprite Generator
Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually. CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.
3. Blueprint: A CSS Framework
Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.
CSSTidy is an open source application that parses, fixes, and optimizes CSS code to reduce file size and also to standardize CSS code formatting automatically. It also finds and removes redundant styles and properties. You can adjust CSSTidy’s settings to your preferred compression level but even the default setting can often give you 30% compression according to the creators of CSSTidy.
Check out the “before and after” examples to get a feel for how CSSTidy works.
5. logicss: CSS Framework
logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids. Check out the preview of their CSS code generation tool.
___layouts is a very simple CSS framework that can be used to create web-standards compliant page layouts. ___layouts was inspired by Yahoo!’s Grids CSS and offers 5 preset widths that supports fluid-width or fixed-width layouts. Much like Yahoo!’s Grid.css, ___layouts also has a web-based Layout Builder that was developed for the Firefox browser.
Caution: the Layout Builder is still in its early stages of development, so things may be buggy at times.
7. Clean AJAX
Sajax (which stands for “Simple Ajax Toolkit”) is an open source framework developed to speed up the creation of Ajax applications. It supports major sever-side technologies such as ASP, Cold Fusion, PHP, Perl, Python, and Ruby. Sajax has a fairly large community of over 39,000 registered users on their forums – so if you run into any troubles while developing a Sajax-based application or if you want to showcase your work, you’ll be sure to have an audience.
DOMTool was created to cut down the time it takes to code DOM structures. Creating DOM statements is as simple as copying your HTML code into the DOMTool and then clicking a button. It’s not meant to be used as a simple copy-and-paste solution and you should verify and optimize the output, but it gives you a great starting point.
The Test plugin is a comprehensive set of utilities allowing you to do unit tests as well as simulate user interaction that can occur in a web page.
Venkman is an extension that you can easily install and download through the Firefox Add-ons section of Mozilla.org.
Another handy feature is the DOM inspector pane which outlines a web page’s structure; very handy if you’re working on a big website or an open-source application that you’ve recently gotten involved with. It’s an awesome tool though I find that disabling Firebug when I’m not using it is helpful in speeding up normal browsing (such accessing Gmail, for example).
15. Web Developer extension for Firefox
16. Internet Explorer Developer Toolbar
Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option. IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.
17. Yahoo! Design Pattern Library
Design Pattern Library is a large collection of proven optimal web design patterns to save you time in creating highly-sophisticated design solutions. Some things that you can find in the Design Pattern Library are: breadcrumb navigation, auto-complete for web forms, and drag-and-drop solutions. It speeds up development by offering solutions to common design needs so that you don’t have to re-invent the wheel.
18. Test Everything
Test Everything is a web-based application for multi-purpose testing, reducing the time it takes you to use online services and validators. Test Everything is an aggregate of over 100 tools reduced to just one web page. You can validate your XHTML for web standards and accessibility, test your design in several browsers (using the Browsershots service), check page rank, and more – all in one location.
19. Pingdom Tools
Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what’s taking so long to load), file size, file type, and URL.
20. Aptana Studio Community Edition
Some more tools
- Cuzillion: quickly construct web pages to see how page objects interact so that you may explore techniques on how to improve web page performance.
- CSSFly: edit web pages on-the-fly through a web browser. Helpful in debugging and testing a web page.
- AppJet: a web-based solution that allows you to create a functional web application or widget through a GUI.
- Google Sitemap Generator: Quickly generate a sitemap file based on the Sitemap XML protocol without you having to write it yourself.
Some related articles
- Awesome Things That Firefox’s Web Developer Extension Can Do
- Top 6 Internet Explorer Extensions for Web Developers
I hope you’ve enjoyed this collection of tools and that you’ve found one or two that you’d like to try out. Got a tool that’s saved you a lot of time that wasn’t listed here? Share it with us in the comments.
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.