15 個用於順利 Web 開發的便捷工具
已發表: 2015-11-06我們不是堅持刻板印象的人，但可能已經有一段時間沒有（立體）典型的 Web 開發人員刮掉他那該死的鬍鬚了，或者換了衣服，或者洗了個澡，或者刮了那該死的鬍鬚……
你真的不能怪他們。 自從所有開發人員都喘口氣以來，已經有一段時間了。 2015 年是 Web 開發技術突飛猛進的好年頭，但開發人員再也不能在閒暇時打破他的筆記本電腦/MAC（像老闆一樣）並為平台編寫代碼。
現在你必須處理支持多平台的響應式設計，HTML5，PHP7 將在今年進一步發布，像 IE 這樣的瀏覽器不會停止對所有東西的錯誤處理......逐漸增長到 -物聯網本身的矩陣級別。
這是我們開發人員可以做的一切來跟上。 但我們這樣做，主要是因為這些漂亮的工具。
看一看。
1.科莫多編輯
一切都源於開發人員的代碼，因此從您能找到的最佳編輯工具開始是很自然的。 Komodo Edit 對於所有這些以及更多內容來說都是相當潔淨的。 它是一個不錯的跨平台、多語言文本編輯器，供您編寫和編輯代碼。哦，它是免費的。
該工具可在 Windows、Mac、Linux/UNIX 上運行，因此毫不費力。 我們還喜歡它的自動代碼完成功能，適用於 HTML、CSS、JavaScript、Java、PHP、Ruby、Perl（世界上大約 5 個人）等語言。這是一款智能文本編輯器。
獎勵積分，以增加項目管理器功能的便利性，用於組織和跟踪文件。
2. CSS 3.0 製造商
老實說，儘管您喜歡 CSS3 的一切，但在為諸如圓角該死的邊緣之類的東西編寫語法時，您還是忍不住有點討厭它。 讓你睡不著覺是一個如此微不足道的細節，但無論如何你都會這樣做。 您不能記住超過 100 個新屬性及其各自的前綴。 所以，感謝上帝提供了像 CSS 3.0 Maker 這樣的工具。
這個簡潔的小在線工具可以讓您將棘手的代碼複製並粘貼到您的樣式表中。 它為您選擇的框半徑、漸變、文本和框陰影、變換、過渡和旋轉等樣式細節生成代碼。 它還將顯示哪些桌面和移動瀏覽器支持這些樣式屬性。 一個小的預覽區域將顯示效果，代碼可以從視圖框中復製或下載到 HTML 文件中。
對於我們這些不能在看似平庸的風格細節上花費太多時間的人來說，這個工具是一個救命稻草。
3.--無前綴
“擺脫 CSS 前綴的地獄！” - 無前綴介紹頁面。
這是一個嚴肅的工具，由 Github 的一位名叫 Lea Verou 的天使將我們從“前綴地獄”中拯救出來。 它將在<link>或<style>元素的樣式表中添加供應商前綴（您看不到的地方）。 另外：您不必擔心新的<link>或<style>元素、jQuery 的.css()前綴或您所做的任何更改，因為它會涵蓋所有內容。
有什麼不喜歡的？
4. Blokk字體
“Lorem Ipsum”長期以來一直是佔位符文本。 幸運的是，我們現在有了 Blokk：這種字體可以讓難以理解的拉丁語的“痛苦”戛然而止。
Blokk 讓您在創建模型和線框時將塊“文本”用作佔位符。 不言而喻，它不會在演示過程中讓那些不太懂網絡的客戶感到困惑。
5. 豐泰羅
在圖標字體成為現實之前，開發人員必須尋求設計師的幫助來創建可擴展的圖標。 開發它們所花費的時間（順便說一句，包括創建、提取、實施和定制）幾乎是“絕對荒謬的”。 但後來有人把圖標變成了字體，每個人都過著幸福的生活……在可預見的未來。
Fontello 是一個很棒的圖標字體生成器。 它可以讓您從數以千計的圖標中進行選擇，自定義它們的映射或編輯它們的名稱，並將它們編譯成一個字體文件。 這太棒了，而且是免費的。
我們非常感謝 Vitaly Puzrin。
6. 打字機
打開瀏覽器的 JavaScript 並開始測試您選擇的字體在實際網站上的外觀。
Typetester 並不復雜。 它允許您輸入和比較不同的字體並測試它們的外觀。 你也可以玩弄大小、跟踪、顏色等，直到你得到你想要的。 您一次最多可以比較 36 種不同的字體。 想像一下您可以節省多少時間。
它太酷了。
7.臟標記
編碼有時會有點累，但代碼清理存在於 Level: Utter Tedium。 但是，如果您想防止錯誤並加快加載速度，這是必要的。
Dirty Markup 有助於節省您原本可以花在從事更有趣活動（培根三明治，有人嗎？）上的時間。 這個帶有其他單語法清理工具的組合功能。 我們談論的是 HTML Tidy、CSS Tidy、JS Beautify 和 Ace Editor。 那是一種綜合清潔劑。
這是一個基於 Web 的應用程序，用於清理和格式化您的 HTML、CSS 和 JavaScript。 我們不可能要求更多。
8.蟲群
使用這個強大的工具，您可能會成為一個殺死錯誤的義務警員。
BugHerd 遵循古老的格言“保持簡短和簡單，愚蠢”。 它可以捕獲客戶反饋，自行解決小問題，跟踪錯誤（供您消滅）。 它還將扮演秘書並管理您的項目。
您網站上的超級簡單的點擊式 UI 可讓您的用戶報告問題。 BugHerd 將它們變成包含您可能需要的所有信息的報告（例如用戶的瀏覽器版本）。 它易於設置，使用起來很有趣，並且具有自動屏幕截圖（瀏覽器擴展）、直接鏈接、文件附件、完整選擇器數據和討論等功能。
每月 29 美元的標準訂閱費，這是一個陷阱。
9. 螢火蟲
響應式網頁設計不僅僅是一種新時尚，因為它會一直存在。 但就目前而言，您會發現流暢的佈局充其量是棘手的。 您還會發現自己在嘗試在各種屏幕尺寸上測試您的佈局時非常憤怒。
幸運的是，Screenfly 是一個不錯的小型網絡應用程序，可以為您測試您的 @media 查詢。 您插入您的 URL，它將顯示您的查詢如何處理您在頂部面板中單擊的設備尺寸。
它不考慮瀏覽器之間的渲染差異，但您可以為此使用瀏覽器鏡頭。 否則，這是一種簡單、精美的組合方式，可以查看您的網站在不同分辨率下的外觀。
10. 基礎
既然我們在談論 RWD，我們不妨開始談論框架來開發它。
互聯網上關於哪個前端框架更好的爭論非常激烈：Bootstrap 還是 Foundation？ 您可以使用其中一種。 但在網格系統、用於設計的比例單位（儘管 Bootstrap 4.0 Alpha 已移至 em 和 rem 單位）、從右到左的支持、定價表、遊覽和畫布外導航方面，Foundation 更加突出.
很明顯我們更喜歡Foundation。 它與 SASS 和 CSS 一起工作，充滿了一整套功能，而且通常更方便和靈活。
我們同意 Zurb 的觀點：這是“瘋狂的快”。
11.土坯邊緣
經過十年軟件將設計置於代碼之前，Adobe 終於為編碼人員提供了優勢。
坦率地說，這些令人驚嘆的工具和服務是在牢記新的前端編碼趨勢的基礎上製作的。 他們給了我們很大的款待。 Edge Animate 可幫助編碼人員創建動畫，同時消除所有 Flash 痕跡。 對不起 Adobe，Flash 很棒。 但 Animate 使用標準的 HTML 和 JavaScript，而且你知道，一刀切……
有用於從 HTML 文檔中編輯 CSS 的 Edge Code。 Inspect 整合了響應式設計的瀏覽器測試和設備兼容性測試，並將它們全部同步以實現超快速更新/定制。 廣受歡迎的 Typekit 現在是 Edge 家族的一部分。 Reflow 尚未發布，但它可能會將其他前端 CSS 網格製造商從水中吹走。 還有更多。
我們知道。 我們也不得不從地板上摘下我們的下巴。
12.流浪者
Vagrant 不僅僅是虛擬開發軟件。
這種美感讓您可以創建便攜式、易於復制的工作環境。 它將虛擬化軟件、服務器基礎盒和配置工具整合到一個功能強大的軟件包中。 基本上，您不再需要 VirtualBox + Ubuntu + Chef。 Vagrant 將完成這三者的工作，並且在此過程中佔用的空間更少。 高級用戶還將告訴您它如何讓您輕鬆設置多 VM 網絡。
它是用 Ruby 編寫的，但適用於 PHP、Java、JavaScript、Python 和 C#。 你可以在 Windows、Mac OSX、Linux 和 FreeBSD 上使用 Vagrant。
它的速度非常快，因為它沒有任何 U 友好型——我想要的它看起來不錯，但佔用了急需的空間。 它可以很好地作為開發人員的測試環境。
這是我們所能得到的最接近聖杯的地方。
13. PageSpeed Insights
谷歌的 PageSpeed Insights 完全按照它所說的那樣做。 它讓您深入了解主頁的前端性能。 對於那裡的許多高大上的開發人員來說，這將是一個大開眼界。 所以來一場狂歡吧，從所有將要被拉扯的頭髮開始加速禿頂。
它所做的只是測量以下之間的經過時間：請求和首屏內容呈現，以及請求和整頁呈現。
它將檢查與網絡無關的方面以計算您的頁面的性能：服務器配置、HTML 結構、JavaScript、CSS 和圖像。
它鋒利無比，速度極快； 所以它肯定會傷害你的感情，如果你得分低，很可能會讓你哭。 它還會嘗試通過給你一些有針對性的建議來提高你的表現來彌補它，就像一個居高臨下的父母一樣。
我們喜歡它。
14. 吉特
大多數現代開發人員已經熟悉它。 畢竟，這就是你解釋像 GitHub 這樣的社區存在的方式。
Git 是一個開源版本控制和源代碼管理系統，可以在存儲庫中跟踪您的項目歷史。 它基本上是一個超快速、超高效的 PA。
它使您可以自由地進行實驗，而不必擔心永遠搞砸一切。 您還可以創建多個存儲庫並使用分支/合併來處理各個功能。 對於協作工作來說，它是一個特別有用的工具。
它是完全分佈式的，因此當您離線時（設計或意外），您不必擔心無網噩夢。 您可以簡單地將更新添加到您的主存儲庫中，它會耐心等待您重新上線。
15. W3C 標記驗證
這是通過的最後儀式。
W3C 標記驗證非常簡單且必要。 正如 W3C 所說，驗證可以：幫助您調試、讓您的網站面向未來（瀏覽器基於 W3C 標準構建）以及幫助維護。
它還通過向您展示您的方式的“錯誤”來教您如何符合標準。
標記驗證不應該被認為是壓制性的，因為實際上，它不是。 它將幫助您學習如何編寫更好的代碼……
像專業人士一樣。
底線
當然，還有更多的工具、插件、附加組件、資源和社區，它們使開發……雖然不完全容易，但不那麼痛苦。 現在正在開發更多。 Firefox 的 Firebug 插件可以讓您實時監控和編輯 HTML、CSS 和 JavaScript。 PixelDropr 是一個 Photoshop 插件，可讓您輕鬆地為您的網站創建可愛的按鈕和圖標。
每個專業開發人員最終都會擁有自己的應用程序和軟件“工具包”，以更快、更高效地工作。 有些是免費的，有些我們需要付費。
但是，誰能給便利定價呢？