個人分享--web前端學習資源分享

1.前言

時間過得真快，轉眼間現在是2017年最後一個星期，而今天也是聖誕節，過幾天也是元旦了。每到年底，大家都習慣總結和分享，我也不例外。但是經歷，我之前已經發過了，那麼我今天就分享吧！把我接觸的一些資源分享給大家，算是送給大家的雙旦禮物吧！希望大家能夠從中獲取自己所需的資源。從我接觸前端的開始，到發稿時間截止的這段時間我看過很多的部落格，開源專案也瞭解過一些，質量有參差不齊（甚至還出現過廣告文，雞湯文），但下面的推薦的部落格，文章，專案或者其它資源都是我接觸過的。不敢說資源最好，最全，適合每一個人，但是內容質量上讓我滿意的。可能有些資源我未必看完，看懂，看細。但我覺得是可以幫到大家的，能讓大家提升技術水平的。希望能給大家起到一個引導，指路或者解惑的作用。如果大家有什麼好的資源，也歡迎分享！

有一些資源連結，在後面我會加上括號的註釋！比如：“ html5推廣（介紹html5開發的創意廣告） ”，加上註釋的原因可能有以下幾點：
1.資源很不錯，乾貨比較多，提醒大家看！
2.資源是一個系列的其中一個資源。比如一個系列有20多篇文章，每一篇都有用，我不可能把20多篇連結都貼上，所以一般我貼這個系列的第一條，提醒大家不要忘記讀完所在系列！
3.資源裡面的部分內容我個人覺得很有用，有部分我覺得沒什麼用！提醒大家挑著看，按需求看！
4.資源的標題可能會有些小誤導，或者資源的其它注意事項，我加以自己的解釋和備註。

2.推薦文章（教程）

typeScript

官網文件（ts的一個官方文件，寫得較好）

jquery

jquery原始碼分析
 jQuery中的100個技巧（譯）（看了這篇文章，感覺自己學的是假jquery，不過很多技巧我沒有親身試過，保留意見）
這幾條JQuery提升效能的規則你需要牢記
 JQuery坑，說說哪些大家都踩過的坑（對於剛接觸的新人而言，這篇文章還有幫助）
jQuery學習筆記（總結性說明jquery常用的api，也不錯）
jQuery外掛開發總結
 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 原始碼分析——邏輯梳理
 手把手教你擼個vue2.0彈窗元件
 深入淺出基於“依賴收集”的響應式原理
 Vue全家桶實踐專案總結
 vuex入門例項(1/3)
原創《vue2.0進階系列》教程目錄大全
 另闢蹊徑：vue單頁面，多路由，前進重新整理，後退不重新整理
 vuejsexamples（vue的各種demo，可能會有需要的需求）
vue快速入門的三個小例項（我自己的文章，比較基礎的用法，用三個小例項講解vue的入門，）
用vue開發一個所謂的數獨

webpack

（下面的文章，有些是webpack1.x和2.x的，考慮到現在已經更新到3.x了，大家看時候要注意區別）
webpack中文網
 webpack官方文件
 webpack使用優化（基本篇）
webpack常用功能介紹
 webpack 3 零基礎入門教程 #1 - 介紹（看了第一篇，不要忘記下面的，這個系列值得一看）
開發工具心得：如何 10 倍提高你的 Webpack 構建效率
 Webpack 大法之 Code Splitting
webpack多頁應用架構系列（一）：一步一步解決架構痛點（看了第一篇不要忘記剩下的，這個系列的文章不錯）

parcel

宣佈 Parcel：一個快速，零配置的 Web 應用打包工具
 前端構建工具吐槽與parcel極簡入門
 折騰記：Hello Parcel
從 webpack 到全面擁抱 Parcel #1 探索 Parcel（這篇應該會用後續內容，大家可以跟著學）

gulp

gulp詳細入門教程
 前端構建工具gulp的使用介紹及技巧
 gulp入門指南

react

（react我剛接觸不久，暫時看過的網站就這兩個）
React中國
 React 技術棧系列教程
 React元件規範在
 在 2017 年學習 React + Redux 的一些建議（中篇）
在 2017 年學習 React + Redux 的一些建議（下篇）
學習 React.js 比你想象的要簡單

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教程

除錯

web除錯優化-chrome開發者工具不完全指南
 分享幾個日常除錯方法讓js除錯更簡單
 用 Chrome 除錯你的 JavaScript
JavaScript 中 console 的用法（看了這篇和上面一篇文章，你可能會感覺以前根本不會使用console）
Chrome開發者工具系列
 Web 的現狀：網頁效能提升指南
 移動 Web 開發問題和優化小結
 前端優化不完全指南

細節，優化

淺談移動前端的最佳實踐
 前端優化帶來的思考，淺談前端工程化
 前端優化實踐總結
 減少前端程式碼耦合
 判斷單、多張圖片載入完成
 終端程式碼重複率檢測
 【元件化開發】前端進階篇之如何編寫可維護可升級的程式碼
 作為一個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上值得關注的前端專案（trigkit4大神審理的一份清單，裡面推薦的專案很多，大家可以按需所需）
前端那點事兒（書列）
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
Cherry's Blog
雅X共賞的前端技術部落格-前端路上

4.推薦書籍

我看過的書比較雜七雜八，與前端有關的，推薦的就是下面這些了！下面的書，我都看過，區別就在於有些我是整本都看完了(有些也來回看過幾次)，有些粗略的看了其中一部分（有些就看了幾頁）！

關於看書的建議，下面的書，大家可以根據自己的需求興趣去挑著看。一本書，不要看完就可以了，要弄懂書中的內容。有些書值得大家來回看幾遍的！

關於書的資源，下面的推薦的書（我看的是電子書）我都是從網上下載的。為避免侵權，我在這裡就不放資源的連結了！大家自行購買紙質書或者電子書，或者到網上找資源！

《JavaScript高階程式設計》：（紅皮書或者紅寶石書）可以作為入門書籍，但同時也是高階書籍，可以快速吸收基礎，等到提升再回來重新看
《JavaScript權威指南》：（犀牛書）可以說是js最經典的一本書了，新手看著可能會有點吃力，但是對於學js的人來說，必備的，不理解的地方就去查閱一下，很有幫助。
《資料結構與演算法JavaScript描述》（刺蝟書）
《編寫可維護的JavaScript》（烏龜書）
《JavaScript DOM程式設計藝術第2版》
《JavaScript語言精粹》（蝴蝶書）：經典的書，也是普及JavaScript的開發思維的一本書。
《javascript框架設計》（第二版）-司徒正美
《JavaScript設計模式》-張榕銘（百度員工寫的一本書，案例生動易懂，涉及的設計模式比較全）
《JavaScript設計模式與開發實踐》-曾琛（騰訊員工寫的一本書，講了js裡面更加常用的14個設計模式）
《單頁Web應用 JavaScript從前端到後端》
《ECMAScript 6 入門》可以作為es6新特性文件的一本書，而且這本書開源了（ECMAScript 6 入門），直接看就好！需要的也可以購買！

《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
parcel
webpack
d3
chart（和d3一樣，屬於資料視覺化方面，體驗過。但是在專案上沒用過，感覺功能強大，就推薦下）
element-ui（基於vue2.x開發的一個元件庫，一般用於後臺管理系統開發，現在我們公司開發的後臺管理就是用這個）
muse-ui（同樣是基於vue的元件庫，ui非常的漂亮）
一起學 Node.js（這個其實應該是node.js教程）
AlloyTeam移動端手勢解決方案
 frontend-dev-bookmarks（前端各方面的學習清單）
免費的程式設計中文書籍（中文分享書籍，不止前端，各方面都有，大家按需檢視）
animate.css
hover.css
muse-ui（基於vue2.0的一個UI庫，樣式漂亮，種類全）
CSS3 實現各類3D效果的部落格（和下面三個連線同屬一個作者，這個大牛的作品不錯，效果酷炫，雖然star數量與其它幾個推薦專案沒法比，但是很值得推薦）
chokcoco/boomJS
chokcoco/magicCss
chokcoco/iCSS
handtouch
awesome-vue
Electron
vue-skeleton-webpack-plugin
樑少峰的個人部落格（裡面的文章質量也不錯，各種都有，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.開發雜談

web前端--10個妨礙進步的學習方式
 前端入行兩年--教會了我這些道理
 關於IT培訓機構的個人看法
 OpenDoc - 前端簡歷評級標準（美團出的一份簡歷評級，可以適當參考下，對比下自己的實力和美團評級。當然有興趣的也可以去面試）
前端程式碼規範及最佳實踐
 Vue.js 很好，但是比 Angular 或 React 更好嗎？
聊聊技術選型 - Angular2 vs Vue2
寫給前端工程師看的，移動應用選型指南
 網站架構-從無到有
 前端架構那些事兒
 技術大牛養成指南，一篇不雞湯的成功學實踐
 6 個值得好好學習的 JavaScript 框架
 更快學習 JS 的 6 個簡單思維技巧
 程式設計師怎麼學英語
 8個讓程式設計師追悔莫及的職業建議
 當心！程式設計師應警惕七種錯誤的職業規劃
 1024程式設計師節，寫給年輕程式設計師的建議
 給新程式設計師的10條建議
 前端框架這麼多，該何去何從？
2017年前端開發工具趨勢
 現代前端開發技術棧
 聽說2017你想寫前端？
如何跟上前端開發的最新前沿
 前端開發人員必須瞭解的七大技能圖譜
 前端技能彙總（JacksonTian）
另一張前端技能彙總圖（和上面的一個連結一樣，但是看的話，建議大家帶參考的思想看）
怎樣成長為一個優秀的 Web 前端開發工程師？
月薪10-12k的前端人員應該具備怎樣一種技術水平？
作為一名前端開發人員，有哪些值得一讀的js程式碼？
不吹不黑聊聊前端框架--尤雨溪Live整理
 前端開發者指南（2017）
為什麼一些公司招前端不想要培訓班出來的人？
前端新人不容易
 現在Web前端是不是已經飽和了?
2017前端技術發展回顧
 hexo高階教程：教你怎麼讓你的hexo部落格在搜尋引擎中排第一（有興趣的可以看一下，有用）
開放原始碼的法律面（因為國外對版權，許可證很是注重，該文章就講程式碼開源後關於許可證的文章，看得我有點蒙，但是最終整理後，我的開源專案就用MIT）

10.開發經常會接觸的網站

MDN-web技術文件
 智圖_圖片壓縮線上工具_線上製作webp
多視通圖片轉換Base64
微信JS-SDK說明文件
 草料二維碼
 菜鳥教程
 w3cschool

11.小結

好了，我學前端看過的部落格文章，關注過的大牛和專案，專案技術棧的教程基本都在這裡了！我分享的這些，不敢說最好，最全，適合每個人。但是都是我看過或者接觸過的，至少內容上讓我滿意的，讓我覺得是對學習有用的，能幫到大家的。如果大家有什麼學習資源推薦的，我也希望大家不吝嗇的共享給我，給大家！

這篇文章，對於大家而言是一個資源的合集，但對於我而言，可能是一個分割線。發完2017最後一篇文章在以後我可能會在務實基礎的前提下，注重深入的探究，發的文章可能會比現在的文章深入，文章產量可能不會像現在這麼頻繁！

還有一個建議就是，學習web前端，上面分享的可以起到一個引導，指路，解惑的作用。但是，大家不要忘記多練，畢竟實操最重要！大家有空餘的時間或者週末也可以自己做下自己有興趣的專案，並且用在自己工作的專案開發上！專案不求比別人好，只求自己能練習，提升自己的技術水平！

-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣