我的分享--web前端學習資源分享

時間 2019-11-05

標籤我的分享 web 前端學習資源欄目 HTML 简体版

原文原文鏈接

1.前言

6月份開始出沒社區，如今差很少9月了，按照工做的說法，就是差很少過了三個月的試用期，準備轉正了！通常來講，差很少到了轉正的時候，會進行總結或者分享會議！那麼今天我就把看過的一些學習資源（主要是博客，博文）推薦分享給你們。從我接觸前端的開始，到發稿時間截止的這段時間我看過不少的博客，開源項目也瞭解過一些，質量有良莠不齊（甚至還出現過廣告文，雞湯文）。但下面的推薦的博客，博文，項目或者其它資源都是我接觸過的。不敢說資源最好，最全，適合每個人，可是內容質量上讓我滿意的。可能有些資源我未必看完，看懂，看細。但我以爲是能夠幫到你們的，能讓你們提高技術水平的。但願能給你們起到一個引導，指路或者解惑的做用。若是你們有什麼好的資源，也歡迎分享！javascript

有一些資源連接，在後面我會加上括號的註釋！好比： 「 html5推廣（介紹html5開發的創意廣告） 」，我加上註釋的緣由可能有如下幾點：
1.資源很不錯，乾貨比較多，提醒你們看！
2.資源是一個系列的其中一個資源。好比一個系列有20多篇文章，每一篇都有用，我不可能把20多篇連接都貼上，因此通常我貼這個系列的第一條，提醒你們不要忘記讀完所在系列！
3.資源裏面的內容有些我我的以爲頗有用，有些我以爲沒什麼用！提醒你們挑着看，按需求看！
4.資源的標題可能會有些小誤導，或者資源的其它注意事項，我加以本身的解釋和備註。

2.推薦文章（教程）

jquery

jquery源碼分析
 jQuery中的100個技巧（譯）（看了這篇文章，感受本身學的是假jquery，不過不少技巧我沒有親身試過，保留意見）
這幾條JQuery提高性能的規則你須要牢記
 JQuery坑，說說哪些你們都踩過的坑（對於剛接觸的新人而言，這篇文章還有幫助）
jQuery學習筆記（總結性說明jquery經常使用的api，也不錯）
jQuery插件開發總結html5

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 源碼分析——邏輯梳理
 vue快速入門的三個小實例（我本身的文章，比較基礎的用法，以爲也還不錯，就放上來了）java

webpack

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

gulp

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

react

（react我剛接觸不久，暫時看過的網站就這兩個）
React中國
 React 技術棧系列教程
 React組件規範jquery

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

調試

分享幾個平常調試方法讓js調試更簡單
 用 Chrome 調試你的 JavaScript
JavaScript 中 console 的用法（看了這篇和上面一篇文章，你可能會感受之前根本不會使用console）

細節，優化

淺談移動前端的最佳實踐
 前端優化帶來的思考，淺談前端工程化
 前端優化實踐總結
 減小前端代碼耦合
 判斷單、多張圖片加載完成
 終端代碼重複率檢測
 【組件化開發】前端進階篇之如何編寫可維護可升級的代碼
 做爲一個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上值得關注的前端項目
 前端那點事兒（書列）
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

4.推薦書籍

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

關於看書的建議，下面的書，你們能夠根據本身的需求興趣去挑着看。一本書，不要看完就能夠了，要弄懂書中的內容。有些書值得你們來回看幾遍的！

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

《JavaScript高級程序設計》：（紅皮書或者紅寶石書）能夠做爲入門書籍，但同時也是高級書籍，能夠快速吸取基礎，等到提高再回來從新看
《JavaScript權威指南》：（犀牛書）能夠說是js最經典的一本書了，新手看着可能會有點吃力，可是對於學js的人來講，必備的，不理解的地方就去查閱一下，頗有幫助。
《數據結構與算法JavaScript描述》（刺蝟書）
《編寫可維護的JavaScript》（烏龜書）
《JavaScript DOM編程藝術第2版》
《JavaScript語言精粹》（蝴蝶書）：經典的書，也是普及JavaScript的開發思惟的一本書。
《JavaScript設計模式 》-張榕銘（百度員工寫的一本書，案例生動易懂，涉及的設計模式比較全）
《JavaScript設計模式與開發實踐》-曾琛（騰訊員工寫的一本書，講了js裏面更加經常使用的14個設計模式）
《單頁Web應用 JavaScript從前端到後端》
《ECMAScript 6 入門》能夠做爲es6新特性文檔的一本書，並且這本書開源了，直接看就好！須要的也能夠購買！
《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
webpack
d3
chart（和d3同樣，屬於數據可視化方面，體驗過。可是在項目上沒用過，感受功能強大，就推薦下）
element-ui（基於vue2.x開發的一個組件庫，通常用於後臺管理系統開發，如今咱們公司開發的後臺管理就是用這個）
muse-ui（一樣是基於vue的組件庫，ui很是的漂亮）
一塊兒學 Node.js
AlloyTeam移動端手勢解決方案
 frontend-dev-bookmarks（前端各方面的學習清單）
免費的編程中文書籍（中文分享書籍，不止前端，各方面都有，你們按需查看）
animate.css
hover.css
muse-ui（基於vue2.0的一個UI庫，樣式漂亮，種類全）
CSS3 實現各種3D效果的博客（和下面三個鏈接同屬一個做者，這個大牛的做品不錯，效果酷炫，雖然star數量與其它幾個推薦項目無法比，可是很值得推薦）
chokcoco/boomJS
chokcoco/magicCss
chokcoco/iCSS

梁少峯的我的博客（裏面的文章質量也不錯，各類都有，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.開發雜談

OpenDoc - 前端簡歷評級標準（美團出的一份簡歷評級，能夠適當參考下，對比下本身的實力和美團評級。固然有興趣的也能夠去面試）
前端代碼規範及最佳實踐
 Vue.js 很好，可是比 Angular 或 React 更好嗎？
聊聊技術選型 - Angular2 vs Vue2
寫給前端工程師看的，移動應用選型指南
 網站架構-從無到有
 前端架構那些事兒
 技術大牛養成指南，一篇不雞湯的成功學實踐
 6 個值得好好學習的 JavaScript 框架
 更快學習 JS 的 6 個簡單思惟技巧
 程序員怎麼學英語
 8個讓程序員追悔莫及的職業建議
 小心！程序員應警戒七種錯誤的職業規劃
 1024程序員節，寫給年輕程序員的建議
 給新程序員的10條建議
 前端框架這麼多，該何去何從？
2017年前端開發工具趨勢
 現代前端開發技術棧
 據說2017你想寫前端？
如何跟上前端開發的最新前沿
 前端開發人員必須瞭解的七大技能圖譜
 前端技能彙總（JacksonTian）
另外一張前端技能彙總圖（和上面的連接同樣，可是看的話，建議你們帶參考的思想看）
怎樣成長爲一個優秀的 Web 前端開發工程師？
月薪10-12k的前端人員應該具有怎樣一種技術水平？
做爲一名前端開發人員，有哪些值得一讀的js代碼？
hexo高階教程：教你怎麼讓你的hexo博客在搜索引擎中排第一（有興趣的能夠看一下，有用）
開放源碼的法律面（由於國外對版權，許可證非常注重，該文章就講代碼開源後關於許可證的文章，看得我有點蒙，可是最終整理後，我之後的開源項目就用MIT）

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

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

11.小結

好了，我學前端看過的博客文章，關注過的大牛和項目，項目技術棧的教程基本都在這裏了！我分享的這些，不敢說最好，最全，適合每一個人。可是都是我看過或者接觸過的，至少內容上讓我滿意的，讓我以爲是對學習有用的，能幫到你們的。若是你們有什麼學習資源推薦的，我也但願你們不吝嗇的共享給我，給你們！
還有一個建議就是，學習web前端，上面分享的能夠起到一個引導，指路，解惑的做用。可是，你們不要忘記多練，畢竟實操最重要！你們有空餘的時間或者週末也能夠本身作下本身有興趣的項目，而且用在本身工做的項目開發上！項目不求比別人好，只求本身能練習，提高本身的技術水平！

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