工作原因，最近一年斷斷續續寫了一點前端程式碼，收集整理了一些資料，和大家共享。
Github版本：Front-End Resource Collection
前端相關資源彙總
學習指導
精華文章
Web前端的路該怎麼走？：文章超長，但是乾貨超級多，值得反覆精讀！
聽說2017你想寫前端？：適合於已經度過了小白階段，達到初級水平的前端開發者。留言區的乾貨也很多。
前端學習
前端資訊
人人網FED部落格：有些討論技術的文章寫得很有分量。
Heero`s Blog：一些文章還是很有乾貨的。
網路原理
從輸入 URL 到頁面載入完成的過程中都發生了什麼事情？：深入到了最底層，可以算非常完善的講解了，但是不太適合小白們閱讀，估計會一臉懵。
語言基礎
HTML
網頁頭部的宣告應該是用 lang=”zh” 還是 lang=”zh-cn”？
CSS
CSS:haslayout知多少：解釋IE的佈局原理
Perfect Full Page Background Image
Flex 佈局
瀏覽器相容性
JS
How To Create An Animated Scroll To Top Button With jQuery
實現圖片懶載入(lazyload)：lazyload提升頁面載入速度，節流函式限制頁面滾動時繫結函式的觸發次數
ES6
Top 10 ES6 Features Every Busy JavaScript Developer Must Know
回撥
Concurrency model and Event Loop
JavaScript：徹底理解同步、非同步和事件迴圈(Event Loop)
非同步
[jQuery: Return data after ajax call success [duplicate]](https://stackoverflow.com/a/5…
Promises
JavaScript Promises for Dummies：所看過的幾篇講解Promises的文章裡面，最通俗易懂的一篇，可以從這篇入門瞭解Promises。
Understand promises before you start using async/await
JavaScript Promises: an Introduction
Google: promise async await example
開發規範
前端開發規範：命名規範、html 規範、css 規範、js 規範
front-end code standards & best practices – Google Search
庫 & 框架
Jquery
Effective Event Binding with jQuery：簡單高效地實現jQuery中的事件繫結，實在太特麼酷了！
Vue
基於 vue2 + vuex 構建一個具有 45 個頁面的大型單頁面應用
React
React.js 小書：從實戰的角度出發，有重點地、深入淺出地講解React，需掌握ES6
SegmentFault 技術週刊系列文章
React+reflux應用 IE8/9/10/11相容實踐
Make your React app work in IE8
Ant Design
螞蟻設計平臺
其它框架
關鍵字：移動端元件庫
框架優選
如果要用前端框架，開發流程是怎樣的？：首答乾貨十足
業務實戰
開發流程
13年的問答 – Website Development Process: Full Guide in 7 Steps
功能實現
使用者註冊
使用者登入
-
啟用驗證碼
-
連續登入失敗三次鎖定帳號十分鐘
-
設定session有效期，儲存/驗證/清除session
字串校驗
表單驗證
探索兩種優雅的表單驗證——策略設計模式和ES6的Proxy代理模式
複製到剪貼簿
視訊播放
videojs: Customizing Player Appearance – Luna Skin
進度欄標記
視訊彈幕
Github 關鍵字：danmu
圖片載入
Google 關鍵字：medium image lazy load，實現medium依次載入模糊圖和高清圖的效果。
元件化/模組化/業務分層
效能優化
前端妹子跟我抱怨她們的頁面載入很慢的時候，如何在她面前優雅地裝？
如何計算出自己網站的需要的流量、頻寬等資訊：介紹如何計算網站所需流量、頻寬的例項，從運維及程式碼兩方面給出了很中肯的建議
移動開發
頁面適配
如何讓頁面適配各種機型：採用rem實現頁面適配各種手機型號
常見大坑
移動端 Web 開發踩坑之旅：部分定位的佈局實現，fixed與input，iOS非直接輸入相關
Spirit – 騰訊移動Web整體解決方案
前端工程化
fis3
Webpack
How-To: Integrate Webpack into Visual Studio 2015
WebPack Task Runner – Visual Studio Marketplace
介面測試
RAP：阿里巴巴團隊的Web介面管理工具
理論昇華
資源收集
JS庫/外掛
Carousel
kenwheeler/slick: the last carousel you`ll ever need
jedrzejchalubek/glidejs: responsive and touch-friendly jQuery slider：在實際專案應用中，上面的 slick 略有瑕疵，最終採用的是這個 Glide。
Gallery
Gallery 其實和下面的照片牆區別不大……還有後面的瀑布流……
dimsemenov/PhotoSwipe：點選縮圖可顯示大圖，功能很完善。
magnific-popup：上面的 PhotoSwipe 的迷你版本。
照片牆
20 Free jQuery Image Gallery & Lightbox Plugins
jQuery photo wall gallery plugin (like at google)：Latest commit on 8 Dec 2014
photoWall.js: A lightweight Google-esque jQuery plugin for displaying photos：Latest commit on 15 Dec 2015
瀑布流
Lazy Load
Validator
Progress Bar
pace: An automatic web page progress bar
error monitoring and analytics
主題，UI，圖示等視覺相關
Froala Design Blocks：基於Bootstrap的響應式設計樣例大合集。
jQuery UI Bootstrap — 基於Bootstrap樣式的 jQuery UI 控制元件
uxcore – React UI Component Set：應用於企業級後臺？前臺應該也可以
Fontello – icon font scissors：字型圖示大合集，包含Font Awesome、Iconic等常見的字型圖示，只需選擇想要的圖示，然後就可打包下載，按需使用
iconfinder：icon素材
iconfont：阿里媽媽MUX傾力打造的向量圖示管理、交流平臺。
Preloaders.net – Loading GIF & APNG (AJAX loaders) generator
Freepik：是一個可以下載免費向量素材的網站，同時也可以找到 icon、PSD、和圖片等資源。
CSS
How to Create CSS3 Paper Curls Without Images
其它
瀏覽器
SegmentFault 技術週刊 Vol.15 – “一天精通 Chrome 開發”
實用工具
Control character — Unicode® character table
TinyPNG：線上的PNG壓縮工具，能夠顯著減小PNG檔案體積。
前後端互動
RESTful – 移動網際網路時代的高效API架構風格：後端.NET配套方案：Asp.Net WebApi，或者Nancy
Wiki系統
SmartWiki：國人出品的一款Wiki系統，從16年12月份開始開發，上次更新日期：2017年3月29日
前端安全
設計
網頁設計
關鍵字：web design
原型設計
知乎關鍵字：原型設計 → 精華內容