Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集
tuweijie
7年前
<h2><strong>Introduction & Overview:入门与概览</strong></h2> <p>欢迎来到，前端世界！</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/6342c62e9d557cc8cad3f894762937e6.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959727137639823710" rel="nofollow,noindex">2016 – 对于未来五年内Web发展的7个预测</a></li> <li><a href="/misc/goto?guid=4959727137730393730" rel="nofollow,noindex">2015 – 我的前端之路:从命令式到响应式，以及组件化与工程化的变革</a></li> <li><a href="/misc/goto?guid=4959727137809769542" rel="nofollow,noindex">怎么成为一名优秀的软件工程师</a></li> <li><a href="/misc/goto?guid=4959727137890477452" rel="nofollow,noindex">GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean</a> :十年前，Martin Fowler撰写了GUI Architectures一文，至今被奉为经典。本文所谈的所谓架构二字，核心即是对于对于富客户端的代码组织/职责划分。纵览这十年内的架构模式变迁，大概可以分为MV 与Unidirectional两大类，而Clean Architecture则是以严格的层次划分独辟蹊径。从笔者的认知来看，从MVC到MVP的变迁完成了对于View与Model的解耦合，改进了职责分配与可测试性。而从MVP到MVVM，添加了View与ViewModel之间的数据绑定，使得View完全的无状态化。最后，整个从MV 到Unidirectional的变迁即是采用了消息队列式的数据流驱动的架构，并且以Redux为代表的方案将原本MV*中碎片化的状态管理变为了统一的状态管理，保证了状态的有序性与可回溯性。</li> </ul> <h2><strong>Tutorials</strong></h2> <ul> <li><a href="/misc/goto?guid=4959638397124781500" rel="nofollow,noindex">MDN</a> :Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括HTML、CSS 和万维网及HTML5 应用的API。非常权威与详细的各种语法细节介绍，必看首推。</li> <li><a href="/misc/goto?guid=4958964860877794086" rel="nofollow,noindex">How-To-Become-A-Great-Front-End-Engineer</a> :如何成为一名伟大的前端工程师</li> <li><a href="/misc/goto?guid=4959727138032995222" rel="nofollow,noindex">专治前端焦虑的学习方案</a></li> <li><a href="/misc/goto?guid=4959727138114187294" rel="nofollow,noindex">Frontend-Guidelines-Questionnaire</a> :一个单页的问卷能帮助你的团队建立高效一直的前端指南。</li> <li><a href="/misc/goto?guid=4959727138188851359" rel="nofollow,noindex">四分钟交互式地了解Web设计基本规范:从零开始设计得体的个人网站</a></li> </ul> <h2><strong>Playground / StartKits</strong></h2> <ul> <li style="text-align: center;"> <p>在线编译: <a href="/misc/goto?guid=4958539547061522984" rel="nofollow,noindex">CodePen</a> 、 <a href="/misc/goto?guid=4958187755802852921" rel="nofollow,noindex">JSFiddle</a> 、 <a href="/misc/goto?guid=4959727138347198814" rel="nofollow,noindex">RunJS</a> :这些网站为我们提供了可以在线编辑HTML/CSS/JavaScript与即时预览的工作台。同时，在这些网站上也沉淀了大量优秀的代码片与示例，笔者就经常在CodePen上欣赏各种神奇的动画效果。</p> <img src="https://simg.open-open.com/show/96c3099a7e52918472d940c50c95ae41.jpg"></li> </ul> <h2><strong>Resources:综合</strong></h2> <h2><strong>Collections:资源汇总帖</strong></h2> <ul> <li><a href="/misc/goto?guid=4959727138432843542" rel="nofollow,noindex">MyBridge搜集的一系列面向Web开发者有用的书籍</a></li> <li><a href="/misc/goto?guid=4959727138518204418" rel="nofollow,noindex">Frontend-Dev-Resources</a> :一系列关于前端的会议</li> <li><a href="/misc/goto?guid=4959727138605729285" rel="nofollow,noindex">关于前端面试相关的资源整理</a> :整理一下最近在网上收集的前端面试相关资料，包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多，就光从知乎、前端乱炖、w3cplus 等网站就能找到很多，所以针对细节不发散，仅挑一些内容丰富的合集，更多的资料可以从其中找到。</li> <li><a href="/misc/goto?guid=4959727138679125662" rel="nofollow,noindex">Update-To-Date Frontend Technologies</a> :保持更新的前端最新的资料、博客、工具集合。</li> </ul> <h2><strong>Books & Serials:书籍与系列文章</strong></h2> <ul> <li><a href="/misc/goto?guid=4959727138765143187" rel="nofollow,noindex">2016 – JavaScript Stack From Scratch【Series】</a> :从零开始的常用JavaScript前端框架开发栈教程</li> <li><a href="/misc/goto?guid=4959727138846416596" rel="nofollow,noindex">2015 – SurviveJS 【Book】</a> :基于React与Webpack构建一个看板应用程序来讲解Webpack/React技术栈的知识要点</li> <li><a href="/misc/goto?guid=4959725824653375002" rel="nofollow,noindex">2016 – 阮一峰 全栈工程师培训材料【Series】</a> :全栈工程师培训材料，帮助学习者掌握全栈开发的基本知识，承担简单 Web 应用的前后端开发</li> </ul> <h2><strong>Courses:教程</strong></h2> <ul> <li><a href="/misc/goto?guid=4959727138958042456" rel="nofollow,noindex">FreecodeCamp</a> : FreecodeCamp是一个非常伟大的项目，其致力于提供优秀的免费教程与练习示范，目前其在前端方面已经累计了数百小时的课程，同时其也包含了数据可视化、后端开发等等。<br> <img src="https://simg.open-open.com/show/51254eb05e6a67e9707f738498366927.png"></li> </ul> <p> </p> <ul> <li> <p><a href="https://www.shiyanlou.com/courses/?course_type=all&tag=Web" rel="nofollow,noindex">实验楼-Web专区</a></p> </li> </ul> <h2><strong>Blogs & Forums:博客与论坛</strong></h2> <h3><strong>企业</strong></h3> <ul> <li>百度: <a href="/misc/goto?guid=4959643071438847487" rel="nofollow,noindex">百度前端学院</a> ， <a href="/misc/goto?guid=4959727139149712341" rel="nofollow,noindex">百度FEX技术周刊</a></li> <li>阿里: <a href="/misc/goto?guid=4959727139222856018" rel="nofollow,noindex">阿里-AMFE</a></li> <li>腾讯: <a href="/misc/goto?guid=4958531634572379649" rel="nofollow,noindex">AlloyTeam</a></li> </ul> <h3><strong>英文</strong></h3> <ul> <li><a href="/misc/goto?guid=4959727139334070469" rel="nofollow,noindex">RisingStack Engineering</a> :一系列关于JavaScript与NodeJS的博客，笔者感觉其在NodeJS方面行文还是很深入的</li> </ul> <h3><strong>中文</strong></h3> <ul> <li>[王下邀月熊 – 前端系列博客]():笔者自己的博客，不断完善中，放在这里纯属私心，不能和下面的相提并论。笔者自己觉得行文倒是其次，笔者一直主张要建立属于自己的完善的知识体系。</li> <li><a href="/misc/goto?guid=4959727139419809458" rel="nofollow,noindex">前端外刊评论</a> :关注前端前沿技术，探寻业界深邃思想 qianduan.guru。</li> <li><a href="/misc/goto?guid=4959719448830326640" rel="nofollow,noindex">奇舞周刊</a> :汇聚前端精华，每周五更新的周刊，内容尚可。</li> <li>[前端之巅公众号]():定期推送的前端文章，有精品也有套文。</li> <li><a href="/misc/goto?guid=4959642387042633823" rel="nofollow,noindex">Div.io</a> :文章更新不是很快，不过也有不少的好文章。</li> <li><a href="/misc/goto?guid=4958966223470525728" rel="nofollow,noindex">Fouber-系列博客</a></li> <li><a href="/misc/goto?guid=4959727139586340035" rel="nofollow,noindex">JSFront</a> :JS前端开发群月报，由豪情等人维护。</li> </ul> <h2><strong>Tools:工具</strong></h2> <ul> <li><a href="/misc/goto?guid=4958186269869097639" rel="nofollow,noindex">Can I Use</a> :CAN I USE，相信每个前端同学都不陌生，查询浏览器兼容性的利器。</li> <li><a href="/misc/goto?guid=4958344667731310613" rel="nofollow,noindex">JSHint</a> :一个在线JS检测工具，可以检测JavaScript代码中的错误和潜在问题。</li> <li><a href="/misc/goto?guid=4959727139717954236" rel="nofollow,noindex">Javascript-Obfuscate</a> :一个在线混淆工具，通过先进的算法，来混淆你的JavaScript代码，使其不可读。该工具还可以减小文件的大小，以便快速加载。</li> <li><a href="/misc/goto?guid=4958966255840819640" rel="nofollow,noindex">Best CSS Button Generator</a> :网站主要提供各种按钮的CSS代码，你可以从预设的按钮中选择并使用模板用于自己的设计，还可以查看源代码，非常适合学习。</li> <li>Chrome Tools 介绍: <a href="/misc/goto?guid=4959727139837859389" rel="nofollow,noindex">我的 Chrome 插件集</a> 、 <a href="/misc/goto?guid=4959727139921195346" rel="nofollow,noindex">私人珍藏的Chrome插件，吐血推荐</a> 、 <a href="/misc/goto?guid=4958984466229038250" rel="nofollow,noindex">前端程序员必知的30个Chrome扩展</a> 、 <a href="/misc/goto?guid=4958979021085260418" rel="nofollow,noindex">Dev Tips（讲了很多Chrome开发技巧）</a> 、 <a href="/misc/goto?guid=4959727140057902696" rel="nofollow,noindex">Chrome控制台实用指南</a> 、 <a href="/misc/goto?guid=4959727140133532172" rel="nofollow,noindex">Chrome 实用调试技巧</a></li> <li>配色类网站，为设计师提供很多配色方案与建议: <a href="/misc/goto?guid=4958967220335236439" rel="nofollow,noindex">ColorHunt</a> 、 <a href="/misc/goto?guid=4959727140249140793" rel="nofollow,noindex">Adobe Color Wheel</a> 、 <a href="/misc/goto?guid=4958185463688758256" rel="nofollow,noindex">ColorHunter</a> 、 <a href="/misc/goto?guid=4958185463688758256" rel="nofollow,noindex">BootCSS WebSafeColors</a></li> <li>图标类网站: <a href="/misc/goto?guid=4959727140466034894" rel="nofollow,noindex">阿里巴巴图标库:IconFont</a> 、 <a href="/misc/goto?guid=4959727140546752991" rel="nofollow,noindex">IconSearch</a></li> <li>CSS属性生成工具: <a href="/misc/goto?guid=4959727140625688836" rel="nofollow,noindex">Box Shadow Generator</a> 、 <a href="/misc/goto?guid=4958832271723769955" rel="nofollow,noindex">Gradient Generator</a> 、 <a href="/misc/goto?guid=4958319088114399412" rel="nofollow,noindex">Ultimate CSS Gradient Generator</a> 、 <a href="/misc/goto?guid=4959727140761011985" rel="nofollow,noindex">CSS3 Generator</a> 。</li> </ul> <h2><strong>仰望星空</strong></h2> <ul> <li><a href="/misc/goto?guid=4959549070814565417" rel="nofollow,noindex">JS1K</a> :大名鼎鼎的js1K，1K字节以内的Javascript代码，实现一个酷炫的动画、特效、小游戏之类的。官网从2010年开始征集参赛作品，现在已经办了７年了，还在办。</li> </ul> <h2><strong>Syntax:基础语法</strong></h2> <h2><strong>HTML</strong></h2> <h2><strong>CSS</strong></h2> <ul> <li>如果你觉得CSS非常简单那么看看这些啪啪打脸的: <a href="/misc/goto?guid=4959727140871337246" rel="nofollow,noindex">If CSS is so easy why does everyone suck?</a></li> <li>语法速查工具: <a href="/misc/goto?guid=4958877710394763278" rel="nofollow,noindex">CSS属性指引</a> ， <a href="/misc/goto?guid=4959727140986444539" rel="nofollow,noindex">免费的可视化CSS各个属性效果展示</a></li> </ul> <h3><strong>BestPractices</strong></h3> <ul> <li>CSS Styleguide: <a href="/misc/goto?guid=4959727141057680910" rel="nofollow,noindex">20个编写现代CSS代码的建议</a> ， <a href="/misc/goto?guid=4959727141144944632" rel="nofollow,noindex">瞅瞅非死book是怎么保证CSS代码质量的</a> ， <a href="/misc/goto?guid=4959727141222298412" rel="nofollow,noindex">提升你的CSS姿势</a></li> </ul> <h2><strong>JavaScript</strong></h2> <ul> <li><a href="/misc/goto?guid=4959727141306523108" rel="nofollow,noindex">我应该从哪一门编程语言上车?</a> :这里有你学习JavaScript的理由。</li> <li><a href="/misc/goto?guid=4959719447505646500" rel="nofollow,noindex">廖雪峰JavaScript教程</a> :介绍了基础的语法与API。</li> <li><a href="/misc/goto?guid=4958870312253630531" rel="nofollow,noindex">JavaScript 标准参考教程（alpha） -阮一峰</a> :阮一峰老师出品，相当完善与成体系，也是以基础语法与API为主。</li> <li><a href="/misc/goto?guid=4959727141435487025" rel="nofollow,noindex">2015 – Speaking JavaScript【Book】</a> :Dr. Axel出品的详细JavaScript基础语法的书籍。</li> <li><a href="/misc/goto?guid=4958870941163577084" rel="nofollow,noindex">2015 – You-Dont-Know-JS【Series】</a> :告诉你关于许多你并不知道的JS知识</li> </ul> <h3><strong>ES6/ES7专区</strong></h3> <ul> <li>中文教程: <a href="/misc/goto?guid=4959717926812528180" rel="nofollow,noindex">阮一峰 ECMAScript 6 入门</a> 、 <a href="/misc/goto?guid=4959727141581672696" rel="nofollow,noindex">30分钟掌握ES6/ES2015核心内容（上）</a></li> <li>语法规范手册: <a href="/misc/goto?guid=4959727141660474263" rel="nofollow,noindex">EcmaScript6 全规范（含node） -ouvens</a> 、 <a href="/misc/goto?guid=4958968604374563640" rel="nofollow,noindex">ES2015规范 英文</a></li> <li><a href="/misc/goto?guid=4959727141771382402" rel="nofollow,noindex">2015 – Setting Up ES6【Book】</a> :Dr. Axel出品的介绍如何搭建ES6开发环境的书籍。</li> <li><a href="/misc/goto?guid=4959727141852605528" rel="nofollow,noindex">2015 – Exploring ES6【Book】</a> & <a href="/misc/goto?guid=4959727141933936330" rel="nofollow,noindex">2015 – ES2016&ES2017【Book】</a> :Dr. Axel出品的详细的ES6的语法介绍书籍。</li> </ul> <h3><strong>Practices & Tips:实战与提高</strong></h3> <ul> <li>JavaScript设计模式： <a href="/misc/goto?guid=4959622448689468536" rel="nofollow,noindex">JavaScript 设计模式 系列 AlloyTeam</a> ， <a href="/misc/goto?guid=4959727142039652902" rel="nofollow,noindex">Addy Osmani</a> 编写的 <a href="/misc/goto?guid=4959673631001715107" rel="nofollow,noindex">2015 – Learn JavaScript Design Patterns【Book】</a> 学习常见的JavaScript设计模式，本书不仅仅阐述JavaScript语言本身的常见设计模式，还结合了DOM&jQuery介绍了一些常用的界面上的设计模式</li> <li><a href="/misc/goto?guid=4959727142147614837" rel="nofollow,noindex">Effective JavaScript</a> :68 Specific Ways to Harness the Power of JavaScript，中文译本在 <a href="https://github.com/dreamapplehappy/effective-javascript?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io" rel="nofollow,noindex">Effective JavaScript</a></li> <li>代码性能: <a href="/misc/goto?guid=4959727142306586046" rel="nofollow,noindex">2016:编写高性能的JavaScript</a> 、[]()</li> </ul> <h3><strong>StyleGuides:样式与风格</strong></h3> <h2><strong>DOM</strong></h2> <h2><strong>Advanced</strong></h2> <h2><strong>StateManagement:状态管理</strong></h2> <ul> <li><a href="/misc/goto?guid=4959727142386843222" rel="nofollow,noindex">Web开发中所谓状态浅析:Domain State&UI State</a></li> <li><a href="/misc/goto?guid=4959727142469669887" rel="nofollow,noindex">思考:我需要怎样的前端状态管理工具?</a></li> </ul> <h2><strong>Browser:浏览器</strong></h2> <h2><strong>Engine</strong></h2> <h3><strong>Electron</strong></h3> <ul> <li><a href="/misc/goto?guid=4959727142554875369" rel="nofollow,noindex">Electron 概述与初探</a></li> <li><a href="/misc/goto?guid=4959727142628579397" rel="nofollow,noindex">Hokein编辑的Electron示范项目</a></li> <li><a href="/misc/goto?guid=4959727142714744569" rel="nofollow,noindex">基于Electron的OSX下桌面OCR应用:Cute OCR Toolkits For OSX, Based On Electron,React&Tesseract</a></li> </ul> <h2><strong>Headless Browser</strong></h2> <h3><strong>PhantomJS</strong></h3> <h3><strong>Selenium</strong></h3> <h3><strong>JSDOM</strong></h3> <h2><strong>Render:渲染</strong></h2> <ul> <li>浏览器工作原理: <a href="https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io" rel="nofollow,noindex">浏览器的工作原理：新式网络浏览器幕后揭秘</a> 、 <a href="/misc/goto?guid=4959727142873255352" rel="nofollow,noindex">浏览器工作原理</a> 、 <a href="/misc/goto?guid=4958968905731854545" rel="nofollow,noindex">从输入 URL 到页面加载完成的过程中都发生了什么事情？</a></li> <li>网页渲染: <a href="/misc/goto?guid=4959727142985087706" rel="nofollow,noindex">CSDN-开发者应该知道的有关于网页渲染的事</a> 、 <a href="http://delai.me/code/js-and-performance/?utm_source=tuicool&utm_medium=referral" rel="nofollow,noindex">JS一定要放在Body的最底部么？聊聊浏览器的渲染机制</a></li> <li><a href="/misc/goto?guid=4959727143137142854" rel="nofollow,noindex">高性能JavaScript重排与重绘</a></li> <li><a href="/misc/goto?guid=4958190871573740318" rel="nofollow,noindex">how-browsers-work</a></li> <li><a href="/misc/goto?guid=4959727143251848619" rel="nofollow,noindex">the-rendering-process-of-a-web-page</a></li> <li><a href="https://github.com/sundway/blog/issues/2?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io" rel="nofollow,noindex">渲染性能</a></li> <li><a href="/misc/goto?guid=4959727143408111632" rel="nofollow,noindex">应该知道的前端性能二三事：Reflow 和 Repaint</a></li> </ul> <h2><strong>Framework:常用框架</strong></h2> <ul> <li><a href="/misc/goto?guid=4959661530837241858" rel="nofollow,noindex">JavaScripting</a> :一个搜集所有的优秀JavaScript前端库以及对其打分评比的网站</li> </ul> <h2><strong>View</strong></h2> <h3><strong>React</strong></h3> <ul> <li>博客与论坛: <a href="/misc/goto?guid=4959727143522035392" rel="nofollow,noindex">PureRender，知乎专栏，分享关于 React 相关经验及发展动态</a> ， <a href="/misc/goto?guid=4959727143592699471" rel="nofollow,noindex">React入门与最佳实践系列总纲【Series】</a> 。</li> <li>入门学习: <a href="/misc/goto?guid=4959727143677559396" rel="nofollow,noindex">使用非死book的create-react-app快速构建React开发环境</a> ， <a href="/misc/goto?guid=4959727143749068346" rel="nofollow,noindex">React开发中常用的工具集锦</a> 。</li> <li>脚手架与实战: <a href="/misc/goto?guid=4959727143835992503" rel="nofollow,noindex">在重构脚手架中掌握React/Redux/Webpack2基本套路</a> 。</li> <li>React 设计思想与理念: <a href="/misc/goto?guid=4959727143914670593" rel="nofollow,noindex">React 概念模型——脱离React谈谈它的设计思想</a> 。</li> <li>React RoadMap: <a href="/misc/goto?guid=4959727143998336531" rel="nofollow,noindex">React的未来特性</a> 。</li> <li>React StyleGuide: <a href="/misc/goto?guid=4959727144073238756" rel="nofollow,noindex">如何写出漂亮的React组件</a> 。</li> </ul> <h2><strong>StateManagement</strong></h2> <h3><strong>Redux</strong></h3> <ul> <li>博客与论坛: <a href="/misc/goto?guid=4959727144152426492" rel="nofollow,noindex">Redux 入门与最佳实践系列总纲【Series】</a> 。</li> <li>最佳实践: <a href="/misc/goto?guid=4959727144234941960" rel="nofollow,noindex">深入理解Redux:10个来自专家的Redux实践建议</a> 。</li> </ul> <h2><strong>Utils:辅助工具</strong></h2> <h3><strong>jQuery</strong></h3> <ul> <li><a href="/misc/goto?guid=4959675581689383945" rel="nofollow,noindex">你应该知道的jQuery的小技巧</a> :介绍一系列jQuery使用的小技巧。</li> <li><a href="/misc/goto?guid=4959727144335958327" rel="nofollow,noindex">You-Dont-Need-jQuery</a> :前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。</li> </ul> <h2><strong>NodeJS</strong></h2> <ul> <li><a href="/misc/goto?guid=4958875406971853814" rel="nofollow,noindex">一起学NodeJS【Series】</a> :使用 Express + MongoDB 搭建多人博客</li> <li><a href="/misc/goto?guid=4959727144445208932" rel="nofollow,noindex">我在阅读NodeJS文档中读出的19个套路</a></li> </ul> <h2><strong>Builder</strong></h2> <h3><strong>Webpack</strong></h3> <ul> <li>中文教程: <a href="/misc/goto?guid=4959727144541818921" rel="nofollow,noindex">Webpack傻瓜式指南</a> ， <a href="/misc/goto?guid=4959727144614039256" rel="nofollow,noindex">Webpack 中文指南 -赵达</a></li> </ul> <h2><strong>Career & Interview:工作与面试</strong></h2> <p style="text-align: center;"><img src="https://simg.open-open.com/show/a6adb6942e46b58ae178534b34298957.png"></p> <p style="text-align: center;"> </p> <ul> <li><a href="/misc/goto?guid=4959642376791997722" rel="nofollow,noindex">Front-end-Developer-Interview-Questions</a> :H5BP出品的一系列的前端问题</li> <li><a href="/misc/goto?guid=4959727144726772909" rel="nofollow,noindex">Cracking-The-Front-End-Interview</a> :解决你的前端面试，中文译本为 <a href="/misc/goto?guid=4959727144804860370" rel="nofollow,noindex">解决你的前端面试</a></li> </ul> <p> </p> <p>来自：http://web.jobbole.com/89188/</p> <p> </p>