## JavaScript庫
我敢說JavaScript語言是目前web開發最流行的編程語言。JavaScript庫又稱JavaScript框架，封裝了很多預定義的對象和使用函數。是網站更容易兼容各式各樣的瀏覽器。那么您就可以使用以下JavaScript庫來幫助你的開發更好進行。
* `jQuery`：快y速，小巧，功能豐富的JavaScript庫
* `BackBoneJS`：為復雜Javascript應用程序提供模型(models)、集合(collections)、視圖(views)的結構。
* `D3.js`：D3是基于數據的文檔操作javascript庫,D3能夠把數據和HTML、SVG、CSS結合起來,創造出可交互的數據圖表。
* `React`：Facebook的Javascript庫為構建用戶界面而開發。
* `jQuery UI`：jQuery UI 是以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。
* `jQuery Mobile`：基于HTML5用于創建移動 web 應用程序的框架。
* `Underscore.js`：JavaScript實用庫,提供了類似Prototype.js的一些功能,但是沒有繼承任何JavaScript內置對象。
* `Moment.js`：一個 JavaScript日期處理類庫，用于解析、檢驗、操作、以及顯示日期。
* `Lodash`：一個 JavaScript 實用工具庫,提供一致性,模塊化,性能和配件等功能。
## 前端框架
通俗的前端由HTML，CSS，JavasScript等構成。當然為了適應Web開發日益增長的需求，應運而生許多獨立的前端框架，例如Bootstrap。一個優秀的框架可以為前端開發人員在開發過程中增益，減小開發壓力。
* `Bootstrap`： Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
* `Foundation`： 迄今為止最好的響應式前端框架，更快、更輕、更多功能、更靈活、更強大！
* `Semantic UI`：Semantic UI 是一款語義化設計的前端開源框架,其功能強大,使用簡單,為設計師和開發師提供可復用的完美設計方案。
* `uikit`：UIKit使用的變量基于LESS,具有體積小、模塊化、可輕松地自定義主題及響應式界面。
## Web應用框架
Web應用框架作為一個軟件框架，意在幫助和緩解開發者在進行Web應用的開發與維護時遇見的開發問題。例如：AngularJS，您可以在您的項目完全免費使用它.
* `Ruby`：Ruby on Rails 是使用 Ruby 語言編寫的網頁程序開發框架，目的是為開發者提供常用組件，簡化網頁程序的開發。
* `React`：React 起源于 Facebook 的內部項目，React 的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單。是現在非長熱門的框架。
* `Vue`：Vue.js 是用于構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。從技術上講， Vue.js 集中在 MVVM 模式上的視圖模型層，并通過雙向數據綁定連接視圖和模型。
* `AngularJS`：AngularJS 通過新的屬性和表達式擴展了 HTML，可以構建一個單一頁面應用程序。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
* `Ember.js`：一個用于創建 web 應用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持雙向綁定、觀察者模式、計算屬性（依賴其他屬性動態變化）、自動更新模板、路由控制、狀態機等。
* `Express`：基于 Node.js 平臺的 web 應用開發框架 基于Node.js 平臺,快速、開放、極簡的 web 開發框架。
* `Meteor`：Meteor 是一個構建在 Node.js之上的平臺，用來開發實時網頁程序。Meteor 位于程序數據庫和用戶界面之間，保持二者之間的數據同步更新。
* `Django`：Django是一個開放源代碼的Web應用框架,由Python寫成。采用了MVC的軟件設計模式,即模型M,視圖V和控制器C。
* `ASP.net`：ASP.NET是免費，高兼容的WEB應用框架，能夠提供標準化WEB應用構建時所需的解決方案。
* `Laravel`：一個免費，開源的PHP Web應用程序框架，可以基于MVC模式來創建Web應用程序。
* `Zend Framework 2`：一款的Web應用框架，基于PHP來創建Web應用和服務端應用。
* `Phalcon`：Phalcon 是開源、全功能棧、使用 C 擴展編寫、針對高性能優化的 PHP 5 框架。
* `Symfony`：Symfony是一個基于MVC模式的面向對象的PHP5框架。Symfony允許在一個web應用中分離事務控制，服務邏輯和表示層。
* `CakePHP`：CakePHP是一個運用了諸如ActiveRecord、Association Data Mapping、Front Controller和MVC等著名設計模式的快速開發框架。主要目標是提供一個可以讓各種層次的PHP開發人員快速地開發出健壯的Web應用，而 又不失靈活性。
* `Flask`：Flask是一個使用 Python 編寫的輕量級 Web 應用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎則使用 Jinja2
* `CodeIgniter`：CodeIgniter 是一個簡單快速的PHP MVC框架。它為團隊提供了足夠的自由支持，允許開發人員更迅速地工作。
## 任務批處理工具/包管理器
任務批量處理工具可將你的工作流程全自動化.例如你可以創建一個任務，使用JavaScript語言編寫的工具來進行自動化的處理。 然后打包，這樣會大大提高開發效率。 包管理器它能跟蹤所有已安裝的軟件、自動化進行安裝和刪除應用程序、以及確保所有軟件都保持更新以獲得最新的增強功能和錯誤修復。
* `Grunt`：Grunt是基于Node.js的項目構建工具。它可以自動運行你所設定的任務。
* `Gulp`：Gulp.js 是基于 Node.js 構建的一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。
* `npm`：NPM（node package manager），通常稱為node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發布等。
* `Bower`：Bower是一個客戶端技術的軟件包管理器，它可用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。
## 編程語言 / 開發平臺
所有Web開發都需要編程語言的支持.編程語言（programming language），是用來定義計算機程序的形式語言。它是一種被標準化的交流技巧，用來向計算機發出指令。一種計算機語言讓程序員能夠準確地定義計算機所需要使用的數據，并精確地定義在不同情況下所應當采取的行動。.當然進行Web開發不僅僅只有一門語言來進開發。
* `PHP`：PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本預處理器”）是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特點，利于學習，使用廣泛，主要適用于Web開發領域
* `NodeJS`：Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。
* `Javascript`：JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言
* `HTML5`：標記語言，是HTML和XHTML的最新版本。
* `Python`：Python是一種解釋型、面向對象、動態數據類型的高級程序設計語言。
* `Ruby`：Ruby，一種為簡單快捷的面向對象編程（面向對象程序設計）而創的腳本語言
* `Scala`：Scala是一門多范式的編程語言，一種類似java的編程語言，設計初衷是實現可伸縮的語言、并集成面向對象編程和函數式編程的各種特性。
* `CSS3`：CSS即層疊樣式表（Cascading StyleSheet）。 在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。CSS3是CSS的最新版本。
* `SQL`：結構化查詢語言(Structured Query Language)簡稱SQL，是一種特殊目的的編程語言，是一種數據庫查詢和程序設計語言，用于存取數據以及查詢、更新和管理關系數據庫系統；同時也是數據庫腳本文件的擴展名。
* `Golang`：Go是Google開發的一種編譯型，可平行化，并具有垃圾回收功能的編程語言。
* `Rust`：Rust是Mozilla開發的注重安全、性能和并發性的編程語言。
* `Elixir`：Elixir 是一種函數式編程語言,建立在Erlang虛擬機之上。它是一種動態語言,靈活的語法與宏支持,利用Erlang的能力來構建并發、分布式、容錯應用程序與熱代碼升級。
## 數據庫
數據庫（Database）是按照數據結構來組織、存儲和管理數據的倉庫。
* `MySQL`：MySQL是一種關聯數據庫管理系統，關聯數據庫將數據保存在不同的表中，而不是將所有數據放在一個大倉庫內，這樣就增加了速度并提高了靈活性。
* `MariaDB`：MariaDB數據庫管理系統是MySQL的一個分支，主要由開源社區在維護，采用GPL授權許可 MariaDB的目的是完全兼容MySQL，包括API和命令行，使之能輕松成為MySQL的代替品。
* `MongoDB`：MongoDB 教程 MongoDB 是一個基于分布式文件存儲的數據庫。由 C++ 語言編寫。旨在為 WEB 應用提供可擴展的高性能數據存儲解決方案。
* `Redis`：Redis是一個開源的使用ANSIC語言編寫、支持網絡、可基于內存亦可持久化的日志型、Key-Value數據庫，并提供多種語言的API。
* `PostgreSQL`：ostgreSQL支持大部分SQL標準并且提供了許多其他現代特性：復雜查詢、外鍵、觸發器、視圖、事務完整性、MVCC。
## CSS 預處理器
CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。
通俗的說，“CSS 預處理器用一種專門的編程語言，進行Web頁面樣式設計，然后再編譯成正常的 CSS 文件，以供項目使用。CSS預處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。例如：Sass，Less，Stylus。
* `Sass`： Sass是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。
* `Less`：Lesscss是一種動態樣式語言,屬于CSS預處理語言的一種,它使用類似CSS的語法,為CSS的賦予了動態語言的特性,如變量、繼承、運算、函數等,更方便CSS的編寫和維護。
* `Stylus`：Stylus 是一個CSS的預處理框架，2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，所以Stylus是一種新型語言，可以創建健壯的、動態的、富有表現力的CSS。
## 文本編輯器 / 代碼編輯器
無論你是做筆記，敲代碼，或者Markdown文檔編寫，一個好的文本編輯器都是必須擁有的！
* `Atom`：Atom 更為先進的文本代碼編輯器 - 由 Github 打造的下一代編程開發利器在代碼編輯器、文本編輯器領域,有著不少的「神器」級的產品。
* `Sublime Text`：Sublime Text 是一個代碼編輯器（Sublime Text 2和3是收費軟件，但可以無限期試用），也是HTML和散文先進的文本編輯器。
* `Notepad++`：Notepad++是 Windows操作系統下的一套文本編輯器(軟件版權許可證: GPL)，有完整的中文化接口及支持多國語言編寫的功能。
* `Visual Studio Code` ：微軟推出，一個運行于 Mac OS X、Windows和 Linux 之上的，針對于編寫現代 Web 和云應用的跨平臺源代碼編輯器。
* `TextMate`：TextMate是Mac下的著名的文本編輯器軟件，與BBedit一起并稱蘋果機上的emacs和vim。
* `Coda 2`: OS X下快速，簡潔，功能強大的編輯器【需要付費】.
* `WebStorm`：jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。
* `Vim`：Vim是一個類似于Vi的著名的功能強大、高度可定制的文本編輯器，在Vi的基礎上改進和增加了很多特性。
* `Brackets`：Brackets 是一個免費、開源且跨平臺的 HTML/CSS/JavaScript 前端 WEB 集成開發環境 (IDE工具)。
* `Emacs`：著名的集成開發環境和文本編輯器。Emacs被公認為是最受專業程序員喜愛的代碼編輯器之一。
## Markdown 編輯器
Markdown 是一種輕量級的「標記語言」,它的優點很多,目前也被越來越多的寫作愛好者,撰稿者廣泛使用。Markdown 十分輕量,學習成本也不高。
* `MWeb`：專業的 Markdown 寫作、記筆記、靜態博客生成軟件 【付費】
* `Markeditor`：MarkEditor 是最新的一款 Markdown 編輯器，除了基本功能外，還包含了諸如表格編輯、圖表、高亮、公式等等豐富的功能！【付費】
* `StackEdit`：一個開放源碼免費使用的 MarkDown 編輯器, 基于 PageDown,使用了 Stack Overflow 和其他 Stack Exchange 網站的 MarkDown 庫
* `Dillinger`：Dillinger 是一款在線的 Markdown 編輯器,支持更換主題,字數統計,云服務保存,導出 HTML、PDF 等功能。
* `Mou`: Mac OS X下的免費Markdown編輯器【作者貌似已經跑路了】
* `Texts`：Windows和Mac OS X下純文本編輯器。
## icon圖標
幾乎每一個Web開發者，尤其是前端開發人員都會需要icon圖標來增色項目。
* `Font Awesome`：Font Awesome為您提供可縮放的矢量圖標,您可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。
* `IconMonster`：免費，高質量, 龐大且資源不斷增長的簡潔的icon圖標庫。
* `IconFinder`：Iconfinder提供美麗的圖標,服務數以百萬計的設計師,開發商和其他有創意的專業人員。
* `Fontello`：一個目測有200+個圖標（數量還在增加）的 Web-font 圖標市場，對于廣大設計師、前端開發者來說是很棒的資源。
## Git 代理 / 服務
Git是一款免費、開源的分布式版本控制系統，用于敏捷高效地處理任何或小或大的項目。Git是一個開源的分布式版本控制系統，可以有效、高速的處理從很小到非常大的項目版本管。Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟件。
* `SourceTree`：SourceTree 是 Windows 和Mac OS X 下免費的 Git 和 Hg 客戶端。支持創建、克隆、提交、push、pull 和合并等操作。
* `GitKraken` (Beta)：一款自由、直觀、快捷、美觀的跨平臺Git客戶端。
* `Tower 2`：一款美麗，高效，強大的Git管理，讓Git版本控制變得容易。
* `GitHub Client`：有助于無縫連接GitHub和GitHub的企業的項目。
* `Gogs`：Gogs (Go Git Service) 是一款極易搭建的自助 Git 服務。 開發目的 Gogs 的目標是打造一個最簡單、最快速和最輕松的方式搭建自助 Git 服務。
* `GitLab`: GitLab是利用 Ruby on Rails 一個開源的版本管理系統,實現一個自托管的Git項目倉庫,可通過Web界面進行訪問公開的或者私人項目。
* `Coding`：Coding 的代碼托管功能除了基本的Git倉庫以外，還有保護分支，分屏對比， Code Review等高級功能。并且整合了Pages服務，質量管理，演示平臺等開發工具，提升研發效率。
## 本地開發環境搭建
根據您運行的是什么操作系統和計算機配置，有時候進行測試的時候就有可能需要搭建一個快速的本地開發環境。自己搭建很是蠻煩，不用擔心，有很多將Apache，Nginx，MySQL和phpMyAdmin進行打包一體化的軟件。這些軟件很是方便我們來進行本地測試。
* `XAMPP`：XAMPP（Apache+MySQL+PHP+PERL）是一個功能強大的建站集成軟件包。
* `MAMP PRO`：MAMP Pro for mac是Mac OS平臺搭建本地服務器環境的組合軟件套裝,包含 Macintosh、Apache、MySQL和PHP 四大開發環境。
* `WampServer`：Wamp就是Windows Apache Mysql PHP集成安裝環境，即在window下的apache、php和mysql的服務器軟件。
* `Vagrant`：Vagrant是一個基于Ruby的工具，用于創建和部署虛擬化開發環境。它 使用Oracle的開源VirtualBox虛擬化系統，使用 Chef創建自動化虛擬環境。
* `Laragon`：Laragon工具就是Laravel的一鍵安裝工具吧，還集成了一整套wamp工具，除去Laravel安裝外，它也是一款不錯的wamp工具，干凈簡單，便捷迅速。Diff Checkers
* `Wnmp`：WNMP是Windows下便捷，安全的Nginx+MariaDB+PHP開發環境環境集成套件包。
## 文本對比檢查
Diff checkers 可以幫助您比較文件之間的差異，然后合并更改。幫助我們更直觀的看見文本之間的差異。
* `Diffchecker`：Diffchecker 是一款非常好用的在線文本對比工具,能夠高亮顯示有差異的行和字符。Diffchecker 提供了文件上傳對比功能,還可以選擇對比的存儲時間。
* `Beyond Compare`：Beyond Compare是一套由Scooter Software推出的軟件，主要用途是對比兩個文件夾或者文件，并將差異以顏色標示。
當然有很多免費的文本編輯器，包括我們上面提到的也有插件和擴展，可以協助開發者方便的進行文件比較。
## 代碼共享 / 代碼測試
前端開發者在公司內或者團體間需要進行協作，共享代碼，那么一下工具很值得開發者一試。
* `JS Bin`：JS Bin能夠讓你編輯和測試JavaScript和HTML代碼。你還可以將編輯后的代碼保存到本地,或將URL地址發給其他人,讓其協助調試代碼。
* `JSfiddle`：jsFiddle是一個在線的shell編輯器,通過流行的JS框架創建自定義的環境,以簡化JS代碼。可以用于測試示例代碼。
* `codeshare`：與其他開發者實時共享代碼。
* `Dabblet`：Dabblet是一個開源互動測試工具,用于測試CSS和HTML。Dabblet支持實時更新、匿名備份、嵌入網站、與他人共享或者存儲到GitHub。
## 協作工具
每一個很棒的開發團隊需要一種方式來保持聯系，協作，來幫助提高生產力。
* `Slack`：Slack 是聊天群組 + 大規模工具集成 + 文件整合 + 統一搜索。
* `Trello`：Trello的目標是提供簡潔清晰的團隊協作工具。不過彌縫在這里將介紹如果將Trello用來建立自己的時間管理系統。
* `Glip`：Glip:在線團隊辦公協作平臺是一個類似于Slack網站的網絡辦公集合體,內置了郵箱、網盤、即時通訊應用、協作服務等,把所有和網絡辦公有關的服務和工具都整合在了一起。
* `Asana`：Asana是一款團隊任務管理軟件 方便人們去制定和跟蹤團隊的項目任務的完成情況
* `Jira`：JIRA是Atlassian公司出品的項目與事務跟蹤工具，被廣泛應用于缺陷跟蹤、客戶服務、需求收集、流程審批、任務跟蹤、項目跟蹤和敏捷管理等工作領域。
## 靈感創意
當我們進行開發時，偶爾迸發的靈感會使我們的項目或者產品增色不少。當然不僅僅依靠自我的靈感，我們也需要從別人的作品中得到靈感來保證我們的Web設計界面或者產品不落后這個時代。
* `CodePen`：全球web前端開發人員的圣地！可以展示個人的創意和建立一個測試實例來解決bug。 來尋找你的項目設計方式和靈感吧。
* `Dribble`：Dribbble是一個面向創作家、藝術工作者、設計師等創意類作品的人群，提供作品在線服務，供網友在線查看已經完成的作品或者正在創作的作品的交流網站。
## Web開發社區
當開發者在開發的過程中有遇到問題時，除了詢問他人以外，還可以使用搜索引擎搜索。社區的重要性就顯而易見了，大部分開發者會在開發社區分享他們經驗，如何避過不必要踩的坑。
國內：
* 谷歌開發者社區(GDG)：開放 · 分享 · 創新
* segmentfault：是中國領先的開發者技術社區。 為編程愛好者提供一個純粹、高質的技術交流的平臺, 與開發者一起學習、交流與成長。【老實話我覺得這名字不好記】
* 全棧社區：中國最大的全棧開發者社區,致力于打造一個問題解答,技術文章分享,全棧人員創業的服務平臺,讓開發更容易,讓創業更簡單.
國外：
* Stack Overflow：Stack Overflow是一個與程序相關的IT技術問答網站。用戶可以在網站免費提交問題，瀏覽問題，索引相關內容，在創建主頁的時候使用簡單的HTML。
* Front-end Front：在Front-end Front，前端開發者可以提出問題，分享有趣的鏈接，并展示他們的項目作品。
* Hashnode：Hashnode是開發者討論技術問題，分享解決方案，與世界各地的開發者共享資源的聚集地。
* Refind：有著開發者, 黑客, 設計師收集和分享最好的資源的社區。
* Google+ Web Developers Group：Web 開發者,Web設計師和Web開發.
* Google+ Web Developers Group：Java, PHP, Ruby, JavaScript and Python 資源。
* Facebook WordPress Front-end Developers Group：WordPress 前端開發者的分享社區，可以提問題，分享開發者的項目作品，還有討論WP未來發展趨勢。
* LinkedIn Web Design and Development Professionals Group：與專業網頁設計師，網頁開發者共享Web開發資源
* LinkedIn Web Site Development Group: 網站設計和開發。
* LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
* LinkedIn WordPress Developers Group: WordPress 開發. 使用WP來創建CMS和CMF.
* Webdeveloper.com：幫助Web開發者和設計師學習使用HTML，java和javascript開發網站。
* Sitepoint Forums: Web開發者論壇。
* perfmatters: 討論關于 web 性能
* webdev: 關于Web開發和開發者的新聞
原文鏈接：https://xituqu.com/170.html
