前端技能學習導航

03-14

編輯工具

WebStormJetbrains公司旗下一款JavaScript 開發工具，被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能

Sublime Text一套跨平台的文本編輯器，支持基於Python的插件。Sublime Text 是專有軟體，可通過包（Package）擴充本身的功能。大多數的包使用自由軟體授權發布，並由社區建置維護

Aptana一個基於Eclipse的集成式Web開發環境，其最廣為人知的是它非常強悍的JavaScript編輯器和調試器

Notepad++一套自由軟體的純文本編輯器，由台灣人侯今吾基於同是開放源代碼的Scintilla文本編輯組件並獨力研發

Brackets一個免費、開源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成開發環境 (IDE工具)。該項目由 Adobe 創建和維護，根據MIT許可證發布，支持 Windows、Linux 以及 OS X 平台

Dreamweaver第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地製作出跨越平台限制和跨越瀏覽器限制的充滿動感的網頁

TopStyle一款 CSS 開發輔助工具，即 HTML5 / CSS3 編輯器，它專註於 HTML CSS 設計輔助，提供比較多的功能，如 CSS 代碼檢查等，據稱 TopStyle 的幫助文件非常好，有詳細的 CSS 指令，適於初次接觸 CSS 的學習之用

Komodo一個跨平台支持多種程序語言的Integrated Development Environment （IDE）軟體，目前他支持了在Windows與Linux上，Pythone, Ruby, Rails, Perl, HTML, CSS, and JavaScript,等的程序語言開發，以及多種程序語言語法著色

ChocolatMac系統上最新出現的一款強大的文本編輯器，兼具原生的Cocoa及強大的文本編輯功能。Chocolat支持多種編程語言的關鍵字高亮顯示、窗口分割、標籤頁、色彩主題等功能。界面和MacVim非常相似

AtomGithub 專門為程序員推出的一個跨平台文本編輯器。具有簡潔和直觀的圖形用戶界面，並有很多有趣的特點：支持CSS，HTML，JavaScript等網頁編程語言。它支持宏，自動完成分屏功能，集成了文件管理器

在線IDE

Dabblet跨瀏覽器兼容，對前端攻城師們來說是一個不得不處理的問題。為了在瀏覽器間呈現統一的顯示效果，攻城師們不僅要為每個遊覽器添加CSS前綴，甚至還需要用到一些特殊的CSS Hack技巧。於是，jsFiddle、JSBin等前端代碼的在線測試工具應運而生。然而，使用jsFiddle仍有很多不便之處。為了解決這個問題，前端攻城師Lea Verou自己動手，開發了一個名為Dabblet的HTML和CSS代碼段在線測試工具

JsfiddlejsFiddle是一個在線的shell編輯器，通過流行的JS框架創建自定義的環境，以簡化JS代碼。可以用於測試示例代碼。不僅如此，你還可以添加一個Ajax echo後端，並且通過一系列的JavaScript框架自動載入資源，如MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla等

CodeMirror又一款「Online Source Editor」，基於Javascript，短小精悍，實時在線代碼高亮顯示，他不是某個富文本編輯器的附屬產品，他是許多大名鼎鼎的在線代碼編輯器的基礎庫

JS BinJSBin 是一個 Web 應用，主要用於幫助測試 JavaScript 和 CSS 的代碼片段。功能與 jsFiddle 網站一致

Cloud9利用了雲技術，運行在瀏覽器中，允許你隨時隨地運行、調試和部署應用程序。一個完整的game-changer會永久性的改變應用程序的開發方式。Cloud 9可以讓你集中精力編程，不用顧及到搭建環境等瑣事中

JS框架

AngularJSGoogle收購，用來開發Web頁面的框架、模板以及數據綁定和豐富UI組件。它支持整個開發進程，提供web應用的架構，無需進行手工DOM操作。 AngularJS很小，只有60K，兼容主流瀏覽器，與 jQuery 配合良好

Backbone.js一種種重量級javascript MVC 應用框架,通過Models進行key-value綁定及custom事件處理,通過Collections提供一套豐富的API用於枚舉功能,通過Views來進行事件處理及與現有的Application通過RESTful JSON介面進行交互

Ember.js一個雄心勃勃的Web應用程序，消除了樣板，並提供了一個標準的應用程序架構的JavaScript框架

knockout一個輕量級的UI類庫，通過應用MVVM模式使JavaScript前端UI簡單化

todomvc幫助你選擇一個MV*框架

Spine.js通常與 Backbone.js 進行比較；它受到 Backbone.js 的影響，並在使用率方面與前者接近。Spine.js 包含類、模型、控制器和視圖，這比 Backbone.js 引入的集合更加傳統一些

Polymer加盟Google的原Palm webOS開發團隊打造，是一套以「一切皆組件、最少化代碼量、最少框架限制」為設計理念的Web UI框架。Web Components則提供了一種更徹底的解耦方式，更加方便了UI的開發和模塊化，可以說是Polymer的基礎之一

ReactFacebook開源的JavaScript庫，用於構建UI。你可以在React里傳遞多種類型的參數，如聲明代碼，幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變數、甚至是可交互的應用組件

LABjsLoading 指非同步並行載入，Blocking 是指同步等待執行。LABjs 通過優雅的語法（script 和 wait）實現了這兩大特性，核心價值是性能優化

RequireJS鼓勵代碼的模塊化，它使用了不同於傳統 script 標籤的腳本載入步驟。可以用它來加速、優化代碼，但其主要目的還是為了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址

Sea.js簡單友好的模塊定義規範：Sea.js 遵循 CMD 規範，可以像 Node.js 一般書寫模塊代碼。自然直觀的代碼組織方式：依賴的自動載入、配置的簡潔清晰，可以讓我們更多地享受編碼的樂趣

Kissy淘寶開源，一款跨終端、模塊化、高性能、使用簡單的 JavaScript 框架。除了完備的工具集合如 DOM、Event、Ajax、Anim 等，它還提供了經典的面向對象、動態載入、性能優化解決方案。作為一款全終端支持的 JavaScript 框架，KISSY 為移動終端做了大量適配和優化，讓你的程序在全終端均能流暢運行。

UI框架

Bootstrap目前開源社區最受歡迎的項目之一，可謂大名鼎鼎了，最新版本3.x兼容IE9+

Foundation屬於WEB前端框架的先驅者，知名度被Bootstrap反超，但其優秀程度相比Bootstrap只強不弱！最新版本5.x兼容IE9+

Semantic UIUI框架的後起之秀，UI動畫效果很棒，一個很有潛力的項目！兼容IE9+

knockout一個輕量級的UI類庫，通過應用MVVM模式使JavaScript前端UI簡單化

PureIE7+，大名鼎鼎的Yahoo!支持開發的UI框架，其特點簡潔小巧，對於喜歡簡潔的朋友來說是一個不可多得的好項目!

YAMLIE6+，一個歷史悠久的前端框架，功能單一小巧，模塊化的 CSS 框架，特點是靈活、可訪問和響應式

jQuery UIIE6+,以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控制項

Famo.us用於構建移動應用以及桌面應用，獨特之處在於其javaScript渲染引擎和3D物理引擎，它向開發者展示了使用JavaScript也能達到原生應用程序動畫的質量

Concise適合從頭構建移動應用，而且還包含了一個簡單的網格布局系統、漂亮的印刷字體，以及少量花哨的特性

OnSenUI適合PhoneGap/Cordova混合應用的開發，它注重差勁可用的移動應用

Tuktuk一個輕量級的面向對象的CSS框架，使用它可以輕鬆地創建響應式、可擴展的網站。它包括多達12列的網格布局，以及表單、按鈕、表格、列印字體等等

JS庫

jQuery最新版jquery-3.2.1兼容IE9+，文檔說明很全很想起，社區很大。操作文檔對象、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能

vue.js簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

vue.js組件實戰學習

Prototype版v1.7.2 兼容IE6+，非常優雅的javascript基礎類庫，對javascript做了大量的擴展，而且很好的支持Ajax

Zepto版v1.7.2 兼容IE10+，一個輕量級的針對現代高級瀏覽器的JavaScript庫，它與jquery有著類似的api

YUI最新版v3.18.1 兼容IE10+，建立一個高互動的網頁，它採用了AJAX, DHTML 和 DOM 等程式碼技術

Underscore.js提供了100多個函數,包括常用的: map, filter, invoke — 當然還有更多專業的輔助函數,如:函數綁定, JavaScript模板功能,創建快速索引, 強類型相等測試, 等等

snapsvg用於在HTML前端生成SVG的JavaScript工具集；SVG的工具集其實有很多，如svg.js、raphaeljs，離開了這些工具，我們依然可以實現SVG作圖，只不過要自己寫SVG XML

Dojo讓你更容易使Web頁面具有動態能力，或者在任何能夠穩定支持JavaScript語言的環境中發揮作用

MochiKit一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標準庫提供的很多便利之處的啟發，另外還緩解了瀏覽器版本之間的不一致性。

MooTools一個簡潔，模塊化，面向對象的JavaScript框架。它能夠幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強大。比如增加了動畫特效、拖放操作等等

Mock.js一款模擬數據生成器，旨在幫助前端攻城師獨立於後端進行開發，幫助編寫單元測試。根據數據模板生成模擬數據、模擬 Ajax 請求，生成並返回模擬數據、基於 HTML 模板生成模擬數據

Three.jsJavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象

D3.js最流行的可視化庫之一，它可以將任意數據綁定到DOM（Document Object Model，文檔對象模型），然後對該文件提供數據驅動轉換。還可以將一組數據生成基本的HTML表，或生成一個SVG條形圖

CSS庫

Kite一個靈活的布局助手CSS庫。Kite使用`inline-block`而不是最新的CSS語法。它注重實際，易於理解且容易使用。Kite用法與flexbox相似：justify-content,等等。你可以很輕鬆地創建複雜的模塊。Kite是基於OOCSS 與 MindBEMding，它可以幫助您快速構建自己的組件。Kite支持幾乎所有瀏覽器，它屬於MIT許可

DynCSS將您的CSS解析成-dyn-(attribute)規則。這些規則是模擬瀏覽器事件(如滾動和縮放)的javascript表達式。其結果會應用到上面指出的CSS屬性。你可以將任何CSS屬性設置為動態--前提是它對於jQuery的css()方法是可寫的。你可以通過附加-dyn-前綴並指定一個引用的javascript表達式來實現

Hover.CSS一個有用的CSS3懸停效果集合，可用於動作調用，按鈕，商標，特性圖片等。自定或直接應用到你自己的元素上都非常的簡單。 hover.css可以用多種方式來使用; 可以複製粘貼你喜歡的效果到你自己的樣式表裡，也可以引用樣式表。然後只需向你想要的元素需添加對應效果的class名稱即可。如果你只打算使用一個或幾個效果，最佳實踐是複製粘貼一個效果。

Spinkit一個酷炫的載入動畫CSS集合。 Spinkit使用CSS動畫來創建吸引人的易於自定義的動畫。該集合目標不是提供所有瀏覽器的解決方案--如果你需要支持哪些還沒實現CSS動畫屬性（像是IE9及之前的版本）的瀏覽器，你需要檢測下這些動畫屬性並實現一個變通方案。

Magic CSS3 Animations一個特殊效果的CSS3動畫庫，你可以免費用於你的web項目。簡單的引用CSS樣式：magic.css或精簡版magic.min.css即可

Buttons一個可以創建高度自定義、靈活和現代感十足的web按鈕的CSS庫。該庫由Sass+Compass構建，支持正方形、圓角矩形或者圓形的按鈕，並且可選是否扁平以及其他自定義的效果（如發光）。所使用到的尺寸、顏色、效果和字體可以通過變數的幫助進行修改，並且可以非常容易的進行擴展。

CSS Spinner一個CSS螺旋動畫載入的集合。每個旋轉包含一個使用『loader』 class的div，其文本內容為『Loading…』。文本是為屏幕閱讀器使用的且可用作老瀏覽器的後退的狀態。

Typebase.css是個最小化的、可定製的字體樣式表。它有less和SASS版本，所以能夠很容易地修改融入現代的Web項目。它提供了所有排版所必要的基礎工具且不需添加其他任何設計內容。它被創建用來完成項目發展和成長期時的修改，能和normalize.css很好的工作

Beautons一個用來創建漂亮、簡潔按鈕的易用庫。你可以應用各種樣式、函數已經其他的更多內容到按鍵上，包括改變它們的大小，設置它們的可用與否以及更多設置

Hint.css一個使用SASS構建只使用CSS和HTML的提示庫。該庫使用數據屬性、內容屬性、偽元素以及CSS3轉換。提示框簡潔漂亮，有箭頭且可放置在父元素的任何一邊

工程化工具

Gulp用自動化構建工具增強你的工作流程！

GruntJavaScript 世界的構建工具

FIS3解決前端開發中自動化工具、性能優化、模塊化框架、開發規範、代碼部署、開發流程等問題

Webpackwebpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.

NPM一個NodeJS包管理和分發工具，已經成為了非官方的發布Node模塊（包）的標準。

國外牛人

Paul Irish著名的前端開發工程師，同時他也是Chrome開發者關係團隊成員，jQuery團隊成員，Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer

TJ Holowaychuk程序員兼藝術家，Koa、Co、Express、jade、mocha、node-canvas、commander.js 等知名開源項目的創建和貢獻者

Addy Osmani谷歌前端開發工程師，創建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator，出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》兩本技術書籍，而且還是著名的 jQuery、Modernizr 以及Backbone.js 框架的貢獻者

John ResigjQuery的創始人和技術領袖，目前在Mozilla擔任JavaScript工具開發工程師。著有《Pro JavaScript Techniques》（即《精通JavaScript》）等經典JavaScript書籍

Douglas CrockfordJavaScript開發社區最知名的權威，是JSON、JSLint、JSMin和ADSafe之父，是《JavaScript: The Good Parts》的作者。他同時也服務於ECMA的JavaScript2.0技術委員會（TC39）

Mike Bostock紐約時報圖形編輯，知名可視化庫 D3.js的主要作者

Mark OttoTwitter前設計師，與Jacob Thornton合作開發了大名鼎鼎的CSS/HTML框架Bootstrap

James Hallidaynode社區最活躍的貢獻者，NPM排名僅次於TJ Holowaychuck，在寫代碼之外他還是個自成一派的插畫家。目前substack在NPM上發布了300+的模塊

Mr.doobJS三維模型庫three.js, Code Editor（編碼器）的作者

Jessica Lord2013年5月份加入Github設計團隊。是開源項目sheetsee.js的作者

Steve Souders就職於Google；《High Performance Web Sites》的作者，創建了YSlow，位居Firefox擴展TOP25的首位，創建了很多其他的性能工具和服務，包括HTTP Archive、Cuzillion、Jdrop、SpriteMe、ControlJS和Browserscope，擔任Velocity的聯合主席，Firebug Working Group的聯合創始人，在斯坦福大學教授「CS193H: High Performance Web Sites」科目，經常進行公開演講

Mathias Bynens協助開發多個開源項目，如jsPerf、HTML5 Boilerplate

國內牛人

玉伯淘寶前端類庫 KISSY、前端模塊化開發框架SeaJS、前端基礎類庫Arale的創始人

阮一峰70年代生於上海。畢業於上海財經大學，經濟學博士，同時也是程序員，個人博客訪問量過千萬，譯有《黑客與畫家》、《軟體隨想錄》。目前供職於一所上海本地高校。本文為阮一峰筆記體博客文集《如何變得有思想？》和《一個尋找作者的讀者》的代序

老趙金融行業程序員，目前就職於摩根大通（香港）。多年微軟MVP，InfoQ中文站兼職編輯。雖然廣泛涉獵各類技術，但早就被人民群眾貼上「微軟」標籤，現已認命

朴靈阿里數據平台數據產品部資深工程師。致力前端、數據可視化、Node等領域

克軍前雅虎中國前端工程師，現豆瓣前端工程師，休閑范兒長發帥哥一枚

司徒正美著名的JavaScript專家，去哪兒網前端架構師，立志做考古學家的日語系工程師，穿梭於二次元與二進位間的「魔法師」，做過陶藝，寫過小說，涉獵Java、Ruby、 JavaScript。曾出版《JavaScript框架設計》一書

Winter阿里巴巴高級技術專家，著名JavaScript專家。曾參與Bambook開發，更早為微軟工作，開發Windows CE平台的IE瀏覽器

周愛民Node-Webkit的項目發起人。目前任職於Intel公司開源技術中心（OTC），從事Web和瀏覽器技術開發工作。現在主要工作是開發和維護Node-Webkit項目。此前從事過MeeGo、Tizen和JNI xml性能庫的開發和數據中心解決方案服務。畢業於中科大少年班，在計算機系獲得博士學位，研究方向為高性能計算

小魚國內資深前端開發工程師，Web 標準佈道者，前支付寶前端開發部 CSS 樣式庫負責

蘇千淘寶網數據產品部資深Web開發工程師，CNode.org社區核心成員

湯姆大叔熟悉Waterfall、Agile(Scrum&XP)，染指C#、ASP.NET、MVC、EF、NHibernate、SQL Server、Oracle、JavaScript、HTML5、CSS3、JQuery、Knockout、Silverlight、WPF、WCF、ADFS等技術

相關社區

GitHub一個分散式的版本控制系統，最初由Linus Torvalds編寫，用作Linux內核代碼的管理。在推出後，Git在其它項目中也取得了很大成功，尤其是在Ruby社區中

StackOverflow一個與程序相關的IT技術問答網站。用戶可以在網站免費提交問題，瀏覽問題，索引相關內容，在創建主頁的時候使用簡單的HTML。在問題頁面，我們不會彈出任何廣告，銷售信息，JavaScript 窗口等

SegmentFault一家中文的開發者社區及媒體。最初的產品原型來自於國外最大的程序員問答社區 StackOverflow，但其產品形態經過一年多的發展，已經有問答、博客、活動等，它還是多個黑客馬拉松活動的組織方。

Google CodeGoogle公司利用自身伺服器資源提供的開發人員主頁。其最初目的是為Google自身的開源軟體提供開發平台，以及協助開發者擴展Google產品的功能。隨著Google開源之夏等項目的推進，Google代碼正在成為一個開放的項目託管平台。

掘金掘金是中國質量最高的技術分享社區，邀請稀土用戶作為 Co-Editor 來分享優質的技術乾貨，從前端到後端開發，從設計到產品，讓每一個掘金用戶都能挖掘到有價值的乾貨。

編程小技巧

何去何從

內推網內推網，一個接地氣的互聯網招聘社區，專註於做互聯網行業內部推薦、公司直招類型的網路招聘；內推網打造內推行業最大最專業的互聯網招聘、內部推薦的網路招聘平台，內推網(neitui.me)，互聯網招聘內部推薦直招平台。內推網(neitui.me)，互聯網招聘內部推薦直招平台

拉勾網拉勾網於2013年7月20日上線，專業的互聯網領域招聘平台，專註於為互聯網從業者提供更好的職業機會，企業覆蓋領域包括互聯網、移動互聯網、電子商務、遊戲、O2O、大數據、雲計算、社交網路、互聯網金融、在線教育、在線旅遊、等25個互聯網細分市場

周伯通公司源於豆瓣小組上的積累，組長馮濤（獸汰姆）創業做了周伯通招聘。馮濤給周伯通劃定的方