大前端工具集【转】
本文轉(zhuǎn)自：https://blog.csdn.net/u013063153/article/details/52754650
前端組織/前端博客
雖混過外企倆家，但勞資英文這項(xiàng)的技能點(diǎn)還是灰色的...so，俺關(guān)注的站點(diǎn)主要以中文為主
·??GitHub -沒 Github都不好意思面基有木有?。?！
·??MDN -無數(shù)的資源再等著你探索，追標(biāo)準(zhǔn)和新特性肯定得關(guān)注的網(wǎng)站
·??Awesomes.cn -國(guó)人維護(hù)的前端資源庫，深度對(duì)接到 Github，分類和展現(xiàn)清晰，值得收藏
·?如何跟上前端開發(fā)的最新前沿 - RT，不解釋
·?慕課 -大量的在線計(jì)算機(jī)課程。雖然初、中級(jí)居多，但是不乏有巨作值得細(xì)細(xì)品嘗
·?阮一峰 -關(guān)注多年，拜讀其 ES6系列。雖網(wǎng)傳靠寫書進(jìn)鳥阿里，但博客內(nèi)容確實(shí)夠豐富
·?W3Cplus -大漠(《圖解 CSS3》作者)在國(guó)內(nèi)的影響力杠杠的，Sass專家級(jí)
·?淘寶前端團(tuán)隊(duì) -內(nèi)容涵蓋 Web和 Node，要深度游深度，要廣度有廣度
·?奇舞團(tuán)博客 -堅(jiān)持是最寶貴的，別人的奇舞周刊早已經(jīng)過百期了
·?百度 FEX -代表作 FIS、UEditor、WebUploader、KityMinder
·?騰訊全端 AlloyTeam -騰訊 Web前端團(tuán)隊(duì)，博客真的有點(diǎn)丑...
·??粉絲日志 for張丹 -大愛作者寫的 Node系列
·?張?chǎng)涡?-成名多年的、高產(chǎn)的前端大濕，CSS猛人
博客搭建
·?Hexo -快速、簡(jiǎn)潔且高效的博客框架，照著文檔分分鐘就可以在本地跑起來。Github地址:Hexo
·?Jekyll -將純文本轉(zhuǎn)化為靜態(tài)網(wǎng)站和博客。由于環(huán)境依賴的問題，所以安裝起來可能稍費(fèi)勁那么一點(diǎn)。Github地址：Jekyll
·?GithubPages -免費(fèi)的靜態(tài)站點(diǎn)。配合著 Hexo或 Jekyll的模板，分分搭建出一套炫酷的個(gè)人博客
·?Tumblr -輕博客的祖師爺，各種各樣的主題感覺不錯(cuò)
·?Wordpress -這玩意古老到都不想介紹
使用 Hexo/Jekyll + GitPage，前端搭建靜態(tài)博客那是相當(dāng) easy。用 Markdown 寫文章做記錄，再 push到 Github上，分分鐘高大上有木有
再推薦三款視覺效果極佳的 Hexo主題，且在 Github上的 star 都很不錯(cuò)：
·?NexT
·?Yilia
·?Tranquilpeak
不能偏心，所以也推薦三款 Jekyll的好主題：
·??So Simple如果你看過俺的博客，對(duì)這個(gè)主題就肯定不會(huì)陌生啦
·?HPSTR當(dāng)初 fefork 差點(diǎn)選這個(gè)主題:)
·?beautiful
HTML
純 HTML相關(guān)其實(shí)沒有好玩的項(xiàng)目，所以這兒展示的內(nèi)容主要都是一些模板，而且以下列出來的都是免費(fèi)的，方便拿取搭架后臺(tái)或者博客
·?HEAD -最全的 <head>列表，真心佩服這種偏執(zhí)的整理能力
·?blur-admin -視覺沖擊極強(qiáng)的管理后臺(tái)，各種動(dòng)畫效果。PS：因?yàn)閳F(tuán)隊(duì)有ant-design的使用經(jīng)驗(yàn)，感覺使用起來不是很順暢，這套后臺(tái)又是基于AngularJS，所以再三權(quán)限之后還是沒實(shí)際使用，勞資還是別給團(tuán)隊(duì)添亂了，囧...
·?AdminLTE -很小清新的后臺(tái)模板，每次看preview頁面都覺得很有視覺沖擊
·??gentelella -剛用這個(gè)搭建了我司內(nèi)部用的的數(shù)據(jù)平臺(tái)，效果喜人。模板實(shí)現(xiàn)的功能比較全，比如登錄、注冊(cè)甚至各種 widget，所以最終交付的時(shí)候，自己幾乎沒寫幾行CSS。
·?material-design-lite - Star數(shù)超過2W的開源模板項(xiàng)目，包含了多套簡(jiǎn)潔的 templates，可以用于博客、后臺(tái)或者企業(yè)首頁。
CSS
·?MetroUI -好看好用，重點(diǎn)是樣式特別、個(gè)性
·?Font-Awesome -圖標(biāo)字體庫。相類似的庫有不少，大廠都喜歡造輪子嘛:)
·?LoadersCSS -用 CSS技術(shù)實(shí)現(xiàn) loading動(dòng)畫；補(bǔ)一句，想熟悉、理解 keyframes、animation、transform、transition的童鞋可以直接去讀其源碼(只有千把行代碼)，讀完就算出師鳥:)
·?WeUI -一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫為微信 Web 開發(fā)量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一
·??PostCSS -最近才知道大名鼎鼎Autoprefixer是其插件推薦大漠的文章《PostCSS深入學(xué)習(xí)》，有關(guān) PostCSS 不是什么？PostCSS是什么？PostCSS可以做什么等等問題，文章里面有答案
·?CSSgram -圖片濾鏡庫，終于可以用 CSS在 web 上實(shí)現(xiàn)濾鏡的效果鳥 IE不支持，不過新的移動(dòng)設(shè)備支持沒問題 Can I Use
·?HINT.css -一款非常小巧的提示框效果
·?Balloon.css| |同上，一款非常小巧的提示框效果
·??Hover.css -很多鼠標(biāo) Hover態(tài)的效果，可以給產(chǎn)品學(xué)習(xí)一下:)
·?Cursor -記錄各瀏覽器對(duì)Cursor的支持情況
·?csscss -用于檢查 CSS代碼冗余
·?purecss -小巧的響應(yīng)式 CSS庫，Yahoo!出品
·?hamburgers -簡(jiǎn)單的動(dòng)畫庫，讓 Click(or Tap) 變得美妙
·?cssmatic -一個(gè)幫忙調(diào)試CSS效果的工具
瀏覽端 JS
·??requirejs - JS模塊化是構(gòu)建復(fù)雜項(xiàng)目的第一步中文學(xué)習(xí)文檔奉上：RequireJS中文網(wǎng)
·??ECharts -好用，最關(guān)鍵的是支持的圖表展示非常之多，強(qiáng)烈推薦
·?Swiper -強(qiáng)大的 Slider庫其實(shí)這類效果庫非常多，但文檔能那么專業(yè)的就很少鳥
·?babel - ES6用起來。這個(gè)插件可以讓我們用新的標(biāo)準(zhǔn)/提案寫 JavaScript代碼，然后再向下轉(zhuǎn)換編譯，最終生成隨處可用的 JavaScript代碼。中文文檔奉上《babel-handbook》
·?fullPage -非常好用的全屏滑動(dòng)庫，看 Demo就明白
·??PhotoSwipe -偶常用的 js庫官網(wǎng)上有這么一句很關(guān)鍵、重要"no dependencies"
·?Vuejs -比較喜歡其作者...所以勞資正在看源碼學(xué)習(xí)學(xué)習(xí)
·?favico.js -動(dòng)態(tài)改變?yōu)g覽器標(biāo)簽欄中的網(wǎng)站圖標(biāo)，非常好玩
·?ant.design -螞蟻金服搞的良心項(xiàng)目，文檔美好的令人發(fā)指樣式優(yōu)雅，強(qiáng)烈推薦內(nèi)部系統(tǒng)嘗試此庫
·??highlightjs -代碼高亮庫，支持非常多的語言
·?daterangepicker -時(shí)間選擇插件的不二選擇，基于 Bootstrap 和 Moment.js
·??nodePPT -前同事三水的大作，好用必須得支持:)用 Markdown 寫 PPT，還可以 HTML混排，上手飛快
·?Sortable -拖拽神器，用了就知道
·?toastr -信息提示的庫，推薦的原因是賣相好、功能強(qiáng)大 demo
·?peity.js - jQuery的圖表插件，特別cute，感覺萌萌噠將HTML轉(zhuǎn)換成一個(gè)小的<svg>餅圖、圓環(huán)圖、折線圖等等
·?emojify.js -能夠?qū)moji關(guān)鍵詞轉(zhuǎn)換為emoji圖片的JS插件可以快速的為你的網(wǎng)站提供emoji表情支持
·?Push.js -基于 Notification API實(shí)現(xiàn)的桌面效果的提示欄。瀏覽器支持情況不錯(cuò)，如http://caniuse.com/#search=Notification
·?Highcharts| |Highcharts中文網(wǎng)，又是一個(gè)圖表庫確實(shí)功能強(qiáng)大，但是覺得不好看... PS：官網(wǎng)就做的不好看，臟臟的趕腳
·?NProgress -使頁面加載時(shí)有更好的loading效果
·?Noticejs -一個(gè)簡(jiǎn)單的通知庫，木有依賴
·?onepage-scroll -依賴 jQuery的單頁滾動(dòng)庫，和 fullPage類似
·?videojs -當(dāng)下視頻需求都用上<video>鳥樣式和交互統(tǒng)一的問題交給 videojs 搞定:)
·??clipboard -僅 2KB大小，搞定剪貼板功能，屌不屌~但是，Safari不支持...
·?impress.js -用來寫 PPT不錯(cuò)，偶也曾為其寫過一篇impress.js初體驗(yàn)
·?Cropper -國(guó)人開發(fā)的圖片裁剪庫
Swiper/PhotoSwipe/fullPage有這仨庫，微信里常見的 H5頁完全不是問題噠
Project Build
·?pm2 -是一個(gè)帶有負(fù)載均衡功能的 Node應(yīng)用的進(jìn)程管理器；是 Forever的進(jìn)階庫，想了解的可以看這篇文章《擁抱PM2》
·?Webpack -項(xiàng)目構(gòu)建工具，由于過于復(fù)雜和太強(qiáng)大，所以勞資還沒去深入研究。
·?Gulp - Gulp是基于 Node實(shí)現(xiàn) Web 前端自動(dòng)化開發(fā)的工具。俺總結(jié)了篇《gulp使用小結(jié)》，推薦您閱讀:)
·??Bower -前端項(xiàng)目的包管理其實(shí)是件復(fù)雜的事誰誰誰依賴誰誰誰，誰誰誰依賴誰誰誰的某個(gè)版本...臥槽 Bower 就是搞定這件事兒的，親爹是 Twitter推薦篇 Bower的中文文章：《bower解決 js 的依賴管理》
·?Grunt -和 Gulp類似，都是項(xiàng)目構(gòu)建的常見選擇對(duì)比這倆的文章可謂不少，推薦篇《Gulp vs Grunt》英盲又想看文檔，可以去Grunt中文網(wǎng)
·??FIS -度廠出品的前端構(gòu)建工具文檔清晰，功能強(qiáng)大，推薦了解和使用
·?Gitlab CI -一套基于Gitlab的持續(xù)集成服務(wù)
Gulp + Webpack的使用套路參考: learning-gulp
Gulp資料收集：use-gulp
推薦篇與 Webpack相關(guān)的文章《CSS Modules》
Webpack用起來吼吼：webpack-howto
Node Package
作為一名大前端甚至是多端，Node絕逼是必備的一塊
有關(guān) Node的學(xué)習(xí)資料，請(qǐng)?jiān)L問
這里介紹些有特色且前端有必要知道的包
·?anywhere -隨時(shí)隨地將你的當(dāng)前目錄變成一個(gè)靜態(tài)文件服務(wù)器的根目錄
·??supervisor -監(jiān)控 Node代碼，自動(dòng)重啟。 A supervisor program for running nodejs programs
·?nodemon -監(jiān)控 Node代碼，自動(dòng)重啟。 Nodemon is a utility that will monitor for any changes in your source andautomatically restart your server.
·??pm2 -是一個(gè)帶有負(fù)載均衡功能的 Node應(yīng)用的進(jìn)程管理器；是 Forever的進(jìn)階庫，想了解的可以看這篇文章《擁抱PM2》
·?async -一個(gè)流程控制工具包，提供直接而強(qiáng)大的異步功能
·?lodash - JS工具庫 Underscore.js的一個(gè) fork發(fā)展而來
·?socket.io -預(yù)計(jì) Node的實(shí)時(shí)框架聊天室、頁游等對(duì)實(shí)時(shí)性有高要求的較適用
·?Mongoose -讓 NodeJS更容易操作 Mongodb數(shù)據(jù)庫；附上一篇Mongoose學(xué)習(xí)參考文檔
·?CNPM -淘寶 NPM鏡像，提供了 NPM同步的服務(wù)當(dāng)然可不僅僅這樣，利用 CNPM可以打造企業(yè)/個(gè)人私有的 NPM服務(wù)推薦篇搭建私有NPM的文章：《CNPM搭建私有的NPM服務(wù)》
·?koa -玩 Node都知道 express，但使用 koa的就少很多，門檻比 Ex稍高通過 generator避免繁瑣的回調(diào)函數(shù)嵌套，強(qiáng)烈推崇官方的文章教程
·?Shipit -一個(gè)強(qiáng)大的自動(dòng)化部署工具。 shipit很多地方非常類似 gulp，他們的核心都是任務(wù)系統(tǒng)。
·?node-inspector - Node調(diào)試工具，使用起來跟 Chrome的 JS調(diào)試器很相似
·?winston - Node服務(wù)最流行的日志庫之一
·??co -用 generator寫法讓異步代碼同步
·?thenify-all -把異步的方法變成 Promise的 Promisifies all the selected functions in an object
·?PhantomJS -一般用來做抓取截圖和無界面測(cè)試也可以用來操作 DOM 和網(wǎng)絡(luò)監(jiān)測(cè)，很好玩的庫 Quick Start
·?ava -偶是應(yīng)TJ大神推薦而得之的 ava 未來的測(cè)試運(yùn)行器
·?Mocha - Node里最常用的測(cè)試框架；它支持多種 Node的 Assert libs；同時(shí)支持異步和同步的測(cè)試，同時(shí)支持多種方式導(dǎo)出結(jié)果；也支持直接在 browser 上跑 JS代碼測(cè)試。
·?koa-validate - koa的校驗(yàn)庫可以非常方便的對(duì) queryString或 postBody的信息進(jìn)行驗(yàn)證
·?line-reader -基于steam的按行讀文件，偶處理日志時(shí)用噠要不實(shí)現(xiàn)一個(gè)按行讀文件，又得 steam、又得 chunk，還是比較麻煩的
·?everyauth| |OAuth的集成解決方案
·?shelljs -寫 Node時(shí)難免需要用 shell去操作些神馬 shelljs是基于 Node的 shell 工具，API及其簡(jiǎn)單
·?hashids -看名稱就懂，給 userid加解密用的
·??node-pool -讓 Node有連接池的概念
·?colors -花俏的小工具讓打印console.log時(shí)有更好的展示樣式
·?n -控制Node的版本，想升級(jí)一行代碼搞定
supervisor和 nodemon這倆都是監(jiān)控 Node代碼，使得每次修改代碼后會(huì)，開發(fā) Node程序必備
以上庫俺都有使用過，甚至有不少都是項(xiàng)目開發(fā)中、各種特定場(chǎng)景下必用的，有任何使用問題歡迎溝通哈:)
Node Project
暫無
精選閱讀
前端技術(shù)
·??2015D2前端論壇 - Node方向非常值得看，有干貨，相信東哥推薦哈
·?前端開發(fā)規(guī)范手冊(cè) -此手冊(cè)主要實(shí)現(xiàn)的目標(biāo)：代碼一致性和最佳實(shí)踐
·?《babel-handbook》 -可以用新的規(guī)范(如 ES6)寫代碼，經(jīng)過 babel編譯后生成沒有兼容問題的代碼
·?ECMAScript 6入門 -阮一峰大神所著，一本開源的JS教程全面介紹 ECMAScript 6新引入的語法特性
·?ReactNative中文版 -翻譯自官方的中文文檔
·?ReactWebpackCookBook | |此書會(huì)引導(dǎo)讀者是進(jìn)入React和Webpack的世界。倆都是非常前沿的技術(shù)，同時(shí)使用會(huì)更有趣。
·?ReactNative學(xué)習(xí)指南 -新玩意層出不窮...對(duì)于能持續(xù)學(xué)習(xí)的童鞋，這是個(gè)美好的時(shí)代
·?HTML/CSS編碼規(guī)范 -編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范
·?移動(dòng)前端入門 -入門價(jià)值高，移動(dòng)方向常見問題的較好總結(jié)
·?GulpBook - Gulp是基于 Node實(shí)現(xiàn) Web 前端自動(dòng)化開發(fā)的工具
Node學(xué)習(xí)資料
·??Node.js中文資料導(dǎo)航 - Node的中文資料導(dǎo)航，start1300+
·??從零開始 NodeJS系列文章 -基本上每一篇都看過，強(qiáng)烈推薦
·?Node.js包教不包會(huì) -值得閱讀，看完絕不用買書鳥
·?七天學(xué)會(huì) NodeJS -勞資還沒看，不過看目錄還不錯(cuò):)
·??Style Guide -這是一份關(guān)于如何寫出一致且美觀的 Node 代碼的風(fēng)格指南
·?koa實(shí)戰(zhàn) - “明河出品”這四字已經(jīng)說明一切。PS：正在連載中
·?stream-handbook -如果學(xué)習(xí) NodeJS，那么流一定是需要掌握的概念
前端面試
·?在 LinkedIn做面試官的故事 -非面試題，介紹 LinkedIn的面試過程文章有很多中肯的建議和想法，推薦閱讀
·?大漠：寫給前端面試者 -這篇文章不涉及任何的面試題大漠與大家聊聊面試者與被面者之間的感受...
·?前端面試題 - Git上非常火的前端面試題，start17k+
·?前端面經(jīng) -主要內(nèi)容是些前端面試筆試題和面試套路，值得閱讀
其他技術(shù)
·?MongoDB極簡(jiǎn)實(shí)踐入門 -入門推薦的套路，非常淺顯易懂
·??Mac設(shè)置指南 - Mac使用必看尤其適合偏執(zhí)狂/強(qiáng)迫癥患者:)
·??Markdown資料 -簡(jiǎn)單看些語法入門，快速用起來
工具/軟件
Web
·?CanIuse -前端必備；查看瀏覽器對(duì)各種新特性的兼容情況
·?overapi -最全的開發(fā)人員在線速查手冊(cè)
·?百度腦圖 -非常方便的思維導(dǎo)圖工具
·??ProcessOn -和百度腦圖的功能類似，腦圖工具。
·??VimAwesome - Vim插件集合，Vim黨必備
·?Tower -小而美的多人協(xié)同工具。不光只有 Web 版，還有 iPhone、iPad、Android、微信版。
·?Slides -一個(gè)所見即所得的 WebPPT編輯器，非常推薦
·??faviconer.co -一個(gè)所見即所得的icon生成器，很好用
·?smallpdf -提供各種格式和 PDF互相轉(zhuǎn)換
·??Cmd Markdown -好用的 Web版 Markdown編輯器
·?StackEdit -又是一款 Web版 Markdown編輯器
·?墨刀 -一個(gè)在線移動(dòng)應(yīng)用原型制作工具。旨在幫助產(chǎn)品經(jīng)理快速制作可在手機(jī)端展示的移動(dòng)應(yīng)用原型。
·?htm2pdf| |HTML to PDF
·??Speaker Deck -在線的演講稿展示平臺(tái)
·?RunJS -在線編輯、展示、分享、交流你的 JavaScript代碼
·?Bootswatch - Bootstrap的免費(fèi)模板
·?AdminLTE -又是一個(gè) Bootstrap的免費(fèi)管理后臺(tái)
APP
以下列表中的 APP都是不區(qū)分系統(tǒng)平臺(tái)的
·?印象筆記 -免費(fèi)賬號(hào)完全夠用，跨平臺(tái)跨終端的記錄軟件
·?365日歷 -首先肯定比系統(tǒng)自帶的日歷強(qiáng)大，要不推薦個(gè)蛋蛋俺一般用來搞目標(biāo)管理，比如學(xué)習(xí)計(jì)劃和工作計(jì)劃生活中會(huì)訂閱演唱會(huì)、電影首映的信息
·?多看閱讀 - kindle確實(shí)好，但是懶得隨身帶著多看還算不錯(cuò)，書較多且偶爾有特價(jià)比較爽
·?Surge -非免費(fèi)牛逼的網(wǎng)絡(luò)開發(fā)與調(diào)試工具，前端必備
·??Monkey - Monkey是 iPhone上一個(gè) GitHub 第三方客戶端。展示 GitHub上的開發(fā)者的排名，以及倉庫的排名
Mac
對(duì)于美好事務(wù)的追求無論何時(shí)都不算晚，前年公司給配了臺(tái) Mac用做測(cè)試開發(fā)機(jī)，于是開始在 Mac下辦公。 Windows？回不去鳥...
·?Homebrew -沒它程序猿沒法好好干活... Homebrew使OS X更完美。使用gem來安裝gems、用brew來搞定那些依賴包
·?iTerm2 - Mac終端功能少又不好看，iTerm2可以解救你~推薦篇文章：《讓你的命令行豐富多彩》
·?BrowseShot -偶正在使用的網(wǎng)頁截圖工具，強(qiáng)烈推薦
·?BeyondCompare -在Windows下就開始用了比對(duì)文件和文件夾杠杠好使，Merge必備工具
·?CheatSheet -能夠顯示當(dāng)前程序的快捷鍵列表，默認(rèn)的快捷鍵是長(zhǎng)按?
·?Sequel Pro -免費(fèi)好用的Mysql工具
·?LICEcap -屏幕錄制工具，支持導(dǎo)出 GIF動(dòng)畫圖片格式輕量級(jí)、使用簡(jiǎn)單，錄制過程中可以改變錄屏范圍
·?Manico -快捷啟動(dòng)和切換 APP的工具，高效的第一步 AppStore上收費(fèi)，不過可以免費(fèi)試用
·?WebStorm -功能超強(qiáng)的前端 IDE，不多介紹，誰用誰知道 PS：貌似俺插件裝多了，用著卡卡的，風(fēng)扇呼呼轉(zhuǎn)...
·?Atom - 2015年 7 月之前，在桌面環(huán)境下我最喜歡的編輯器是 Sublime。但之后就是 Atom，俺也專門為它寫了篇使用紀(jì)要
·?馬克鰻 - MarkMan，非常強(qiáng)大好用的標(biāo)注、測(cè)量工具。日常工作免費(fèi)版就完全可以滿足，強(qiáng)烈推薦
·?Wireshark -說實(shí)話，Mac下木有 Fiddler挺不習(xí)慣，不過在有更強(qiáng)大的替代品
·?SourceTree -一款好用的的 Git客戶端工具，重點(diǎn)是支持中文:)
·?focus booster -因?yàn)楸容^在意時(shí)間管理，所以這軟件是俺工作時(shí)間的必備之物
·??Mou -我曾使用過的 mk編輯器。原本準(zhǔn)備去掉這個(gè)推薦，但是我想讓大家了解下這個(gè)有意思的事情：《一年了，那個(gè)聞名遐邇的 Mou你還記得嗎？》
Linux
·?oh-my-zsh -終端黨必用的好工具，強(qiáng)烈推薦
·?tree - linux以樹狀圖逐級(jí)列出目錄的內(nèi)容
·?oneapm -強(qiáng)大的運(yùn)維工具，提供多種監(jiān)控客戶端；有采集、分析、展示等一套功能； PS：我這用了服務(wù)器監(jiān)控(免費(fèi)哦)
·??httpie -一個(gè) CLI中的 HTTP客戶端用法簡(jiǎn)單、易讀
Chrome瀏覽器插件
Chrome應(yīng)用商店必定是需要翻墻的哈。
以下插件都是俺多年積累淘出來的，數(shù)量不多，所以就不區(qū)分 Github插件和非 Github插件了。按照俺推薦的強(qiáng)度自上向下展示，且大多數(shù)插件就是偶工作和生活必備，希望能對(duì)大家有用。后續(xù)如有新發(fā)現(xiàn)好插件，偶也會(huì)及時(shí)更新噠。
·?Postman - POST接口調(diào)試終結(jié)者，異常強(qiáng)大的接口調(diào)試工具。稍稍有一點(diǎn)學(xué)習(xí)成本，推薦之
·?JSONView -就是個(gè) JSON格式的查看工具，可以很方便的展示數(shù)據(jù)，麻麻再也不用擔(dān)心偶調(diào)試接口啦。PS：同類插件有不少，所以用的開心就行
·??二維碼生成器 - RT。PS：這FF早已經(jīng)自帶生成二維碼工具了，Chrome還得裝插件才行，任性...
·?Eye Dropper前端必備的顏色提取神器，操作簡(jiǎn)單容易上手
·?Page Ruler前端必備的尺子。計(jì)算頁面元素間距、位置等信息的時(shí)候，你就知道它的好了，無腦上手，你值得擁有
·?FireShot可以截取整個(gè)網(wǎng)頁、部分頁面，然后支持導(dǎo)出為各種格式。俺微博上發(fā)的網(wǎng)頁全景圖都是靠這個(gè)插件截取的
·?Infinity -好不好用有點(diǎn)見仁見智了，但是我個(gè)人比較喜歡。使用后會(huì)讓你的新標(biāo)簽頁耳目一新，有漂亮的背景和各種常用的功能，比如地圖、天氣、Gmail、Chrome商店等等。當(dāng)然，在這個(gè)插件的設(shè)置中還可以設(shè)置壁紙、動(dòng)畫效果等等
·?Momentum同樣也是新標(biāo)簽頁的插件，但是不管是視覺上(高清大圖)還是功能上，都比 Infinity 高大上不少，Setting里面有不少設(shè)置和快捷鍵，都很好上手的。Infinity勝在中文和直觀，Momentum勝在視覺沖擊。俺基本上這倆款看心情換著用，所以希望你也都能喜歡:)
·??Octotree -在瀏覽器左側(cè)展示 Github項(xiàng)目的文件導(dǎo)航，使目錄結(jié)構(gòu)一目了然，而且我們國(guó)內(nèi) Github的訪問速度又不穩(wěn)定，用這個(gè)工具也就很提效率了。對(duì)經(jīng)常使用 Github的同學(xué)強(qiáng)烈推薦
·?BuiltWith / wappalyzer / Chrome SnifferPlus -幾款超強(qiáng)的網(wǎng)站分析工具，可以給出網(wǎng)站非常多的技術(shù)棧信息。大到 Web Servers、服務(wù)端的 Frameworks或 JS 框架，小到 meta、編碼格式甚至 Analytics，非常推薦
·??Adblock Plus非常非常有名的免費(fèi)的過濾廣告的插件。PS：廣告屏蔽這個(gè)見仁見智，其實(shí)俺個(gè)人還是比較接受一些個(gè)性化推薦的廣告
·?Wide Github無聊又實(shí)用的 Github插件。無聊是因?yàn)檫@個(gè)插件就特么一個(gè)功能，加寬，能讓 Github頁面變寬，每行展示更多的內(nèi)容，尤其配合著Octotree，展示效果極佳。非常推薦 Mac用戶實(shí)用，因?yàn)槠聊槐容^不大，變寬后閱讀感覺更好
·?GitPlug -在 Github項(xiàng)目頁中嵌入有關(guān)的圖表信息，直觀的展示當(dāng)前項(xiàng)目的 Star Trend，能方便看到當(dāng)前這個(gè)開源項(xiàng)目的發(fā)起時(shí)間，火爆趨勢(shì)；對(duì)比較知名的項(xiàng)目還有相關(guān)的 News展示
·?OctoLinker -在 package.json或任意 .js文件中，可以方便的對(duì) require()的 package進(jìn)去點(diǎn)擊，跳轉(zhuǎn)去對(duì)應(yīng)的 Github頁面。PS：特么不太好表達(dá)，建議你去這個(gè)插件的概述頁，里面有個(gè)十來秒的視頻，看完就明白鳥
補(bǔ)充：
翻墻代理的插件偶沒使用，偶手機(jī)和電腦的翻墻都是配的 Surge無腦搞定，不過翻墻代理插件推薦Proxy SwitchySharp，熊掌公司里大多用的都是它
日常開發(fā)相關(guān)的插件就以上這些，還有幾款如知乎的插件、購(gòu)物插件等這類與開發(fā)效率不沾邊的，俺就不這上頭列了哈
Git
·?Git教程-廖雪峰 -俺有看過不少 Git的文章，確實(shí)這個(gè)系列是最通俗易懂的
·??GitAwards - Git工具，可以查看 Git排名
·?Git速查 -分類清晰的速查表
·?Git簡(jiǎn)明指南 -入門Github的簡(jiǎn)明指南，木有高深內(nèi)容:)
·??Git學(xué)習(xí)資料整理| |內(nèi)容包括很多 Git的相關(guān)資料，star 1200+
·??GitHub漫游指南 -一篇還算不錯(cuò)的 Git學(xué)習(xí)總結(jié)，就是亂了點(diǎn)...我理解作者漫游的意思是漫無目的想到哪寫到哪~看到作者為鳥達(dá)成 Git連擊的成就，也是蠻拼的:)
服務(wù)端
如 Ruby、Python、Perl等相似的服務(wù)端語言的學(xué)習(xí)資源。
暫無
數(shù)據(jù)端
·?Mongoose -讓 NodeJS更容易操作 Mongodb數(shù)據(jù)庫。附上一篇Mongoose學(xué)習(xí)參考文檔
設(shè)計(jì)/交互
作為負(fù)責(zé)最終效果呈現(xiàn)的前端工程師，多少得了解些設(shè)計(jì)和交互的，這也是為什么 fetool會(huì)單獨(dú)的存在這一章...當(dāng)然話又說回來了，偶畢業(yè)的第一份工作是設(shè)計(jì):)
·?站酷 -里面好東西太多，俺當(dāng)年真沒少再上面淘素材
·?UI中國(guó) -光聽名字就知道有多高大上鳥:)
速查手冊(cè)
RT，這篇都是些文檔或者API，一般這類東西都在大家瀏覽器的書簽內(nèi)，偶這也列一下大前端常用的手冊(cè)地址
·?HEAD -最全的 <head>列表，真心佩服這種偏執(zhí)的整理能力
·?百度CDN公共庫 -基本常見的庫都收錄拉，搞 demo的時(shí)候特方便
·?HTML和 CSS 代碼規(guī)范 -編寫靈活、穩(wěn)定、高質(zhì)量的 HTML和 CSS代碼的規(guī)范
·?Linux命令中文手冊(cè) -木有系統(tǒng)的好好學(xué)習(xí) Linux，所以命令更不熟悉真羨慕那些CLI玩的飛起的:)
·?Git速查 -分類清晰的速查表
·?jQueryAPI 1.11.3 - ZeptoAPI基本和 jQuery一樣，所以看一份就好
·??CSS3 - CSS3的在線手冊(cè)
·?Express API -中文手冊(cè):) 4.x和3.x都有
·?CI用戶指南 -一個(gè)輕量級(jí)的 PHP框架用戶指南推薦指數(shù)低的原因是勞資PHP比較弱，囧
·?Yaf -鳥哥(惠新宸)所寫的 PHP 框架推薦指數(shù)低的原因同上...
雜七雜八
放些開發(fā)中較有用的雜物在這兒
·?租房要點(diǎn) -適用于北上廣深杭，大城市打拼租房確實(shí)是硬傷
·?QQ群規(guī) -突然某天，有個(gè) QQ群讓我加群原本我是拒絕的，但當(dāng)我看完這篇 QQ群規(guī)后...勞資真的被感動(dòng)到了，太牛逼、夠?qū)I(yè)！最后，我默默加群鳥:)
·?gitignore文件 -介紹不同語言項(xiàng)目的 gitignore模板
·?程序員如何優(yōu)雅的掙零花錢？ -中肯的文章，如果讀完能有些許收獲，那么恭喜你
·?git-draw -黑魔法，可以修改自己 Git上的 Contributions
·?GitBook -寫記錄的好地方
·?Codebabes -學(xué)編程的網(wǎng)站。重點(diǎn)是每通過一個(gè)測(cè)試，尼瑪對(duì)應(yīng)的妞會(huì)脫一件衣服... PS：要翻墻哦~
·?emailframe -郵件展示確實(shí)比較坑，建議有需要的收藏
·?ReadmeSample| |項(xiàng)目高大上的第一步就是包裝，所以來看看 README 的書寫套路吧 PS：勞資怎么這么無聊...
前端炫技-_炫酷狂拽叼炸天站點(diǎn)_
·?windows93 -模擬 Win93桌面，思路、體驗(yàn)和整體效果比較有意思
·?GeekTyper -好玩又具有 Geek精神的網(wǎng)站，雖然創(chuàng)建的目的是個(gè)惡作劇 PS：網(wǎng)站需要翻墻
·?2016.makemepulse.com -帥哭了。請(qǐng)使用現(xiàn)代瀏覽器打開
·?前端技能棧 -好玩的前端技能棧展示
·?Mapbox -非常叼的開源項(xiàng)目，有方便的 JSAPI(還有 SDK)。不過免費(fèi)版只能淺嘗，流量有限。 PS：網(wǎng)站需要翻墻
·?Clark Duvall -一枚歪果仁的個(gè)人 blog，范兒叼叼的
·?SuperScrollorama -好玩好看的動(dòng)畫庫，鏈接是SuperScrollorama的展示頁
·?parallax.js -一個(gè)視差引擎的官網(wǎng)，在電腦和手機(jī)上都有很好的體驗(yàn)
·?CSS字母 -用 CSS實(shí)現(xiàn)英文字母，叼叼的
·?墨刀 -一個(gè)在線移動(dòng)應(yīng)用原型制作工具。旨在幫助產(chǎn)品經(jīng)理快速制作可在手機(jī)端展示的移動(dòng)應(yīng)用原型。
總結(jié)
- 上一篇： 那些年我看过的前端书
- 下一篇： 前端工程师非技术面试题