---
# System prepended metadata

title: Ben筆記目錄

---

# Ben筆記目錄

[TOC]

## 個人連結
- [GitHub](https://github.com/ben0588)
- [個人網站(新)2025](https://nextjs-personal-site-pi.vercel.app/)
    - [個人網站(舊版):自動重導向到新網站](https://ben0588.github.io/PersonalWebsite/#/)
- Email：energy9527z@gmail.com
- HackMD 筆記轉換 Obsidian/Docusaurus  (*未完成)


## 學習目標目錄
1. [學習目標目錄 - 文字版](https://hackmd.io/6rwqPDPKShqxKPh5q9Sw5Q)
    - [2024年 代辦事項](https://hackmd.io/u2klXl9gR62QuADU0us9ZA) 
2. [**New* 學習計畫 - Notion 版](https://www.notion.so/14c6ce993e50801c9ecbd7bd1660baa5)
    - 此筆記包含 2024 年度計畫/中期年度計畫/未來學習計畫。
![image](https://hackmd.io/_uploads/ryUvvKB7ke.png)


## 專案製作紀錄
[個人 Notion 連結](https://www.notion.so/14c6ce993e508004a06fcb497c7c5fd5?v=918ebbf523da4276b0486b51aa969f0e)
    ![image](https://hackmd.io/_uploads/SkXprPrQyl.png)

## 讀書會紀錄
- [2023-六角-工程師體驗營-中1組-會後讀書會  (2023/6/19~8/07)](https://hackmd.io/O6DnQCz5TnaQ7W4Src4O2A)



## 未來進修與調整方向
### 工作提升
- 學好英文：
    - 英文是最應該學習的程式語言。
- 木桶原理：
    - 找到短板、建立觀察力、思考合作補位，拒絕用意志力硬撐。
- 報告：
    - 技術原理=>功能=>應該呈現什麼?透過什麼工具
    - 工作適時展現自己的價值，並且透過說明去提升自己的價值 
    - (加強口訴能力+需先思考)
-  [個人履歷 & 面試注意事項](https://hackmd.io/dkWMO8GPSC6gVD9OIO-zfQ)
    -  更新履歷前可以查看
- [個人技能提升目標紀錄](https://hackmd.io/KZPAQhM9RWu4nP6kAht8DQ)
    - 定期去搜尋關於前端工程師職缺並依照年份篩選，紀錄必要與加分技能，依照便利性與優先度額外找時間學習。
- [職涯規劃紀錄](https://hackmd.io/2KaROEpsQyqsBHf4FfrzOg)
    - 迷茫時更新紀錄





### 心態調整
- [心理調整紀錄](https://hackmd.io/lv5a3-ctTpalZM3kF76U2A)：
    - 跟自己比較就好
    - 不用一開始就很厲害，但要開始才有辦法變得厲害
-  [六角學院-未來規劃詢問建議 2023/9/11 紀錄](https://www.youtube.com/live/K2gjo9fvS_U?si=VHGUd5gfDJq_jUop&t=4890)
- [Cindy-未來職涯規劃建議 2025/11/11 紀錄](https://hackmd.io/FXoPO6AuS5C8lax7-cSm9g)

### 覺得酷酷的先收藏起來
- AE
    - 製作小動畫用+剪輯用
- Mockup
    - 製作作品集封面用 (ps/figma也可以做)
- [Mockup - UI & UX](https://apps.apple.com/us/app/mockup-ui-ux/id1527554407)
    - 可以在手機上製作 UI 介面工具
- [eagle](https://tw.eagle.cool/) ==推/已買==
    - 強大的素材個人管理儲存庫 (買斷900NT)
- [100 種 Figma 設計的方法｜UI/UX 線上課程](https://rar.design/courses/figma?fbclid=IwY2xjawEo1PJleHRuA2FlbQEwAAEdcpZqUwLZQJ24VuB6iMOvxfOAylXfy6YI2RsD_MIsSwRsMe2-kg0LwxFl_aem_Z62yWw83kxR-jnBXgkYEvw)
- [Figma Config 2025 懶人包🚀 AI原型、網站建置神進化！](https://tenten.co/learning/figma-config-2025/)



### 其他紀錄
- [購物願望清單](https://hackmd.io/caGPaq8OSj-ogVQkLA2wKg)
- [中文修辭+詞性+文法](https://hackmd.io/zzkjGyONRqGI15TWhIh7zQ?view)
- [筆記範本](https://hackmd.io/loG1yyqeQCCqT3puZMNloQ)
- [筆記目錄結構建議範本](https://hackmd.io/5qct4m6NSfWNc-l376s2ZA)

## AI 相關工具

### AI 助手
- ==推== [Codeium 代碼自動補全工具](https://codeium.com/)
    - 它能夠根據開發者的輸入，利用機器學習模型來自動補全程式碼，從而提升開發效率。
        - 後續本人已經不使用此工具，原因過於影響自己判斷。
- [v] VSCode - GitHub Copilot
    - 由 GitHub 推出的一款人工智能程式助手，旨在提升開發者的編碼效率和品質。
- [x][Monica AI](https://monica.im/)
    - 使用教學參考：[為什麼 Monica 是最強 AI 助理？](https://www.youtube.com/watch?v=vBiwOHnLpnk)
- [豆包 AI](https://www.doubao.com/chat/)
    - 由中國開發的 AI 工具，經同事測試發現回應內容較為準確。 
- [v] [NotebookLM AI 對話型筆記本](https://notebooklm.google/)
    - 只根據自己「上傳」的文件、網址、文字的資料來運作的 AI 個人助手 (適合做深入、專注、有根據的學習和資料整理)：
        - [筆記實例教學](https://www.playpcesor.com/2024/06/google-notebooklm-ai.html)
        - [(影)筆記實例教學](https://www.youtube.com/watch?v=T91QkwJ_Obo)
- [v] [Zread AI](https://zread.ai/)
    - 解析 GitHub Repo 程式碼庫成完整專案文字說明。
- ==推== [v] [Perplexity AI 答案引擎](https://www.perplexity.ai/)
    - 即時搜尋最新資料，閱讀後統整資料。
    - [Perplexity 功能與進階搜尋紀錄](https://hackmd.io/YHWJjRLRQwGKRiQLEmnwOQ)
- [v] [LMArena 大型語言模型 (LLM) 競技場與排行榜](https://lmarena.ai/)
    - 隨機提供各種模型解答 (AB)，最後依照使用者選擇進行排名，透過 `Leaderboard` 查看當前排名。
- [Devin AI](https://docs.devin.ai/get-started/devin-intro)
    - 由 `Cognition Labs` 開發的一款自主 AI 軟體工程師工具，號稱是全球首個真正自主運作的 AI 軟體開發助理。
- [Google Jules AI助手](https://jules.google.com)
    - 由 AI 自動研究、撰寫程式碼、測試，然後提交修改稿供審核，由人類決定要不要合併

### AI 圖片生成

- [v] [Cursor Talk to Figma MCP](https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp?tab=readme-ov-file#figma-plugin)
    - 由 AI 連接 Figma 自動建立設計稿
- [ComfyUI](https://www.comfy.org/zh-cn/)
    - AI 產生模型/圖片/影片功能。
    - [(影)AI 繪圖的終極沙盒 ComfyUI 快速上手 #4](https://www.youtube.com/watch?v=sSduFPEPYB0)
    - [模組庫連結](https://civitai.com/models)
- ==推== [Nano Banana Pro (Gemini 3 Pro) 產圖提示詞紀錄](https://hackmd.io/AwhdXqffRHqRiPfKVBv96Q)


### AI 其他
- [Suno AI 作曲](https://suno.com/)
    - [(影)Suno AI 作曲全球爆紅！幾個月前還覺得 AI..](https://www.youtube.com/watch?v=TlRUg9lCKYY)
- [檢查當前 OpenAI 運行狀況](https://status.openai.com/)


### AI 個人實作紀錄
- [VsCode GitHub Copliot (vide coding 使用紀錄)](https://hackmd.io/KjL5GwC8QQaEXQUBQvhUQg)
- [Cursor + Figma MCP 由 AI 連接 Figma 自動建立設計稿紀錄](https://hackmd.io/HCTIkt_HRam9zVztABN3mA)
- [Spec-Kit SDD 規格驅動開發工具紀錄](https://hackmd.io/nnGCfvG4TXiy70eaARmW-w)
- [SDD & AI 建立專案實作流程紀錄 (Github-Copliot & Spec-Kit && Next.js(tsx) & tailwindcss & vitest & RTL)](https://hackmd.io/8hDH_L7WT_qdT1_gdIENag)
- [實作 AI 產 Prompt (提示詞) 小幫手紀錄](https://hackmd.io/hn-6-23hR9i8ksWOfwKV8A)
- ==*New== [AI 全流程開發記錄 (Gemini Pro & SDD & Copilot)](https://hackmd.io/OPMLcsACS_O_wAP1hCwkkQ)


## 關注技術前線
- [developer-roadmap 技術職涯地圖 Github](https://github.com/kamranahmedse/developer-roadmap?tab=readme-ov-file)
    - 從前端、後端、DevOps、Android、iOS、AI/ML、區塊鏈、資安等相關技術路線圖。
        - [前端](https://roadmap.sh/frontend)
- [免費開發者資源清單](https://free-for.dev/#/)
    - 這是一份由超過 1600 位貢獻者 維護的開源清單，收錄各種提供免費方案（Free Tier） 的雲端與開發服務。它包含 SaaS、PaaS、IaaS 等平台，讓開發者能輕鬆找到適合的工具與基礎設施，節省開發成本。
- [Stack Overflow Developer Survey](https://survey.stackoverflow.co/2023/#most-popular-technologies-language)
    -  每年 Stack Overflow 都會進行開發者調查，其中包含了各種有關開發者的問題，例如使用的程式語言、框架、工具等等。
- [GitHub State of the Octoverse](https://octoverse.github.com/2022/top-programming-languages)：
    -  GitHub 每年都會發布一份報告，報告中包含了各種有關 GitHub 上的開發者活動和趨勢。
- [State of CSS](https://2022.stateofcss.com/en-US/css-frameworks/)
    - 查看每年使用指定 CSS 框架的人數趨勢
        ![image](https://hackmd.io/_uploads/S1IuNM3X0.png)
- [npm Trends](https://npmtrends.com/next)
    - 查看套件每周指定時間的下載量
        ![image](https://hackmd.io/_uploads/H1_HVf3QR.png)
- [網站趨勢 WebCRACK](https://www.facebook.com/groups/webtrendcollection/?locale=zh_TW)
    - 關注最新的網站特效技術
    - [更多網頁特效學習頻道](https://hackmd.io/gZoEfkO1RFmiwfixK6zfaA)
- 資料庫使用量排名：
    - [DB-Engines Ranking](https://db-engines.com/en/ranking)

## 前端應用
- [各項功能帳號與密碼管理(不開放)](https://hackmd.io/-rBUqhVQTwSSt5AmAPUEOw)
- 好物技巧紀錄筆記：
    - [VS Code & Chreom & windows 好用工具紀錄](https://hackmd.io/JSP3C9wVTYOH6wv6_cfyAA)
    - [疑難雜症問題解決紀錄](https://hackmd.io/1xqHixQlQaW3BUUe6fGQOg)
    - [提升自我能力 - 刻意練習](https://hackmd.io/4xfnRsC_STKe9nmcnHF1OA)
    - [個人專題規劃](https://hackmd.io/vEgUd_JMQFqGv7GHnZXaOg)
    - [接案須注意事項與規劃](https://hackmd.io/pmpOH5v2QnauQCOCNlLNyg)
    - [前端-常用功能紀錄](https://hackmd.io/HtcUn9zQSG6mZCScfJUfXw)
- [專注前端優化 & 檢測效能 (Core Web Witals/Lighthouse/WebP/polyfill..)](https://hackmd.io/dXtc2UPgTES_-VQyel09_g)
    - [SonarQube 品質管理建議優化項目紀錄](https://hackmd.io/LZPc2deJR2iLH1Mn132wCA)
    - [Next.js 效能優化前後紀錄筆記](https://hackmd.io/YtytRcd7RWm9p2hgOa7dPQ)
- 影像處理紀錄相關筆記：
    - [Affinity-Photo 影像編輯處理](https://hackmd.io/MeCTt8CkSnCLTmvU9Q098w)
- HTML 相關筆記： 
    - [HTML 基礎筆記 ](https://hackmd.io/hEaRLNzlQxm_pzhrBA1LdQ)
    - [Emmet 快速開發](https://hackmd.io/KFeWGepVTdyguF7Wms_HwQ?both)
- CSS 相關筆記： 
    - [好看樣式紀錄](https://hackmd.io/WuY7vQusTwahcR8s3Mhesw)
    - [切版前準備](https://hackmd.io/O69N7xwnRSqG_Zy-jMCBBQ)
        - [CC0 授權 icon](https://simpleicons.org/?q=face)
        - [icon css filter 工具](https://codepen.io/sosuke/pen/Pjoqqp)
    - [CSS 注意事項](https://hackmd.io/LYX-1IGYSzaRZULufelyHQ)
    - [RWD響應式](https://hackmd.io/NKhjYbxlTI-m8vL81rXXhw)
    - [CSS 選擇器應用](https://hackmd.io/pmhCG9ABShKhiHn_bG1oSw)
    - [CSS Flex 內層屬性](https://hackmd.io/8v6lnZOYQUiIug_FSq9wZw)
    - [PostCSS 轉換檢查CSS工具](https://hackmd.io/wQ23Gw26T4OmGrvB-_lfOQ)
    - [CSS animation-timeline 滾動式動畫](https://hackmd.io/453EOIP9R0azncwuDJaaxA)
- CSS 框架：
    - [Bootstrap CSS框架 v5](https://hackmd.io/QJDYUFOuR16i5Jgf4rFehQ)
    - [Tailwind  CSS框架 v3+v4](https://hackmd.io/i9kRKVBBTLWhlGZEK3ttTw)
    - [Pure.css 輕量化CSS框架 ](https://hackmd.io/eWIQa23PTS-WUsHQfeYIVA)
    - [UnoCSS CSS框架 -未更新]()
- 現成 UI 工具：
    - [daisyUI](https://daisyui.com/)
    ![image](https://hackmd.io/_uploads/SyM68F1pye.png)
    - [HeadlessUI](https://headlessui.com)
        ![image](https://hackmd.io/_uploads/BkZu8tk61g.png)
    - [ShadcnUI](https://ui.shadcn.com/)
        ![image](https://hackmd.io/_uploads/rJnrLFy6ye.png)
        - [ShadcnUI & Next.js 操作紀錄](https://hackmd.io/CmV1Af50Rcu2Izbgh7tVdA)
    - [Ant Design UI](https://hackmd.io/bABhegzMQ5WTMrtgrCQN9Q)
        ![image](https://hackmd.io/_uploads/Hkod0776xx.png)
    - [mui (Material UI) - React UI library 套件]()
- SASS 相關筆記：
    - [SASS、SCSS 預處理CSS樣式語法](https://hackmd.io/1_gdcxAyS-2IsAjy2LgNiw)
- JavaScript 相關筆記： 
    - [JavaScript 基礎筆記](https://hackmd.io/c0uO_LznRc-eB7f5WqZKLg?view)
    - [JavaScript Number 數學運算大全](https://hackmd.io/bHMwIGb4RFGrxMqcaoeRmw)
    - [JavaScript String 字串處理大全](https://hackmd.io/Hm8K7FPYRMG4a71qjp-tbQ)
    - [JavaScript DOM 節點處理大全](https://hackmd.io/DI7rK8aqQ1mZD3TpdbA0lw)
    - [JavaScript Date 時間處理大全](https://hackmd.io/bIDgvnSET5eLs1sEG33c_A)
    - [JavaScript Object 物件大全 ](https://hackmd.io/8hghlcQkSh2VNobPIEzoBQ)
    - [JavaScript Array 陣列大全](https://hackmd.io/wK_iMOo2RuukZpwyhpRn2w#JavaScript-Array-%E9%99%A3%E5%88%97%E7%B4%80%E9%8C%84)
    - [JavaScript For Loop 迴圈大全 ](https://hackmd.io/yRNnQeqNSUqWAucyifXLTg)
    - [JavaScript Event 事件監聽大全 ](https://hackmd.io/qyAQOYNzTSiRjCI2slCU6Q)
    - [JavaScript AJAX/Promise 非同步處理大全](https://hackmd.io/IS-msJWiT9yGCbg1eMEZug)
    - [JavaScript 儲存資料 cookies、localStorage 筆記 (前端版)](https://hackmd.io/E_xei2WBT6SS_xikiCMmwg)
    - [JavaScript RegExp 正則表達式大全](https://hackmd.io/lla1LuJiR8iCPTaZNij_XA)
    - [JavaScript Crypt 加解密大全](https://hackmd.io/B66PipwBRYuqurChkPmTxQ)
    - [TypeScript 強型別擴充 JavaScript](https://hackmd.io/jk4uDNYtRO6JwN7Y-eLb9A)
- JavaScript 框架選擇：
    - **React 相關**：
        - [React 基礎綜合筆記 + Hook + CRA + Vite + Redux ](https://hackmd.io/ziI5Xs3zT8qC_5c34KA47w)
        - [React v19+ 版本補充筆記 (2025)](https://hackmd.io/iDznDAcgStSoS_nobg4kgQ)
        - [Next.js React 框架 Page Router  v12 版本](https://hackmd.io/RaPNlcGBQlyw9a66J-QIMA)
        - ==主要== [Next.js React 框架 App Router v14 版本 (2024)](https://hackmd.io/x91yvHLmT3umRKIf0fvqVw)
        - [Next.js 功能保存紀錄筆記](https://hackmd.io/XMNZXytPRyeEev2Y46jOOw)
        - [Next.js 痛點解決紀錄筆記](https://hackmd.io/XQt9sbpHTEyh2OxZymneCw)
        - [Next.js React 框架 App Router v15、16+ & TypeScript 版本 (2025)](https://hackmd.io/neogb029Teye2Q1sYzwVKw)
        - [x TanStack Start - React & vite 支援 SSR 框架]()
        - ==New==[前端開發流程-全規範總整理(2025)](https://hackmd.io/6-OhzjwdSYG4k3oiBLWMXg)
    - **Vue 相關**：
        - [Vue3/Vite Options API專案建立流程(Vite/Pinia)](https://hackmd.io/8CnKFPo7Rp6HGxZidJt2Hw)
            - [Vue3 Options API 元件介紹](https://hackmd.io/XRxkiXJzSkqyNAawIaDveQ)
            - [Vue3 Options API 備份筆記](https://hackmd.io/L88GEi4YR1icoXmQvjZ8Bg?both)
        - [Vue3/Vite Composition API專案建立流程(Vite/Pinia)](https://hackmd.io/Q_W-6iCTSXucg9sdzv79xA)
        - [Nuxt Vue 框架 xxx 版本(備份)](https://hackmd.io/SNSwoArGRiCu_6zboq8owQ)
- APP 開發框架：
    - [React-Native 開發雙平台 iOS、Android 應用 APP (2025)](https://hackmd.io/Dlzckd-JSDi9UInDQKlFKQ)
    - [Expo (v50+) 基於 React-Native 開發雙平台 iOS、Android 應用 APP (2025)](https://hackmd.io/z0qsOALmRN6fvrYeIUQbUw)
    - [Flutter 開發雙平台 iOS、Android 應用 APP x](https://hackmd.io/dqpFniMPRu-67w6jye5Tzw)
- Next 功能類套件：
    - [Next.js SWR 優化呼叫 API Hook](https://hackmd.io/k2Oa6R4JRh6SgbSgS6uL-Q)
    - [next-auth 身份驗證庫&第三方登入](https://hackmd.io/mu-eEZmrQ82FFB3bTeoa6g) 
    - [next-sitemap 動態產生網站地圖/提升爬蟲SEO](https://hackmd.io/5DPfzr3gQXKs29Whu9Ftwg)
    - [react-i18next 多語系套件](https://hackmd.io/EpEFXxKhR_SMYjSKrMEIPA)
    - [next-intl 多語系套件](https://hackmd.io/5VW_c9PIRoGp9M7xZrUXHA)
    - [next.js + mysql2 連接資料庫](https://hackmd.io/qJgH9h-9TLyuF7rMBAXf7Q)
    - [Lucia Auth 身分驗證庫(Session)](https://hackmd.io/zvaV-VNwTfKbBY04-ZcuMw)
    - [next-themes 網站主題色切換](https://hackmd.io/NRUDGSIXR0yuG3gruv4zCg)
- React 功能類套件：
    - [Redux 進階資料狀態 Redux-Toolkit + store + slice + asyncThunk + RTK Query](https://hackmd.io/mugdhPylSrybw5Gu8Gzetw?both)
    - [Zustand 進階管理狀態(輕量取代Redux)](https://hackmd.io/xXDsL1eaSOaG7zOCbMG_Rg)
    - [react-window 大量資料渲染優化](https://hackmd.io/XjOEnr3IQ46fzITCffqeJg)
    - [React Hook Form 處理表單驗證套件](https://hackmd.io/tpWYUJK5Rp2qTclN_KqLGw)
    - [React-Select 下拉式選單套件](https://hackmd.io/-XJziJ4uRcO6vtaH_LHCqw)
    - [React-Prop-Types 檢查元件 props 型別](https://hackmd.io/RBgr6nZoRj6NLMYiMsYw0w)
    - [classnames 在 React 中動態綁定 class](https://hackmd.io/TbZDHC_kRXS9OCDsrIQkOw)
    - [html-react-parser 純 HTML 轉換 React 元件](https://hackmd.io/vTdW73rsRpO8dPLutKPuAg)
    - [@preact/signals-react 局部狀態管理/優化useState渲染](https://hackmd.io/Z6VaytRUTqWmNbSuh5t1xA)
    - [react-intersection-observer 進入可視範圍才加載資料或者播放動畫](https://hackmd.io/spG31WMSQEu0IiCVx30bRg)
    - [Resend 免費發送信件服務紀錄](https://hackmd.io/DrBjU5E3QgyfBQhScjDtaw)
    - [@crxjs/vite-plugin 使用 vite 開發 chrome 擴充插件紀錄](https://hackmd.io/GRwj3xyaS7C_UkRIddKAAg)
- React 樣式類套件：
    - [React-Toastify 訊息提示視窗套件](https://hackmd.io/zzoz2BHZT7WHy3eexUFv6A)
    - [react-loading 整頁讀取效果](https://hackmd.io/En5A0U-iRtCyfSCcp8IjBw)
    - [react-loading-skeleton 取代整頁讀取效果](https://hackmd.io/X0DyKBFQQcuJYnSaNZT70w)
    - [react-hot-toast 訊息提示套件](https://hackmd.io/uzImKl1ZSuyksPMuWryxOA)
- Vue 功能類套件：
    - [vue-loading 讀取畫面套件](https://hackmd.io/IA4oCBwsQ56DzAgbadzKhg)
    - [vee-validation 表單驗證套件](https://hackmd.io/rMs8f1yXTmeWmlDwnBBi7w)
    - [vue-i18n多國語系](https://hackmd.io/GTL5WpsRQr-_H8P_iQBJwQ)
    - [vue3-toastify 訊息視窗套件](https://hackmd.io/SAPcc0VTTJqffLu2ETNcYw)
    - [vue-select 下拉式多功能樣式套件](https://hackmd.io/kBoKaUtnRzyBD-KdDuF2MA)
    - [vue-draggable 拖曳區塊套件](https://hackmd.io/XhUaTTI1QhiDVqcpnLyzkw)
    - [vue3-datepicker 日期選擇套件](https://hackmd.io/eaZgk1cpQm2WcpfClFWzMA)
    - [vue-awesome-paginate 分頁功能樣式套件](https://hackmd.io/u48G-zzwRUG13Qej7Bs4PQ)
- Web 網頁動畫相關：
    - [AOS 網頁滾動載入特效套件](https://hackmd.io/usuWI8KZRxCi25WdeyYFCA)
    - [GSAP 視差滾動特效套件](https://hackmd.io/aqnZ79auRzixH5aZMELbXg)
    - [Framer Motion 製作網頁動畫(React)](https://hackmd.io/C66MiRv6SfSZLWCmwdw38g)
    - [Lottie 輕量動畫製作](https://hackmd.io/LxjvQQb2RMGdKbwVmVMBUg)
    - [Rive 網頁中動畫製作](https://hackmd.io/rMbakBO9SDibkWRWWN29VA)
    - [motion 製作網頁動畫(Vue)](https://hackmd.io/ZYn1f8ZARzWul64EswBeIg)
    - [react-bits 製作網頁動畫(React)](https://hackmd.io/od0nubJgR2eXQifOt8jZ7A)
- 其他套件：
    - [常用圖片壓縮方法紀錄](https://hackmd.io/yjyD9CuPTea_O1iL-vzeKQ)
    - [所有 icon 使用整理紀錄](https://hackmd.io/ScB0ISbjTNekRKtjT_22Bw)
    - [fort-awesome 各式 ICON 使用套件](https://hackmd.io/BXKHl30BQnW5AIgPY8ReQQ)
    - [country-flag-icons 國旗 ICON 圖示套件](https://hackmd.io/v7gK_DHaQDSK3sHjK9Polg)
    - [sweetalert2 彈跳提示訊息套件](https://hackmd.io/f7z5VBDAQu6pQKDPfBsYuA)
    - [chroma-js 將十六進位色碼，轉換 #rrggbb 格式](https://hackmd.io/AQtjyBaCQKKe3zkg1oqGZw)
    - [date-fns 處理 Javascript 日期格式轉換](https://hackmd.io/-85b4KPzSCycRbOsTFo87Q)
    - [Swiper 動態輪播套件(Vue/React)](https://hackmd.io/nYe6pIeNRK-IKPu4r1Npgg)
    - [Fuse.js 輕量關鍵字搜尋套件](https://hackmd.io/7gAVDKWqSMiD-70IR0GYQg)
    - [vue-image-zoomer 滑鼠移入放大圖片套件(x)](https://hackmd.io/heMkpDYsS9idCvPbV8mPdw)
    - [vue-magnifier 滑鼠移入放大圖片套件(v)](https://hackmd.io/RknSZVFSQKqTp_OmaOjs2g)
    - [ckeditor 文章編輯器功能](https://hackmd.io/mOp0Pb8MRl-Qvxd9qpH8aQ)
    - [node-html-parser 將 HTML 轉換 DOM 格式](https://hackmd.io/Izd4eSYNQQ-JYVYE0pygIQ)
    - [Zod 撰寫驗證格式規則](https://hackmd.io/jgRjwSH1RY23MsFB6scGZA)
    - [JSDoc 撰寫 Javscript Doc 註解文件](https://hackmd.io/52ZRLA0BQEaVu8x-glxjhg)
    - [Chart.js 將資料以圖表呈現](https://hackmd.io/pmafNx23R7uShI_hW_kjtA)
    - [Docusaurus 簡易文件網站架設](https://hackmd.io/2Q0CR50YTleCL_zswtEZyg)
    - [FancyBox 輪播套件(支持照片模式&燈箱)](https://hackmd.io/sjxb7WxHSlO5fJS2Ki3fGg)
    - [html2canvas 網頁截圖套件](https://hackmd.io/usUeu2a_Qfiai9b-SB8UMw)
    - [jsPDF 網頁轉換 PDF 套件](https://hackmd.io/6qs_KPpsQFe0DJZHQBK5rg)
- 待測試使用套件暫存區：
    - [react-joyride 步驟式提示](https://react-joyride.com/)
    - [Docsify 簡易文件網站架設](https://hackmd.io/AbQC4tykTaqM8SUeym-uUQ)
    - [mailchimp 訂閱電子報群發 mail](https://hackmd.io/AeSLH164TR-hZOeec9K12w)
    - [StoryBook 用於 UI 開發/測試/文件說明](https://hackmd.io/KCSZTcPXToObO0lvu-M39A)
    - [Three.js 製作網頁 3D 特效套件](https://hackmd.io/heThKWR2Q9y2oUhabnH0cw)
    - [nextra 基於 next.js 建立網站文件](https://hackmd.io/Y8eT6IC-Qx6JhqgEmkx8Ng)
    - [Electron 跨平台桌面應用程式框架]()
    - [Tauri 跨平台桌面應用程式框架 (比較新)]()
    - [Reactive Resume 產生履歷工具](https://docs.rxresu.me/overview/features)
    - [skrollr 視差滾動套件](https://hackmd.io/Xq5tjiIQTYWjwUGNKhnb-Q)
    - [Tauri 用網頁寫電腦應用程式]()

## 後端應用
- [ 後端概念學習筆記 (未整理完成)](https://hackmd.io/VhpuBrp0SvC6OuZqgAjmHw)
    - [WebSocket 全雙工通訊](https://hackmd.io/0sShn-LYRF-AptmRoaIMug) 
    - [n8n 工作流程自動化工具](https://hackmd.io/L3pxVKosSjqgQPXwhTOIgw)
- 會員系統相關：
    - [Cookie、Session、JWT 管理 Token 驗證 (後端版本)](https://hackmd.io/Jkd6xYUPRUi6ofQ3ie_EXg)
    - [json-server 簡易 API](https://hackmd.io/tHKbZMvdQM-pJYwbY5METQ)
    - [json-server-auth 模擬會員註冊登入 API](https://hackmd.io/FvnjJzPgSte3CdXAbzytTQ)
    - [Google Sheet 串接簡易資料庫紀錄](https://hackmd.io/8znfwFTuS-Ga2Ewr2Dl2JA)
    - 第三方登入實作紀錄 (Next.js + React.js + Vue.js)：
        - [OAuth 2.0 授權機制筆記 (需先理解)](https://hackmd.io/XKEd-TpFRLGWTKdnnU3Mwg)
        - [Google 第三方登入實作紀錄 v](https://hackmd.io/VwOHPZZfSxSyGKvB2Z5C2g)
        - [微信 第三方登入實作紀錄](https://hackmd.io/idye3Jp_Rda2WXhusmPaEA) 
        - [Facebook 第三方登入實作紀錄 v](https://hackmd.io/IQc_FMlkQQij_x_WLDFs_w) 
        - [Line 第三方登入實作紀錄](https://hackmd.io/5qkjXhszR9ODjg5TSuJ--Q) 
        - [Apple-web 第三方登入實作紀錄 v](https://hackmd.io/vehUOCy3QQyqOAw7f9dw5g)
        - [json-server + json-server-auth + 第三方登入實作紀錄 (Google、Line、Facebook、GitHub)](https://hackmd.io/QojjAHJ-Rrm_73fGlptFhA)
- API 測試工具：
    - [Postman](https://www.postman.com/)
    - [Bruno](https://www.usebruno.com/)
- Node.js 相關： 
    - [Node.js 後端介紹 ](https://hackmd.io/ZRSlZX5ITbqMlhvPCOk1cA)
    - [nvm - Node 版本管理工具(極推)](https://hackmd.io/Piai-jFZRw-N_H46s9opgw)
    - [Multer 處理圖片上傳](https://hackmd.io/pLhgu0a-RbGKzCtK5ioZWw)
    - [swagger 建立線上 API 文件](https://hackmd.io/9oxiW4-VSvGTg5aqfSMpJA)
    - [Apiary 線上版 API 文件](https://hackmd.io/h5A8oGRLSpq_3jl2lBoA2g)
    - [pkg 製作不含程式碼的 .exe 應用程式](https://hackmd.io/DDyjuMQXRuGW0z9cSRDVLw)
    - [local-ssl-proxy 本地專案掛載成外部 HTTPS](https://hackmd.io/4Yru8A1YS72NsHEp0Gn_8w)
- 後端語言或框架相關：
    - [PHP 筆記](https://hackmd.io/hhuxHxwTRae1eE5tF2ridw)
    - [Laravel PHP框架](https://hackmd.io/iXjrXEXsQgeYTItd19dlPA)
    - [Python + 爬蟲](https://hackmd.io/6tXR4sxXT9KTc7JDEw62WA)
- 待學習項目：
    - [C# 紀錄](https://hackmd.io/wafkAVq0QLOZyM-o3r9EGQ)
    -  [GraphQL API 查詢語言筆記](https://hackmd.io/cFi0TV-iSEyBYgc7o8Am_g)
    -  [Socket.IO 雙向往定即時通訊(聊天)功能]()
    -  [WebRTC 瀏覽器 P2P 直接通訊(視訊)功能]()
    -  [Grafana 開源的分析與監控平台](https://hackmd.io/NWsw3dKMQH-lUYjoTGIV-A)

## 資料庫應用
- [資料庫規劃選擇](https://hackmd.io/oG9DWc7tQBKNVyI2WjAeIw)
- [MySQL + XAMPP 資料庫應用](https://hackmd.io/yEsxjgGUSCuBUnIm-9OtPg)
- [Monogo DB / MongoDB Atlas 資料庫筆記](https://hackmd.io/ZpqHGItsRVOBHjXRPONxXA?both)
- [PostgreSQL + DBeaver 資料庫應用](https://hackmd.io/4COMx08URXuBnf2P1dxJSQ)
- [Cloudinary 雲端媒體管理 - 提供圖片和影片上傳]()
- [Prisma ORM 支持 TypeScript 簡化資料庫操作](https://hackmd.io/HAHl7b7ARk2SU0G33FegSw)
- 與前端串接實作紀錄：
    - [Next.js & Neon & Vercel 免費雲端託管 PostgreSQL 資料庫 + Prisma ORD 管理資料庫](https://hackmd.io/xDN2cBPiSwGlWgPEXGgkLA)
- 後端佈署服務相關：
    - [自架後端伺服器與資料庫總整理](https://hackmd.io/EN1T6e1PRkeop8kZ9Iu6_g)
    - [Render 部屬後端伺服器與資料庫](https://hackmd.io/AJ4l4iQ4SRKMuZR8CgY-jg)
    - [supabase 後端即服務 Baas (PostgreSQL 資料庫)](https://hackmd.io/dFYk1wyARdSjv3Y5THSJlA)
    - [zeabur 部屬後端伺服器服務紀錄](https://hackmd.io/puQUtX8-TAa_21aeaizrww)
- 待學習
    - [better-sqlite3 模擬 SQL資料庫筆記](https://hackmd.io/h0Up4RX2R72MXTv3g8PgCw)



## 其他應用
- SEO 搜尋引擎最佳化相關：
    - [SEO 搜尋引擎優化策略綜合筆記 (Title/Meta/robots/sitemap/Google Search Console/json-LD)](https://hackmd.io/l5i7862wQpaDw-K6XrcOAw)
    - [GEO 生成引擎優化筆記](https://hackmd.io/E4mqMdnJTXKpmkZaA7vcXA)
- 測試相關：
    - [Jest 測試單元/測試框架](https://hackmd.io/ENWkApX2SWqV04ngWwb0WQ)
    - [Cypress e2e 端與端測試](https://hackmd.io/M2V72T3BQJW1y63dkeLrBQ)
    - [React Testing Library 專注 React 元件測試](https://hackmd.io/-6bYLtxPSqiRB83vWmtJJA)
    - [SonarQube 原碼資安掃描工具](https://hackmd.io/DAviX6BBRCaPYq7sKQ7QyA)
    - [Windows 連結 Android 安卓查看網頁 DOM 排錯](https://hackmd.io/BCZpF8XvQVas23ib6T_H_g)
    - [Mac 連結 IOS 查看網頁 DOM 排錯](https://hackmd.io/Wp4gSiY8SH6r5zPDL_0ytQ)
    - [JMeter 負載測試](https://hackmd.io/wgivgCLGQOOhfoaUSnW0cQ)
    - [chrome 內建分析與優化效能工具](https://hackmd.io/5y8B7SV_TvaqFRfNWk-nnQ)
    - [local-ssl-proxy 使專案掛載成 HTTPS](https://hackmd.io/Dkd3NA7zReeMzexivNT3EQ)
    - [開啟 ssh 將本地網址轉換成外部連結](https://hackmd.io/wiSSlc65QNibGU5LJgsVUw)
- 資安防護相關：
    - [ISO27001 資安規範筆記](https://hackmd.io/h8iJ86ueSuOnlwBIATB9JA)
    - [資安防護紀錄](https://hackmd.io/0p1CdkJ0S6SKr5E2bCwy2Q)
    - [Nessus 主機漏洞弱點掃描工具](https://hackmd.io/FS2b4t2tQFiPcea_gprhUQ)
    - [前端 logger 工具(next-logger/winston/pino)](https://hackmd.io/RicrNj4eTuCDGFfh7vDKaw)
    - [Cloudflare Bot Fight Mode 防惡意爬蟲工具](https://hackmd.io/VJi9uZ0HQFqMEhm2RKue5g)
     - [reCAPTCHA 網頁防護機器人攻擊工具](https://hackmd.io/dSvdoFNbSGyEOI6gWz8kjA)
     - [hCaptcha 防護機器人攻擊工具(不推薦)](https://hackmd.io/vkhprGu3TCSDmsU9LamhdQ)
     - [Cloudflare Turnstile 防護機器人攻擊工具 (全球可用)](https://hackmd.io/mLmRzkdUTH2VmcTmBSR9_g)
- 自動化相關：
    - [DevOps 自動化 CI/CD 持續整合與交付](https://hackmd.io/KYfnm-npTEyAB55JOrkVdw)
        - [GitLab 持續整合和持續部屬](https://hackmd.io/iEJGfi96TXyVSEw38S3h-Q)
        - [Jenkins 持續整合和持續部署](https://hackmd.io/pjORt6nZRISuw_lgqXss5Q)
- 網站部屬相關紀錄：
    - [Git & Github 筆記](https://hackmd.io/M5_P2H44SHOobIfwMLkkYA)
    - [gh-pages 部屬靜態網站](https://hackmd.io/69lTG6fpRzuCD9tMO_rnvg)
    - [Vite-Vue 部屬 gh-pages 方法](https://hackmd.io/XZs59LzBTk-nr70Soc5wmA)
    - [Vercel 部屬](https://hackmd.io/8NMHnZcfQVmrg8-cf4MDOw)
    - [GitHub Desktop 架設靜態網站](https://hackmd.io/5LQUlW-TRaS3IY9l0vfgJw)
    - ==推== [從零架網站流程紀錄](https://hackmd.io/RuUdVztGQDyIJ34-7L_I8g)
- 雲端管理相關紀錄：
    - [Docker 容器化部屬/運行應用程式](https://hackmd.io/e0rUi-4nQ0emUz1cuB5_Tw)
    - [Bitvise SSH Client 設定 SSH 協定/文件傳輸/管理服務器](https://hackmd.io/ux_xNSymTROwaOmGw-TwQw)
    - [Docker 部屬 + Bitvise SSH Client 設定 + (測試與正式環境管理)](https://hackmd.io/lrscp1NWSOebQKgG8HYjXg)
- 專案管理服務紀錄：
    - [Plane 專案管理工具](https://hackmd.io/5ZOmC7LKQp-24L62yikBSA)
- 金流服務相關紀錄：
- 行銷流量相關紀錄：
    - [Google ADs 廣告](https://hackmd.io/1ElOXs_HTJ2LUU1k2gVy-w)
    - [Google Analytics GA4 分析流量工具](https://hackmd.io/uA2zrz3XRy2q673RYe1qYg) 
- 製作文件管理相關紀錄：
    - [HackMD 管理撰寫筆記](https://hackmd.io/vjHx4ohyS1yz10q0g8kiOg)
- 其他工具紀錄：
    - [Telegram 紙飛機群發工具筆記](https://hackmd.io/neubG9bqTwGmDxDH9iPvYA)
        - [Telegram 紙飛機群發操作](https://hackmd.io/P7H_K3jjTSGiDpERZRw91A)
- 待學習測試項目：
    - [Linux 作業系統](https://hackmd.io/d5I7IzVKRO6N3hpw1Q94XA)
    - [Kubernete (k8s) 管理容器化 :待更](https://hackmd.io/5Bk-cQv0Q4OdQ7HTsbwotA)
    - [Facebook 廣告像素追蹤實作](https://hackmd.io/q5oRzIkbTCeyeB9IyXi7lA)
    - [綠界金流服務實作流程](https://hackmd.io/bSAEc8ngTB-cuL19JRJbhg)
    - [藍新金流服務實作流程](https://hackmd.io/39rF3N4pSkO_vMwTyDtzYQ)
    - [Cloudflare DNS 代管建立 SSL 憑證](https://hackmd.io/sd9QxCysSgOrBkipBzJUzg)
    - [Selenium (Web UI Test) 測試套件](https://hackmd.io/IPbbZ8ecQnih910tJujleg)
    - [Playwright 瀏覽器自動化工具-爬蟲與測試:端對端](https://hackmd.io/_3MzTaPST_2ZYScrSlbw2Q)
        - 可以搭配 Git Action CI/CD 檢查 



## 學習資源
- 英文學習：
    - [英文學習目錄](https://hackmd.io/iVxGDeuvTLeRpIekSzd_Tg)
- [前端自學資源紀錄](https://hackmd.io/HbL2soGbR0yx7T0h2XRxkQ)：
    - [2023 (影) 自學寫程式好難，到底該如何開始？教你避免走歪路【完整學習策略】](https://www.youtube.com/watch?v=t35Fxn0nenU)
    - [2023 iThome 鐵人賽：用ChatGPT詠唱來完成工作與點亮前後端技能樹](https://ithelp.ithome.com.tw/users/20135750/ironman/6659)
    - [GitHub電子書庫1](https://github.com/anzhihe/learning)
    - [GitHub電子書庫2](https://github.com/rmlzy/my-ebook/tree/master)
    - [2021 (影) Day1 系列影片介紹｜前端工程師也能開發全端網頁：挑戰 30 天用 React 加上 Firebase 打造社群網站｜Firebase 教學](https://www.youtube.com/watch?v=EwvFcFpZWio&list=PLddLA9QpG2T2__tPfi6nwaL8Rf_wWQaz7)
    - ==卷==[Developer Roadmaps 開發者路線圖](https://roadmap.sh/)
        - 依照設定語言會有數個挑戰可製作
    - [(影)搜索技术，普通人变强的唯一外挂。全套详细宝藏教程~](https://www.youtube.com/watch?v=tiN6T1LewmQ)
        - [瀏覽器搜尋進階方式筆記](https://hackmd.io/6cZeEkWyTrOkXriMtlIEnA)
    - [(文章)定義與撰寫學習目標_Udemy](https://teach.udemy.com/zh-hant/creating-learning-objectives/)
- 電子書充電：
    - [(電子書)華頓商學院最受歡迎的談判課:上完這堂課，世界都會聽你的](https://www.books.com.tw/products/E050020711)
    - [(電子書)圖解認知心理學 更新版](https://www.books.com.tw/products/E050065486?sloc=main)
    - [(電子書)12週做完一年工作：縮短工時x成果翻倍的高效成功法](https://www.books.com.tw/products/0010974991?srsltid=AfmBOopAxl9Irwc8aWbTJfu4kLbJeht9SsU5crXitKvD_2EZaZ9S2vMC)
    - [(電子書)我只想好好上班！：新鮮人求職、就職、升職、離職的應對解答之書](https://www.books.com.tw/products/0010852738)
        - [英文模板](https://tonydavid.notion.site/12-Week-Year-Planner-Clean-a4505e6b70cd462f8f058ac0a7528d9a)
        - [中文模板](https://shrouded-pirate-a0e.notion.site/12-Week-Year-Planner-149586d2dcaf80a0a62feb8c82eb1356)
    - [(電子書)費曼學習法：不管學什麼都能成功的技巧與心法[v]](https://www.books.com.tw/products/E050106617#P00bc00240020)
        - [費曼學習法 - 個人心得學習筆記 2024年](https://hackmd.io/sUDfahTwQjaDnxD4EVJENQ)
    - [(電子書)刻意練習：原創者全面解析，比天賦更關鍵的學習法](https://www.books.com.tw/products/0010752714)
        - 補充：[熟練不等於變強｜《刻意練習》｜文森說書](https://www.youtube.com/watch?v=3gT_OuloEMs)
    - [(電子書)不想上班的勇氣：軟體工作者的第一本接案指南](https://www.books.com.tw/products/0011025791?loc=P_0002_009)
        - 找時間要來買了
    - [(電子書)無Bugの境界：軟體測試工程技術詳解](https://www.books.com.tw/products/0011026001?loc=P_0002_007)