英文原文：dezignmatterz，感謝@Phinome 的熱心翻譯。如果其他朋友也有不錯的原創或譯文，可以嘗試推薦給伯樂線上。以下是譯文。
————————————————————–
開發一個程式碼優良、設計美觀的網站，通常會隨著專案的進展變得費勁，甚至對於那些資深的工程師而言也不例外。工程師與設計師不僅要能夠把握當下Web發展潮流、Web標準和未來的發展趨勢，更重要的是能夠決定怎樣利用它們，使之融入當下的設計中。幸運的是，我們有許許多多開源的開發工具提供給工程師們，它們能夠幫助工程師加速他們的工作程式，使得他們能更加高效和多產。
下面，我們就列出一些對於Web開發者和Web設計師而言非常有用而且時髦的工具。我們希望這些工具能夠使得你的工作更加靈活和順暢，從而使得你可以將更多的時間聚焦在一些重要的事兒上。
1. CONVERSE.JS ：類似 Facebook Chat 的開源聊天程式
Converse.js 是一個開源的聊天程式，它能夠連結任何 XMPP/Jabber server (like Google Talk，Skype， etc。) 就像我們熟知的Facebook-Chat那樣，它可以放在網頁底部，支援一對一或者一對多會話。能夠接收或者拒絕會話請求，可設定的狀態有線上、離開…… ， 同時聊天者可以看到正在輸入的提醒。
2. UNICODE- TABLE : WEBSITE FOR UNICODE CHARACTERS
Unicode-Table 是一個提供羅列著任何字元的 HTML 程式碼和 Unicode 數字碼的網站。方便了搜尋和定位 ，這些編碼已分類排列。同時這個網站還提供對於任何文字進行編碼和解碼的轉換功能。
3. Sylius
Sylius 是一個針對PHP（和基於Symfony2）的開源並且免費的電子商務解決方案．它能夠輕鬆管理任何規模和擁有複雜產品+類別的商店。商品可以有不同的稅率，多種銷售方式。它融合了多閘道器支付處理庫(multi-gateway payment processing library)。
Pingendo 是當下正處於 beta 版的新IDE，它能夠工作在Win+Mac環境。當下階段它是免費使用的（beta 版之後要收費 – 暫不得而知），其他目的在於簡化web開發。它提供了一棵可編輯的DOM樹，使能夠快速檢視樹和編輯節點的樣式或者節點的屬性。Pingendo已經內建支援Bootstrap + Foundation frameworks an Font Awesome（更多的特性也會在將來的版本中加入）。
Pure 是由Yahoo創造的全新的CSS框架。它僅僅使用符合標準的HTML-CSS構建，並未使用JavaScript。這個框架採用響應式佈局構建，同時提供 fortypography，網格，表單，按鈕，表格和導航的樣式。它的標記（Markup）也是非常簡單的，同時整個框架也十分輕量（採用gzip壓縮後最小隻有5.75KB）
Prepros 是一款針對Windows平臺的開源應用，能夠自動編譯Less，Sass，Scss，Stylus，Jade，Coffeescript，Haml 和Markdown 程式碼。它通過注入CSS（HTML和JS也可）到瀏覽器中，來達到無需重新整理的實時效果顯示。它有一些編譯處理選項，例如：輸出格式或者樣式（壓縮，巢狀……）
7. JSONMATE : JSON INSPECTOR & VISUALIZER
JSONmate 是一個Web App 。它能夠美化（和醜化）那些能夠被直接貼上或者從遠端URL載入而來的JSON 字串。而且，它擁有一個非常優秀的視覺化編輯工具，使得你可以自定義資料和對資料提供不同的呈現方式。JSONmate 已經支援JSONP。JSONP也是一個開源專案。
phpFastCache 是一個開源的PHP快取庫。它能快速整合單一檔案。它也支援多種快取方式（apc， memcache， memcached， wincache， files， pdo and mpdo），能夠在快取期間被定義，同時它有一個非常精簡的API。
9. ICE CODER : PHP POWERED AND OPEN SOURCE WEB IDE
ICEcoder 是一款基於Web的快速構建PHP程式的開源IDE。
它的工作方式非常之簡單，你只需要簡單的拖拽，就可以將你的app 資料夾放置在任何你喜歡的地方，並且任意一個檔案（包括子檔案）都已經處於待編輯狀態。它支援程式碼高亮，分隔標籤，HTML 結構顯示，你也可以很容易的選擇它們。它也支援Emmet和 Adminer處理工具（一種MYSQL管理工具）。ICEcoder擁有強大的JavaScript API方便呼叫，與此同時它也能與很多流行的語言協同工作（PHP， JS， CSS， LESS， Ruby， etc。）
Flatdoc 是一種使你能夠為你的開源專案快速建立站點的最快方式。它是一個很小的JavaScript檔案，可獲取 Markdown 檔案和將它們繪製在所有頁面。事實上，它是一種從Readme 檔案中快速建立開源文件的最簡單的方式。最後，它並不需要服務端的元件，也不需要構建程式。
Jekyll 是一個單頁、部落格、靜態站點生成工具。它使用一個模版目錄（代表著這個站點的原始形式），通過使用Textile 或者 Markdown 和 Liquid 轉換器執行它，執行後將產生適應 Apache 伺服器或者你喜歡的伺服器的完整的、靜態的站點。它也是 Github Pages 背後的引擎，Github Pages 可用於做個人部落格或者是專案主頁。
Web Colour Data 提供了一種非常便捷的服務，使用者可找出某個網頁用了那些色彩。你僅僅需要簡單的提交一個URL，它就會自動提取和分析這個URL中的色彩方案。用一種百分比分段方式呈現色調分佈。另外，在許多流行網站上使用的配色也是一個很好的色彩靈感來源。
FROONT 是一種基於web執行在瀏覽器中的設計工具，它使得所有的視覺設計師能夠創造出響應式頁面佈局，甚至不需要任何的編碼技巧。FROONT使得建立響應式佈局變得視覺化。通過在瀏覽器中憑直覺使用拖放工具即可實現設計。每一個專案都有它自己的URL，這樣使得它能夠很容易被放到真實的裝置上進行測試。
Editr 是一個HTML、CSS 和 JavaScript 編輯工具，基於ACE 編輯器。它非常容易安裝，在一個頁面中支援多種例項。可以通過JS 物件或者HTML屬性進行配置。Editr 釋出在MIT許可協議下。
Stringer 是一個開源的自託管、非社交化的RSS閱讀器。Stringer沒有額外的依賴，沒有社交化推薦或者分享，也沒有時髦的機器學習演算法。但它支援鍵盤快捷鍵。
英文原文：dezignmatterz，感謝@Phinome 的熱心翻譯。如果其他朋友也有不錯的原創或譯文，可以嘗試推薦給伯樂線上。
譯文連結：http://blog.jobbole.com/41153/
【非特殊說明，轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊，謝謝合作！】