工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。
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
原型设计
知乎关键字：原型设计 → 精华内容
