摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。

工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。

Github版本：Front-End Resource Collection

Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！

聽說2017你想寫前端？：適合于已經度過了小白階段，達到初級水平的前端開發者。留言區的干貨也很多。

Web前端從入門菜鳥到實踐老司機所需要的資料與指南合集

Growth: 全棧增長工程師指南

全棧增長工程師實戰

知乎上前端開發領域有哪些值得推薦的問答？

2016-我的前端之路:工具化與工程化

前后端分離后的前端時代

From Zero to Front-end Hero

前端網老姚淺談：怎么學JavaScript？

學習前端我推薦這5本書

專治前端焦慮的學習方案

寫給想成為前端工程師的同學們

寫給初學前端工程師的一封信

當你一個人想做一個web項目的時候你該怎么做

小胡子哥 ? 博客

Jerry Qu

人人網FED博客：有些討論技術的文章寫得很有分量。

Heero"s Blog：一些文章還是很有干貨的。

從輸入 URL 到頁面加載完成的過程中都發生了什么事情？：深入到了最底層，可以算非常完善的講解了，但是不太適合小白們閱讀，估計會一臉懵。

瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘

互聯網協議入門（一） - 阮一峰

DNS 原理入門 - 阮一峰

理解IP，子網和CIDR標記法

網頁頭部的聲明應該是用 lang="zh" 還是 lang="zh-cn"？

CSS:haslayout知多少：解釋IE的布局原理

前端精選文摘：BFC 神奇背后的原理

Perfect Full Page Background Image

移動前端開發之viewport的深入理解

cssreference.io

Flex 布局教程：語法篇

一勞永逸的搞定 flex 布局

不同瀏覽器兼容性——常用的CSS Hack技術集錦

html5shiv

CSS3 PIE

jQuery Scroll Path

How To Create An Animated Scroll To Top Button With jQuery

實現圖片懶加載(lazyload)：lazyload提升頁面加載速度，節流函數限制頁面滾動時綁定函數的觸發次數

異步加載JS腳本

Top 10 ES6 Features Every Busy JavaScript Developer Must Know

Concurrency model and Event Loop

JavaScript：徹底理解同步、異步和事件循環(Event Loop)

Javascript異步編程的4種方法

[jQuery: Return data after ajax call success [duplicate]](https://stackoverflow.com/a/5...

ES6 異步編程

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 規范

Airbnb JavaScript Style Guide

JavaScript Standard Style

Methodology / BEM

front-end code standards & best practices - Google Search

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese

前端開發中文字體的應用規范

如何優雅的選擇字體(font-family)

界面設計必備！全方位科普常用的字體規范（附神器）

Effective Event Binding with jQuery：簡單高效地實現jQuery中的事件綁定，實在太特么酷了！

Vue作者尤雨溪：Vue 2.0，漸進式前端解決方案

滴滴 webapp 5.0 Vue 2.0 重構經驗分享

餓了么Element：網站快速成型工具

基于 vue2 + vuex 構建一個具有 45 個頁面的大型單頁面應用

Vue2 后臺管理系統解決方案

vue生態大指南

React.js 小書：從實戰的角度出發，有重點地、深入淺出地講解React，需掌握ES6

Facebook官方Tutorial

React 入門實例教程

React 入門教程

SegmentFault 技術周刊系列文章

SegmentFault 技術周刊 Vol.8 - React，“5 分鐘快速入門”

SegmentFault 技術周刊 Vol.9 - 進階吧！React

技術周刊 Vol.10 - React Native丨Learn Once, Write Anywhere

SegmentFault 技術周刊 Vol.11 - React 應用與實踐

React+Ant.Design開發的SPA

React+reflux應用 IE8/9/10/11兼容實踐

Make your React app work in IE8

Ant Design - PC端中后臺框架

設計指引

React組件清單

設計模式

Ant Design Mobile - 移動版

AntV - 數據可視化

螞蟻設計平臺

設計指引：Web版，Mobile版

開發指引：Web版，H5版

FrozenUI - 專注于移動web的UI框架

Weex - 移動端跨平臺UI框架

關鍵字：移動端組件庫

去哪兒網前端架構師司徒正美：如何挑選適合的前端框架？

如果要用前端框架，開發流程是怎樣的？：首答干貨十足

前端UI框架集合

Web開發流程參考

現在大型網站的開發流程是怎么樣的？

13年的問答 - Website Development Process: Full Guide in 7 Steps

前后端分離模式下前端開發的一些疑問，關于注冊登陸

關于登陸模塊的設計

啟用驗證碼

連續登錄失敗三次鎖定帳號十分鐘

設置session有效期，存儲/驗證/清除session

validator.js

探索兩種優雅的表單驗證——策略設計模式和ES6的Proxy代理模式

clipboard.js

播放器插件videojs在ie8下無法播放？

videojs: Customizing Player Appearance - Luna Skin

進度欄標記

spchuang/videojs-markers

視頻彈幕

實時彈幕系統的設計與實現

jabbany/ABPlayerHTML5

Github 關鍵字：danmu

Google 關鍵字：medium image lazy load，實現medium依次加載模糊圖和高清圖的效果。

這樣的vue組件如何更加優雅?

引入服務層

前端妹子跟我抱怨她們的頁面加載很慢的時候，如何在她面前優雅地裝？

性能魔方mmTrix

打造亞秒級頁面加載速度網店實踐經驗

如何計算出自己網站的需要的流量、帶寬等信息：介紹如何計算網站所需流量、帶寬的實例，從運維及代碼兩方面給出了很中肯的建議

如何做好H5性能優化？

從網易與淘寶的font-size思考前端設計稿與工作流

如何讓頁面適配各種機型：采用rem實現頁面適配各種手機型號

移動端高清、多屏適配方案

移動端適配方案(下)

使用Flexible實現手淘H5頁面的終端適配

了解真實的『REM』手機屏幕適配

移動端 Web 開發踩坑之旅：部分定位的布局實現，fixed與input，iOS非直接輸入相關

移動端視頻播放 - Prismplayer - 阿里云

移動端頁面、圖片合理寬度

Spirit

移動Web開發規范 | Spirit

JM(JavaScript Mobile) | Spirit

JMUI(Based on JM) | Spirit

移動WEB調試利器 Rosin | Spirit

技術周刊 Vol.3 - 前后端分離與前端工程化

fis3 - 百度出品的前端工程構建系統

入門Webpack，看這篇就夠了

webpack 從入門到上線

webpack多頁應用架構系列（一）：一步一步解決架構痛點

How-To: Integrate Webpack into Visual Studio 2015

WebPack Task Runner - Visual Studio Marketplace

RAP：阿里巴巴團隊的Web接口管理工具

你應該知道的4種JavaScript設計模式

推薦輕量高效無依賴的開源JS插件和庫

jQuery插件庫

kenwheeler/slick: the last carousel you"ll ever need

jedrzejchalubek/glidejs: responsive and touch-friendly jQuery slider：在實際項目應用中，上面的 slick 略有瑕疵，最終采用的是這個 Glide。

Gallery 其實和下面的照片墻區別不大……還有后面的瀑布流……

dimsemenov/PhotoSwipe：點擊縮略圖可顯示大圖，功能很完善。

magnific-popup：上面的 PhotoSwipe 的迷你版本。

24 CSS GALLERY

20 Free jQuery Image Gallery & Lightbox Plugins

hotopile JS – jQuery照片堆疊效果插件

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

vue-gallery

desandro/masonry

Lazy Load, 延遲加載圖片的 jQuery 插件

WLDragon/SMValidator

NProgress.js

pace: An automatic web page progress bar

網頁加載的進度條是什么原理？用javascript做。

Rollbar - Error Tracking

FunDebug - 全棧JavaScript錯誤監控

ThemeForest

Behance

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參考手冊

CSS3 box-shadow實現紙張的曲線投影效果

How to Create CSS3 Paper Curls Without Images

CSS技巧收集——毛玻璃效果

SegmentFault 技術周刊 Vol.15 - “一天精通 Chrome 開發”

Control character — Unicode? character table

Text to HTML Converter

TinyPNG：在線的PNG壓縮工具，能夠顯著減小PNG文件體積。

RESTful – 移動互聯網時代的高效API架構風格：后端.NET配套方案：Asp.Net WebApi，或者Nancy

SmartWiki：國人出品的一款Wiki系統，從16年12月份開始開發，上次更新日期：2017年3月29日

如何讓前端更安全？——XSS攻擊和防御詳解

關鍵字：web design

站酷

交互設計&視覺設計的網站&書

LogoMoose

知乎關鍵字：原型設計 → 精華內容

如何設計出色的網站后臺原型？

如何快速學會 Axure 呢？

如何學習使用 Axure？