我在整理瀏覽器書籤的時候發現很多以前收藏的網站、教程打不開了，有些甚至都還沒看過，非常可惜。所以想藉這次進行一個大整理，督促自己照著清單慢慢啃完，順便把自己收藏的一些不錯的內容分享出來。
由於我平時是寫 React 比較多，所以收藏的大部分都是 JS、TS 和 React 的資源，其他語言或框架的就比較少。若有推薦的學習資源也可以在評論區分享給我，一起交流。
本篇內容同步發布於 frontend-collection（Github 更新優先），所有排名不分先後順序。
Forum/Community
- 台灣大部分都是 FB 社團，我只放了我有加入的。
- 知乎也有滿多前端相關的文章，只是平台方向比較雜，文章質量參差不齊，所以就沒放了。
- CSDN 因為廣告太多、內容質量參差不齊，所以也沒放進來。
| 名稱 | 網址 | 語言 |
|---|---|---|
| iT邦幫忙 | https://ithelp.ithome.com.tw/ | 繁體中文 |
| Front-End Developers Taiwan | https://www.facebook.com/groups/f2e.tw/ | 繁體中文 |
| Vue.js Taiwan 台灣 | https://www.facebook.com/groups/vuejs.tw/ | 繁體中文 |
| JavaScript.tw | https://www.facebook.com/groups/javascript.tw/ | 繁體中文 |
| ReactJS.tw | https://www.facebook.com/groups/reactjs.tw/ | 繁體中文 |
| React Native Taiwan | https://www.facebook.com/groups/reactnativetw/ | 繁體中文 |
| Flutter Taiwan | https://www.facebook.com/groups/flutter.tw/ | 繁體中文 |
| Segmentfault | https://segmentfault.com/ | 簡體中文 |
| 稀土掘金 | https://juejin.cn/ | 簡體中文 |
| V2EX | https://www.v2ex.com/ | 簡體中文 |
| OSCHINA | https://www.oschina.net/ | 簡體中文 |
| 博客園 | https://www.cnblogs.com/ | 簡體中文 |
| InfoQ | https://www.infoq.cn/topic/1208 | 簡體中文 |
| Medium | https://medium.com/ | 英文 |
| Hacker News | https://news.ycombinator.com/news | 英文 |
| EchoJS | https://www.echojs.com/ | 英文 |
| Front-End front | https://frontendfront.com/ | 英文 |
| DEV Community | https://dev.to/ | 英文 |
| Hashnode | https://hashnode.com/ | 英文 |
| Quora | https://www.quora.com/ | 英文 |
| Stack Overflow | https://stackoverflow.com/ | 英文 |
Weekly/News
- 斷更超過一年的不會放進來。
- 有⭐標示的是我自己平時會看的。
BLOG
Tutorial
- 這部分的基本上都是我看過或者看完的，所以都很推薦，用❗表示基礎必讀。
Patterns & Cheat sheet
Interview
- 這部分的內容比較需要關注”時效性“，所以太多年沒更新的我就不會放在這。
- 用⭐標示的表示很推薦。
Inspiration
| 名稱 | 網址 | 備註 |
|---|---|---|
| Web/App/Email/Others 介面靈感 | https://uxchi.notion.site/881b4c0179a74935a3f607ad3521cdb5 | |
| CSS Inspiration — CSS 靈感 | https://csscoco.com/inspiration/#/ | |
| Dribbble | https://dribbble.com/ | 全世界設計師各式各樣的設計 |
| Mobbin | https://mobbin.com/browse/ios/apps | 找尋 UI 設計靈感 |
| Dark | https://www.dark.design/ | 暗色主題設計靈感參考 |
| Site inspire | https://www.siteinspire.com/ | 網站UI設計靈感 |
| App Fuel | https://www.theappfuel.com/ | APP UI/UX 靈感 |
| What Was IT | https://wwit.design/ | 韓國版Mobbin，分享韓國移動端UI設計靈感，所有應用程式均基於iPhone XS螢幕尺寸(375×812) |
| UXArchive | https://uxarchive.com/ | 世界流行的 APP UX 趨勢 |
Tools
| 名稱 | 網址 | 備註 |
|---|---|---|
| Tiny helpers | https://tiny-helpers.dev/ | 為網頁開發人員提供的免費單一用途線上工具的集合 |
| TableConvert | https://tableconvert.com/ | 將表格以各種格式互相轉換，網站中還有很多其他轉換工具。 |
| OKLCH Color Picker & Converter | https://oklch.com/ | oklch 小工具 |
| Is it down? | https://downforeveryoneorjustme.com/ | 用於檢查網站是對所有人關閉還是是你自己的問題。 |
| WeOCR | https://ocr.plantree.me/ocr | 線上的 OCR 工具，支持 jpg, png, bmp, tiff, webp, etc |
| examor | https://github.com/codeacme17/examor | AI 根據你的筆記為你出題，可用於複習。 |
| OpenResume | https://github.com/xitanggg/open-resume | 免費快速生成個人履歷。 |
| memos | https://github.com/usememos/memos | 私人的輕量級筆記工具，使用 Docker 部署。 |
| mess-reader | https://github.com/ppz-pro/mess-reader | 在線 epub 閱讀器。 |
| Runno | https://runno.dev/ | 可在網頁中嵌入可運行的程式碼片段，只需要編寫 HTML。 |
| DamnGood.Tools | https://damngood.tools/tools/chat-pdf | AI 可根據你上傳的 PDF 回答你的問題 |
| TinyPNG | https://tinypng.com/ | WebP, PNG, JPEG 圖片壓縮工具(一次最多20張，每張最大5MB)。 |
| picdiet | https://www.picdiet.com/zh-tw | 圖片壓縮工具。用 JS 演算法極速壓縮 80% 的圖片大小，而不損害其品質。 |
| blush | https://blush.design/zh-CN | 定製插圖工具，下載成 PNG, SVG，與 Figma, Sketch 集成。 |
| Gradienty | https://gradienty.codes/ | Tailwind 漸層產生器 |
| APIVault | https://apivault.dev/ | 公開 API 合集 |
| TDX運輸資料流通服務 | https://tdx.transportdata.tw/ | 台灣交通公開 API |
| I Don’t Care About Commit Message | https://github.com/mefengl/vscode-i-dont-care-about-commit-message | AI 生成 commit message 的 VSCode plugn |
| Algorithm Visualizer | https://algorithm-visualizer.org/ | 演算法視覺化工具 |
| CANINCLUDE | https://github.com/CyberLight/caninclude-v2 | HTML 標籤工具，檢查 A 標籤能不能放在 B 標籤之中，以及介紹標籤的用處、兼容性。 |
| Tailwind helper | https://www.tailwindhelper.com/?ref=producthunt | 透過 GUI 快速生成 Tailwind class。 |
| Developer Roadmaps | https://roadmap.sh/ | 開發者學習路線圖 |
