5:35 AM
Don't Forget One Day You Will Be In The Past
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.
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.
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.
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.
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.
Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.
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.
JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.
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.
4. CSSTidy
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.
6. ___layouts
___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
Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.
8. Sajax
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.9. DOMTool
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.
10. JavaScript Code Improver
JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.
Posted in: HowTo,Web
0 commentaires:
Post a Comment