2020 - 2021 年 Web 前端最新導航

國慶這幾天，我收集了大量能夠顯著提高開發效率的前端導航連接。

這些導航連接對我頗有幫助，但願對你也是如此。

這些好用的導航連接都已經部署到這個網站  https://www.kwgg2020.com  上了，在這裏食用更美味哦。

★

筆者博客地址：https://github.com/biaochenxuying/blog

」

JavaScript

• JavaScript 教程^[1]
• ES6 入門教程^[2]
• JavaScript 30^[3] 使用原生 JavaScript 在 30 天內完成 30 個項目
• Codewars^[4] 和其餘人一塊兒完成真實的代碼挑戰，提高你的技術
• JavaScript 教程^[5] 現代 JavaScript 教程
• 優秀的JS代碼規範^[6]
• 開發的寶藏項目^[7]
• TypeScript 教程：https://github.com/xcatliu/typescript-tutorial^[8]
• Node.js學習 https://blog.poetries.top/node-learning-notes/^[9]

CSS

• css的各類效果實現^[10] css的各類效果實現（尤爲是動畫效果）
• CSS Inspiration^[11] 在這裏找到寫 CSS 的靈感
• CSS 經常使用樣式^[12] 總結一些經常使用的 CSS 樣式
• Animate.css^[13] 開箱即用的跨瀏覽器 CSS 動畫效果
• animista^[14] 按需定製 CSS 動畫效果
• SpinKit^[15] 聚集了實現各類加載效果的 CSS 代碼片斷
• CSS Minifier^[16] 在線 CSS 代碼極簡化/壓縮工具
• https://sass.bootcss.com/documentation Sass 是成熟、穩定、強大的 CSS 擴展語言
• https://less.bootcss.com/ 一種將css賦予了動態語言特性的動態樣式語言
• https://stylus-lang.com/ 富有表現力、動態、健壯的CSS

算法

• JavaScript 算法與數據結構：https://github.com/trekhleb/javascript-algorithms^[17]

• leetcode解題之路：https://github.com/azl397985856/leetcode^[18]

• 五分鐘學算法：https://github.com/MisterBooo/LeetCodeAnimation^[19]

• LeetCode題目的思路 https://github.com/MisterBooo/LeetCodeAnimation^[20] 用動畫的形式呈現解LeetCode題目的思路。

• 極客時間 App 的《數據結構與算法之美》

• GitHub 上 170K+ Star 的前端學習的數據結構與算法項目 https://github.com/biaochenxuying/blog/issues/43

• JavaScript 數據結構與算法之美 - 十大經典排序彙總: https://github.com/biaochenxuying/blog/issues/42^[21]

• 算法可視化工具 https://github.com/algorithm-visualizer/algorithm-visualizer^[22] 算法可視化工具是一個交互式的在線平臺，能夠從代碼中可視化算法。

• 算法可視化來源 https://visualgo.net/en^[23]

• 觀察算法的工做方式 https://github.com/skidding/illustrated-algorithms^[24] 變量和操做的可視化表示加強了控制流和實際源代碼。

前端面試

• 前端面試常考問題整理，按模塊知識點分類：https://blog.poetries.top/FE-Interview-Questions/^[25]

• 前端開發面試題: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions^[26]

• web前端面試寶典：https://github.com/h5bp/Front-end-Developer-Interview-Questions/^[27]

• 掘金前端面試題合集：https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md^[28]

• 前端面試圖譜：https://yuchengkai.cn/docs/zh/^[29]

• GitHub 上 100K+ Star 的前端面試開源項目彙總 https://github.com/biaochenxuying/blog/issues/47

技術社區

• GitHub：https://github.com/^[30] 高質量的內容創做和分享平臺

• stackoverflow：https://stackoverflow.com/^[31] 一個回答技術問題的網站

• v2ex：https://www.v2ex.com/ 一個關於分享和探索的地方

• http://cnodejs.org/ Node.js專業中文社區

• https://www.smashingmagazine.com/ 一個web技術類的博客雜誌站點

• https://www.jstips.co/ 天天推出一個JS技巧的網站

• W3cplus：https://www.w3cplus.com/  是一個致力於推廣國內前端行業的技術博客

• 印記中文 - https://docschina.org/  印記中文是最權威是技術中文文檔社區

• 收集優質的中文前端博客：https://github.com/FrankFang/best-chinese-front-end-blogs^[37]

博客團隊

• 騰訊AlloyTeam：http://www.alloyteam.com/^[38]

• 騰訊社交用戶體驗ISUX：https://isux.tencent.com/^[39]

• 淘寶FED | 淘寶前端團隊：http://taobaofed.org/^[40]

• 阿里巴巴國際UED：http://www.aliued.com/^[41]

• 京東 | 凹凸實驗室：https://aotu.io/^[42]

• 餓了麼前端:https://zhuanlan.zhihu.com/ElemeFE^[43]

• 百度前端研發部FEX：http://fex.baidu.com/^[44]

• 360 | 奇舞團：https://75team.com/^[45]

• 美團技術團隊: https://tech.meituan.com/^[46]

GitHub 統計

• GitHub 中文排行榜、高分優秀中文項目：https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts^[47]

• GitHub 全球排名：https://gitstar-ranking.com/^[48] 這個排名很權威。若是你的項目超過 10k star，就能上榜，躋身全球 GitHub 項目前1000名。

構建

• NPM：https://www.npmjs.com/^[49]

• Yarn：https://yarnpkg.com/zh-Hans/^[50]

• Webpack：https://webpack.js.org/^[51]

• Gulp：https://www.gulpjs.com.cn/^[52]

• Babel：https://babeljs.io/^[53]

• ESLint：https://cn.eslint.org/^[54] 可組裝的JavaScript和JSX檢查工具。

• PostCSS：https://www.postcss.com.cn/^[55]  用 JavaScript 工具和插件轉換 CSS 代碼的工具

部署

• GitHub Pages^[56] GitHub 提供的免費靜態網站託管服務
• Netlify^[57] 30 秒內部署你的網站
• Vercel^[58] 快速部署你的網站
• Surge^[59] 只需一個命令就能夠發佈你的網站
• Heroku^[60] 在雲端構建、運行你的應用

靜態站點搭建工具

• Hexo：https://hexo.io/zh-cn/^[61]

• VuePress：https://www.vuepress.cn/^[62]

• GitBook：https://www.gitbook.com/^[63]

前端代碼規範

• 騰訊的 http://tgideas.qq.com/doc/index.html^[64]

• 京東的 https://guide.aotu.io/index.html^[65]

• Bootstrap編碼規範：https://codeguide.bootcss.com/^[66]

• es6編程風格：http://es6.ruanyifeng.com/#docs/style^[67]

• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript^[68]

• ESLint^[69] 檢測、修正 JavaScript 代碼的問題

• Prettier^[70] 格式化 JavaScript 代碼

調試抓包

• whistle：https://wproxy.org/whistle/^[71] 代理抓包工具，很好很強大。

• Fiddler：https://www.telerik.com/fiddler^[72] 代理抓包工具。

• Easy Mock：https://www.easy-mock.com^[73]

開發工具

• VS Code：https://code.visualstudio.com/^[74]

• Sublime Text：https://www.sublimetext.com/^[75]

• WebStorm：https://www.jetbrains.com/webstorm/^[76]

• Atom：https://atom.io/^[77]

在線工具

• CodePen - https://codepen.io/ 在線代碼測試工具

• Can I use - https://caniuse.com/ Web前端兼容性列表

• TinyPNG - https://tinypng.com/ PNG/JPG 圖片在線壓縮利器

• CNZZ站點統計 - https://www.umeng.com/ 國內經常使用的站點統計工具

前端大會

• Vue.js開發者大會  https://fequan.com/ Vue.js開發者大會中國

• 中國JS開發者大會 https://jsconfchina.com/  一場專一於JavaScript和Node.js技術的國際性大會

• 中國CSS開發者大會 https://css.w3ctech.com/ 提升css開發姿式的大會

• D2前端技術論壇 http://d2forum.alibaba-inc.com/  阿里巴巴舉辦，分享技術的樂趣，探討行業的發展

圖標

• Font Awesome：http://www.fontawesome.com.cn/^[78] 網站開發最流行的圖標集
• Feather^[79] 簡潔美觀的開源圖標
• Ionicons^[80] 精心繪製的開源圖標
• Simple Icons^[81] 常見品牌的 SVG 圖標
• Material Design Icons^[82] 輕快、精美的符號圖標，包括常見操做和事項
• Tabler Icons^[83] 681 枚可定製的開源 SVG 圖標

色彩

• Material Design Colors^[84] Material Design 色彩
• Flat UI Colors 2^[85] 14 組配色、280 種顏色
• Color Hunt^[86] 分享色彩搭配的自由開放平臺，包括成千上萬人工選取的配色，能夠從中獲取配色的靈感
• Color Space^[87] 配色方案、CSS 顏色漸變生成工具
• uiGradients^[88] 美觀的顏色漸變
• Colors and Fonts^[89] 色彩和字體工具
• Coolors^[90] 配色方案生成工具

插畫

• Undraw^[91] 持續更新的精美的 SVG 插畫集
• manypixels^[92] 免費插畫集
• IRA Design^[93] 經過調配漸變色、搭配手繪組件定製插畫
• Free Illustrations by Lukasz Adam^[94] 免費 SVG 插畫
• Blobmaker^[95] 在線 SVG 形狀生成器
• Get Waves^[96] 在線 SVG 波形生成器

圖片

• Unsplash^[97] 可供無償使用的圖片
• Pexels^[98] 精美的免費圖片和視頻
• Burst^[99] 免費高分辨率圖片，可用於網站和商業用途
• ISO Republic^[100] 使用 CC0 許可的免費高分辨率圖片和視頻
• Pixabay^[101] 使人驚歎的免費（公共領域）圖片和視頻站點
• StockSnap.io^[102] 精美的免費圖片，一樣使用 CC0 許可
• Photopea^[103] 在線圖片編輯工具，支持大量高級功能
• Online Image Compressor^[104] 在線圖片壓縮工具，一次能夠壓縮多達 20 張圖片
• Bulk Resize Photos^[105] 最快的在線圖片縮放工具（圖片縮放和壓縮在本地完成，無需上傳到服務器）

其餘

• 單元測試：https://github.com/goldbergyoni/javascript-testing-best-practices^[106]
• web.dev^[107] 評測網站性能（基於 Lighthouse）
• Shape Divider^[108] 定製各類形狀的網站分區 SVG 的工具
• GTmetrix^[109] 網頁性能分析工具
• Can I Use^[110] 前端技術的瀏覽器支持狀況
• Carbon^[111] 代碼轉圖片工具
• Wappalyzer^[112] 檢測某個網站使用的技術棧

設計工具

• 墨刀：原型設計工具。網址：https://modao.cc/^[113]

• 藍湖：一款產品文檔和設計圖的在線協做平臺。網址：https://lanhuapp.com^[114]

• PxCook（像素大廚）：高效易用的自動標註工具。軟件下載連接：https://www.fancynode.com.cn/pxcook^[115]

★

前端導航網站地址：https://www.kwgg2020.com

」

★

筆者博客地址：https://github.com/biaochenxuying/blog

」

參考資料

[1]

JavaScript 教程: https://wangdoc.com/javascript/

[2]

ES6 入門教程: https://es6.ruanyifeng.com/

[3]

JavaScript 30: https://javascript30.com/

[4]

Codewars: https://www.codewars.com/

[5]

JavaScript 教程: https://zh.javascript.info/

[6]

優秀的JS代碼規範: https://github.com/ryanmcdermott/clean-code-javascript

[7]

開發的寶藏項目: https://github.com/dexteryy/spellbook-of-modern-webdev

[8]

https://github.com/xcatliu/typescript-tutorial: https://github.com/xcatliu/typescript-tutorial

[9]

https://blog.poetries.top/node-learning-notes/: https://blog.poetries.top/node-learning-notes/

[10]

css的各類效果實現: https://lhammer.cn/You-need-to-know-css/#/zh-cn/

[11]

CSS Inspiration: https://github.com/chokcoco/CSS-Inspiration

[12]

CSS 經常使用樣式: https://github.com/QiShaoXuan/css_tricks

[13]

Animate.css: https://animate.style/

[14]

animista: http://animista.net/

[15]

SpinKit: https://tobiasahlin.com/spinkit/

[16]

CSS Minifier: https://cssminifier.com/

[17]

https://github.com/trekhleb/javascript-algorithms: https://github.com/trekhleb/javascript-algorithms

[18]

https://github.com/azl397985856/leetcode: https://github.com/azl397985856/leetcode

[19]

https://github.com/MisterBooo/LeetCodeAnimation: https://github.com/MisterBooo/LeetCodeAnimation

[20]

https://github.com/MisterBooo/LeetCodeAnimation: https://github.com/MisterBooo/LeetCodeAnimation

[21]

https://github.com/biaochenxuying/blog/issues/42: https://github.com/biaochenxuying/blog/issues/42

[22]

https://github.com/algorithm-visualizer/algorithm-visualizer: https://github.com/algorithm-visualizer/algorithm-visualizer

[23]

https://visualgo.net/en: https://visualgo.net/en

[24]

https://github.com/skidding/illustrated-algorithms: https://github.com/skidding/illustrated-algorithms

[25]

https://blog.poetries.top/FE-Interview-Questions/: https://blog.poetries.top/FE-Interview-Questions/

[26]

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions

[27]

https://github.com/h5bp/Front-end-Developer-Interview-Questions/: https://github.com/h5bp/Front-end-Developer-Interview-Questions/

[28]

https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md: https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md

[29]

https://yuchengkai.cn/docs/zh/: https://yuchengkai.cn/docs/zh/

[30]

https://github.com/: https://github.com/

[31]

https://stackoverflow.com/: https://stackoverflow.com/

[34]

https://www.zhihu.com/: https://www.zhihu.com/

[37]

https://github.com/FrankFang/best-chinese-front-end-blogs: https://github.com/FrankFang/best-chinese-front-end-blogs

[38]

http://www.alloyteam.com/: http://www.alloyteam.com/

[39]

https://isux.tencent.com/: https://isux.tencent.com/

[40]

http://taobaofed.org/: http://taobaofed.org/

[41]

http://www.aliued.com/: http://www.aliued.com/

[42]

https://aotu.io/: https://aotu.io/

[43]

https://zhuanlan.zhihu.com/ElemeFE: https://zhuanlan.zhihu.com/ElemeFE

[44]

http://fex.baidu.com/: http://fex.baidu.com/

[45]

https://75team.com/: https://75team.com/

[46]

https://tech.meituan.com/: https://tech.meituan.com/

[47]

https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts: https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts

[48]

https://gitstar-ranking.com/: https://gitstar-ranking.com/

[49]

https://www.npmjs.com/: https://www.npmjs.com/

[50]

https://yarnpkg.com/zh-Hans/: https://yarnpkg.com/zh-Hans/

[51]

https://webpack.js.org/: https://webpack.js.org/

[52]

https://www.gulpjs.com.cn/: https://www.gulpjs.com.cn/

[53]

https://babeljs.io/: https://babeljs.io/

[54]

https://cn.eslint.org/: https://cn.eslint.org/

[55]

https://www.postcss.com.cn/: https://www.postcss.com.cn/

[56]

GitHub Pages: https://pages.github.com/

[57]

Netlify: https://www.netlify.com/

[58]

Vercel: https://vercel.com/

[59]

Surge: https://surge.sh/

[60]

Heroku: https://www.heroku.com/

[61]

https://hexo.io/zh-cn/: https://hexo.io/zh-cn/

[62]

https://www.vuepress.cn/: https://www.vuepress.cn/

[63]

https://www.gitbook.com/: https://www.gitbook.com/

[64]

http://tgideas.qq.com/doc/index.html: http://tgideas.qq.com/doc/index.html

[65]

https://guide.aotu.io/index.html: https://guide.aotu.io/index.html

[66]

https://codeguide.bootcss.com/: https://codeguide.bootcss.com/

[67]

http://es6.ruanyifeng.com/#docs/style: http://es6.ruanyifeng.com/#docs/style

[68]

https://github.com/airbnb/javascript: https://github.com/airbnb/javascript

[69]

ESLint: https://eslint.org/

[70]

Prettier: https://prettier.io/

[71]

https://wproxy.org/whistle/: https://wproxy.org/whistle/

[72]

https://www.telerik.com/fiddler: https://www.telerik.com/fiddler

[73]

https://www.easy-mock.com: https://www.easy-mock.com/

[74]

https://code.visualstudio.com/: https://code.visualstudio.com/

[75]

https://www.sublimetext.com/: https://www.sublimetext.com/

[76]

https://www.jetbrains.com/webstorm/: https://www.jetbrains.com/webstorm/

[77]

https://atom.io/: https://atom.io/

[78]

http://www.fontawesome.com.cn/: http://www.fontawesome.com.cn/

[79]

Feather: https://feathericons.com/

[80]

Ionicons: https://ionicons.com/

[81]

Simple Icons: https://simpleicons.org/

[82]

Material Design Icons: https://material.io/resources/icons/

[83]

Tabler Icons: https://tablericons.com/

[84]

Material Design Colors: https://www.materialui.co/colors

[85]

Flat UI Colors 2: https://flatuicolors.com/

[86]

Color Hunt: https://colorhunt.co/

[87]

Color Space: https://mycolor.space/

[88]

uiGradients: http://www.uigradients.com/

[89]

Colors and Fonts: https://colorsandfonts.com/

[90]

Coolors: https://coolors.co/

[91]

Undraw: https://undraw.co/illustrations

[92]

manypixels: https://gallery.manypixels.co/

[93]

IRA Design: https://iradesign.io/gallery/illustrations

[94]

Free Illustrations by Lukasz Adam: https://lukaszadam.com/illustrations

[95]

Blobmaker: https://www.blobmaker.app/

[96]

Get Waves: https://getwaves.io/

[97]

Unsplash: https://unsplash.com/

[98]

Pexels: https://www.pexels.com/

[99]

Burst: https://burst.shopify.com/

[100]

ISO Republic: https://isorepublic.com/

[101]

Pixabay: https://pixabay.com/

[102]

StockSnap.io: https://stocksnap.io/

[103]

Photopea: https://www.photopea.com/

[104]

Online Image Compressor: https://imagecompressor.com/

[105]

Bulk Resize Photos: https://bulkresizephotos.com/en

[106]

https://github.com/goldbergyoni/javascript-testing-best-practices: https://github.com/goldbergyoni/javascript-testing-best-practices

[107]

web.dev: https://web.dev/measure/

[108]

Shape Divider: https://www.shapedivider.app/

[109]

GTmetrix: https://gtmetrix.com/

[110]

Can I Use: https://caniuse.com/

[111]

Carbon: https://carbon.now.sh/

[112]

Wappalyzer: https://www.wappalyzer.com/

[113]

https://modao.cc/: https://modao.cc/

[114]

https://lanhuapp.com: https://lanhuapp.com/

[115]

https://www.fancynode.com.cn/pxcook: https://www.fancynode.com.cn/pxcook