大前端工具集

作者：聶微東
原文地址：https://github.com/nieweidong/fetool

本篇文章記錄了一枚程序猿的百寶箱。

主要內容是一些使用過的庫、工具、套路或關注的前端組織等等，反正用 前端瑞士軍刀 來總結這篇文章再合適不過鳥。

您可以通過以下方式聯系到我：

  • 微博 @聶微東
  • 個人 Blog fefork.com
  • 博客園 犀利的東哥
  • QQ 群 214199415，群名前端 Club。PS：入群務必請提供 有內容的 git 或 blog 地址，否則進不去哈:)

目錄

正文

<h3 id="org">前端組織</h3>

雖混過外企倆家，但勞資英文這項的技能點還是灰色的...so，俺關注的站點主要以中文為主

名稱 推薦指數 備注/說明
GitHub ★★★★★ 勞資清楚這不是個純粹的前端社區... 但作為全球最大的搞基社區，無數前端項目在這啟航 沒 Git 都不好意思面基有木有！
MDN ★★★★★ 不解釋，無數的資源再等著你探索
Awesomes.cn ★★★★☆ 國人維護的前端資源庫，深度對接到 Github
慕課 ★★★★☆ 大量的在線計算機課程。 雖然初、中級居多，但是不乏有巨作值得細細品嘗
W3Cplus ★★★★☆ 大漠(《圖解 CSS3》作者)在國內的影響力杠杠的 Sass 專家級
百度 FEX ★★★★ 代表作 FIS、UEditor、WebUploader、KityMinder
前端亂燉 ★★★☆ 前端社區太多，亂燉還算做的不錯的
極客學院 ★★★ 和慕課類似，但是內容更雜、更豐富 PS：貌似比較新穎的教程都是收費的
Div.IO ★★★ 主要內容是最新的前端庫和前沿技術
騰訊全端 AlloyTeam ★★★ 騰訊 Web 前端團隊

<h3 id="blogs">前端博客</h3>

值得長期占坑的前端個人博客，都是偶經常關注的

名稱 推薦指數 備注/說明
如何跟上前端開發的最新前沿 ★★★★★ RT
阮一峰 ★★★★★ 關注多年，拜讀其 ES6 系列... 雖網傳靠寫書進鳥阿里，但博客內容確實夠豐富
粉絲日志 for 張丹 ★★★★★ 大愛作者寫的 Node 系列
張鑫旭 ★★★★★ 成名多年的、高產的前端大濕

<h3 id="blogbuild">博客搭建</h3>

名稱 推薦指數 備注/說明
hexo ★★★★★ 快速、簡潔且高效的博客框架
jekyll ★★★★ 將純文本轉化為靜態網站和博客
Tumblr ★★★ 輕博客的祖師爺
Wordpress ★ 這玩意古老到我都不想介紹鳥

使用 hexo/jekyll + GitPage，前端搭建靜態博客那是相當 easy。用 Markdown 寫文章做記錄，再 push 到 Git 上，分分鐘高大上有木有

<h4 id="css">CSS</h4>

名稱 推薦指數 備注/說明
MetroUI ★★★★☆ 好看好用，重點是樣式特別、個性
LoadersCSS ★★★★☆ 用 CSS 技術實現 loading 動畫； 補一句，想熟悉、理解 keyframes、animation、transform、transition 的童鞋可以直接去讀其源碼(只有千把行代碼)，讀完就算出師鳥:)
WeUI ★★★★☆ 一套同微信原生視覺體驗一致的基礎樣式庫 為微信 Web 開發量身設計，令用戶的使用感知更加統一
PostCSS ★★★★☆ 最近才知道大名鼎鼎Autoprefixer是其插件 推薦大漠的文章《PostCSS深入學習》，有關 PostCSS 不是什么？PostCSS 是什么？PostCSS 可以做什么等等問題，文章里面有答案
CSSgram ★★★★ 圖片濾鏡庫，終于可以用 CSS 在 web 上實現濾鏡的效果鳥 IE不支持，不過新的移動設備支持沒問題 Can I Use
HINT.css ★★★★ 一款非常小巧的提示框效果
Hover.css ★★★★ 很多鼠標 Hover 態的效果，可以給產品學習一下:)
Cursor ★★★★ 記錄各瀏覽器對Cursor的支持情況
csscss ★★★★ 用于檢查 CSS 代碼冗余
purecss ★★★☆ 小巧的響應式 CSS 庫，Yahoo!出品
cssmatic ★★★ 一個幫忙調試CSS效果的工具

<h4 id="javascript">瀏覽端 JS</h4>

名稱 推薦指數 備注/說明
requirejs ★★★★★ JS模塊化是構建復雜項目的第一步 中文學習文檔奉上：RequireJS 中文網
ECharts ★★★★★ 好用，最關鍵的是支持的圖表展示非常之多，強烈推薦
Swiper ★★★★★ 強大的 Slider 庫 其實這類效果庫非常多，但文檔能那么專業的就很少鳥
fullPage ★★★★☆ 非常好用的全屏滑動庫，看 Demo 就明白
PhotoSwipe ★★★★☆ 偶常用的 js 庫 官網上有這么一句很關鍵、重要"no dependencies"
Vuejs ★★★★☆ 比較喜歡其作者... 所以勞資正在看源碼學習學習
favico.js ★★★★☆ 動態改變瀏覽器標簽欄中的網站圖標，非常好玩
ant.design ★★★★☆ 淘寶搞的良心項目，文檔美好的令人發指 樣式優雅，強烈推薦內部系統嘗試此庫
nodePPT ★★★★ 前同事三水的大作，好用必須得支持:) 用 Markdown 寫 PPT，還可以 HTML 混排，上手飛快
peity.js ★★★★ jQuery的圖表插件，特別cute，感覺萌萌噠 將HTML轉換成一個小的<svg>餅圖、圓環圖、折線圖等等
emojify.js ★★★★ 能夠將emoji關鍵詞轉換為emoji圖片的JS插件 可以快速的為你的網站提供emoji表情支持
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 頁完全不是問題噠

NodeJS

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

社區活躍、部署方便都是令我對 Node 愛不釋手的主要原因

<h4 id="RecPackageForNode">推薦 Package</h4>

這里介紹些有特色且前端有必要知道的包
名稱 推薦指數 備注/說明
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》
async ★★★★☆ 一個流程控制工具包，提供直接而強大的異步功能
lodash ★★★★☆ JS 工具庫 Underscore.js的一個 fork 發展而來
socket.io ★★★★☆ 預計 Node 的實時框架 聊天室、頁游等對實時性有高要求的較適用
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
Mocha ★★★★ Node 里最常用的測試框架； 它支持多種 Node 的 Assert libs； 同時支持異步和同步的測試，同時支持多種方式導出結果； 也支持直接在 browser 上跑 JS 代碼測試。
everyauth ★★★★ OAuth 的集成解決方案
shelljs ★★★☆ 寫 Node 時難免需要用 shell 去操作些神馬 shelljs 是基于 Node 的 shell 工具，API 及其簡單
hashids ★★★☆ 看名稱就懂，給 userid 加解密用的
colors ★★☆ 花俏的小工具 讓打印console.log時有更好的展示樣式
n ★★ 控制Node的版本，想升級一行代碼搞定

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

以上庫俺都有使用過，甚至有不少都是項目開發中、各種特定場景下必用的，有任何使用問題歡迎溝通哈:)

<h4 id="RecBookForNode">Node 學習指南</h4>

名稱 推薦指數 備注/說明
Node.js 中文資料導航 ★★★★★ Node 的中文資料導航，start1300+
從零開始 NodeJS 系列文章 ★★★★★ 基本上每一篇都看過，強烈推薦
Node.js 包教不包會 ★★★★★ 值得閱讀，看完絕不用買書鳥
七天學會 NodeJS ★★★★★ 勞資還沒看，不過看目錄還不錯:)
Style Guide ★★★★ 這是一份關于如何寫出一致且美觀的 Node.js 代碼的風格指南

<h3 id="build">Build 項目構建</h3>

Gulp + Webpack 的使用套路參考: learning-gulp

Gulp 資料收集：use-gulp

推薦篇與 Webpack 相關的文章《CSS Modules》

Webpack 用起來吼吼：webpack-howto

名稱 推薦指數 備注/說明
pm2 ★★★★★ 是一個帶有負載均衡功能的 Node 應用的進程管理器； 是 Forever 的進階庫，想了解的可以看這篇文章《擁抱PM2》
Webpack ★★★★★ 項目構建工具，由于過于復雜和太強大，所以勞資還沒去深入研究。
Gulp ★★★★★ Gulp 是基于 Node 實現 Web 前端自動化開發的工具。 學習資料附上GulpBook
Bower ★★★★☆ 前端項目的包管理其實是件復雜的事 誰誰誰依賴誰誰誰，誰誰誰依賴誰誰誰的某個版本...臥槽 Bower 就是搞定這件事兒的，親爹是 Twitter 推薦篇 Bower 的中文文章：《bower 解決 js 的依賴管理》
Grunt ★★★★☆ 和 Gulp 類似，都是項目構建的常見選擇 對比這倆的文章可謂不少，推薦篇《Gulp vs Grunt》 英盲又想看文檔，可以去Grunt 中文網
FIS ★★★★ 度廠出品的前端構建工具 文檔清晰，功能強大，推薦了解和使用
Gitlab CI ★★★ 一套基于Gitlab的持續集成服務

<h4 id="gulp">Gulp 推薦包</h4>

Gulp 最基礎的庫就不列在下表格中鳥，其中包括：

名稱 推薦指數 備注/說明
gulp-webpack ★★★★★ webpack 與 gulp 配合，開啟前端 Build 新紀元 webpack plugin for gulp
gulp-rev ★★★★☆ 高大上第一步，靜態文件名稱變成 HASH 名稱
gulp-rev-collector ★★★★☆ 配合gulp-rev使用，自動用 HASH 替換模板內靜態文件名
run-sequence ★★★★ Gulp 任務機制為并行，RS 使得有依賴的任務可串行執行 使用 gulp-rev 時得用 RS 配合 要不并行的生成配置和處理.html 文件不能同事生效
gulp-util ★★★★ 內含一套方法庫，功能太多 個人感覺更喜歡功能單一的包，不太喜歡這種大雜燴
gulp-connect ★★★★ 有 reload 功能的 Run WebServer 工具 我一般用來 LivereLoad，即保存之后自動刷新頁面
gulp-load-plugins ★★★★ 可加載 package.json 內與 Gulp 相關的插件 省去鳥一行一行 require 的功夫咯
gulp-clean ★★★☆ 移除文件或文件夾的包
gulp-replace ★★★☆ 其功能看名字就知道，用做字符串替換的
gulp-autoprefixer ★★★☆ 叼炸天的自動處理瀏覽器前綴的包 文檔地址：usage
gulp-rename ★★★ 把文件重命名 結構設計的好不太會用到這個
gulp-flatten ★★★ 刪除或替換文件的相對路徑； 一般我這用來移動 img 或者其他靜態文件到新目錄 同上：結構設計的好不太會用到這個

精選閱讀

<h4 id="fedev">前端技術</h4>

名稱 推薦指數 備注/說明
前端開發規范手冊 ★★★★☆ 此手冊主要實現的目標：代碼一致性和最佳實踐
ECMAScript 6入門 ★★★★☆ 阮一峰大神所著，一本開源的JS教程 全面介紹 ECMAScript 6新引入的語法特性
ReactNative 中文版 ★★★★☆ 翻譯自官方的中文文檔
ReactWebpackCookBook ★★★★☆ 此書會引導讀者是進入React和Webpack的世界。 倆都是非常前沿的技術，同時使用會更有趣。
ReactNative 學習指南 ★★★☆ 新玩意層出不窮... 對于能持續學習的童鞋，這是個美好的時代
HTML/CSS 編碼規范 ★★★☆ 編寫靈活、穩定、高質量的HTML和CSS代碼的規范
GulpBook ★★★☆ Gulp 是基于 Node 實現 Web 前端自動化開發的工具

<h4 id="interview">前端面試</h4>

名稱 推薦指數 備注/說明
在 LinkedIn 做面試官的故事 ★★★★★ 非面試題，介紹 LinkedIn 的面試過程 文章有很多中肯的建議和想法，推薦閱讀
大漠：寫給前端面試者 ★★★★★ 這篇文章不涉及任何的面試題 大漠與大家聊聊面試者與被面者之間的感受...
前端面試題 ★★★★☆ Git 上非常火的前端面試題，start17k+
前端面經 ★★★★ 主要內容是些前端面試筆試題和面試套路，值得閱讀

<h4 id="nodejsdev">Nodejs</h4>

名稱 推薦指數 備注/說明
Node.js 中文資料導航 ★★★★★ Node 的中文資料導航，start1300+
從零開始 NodeJS 系列文章 ★★★★★ 基本上每一篇都看過，強烈推薦
Node.js 包教不包會 ★★★★★ 值得閱讀，看完絕不用買書鳥
七天學會 NodeJS ★★★★★ 勞資還沒看，不過看目錄還不錯:)
stream-handbook ★★★★☆ 如果學習 NodeJS，那么流一定是需要掌握的概念

<h4 id="otherdev">其他技術</h4>

名稱 推薦指數 備注/說明
MongoDB 極簡實踐入門 ★★★★☆ 入門推薦的套路，非常淺顯易懂
Mac 設置指南 ★★★★ Mac 使用必看 尤其適合 偏執狂/強迫癥 患者:)
Markdown 資料 ★★★ 簡單看些語法入門，快速用起來

<h3>工具/軟件</h3>

<h4 id="web">Web</h4>

名稱 推薦指數 備注/說明
CanIuse ★★★★★ 前端必備；查看瀏覽器對各種新特性的兼容情況
overapi ★★★★★ 最全的開發人員在線速查手冊
百度腦圖 ★★★★☆ 非常方便的思維導圖工具
ProcessOn ★★★★☆ 和百度腦圖的功能類似，腦圖工具。
VimAwesome ★★★★☆ Vim 插件集合，Vim 黨必備
Tower ★★★★☆ 小而美的多人協同工具。 不光只有 Web 版，還有 iPhone、iPad、Android、微信版。
Slides ★★★★☆ 一個所見即所得的 WebPPT 編輯器，非常推薦
faviconer.co ★★★★ 一個所見即所得的icon生成器，很好用
smallpdf ★★★★ 提供各種格式和 PDF 互相轉換
Cmd Markdown ★★★★ 好用的 Web 版 Markdown 編輯器
StackEdit ★★★★ 又是一款 Web 版 Markdown 編輯器
墨刀 ★★★★ 一個在線移動應用原型制作工具。 旨在幫助產品經理快速制作可在手機端展示的移動應用原型。
htm2pdf ★★★★ HTML to PDF
Speaker Deck ★★★★ 在線的演講稿展示平臺

<h4 id="app">APP</h4>

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

名稱 推薦指數 備注/說明
印象筆記 ★★★★★ 免費賬號完全夠用，跨平臺跨終端的記錄軟件
365日歷 ★★★★ 首先肯定比系統自帶的日歷強大，要不推薦個蛋蛋 俺一般用來搞目標管理，比如學習計劃和工作計劃 生活中會訂閱演唱會、電影首映的信息
多看閱讀 ★★★★ kindle 確實好，但是懶得隨身帶著 多看還算不錯，書較多且偶爾有特價比較爽

<h5 id="android">Android</h5>

名稱 推薦指數 備注/說明
小米桌面 ★★★★☆ 多好看、多漂亮談不上，關鍵是沒有廣告

<h5 id="iphone">iPhone</h5>

名稱 推薦指數 備注/說明
Surge ★★★★ 非免費 牛逼的網絡開發與調試工具，前端必備
Monkey ★★★★ Monkey 是 iPhone 上一個 GitHub 第三方客戶端。 展示 GitHub 上的開發者的排名，以及倉庫的排名

<h4 id="mac">Mac</h4>

對于美好事務的追求無論何時都不算晚，前年公司給配了臺 Mac 用做測試開發機，于是開始在 Mac 下辦公。 Windows？ 回不去鳥...

名稱 推薦指數 備注/說明
Homebrew ★★★★★ 沒它程序猿沒法好好干活... Homebrew使OS X更完美。 使用gem來安裝gems、用brew來搞定那些依賴包
iTerm2 ★★★★☆ Mac 終端功能少又不好看，iTerm2 可以解救你~ 推薦篇文章：《讓你的命令行豐富多彩》
BrowseShot ★★★★☆ 偶正在使用的網頁截圖工具，強烈推薦
BeyondCompare ★★★★☆ 在Windows下就開始用了 比對文件和文件夾杠杠好使，Merge必備工具
CheatSheet ★★★★ 能夠顯示當前程序的快捷鍵列表，默認的快捷鍵是長按 ?
Sequel Pro ★★★★ 免費好用的Mysql工具
LICEcap ★★★★ 屏幕錄制工具，支持導出 GIF 動畫圖片格式 輕量級、使用簡單，錄制過程中可以改變錄屏范圍
Manico ★★★★ 快捷啟動和切換 APP 的工具，高效的第一步 AppStore 上收費，不過可以免費試用
WebStorm ★★★★ 功能超強的前端 IDE，不多介紹，誰用誰知道 PS：貌似俺插件裝多了，用著卡卡的，風扇呼呼轉...
Atom ★★★★ 2015 年 7 月之前，在桌面環境下我最喜歡的編輯器是 Sublime。 但之后就是 Atom，俺也專門為它寫了篇使用紀要
馬克鰻 ★★★★ MarkMan，非常強大好用的標注、測量工具。 日常工作免費版就完全可以滿足，強烈推薦
Wireshark ★★★☆ 說實話，Mac 下木有 Fiddler 挺不習慣，不過在有更強大的替代品
SourceTree ★★★☆ 一款好用的的 Git 客戶端工具，重點是支持中文:)
focus booster ★★★ 因為比較在意時間管理，所以這軟件是俺工作時間的必備之物
Mou ★★ 小清新的 Markdown 編輯器

<h4 id="linux">Linux</h4>

名稱 推薦指數 備注/說明
oh-my-zsh ★★★★★ 終端黨 必用的好工具，強烈推薦
tree ★★★★ linux 以樹狀圖逐級列出目錄的內容
oneapm ★★★★ 強大的運維工具，提供多種監控客戶端； 有采集、分析、展示等一套功能； PS：我這用了服務器監控(免費哦)
httpie ★★★☆ 一個 CLI 中的 HTTP 客戶端 用法簡單、易讀

<h3 id="BrowserPlugins">Chrome 瀏覽器插件</h3>

名稱 推薦指數 備注/說明
JSONView ★★★★★ 麻麻再也不用擔心偶調試接口啦
wappalyzer ★★★★☆ 分析網站使用的技術 它可以檢測網頁的 Web 服務器、JS 框架等等
Postman ★★★★ 強大的調試工具，推薦之
gitShare ★★★★ 用于方便把Github項目分享到 Twitter 或 Facebook
二維碼生成器 ★★★★ RT
User-Agent Switcher ★★★★ 模擬各種終端的 UA，達到調試目的
GitPlug ★★★☆ 在 Git 項目頁中嵌入有關的圖表信息
Swap My Cookie ★★★☆ 切換馬甲非常方便
Infinity ★★☆ 針對 Chrome 的插件，新標簽頁 會讓你耳目一新

<h3 id="git">Git</h3>

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

<h3 id="redis">Redis</h3>

<h3 id="mongodb">MongoDB</h3>

名稱 推薦指數 備注/說明
Mongoose ★★★★☆ 讓 NodeJS 更容易操作 Mongodb 數據庫。 附上一篇Mongoose 學習參考文檔

<h3 id="other">雜七雜八</h3>

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

名稱 推薦指數 備注/說明
租房要點 ★★★★☆ 適用于北上廣深杭，大城市打拼租房確實是硬傷
QQ 群規 ★★★★☆ 突然某天，有個 QQ 群讓我加群 原本我是拒絕的，但當我看完這篇 QQ 群規后... 勞資真的被感動到了，太牛逼、夠專業！ 最后，我默默加群鳥:)
.gitignore 文件 ★★★★☆ 介紹不同語言項目的 gitignore 模板
Codebabes ★★★ 學編程的網站。 重點是每通過一個測試，尼瑪對應的妞會脫一件衣服... PS：要翻墻哦~
ReadmeSample ☆ 項目高大上的第一步就是包裝，所以來看看 README 的書寫套路吧 PS：勞資怎么這么無聊...

<h3 id="cool">前端炫技-炫酷狂拽叼炸天站點</h3>

名稱 推薦指數 備注/說明
windows93 ★★★★☆ 模擬 Win93 桌面，思路、體驗和整體效果比較有意思
GeekTyper ★★★★☆ 好玩又具有 Geek 精神的網站，雖然創建的目的是個惡作劇 PS：網站需要翻墻
前端技能棧 ★★★★ 好玩的前端技能棧展示
Mapbox ★★★★ 非常叼的開源項目，有方便的 JSAPI(還有 SDK)。 不過免費版只能淺嘗，流量有限。 PS：網站需要翻墻
Clark Duvall ★★★★ 一枚歪果仁的個人blog，范兒叼叼的
SuperScrollorama ★★★☆ 好玩好看的動畫庫，鏈接是 SuperScrollorama 的展示頁
parallax.js ★★★ 一個視差引擎的官網，在電腦和手機上都有很好的體驗
CSS字母 ★★ 用CSS實現英文字母，叼叼的
墨刀 ★★ 一個在線移動應用原型制作工具。 旨在幫助產品經理快速制作可在手機端展示的移動應用原型。

<h3 id="ux">設計/交互</h3>

作為負責最終效果呈現的前端工程師，多少得了解些 設計和交互 的，這也是為什么 fetool 會單獨的存在這一章...當然話又說回來了，偶畢業的第一份工作是設計:)

名稱 推薦指數 備注/說明
站酷 ★★★★☆ 里面好東西太多，俺當年真沒少再上面淘素材
UI中國 ★★★★ 光聽名字就知道有多高大上鳥:)

<h3 id="handbook">速查手冊</h3>

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

名稱 推薦指數 備注/說明
百度CDN公共庫 ★★★★☆ 基本常見的庫都收錄拉，搞 demo 的時候特方便
HTML 和 CSS 代碼規范 ★★★★☆ 編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范
Linux命令中文手冊 ★★★★ 木有系統的好好學習 Linux，所以命令更不熟悉 真羨慕那些CLI玩的飛起的:)
Git 速查 ★★★★ 分類清晰的速查表
jQueryAPI 1.11.3 ★★★★ ZeptoAPI 基本和 jQuery 一樣，所以看一份就好
CSS3 ★★★★ CSS3 的在線手冊
Express API ★★★☆ 中文手冊:) 4.x和3.x都有
CI用戶指南 ★★ 一個輕量級的 PHP 框架用戶指南 推薦指數低的原因是勞資PHP比較弱，囧
Yaf ★★ 鳥哥(惠新宸)所寫的 PHP 框架 推薦指數低的原因同上...

<h3 id="summary">小結</h3>

背景

俺算個比較能自我總結的碼農，所以偶爾喜歡寫點東西做些記錄或者自我熏陶陶醉一下。
可寫著寫著發現Evernote里面的東西太尼瑪多(亂)了，于是想著把一些技術相關的資料都整理整理，都丟到Git上沉淀下來。 這樣Evernote就可以只需要記錄些偏生活方便的，看著清爽一些...

所以，這篇記錄其實只是為偶自己而寫，確信以后也一直會這樣~~~

說說目標

其實與這篇記錄類似的文章太多鳥，俺也不愿意成為一個單純的收集資料，分享資料的這么個東西。
我希望 fetool 能更生動、更個性，最好能更另類點，對于每樣工具的思考和解析更多點，吐槽也必須有理有據，然后再配上勞資收集的 low 圖，完美！
希望通過不停的完善這篇記錄，能Push勞資多了解業內的新玩具和新創意，然后圍繞這些新東西，客觀的再寫點好東西，比如文章、資料、開源項目這些，讓其他伙伴們少走彎路或學的更順暢點兒

所以勞資對自己的要求是：這篇記錄里列出的每樣東西，自己都得的去了解、去嘗試，然后再列出來。 能舉一反三最好，如果達不到至少也能清楚的認識：列出來的這玩意對程序員有沒有卵用，解決了啥痛點。

<h3 id="todo">TODO</h3>

  1. 繼續完善和擴充內容

  2. “備注/說明”這一欄不夠犀利，希望再多加入自己的理解、點評、吐槽，讓這篇記錄更犀利和生動

  3. 支持導出多種格式，如.pdf、.epub、.mobi等

  4. 后續看看如果有必要，可以單獨搞個頁面，優化下閱讀和展示效果

以下是 @拔赤 總結的前端技能圖：

拔赤總結的前端技能圖
拔赤總結的前端技能圖

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前端知識體系http://www.cnblogs.com/sb19871023/p/3894452.html 前端...
    秋風喵閱讀 12,586評論 7贊 163
  • 1-------- 走進前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥閱讀 2,359評論 0贊 34
  • 隨心所欲不逾矩，種桃種李種春風。 記得早些年看過一個采訪，王菲得了一個歌手大獎，記者問她有什么感想，她說:“我會唱...
    水鑒心閱讀 456評論 0贊 0
  • 源碼地址 實現原理概覽 我們要實現手指控制圖片的平移、旋轉、縮放，首先得知道手指做了什么動作，比如用戶兩指間距離是...
    籬開羅閱讀 5,969評論 15贊 13
  • 謝謝你們是不是呀我了嗎哦(⊙o⊙)哦(⊙o⊙)哦(⊙o⊙)哦(⊙o⊙)哦(⊙o⊙)哦(⊙o⊙)哦(⊙o⊙)哦(⊙o...
    鞋靶閱讀 172評論 0贊 0