我的分享--web前端学习资源分享

1.前言

6月份开始出没社区，如今差很少9月了，按照工做的说法，就是差很少过了三个月的试用期，准备转正了！通常来讲，差很少到了转正的时候，会进行总结或者分享会议！那么今天我就把看过的一些学习资源（主要是博客，博文）推荐分享给你们。从我接触前端的开始，到发稿时间截止的这段时间我看过不少的博客，开源项目也了解过一些，质量有良莠不齐（甚至还出现过广告文，鸡汤文）。但下面的推荐的博客，博文，项目或者其它资源都是我接触过的。不敢说资源最好，最全，适合每个人，可是内容质量上让我满意的。可能有些资源我未必看完，看懂，看细。但我以为是能够帮到你们的，能让你们提高技术水平的。但愿能给你们起到一个引导，指路或者解惑的做用。若是你们有什么好的资源，也欢迎分享！

有一些资源连接，在后面我会加上括号的注释！好比： “ html5推广（介绍html5开发的创意广告） ”，我加上注释的缘由可能有如下几点：
1.资源很不错，干货比较多，提醒你们看！
2.资源是一个系列的其中一个资源。好比一个系列有20多篇文章，每一篇都有用，我不可能把20多篇连接都贴上，因此通常我贴这个系列的第一条，提醒你们不要忘记读完所在系列！
3.资源里面的内容有些我我的以为颇有用，有些我以为没什么用！提醒你们挑着看，按需求看！
4.资源的标题可能会有些小误导，或者资源的其它注意事项，我加以本身的解释和备注。

2.推荐文章（教程）

html(5)

后HTML5时代I
后HTML5时代II（简单粗暴的介绍html5的api，没什么废话）
html5推广（介绍html5开发的创意广告）
匠心打造canvas签名组件
HTML5/CSS3（汤姆大叔总结的html5和css3的新特性）
H5动画开发快车道
移动H5前端性能优化指南
玩转HTML5移动页面
HTML5 进阶系列：文件上传下载
HTML5 进阶系列：canvas 动态图表
HTML5 进阶系列：拖放 API 实现拖放排序（这个系列的文章都不错，值得你们一看）
H5动效的常见制做手法
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
打造高大上的Canvas粒子动画

css(3)

CSS3属性教程与案例分享（大漠的CSS3干货，进去里面能够逐个看，对css3的学习颇有用）
CSS3实现11种经典的CSS技术（大漠的CSS3经典实例干货，对css3的学习颇有用）
W3cplus demo（w3cplus的案例，很是值得一看）
强大的css3（归纳性的说明css3的新特性的一篇文章）
css3经典教程系列（不要忘记看完这个系列，文章都不错）
如何编写轻量级 CSS 框架
21条CSS高级技巧
原创：CSS3技术-雪碧图自适应缩放与精灵动画方案
Flex 布局教程：语法篇
Flex 布局教程：实例篇
奇妙的 CSS shapes(CSS图形)
使用CSS3制做各类形状的图形（转自others）
有趣的CSS题目（1）： 左边竖条的实现方法（看了第一篇，能够往下面看，总会会帮助的，不过这个网站有时候加载不出图片，若是加载不出图片，放弃仍是坚持，你们抓主意）
纯 CSS 实现波浪效果！
使用浏览器开发者工具检测CSS动画性能
搞定这些疑难杂症，向css3动画说yes
Effective前端1：能使用html/css解决的问题就不要使用JS
如何让你的动画更天然
css画图形
css各类鼠标效果
深刻了解 CSS3 新特性（也是归纳性的总结，这个系列值得推荐）
前端如何呼风唤雨
:after和:before炫酷用法总结
神奇的 conic-gradient 圆锥渐变
10 个优质的 CSS 与 JS LOGO 动画示例
被解放的GPU-提升CSS3性能
【项目总结】扯一扯电商网站前端css的总体架构设计（1）（看了第一篇，别忘了看下面的一个系列）
（如下几篇是我本身的文章，主要就是总结css3新特性，css3动画和过渡的实例，以为对你们也会有帮助的 (^__^)）
我的总结（css3新特性）
CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）
编写本身的代码库(css3经常使用动画的实现)

javascript

JavaScript核心概念概括整理（归纳性的说明js的一些核心概念）
从达标到卓越 —— API 设计之道
我眼中的 JavaScript 函数式编程
深刻理解JavaScript系列（汤姆大叔写的JavaScript系列，对学习和深刻js颇有用）
javascript组件化
如何写出小而清晰的函数？（JS 版）
javascript对象详解：__proto__和prototype的区别和联系
理清javascript中的面向对象（一）——原型继承（这个专栏（实用至上）文章质量不错，值得留意）
微前端-Javascript经常使用的设计模式详解
10 个你须要了解的最佳 javascript 开发实践
深刻理解javascript原型和闭包系列
JavaScript学习总结（一）基础部分（这个系列的文章不错，不要忘记看完这个系列不过你们得在发文章的专栏找下这个系列的文章，由于做者在这个专栏发文不是连着发一个系列，中间也夹杂着其它文章，不过也很好找。在这专栏（trigkit4）里面，即便不是这个系列的文章，我看过其中几篇，感受也很好，你们能够留意下）
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript（这个系列的教程不错，《JavaScript设计模式与开发实践》的笔记，这本书我也看过，这本书不错，做者整理总结得也不错，你们看完，收获很多）
JavaScript 函数式编程存在性能问题么？
如何让 JS 写得更漂亮
JS的平凡之路--学习人气眼中的效果（上）
你还在用for循环大法麽？
前端模板的原理与实现
只有20行Javascript代码！手把手教你写一个页面模板引擎
【教学向】150行代码教你实现一个低配版的MVVM库（1）- 原理篇
【教学向】150行代码教你实现一个低配版的MVVM库（2）- 代码篇（能够关注这篇文章对应的专栏，写得不错，不知道做者还会不会写下一篇）
如何按部就班、有效地学习JavaScript？
过目不忘JS正则表达式
JavaScript 进阶之深刻理解数据双向绑定
利用 JavaScript 数据绑定实现一个简单的 MVVM 库
正则表达式30分钟入门教程
如何监听页面 DOM 变更并高效响应
IntersectionObserver API 使用教程（利用这个API能够更简单的实现图片懒加载和其它事情，性能也更高）
（下面三个链接，是知乎上的几个话题，里面的回答质量良莠不齐，你们能够挑些高质量的回答看，绝对有帮助）
做为一名前端开发人员，有哪些值得一读的js代码？
JavaScript 有什么奇技淫巧？
用 JavaScript 能够作哪些有趣的事情？
（如下几篇是我本身的文章，前两篇主要是写js经常使用的一些小实例，虽然以为跟不少大牛的文章比起来有差距，可是我以为写得也不错，对你们也是有用，就贴上连接，最后一篇是关于我印象深入的面试题）
编写本身的代码库（javascript经常使用实例的实现与封装）
编写本身的代码库（javascript经常使用实例的实现与封装--续）
让我印象深入的javascript面试题

javascript(es6)

阮一峰 es6（能够看成es6文档用的在线书籍）
ES6 你可能不知道的事 - 基础篇
ES6 你可能不知道的事 - 进阶篇
30分钟掌握ES6/ES2015核心内容（简单粗暴介绍es6核心）
八段代码完全掌握 Promise
ECMAScript 6 新特性（总结性描写经常使用的es6新特性）

jquery

jquery源码分析
jQuery中的100个技巧（译）（看了这篇文章，感受本身学的是假jquery，不过不少技巧我没有亲身试过，保留意见）
这几条JQuery提高性能的规则你须要牢记
JQuery坑，说说哪些你们都踩过的坑（对于刚接触的新人而言，这篇文章还有帮助）
jQuery学习笔记（总结性说明jquery经常使用的api，也不错）
jQuery插件开发总结

vue

vue官网
Vue2.x踩坑与总结
Vue 中你不知道但却很实用的黑科技
一个栗子实践vue2.0与1.0的区别
我从未见过如此简洁易懂的Vue教程
vue-API（2.3版本的API大全）
Vue.js 插件开发详解
vue插件编写与实战（从开发到发布的一个流程，实例简单易懂）
使用 Vue.js 建立的 Calendar
加薪DAY10」Vue开源项目库汇总（杂七杂八的库都有，质量固然也是有高有低，你们挑着看。）
Vue.js 的实用技巧（一）(看了第一篇，别忘记剩下的)
深刻vue2.0底层思想--模板渲染
Vue.js——vue-router 60分钟快速入门
Vue2.1.7源码学习
剖析Vue实现原理 - 如何实现双向绑定mvvm
Vue.js入门（一）--MVVM框架理解
Vue2 源码分析——逻辑梳理
vue快速入门的三个小实例（我本身的文章，比较基础的用法，以为也还不错，就放上来了）

webpack

（下面的文章，有些是webpack1.x和2.x的，考虑到如今已经更新到3.x了，你们看时候要注意区别）
webpack中文网
webpack官方文档
webpack使用优化（基本篇）
webpack经常使用功能介绍
开发工具心得：如何 10 倍提升你的 Webpack 构建效率
Webpack 大法之 Code Splitting
webpack多页应用架构系列（一）：一步一步解决架构痛点（看了第一篇不要忘记剩下的，这个系列的文章不错）

gulp

gulp详细入门教程
前端构建工具gulp的使用介绍及技巧
gulp入门指南

react

（react我刚接触不久，暂时看过的网站就这两个）
React中国
React 技术栈系列教程
React组件规范

git

猴子都能懂的GIT入门
Git教程 - 廖雪峰的官方网站

browsersync

(Browsersync中文网 - 省时的浏览器同步测试工具)

node.js

使用npm - NodeSource的绝对入门指南
Node.js和npm - NodeSource中的Package.json的基础知识
配置.npmrc以获取最佳Node.js环境

Markdown

认识与入门 Markdown

yoeman

教你从零开始搭建一款前端脚手架工具

lodash

这是一个具备一致接口、模块化、高性能等特性的 JavaScript 工具库。
4.17.4版本

Fiddler

官网
Fiddler教程

调试

分享几个平常调试方法让js调试更简单
用 Chrome 调试你的 JavaScript
JavaScript 中 console 的用法（看了这篇和上面一篇文章，你可能会感受之前根本不会使用console）

细节，优化

浅谈移动前端的最佳实践
前端优化带来的思考，浅谈前端工程化
前端优化实践总结
减小前端代码耦合
判断单、多张图片加载完成
终端代码重复率检测
【组件化开发】前端进阶篇之如何编写可维护可升级的代码
做为一个web开发人员，哪些技术细节是在发布站点前你须要考虑到的
【单页应用】咱们该如何处理框架弹出层层级关系？
剥离模板代码加速Web页面加载
移动前端系列——移动页面性能优化
[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿

其它

socket.io 中文手册 socket.io 中文文档
WebSocket 与 Socket.IO
VR进化论|教你搭建通用的WebVR工程
RxJS 入门
deeplearn.js：浏览器端机器智能框架

分享和技能清单

鸡年大吉！继续前行的前端周刊（第十五期）
前端收藏夹（和上面那篇同样，都是别人的总结的，干货很多，可是‘前端收藏夹’，多是资源太多了，给个人感受也有点一股脑放资源的感受，只要是资源，都放进去，少部分资源质量有点低，建议你们带参考思想看）
移动web干货收藏夹
awesomes（前端一个巨大的资源库，里面的资源应有尽有）
知识库（拥有不少语言，框架，库的知识图谱，值得一看！能让你了解哪一个语言，框架，库所包含的知识点，每个知识点的详情讲解，也有栗子和文章，如：javascript知识图谱，html5知识图谱，react知识图谱）
前端资源分享
送给前端的你，推荐几篇前端汇总文章。 - 知乎专栏
前端面试问题合集（Front-end-Developer-Interview-Questions）
github上值得关注的前端项目
前端那点事儿（书列）
FPB 2.0：免费的计算机编程类中文书籍 2.0（迷渡大神分享的书籍，各种图书都有，也有前端的，你们能够挑着看）
腾讯 Web 工程师的前端书单
前端开发者手册
印记中文-手册（各类开发文档，webpack,vue,sass等）
（如下几个连接，不是文章，也不算问题吧，都是segmentfault官方举行的比赛，分享或者讨论的内容，在上面看大神的分享，代码，绝对有收获）
1024 HackGame 第四关面壁人这些题目是怎么想出来的？
把 SegmentFault 所有带回家 —— 码文章，送周边
官方送书活动第二弹 —— 增加姿式之SF喊你来谈开发
官方活动，深刻浅出之SF喊你来谈开发！一块儿来分享一下你的开发知识？
官方30行js比赛：30行js你能作出什么？
【官方比赛】社区 1111 秀代码，让你来秀让你飞！

3.推荐博客

团队博客

淘宝前端团队fed
阿里巴巴
百度前端团队
360奇舞团
奇舞团视频教程
京东设计体验部-凹凸实验室
腾讯网前端研发中心
腾讯alloyteam
腾讯前端IMWEB团队
腾讯前端IMWEB团队-github
腾讯游戏
新浪UED
大前端（饿了么）
（上面的团队博客，值得关注，博文内容质量很高，可是就是更新不频繁，下面的更新会比较多，质量也不错）
搜车大无线团队博客
极乐科技
IMWeb前端社区
爱前端-知乎专栏
前端杂货铺
前端外刊评论
前端解忧杂货铺
DDFE 技术周刊
前端之巅
Fed汇总

大牛博客

十年踪影
张鑫旭
阮一峰
叶小钗
司徒正美博客
廖雪峰
勾三股四
chokCoCo
chokCoCo-github

4.推荐书籍

我看过的书比较杂七杂八，与前端有关的，推荐的就是下面这些了！下面的书，我都看过，区别就在于有些我是整本都看完了(有些也来回看过几回)，有些粗略的看了其中一部分（有些就看了几页）！

关于看书的建议，下面的书，你们能够根据本身的需求兴趣去挑着看。一本书，不要看完就能够了，要弄懂书中的内容。有些书值得你们来回看几遍的！

关于书的资源，下面的推荐的书（我看的是电子书）我都是从网上下载的。为避免侵权，我在这里就不放资源的连接了！你们自行购买纸质书或者电子书，或者到网上找资源！

《JavaScript高级程序设计》：（红皮书或者红宝石书）能够做为入门书籍，但同时也是高级书籍，能够快速吸取基础，等到提高再回来从新看
《JavaScript权威指南》：（犀牛书）能够说是js最经典的一本书了，新手看着可能会有点吃力，可是对于学js的人来讲，必备的，不理解的地方就去查阅一下，颇有帮助。
《数据结构与算法JavaScript描述》（刺猬书）
《编写可维护的JavaScript》（乌龟书）
《JavaScript DOM编程艺术 第2版》
《JavaScript语言精粹》（蝴蝶书）：经典的书，也是普及JavaScript的开发思惟的一本书。
《JavaScript设计模式 》-张榕铭（百度员工写的一本书，案例生动易懂，涉及的设计模式比较全）
《JavaScript设计模式与开发实践》-曾琛（腾讯员工写的一本书，讲了js里面更加经常使用的14个设计模式）
《单页Web应用 JavaScript从前端到后端》
《ECMAScript 6 入门》能够做为es6新特性文档的一本书，并且这本书开源了，直接看就好！须要的也能够购买！
《HTML5移动Web开发实战》
《HTML5移动Web开发指南》
《HTML5 Canvas核心技术》：对于感觉canvas的魅力，使用，动画的实现，都很是有帮助。
《html5与css3权威指南 第三版》-陆凌牛，这本书貌似有同名的，注意做者，另外该书分上册和下册的。我当时看的是第二版，如今已经出了第三版就推荐第三版了。
《锋利的jquery》：我学jquery就是看这本书，这本书给我身边的同行印象不是很好，可是我感受不错，并且我学jquery就看了这一本书，就推荐这本了！
《了不得的Node js 将JavaScript进行到底》
《css揭秘》：看了这本书，我不再敢说本身会css了！里面不少都是你想不到的！

5.推荐社区

我推荐社区虽然有这么多个，可是我注册帐号而且活跃的只有两三个，其它的社区基本都是我在学习的时候偶然接触到的，而且以为不错的，因此也推荐下。至于你们想活跃哪几个社区，就看你们的选择了。若是你们有什么好的社区资源，也不妨推荐下！

github：这个起初我常常在上面找资源。可是没注册帐号，可是后来被老大催着注册，就去了。在里面能够阅读别人的代码，向你们学习！
segmentfault：我如今活跃的一个社区，主打问答，也有文章和讲堂，质量也很不错！
知乎：虽然不是单纯的IT社区，可是里面有不少大牛和高质量的专栏！
stackoverflow：一个问答社区，基本上各类问题都能在上面得到解答
w3cplus：一个前端学习的网站，里面的文章质量都挺不错的，特别是关于CSS(3)的
前端网
前端乱炖：一个前端文章分享的社区，有不少优秀文章
开发者头条
前端周刊
HTML5梦工场
毕业僧
慕课网（貌似如今不少视频收费了，之前我看的时候，基本都是免费的）
稀土掘金
汇智网

6.公众号

前端大全

segmentfault

前端之巅

前端早读课

W3cplus

稀土圈

（以上图片来源网络）

7.推荐关注项目

github上的项目

vue
react（我只接触过几回react，使用起来还不错，如今也正在学习）
gulp
webpack
d3
chart（和d3同样，属于数据可视化方面，体验过。可是在项目上没用过，感受功能强大，就推荐下）
element-ui（基于vue2.x开发的一个组件库，通常用于后台管理系统开发，如今咱们公司开发的后台管理就是用这个）
muse-ui（一样是基于vue的组件库，ui很是的漂亮）
一块儿学 Node.js
AlloyTeam移动端手势解决方案
frontend-dev-bookmarks（前端各方面的学习清单）
免费的编程中文书籍（中文分享书籍，不止前端，各方面都有，你们按需查看）
animate.css
hover.css
muse-ui（基于vue2.0的一个UI库，样式漂亮，种类全）
CSS3 实现各种3D效果的博客（和下面三个链接同属一个做者，这个大牛的做品不错，效果酷炫，虽然star数量与其它几个推荐项目无法比，可是很值得推荐）
chokcoco/boomJS
chokcoco/magicCss
chokcoco/iCSS

梁少峰的我的博客（里面的文章质量也不错，各类都有，js,jquery,vue,react,node.js等）
RxJs
deeplearn（谷歌出版，一个关于人工智能深度学习的框架，有兴趣能够看，我看了一会，没看懂）

（下面这两个是我本身的开发的项目，虽然跟其余项目比较欠缺火候，可是还不至于用不了或者拿不出手的地步，也算是个人一个小广告吧！(●'◡'●)）
ec-do（封装了平常开发经常使用的javascript实例，实例为平常开发经常使用的小实例，包括数组去重，打乱数组，字母大小写转换，cookie操做的封装等。）
ec-css（基于css3开发的代码库，包括平常使用的hover过渡效果，动画效果，以及预设动画）

其它推荐项目

腾讯css3 ui库
NEC : 更好的CSS样式解决方案（网易的一个css3解决方案，可是貌似挺旧了，不维护了，可是里面的案例你们能够参考，绝对有收获）

8.综合项目教程（学习实录）

使用node.js + socket.io + redis实现基本的聊天室场景
前端开发，从草根到英雄（第一部分）
前端开发，从草根到英雄（第二部分）
个人前端进阶之路（看着标题觉得是杂谈，实际上感受是一篇总结性文章，你们能够看下）
为你的移动页面寻找一丝新意——手机互动网页项目总结（上）
为你的移动页面寻找一丝新意——手机互动网页项目总结（下）
前端开发指南2017
【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！（看完别忘记下面的，是叶小钗大神仿智能社官网的实战）
基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.
发现最好的你-设计中如何打造最合适的组件
webpack+vue项目实战（一,搭建运行环境和相关配置）（我本身的文章，关于使用vue+webpack开发一个单页应用，一个后台管理系统的开发搭建，这个系列一共有五篇文章）

9.开发杂谈

OpenDoc - 前端简历评级标准（美团出的一份简历评级，能够适当参考下，对比下本身的实力和美团评级。固然有兴趣的也能够去面试）
前端代码规范及最佳实践
Vue.js 很好，可是比 Angular 或 React 更好吗？
聊聊技术选型 - Angular2 vs Vue2
写给前端工程师看的，移动应用选型指南
网站架构-从无到有
前端架构那些事儿
技术大牛养成指南，一篇不鸡汤的成功学实践
6 个值得好好学习的 JavaScript 框架
更快学习 JS 的 6 个简单思惟技巧
程序员怎么学英语
8个让程序员追悔莫及的职业建议
小心！程序员应警戒七种错误的职业规划
1024程序员节，写给年轻程序员的建议
给新程序员的10条建议
前端框架这么多，该何去何从？
2017年前端开发工具趋势
现代前端开发技术栈
据说2017你想写前端？
如何跟上前端开发的最新前沿
前端开发人员必须了解的七大技能图谱
前端技能汇总（JacksonTian）
另外一张前端技能汇总图（和上面的连接同样，可是看的话，建议你们带参考的思想看）
怎样成长为一个优秀的 Web 前端开发工程师？
月薪10-12k的前端人员应该具有怎样一种技术水平？
做为一名前端开发人员，有哪些值得一读的js代码？
hexo高阶教程：教你怎么让你的hexo博客在搜索引擎中排第一（有兴趣的能够看一下，有用）
开放源码的法律面（由于国外对版权，许可证非常注重，该文章就讲代码开源后关于许可证的文章，看得我有点蒙，可是最终整理后，我之后的开源项目就用MIT）

10.开发常常会接触的网站

MDN-web技术文档
智图_图片压缩在线工具_在线制做webp
多视通图片转换Base64
微信JS-SDK说明文档
草料二维码
菜鸟教程
w3cschool

11.小结

好了，我学前端看过的博客文章，关注过的大牛和项目，项目技术栈的教程基本都在这里了！我分享的这些，不敢说最好，最全，适合每一个人。可是都是我看过或者接触过的，至少内容上让我满意的，让我以为是对学习有用的，能帮到你们的。若是你们有什么学习资源推荐的，我也但愿你们不吝啬的共享给我，给你们！
还有一个建议就是，学习web前端，上面分享的能够起到一个引导，指路，解惑的做用。可是，你们不要忘记多练，毕竟实操最重要！你们有空余的时间或者周末也能够本身作下本身有兴趣的项目，而且用在本身工做的项目开发上！项目不求比别人好，只求本身能练习，提高本身的技术水平！

-------------------------华丽的分割线--------------------
想了解更多，关注关注个人微信公众号：守候书阁