前端资源收集整理

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

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

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？