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

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

Github版本：Front-End Resource Collection

Web前端的路該怎么走？：文章超長(zhǎng)，但是干貨超級(jí)多，值得反復(fù)精讀！

聽(tīng)說(shuō)2017你想寫前端？：適合于已經(jīng)度過(guò)了小白階段，達(dá)到初級(jí)水平的前端開發(fā)者。留言區(qū)的干貨也很多。

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

Growth: 全棧增長(zhǎng)工程師指南

全棧增長(zhǎng)工程師實(shí)戰(zhàn)

知乎上前端開發(fā)領(lǐng)域有哪些值得推薦的問(wèn)答？

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

前后端分離后的前端時(shí)代

From Zero to Front-end Hero

前端網(wǎng)老姚淺談：怎么學(xué)JavaScript？

學(xué)習(xí)前端我推薦這5本書

專治前端焦慮的學(xué)習(xí)方案

寫給想成為前端工程師的同學(xué)們

寫給初學(xué)前端工程師的一封信

當(dāng)你一個(gè)人想做一個(gè)web項(xiàng)目的時(shí)候你該怎么做

小胡子哥 ? 博客

Jerry Qu

人人網(wǎng)FED博客：有些討論技術(shù)的文章寫得很有分量。

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

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

瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘

互聯(lián)網(wǎng)協(xié)議入門（一） - 阮一峰

DNS 原理入門 - 阮一峰

理解IP，子網(wǎng)和CIDR標(biāo)記法

網(wǎng)頁(yè)頭部的聲明應(yīng)該是用 lang="zh" 還是 lang="zh-cn"？

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

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

Perfect Full Page Background Image

移動(dòng)前端開發(fā)之viewport的深入理解

cssreference.io

Flex 布局教程：語(yǔ)法篇

一勞永逸的搞定 flex 布局

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

html5shiv

CSS3 PIE

jQuery Scroll Path

How To Create An Animated Scroll To Top Button With jQuery

實(shí)現(xiàn)圖片懶加載(lazyload)：lazyload提升頁(yè)面加載速度，節(jié)流函數(shù)限制頁(yè)面滾動(dòng)時(shí)綁定函數(shù)的觸發(fā)次數(shù)

異步加載JS腳本

Top 10 ES6 Features Every Busy JavaScript Developer Must Know

Concurrency model and Event Loop

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

Javascript異步編程的4種方法

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

ES6 異步編程

JavaScript Promises for Dummies：所看過(guò)的幾篇講解Promises的文章里面，最通俗易懂的一篇，可以從這篇入門了解Promises。

Understand promises before you start using async/await

JavaScript Promises: an Introduction

Google: promise async await example

前端開發(fā)規(guī)范：命名規(guī)范、html 規(guī)范、css 規(guī)范、js 規(guī)范

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

前端開發(fā)中文字體的應(yīng)用規(guī)范

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

界面設(shè)計(jì)必備！全方位科普常用的字體規(guī)范（附神器）

Effective Event Binding with jQuery：簡(jiǎn)單高效地實(shí)現(xiàn)jQuery中的事件綁定，實(shí)在太特么酷了！

Vue作者尤雨溪：Vue 2.0，漸進(jìn)式前端解決方案

滴滴 webapp 5.0 Vue 2.0 重構(gòu)經(jīng)驗(yàn)分享

餓了么Element：網(wǎng)站快速成型工具

基于 vue2 + vuex 構(gòu)建一個(gè)具有 45 個(gè)頁(yè)面的大型單頁(yè)面應(yīng)用

Vue2 后臺(tái)管理系統(tǒng)解決方案

vue生態(tài)大指南

React.js 小書：從實(shí)戰(zhàn)的角度出發(fā)，有重點(diǎn)地、深入淺出地講解React，需掌握ES6

Facebook官方Tutorial

React 入門實(shí)例教程

React 入門教程

SegmentFault 技術(shù)周刊系列文章

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

SegmentFault 技術(shù)周刊 Vol.9 - 進(jìn)階吧！React

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

SegmentFault 技術(shù)周刊 Vol.11 - React 應(yīng)用與實(shí)踐

React+Ant.Design開發(fā)的SPA

React+reflux應(yīng)用 IE8/9/10/11兼容實(shí)踐

Make your React app work in IE8

Ant Design - PC端中后臺(tái)框架

設(shè)計(jì)指引

React組件清單

設(shè)計(jì)模式

Ant Design Mobile - 移動(dòng)版

AntV - 數(shù)據(jù)可視化

螞蟻設(shè)計(jì)平臺(tái)

設(shè)計(jì)指引：Web版，Mobile版

開發(fā)指引：Web版，H5版

FrozenUI - 專注于移動(dòng)web的UI框架

Weex - 移動(dòng)端跨平臺(tái)UI框架

關(guān)鍵字：移動(dòng)端組件庫(kù)

去哪兒網(wǎng)前端架構(gòu)師司徒正美：如何挑選適合的前端框架？

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

前端UI框架集合

Web開發(fā)流程參考

現(xiàn)在大型網(wǎng)站的開發(fā)流程是怎么樣的？

13年的問(wèn)答 - Website Development Process: Full Guide in 7 Steps

前后端分離模式下前端開發(fā)的一些疑問(wèn)，關(guān)于注冊(cè)登陸

關(guān)于登陸模塊的設(shè)計(jì)

啟用驗(yàn)證碼

連續(xù)登錄失敗三次鎖定帳號(hào)十分鐘

設(shè)置session有效期，存儲(chǔ)/驗(yàn)證/清除session

validator.js

探索兩種優(yōu)雅的表單驗(yàn)證——策略設(shè)計(jì)模式和ES6的Proxy代理模式

clipboard.js

播放器插件videojs在ie8下無(wú)法播放？

videojs: Customizing Player Appearance - Luna Skin

進(jìn)度欄標(biāo)記

spchuang/videojs-markers

視頻彈幕

實(shí)時(shí)彈幕系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

jabbany/ABPlayerHTML5

Github 關(guān)鍵字：danmu

Google 關(guān)鍵字：medium image lazy load，實(shí)現(xiàn)medium依次加載模糊圖和高清圖的效果。

這樣的vue組件如何更加優(yōu)雅?

引入服務(wù)層

前端妹子跟我抱怨她們的頁(yè)面加載很慢的時(shí)候，如何在她面前優(yōu)雅地裝？

性能魔方mmTrix

打造亞秒級(jí)頁(yè)面加載速度網(wǎng)店實(shí)踐經(jīng)驗(yàn)

如何計(jì)算出自己網(wǎng)站的需要的流量、帶寬等信息：介紹如何計(jì)算網(wǎng)站所需流量、帶寬的實(shí)例，從運(yùn)維及代碼兩方面給出了很中肯的建議

如何做好H5性能優(yōu)化？

從網(wǎng)易與淘寶的font-size思考前端設(shè)計(jì)稿與工作流

如何讓頁(yè)面適配各種機(jī)型：采用rem實(shí)現(xiàn)頁(yè)面適配各種手機(jī)型號(hào)

移動(dòng)端高清、多屏適配方案

移動(dòng)端適配方案(下)

使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配

了解真實(shí)的『REM』手機(jī)屏幕適配

移動(dòng)端 Web 開發(fā)踩坑之旅：部分定位的布局實(shí)現(xiàn)，fixed與input，iOS非直接輸入相關(guān)

移動(dòng)端視頻播放 - Prismplayer - 阿里云

移動(dòng)端頁(yè)面、圖片合理寬度

Spirit

移動(dòng)Web開發(fā)規(guī)范 | Spirit

JM(JavaScript Mobile) | Spirit

JMUI(Based on JM) | Spirit

移動(dòng)WEB調(diào)試?yán)?Rosin | Spirit

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

fis3 - 百度出品的前端工程構(gòu)建系統(tǒng)

入門Webpack，看這篇就夠了

webpack 從入門到上線

webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)

How-To: Integrate Webpack into Visual Studio 2015

WebPack Task Runner - Visual Studio Marketplace

RAP：阿里巴巴團(tuán)隊(duì)的Web接口管理工具

你應(yīng)該知道的4種JavaScript設(shè)計(jì)模式

推薦輕量高效無(wú)依賴的開源JS插件和庫(kù)

jQuery插件庫(kù)

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

jedrzejchalubek/glidejs: responsive and touch-friendly jQuery slider：在實(shí)際項(xiàng)目應(yīng)用中，上面的 slick 略有瑕疵，最終采用的是這個(gè) Glide。

Gallery 其實(shí)和下面的照片墻區(qū)別不大……還有后面的瀑布流……

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

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

網(wǎng)頁(yè)加載的進(jìn)度條是什么原理？用javascript做。

Rollbar - Error Tracking

FunDebug - 全棧JavaScript錯(cuò)誤監(jiān)控

ThemeForest

Behance

Froala Design Blocks：基于Bootstrap的響應(yīng)式設(shè)計(jì)樣例大合集。

jQuery UI Bootstrap -- 基于Bootstrap樣式的 jQuery UI 控件

uxcore - React UI Component Set：應(yīng)用于企業(yè)級(jí)后臺(tái)？前臺(tái)應(yīng)該也可以

Fontello - icon font scissors：字體圖標(biāo)大合集，包含F(xiàn)ont Awesome、Iconic等常見(jiàn)的字體圖標(biāo)，只需選擇想要的圖標(biāo)，然后就可打包下載，按需使用

iconfinder：icon素材

iconfont：阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺(tái)。

Preloaders.net - Loading GIF & APNG (AJAX loaders) generator

Freepik：是一個(gè)可以下載免費(fèi)矢量素材的網(wǎng)站，同時(shí)也可以找到 icon、PSD、和圖片等資源。

CSS參考手冊(cè)

CSS3 box-shadow實(shí)現(xiàn)紙張的曲線投影效果

How to Create CSS3 Paper Curls Without Images

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

SegmentFault 技術(shù)周刊 Vol.15 - “一天精通 Chrome 開發(fā)”

Control character — Unicode? character table

Text to HTML Converter

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

RESTful – 移動(dòng)互聯(lián)網(wǎng)時(shí)代的高效API架構(gòu)風(fēng)格：后端.NET配套方案：Asp.Net WebApi，或者Nancy

SmartWiki：國(guó)人出品的一款Wiki系統(tǒng)，從16年12月份開始開發(fā)，上次更新日期：2017年3月29日

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

關(guān)鍵字：web design

站酷

交互設(shè)計(jì)&視覺(jué)設(shè)計(jì)的網(wǎng)站&書

LogoMoose

知乎關(guān)鍵字：原型設(shè)計(jì) → 精華內(nèi)容

如何設(shè)計(jì)出色的網(wǎng)站后臺(tái)原型？

如何快速學(xué)會(huì) Axure 呢？

如何學(xué)習(xí)使用 Axure？