我们很多人总会有这样一个问题，就是喜欢收藏很多东西，自我安慰说等有时间了一定好好看，以至于网页收藏夹、微信收藏栏、百度网盘等处积累了太多资源，给人一种学富五车的样子，而只有自己才知道，被收藏的东西，真正看了多少，掌握了多少。
对于我本人来讲，可以毫不夸张的说，如果能将自己收藏的东西完全学习掌握，至少会是某个领域的专家，我想，对于大多说人来说，情况可能和我也有很大的相似之处。所以说，我们需要时刻激励自己，不能让类似“先收藏了，等以后有时间再看”这样的话语来腐蚀自己、消磨自己，最终让只是随手收藏而不去阅读成为一种习惯。
关于我的一些基本情况，有兴趣的可以看看我上次因为失眠，凌晨三四点发的提问，也请大家多提建议，多指教：诚意求教：关于前端/数据分析求职的一些问题

这篇文章将会持续更新，主要是分享我本人在学习过程中看过的一些好的资源、一些经验总结，希望能够和大家更多的交流，共同进步。
一些内容，可直接移步我的掘金社区收藏夹和segmentfault收藏夹。

学习网站和APP推荐

入门：

• 建议使用w3cschool和慕课网。
• 推荐理由：w3cschool提供的教程全面、基础，且每个知识点都通过在线编辑器内置了小案例，只需点击“尝试一下”，便可直接在线运行，也可以在里面对提供的代码进行更改编辑，形象直观的对知识点进行实践掌握，不用自己一个个去写demo，便捷高效。在首页“编程学院”里还提供了“编程实战训练”，用的是著名的freecodecamp的项目，通关可以申请证书。同时，w3cschool还提供了编程微课、代码实例、测验等等内容，不再赘述，大家可以自行体验，w3cschool也提供有手机客户端。这也算是我入门的网站之一，目前经验值榜第二，阅读、贡献值榜均前20（不过总感觉这个网站的贡献值榜有些虚，在上面提问回答也很慢）。
• 慕课网主要提供视频教程，同时，课程里也穿插有很多类似w3cschool的边学边练，也有手机客户端可供使用。

视频学习：

• 主推腾讯课堂、51CTO学院和网易云课堂，至于课程，可根据评价、热度等进行筛选。

零散阅读提高：

• 学习编程，就是一个随时随地，利用零散时间进行提高的过程，w3cschool手机APP可以满足零散时间的基础学习，掘金社区也有很多优质内容（有掘金手机客户端可供使用），这个社区的一大好处是你可以通过“标签管理”进入你想关注的领域，根据文章热度去选择阅读，好文无数，极力推荐掘金手机客户端。还有一个就是segmentfault，也就是你现在正在看文章的这个网站，我通常的做法是用微信打开思否阅读相关文章，很便捷，手机客户端目前做的还不够好。

好文推荐

• 好文推荐这一部分，我主要想把它用来分享自己阅读过的一些优质文章，力求通俗易懂的让每个人理解前端开发领域一些核心的、底层的东西，共同进步。【这一部分将持续更新】

HTML和CSS：

• 史上最全的前端资源大汇总：从HTML到JS，从jQuery到Vue，从node到PHP，从正则表达式到求职面试，可以说从类目上来看，应有尽有，不过似乎没有网络安全方面的内容。优点是多而全，缺点也是太多，有时间的可以慢慢看看，无时间可忽略，毕竟我觉得学习前端，需要利用的是零散时间。
• CSS 常见布局方式：虽说是常见布局方式，但是对传统布局方式（通过盒模型），使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）的布局没有过多的提及，重点讲了 flex 布局和 grid 布局，以及 CSS 常见的居中方式和两种经典的布局方式“圣杯布局”和“双飞翼布局”。笔者觉得文章开头的思维导图很是受用。
• 如何实现 font-size 的响应式：实现响应式布局的方式有很多，这一篇文章讲述了使用rem、calc等进行实现，比较通俗易懂，值得参考学习。

JavaScript：

• ECMAScript 6 入门：阮一峰老师的ES6入门，目前最好的ES6教材，没有之一。
• JavaScript八张思维导图：5年前端开发经验的前辈的实力总结，值得拜读，通过思维导图，可以更好的回忆知识，建立知识体系。
• JavaScript 开发人员需要知道的简写技巧：实用，有逼格，显水准的简写。
• js 深拷贝 vs 浅拷贝：文章主要讲了 js 的基本数据类型以及一些堆和栈的知识，以及什么是深拷贝、什么是浅拷贝，深拷贝与浅拷贝的区别，怎么进行深拷贝和浅拷贝。堆和栈是数据结构里面的内容。我相信，通过这篇文章，你一定能够真正理解深拷贝 和 浅拷贝。
• JS正则表达式完整教程：关于正则表达式，网上的资源很多，类似《正则表达式30分钟入门》等等，我认为这些都只是讲了正则表达式的用法，并不能让每个人完全理解和领会正则表达式，而这篇文章，我觉得算是目前我见到的最好的正则表达式教程了，没有之一。文章略长，作者在前三章详细而通俗的讲解了正则表达式的字符匹配、位置匹配、括号的作用这些其他教程中都存在的东西（但比其他教程更容易理解），第四章讲解了正则表达式回溯法原理，让你对正则表达式的匹配原理有更清晰的认识，加深对正则的理解与掌握；最后三章正则表达式的拆分、构建、编程则是真正让你学以致用，避免纸上谈兵。这篇教程虽略长，但是不可多得。我认为：关于正则表达式，这篇文章，就够了。
• JavaScript算法和数据结构：这个是GitHub上的项目，优点是对算法和数据结构讲的比较全面，图文并茂，缺点是很多是英文的，需要一定英语基础。
• this、apply、call、bind：如果对this、apply、call、bind还有疑问，你可以看看这个，作者解析的很具体很到位。
• 破解前端面试：闭包 DOM 如何搞定纸上代码环节：模拟真实面试环节，选择一个切入点，层层递进，详细解读。
• 几道高级前端面试题解析：这篇文章，将告诉你学习开发过程中， 0.1 + 0.2 != 0.3的原理，以及Event loop等内容。
• 比较 Angular、React、Vue 三剑客：如果学习过程中。你还在纠结 Angular、React、Vue 该学习哪个时，我建议你可以先看看这个。
• JavaScript、underscore、ES6等系列：GitHub上一个已经拥有近6000star，近1000fork的项目，主要包括JavaScript深入系列、JavaScript专题系列、ES6系列、React系列等，如果你愿意，你可以关注和学习。
• JavaScript收藏：这是我在掘金社区关于JavaScript的一些收藏，个人觉得，收藏的文章还是比较经典实用的，可以作为参考。

web前端攻击技术与防范：

笔者面试时曾被问到过这个问题，关于web前端攻击防范，我理解的思路就是：过滤、代理和转义。如果某个Web应用具备良好的安全性，那么再怎么用“不安全的AJAX”也削弱不了它的安全性，反之如果应用本身存在漏洞，不管用何种技术请求，它都是不安全的。具体可以参考下面这几篇文章：

• AJAX请求真的不安全么？谈谈Web安全与AJAX的关系
• 聊一聊WEB前端安全那些事儿：经典好文，从原理到实现，都有案例给出。
• SegmentFault 技术周刊 Vol.13 - Web 安全指南（下）：安全指南（上）就不要看了，安全指南（下）引用的这些文章值得一读。
• Web性能与安全：愿意的话，大家也可以看看我关于Web安全的一些收藏。

关于React

这月成功入职魔都某淘宝拍档公司，算是对自己一直以来自我学习的一种肯定吧。业界大多在谈，不会react就不好意说自己会前端，加之公司业务需要，也不得不选择对react这一前端高峰进行攀登，在这过程中，分享一些好的资源，共同学习进步。

• React 组件间通讯：淘宝前端团队关于React 组件间通讯的剖析，值得一看。
• 在开始React之前，你需要学好这些JavaScript
• React.js 小书：比官方文档更加简洁、易学的react、redux学习选择。
• Redux 中文文档：关于redux的学习，目前最好的教材，首推此中文文档。
• React 常见的面试题（在 React 里面，你可以知道也可以不知道的事, 但是你会发现他们确实很有用）

由于时间关系，内容推荐先做到这里，本文后续会持续更新优化，希望能够与大家多交流。第一次发专栏，问题很多，疏漏之处，请批评指正。