提高前端人效率的工具、網站和書籍
線上編譯（編輯）、playground
JS 程式碼混淆
嗯，優點是你可以用來給你的前端工程師好友搞惡作劇，缺點是隻能用一次
SCSS 轉 CSS 線上編譯
有時候寫一些比較複雜的 SCSS 邏輯時，遇到不生效的問題，可能需要看一下編譯出來的 CSS 程式碼是什麼樣的，以確認自己寫的 SCSS 程式碼是不是有問題，線上編譯可能是一種較為方便的方式
CSS 轉 SCSS
當你重構專案時，可能有用？除了轉 SCSS 還能轉 Less、Stylus 等，不過轉換後的風格可能跟你直接寫著不一致
TypeScript PlayGround
Typescript 官方提供的 TypeScript 線上除錯執行工具，如果你遇到了一些 TS 難題（或者一下 ts 程式碼的 demo），你可以到這個網站編寫出你的程式碼，然後將連結（程式碼改動會經過編碼後會被動態新增到當前 url 上）發給神通廣大的網友們，或者你的好友們，請他們幫你解決問題
除了這個，它還能將你寫的 ts 程式碼線上編譯成 js、.d.ts 等，更多的功能你去試一下就知道了
babel 線上編譯
你可以將各種版本的 js、ts 程式碼轉換成其他低版本的 js 程式碼
github1s
在 github 程式碼倉庫的路徑的 https://github 後面加個 1s，就能用編輯器模式看原始碼了，比直接在 github 中看方便多了
視覺化線上工具/其他線上工具
線上正規表示式視覺化
遇到一個複雜的正規表示式，你多看幾眼就可能會多掉幾根頭髮，但是有了它，你就可以很好的分析出這個正規表示式的用途了
線上 Postman
需要註冊哦
一直線上用一直爽
當然，有已經安裝的應用就不需要了
指令碼之家線上工具
Canvas 背景動畫
你把這個裡面程式碼貼上出來，放到你的專案中，就可以實現很炫酷的背景效果了！
缺點是，一般加了這個，膝上型電腦風扇就會呼嘯起來
這個網站裡面還有一些其他的工具，也可以試一試
線上配色
如果你想搞一個自己的元件庫，網站，不知道配色的就可以自己來配色
相容性查詢 Can I Use
可以查詢一個 js api 或者 css 屬性的在各個瀏覽器的各個版本下的相容性，裡面還有 QQ 瀏覽器，UC 瀏覽器是最有趣的事
JSON 轉 TS 程式碼
十分有用，能提高你寫TS程式碼的效率，特別是需要定義介面的返回型別時，用它就是複製貼上了！
CSS 程式碼生成
可以生成四種型別的 CSS 程式碼，漸變，陰影等
框架/庫/工具 文件
UI庫
有贊 Vant
支援Vue3的Vant3：vant-contrib.gitee.io/vant/#/zh-CN
一款由有贊開發的移動端元件庫，目前支援 Vue2、Vue3、React，微信和支付寶小程式
這款元件庫一直以來都屬於比較好看的型別，其中的業務元件和有讚的業務相關，也比較契合商城（購物）類移動端應用
螞蟻集團 Ant Design
這款PC端元件庫文件中的設計原則寫的比較完善，並且每個元件都描述了 何時使用，讓你對“元件”有更深的認識
提供的設計資源更為完善
Bootstrap
這個 UI 庫來自 Twitter 的成員，但是元件比較少，特點是提供了很多工具類；需要引入 JQuery，大部分互動還是需要自己處理
FlatUI 是基於 Bootstrap 開發的，樣式更好看了
Layui
JQuery 時代很好的 UI 庫，命令式 api，文件中有些示例沒有預覽
官網已經下線了，江湖再見，原官網（layui.com）
ElementUI
出自餓了麼前端團隊，支援 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/…
線上書籍/文件
《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…
