原文：20 Useful Tools to Make Web Development More Efficient

作者：Jacob Gube

翻譯：szqp

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.

有很多有用的工具能幫助你更快和更有效的進(jìn)行網(wǎng)站開發(fā)。除了隨處可得的文本編輯器或者所見即所得的編輯器（如Dreamweaver）之外，你也能找到很多工具，它們能幫你提高開發(fā)速度，減少除錯和測試的時間，同時還能提高輸出的效果。下面就列出一些各種各樣的工具，包括優(yōu)化、測試、除錯等，能讓開發(fā)者更有效率。

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.

CSS Grid Builder是一個在線GUI，用于定制YUI Grids CSS--一個Yahoo！開發(fā)的輕量級的CSS框架，包含超過1000個頁面樣式。CSS Grid Builder讓你在幾分鐘（甚至幾秒）快速生成一個基于CSS，適應(yīng)Web標(biāo)準(zhǔn)的頁面樣式。當(dāng)你找到你要的頁面樣式時，你所需要做的僅僅是按"Show Code"，然后它就會為你生成HTML代碼。

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.

你甚至不需要保存CSS文件在你的服務(wù)器上（這樣能減少一些你的帶寬占用和維護(hù)煩惱），生成的代碼會鏈接到Y(jié)ahoo!’s Developer Network API中適當(dāng)?shù)臉邮奖怼?/P>

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 sprites是一個提升網(wǎng)頁效能的好方法去，它通過減少用于表現(xiàn)層圖片的HTTP請求數(shù)達(dá)到這一目的。假如手工去做，則需要很多計(jì)劃、測量和編碼。

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.

CSS Sprite Generator 讓你上傳所有的圖片（你需要先把它們壓縮為一個zip文件），然后網(wǎng)站會把全部圖片整合成一個獨(dú)立的圖，同時給出CSS代碼。

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.

Blueprint 能減少相當(dāng)一部分常用但你又必須要寫的CSS代碼。這里是一個一個采用Blueprint的網(wǎng)頁例子。

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.

CSSTidy是一個分析、修正、優(yōu)化CSS代碼的開源應(yīng)用程序，它能減少文件的體積和自動格式化CSS代碼使其符合標(biāo)準(zhǔn)。它也能查找和刪除多余的樣式和屬性。你能夠調(diào)整CSSTidy的設(shè)置，設(shè)定你需要的壓縮級別，但默認(rèn)設(shè)置就已經(jīng)有30%的壓縮率了。查看"before and after"這個例子，去了解CSSTidy的工作原理。

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.

logicss是一個CSS文件和PHP工具的集合，可用于減少web開發(fā)的時間。它允許開發(fā)者創(chuàng)建可定制的固定、彈性、流式（ fixed, elastic, or fluid ）的樣式網(wǎng)格。查看他們的CSS code generation tool的預(yù)覽版。

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.

___layouts是一個非常簡單的可用于創(chuàng)建與web標(biāo)準(zhǔn)兼容頁面樣式的CSS框架，___layouts是受到Y(jié)ahoo!’s Grids CSS 的啟發(fā)，它提供了5種預(yù)定義的流式或固定寬度樣式。就像Yahoo!’s Grid.css, ___layouts 也有一個基于web，適用于Firefox瀏覽器的Layout Builder。警告：Layout Builder 仍然處于早期開發(fā)階段， 可能會有較多bug。

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.

Clean AJAX通過減少你必須要寫的代碼，使用通用的Ajax設(shè)計(jì)模式，加速Ajax開發(fā)。因?yàn)镃lean AJAX是基于JavaScript，所以能被用于任何服務(wù)器端技術(shù)，比如PHP、RoR和.NET。查看Clean AJAX的例子。

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.

Sajax（"Simple Ajax Toolkit"的縮寫）是一個開源框架，用于加速Ajax應(yīng)用的創(chuàng)建。它支持主要的服務(wù)器端技術(shù)，比如 ASP, Cold Fusion, PHP, Perl, Python, 和 Ruby。Sajax有一個龐大的社區(qū)，他們的論壇有超過39000個注冊用戶，因此當(dāng)你在使用Sajax開發(fā)遇到問題時，或者想展示你的工作時，你肯定能有一批響應(yīng)者。

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.

DOMTool用于減少你編寫DOM結(jié)構(gòu)的時間。創(chuàng)建DOM語句非常簡單，只需要復(fù)制你的HTML代碼到DOMTool中，然后按一下按鈕就可以了。當(dāng)然這不意味著復(fù)制粘貼就能解決問題了，你必須校驗(yàn)和優(yōu)化輸出結(jié)果，但它畢竟給了你一個好的開始。

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.

JavaScript Code Improver是一個簡單、無裝飾的應(yīng)用程序，它能讓你快速整理和格式化你的JavaScript代碼。團(tuán)隊(duì)開發(fā)使用它能讓JavaScript代碼符合標(biāo)準(zhǔn)，讓代碼更容易閱讀和便于協(xié)作。

未完待續(xù)。。。