前端资源收集整理

工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。

Github版本：Front-End Resource Collection

前端相关资源汇总

学习指导

精华文章

Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！

听说2017你想写前端？：适合于已经度过了小白阶段，达到初级水平的前端开发者。留言区的干货也很多。

Web前端从入门菜鸟到实践老司机所需要的资料与指南合集

前端学习

From Zero to Front-end Hero

前端网老姚浅谈：怎么学JavaScript？

当你一个人想做一个web项目的时候你该怎么做

前端资讯

小胡子哥 » 博客

Jerry Qu

人人网FED博客：有些讨论技术的文章写得很有分量。

Heero's Blog：一些文章还是很有干货的。

网络原理

从输入 URL 到页面加载完成的过程中都发生了什么事情？：深入到了最底层，可以算非常完善的讲解了，但是不太适合小白们阅读，估计会一脸懵。

语言基础

HTML

网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？

CSS

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

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

Perfect Full Page Background Image

移动前端开发之viewport的深入理解

cssreference.io

实现图片懒加载(lazyload)：lazyload提升页面加载速度，节流函数限制页面滚动时绑定函数的触发次数

异步加载JS脚本

ES6

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 异步编程

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

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)

界面设计必备！全方位科普常用的字体规范（附神器）

库 & 框架

Jquery

Effective Event Binding with jQuery：简单高效地实现jQuery中的事件绑定，实在太特么酷了！

Vue

Vue作者尤雨溪：Vue 2.0，渐进式前端解决方案

滴滴 webapp 5.0 Vue 2.0 重构经验分享

饿了么Element：网站快速成型工具

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

Vue2 后台管理系统解决方案

vue生态大指南

React

React.js 小书：从实战的角度出发，有重点地、深入浅出地讲解React，需掌握ES6

Facebook官方Tutorial

React 入门实例教程

React 入门教程

SegmentFault 技术周刊系列文章

React+Ant.Design开发的SPA

React+reflux应用 IE8/9/10/11兼容实践

Make your React app work in IE8

Ant Design

Ant Design - PC端中后台框架

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

移动WEB调试利器 Rosin | Spirit

前端工程化

技术周刊 Vol.3 - 前后端分离与前端工程化

fis3

fis3 - 百度出品的前端工程构建系统

Webpack

入门Webpack，看这篇就够了

webpack 从入门到上线

webpack多页应用架构系列（一）：一步一步解决架构痛点

How-To: Integrate Webpack into Visual Studio 2015

WebPack Task Runner - Visual Studio Marketplace

接口测试

RAP：阿里巴巴团队的Web接口管理工具

理论升华

你应该知道的4种JavaScript设计模式

资源收集

JS库/插件

推荐轻量高效无依赖的开源JS插件和库

jQuery插件库

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 的迷你版本。

照片墙

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

Lazy Load, 延迟加载图片的 jQuery 插件

Validator

WLDragon/SMValidator

Progress Bar

NProgress.js

pace: An automatic web page progress bar

网页加载的进度条是什么原理？用javascript做。

error monitoring and analytics

Rollbar - Error Tracking

FunDebug - 全栈JavaScript错误监控

主题，UI，图标等视觉相关

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

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

Wiki系统

SmartWiki：国人出品的一款Wiki系统，从16年12月份开始开发，上次更新日期：2017年3月29日

前端安全

如何让前端更安全？——XSS攻击和防御详解

设计

网页设计

关键字：web design

站酷

交互设计&视觉设计的网站&书

LogoMoose

原型设计

知乎关键字：原型设计 → 精华内容

如何设计出色的网站后台原型？

如何快速学会 Axure 呢？

如何学习使用 Axure？