# 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)