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

時間 2019-11-09

標籤 web 前端入門菜鳥實踐司機須要資料指南合集欄目 HTML 简体版

原文原文鏈接

http://web.jobbole.com/89188/javascript

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:博客與論壇

企業

英文

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:狀態管理

Browser:瀏覽器

Engine

Electron

Headless Browser

PhantomJS

Selenium

JSDOM

Render:渲染

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+ 以上瀏覽器。