前端開發很奇妙: 它入門很簡單，但是想要成為大牛卻很難。有太多的事情需要考慮，到處都有需要微調的地方，太多的細節處理才能保證讓一切都剛剛好。幸運的是，開發者和設計師一直致力於為我們提供有用的工具和資源，來提高我們的技能、讓我們做的更好。
所以今天我收集一系列省時的、有用的 HTML、CSS 和 JavaScript 資源給大家。我希望這些工具將幫助您提高專業技能以及工作流程。
HTML 和 CSS 工具
- Initializr
此工具建立一個基於 HTML5 Boilerplate 的可自定義模板。 在 JavaScript 和 jQuery 之間進行選擇，決定是否要樣本內容，並指定相容性和伺服器配置需求。 您將獲得一個擁有 Boilerplate 主要功能的模板，以開始您的專案。
- Layer Styles
一個非常簡單的工具，以直觀的方式來建立 CSS ——非常像一個圖形編輯器。該工具允許您新增陰影、內陰影、背景、邊界和圓角和生成跨瀏覽器的 CSS 程式碼。
- Mobile Boilerplate
一個能夠建立豐富的和高效能的移動 Web 應用程式模板。它可以保證各種瀏覽器的相容性，不僅能相容各種高階智慧機，也能相容舊版的黑莓、塞班、以及微軟的移動平臺。
- Vogue
該工具在所有瀏覽器中重新載入頁面的樣式表（而不是 HTML ），甚至可以配置為在多個瀏覽器中同時自動重新載入頁面。 該工具不託管您的網站，而是執行您的網站本身的本地伺服器。 要使用它，只需安裝 NodeJS 和 npm 。
- css-x-fire
此工具允許從 Firebug CSS 編輯器編輯 IDE 中的 CSS 屬性，並允許開發人員專注於 CSS 樣式，而無需重新整理瀏覽器。
- Ffffallback
一個可以讓您測試不同字型棧以找到最佳結果的書籤。它掃描頁面的 CSS 並建立一個克隆頁面，您可以在其中測試和分析不同的 fallback 字型。
- CodeKit for Mac OS X
CodeKit 可以幫助您更快更好地構建網站。每次儲存時，都會自動編譯一切：Process Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript 和 Compass 檔案。輕鬆設定每種語言的選項。
- Less-Boilerplate
以 Less 形式編寫的 Boilerplate CSS，包括 CSS 重置、CSS3 幫助器，中心列塊等等。
- Needle v0.1a1
Needle 是一個方便的工具，您可以通過擷取網站的部分內容並與其他螢幕截圖進行比較來測試 CSS 是否正確呈現。它還提供測試計算 CSS 值和 HTML 元素位置的工具。
- Spritemapper
該應用程式將多個影像合併為一個，併為相應的切片生成 CSS 定位; 通過減少影像的數量和更好地利用連線，CSS spritemapping 可以減少您的網站的載入時間。
- Normalize.css
Normalize.css 對 CSS 重置採取了稍微不同的方法。Jonathan Neal 和 Nicolas Gallagher 並沒有消除所有的瀏覽器預設值，而是花時間研究不同的瀏覽器如何處理不同的程式碼段，然後保留那些有用的預設值。它節省了您作為設計師的時間，同時也提供一致的結果。
- Zen Coding
Zen Coding 是一個高速編碼和編輯的編輯器外掛。這個外掛的核心是一個強大的縮寫引擎，它允許您將表示式（類似於 CSS 選擇器）擴充套件為 HTML 程式碼。
- CSS Stress Testing and Performance Profiling
Andy Edinborough 幾乎能在所有瀏覽器中執行它所謂的“ CSS 壓力測試”程式碼。
- PCSS
一個 PHP 驅動的 CSS 前處理器，可以幫助您以更少的程式碼釋放 CSS3 的功能，如類巢狀、伺服器端瀏覽器細節、預設單位和變數。該工具需要 PHP5。
JavaScript 工具
- Modernizr 2
Modernizr 是一個廣泛使用的開源 JavaScript 庫，可以幫助您構建 HTML5 和 CSS3-powered 的網站。現在可以將功能檢測與媒體查詢和條件資源載入相結合，這為您提供了在各種情況下進行優化的能力和靈活性。
- FitText
FitText 是用於響應和流暢佈局的 jQuery 外掛，可以調整顯示文字的大小以適應父元素。它也是一個很好的解決方案，用於建立從小型移動裝置到30英寸桌面顯示器，所有內容都能很好顯示的標題。
- jQuery Waypoints
Waypoint 是一個小型 jQuery 外掛，可以在您滾動到元件時輕鬆執行某個功能。
- ligature-js
該 Java 指令碼允許您通過瀏覽網頁上的文字並在適當的位置插入連字，將文字模式轉換為通用的印刷排版連字。
- StronglyTyped
一個 JS 庫，允許您指定各種型別（布林值、數字、字串等）和常量（ Java 中的最終屬性）的強型別屬性。 它使用 ES5 getter 和 setter，並在不支援的瀏覽器中恢復為常規、鬆散型別的屬性。
- Kaffeine
JavaScript 語法的擴充套件，試圖使其更好用。與 JavaScript 非常類似，程式碼可以直接編譯成JavaScript。
- Crossroads.js
一個靈感來自 URL Route / Dispatch 實用程式的 JS 路由庫，它們存在於像 Rails、Pyramid、Django、CakePHP、CodeIgniter 等框架上。它解析一個字串輸入，並通過將字串與多個模式匹配來決定執行哪個操作。
- HEAD.js
一個指令碼，可以加快、簡化和現代化您的網站 – 簡明扼要的解決普遍問題。 您可以載入指令碼，如影像，以及安全地使用 HTML5 和 CSS3 。
- The JavaScript Grid
基於 JavaScript 的覆蓋網格——只需將程式碼片拖動到書籤欄中，開啟您的 URL 並單擊書籤。
- Grid Calculator
一個可以幫助您輕鬆建立自己的網格並將其下載到 Adobe Illustrator 或 Photoshop 的計算器。
- Griddle.it
一種乾淨簡單的方法來幫助您調整佈局。所有您所需要做的是將尺寸放在提供的 URL 之後，使一個背景引導圖片可以在您的瀏覽器上工作。網格是動態建立的，所以任何組合都能工作。
