本文包含了線上編譯，線上編輯、實用工具、視覺化工具、各種前端電子書等50多個網站，快放到你的收藏夾吃灰吧
如果你看到最後了，記得給我一個免費的贊哦
線上編譯（編輯）、playground
JS 程式碼混淆
嗯，優點是你可以用來給你的前端工程師好友搞惡作劇，缺點是隻能用一次
SCSS 轉 CSS 線上編譯
有時候寫一些比較複雜的 SCSS 邏輯時，遇到不生效的問題，可能需要看一下編譯出來的 CSS 程式碼是什麼樣的，以確認自己寫的 SCSS 程式碼是不是有問題，線上編譯可能是一種較為方便的方式
CSS 轉 SCSS
當你重構專案時，可能有用？除了轉 SCSS 還能轉 Less、Stylus 等，不過轉換後的風格可能跟你直接寫著不一致
TypeScript PlayGround
Typescript 官方提供的 TypeScript 線上除錯執行工具，如果你遇到了一些 TS 難題（或者一下 ts 程式碼的 demo），你可以到這個網站編寫出你的程式碼，然後將連結（程式碼改動會經過編碼後會被動態新增到當前 url 上）發給神通廣大的網友們，或者你的好友們，請他們幫你解決問題
除了這個，它還能將你寫的 ts 程式碼線上編譯成 js、.d.ts 等，更多的功能你去試一下就知道了
Vue PlayGround
輕量級的 vue3 playground，可以實時預覽效果，實時檢視編譯後的 js 程式碼（包括 ssr 的）和提取出的 css 程式碼
Vue3 Template Explorer
vue3 的模板解析工具，學習原始碼必備
Vue2 Template Explorer
v2.template-explorer.vuejs.org/
vue2 的模板解析工具，學習 vue3 原始碼的時候，可以與上面 v3 的解析工具一起結合起來看，看看變化、優化都在哪
抽象語法樹解析
js 的抽象語法樹線上解析工具，能讓你更好的理解 js，學習一些編譯工具必備
CodeSandBox
能快速搭建一個簡單的專案，線上執行，而且速度很快（你網快的前提下），你也可以用別人的模板來新建專案，複雜的專案它也 hold 的住，不用裝環境，線上擼程式碼，誰不愛呢
登入後雲端儲存專案，把連結分享給其他人就可以方便的檢視，提供 api 來讓你的應用擁有 在CodeSandBox中開啟 的能力
免費的！
還可以搜尋別人的寫好的 demo，你不知道一個庫怎麼用的時候，或有什麼技巧的時候，可以來搜搜看看，既可以看程式碼，又可以線上實時預覽，“CV 工程師必備”
CodePen
支援 HTML、CSS、JS，比 codesandbox 輕量，適合寫簡單的 demo
babel 線上編譯
你可以將各種版本的 js、ts 程式碼轉換成其他低版本的 js 程式碼
github1s
在 github 程式碼倉庫的路徑的 https://github 後面加個 1s，就能用編輯器模式看原始碼了，比直接在 github 中看方便多了
視覺化線上工具/其他線上工具
線上正規表示式視覺化
遇到一個複雜的正規表示式，你多看幾眼就可能會多掉幾根頭髮，但是有了它，你就可以很好的分析出這個正規表示式的用途了
線上 Postman
需要註冊哦
一直線上用一直爽
當然，有已經安裝的應用就不需要了
CSS3剪貼路徑（Clip-path）線上生成器工具
你想玩些花裡胡哨的樣式的時候必備，但是自己寫是不可能自己寫的，讓機器生成好自己再慢慢調吧
CSS 動畫
這個網站有一些炫酷的樣式和動畫效果，不過比較偏向國外的風格
Canvas 背景動畫（部落格可用）
你把這個裡面程式碼貼上出來，放到你的個人部落格中，就可以實現很炫酷的背景效果了！
缺點是，一般加了這個，膝上型電腦風扇就會呼嘯起來
這個網站裡面還有一些其他的工具，比如下面這個
線上程式碼主題配色工具
跟上面是同一個網站，你如果覺得自己編輯器的程式碼主題顏色不好看，那你可以用它來慢慢調
線上配色
如果你想搞一個自己的元件庫，網站，不知道配色的就可以自己來配色
相容性查詢 Can I Use
可以查詢一個 js api 或者 css 屬性的在各個瀏覽器的各個版本下的相容性，裡面還有 QQ 瀏覽器，UC 瀏覽器是最有趣的事
EventLoop 視覺化
前端小白理解 EventLoop 的利器
CSS 陰影生成器
box-shadow 是一個很神奇且有用的屬性，在這個網站可以生成需要的 box-shadow 程式碼
JSON 轉 TS 程式碼
十分有用，能提高你寫TS程式碼的效率，特別是需要定義介面的返回型別時，用它就是複製貼上了！
線上正規表示式測試
比起用線上工具測試正則，我更習慣直接在控制檯寫程式碼測試
CSS 程式碼生成
可以生成四種型別的 CSS 程式碼，漸變，陰影等
carbon
讓你的程式碼變的更美觀，自己寫文章或者論文都可以用這個工具來對自己的程式碼進行美化
框架/庫/工具 文件
UI庫
有贊 Vant
支援Vue3的Vant3：vant-contrib.gitee.io/vant/#/zh-CN
一款由有贊開發的移動端元件庫，目前支援 Vue2、Vue3、React，微信和支付寶小程式
這款元件庫一直以來都屬於比較好看的型別，其中的業務元件和有讚的業務相關，也比較契合商城（購物）類移動端應用
螞蟻集團 Ant Design
這款PC端元件庫文件中的設計原則寫的比較完善，並且每個元件都描述了 何時使用，讓你對“元件”有更深的認識
提供的設計資源更為完善
配套的有 中臺前端/設計解決方案 Ant Design Pro、Ant Design Pro Components、圖表 Ant Design Charts、和 Vue，Angular 版本的 Ant Design
Bootstrap
這個 UI 庫來自 Twitter 的成員，但是元件比較少，特點是提供了很多工具類；需要引入 JQuery，大部分互動還是需要自己處理
FlatUI 是基於 Bootstrap 開發的，樣式更好看了
Layui
JQuery 時代很好的 UI 庫，命令式 api，文件中有些示例沒有預覽
官網已經下線了，江湖再見，原官網（layui.com）
Material Design Angular
基於 Angular，沒用過，用過的朋友們評論一下呢
ElementUI
出自餓了麼前端團隊，學 Vue 的童鞋們必用的一款 UI 庫，支援 Vue2，也支援有 Angular 和 React 的版本，Element Plus 支援 Vue3
semi design
出自位元組跳動抖音前端與 UED 團隊，最近剛開源不久，持續關注
Taro UI
出自京東凹凸實驗室，基於 Taro，是一款跨端 UI 庫
Vuetify
出自一家全職開源企業 Vuetify
WeUI
微信官方的 UI 庫，天天用微信的你一定很熟悉
Ant Design Mobile
Ant Design 的手機版，舊版樣式一般般，文件體驗不是很好，新版樣式比較好，文件更新的也好用起來了
圖示庫
Font Awesome 中文網
IcoMoon
iconfont
IconPark
iconpark.oceanengine.com/official
JS 框架/庫
Vue
React
Angular
svelte
Taro
京東的跨端框架，支援 Vue2、Vue3、React
uni-app
出自 DCloud，基於 Vue 的跨端框架
Three.js
D3.js
一款很強大的基於 SVG 的視覺化圖形庫
Cocos
使用 Typescript 的跨平臺遊戲引擎
其他
ECMA 官方文件
VsCode 外掛開發中文文件
MDN Web中文技術文件
developer.mozilla.org/zh-CN/docs/…
菜鳥教程
W3C 參考手冊
你可以在下列網站找到更多
awesome list chinese
npm
github
線上書籍/文件
《ES6標準入門》阮一峰
《瀏覽器工作原理與實踐》
blog.poetries.top/browser-wor…
《深入淺出 webpack》
《程式碼隨想錄》
《現代 JavaScript 教程》
《前端進階之道》
《React 技術揭祕》
《Vue 技術揭祕》
ustbhuangyi.github.io/vue-analysi…
《TypeScript 入門教程》
《深入理解TypeScript》
《You-need-to-know-css》
《CSS Inspiration》
chokcoco.github.io/CSS-Inspira…
