2. 程式人生 > >前端系列教程之常用網頁導航

前端系列教程之常用網頁導航

阿新 • • 發佈：2018-12-11

大前端工具集 Awesome

這個專案的定位是 大前端程式猿的百寶箱。主要針對 前端方向和 Node 方向；主要內容是國內外優秀的 庫、工具、套路、設計、互動，或關注的 技術部落格、技術組織、技術公眾號等等，反正用 瑞士軍刀 來總結這篇文章再合適不過了。

對於列在這裡的幾乎所有專案，我都有去實踐與瞭解，所以我會盡量給出中肯的建議和理解，也希望大家能多關注我的評語:)

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

目錄

正文

技術部落格/技術組織

雖混過倆家外企，但勞資技能樹中“英文”這項還是灰色的…所以俺關注和收藏的站點主要以中文為主。

分享一下最近自己的體會：學習是最能緩解焦慮的。by 20180610_16:46:18

  • 極客時間 - 知識付費。較熱門的方向都有非常乾貨的課程，目前大多數的課程不太適合小白，但是非常適合有經驗的程式設計師進階。對我個人幫忙比較大的兩個大專欄：技術領導力 300講、左耳聽風；除此之外我還比較關注 微服務相關、區塊鏈相關的專欄。
  • MDN - 無數的資源再等著你探索，追標準和新特性肯定得重點關注的網站。PS：偶爾需要翻牆。
  • Awesomes.cn - 國人維護的前端資源庫，深度對接到 Github，分類和展現清晰，值得收藏
  • 如何跟上前端開發的最新前沿 - RT，不解釋
  • 慕課 - 大量的線上計算機課程。 雖然初、中級居多，但是不乏有鉅作值得細細品嚐
  • 美團技術團隊 - 新美大的技術口碑這些年做的挺好，尤其在 高可用 方面，推薦關注。
  • 阮一峰 - 關注多年，拜讀其 ES6 系列。雖網傳靠寫書進鳥阿里，但部落格內容確實夠豐富
  • W3Cplus - 大漠(《圖解 CSS3》作者)在國內的影響力槓槓的，Sass專家級
  • 淘寶前端團隊 - 內容涵蓋 Web和 Node，要深度有深度，要廣度有廣度
  • 奇舞團部落格 - 堅持是最寶貴的，別人的奇舞週刊早已經過百期了
  • 大搜車前端 - 前端網紅 小芋頭君 所在的團隊，文章質量高，尤其是 Node 方向的
  • 百度 FEX - 代表作 FIS、UEditor、WebUploader、KityMinder
  • 騰訊全端 AlloyTeam - 騰訊 Web 前端團隊，部落格真的有點醜…
  • 粉絲日誌 for 張丹 - 大愛作者寫的 Node系列
  • 張鑫旭 - 成名多年的、高產的前端大溼，CSS猛人

技術公眾號

部落格搭建

  • Hexo - 快速、簡潔且高效的部落格框架，照著文件分分鐘就可以在本地跑起來。Github地址:Hexo
  • Jekyll - 將純文字轉化為靜態網站和部落格。由於環境依賴的問題，所以安裝起來可能稍費勁那麼一點。Github地址：Jekyll
  • GithubPages - 免費的靜態站點。配合著 Hexo或 Jekyll的模板，分分搭建出一套炫酷的個人部落格
  • Tumblr - 輕部落格的祖師爺，各種各樣的主題感覺不錯
  • Wordpress - 這玩意古老到都不想介紹

使用 Hexo/Jekyll + GitPage，前端搭建靜態部落格那是相當 easy。用 Markdown寫文章做記錄，再 push到 Github上，分分鐘高大上有木有

再推薦幾款視覺效果極佳的 Hexo主題，且在 Github上的 star都很不錯：

不能偏心，所以也推薦幾款 Jekyll的好主題：

  • So Simple - 如果你看過俺的部落格，對這個主題就肯定不會陌生啦（2018年已棄用）
  • HPSTR - 當初 fefork 差點選這個主題:)
  • beautiful

HTML

純 HTML相關其實沒有好玩的專案，所以這兒展示的內容主要都是一些模板，而且以下列出來的都是免費的，方便拿取搭架後臺或者部落格

  • HEAD - 最全的 <head>列表，真心佩服這種偏執的整理能力
  • blur-admin - 視覺衝擊極強的管理後臺，各種動畫效果。PS：因為團隊有ant-design的使用經驗，感覺使用起來不是很順暢，這套後臺又是基於AngularJS，所以再三許可權之後還是沒實際使用，勞資還是別給團隊添亂了，囧…
  • AdminLTE - 很小清新的後臺模板，每次看preview 頁面都覺得很有視覺衝擊
  • gentelella - 剛用這個搭建了我司內部用的的資料平臺，效果喜人。模板實現的功能比較全，比如登入、註冊甚至各種 widget，所以最終交付的時候，自己幾乎沒寫幾行CSS。
  • material-design-lite - Star數超過2W的開源模板專案，包含了多套簡潔的 templates，可以用於部落格、後臺或者企業首頁。

CSS

  • 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效果的工具

瀏覽端 JS

  • requirejs - JS模組化是構建複雜專案的第一步 中文學習文件奉上：RequireJS 中文網
  • three.js - JavaScript 3D 庫。超多的 examples 等著你去發現，你只需要關注記憶體和風扇就行了
  • ECharts - 好用，最關鍵的是支援的圖表展示非常之多，強烈推薦
  • Swiper - 強大的 Slider 庫 其實這類效果庫非常多，但文件能那麼專業的就很少鳥
  • babel - ES6用起來。這個外掛可以讓我們用新的 標準/提案 寫 JavaScript程式碼，然後再向下 轉換編譯，最終生成隨處可用的 JavaScript程式碼。中文文件奉上《babel-handbook》
  • dvajs - 基於 Redux 的一層封裝，推薦的原因是因為阿里同學寫文件都比較大而全，還可以順道學習周邊知識:)
  • fullPage - 非常好用的全屏滑動庫，看 Demo 就明白
  • PhotoSwipe - 偶常用的 js 庫 官網上有這麼一句很關鍵、重要"no dependencies"
  • Vuejs - 比較喜歡其作者… 所以勞資正在看原始碼學習學習
  • ScrollReveal - star 10000+ 輕量級 JS 庫。作用為當元素進入視窗的時候展示它們，README 中有示例，上手非常簡單。官網體驗地址：ScrollReveal
  • vue-admin - 基於 Vue.js 開發的後臺，示例地址：demo
  • mixitup 一款基於 jQuery的 排序/過濾 的JS庫，最關鍵是有著美妙的動畫效果
  • favico.js - 動態改變瀏覽器標籤欄中的網站圖示，非常好玩
  • ant.design - 螞蟻金服搞的良心專案，文件美好的令人髮指 樣式優雅，強烈推薦內部系統嘗試此庫
  • highlightjs - 程式碼高亮庫，支援非常多的語言
  • daterangepicker - 時間選擇外掛的不二選擇，基於 Bootstrap和 Moment.js
  • nodePPT - 前同事三水的大作，好用必須得支援:) 用 Markdown 寫 PPT，還可以 HTML 混排，上手飛快
  • excellentexport - 純前端的 Excel 匯出，非常之方便
  • Sortable - 拖拽神器，用了就知道
  • toastr - 資訊提示的庫，推薦的原因是賣相好、功能強大 demo
  • peity.js - jQuery的圖表外掛，特別cute，感覺萌萌噠 將HTML轉換成一個小的<svg>餅圖、圓環圖、折線圖等等
  • emojify.js - 能夠將emoji關鍵詞轉換為emoji圖片的JS外掛 可以快速的為你的網站提供emoji表情支援
  • html2canvas+canvas2Image - 看這兩庫的名稱就明白是做什麼的。使用場景就是“動態生成的HTML可以長按儲存為圖片”。
  • Push.js - 基於 Notification API實現的桌面效果的提示欄。瀏覽器支援情況不錯，如http://caniuse.com/#search=Notification
  • Highcharts - Highcharts 中文網，又是一個圖表庫 確實功能強大，但是覺得不好看… PS：官網就做的不好看，髒髒的趕腳
  • NProgress - 使頁面載入時有更好的loading效果
  • Noticejs - 一個簡單的通知庫，木有依賴
  • onepage-scroll - 依賴 jQuery 的單頁滾動庫，和 fullPage 類似
  • videojs - 當下視訊需求都用上<video>鳥 樣式和互動統一的問題交給 videojs 搞定:)
  • clipboard - 僅 2KB 大小，搞定剪貼簿功能，屌不屌~ 但是，Safari 不支援…
  • impress.js - 用來寫 PPT 不錯，偶也曾為其寫過一篇impress.js 初體驗
  • Cropper - 國人開發的圖片裁剪庫

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

Project Build

  • pm2 - 是一個帶有負載均衡功能的 Node 應用的程序管理器； 是 Forever 的進階庫，想了解的可以看這篇文章《擁抱PM2》
  • Webpack - 專案構建工具，由於過於複雜和太強大，所以勞資還沒去深入研究。推薦篇教程：webpack 教程資源收集
  • Gulp - Gulp 是基於 Node 實現 Web 前端自動化開發的工具。 俺總結了篇《gulp使用小結》，推薦您閱讀:)
  • 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 相關的文章《CSS Modules》

Webpack 用起來吼吼：webpack-howto

Node Package

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

有關 Node的學習資料，請訪問 Node 學習資料

這裡介紹些有特色且前端有必要知道的包
  • anywhere - 隨時隨地將你的當前目錄變成一個靜態檔案伺服器的根目錄
  • 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 發展而來
  • socket.io - 預計 Node 的實時框架 聊天室、頁遊等對實時性有高要求的較適用
  • Inquirer.js - 實現的效果比 Commander 簡單、有趣，貼個 GIF供大家參考：loc
  • Commander - 用 Commander.js 可以方便的建立基於 Node 的命令列工具，比如 vue-cli 這類，瞬間覺得自己又高大上了呢~
  • Mongoose - 讓 NodeJS 更容易操作 Mongodb 資料庫； 附上一篇Mongoose 學習參考文件
  • CNPM - 淘寶 NPM 映象，提供了 NPM 同步的服務 當然可不僅僅這樣，利用 CNPM 可以打造__企業/個人__私有的 NPM 服務 推薦篇搭建私有NPM的文章：《CNPM搭建私有的NPM服務》
  • koa - 玩 Node 都知道 express，但使用 koa 的就少很多，門檻比 Ex 稍高 通過 generator 避免繁瑣的回撥函式巢狀，強烈推崇 官方的文章教程
  • Shipit - 一個強大的自動化部署工具。 shipit 很多地方非常類似 gulp，他們的核心都是任務系統。
  • 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 - 偶是應TJ大神推薦而得之的 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 前端自動化開發的工具

Node 學習資料

前端面試

其他技術

工具/軟體

Web

  • 百度腦圖 - 非常方便的思維導圖工具。功能強、樣式佳、無廣告，算百度出的良心產品之一。除了 Evernote，腦圖是我非常依賴的記錄工具
  • CanIuse - 前端必備；檢視瀏覽器對各種新特性的相容情況
  • overapi - 最全的開發人員線上速查手冊
  • ProcessOn - 和百度腦圖的功能類似，腦圖工具。但是還有社交、通訊的功能，提倡 協作繪圖 的理念。感覺網頁跳轉的時候有點慢，模板樣式比百度腦圖好看(個人觀點)，而且團隊協作的功能真的相當好用。
  • Slides - 一個所見即所得的 WebPPT 編輯器。雖然裝X效果一般，但是比較推薦，因為無論懂不懂 UI，做出來的效果不會太難看
  • faviconer.co - 一個所見即所得的icon生成器，很好用
  • smallpdf - 提供各種格式和 PDF 互相轉換
  • Cmd Markdown - 好用的 Web 版 Markdown 編輯器
  • VimAwesome - Vim 外掛集合，Vim 黨必備
  • Tower - 小而美的多人協同工具。 不光只有 Web 版，還有 iPhone、iPad、Android、微信版。
  • StackEdit - 又是一款 Web 版 Markdown 編輯器
  • 墨刀 - 一個線上移動應用原型製作工具。 旨在幫助產品經理快速製作可在手機端展示的移動應用原型。
  • htm2pdf - HTML to PDF
  • Speaker Deck - 線上的演講稿展示平臺
  • RunJS - 線上編輯、展示、分享、交流你的 JavaScript程式碼
  • Bootswatch - Bootstrap的免費模板
  • AdminLTE - 又是一個 Bootstrap的免費管理後臺
  • carbon - 能夠幫助你分享漂亮的示例程式碼

APP

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

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

Mac 軟體篇

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

Mac 下的軟體那麼多，又是免費又是付費，應該怎麼選呢？我來分享下我的推薦列表，推薦的優先順序老規矩，從上往下依次降低。

  • Alfred - 免費，絕對的推薦Top1，很提效率，高階版 Powerpack售價 £17。除了能快速搜尋和開啟應用程式之外，查詢文字檔案、全文檢索、調起瀏覽器搜尋和計數器都是俺經常使用的功能。如果想知道具體咋用，推薦閱讀老池(池建強)的文章：《神兵利器—Alfred》
  • iTerm2 - 免費。Mac終端功能少又不好看，iTerm2可以解救你~ 推薦篇文章：《讓你的命令列豐富多彩》
  • HyperDock - 售價 ￥68，感覺還是很值的(特麼我還想說，Windows數年前就自帶的功能，在 Mac上還收費，略憂傷)。預覽和快速切換視窗太有必要了，能用快捷鍵控制視窗，能讓拖拽到邊緣的視窗自動調整大小(window早就有的功能)，真心能提高效率。推薦篇中文的文章：讓Mac的視窗飛
  • ATOM - 免費。2015/7 之前，在桌面環境下偶最喜歡的編輯器是 Sublime，但之後就是 ATOM，俺也專門為它寫了篇 《使用紀要》
  • Surge - $49.99。關注 IOS開發或者常備梯子的同學，肯定都知道這大名鼎鼎的軟體。價錢從 ￥68漲到 $99也讓偶咋舌，背後的故事就不細說了，感興趣可自行去谷歌百度一下。PS：翻牆軟體 小飛機ShadowsocksX 也非常棒，同樣推薦：“輕量級科學上網姿勢，改變您的生活體驗！”
  • ngrok - 一條命令解決的外網訪問內網問題,無需任何配置,下載客戶端之後直接一條命令讓外網訪問內網不再是距離.
  • 1Password - 免費 試用一個月，售價不便宜 $64.99。如果覺得對各種賬號的密碼管理心累，那麼推薦你使用，這個錢肯定值，Mac和 iPhone通用，爽歪歪。如果賬號密碼都是那種一、倆個套路，而且被盜也隨意，那麼用不用就無所謂啦
  • Go2Shell - 一款適合程式設計師的神器。可以快速在當前目錄開啟 Shell 的工具，比如直接在 Finder 裡開啟 ITerm2。
  • Sequel Pro - 免費。好用的 Mysql工具
  • OmniPlan - 免費 試用 14天。甘特圖工具，專案 Leader必備。
  • Manico - 免費 版已經很好用了，全功能版售價 ￥25。快捷啟動和切換 APP的工具，高效的第一步
  • Moom - 售價 $10，有試用版。個人覺得這錢花的值，設定快捷鍵之後可以方便的調整每個視窗的位置。我不管在家還是公司都是開雙屏，外接螢幕三分之一 iTerm，三分之二 ATOM，日常使用時各種全屏、居中、靠左、靠右等用快捷鍵來回著換，辛福感滿滿的。
  • CheatSheet - 免費。能夠顯示當前程式的快捷鍵列表，預設的快捷鍵是長按 ⌘
  • 奇妙清單 - 免費 漂亮的任務清單管理工具。有簡中和繁中版，操作和樣式都比較簡潔，推薦有 TODO需求的人士使用。最關鍵的是其支援所有裝置而且免費。
  • 馬克鰻 - 免費 版已經夠用啦，收費版是 60/年。英文名 MarkMan，非常強大好用的標註、測量工具，強烈推薦
  • BrowseShot - 免費。偶正在使用的網頁截圖工具，強烈推薦
  • Wireshark - 免費。說實話，Mac下木有 Fiddler挺不習慣，不過在有更強大的替代品，雖然有點複雜…還好後來下載到便宜(￥68)的 Surge做替代品
  • LICEcap - 免費。螢幕錄製工具，支援匯出 GIF 動畫圖片格式 輕量級、使用簡單，錄製過程中可以改變錄屏範圍
  • Bartender 2 - 售價 $20.97，但是可 免費 試用四周。Mac右上角選單的管理工具，試用之後右上角的選單瞬間清爽了，反正試用下也不花錢:)
  • BeyondCompare - 免費。在Windows下就開始用了 比對檔案和資料夾槓槓好使，Merge必備工具
  • SourceTree - 免費。屬於大名鼎鼎的 Atlassian，一款好用的的 Git客戶端工具，重點是 支援中文，哈哈:)
  • focus booster - 免費 已經夠用，當然還有更高階的 INDIVIDUAL/PROFESSIONAL，售價分別是 $3/$5。因為比較在意時間管理，所以當工作壓力較大時，這軟體是俺的必備之物
  • WebTorrent - 免費。直接播放種子，你懂得。年輕的斯坦福大神 Feross 開發，Git上的開源專案哦。
  • WebStorm - $129，可試用一個月。功能超強的前端 IDE，誰用誰知道 PS：貌似俺外掛裝多了，用著卡卡的，風扇呼呼轉…然後俺就解除安裝裝了，裝了 ATOM…
  • MindNode - 售價 $29.99，有免費試用版。這是款漂亮的思維導圖工具。其實 百度腦圖 這類 Web 上的工具絕對夠用了，不太推薦…
  • Mou - 我曾使用過的 Markdown 編輯器，不推薦使用。原本已經準備去掉，但是偶還是想讓大家瞭解下這個有意思的事情：《一年了，那個聞名遐邇的 Mou 你還記得嗎？》
  • Fliqlo - 視覺控會喜歡的屏保軟體。純深色介面上鋪滿著大大的時間，非常好的簡約效果。

以上列出來的都是偶覺得比較有意思、有特點的軟體。當然，類似 Docker、Polarr(潑辣修圖)等這類都太小眾；有道翻譯、Evernote、Foxmail等這類又太大眾；然後有些軟體買了覺得有點“虧”，比如剛出手買入的 Final Cut Pro，其實機器自帶的 iMovie就挺好了（完美詮釋《Final從入手到放棄》）。所以，這幾類就不一一往這列舉啦~

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
  • cmatrix - 作用就是裝逼，可以在螢幕上顯示經典的黑客帝國的數碼雨效果(看官方文件上也有其他效果，俺就不往細研究了)。在 Mac 下安裝非常簡單，一步搞定：$ brew install cmatrix

Mac

  • Homebrew - 有了他 OS X程式猿能更好的專注程式碼層面。最近在看《七週七語言》，裡面出現各種語言環境，用 brew來安裝、管理各種直譯器和編譯器，省心省力！
  • Xcode - 因為玩 Swift所以早早就下載了，後來才知道原來 Mac下如果不安裝 Xcode，部分常用的指令都不支援，囧

Chrome 瀏覽器外掛

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

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

  • Postman - POST介面除錯終結者，異常強大的介面除錯工具。稍稍有一點學習成本，推薦之
  • JSONView - 就是個 JSON格式的檢視工具，可以很方便的展示資料，麻麻再也不用擔心偶除錯介面啦。PS：同類外掛有不少，所以用的開心就行
  • 二維碼生成器 - RT。PS：這FF早已經自帶生成二維碼工具了，Chrome還得裝外掛才行，任性…
  • WEB前端助手(FeHelper) - 百度FE出品，功能超全的 Chrome 外掛。簡單列一下其功能：QR碼生成器、字串編解碼工具、JSON格式化檢視器、前端編碼規範檢測、程式碼壓縮工具、頁面取色工具、統計並分析網頁載入效能等等
  • Eye Dropper - 前端必備的顏色提取神器，操作簡單容易上手
  • Vimium 和 Vim快捷鍵一樣，瀏覽網站時不需要滑鼠咯
  • Page Ruler - 前端必備的尺子。計算頁面元素間距、位置等資訊的時候，你就知道它的好了，無腦上手，你值得擁有
  • FireShot - 可以擷取整個網頁、部分頁面，然後支援匯出為各種格式。俺微博上發的網頁全景圖都是靠這個外掛擷取的
  • Awesome Autocomplete for GitHub - 看名稱就基本明白了。讓你在 Github上使用搜索框的體驗變得更好。
  • 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使用者實用，因為螢幕比較不大，變寬後閱讀感覺更好
  • Gmail - 方便檢視自己的 Gmail郵件
  • Imagus 滑鼠指標懸停在連結或縮圖上時直接在當前頁面的彈出檢視上顯示這些圖片、HTML5 視訊/音訊和內容專輯…看新浪微博時賊有用:)
  • DevTools Author - 純裝逼的外掛，可以選擇你的 Chrome開發者工具的主題，且支援的主題超過25種，視覺裝逼控必備。設定分大概三步，官網有文字說明，youtube上的視訊教程奉上(Customization With DevTools Author)[https://www.youtube.com/watch?v=AUZagMLMAJc]
  • GitPlug - 在 Github專案頁中嵌入有關的圖表資訊，直觀的展示當前專案的 Star Trend，能方便看到當前這個開源專案的發起時間，火爆趨勢；對比較知名的專案還有相關的 News展示
  • OctoLinker - 在 package.json或任意 .js檔案中，可以方便的對 require()的 package進去點選，跳轉去對應的 Github頁面。PS：特麼不太好表達，建議你去這個外掛的概述頁，裡面有個十來秒的視訊，看完就明白鳥
  • GitHub Hovercard - GitHub 增強工具，懸停可顯示對應的使用者、倉庫、issue 等的詳情。
  • ReRes - 可以用來更改頁面請求響應的內容。通過指定規則，您可以把請求對映到其他的url，也可以對映到本機的檔案或者目錄。ReRes支援單個url對映，也支援目錄對映。

補充：

  1. 翻牆代理的外掛偶沒使用，偶手機和電腦的翻牆都是配的 Surge無腦搞定，不過翻牆代理外掛推薦Proxy SwitchySharp，熊掌公司裡大多用的都是它
  2. 日常開發相關的外掛就以上這些，還有幾款如知乎的外掛、購物外掛等這類與開發效率不沾邊的，俺就不這上頭列了哈

Git

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

服務端

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

暫無

資料端

客戶端

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

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

設計/互動

作為負責最終效果呈現的前端工程師，多少

相關推薦

前端系列教程之常用網頁導航

大前端工具集 這個專案的定位是 大前端程式猿的百寶箱。主要針對 前端方向和 Node 方向；主要內容是國內外優秀的 庫、工具、套路、設計、互動，或關注的 技術部落格、技術組織、技術公眾號等等，反正用 瑞士軍刀 來總結這篇文章再合適不過了。 對於列在這裡的幾乎所有專案，我都有去實踐與

前端系列教程之HTML（常用meta標籤）

<head> <!-- 宣告文件使用的字元編碼 --> <meta charset='utf-8'> <!-- 優先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA

前端系列教程之寫在前面的話

持續更新中！！！！！！！！！！！！！！！！！！！！！！！！！ 大佬慎入。。。。 大三狗一個，對前端涉及的知識懵懵懂懂，不夠系統，準備寫個系列教程，一方面為自己學習做個總結，另一方面也希望為剛入門的朋友提供一個幫助。 近些年的前端只會HTML、CSS、Javascript是不行的，但是這又

前端系列教程之CSS（盒模型）

盒模型 Margin（外邊距） - 清除邊框區域。Margin沒有背景顏色，它是完全透明 Border（邊框） - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響 Padding（內邊距） - 清除內容周圍的區域。會受到框中填充的背景顏色影響 Content（內容） - 盒子的

前端系列教程之CSS（引入）

CSS 引入 當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文件。 插入樣式表的方法有三種: 外部樣式表 內部樣式表 內聯樣式 一、外部樣式表 當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個

前端系列教程之JS（自認為有用程式碼）

以下程式碼並不唯一，僅供參考 1.保證自己的頁面不被嵌入其他框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>保證自己的頁面不被嵌入其他框

前端系列教程之JS（常規驗證規則）

<!DOCTYPE HTML> <head> <title>常見的驗證規則</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

前端系列教程之推薦（部落格搭建 Hexo）

今天給大家分享一個快速搭建部落格的網站，Hexo，點我跳轉 官網對於它的描述：快速、簡潔且高效的部落格框架 它的優點： 1. Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染。 2. Hexo 支援 GitHub Flavored Markdown 的所有功能，甚至

前端系列教程之推薦（測試 草料二維碼）

為什麼要推薦這個網站呢，有點像搞小聰明吧，嘻嘻嘻 之前說到移動端適配，當然我們可以使用F12開發者工具，進行測試，但是相比真機測試還是有些差距的，除了在電腦上安裝模擬器還有其他辦法嗎？ 草料二維碼，手機掃一掃，樣式藏不掉 這是網站首頁，連結地址：https://cli.im/ 當然使用手機

前端系列教程之HTML（移動端適配）

說一下自己對移動端適配的一個體會吧，理論就不多說了，咱們重點說方法： 移動端適配大致有三種適配方案加上常用的佈局方案 三種適配方案： 一、 百分比適配（%） 百分比主要在於主視角的定位和縮放，百分比的取值以原設計稿的尺寸為標準。 舉個例子，一個元素在原設計稿裡，量出來距離頂部是 20

【前端】CentOS 7 系列教程之五： 安裝最新版 nginx 並設置 nginx 代理轉發 node 服務

con config get http ati sha cal 安裝 pre 轉載請註明出處：http://www.cnblogs.com/shamoyuu/p/linux_5.html 進入/usr/local目錄 cd /usr/local 下載最新

40-天亮大資料系列教程之Spark常用運算元分析與應用

目錄 1、運算元概述 2、Spark運算元介紹與應用 3、經典運算元練習 詳情 1、運算元概述 什麼是運算元 英文翻譯為：Operator（簡稱op） 狹義：指從一個函式空間到另一個函式空間（或它自身）的對映。 廣義：指從一個空間到另一個空間的對

【REACT NATIVE 系列教程之五】NAVIGATOR(頁面導航)的基本使用與傳參

今天介紹一種應用開發中常用的負責頁面切換及導航功能的元件：Navigator一：Navigator對於頁面導航其實主要功能就是：每個頁面都知道本身應該切換到哪個頁面，並且切到的頁面會記錄從哪裡來，如果要返回的話，知道返回到哪個頁面。這一切都不需要再用邏輯管理！而且每個頁面之間也可以進行引數傳遞，很方便的元件。

【REACT NATIVE 系列教程之十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式

補充說明：一：很多童鞋問，鍵盤調出來被擋住了，那麼下面給出三個解決方案：1. 在render最外層包一個ScrollView，然後當鍵盤調出時，scrollTo即可實現。2. 在底部新增一個可變化高度的view，根據鍵盤獲取、失去焦點時，進行處理實現二：有的童鞋說對話方塊的背景沒有根據內容長短自適應，OK ，

WCF系列教程之消息交換模式之請求與答復模式(Request/Reply)

人員 point program enabled col ise sleep wds 類型 1、使用WCF請求與答復模式須知 (1)、客戶端調用WCF服務端需要等待服務端的返回,即使返回類型是void (2)、相比Duplex來講，這種模式強調的是客戶端的被動接受，也就是說

WCF系列教程之WCF服務宿主

class ati 托管 系列 msm scm 打開 實例 部分 本文參考自http://www.cnblogs.com/wangweimutou/p/4377062.html,純屬讀書筆記,加深記憶。 一、簡介 任何一個程序的運行都需要依賴一個確定的進程中,WCF也不例外

WCF系列教程之客戶端異步調用服務

1.5 void 添加引用 dsl idt pan important 配置 但是 本文參考自http://www.cnblogs.com/wangweimutou/p/4409227.html,純屬讀書筆記,加深記憶 一、簡介 在前面的隨筆中,詳細的介紹了WCF客戶端服務

WCF系列教程之WCF服務協定

需要 通信 mes 配置 ace 交換 對象 web服務 程序 本文參考自:http://www.cnblogs.com/wangweimutou/p/4422883.html,純屬讀書筆記,加深記憶 一、服務協定簡介: 1、WCF所有的服務協定層裏面的服務接口,都有一個S

WCF系列教程之WCF實例化

說明 con bind () 應用程序 ebe 控制臺應用程序 alt .text 本文參考自http://www.cnblogs.com/wangweimutou/p/4517951.html,純屬讀書筆記,加深記憶 一、理解WCF實例化機制 1、WCF實例化,是指對用戶

RabbitMQ系列教程之三：發布/訂閱（Publish/Subscribe）

mqc 標題 整合 參數 cti 事情 return 控制臺 run （本教程是使用Net客戶端，也就是針對微軟技術平臺的） 在前一個教程中，我們創建了一個工作隊列。工作隊列背後的假設是每個任務會被交付給一個【工人】。在這一部分我們將做一些完全不同的事情--我們將向多個