平時上網有隨手收藏感興趣網站的習慣,上學的時候大部分收藏的都是游戲音樂電影不可描述之類的網站,工作之后反而全是技術學習資訊之類的了。前幾天整理瀏覽器書簽的時候,發現竟然有二百多個書簽了,而且一不小誤刪了幾十個恢復起來非常麻煩,于是覺得有必要換種方式記錄一下,同時精選一些覺得不錯的網站分享給有需要的同學。
文章(包括以往的文章)和瀏覽器導出的完整書簽放在github上以作備份,后面可能會更新添加新內容。
如果部分國外網站訪問不了的,請自行解決。
開發工具
平時工作開發時用到的一些輔助工具類網站
網址說明
regexr.com正則表達式驗證匹配
www.gitignore.io根據選擇生成.gitignore文件
unbug.github.io/codelf變量命名推薦(支持中文)
www.html.cn/tool/css3Pr…css box-shadow陰影預覽及代碼生成
www.internetke.com/jsEffects/2…css漸變預覽及代碼生成
xuanfengge.com/easeing/cea…css動畫緩動函數預覽及生成
www.toptal.com/developers/…多張圖片合成雪碧圖,并生成對應css
tool.lu眾多工具集合,包括時間戳轉換,進制轉換等
www.bootcdn.cn或cdn.baomitu.com國內的CDN庫,速度快
www.jsdelivr.com國外的cdn庫,支持github,npm,WordPress
在線編輯
代碼在線編輯運行
網址說明
jsrun.net國內網站,有代碼提示,支持cdn庫導入,不支持創建項目,有代碼示例市場。
jsbin.com國外網站,功能少,支持本地搭建
codepen.io國外網站,支持cdn庫導入,支持創建項目(非會員只支持一個項目),有大量豐富的代碼示例市場。
stackblitz.com國外網站,有代碼提示,支持npm,可以創建項目(默認創建類型沒有vue)。
codesandbox.io國外網站,支持npm和cdn庫導入,可以創建各種類型項目
編程題庫
通過刷題和編程訓練來提升編程思想
視頻教程
技術分享和教程視頻。
網址說明
Frontendmasters有很多大佬的課程,英語課程,英文字幕,少部分課程免費,大部分需要訂閱會員,費用較貴,可以等黑五打折時買年費。
Egghead英語課程,英文字幕。
IT大咖說國內技術大會分享錄像為主。
慕課國內網站,免費課挺多,實戰課付費,按課付費,價格偏貴。(其他如騰訊課堂,網易云課堂等都差不多一個路數)
Udemy網站有中文語言和中文課程,大部分英文課程也有中文字幕,按課收費,打折中的付費課程還算能接受。
可能看視頻更加清楚直觀,所以很多人都更喜歡看視頻,尤其是剛入門的時候。網上現在也有很多培訓機構的課程視頻,能找到了也可以看一看,但是進階時建議多看些國外視頻,拓寬下視野,順便練下英語能力。
上面大部分網站的視頻還是付費的,如果想看免費的視頻其實可以看youtube,上面技術分享的視頻也非常多,重點是都是免費的。
下面推薦幾個youtube的技術賬號,可以關注一下。
這只是我關注的一部分,還有非常多,大家可以自行探索。
文章資訊博客
學習技術,了解行業最新動態。
國內
百度 FEX(技術周刊還在更新)
奇舞周刊(建議公眾號訂閱)
國外
Devchat(音頻形式)
Medium(可訂閱郵件)
Dev(可訂閱郵件)
HTML5 Weekly(可訂閱郵件)
CSS Weekly(可訂閱郵件)
JavaScript Weekly(可訂閱郵件)
React Status(可訂閱郵件)
Ponyfoo(可訂閱郵件)
建議申請一個專門用來接收訂閱郵件的郵箱,因為會接收到大量郵件
問答論壇
開發中遇到問題,去這些地方就對了。
網站說明
知乎沒什么說的,有了知乎應該沒有人會再去用百度知道那垃圾東西了吧。
Segmentfault更專注技術問題。
Stack OverflowSegmentfault的外國原版,非常強大。
cnodejsnode社區
cnodejsreact社區
V2EX程序員的1024?
開源框架和庫的問題,去github上找到項目查詢issue通常都能找到解決方案。
github相關
畢竟全球最大同性交友平臺,上面牛逼的人和項目非常至多,除了輪子也有很多教程,這里推薦一些對前端學習有幫助的項目。
項目名說明
30-seconds-of-code短小精悍的工具函數,有中文版。
Front-end-Developer-Interview-Questions前端面試題整理,有中文版,沒答案。
front-end-interview-handbook前端面試手冊,有中文版,帶答案。
Front-End-Checklist前端開發清單
javascript-algorithmsjs算法和數據結構
33-js-concepts前端開發需要掌握的33個概念,有中文版。
awesome-javascriptjavascript資源列表,有中文版。
nodebestpracticesnode最佳實踐列表,有中文版。
在github上,awesome-*相似名稱可以找到其他類似項目,比如node資源列表awesome-node,react資源列表awesome-react。
學習的時候不建議以面試題為主,不容易形成體系。
最后
這里整理的網站,是我比較常看的,一些久未更新的就沒有列出來,而且可能會遺漏一些網站,如果大家還有其他優秀的學習網站也可以評論分享出來,希望這些網站能夠大家的學習和平時開發帶來幫助。