事情缘由，近来一年断断续续写了一点前端代码，网络整理了一些材料，和大家同享。
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
原型设想
知乎关键字：原型设想 → 英华内容
