Web前端從入門菜鳥到實踐老司機所須要的資料與指南合集

Web前端從入門菜鳥到實踐老司機所須要的資料與指南合集歸屬於筆者的Web 前端入門與最佳實踐。在本文中筆者儘可能以入門級介紹爲主，若是對於某方面知識點想深刻了解，能夠參考筆者的對應的知識點系列文章。若是您有其餘的Web方面的資料/課程等推薦，歡迎指教，本文會保持持續更新。
本文僅表明我的看法，如有點評不周之處望及時告知。歡迎轉載，註明出處。

Introduction & Overview:入門與概覽

歡迎來到，前端世界！

• 2016 - 對於將來五年內Web發展的7個預測

• 2015 - 個人前端之路:從命令式到響應式，以及組件化與工程化的變革

• 怎麼成爲一名優秀的軟件工程師

• GUI應用程序架構的十年變遷:MVC,MVP,MVVM,Unidirectional,Clean:十年前，Martin Fowler撰寫了GUI Architectures一文，至今被奉爲經典。本文所談的所謂架構二字，核心便是對於對於富客戶端的代碼組織/職責劃分。縱覽這十年內的架構模式變遷，大概能夠分爲MV與Unidirectional兩大類，而Clean Architecture則是以嚴格的層次劃分獨闢蹊徑。從筆者的認知來看，從MVC到MVP的變遷完成了對於View與Model的解耦合，改進了職責分配與可測試性。而從MVP到MVVM，添加了View與ViewModel之間的數據綁定，使得View徹底的無狀態化。最後，整個從MV到Unidirectional的變遷便是採用了消息隊列式的數據流驅動的架構，而且以Redux爲表明的方案將本來MV*中碎片化的狀態管理變爲了統一的狀態管理，保證了狀態的有序性與可回溯性。

Tutorials

• MDN:Mozilla 開發者網絡（MDN）提供有關開放網絡技術（Open Web）的信息，包括HTML、CSS 和萬維網及HTML5 應用的API。很是權威與詳細的各類語法細節介紹，必看首推。

• How-To-Become-A-Great-Front-End-Engineer:如何成爲一名偉大的前端工程師

• 專治前端焦慮的學習方案

• Frontend-Guidelines-Questionnaire:一個單頁的問卷能幫助你的團隊創建高效一直的前端指南。

• 四分鐘交互式地瞭解Web設計基本規範:從零開始設計得體的我的網站

Playground / StartKits

• 在線編譯:CodePen、JSFiddle、RunJS:這些網站爲咱們提供了能夠在線編輯HTML/CSS/JavaScript與即時預覽的工做臺。同時，在這些網站上也沉澱了大量優秀的代碼片與示例，筆者就常常在CodePen上欣賞各類神奇的動畫效果。
  。

Resources:綜合

Collections:資源彙總帖

• MyBridge蒐集的一系列面向Web開發者有用的書籍

• Frontend-Dev-Resources:一系列關於前端的會議

• 關於前端面試相關的資源整理:整理一下最近在網上收集的前端面試相關資料，包括預備知識、書籍、面試考點、面經等。前端方面資料其實太多太多，就光從知乎、前端亂燉、w3cplus 等網站就能找到不少，因此針對細節不發散，僅挑一些內容豐富的合集，更多的資料能夠從其中找到。

• Update-To-Date Frontend Technologies:保持更新的前端最新的資料、博客、工具集合。

Books & Serials:書籍與系列文章

• 2016 - JavaScript Stack From Scratch【Series】:從零開始的經常使用JavaScript前端框架開發棧教程

• 2015 - SurviveJS 【Book】:基於React與Webpack構建一個看板應用程序來說解Webpack/React技術棧的知識要點

• 2016 - 阮一峯 全棧工程師培訓材料【Series】:全棧工程師培訓材料，幫助學習者掌握全棧開發的基本知識，承擔簡單 Web 應用的先後端開發

Courses:教程

• FreecodeCamp: FreecodeCamp是一個很是偉大的項目，其致力於提供優秀的免費教程與練習示範，目前其在前端方面已經累計了數百小時的課程，同時其也包含了數據可視化、後端開發等等。
  

• 實驗樓-Web專區

Blogs & Forums:博客與論壇

企業

• 百度:百度前端學院，百度FEX技術週刊

• 阿里:阿里-AMFE

• 騰訊:AlloyTeam

英文

• RisingStack Engineering:一系列關於JavaScript與NodeJS的博客，筆者感受其在NodeJS方面行文仍是很深刻的

中文

• [王下邀月熊 - 前端系列博客]():筆者本身的博客，不斷完善中，放在這裏純屬私心，不能和下面的相提並論。筆者本身以爲行文卻是其次，筆者一直主張要創建屬於本身的完善的知識體系。

• 前端外刊評論:關注前端前沿技術，探尋業界深邃思想 qianduan.guru。

• 奇舞週刊:匯聚前端精華，每週五更新的週刊，內容尚可。

• [前端之巔公衆號]():按期推送的前端文章，有精品也有套文。

• Div.io:文章更新不是很快，不過也有很多的好文章。

• Fouber-系列博客

• JSFront:JS前端開發羣月報，由豪情等人維護。

Tools:工具

• Can I Use:CAN I USE，相信每一個前端同窗都不陌生，查詢瀏覽器兼容性的利器。

• JSHint:一個在線JS檢測工具，能夠檢測JavaScript代碼中的錯誤和潛在問題。

• Javascript-Obfuscate:一個在線混淆工具，經過先進的算法，來混淆你的JavaScript代碼，使其不可讀。該工具還能夠減少文件的大小，以便快速加載。

• Best CSS Button Generator:網站主要提供各類按鈕的CSS代碼，你能夠從預設的按鈕中選擇並使用模板用於本身的設計，還能夠查看源代碼，很是適合學習。

• Chrome Tools 介紹:個人 Chrome 插件集、私人珍藏的Chrome插件，吐血推薦、前端程序員必知的30個Chrome擴展、Dev Tips（講了不少Chrome開發技巧）、Chrome控制檯實用指南、Chrome 實用調試技巧

• 配色類網站，爲設計師提供不少配色方案與建議:ColorHunt、Adobe Color Wheel、ColorHunter、BootCSS WebSafeColors

• 圖標類網站:阿里巴巴圖標庫:IconFont、IconSearch

• CSS屬性生成工具:Box Shadow Generator、Gradient Generator 、Ultimate CSS Gradient Generator 、CSS3 Generator。

仰望星空

• JS1K:大名鼎鼎的js1K，1K字節之內的Javascript代碼，實現一個酷炫的動畫、特效、小遊戲之類的。官網從2010年開始徵集參賽做品，如今已經辦了７年了，還在辦。

Syntax:基礎語法

HTML

CSS

• 若是你以爲CSS很是簡單那麼看看這些啪啪打臉的:If CSS is so easy why does everyone suck?

• 語法速查工具:CSS屬性指引，免費的可視化CSS各個屬性效果展現

BestPractices

• CSS Styleguide:20個編寫現代CSS代碼的建議，瞅瞅Facebook是怎麼保證CSS代碼質量的，提高你的CSS姿式

JavaScript

• 我應該從哪一門編程語言上車? :這裏有你學習JavaScript的理由。

• 廖雪峯JavaScript教程:介紹了基礎的語法與API。

• JavaScript 標準參考教程（alpha） -阮一峯:阮一峯老師出品，至關完善與成體系，也是以基礎語法與API爲主。

• 2015 - Speaking JavaScript【Book】:Dr. Axel出品的詳細JavaScript基礎語法的書籍。

• 2015 - You-Dont-Know-JS【Series】:告訴你關於許多你並不知道的JS知識

ES6/ES7專區

• 中文教程:阮一峯 ECMAScript 6 入門、30分鐘掌握ES6/ES2015核心內容（上）

• 語法規範手冊:EcmaScript6 全規範（含node） -ouvens、ES2015規範 英文

• 2015 - Setting Up ES6【Book】:Dr. Axel出品的介紹如何搭建ES6開發環境的書籍。

• 2015 - Exploring ES6【Book】 & 2015 - ES2016&ES2017【Book】:Dr. Axel出品的詳細的ES6的語法介紹書籍。

Practices & Tips:實戰與提升

• JavaScript設計模式：JavaScript 設計模式 系列 AlloyTeam，Addy Osmani 編寫的 2015 - Learn JavaScript Design Patterns【Book】學習常見的JavaScript設計模式，本書不只僅闡述JavaScript語言自己的常見設計模式，還結合了DOM&jQuery介紹了一些經常使用的界面上的設計模式

• Effective JavaScript:68 Specific Ways to Harness the Power of JavaScript，中文譯本在Effective JavaScript

• 代碼性能:2016:編寫高性能的JavaScript、[]()

StyleGuides:樣式與風格

DOM

Advanced

StateManagement:狀態管理

• Web開發中所謂狀態淺析:Domain State&UI State

• 思考:我須要怎樣的前端狀態管理工具?

Browser:瀏覽器

Engine

Electron

• Electron 概述與初探

• Hokein編輯的Electron示範項目

• 基於Electron的OSX下桌面OCR應用:Cute OCR Toolkits For OSX, Based On Electron,React&Tesseract

Headless Browser

PhantomJS

Selenium

JSDOM

Render:渲染

• 瀏覽器工做原理:瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕、瀏覽器工做原理、從輸入 URL 到頁面加載完成的過程當中都發生了什麼事情？

• 網頁渲染:CSDN-開發者應該知道的有關於網頁渲染的事、JS必定要放在Body的最底部麼？聊聊瀏覽器的渲染機制

• 高性能JavaScript重排與重繪

• how-browsers-work

• the-rendering-process-of-a-web-page

• 渲染性能

• 應該知道的前端性能二三事：Reflow 和 Repaint

Framework:經常使用框架

• JavaScripting:一個蒐集全部的優秀JavaScript前端庫以及對其打分評比的網站

View

React

• 博客與論壇:PureRender，知乎專欄，分享關於 React 相關經驗及發展動態， React入門與最佳實踐系列總綱【Series】。

• 入門學習:使用Facebook的create-react-app快速構建React開發環境，React開發中經常使用的工具集錦。

• 腳手架與實戰:在重構腳手架中掌握React/Redux/Webpack2基本套路。

• React 設計思想與理念:React 概念模型——脫離React談談它的設計思想。

• React RoadMap:React的將來特性 。

• React StyleGuide:如何寫出漂亮的React組件。

StateManagement

Redux

• 博客與論壇:Redux 入門與最佳實踐系列總綱【Series】。

• 最佳實踐:深刻理解Redux:10個來自專家的Redux實踐建議 。

Utils:輔助工具

jQuery

• 你應該知道的jQuery的小技巧:介紹一系列jQuery使用的小技巧。

• You-Dont-Need-jQuery:前端發展很快，現代瀏覽器原生 API 已經足夠好用。咱們並不須要爲了操做 DOM、Event 等再學習一下 jQuery 的 API。同時因爲 React、Angular、Vue 等框架的流行，直接操做 DOM 再也不是好的模式，jQuery 使用場景大大減小。本項目總結了大部分 jQuery API 替代的方法，暫時只支持 IE10+ 以上瀏覽器。

NodeJS

• 一塊兒學NodeJS【Series】:使用 Express + MongoDB 搭建多人博客

• 我在閱讀NodeJS文檔中讀出的19個套路

Builder

Webpack

• 中文教程:Webpack傻瓜式指南，Webpack 中文指南 -趙達

Career & Interview:工做與面試

• Front-end-Developer-Interview-Questions:H5BP出品的一系列的前端問題

• Cracking-The-Front-End-Interview:解決你的前端面試，中文譯本爲解決你的前端面試