標籤：

前端工程師都有用哪些比較靠譜的小工具？

01-12

除去 Chrome Developer Tools 以外，常用的還有下面這些：

  • Fetcher: 一個 HTTP Client，可以發送各種 HTTP 請求，用來調試 API 很方便 https://itunes.apple.com/us/app/fetcher/id440113616?mt=12

  • Charles: Mac 下的 Fiddler，比 Fiddler 還好用些，目前不支持 Retina 屏幕，略挫 Charles Web Debugging Proxy ? HTTP Monitor / HTTP Proxy / HTTPS SSL Proxy / Reverse Proxy

  • Frank DeLoupe: 支持 Retina 的屏幕拾色器，吐血推薦 Frank DeLoupe

  • xScope: 每個前端工程師心中都有一把尺子 xScope
  • Synergy: 在多台電腦間共享鍵盤和滑鼠，只有一個系統一台顯示器的前端工程師不是好廚子 Synergy
  • Kaleidoscope: 最好用的 Diff 工具，沒有之一 Kaleidoscope
  • iA Writer: Markdown 寫文檔的工具，開始寫文檔的那天就是一個前端工程師走向成熟的標誌 iA Writer for Mac
  • Tower: Git 的 GUI 工具，支持 GitHub，而且比 GitHub 自己的客戶端功能要強大，推薦使用 Git 又對 terminal 命令沒有強迫症的人使用 Tower - The most powerful Git client for Mac
  • Dash: 各種語言和工具、框架的文檔 https://itunes.apple.com/us/app/dash-docs-snippets/id458034879?mt=12

指列舉了一些常用的開發工具，還有很多 productivity 類的和編輯器就木有寫了，看個人喜好。

=============================== 2014.8.15 更新

不知道為啥這麼老的問題最近又被翻出來了...那就順手更新一下吧。

  • Fetcher 替換成了 Postman: 尤其是 Packaged App 的版本，功能上比 Fetcher 有很大提升 https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en
  • iTerm2 + oh my zsh: 終端其實對前端開發並不是必須的東西，完全不用也有各種 GUI 工具可以幫助你完成任務，但是用過的人才知道這個看起來最原始的東西卻能極大提高生產力。而 iTerm2 + oh my zsh 的組合才是真正給人用的終端，稱為神器應該沒人反對吧？iTerm2 - Mac OS Terminal Replacement, robbyrussell/oh-my-zsh · GitHub
  • Skitch: 其實截圖工具在 QQ 有了 Mac 版本之後就不是那麼重要了，但是 Skitch 卻始終在我的工具名單上，除了強大的標註功能外，還能和 Evernote 整合，一旦習慣了就很難離開。Skitch | Evernote
  • Archy: 嚴格來講 Archy 是一個 productivity 類的軟體，之前說了這個答案只推薦前端開發相關的工具，但是鑒於文檔和開發息息相關，還是把它寫上來了。重度依賴 Google Drive 的人會愛上這個工具的。Archy - Rediscover Google Drive
  • ControlPlane: 最初用這個 app 是想在不同的 Wi-Fi 環境下自動切換 location 達到不用手動切換代理的目的，後來發現這個 app 的功能非常強大，拿來模擬各種網路環境、切換測試網路等等都是可以的，玩法多樣，大家自己探索吧。ControlPlane

我現在幾乎全部在 chrome 下調試：

主要使用 chrome 自帶的開發者工具，很強大。

另外推薦一個我自己寫的 chrome 插件， css auto reload , 在寫 css 的階段，可以減少你不斷的切換窗口的麻煩，地址：https://chrome.google.com/webstore/detail/fiikhcfekfejbleebdkkjjgalkcgjoip

介紹的文章：http://blog.allenm.me/2012/02/free-your-alt-tab-key/

演示視頻：http://v.youku.com/v_show/id_XMzU3MDc5NzI0.html

sudo npm install anywhere -g 隨時把目錄變靜態文件伺服器

1. node.js + npm， 這個是前端工具的一個平台，沒有他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器

2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器JavaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱

3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行

4.liveReload, 本來是一套解決方案，自從grunt watch出現後，我們只要安裝他的chrome或者firefox插件就行了。它的目的很簡單，只要發現目標文件中有任何一個文件有改動，立刻通知瀏覽器刷新頁面，這樣就免除了手動按F5。如果和grunt watch合用，就是只要發現任何文件有改動，立刻運行自動化流程中的所有任務，然後通知瀏覽器刷新。

5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。

6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了

7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有

（！！無圖！！）

8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。

9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的

（！！無圖片！！）

10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件

11. browserify允許你在瀏覽器裡面使用CMD標準模塊，但本人認為它的另外一個優勢是合併代碼，開發時候可以把代碼模塊化，分成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼，大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。

12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在個個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。

（！！無圖片！！）

13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。

還有些有名氣的工具，應該不錯，但是自己沒有用過，所以也就沒有提，但可以參考一下

  • yeoman 項目初始化工具

  • buddy.js 魔術數字檢查器
  • Image minifier.壓縮圖片工具
  • html-minifier html壓縮
  • jade html預編譯語言
  • jsdox JS代碼注釋文檔生成器
  • jscs JS代碼風格檢查器

分享一下我的工具箱中的一些前端工具 GitHub - phodal/toolbox: Phodal"s Toolbox

Open SEO Stats

顧名思義這是一個SEO狀態查詢工具，它可以讓我們查看網站的SEO相關信息。也是一個非常棒的反詐騙軟體，因為一個好的網站的Alexa Traffic Rank、PR以及Pages indexed（索引數）等等都會相對較高。

除了基本的SEO狀態顯示，它還提供了一些有效的工具，來幫助我們優化頁面的SEO。如在Page Info里，會羅列出頁面的相關標籤是否完整。在Links Stats里，會幫我們檢查頁面的外鏈情況等等。

PageSpeed Insights

這是Google的PageSpeed Insights的插件版（網頁版見：https://developers.google.com/speed/pagespeed/insights/），一個非常棒的網頁優化工具，有了它就可以讓我們輕鬆對網頁進行優化。我們所需要做的事情就是點擊「分析」按鈕，然後就坐等他分析完成。

如下就是我博客的一個分析結果：

總體分數98分，看來我針對這個所說的東西進行優化的效果還不錯。左邊顯示了我博客存在的一些問題，如：

  • 沒有壓縮CSS
  • 可以使用瀏覽器緩存
  • 需要指定緩存驗證工具
  • 暫緩JavaScript解析
  • 將查詢字元從靜態資源中刪除

等等的幾個問題——這些已經都是小問題了。所以他們的重要等級是「低」，一般來說如果有一個等級是「高」整個評分就會特別低。除此，我們還可以使用命令行工具來對你的網頁進行測試。

GitHub - addyosmani/psi: PageSpeed Insights with reporting

安裝：

$ npm install --global psi

只需要執行下面的命令即可：

psi http://www.example.com/

如我的博客的結果:

--------------------------------------------------------

URL: phodal.com
Strategy: mobile
Speed: 90
Usability: 96

CSS size | 30.04 kB
HTML size | 11.8 kB
Image size | 41.08 kB
JavaScript size | 28.07 kB
CSS resources | 1
Hosts | 2
JS resources | 1
Resources | 5
Static resources | 3
Total size of request bytes sent | 695 B

Leverage browser caching | 1.5
Main resource server response time | %

再依據不同的結果對網頁進化優化，不過它有一個前提是它並不適合SPA（單頁面）應用。

Postman

我相信這個軟體，搞過Web開發的人都聽過。

它是一款功能強大的網頁調試與發送網頁HTTP請求的Chrome插件。總之，就是我們可以在瀏覽器上執行GET、POST等等的測試。在調試遠程API的時候很有用，一般在調試本地API的時候，我都是用jQuery的。

同樣的，你仍然可以使用命令行工具來測試它，即Newman。由於其沒有UI，它可以運行在CI上，並編寫相應的UI測試。

XPath Helper

這是我在寫UI自動化測試的時候使用的工具，由於那是一個遺留項目，所以我們都對整體UI的布局都不是特別熟悉。並且由於業務推進的關係，我們並沒有足夠的時候去解決這個問題，於是就開始使用這個工具來完成工作了。

在編寫的時候我們會在Console用jQuery去選定元素，然後再將其轉換為XPath。接著在這個工具上嘗試，如下圖顯示：

最後，我們將會寫到代碼中。

ObservePoint Tag Debugger

這是一個可以用於調試各種Web分析工具的插件，它可以用於分析SiteCat、Google Analytics、WebTrend等發出的事件請求，並解析其數據。

Capture Webpage Screenshot Entirely

這是一個截圖工具，可以用於截取頁面長圖。

這裡通過各種調研後總結的前端訂閱源中必備的15個網站。

之前做微信推文的時候天天逛quora各種騷擾前端哥哥，後來總結了對前端來說比較靠譜的15個國外網站，雖然不全是工具類的，雖然有些網站小而美，但還是po出來希望對大家有幫助。

Lifehacker - Tips and downloads for getting things done

是一個資源類聚合性網站，裡面包含了程序員生活的各類資訊。在這裡你可以見識到不同程序員的技術分享。

http://codepen.io/

這個工具寫前端代碼最合適了，其包括了教學，分享和設計靈感的方方面面，裡面提供了許多實用的功能，比如說分享代碼，嵌入代碼片等。

The Next Web

—International technology news, business culture

是美國知名的科技博客，是了解國外最新初創企業的不錯渠道，也是世界上最大的在線出版社之一。主要發布國際趨勢，最新與網際網路技術，商業和文化相關的新聞報道。

DZone

Dzone是一個類似IT新聞形式的編程社區，用戶可以在網站內分享最新的IT新聞和編程資源，其文章質量由內容管理員來把關，所以不用擔心垃圾資訊。

www.coursera.org

Coursera 是一個教育平台，它與全世界最頂尖的大學和機構合作，提供任何人可學習的免費在線課程。

TechCrunch

TechCrunch 是美國科技類博客，主要報道新興互聯網公司、評論互聯網新產品、發布重大突發新聞。TechCrunch 目前已成為關注互聯網和創業的重量級博客媒體，是美國互聯網產業的風向標，裡面的內容幾乎成為VC和行業投資者的投資參考。

Hacker News

Hacker news是一個專註於計算機科學和創業精神社會新聞網站。裡面的內容可以滿足學習者的求知慾。

Smashing Magazine

— For Professional Web Designers and Developers

最棒的在線雜誌之一，主要以博客的形式發布。該雜誌主要研究web2.0技術，並為設計者和開發者都提供了很棒的內容。

CSS-Tricks

CSS-tricks是一個關於運用CSS技術進行網路開發和設計的小技巧的交流網站，裡面有各類樣式問題的解決方案以及深度思考

Dribbble - Show and tell for designers

質量最高的設計網站，沒有之一！前端同學也可以常常逛逛提高審美~

Can I use... Support tables for HTML5, CSS3, etc

非常實用的兼容性查詢網站

Web Design Blog

網頁設計資源網站，網頁設計師必備，涵蓋大量教程、工具、素材

reddit: the front page of the internet

Reddit是個社交新聞網站，它的口號是：提前於新聞發生，來自互聯網的聲音。

Envato Tuts+

TutsPlus是在Web開發人員和設計師提供的教程和技術文章的目的網站，技能和技巧，提高用戶設計和建立網站的能力。

Awwwards - Website Awards

Awwwards是一家專業的網頁設計和開發的綜合體。它旨在表彰和推廣的最佳創新的網頁設計。

利益相關：公眾號【程序員圈】（CoderCircle）

mac中 抓包工具 charles，方便前端（包括移動端和PC端）與服務端聯調。 Charles Web Debugging Proxy ? HTTP Monitor / HTTP Proxy / HTTPS SSL Proxy / Reverse Proxy

推薦一個chrome插件，url重定向，這樣你就不用再開fddler了，直接chrome里就可以用，還跨平台，支持目錄映射。

Chrome Web Store

推薦下我個人非常獨特的管理host小工具，雖然有點大(30M，因為用node-webkit做的)，但是絕對物超所值！

和市面上host工具最大的不同是我採用了一個沙箱機制，切host只對單個瀏覽器進程生效，而且不僅不需要考慮 dns 緩存， 實時生效，還可以輕鬆實現兩個頁面，一個用host，一個不用host的對比效果~

項目地址：https://github.com/liyangready/multiple-host

我收集了一些前端在線工具：http://www.w3cplus.com/source/front-end-developer-excellent-tool.html

但我常用的你可以參照一下：

1. 設計psd效果圖：photoshop cs3

2. 寫html,css: dreamweaver cs4 + zencoding 具體見http://www.cnblogs.com/jikey/tag/zen%20coding/

3. 寫javascript: webstorm，不過也裝了zencoding

4. 一般的單文件編輯：Notepad2

5. 一般的多文章編輯：sublime text2, editplus 3

6. php ide：phpstorm3.0

7.java ide:IntelliJ IDEA 11, eclipse 3.5,

8.ftp: filezilla

9. 其它導圖的：Illustrator CS3, coreldraw 12

10. 文件比較：BCompare

11. 配色參照：ColorImpact 3

12. psd搜索網站：http://www.zcool.com.cn

13. 搜圖標：http://www.iconfinder.net/

http://findicons.com/

http://www.iconlet.com/

http://www.iconpng.com/

14:看圖軟體：iSee看圖精靈，美圖看看

15.email客戶端: foxmail

16: win7 64bit輸入法：小鴨輸入法

17. 在線記事，支持web,客戶端，手機端：麥庫

代碼編輯：ST2+

圖片編輯：PS3+

取色尺子：馬克鰻

代碼比較：BCompare

思維導圖：Xmind

保存刷新：LiveLoad

分屏開發：UltraMon（分屏能夠提升15%的效率）

反向代理：Fiddler2

瀏覽器：Chrome的canary版本（同一電腦可以安裝兩個版本的Chrome，一個開發，一個正常使用）

構建工具：grunt，ant，shell等

...

Livereload，拯救你的F5！

上面的回答提到了很多提高生產效率的工具，我這裡補充1個不算是工具的東西，前端周刊，幫助你學習新技術，與時俱進，原因如下：

  • 收錄了最新的前端技術、教程、實驗、工具；

  • 支持周刊訂閱和在線瀏覽多種方式，做了響應式設計；

  • 採用類似PostRank演算法對內容進行排序，方便瀏覽到最精彩的內容；

  • 對於有熱情投遞內容的同學開發了Chrome瀏覽器插件。

http://www.osmn00.com/tools/ 我在這裡總結了一些，不是很全，近期更新豐富一下。

Mac下的一些小工具

壓縮圖片（1.6MB）：ImageOptim

對比文件（1.6MB）：VisualDiffer

書寫代碼（8MB）：Sublime Text

代碼管理（1.4MB）：GitX

說說個人作為前端現階段覺得最順手的工具吧：

工作流-gulp：包含sass轉css，postcss（優雅降級、自動補前綴），sprites拼圖，代碼、圖標打包和壓縮等常用優化工作流插件。

比grunt的好處個人感覺是1、gulpfile.js比gruntfile.js配參簡化；2、grunt貌似開發者停止更新了，而gulp的插件很豐富並且社區仍舊活躍。

小工具。。。

文件部署 cssgaga

文件對比 beyond compare

參考 css3 please

常用的也就這些吧

這個項目是我整理的前端知識體系的一個分支，這篇的定位是 大前端程序猿的工具箱。主要針對 前端方向和 後台Node 方向；主要內容是前端學習資源合集、國內外優秀的庫、工具、設計/交互或關注的前端組織/博客等等。本合集其他系列之前端工程雜談，前端面試經驗，經典圖書和前端簡歷，不定期更新中。。。。。

感謝和期待大家的 PR，我會及時回復的~

正文

前端綜合資源

  • MDN - 無數的資源再等著你探索，追標準和新特性肯定得關注的網站
  • Awesomes.cn - 國人維護的前端資源庫，深度對接到 Github，分類和展現清晰，值得收藏
  • fks 前端技能匯總 - 包含前端知識架構，後端知識，linux，書籍推薦等。star:10000+
  • mobile-web-favorites - 移動端web開發收藏夾。

優秀前端博客

  • 阮一峰 - 關注多年，拜讀其 ES6 系列。雖網傳靠寫書進了阿里，但博客內容確實夠豐富
  • W3Cplus - 大漠(《圖解 CSS3》作者)在國內的影響力杠杠的，Sass 專家級
  • 淘寶前端團隊 - 內容涵蓋 Web 和 Node，要深度有深度，要廣度有廣度
  • 網易FEG前端團隊 - 也是很高產的團隊
  • 奇舞團博客 - 堅持是最寶貴的，別人的奇舞周刊早已經過百期了
  • 大搜車前端 - 前端網紅 小芋頭君 所在的團隊，文章質量高，尤其是 Node 方向的
  • 百度 FEX - 代表作 FIS、UEditor、WebUploader、KityMinder
  • 騰訊全端 AlloyTeam - 騰訊 Web 前端團隊，博客真的有點丑...
  • 粉絲日誌 for 張丹 - 大愛作者寫的 Node 系列
  • 張鑫旭 - 成名多年的、高產的前端大濕，CSS猛人

博客搭建

  • Hexo - 快速、簡潔且高效的博客框架，照著文檔分分鐘就可以在本地跑起來。Github 地址:Hexo
  • GithubPages - 免費的靜態站點。配合著 Hexo 或 Jekyll 的模板，分分搭建出一套炫酷的個人博客

使用 Hexo + GitPage，前端搭建靜態博客那是相當 easy。我是用 Hexo + 雲伺服器（騰訊雲學生優惠每個月只要1塊錢，hin划算的），自己搭建了個人網站，用Markdown 寫文章做記錄，再部署到伺服器上。

順便再推薦幾款hexo主題

  • Next 文檔很豐富，主題也很好看
  • Yilia 這個我之前也用過，蠻喜歡的一款。主題作者litten人超級nice，去騰訊遠程面試的時候，還被他指點過幾次。開熏......

HTMLHTML5

  • video.js 開源的HTML5和Flash視頻播放器。支持自定義進度條、按鈕以及工具欄的底色。star:16.1K
  • html5shiv 主要解決HTML5提出的新的元素不被IE6-9識別。star:8K(7.15更新)
  • brunch 快速的前端 HTML5 構建工具。star:6K
  • ulkit 一個輕量級的、模塊化前端框架，它被用於快速開發強大的web界面。也是一款優秀的響應式HTML5 框架。star:9.4K

WebsocketWebSocket 開發指南websocket原理和實踐知乎：websocket簡單易懂的原理解釋

  • WebSocket全雙工通信入門教程 藉助node實戰WebSocket

阮一峰websocket教程使用Node.js+Socket.IO

實戰：基於vue和websocket的多人在線聊天室Template純 HTML 相關其實沒有好玩的項目，所以這兒展示的內容主要都是一些模板，而且以下列出來的都是免費的，方便拿取搭架後台或者博客

  • HEAD - 最全的 & 列表，真心佩服這種偏執的整理能力
  • AdminLTE - 很小清新的後台模板，每次看preview 頁面都覺得很有視覺衝擊
  • gentelella - 模板實現的功能比較全，比如登錄、註冊甚至各種 widget，
  • material-design-lite - Star 數超過2W的開源模板項目，包含了多套簡潔的 templates，可以用於博客、後台或者企業首頁。

CSS

  • ant.design - 螞蟻金服搞的良心項目，文檔美好的令人髮指 樣式優雅，強烈推薦內部系統嘗試此庫
  • iView一套基於 Vue.js 的高質量 UI 組件庫
  • Semantic-UI - 讓你使用任何HTML標籤 來表現UI控制項。 這是一款語義化設計的前端框架，為攻城師而製作的可復用的開源前端框架。star:34000+
  • MetroUI - 好看好用，重點是樣式特別、個性
  • Font-Awesome - 圖標字體庫。相類似的庫有不少，大廠都喜歡造輪子嘛:)
  • LoadersCSS - 用 CSS 技術實現 loading 動畫； 補一句，想熟悉、理解 keyframes、animation、transform、transition 的童鞋可以直接去讀其源碼(只有千把行代碼)，讀完就算出師鳥:)
  • text-spinners - 又是一款 spinners 效果的庫，用來做 loading 正合適。
  • WeUI - 一套同微信原生視覺體驗一致的基礎樣式庫 為微信 Web 開發量身設計，令用戶的使用感知更加統一
  • PostCSS - 最近才知道大名鼎鼎Autoprefixer是其插件 推薦大漠的文章《PostCSS深入學習》，有關 PostCSS 不是什麼？PostCSS 是什麼？PostCSS 可以做什麼等等問題，文章裡面有答案
  • CSSgram - 圖片濾鏡庫，終於可以用 CSS 在 web 上實現濾鏡的效果鳥 IE不支持，不過新的移動設備支持沒問題 Can I Use
  • HINT.css - 一款非常小巧的提示框效果
  • Balloon.css - 同上，一款非常小巧的提示框效果
  • Hover.css - 很多滑鼠 Hover 態的效果，可以給產品學習一下:)
  • Cursor - 記錄各瀏覽器對Cursor的支持情況
  • csscss - 用於檢查 CSS 代碼冗餘
  • purecss - 小巧的響應式 CSS 庫，Yahoo!出品
  • hamburgers - 簡單的動畫庫，讓 Click(or Tap) 變得美妙
  • cssmatic - 一個幫忙調試CSS效果的工具
  • CSS字母 - 用 CSS 實現英文字母，很膩害呀！！！

JS

  • awesome-javascript - 一系列很棒的javascript 庫，資源。star:9000+
  • todomvc - 幫你挑選一款框架，它使用不同的最流行的js MV框架實現了一個相同的Todo應用。star:20K
  • requirejs - JS模塊化是構建複雜項目的第一步 中文學習文檔奉上：RequireJS 中文網
  • Swiper - 強大的 Slider 庫 其實這類效果庫非常多，但文檔能那麼專業的就很少鳥
  • babel - ES6 用起來。這個插件可以讓我們用新的 標準/提案 寫 JavaScript 代碼，然後再向下 轉換編譯，最終生成隨處可用的 JavaScript 代碼。中文文檔奉上《babel-handbook》
  • dvajs - 基於 Redux 的一層封裝，推薦的原因是因為阿里同學寫文檔都比較大而全，還可以順道學習周邊知識:)
  • fullPage - 非常好用的全屏滑動庫，看 Demo 就明白
  • PhotoSwipe - 偶常用的 js 庫 官網上有這麼一句很關鍵、重要"no dependencies"
  • TimelineJS 輕鬆製作時間軸。star:8000+
  • iscroll - 高性能，體積小，無外部依賴，跨平台的滾動組件 star:9K
  • ScrollReveal - star 10000+ 輕量級 JS 庫。作用為當元素進入視窗的時候展示它們，README 中有示例，上手非常簡單。官網體驗地址：ScrollReveal
  • vue-admin - 基於 Vue.js 開發的後台，示例地址：demo
  • mixitup 一款基於 jQuery 的 排序/過濾 的JS庫，最關鍵是有著美妙的動畫效果
  • favico.js - 動態改變瀏覽器標籤欄中的網站圖標，非常好玩
  • highlightjs - 代碼高亮庫，支持非常多的語言
  • daterangepicker - 時間選擇插件的不二選擇，基於 Bootstrap 和 Moment.js
  • excellentexport - 純前端的 Excel 導出，非常之方便
  • Sortable - 拖拽神器，用了就知道
  • toastr - 信息提示的庫，推薦的原因是賣相好、功能強大 demo
  • peity.js - jQuery的圖表插件，特別cute，感覺萌萌噠 將HTML轉換成一個小的&餅圖、圓環圖、折線圖等等
  • emojify.js - 能夠將emoji關鍵詞轉換為emoji圖片的JS插件 可以快速的為你的網站提供emoji表情支持
  • Push.js - 基於 Notification API 實現的桌面效果的提示欄。瀏覽器支持情況不錯，如http://caniuse.com/#search=Notification
  • NProgress - 使頁面載入時有更好的loading效果
  • Noticejs - 一個簡單的通知庫，木有依賴
  • onepage-scroll - 依賴 jQuery 的單頁滾動庫，和 fullPage 類似
  • clipboard - 僅 2KB 大小，搞定剪貼板功能，屌不屌~ 但是，Safari 不支持...
  • Cropper - 國人開發的圖片裁剪庫

Swiper/PhotoSwipe/fullPage 有這仨庫，微信里常見的 H5 頁完全不是問題噠

React RN

  • awesome-react-native - 不解釋

Vuejs

  • Vuejs - 比較喜歡其作者，所以正在看源碼學習，也做了一個移動app和vue socket在線聊天室

構建工具

  • Webpack - 項目構建工具。自己整理了個資源合集：webpack 教程資源收集
  • Gulp - Gulp 是基於 Node 實現 Web 前端自動化開發的工具。 俺總結了篇《gulp使用小結》，推薦您閱讀:)
  • pm2 - 是一個帶有負載均衡功能的 Node 應用的進程管理器； 是 Forever 的進階庫，想了解的可以看這篇文章《擁抱PM2》
  • Bower - 前端項目的包管理其實是件複雜的事 誰誰誰依賴誰誰誰，誰誰誰依賴誰誰誰的某個版本...卧槽 Bower 就是搞定這件事兒的，親爹是 Twitter 推薦篇 Bower 的中文文章：《bower 解決 js 的依賴管理》
  • Grunt - 和 Gulp 類似，都是項目構建的常見選擇 對比這倆的文章可謂不少，推薦篇《Gulp vs Grunt》 英盲又想看文檔，可以去Grunt 中文網
  • FIS - 度廠出品的前端構建工具 文檔清晰，功能強大，推薦了解和使用
  • Gitlab CI - 一套基於Gitlab的持續集成服務
  • Travis CI - 為 Github 上的項目打造的 CI 服務。記得 2013年 開始陸續看到文章介紹，剛在官網上看到，目前已經有 30W 開源項目和 23.5W 用戶在使用。大概看了一下 getting started，簡單幾步就可以實現開源項目的持續集成。

Gulp + Webpack 的使用__套路__參考: learning-gulp Gulp 資料收集：use-gulp Webpack 用起來吼吼：webpack-howto

Webgl/數據可視化

  • three.js - JavaScript 3D 庫。超多的 examples 等著你去發現，你只需要關注內存和風扇就行了
  • ECharts - 基於Canvas，純Javascript圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。star:18000+
  • Chart.js - 使用&標籤的簡易HTML5圖表。star:30000+
  • d3 - 一個基於數據操作文檔的js數據可視化框架，最流行的可視化庫之一。star:64000+
  • c3 - 一個基於 D3.js 的可重用 JavaScript 圖表庫。幾乎零學習曲線。star:6.7k
  • img2css - 將圖片轉為純css代碼。star:2000

動畫

  • animate.css - 一個跨瀏覽器的CSS動畫庫。簡單易用易上手。star:41000
  • move.js - 極小的 JavaScript 庫,支持 CSS3 的動畫效果,非常簡單優雅。star：4000
  • TweenJS - 一個簡單但強大的 Javascript 動畫庫。CreateJS 套件的一部分。star:2200+
  • bounce.js - 一個用於製作漂亮的 CSS3 關鍵幀動畫的 JavaScript 庫,使用其特有的方式生成的動畫效果。star:5000
  • Swipe - 號稱最精確的Slider觸摸庫，專為移動設備優化。star:6.2K
  • tween.js - 一款可生成平滑動畫效果的js動畫庫。tween.js允許你以平滑的方式修改元素的屬性值。它可以通過設置生成各種類似CSS3的動畫效果。star:4.1K
  • parallax.js - 一個視差引擎的官網，在電腦和手機上都有很好的體驗。star:11K

瀏覽器兼容方案

  • Babel 是一款為了寫下一代js的編譯器，無需等待瀏覽器支持就可以使用新的語法。star：21K
  • es6-shim - 提供兼容性墊片，使ES6能兼容於傳統的JavaScript引擎。star:2.2K
  • Modernizr 用來檢測瀏覽器功能支持情況的JavaScript庫,可以檢測18項CSS3功能以及40多項關於HTML5的功能。star:20000
  • normalize.css 一個可定製的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。支持IE8+。star:26000
  • html5shiv 主要解決HTML5提出的新的元素不被IE6-9識別。star:8k

移動端

  • Zepto 一款面向移動端設備、API與jQuery兼容的基礎庫。star:12k
  • ionic - 先進的HTML5 移動端開發框架。幫助開發者使用HTML5, CSS3和js做出不可思議的hybrid app。star:30000
  • hammer.js - 一個支持多點觸摸的手勢庫。star:16000
  • Swiper純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。 能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。star:12K
  • amazeui - 移動優先的跨屏前端框架。面向HTML5開發，使用css3做動畫和交互。star:9.5K
  • mui 最接近原生APP體驗的高性能框架 。star:6k
  • Swipe - 加速移動觸摸滑塊與硬體之間的轉換。star:6200。
  • Mars 騰訊移動Web前端知識庫。star:5.2k

Node

作為一名大前端甚至是多端，Node絕對是必備的一塊

Node學習資料

  • awesome-nodejs - 關於Nodejs 包和資源的收集。star:17k+
  • Node.js 中文資料導航 - Node 的中文資料導航，start：1300+
  • 從零開始 NodeJS 系列文章 - 基本上每一篇都看過，強烈推薦
  • Node.js 包教不包會 - 值得閱讀，看完絕不用買書了
  • 七天學會 NodeJS - 阿里出品，必出精品:)

餓了么大前端 Node.js 進階教程

  • Style Guide - 這是一份關於如何寫出一致且美觀的 Node 代碼的風格指南
  • koa實戰 - 「明河出品」這四字已經說明一切。PS：正在連載中
  • stream-handbook - 如果學習 NodeJS，那麼流一定是需要掌握的概念

Node Package

這裡介紹些有特色且前端有必要知道的包

  • anywhere -隨時隨地將你的當前目錄變成一個靜態文件伺服器的根目錄
  • socket.io - 適用於 Node 的實時框架 聊天室、頁游等對實時性要求較高的應用。我也基於socket.io做了一個在線聊天室，適用於初學者做參考。
  • supervisor - 監控 Node 代碼，自動重啟。 A supervisor program for running nodejs programs
  • nodemon - 監控 Node 代碼，自動重啟。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
  • pm2 - 是一個帶有負載均衡功能的 Node 應用的進程管理器； 是 Forever 的進階庫，想了解的可以看這篇文章《擁抱PM2》
  • cz-cli - 剛用上的一個 git ci 工具，讓我們的項目提交代碼更規範、更有套路。
  • async - 一個流程式控制制工具包，提供直接而強大的非同步功能
  • optimist - 當需要處理 CLI 中的 argv 時(即命令行傳參)，用它就行了
  • lodash - JS 工具庫 Underscore.js的一個 fork 發展而來
  • Commander - 用 Commander.js 可以方便的創建基於 Node 的命令行工具，比如 vue-cli 這類，瞬間覺得自己又高大上了呢~
  • Inquirer.js - 實現的效果比 Commander 簡單、有趣，貼個 GIF供大家參考：loc
  • Mongoose - 讓 NodeJS 更容易操作 Mongodb 資料庫； 附上一篇Mongoose 學習參考文檔
  • CNPM - 淘寶 NPM 鏡像，提供了 NPM 同步的服務 當然可不僅僅這樣，利用 CNPM 可以打造__企業/個人__私有的 NPM 服務 推薦篇搭建私有NPM的文章：《CNPM搭建私有的NPM服務》
  • koa - 玩 Node 都知道 express，但使用 koa 的就少很多，門檻比 Ex 稍高 通過 generator 避免繁瑣的回調函數嵌套，強烈推崇 官方的文章教程
  • node-inspector - Node 調試工具，使用起來跟 Chrome 的 JS 調試器很相似
  • winston - Node 服務最流行的日誌庫之一
  • co - 用 generator 寫法讓非同步代碼同步
  • thenify-all - 把非同步的方法變成 Promise 的 Promisifies all the selected functions in an object
  • PhantomJS - 一般用來做抓取截圖和無界面測試 也可以用來操作 DOM 和網路監測，很好玩的庫 Quick Start
  • ava -ava 未來的測試運行器
  • Mocha - Node 里最常用的測試框架； 它支持多種 Node 的 Assert libs； 同時支持非同步和同步的測試，同時支持多種方式導出結果； 也支持直接在 browser 上跑 JS 代碼測試。
  • koa-validate - koa 的校驗庫 可以非常方便的對 queryString 或 postBody 的信息進行驗證
  • line-reader - 基於steam的按行讀文件，偶處理日誌時用噠 要不實現一個按行讀文件，又得 steam、 又得 chunk，還是比較麻煩的
  • binary 作者是大神 substack，對應的處理 PHP/Python 中的 unpack 方法。英文解釋：Unpack multibyte binary values from buffers and streams.
  • everyauth - OAuth 的集成解決方案
  • shelljs - 寫 Node 時難免需要用 shell 去操作些神馬 shelljs 是基於 Node 的 shell 工具，API 及其簡單
  • hashids - 看名稱就懂，給 userid 加解密用的
  • node-pool - 讓 Node 有連接池的概念
  • colors - 花俏的小工具 讓列印console.log時有更好的展示樣式
  • n - 控制Node的版本，想升級一行代碼搞定

supervisor 和 nodemon 這倆都是監控 Node 代碼，使得每次修改代碼後會，開發 Node 程序必備

Node Project待更新

精選閱讀

前端技術

  • 2015D2前端論壇 - Node方向非常值得看，有乾貨。
  • 前端開發規範手冊 - 此手冊主要實現的目標：代碼一致性和最佳實踐
  • 《babel-handbook》 - 可以用新的規範(如 ES6)寫代碼，經過 babel 編譯後生成沒有兼容問題的代碼
  • JavaScript Standard Style - 強烈推薦，尤其適合技術 Leader。優秀的 JS 編碼規範是好前端團隊的開始
  • ECMAScript 6入門 - 阮一峰大神所著，一本開源的JS教程 全面介紹 ECMAScript 6新引入的語法特性
  • ReactNative 中文版 - 翻譯自官方的中文文檔
  • ReactWebpackCookBook - 此書會引導讀者是進入React和Webpack的世界。 倆都是非常前沿的技術，同時使用會更有趣。
  • Sass指南 - Sass指南主要作用是用來幫助大家更好的書寫 Sass和維護 Sass。
  • ReactNative 學習指南 - 新玩意層出不窮... 對於能持續學習的童鞋，這是個美好的時代
  • HTML/CSS 編碼規範 - 編寫靈活、穩定、高質量的HTML和CSS代碼的規範
  • 移動前端入門 - 入門價值高，移動方向常見問題的較好總結
  • GulpBook - Gulp 是基於 Node 實現 Web 前端自動化開發的工具

其他技術

  • 微信小程序開發資源匯總 - 天津第一程出品。微信小程序開發資源匯總。
  • 命令行的藝術 - 熟練使用命令行是優秀工程師的基礎
  • MongoDB 極簡實踐入門 - 入門推薦的套路，非常淺顯易懂
  • Mac 設置指南 - Mac 使用必看 尤其適合 偏執狂/強迫症 患者:)
  • Markdown 資料 - 簡單看些語法入門，快速用起來

工具/軟體

翻牆軟體

  • Shadowsocks - 翻牆軟體小飛機Shadowsocks 也非常棒，同樣推薦：「輕量級科學上網姿勢，改變您的生活體驗！」
  • Lantern -免費版有流量限制，不過也還ok

Web

  • 百度腦圖 - 非常方便的思維導圖工具。功能強、樣式佳、無廣告，算百度出的良心產品之一。除了 Evernote，腦圖是我非常依賴的記錄工具
  • CanIuse - 前端必備；查看瀏覽器對各種新特性的兼容情況
  • overapi - 最全的開發人員在線速查手冊
  • ProcessOn - 和百度腦圖的功能類似，腦圖工具。但是還有社交、通訊的功能，提倡 協作繪圖 的理念。感覺網頁跳轉的時候有點慢，模板樣式比百度腦圖好看(個人觀點)，而且團隊協作的功能真的相當好用。
  • Slides - 一個所見即所得的 WebPPT 編輯器。雖然裝X效果一般，但是比較推薦，因為無論懂不懂 UI，做出來的效果不會太難看
  • nodePPT- 基於node製作的ppt，支持各種模版特效啥的，蠻好用的。
  • impress.js - 一個css動畫特效展示網頁 ，可以用它來做PPT或者簡歷。但是，要記住，用它做的不只局限於此，唯一的限制是你的創造力！
  • reveal.js 基於CSS3的3D幻燈片工具。能夠製作絢麗的演示文稿並生成HTML格式，將它發布到web上。star:34k view demo
  • smallpdf - 提供各種格式和 PDF 互相轉換
  • VimAwesome - Vim 插件集合，Vim 黨必備
  • Tower - 小而美的多人協同工具。 不光只有 Web 版，還有 iPhone、iPad、Android、微信版。
  • StackEdit - 又是一款 Web 版 Markdown 編輯器
  • 墨刀 - 一個在線移動應用原型製作工具。 旨在幫助產品經理快速製作可在手機端展示的移動應用原型。
  • htm2pdf - HTML to PDF
  • Speaker Deck - 在線的演講稿展示平台
  • RunJS - 在線編輯、展示、分享、交流你的 JavaScript 代碼
  • Bootswatch - Bootstrap 的免費模板
  • AdminLTE - 又是一個 Bootstrap 的免費管理後台

APP

以下列表中的 APP 都是不區分系統平台的

  • 印象筆記 - 免費賬號完全夠用，跨平台跨終端的記錄軟體
  • 365日曆 - 首先肯定比系統自帶的日曆強大，俺一般用來搞目標管理，比如學習計劃和工作計劃 生活中會訂閱演唱會、電影首映的信息
  • 多看閱讀 - kindle 確實好，但是懶得隨身帶著 多看還算不錯，書較多且偶爾有特價比較爽
  • Surge - 非免費 牛逼的網路開發與調試工具，前端必備
  • Monkey - Monkey 是 iPhone 上一個 GitHub 第三方客戶端。 展示 GitHub 上的開發者的排名，以及倉庫的排名

Mac 軟體篇

對於美好事物的追求無論何時都不算晚。

Mac 下的軟體那麼多，又是免費又是付費，應該怎麼選呢？我來分享下我的推薦列表，推薦的優先順序老規矩，從上往下依次降低。再放個福利，以下說的所有付費mac軟體，都可以在xclient.info上獲得免費版。

  • Alfred - 免費，絕對的推薦Top1，很提效率，高級版 Powerpack 售價 ￡17。除了能快速搜索和打開應用程序之外，查找文本文件、全文檢索、調起瀏覽器搜索和計數器都是俺經常使用的功能。如果想知道具體咋用，推薦閱讀老池(池建強)的文章：《神兵利器—Alfred》
  • iTerm2 - 免費。Mac 終端功能少又不好看，iTerm2 可以解救你~ 推薦篇文章：《 iTerm2 使用方法》。iTerm2配合zsh + on-my-zsh,簡直就是大殺器
  • WebStorm - $129，可試用一個月。功能超強的前端 IDE，誰用誰知道
  • MacDown學習需要堅持記錄。MacDown可以說是我用過的MAC下最優秀的Markdown編輯器了。他的開發者借鑒 Mou,使用體驗更好。MacDown編輯器 + 自定義Alfred工作流，把圖片自動上傳到七牛雲圖床上，寫起博客那叫一個酣暢淋漓， 可以說是無往而不利了！！！
  • HyperDock - 售價 ￥68，感覺還是很值的(特么我還想說，Windows 數年前就自帶的功能，在 Mac 上還收費，略憂傷)。預覽和快速切換窗口太有必要了，能用快捷鍵控制窗口，能讓拖拽到邊緣的窗口自動調整大小，真心能提高效率。推薦個文章：HyperDock，讓Mac的窗口飛
  • CheatSheet - 免費。能夠顯示當前程序的快捷鍵列表，默認的快捷鍵是長按 ?
  • ATOM - 免費。非常強大的編輯器，可以參考官方文檔
  • Surge - $49.99。關注 IOS 開發或者常備梯子的同學，肯定都知道這大名鼎鼎的軟體。價錢從 ￥68 漲到 $99 也讓偶咋舌，背後的故事就不細說了，感興趣可自行去谷歌百度一下。
  • LICEcap - 免費。屏幕錄製工具，支持導出 GIF 動畫圖片格式 輕量級、使用簡單，錄製過程中可以改變錄屏範圍。我一般寫博客或者項目文檔時，附上動圖更直觀些。
  • tree命令 - 有時需要列出項目的結構樹,Mac下可以使用brew install tree進行安裝tree命令列出項目結構。
  • Go2Shell - 一款適合程序員的神器。可以快速在當前目錄打開 Shell 的工具，比如直接在 Finder 里打開 ITerm2。
  • Sequel Pro - 免費。好用的 Mysql工具
  • OmniPlan - 免費 試用 14天。甘特圖工具，項目 Leader必備。
  • Manico - 免費 版已經很好用了，全功能版售價 ￥25。快捷啟動和切換 APP 的工具，高效的第一步
  • Moom - 售價 $10，有試用版。個人覺得這錢花的值，設置快捷鍵之後可以方便的調整每個窗口的位置。我不管在家還是公司都是開雙屏，外接屏幕三分之一 iTerm，三分之二 ATOM，日常使用時各種全屏、居中、靠左、靠右等用快捷鍵來回著換，幸福感滿滿的。
  • 馬克鰻 免費 版已經夠用啦，收費版是 60/年。英文名 MarkMan，非常強大好用的長度標註、測量工具，強烈推薦
  • BrowseShot - 免費。偶正在使用的網頁截圖工具，強烈推薦
  • Charles - 付費 Charles 是在 Mac 下常用的網路封包截取工具。蠻好用的。
  • Wireshark - 免費。說實話，Mac 下木有 Fiddler 挺不習慣，不過好在有更強大的替代品，雖然有點複雜...
  • Bartender 2 - 售價 $20.97，但是可 免費 試用四周。Mac右上角菜單的管理工具，試用之後右上角的菜單瞬間清爽了，反正試用下也不花錢:)
  • BeyondCompare - 免費。在Windows下就開始用了 比對文件和文件夾杠杠好使，Merge必備工具
  • SourceTree - 免費。屬於大名鼎鼎的 Atlassian，一款好用的的 Git 客戶端工具，重點是 支持中文，哈哈:)
  • focus booster - 免費 已經夠用，當然還有更高級的 INDIVIDUAL/PROFESSIONAL，售價分別是 $3/$5。因為比較在意時間管理，所以當工作壓力較大時，這軟體是俺的必備之物
  • WebTorrent - 免費。直接播放種子，你懂得。年輕的斯坦福大神 Feross 開發，Git上的開源項目哦。
  • MindNode - 售價 $29.99，有免費試用版。這是款漂亮的思維導圖工具。其實 百度腦圖 這類 Web 上的工具絕對夠用了，不太推薦...
  • Fliqlo - 我是視覺控，超級喜歡的屏保軟體。純深色界面上鋪滿著大大的時間，非常好的簡約效果。

以上列出來的都是偶覺得比較有意思、有特點的軟體。Linux

作為一名程序員兼工具控，我期待自己無比高效

首先，都是免費噠；然後，所列項目都是針對 CLI(命令行界面) 噠；最後，探索無止境

  • oh-my-zsh - 終端黨 必備，好處太多太多，比如炫酷的外觀，超強的易用性...推薦大家閱讀知乎的問題：《為什麼說 zsh 是 shell 中的極品？》
  • spf13-vim - 對於 Vim 偶之前做了好多文檔和記錄，但是自從了解有這個套路，那些記錄都可以丟掉了。不過建議想了解的去看看 .vimrc 中的 Plugin，確實足夠大而全。PS：如果遇見 neocomplete does not work 之類的錯誤，可以參考 Problems with Vim and lua?
  • Vundle - Vim 黨必備。用於管理各種 Vim 插件，有 Git 就可以安裝 $ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
  • tree - linux 以樹狀圖逐級列出目錄的內容，裝逼效果和實用功能都不錯
  • cloc - 可用來計算 文件夾中各種語言的代碼佔比情況。展示內容非常直觀，如某目錄下 JavaScript 有多少個文件，共多少空格行數、注釋行數、代碼行數，就這些簡單粗暴的內容。常見的安裝方式可通過 npm 來進行安裝。
  • oneapm - 強大的運維工具，提供多種監控客戶端； 有採集、分析、展示等一套功能； PS：我這用了伺服器監控(免費哦)
  • httpie - 一個 CLI 中的 HTTP 客戶端，用法簡單，非常適合用來搞調試、測試
  • ESLint - 前端大神Nicholas C. Zakas創建。JavaScript 輔助編碼的規範工具，有效控制偶們的代碼質量
  • Lucario 暗色系主題，支持 Vim, Atom, Sublime Text, TextMate, Terminal.app, iTerm, Xcode and XTerm

Chrome 瀏覽器插件

Chrome 應用商店必定是需要翻牆的哈。

以下插件都是俺多年積累淘出來的，數量不多，所以就不區分 Github 插件和非 Github 插件了。按照俺推薦的強度自上向下展示，且大多數插件就是偶工作和生活必備，希望能對大家有用。後續如有新發現好插件，偶也會及時更新噠。

  • Postman - POST 介面調試終結者，異常強大的介面調試工具。稍稍有一點學習成本，推薦之
  • JSONView - 就是個 JSON 格式的查看工具，可以很方便的展示數據，麻麻再也不用擔心偶調試介面啦。PS：同類插件有不少，所以用的開心就行
  • 二維碼生成器 - RT。還蠻好用的
  • WEB前端助手(FeHelper) - 百度FE出品，功能超全的 Chrome 插件。簡單列一下其功能：QR碼生成器、字元串編解碼工具、JSON格式化查看器、前端編碼規範檢測、代碼壓縮工具、頁面取色工具、統計並分析網頁載入性能等等
  • Eye Dropper - 前端必備的顏色提取神器，操作簡單容易上手
  • Vimium 和 Vim 快捷鍵一樣，瀏覽網站時不需要滑鼠咯
  • Page Ruler - 前端必備的尺子。計算頁面元素間距、位置等信息的時候，你就知道它的好了，無腦上手，你值得擁有
  • FireShot - 可以截取整個網頁、部分頁面，然後支持導出為各種格式。俺微博上發的網頁全景圖都是靠這個插件截取的
  • Infinity - 好不好用有點見仁見智了，但是我個人比較喜歡。使用後會讓你的 新標籤頁 耳目一新，有漂亮的背景和各種常用的功能，比如地圖、天氣、Gmail、Chrome商店等等。當然，在這個插件的設置中還可以設置壁紙、動畫效果等等
  • Momentum - 同樣也是 新標籤頁 的插件，但是不管是視覺上(高清大圖)還是功能上，都比 Infinity 高大上不少，Setting 裡面有不少設置和快捷鍵，都很好上手的。Infinity勝在中文和直觀，Momentum勝在視覺衝擊。俺基本上這倆款看心情換著用，所以希望你也都能喜歡:)
  • Google翻譯 - 英文不好又得經常瀏覽英文資料的，一般都準備好了翻譯工具。不過能在瀏覽器里達到劃詞翻譯的方案就不多了，偶推薦這個Google翻譯(PS：如不能翻牆，有道詞典的擴展也同樣支持劃詞翻譯)。
  • Octotree - 在瀏覽器左側展示 Github 項目的文件導航，使目錄結構一目了然，而且我們國內 Github 的訪問速度又不穩定，用這個工具也就很提效率了。對經常使用 Github 的同學強烈推薦
  • BuiltWith / wappalyzer / Chrome Sniffer Plus - 幾款超強的網站分析工具，可以給出網站非常多的技術棧信息。大到 Web Servers、服務端的 Frameworks 或 JS 框架，小到 meta、編碼格式甚至 Analytics，非常推薦
  • Adblock Plus - 非常非常有名的免費的過濾廣告的插件。PS：廣告屏蔽這個見仁見智，其實俺個人還是比較接受一些個性化推薦的廣告
  • Wide Github - 無聊又實用的 Github 插件。無聊是因為這個插件就特么一個功能，加寬，能讓 Github 頁面變寬，每行展示更多的內容，尤其配合著Octotree，展示效果極佳。非常推薦 Mac 用戶實用，因為屏幕比較不大，變寬後閱讀感覺更好
  • Imagus 滑鼠指針懸停在鏈接或縮略圖上時直接在當前頁面的彈出視圖上顯示這些圖片、HTML5 視頻/音頻和內容專輯...看新浪微博時賊有用:)
  • DevTools Author - 純裝逼的插件，可以選擇你的 Chrome 開發者工具的主題，且支持的主題超過25種，視覺裝逼控必備。設置分大概三步，官網有文字說明，youtube 上的視頻教程奉上Customization With DevTools Author
  • GitPlug - 在 Github 項目頁中嵌入有關的圖表信息，直觀的展示當前項目的 Star Trend，能方便看到當前這個開源項目的發起時間，火爆趨勢；對比較知名的項目還有相關的 News 展示
  • OctoLinker - 在 package.json 或任意 .js 文件中，可以方便的對 require() 的 package 進去點擊，跳轉去對應的 Github 頁面。PS：特么不太好表達，建議你去這個插件的概述頁，裡面有個十來秒的視頻，看完就明白鳥
  • GitHub Hovercard - GitHub 增強工具，懸停可顯示對應的用戶、倉庫、issue 等的詳情。
  • ReRes - 可以用來更改頁面請求響應的內容。通過指定規則，您可以把請求映射到其他的url，也可以映射到本機的文件或者目錄。ReRes支持單個url映射，也支持目錄映射。

Git

  • Git 教程-廖雪峰 - 俺有看過不少 Git 的文章，確實這個系列是最通俗易懂的
  • GitAwards - Git 工具，可以查看 Git 排名
  • Git 速查 - 分類清晰的速查表
  • Git 簡明指南 - 入門Github的簡明指南，木有高深內容:)
  • Git 學習資料整理 - 內容包括很多 Git 的相關資料，star 1200+
  • GitHub 漫遊指南 - 一篇還算不錯的 Git 學習總結，就是亂了點... 我理解作者___漫遊___的意思是漫無目的想到哪寫到哪~ 看到作者為了達成 Git 連擊的成就，也是蠻拼的:)

服務端如 Ruby、Python、Perl 等相似的服務端語言的學習資源。暫無數據端

  • Mongoose - 讓 NodeJS 更容易操作 Mongodb 資料庫。 附上一篇Mongoose 學習參考文檔

客戶端面對大名鼎鼎的 Electron，我懵逼了。猶豫了一會兒，不知道把其放在哪個分類中，於是我單開了一個 客戶端 的類目。

  • Electron - 如果你想利用 web 技術構建跨平台的桌面程序，那麼趕緊來了解 Electron。

設計/交互

作為負責最終效果呈現的前端工程師，多少得了解些 設計和交互 的。

  • 站酷 - 裡面好東西太多，俺當年真沒少再上面淘素材
  • UI中國 - 光聽名字就知道有多高大上鳥:)
  • sketch -簡單好用的設計工具

速查手冊

RT，這篇都是些文檔或者API，一般這類東西都在大家瀏覽器的書籤內，偶這也列一下大前端常用的手冊地址

  • JavaScript Standard Style - 強烈推薦，尤其適合技術 Leader。優秀的 JS 編碼規範是好前端團隊的開始
  • HEAD - 最全的 & 列表，真心佩服這種偏執的整理能力
  • 百度CDN公共庫 - 基本常見的庫都收錄拉，搞 demo 的時候特方便
  • HTML 和 CSS 代碼規範 - 編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規範
  • Linux命令中文手冊 - 木有系統的好好學習 Linux，所以命令更不熟悉 真羨慕那些CLI玩的飛起的:)
  • Git 速查 - 分類清晰的速查表
  • jQueryAPI 1.11.3 - ZeptoAPI 基本和 jQuery 一樣，所以看一份就好
  • CSS - CSS 在線參考手冊
  • Redux 中文文檔 - 作為個前端，React 還是得嘗試下的。英文文檔就不給大家推薦了~
  • Express API - 中文手冊:) 4.x和3.x都有
  • .gitignore 文件 - 介紹不同語言項目的 gitignore 模板
  • CI用戶指南 - 一個輕量級的 PHP 框架用戶指南 推薦指數低的原因是勞資PHP比較弱，囧
  • Yaf - 鳥哥(惠新宸)所寫的 PHP 框架 推薦指數低的原因同上...

雜七雜八

放些開發中較有用的雜物在這兒

  • 提問的智慧 - RT，簡體版。「當你拋出一個技術問題時，最終是否能得到有用的回答，往往取決於你所提問和追問的方式。本指南將教你如何正確的提問以獲得你滿意的答案。」——摘自原文
  • .gitignore 文件 - 介紹不同語言項目的 gitignore 模板
  • Docsify - 一個輕量級的、支持 Markdown語法的文檔生成器。ps：還提供了詳細的中文文檔哦。
  • git-draw - 黑魔法，可以修改自己 Git 上的 Contributions
  • GitBook - 寫記錄的好地方
  • GeekTyper - 好玩又具有 Geek 精神的網站，雖然創建的目的是個惡作劇 PS：網站需要翻牆
  • 2016.makemepulse.com - 帥哭了。請使用現代瀏覽器打開

小結這裡面是我自己學習的時候收集了很多資料丟在雲筆記里，現在整理出來，並結合其他人的實踐做出的資料合集。其中一部分是我親身實踐過的，一部分是列在自己的todolist裡面。希望可以和大家一起學習進步！！TODO1. 繼續完善和擴充內容

  1. 在「備註/說明」中增加自己的理解與實踐的學習筆記外鏈，讓這篇記錄更生動。
  2. 因為六月要入職騰訊，後續會增加Webgl相關的資料和學習心得，以及讀書筆記。

本篇文章持續更新中，歡迎star,watch。

文章已推送至我的github，歡迎PR

開發的時候img標籤懶得找圖，你可以記住這個 {placekitten} 滿屏喵星人

推薦閱讀：

※為什麼 TypeScript 成功了，更先進的 ActionScript 卻失敗了？
※為什麼inferno.js這麼快？
※bootstrap過時了嗎？
※tabris.js這個框架使用起來怎樣？

TAG:前端開發 | CSS | JavaScript |