# Ben筆記目錄

## 個人連結
1. [GitHub](https://github.com/ben0588)
2. [個人網站](https://ben0588.github.io/PersonalWebsite/#/)
3. Email：[e-mail]

## 學習目標目錄
1. [學習目標目錄](https://hackmd.io/6rwqPDPKShqxKPh5q9Sw5Q)
- [2024代辦事項](https://hackmd.io/u2klXl9gR62QuADU0us9ZA)
- 短期更新計畫 2024/4/11：
- Tailwind.css ( 優先專案2024/4/11+Udemy課程 )
- Next.js( 優先學習React框架/App Router v14版本 )
- 2024/4/18 完成 Next+mongoDB Atlas 完成 todolist [v]
- Zustand 新型熱門 React 狀態管理
- React Native 開發安卓與IOS手機應用
- 近期規劃 2023/8/15：
- TypeScript ( 暫停 )
- Tailwind.css ( 優先專案2024/4/11 )
- Next.js ( 暫停 )
- Vue.js ( 完成[v] )
- 目標：使用 Composition API 及 Option API 各完成一個單人作品
- Options API 學到一個階段(data/methods/mounted/created/watch/computed/pinia)。
- 英文能力 ( 進行中 )
- 學習 GitFlow/GitLab ...
- [規劃提問建議 2023/9/11 紀錄](https://www.youtube.com/live/K2gjo9fvS_U?si=VHGUd5gfDJq_jUop&t=4890)
- 中期規劃 2~3 年
- CI 自動部屬。
- ( 學習測試 vitest tdd、jest ) 提升程式碼品質 + 測試範圍覆蓋
- 加強資料庫學習
- MongoDB
- 加強後端技能
- 學習 json-server [v]
- Node.js
- Python
- 使用 Python 寫 Skype 群發機器人
- 使用 Python 寫 Telegram 群發機器人
- C#
- 長期規劃 3~5 年
- 跨領域學習 ( 前端 => 後端 => 全端)
5. [前端自學資源紀錄](https://hackmd.io/HbL2soGbR0yx7T0h2XRxkQ)
6. [心理調整紀錄](https://hackmd.io/lv5a3-ctTpalZM3kF76U2A)
8. [好看樣式紀錄](https://hackmd.io/WuY7vQusTwahcR8s3Mhesw)
9. [筆記範本](https://hackmd.io/loG1yyqeQCCqT3puZMNloQ)
10. 雜七雜八紀錄
- [英文學習目錄](https://hackmd.io/iVxGDeuvTLeRpIekSzd_Tg)
- [中文修辭+詞性+文法](https://hackmd.io/zzkjGyONRqGI15TWhIh7zQ?view)

## 關注技術前線
- [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 框架的人數趨勢
- [網站趨勢 WebCRACK](https://www.facebook.com/groups/webtrendcollection/?locale=zh_TW)
- 關注最新的網站特效技術
- 前端框架趨勢：
- Qwik：全端框架，包含 SSR 與 CSR 優點。
- [2022/10/26 認識 Web 前端框架超新星 - Qwik](https://www.youtube.com/watch?v=a1xUuj4Td-Y)

## 前端應用
- 好物技巧紀錄
- [更多技巧紀錄 - VS Code+Chreom 工具擴充](https://hackmd.io/JSP3C9wVTYOH6wv6_cfyAA)
- [更多技巧紀錄 - 前端優化/檢測](https://hackmd.io/dXtc2UPgTES_-VQyel09_g)
- [個人專題規劃](https://hackmd.io/vEgUd_JMQFqGv7GHnZXaOg)
- [Component 元件規劃]()
- HTML 相關筆記：
- [HTML 基礎筆記 ](https://hackmd.io/hEaRLNzlQxm_pzhrBA1LdQ)
- [Emmet 快速開發](https://hackmd.io/KFeWGepVTdyguF7Wms_HwQ?both)
- CSS 相關筆記：
- [切版前準備](https://hackmd.io/O69N7xwnRSqG_Zy-jMCBBQ)
- [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 框架選擇：
- [Bootstrap CSS框架](https://hackmd.io/QJDYUFOuR16i5Jgf4rFehQ)
- [Tailwind CSS框架 ](https://hackmd.io/i9kRKVBBTLWhlGZEK3ttTw)
- [Pure.css 輕量化CSS框架 ](https://hackmd.io/eWIQa23PTS-WUsHQfeYIVA)
- SASS 相關筆記：
- [SASS、SCSS 相關應用](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 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 非同步處理大全](https://hackmd.io/IS-msJWiT9yGCbg1eMEZug)
- [JavaScript 儲存資料 cookies、localStorage 筆記 (前端版)](https://hackmd.io/E_xei2WBT6SS_xikiCMmwg)
- [JavaScript RegExp 正則表達式大全](https://hackmd.io/lla1LuJiR8iCPTaZNij_XA)
- [TypeScript 強型別擴充 JavaScript](https://hackmd.io/jk4uDNYtRO6JwN7Y-eLb9A)
- JavaScript 框架選擇：
- [React 基礎綜合筆記 + Hook + CRA + Vite + Redux ](https://hackmd.io/ziI5Xs3zT8qC_5c34KA47w)
- [Redux 進階資料狀態 Redux-Toolkit + store + slice + asyncThunk + RTK Query](https://hackmd.io/mugdhPylSrybw5Gu8Gzetw?both)
- [Zustand 進階管理狀態(輕量取代Redux)](https://hackmd.io/xXDsL1eaSOaG7zOCbMG_Rg)
- [Next 基礎綜合筆記 Page Router 版本 ](https://hackmd.io/RaPNlcGBQlyw9a66J-QIMA)
- [Next 基礎綜合筆記 App Router v13版本](https://hackmd.io/jaH8B-QLT_i6jlkJY-TyQQ)
- [Next.js React 框架 App Router v14版本(2024)](https://hackmd.io/x91yvHLmT3umRKIf0fvqVw)
- [React Native 開發手機端 iOS、Android 應用 APP ](https://hackmd.io/z0qsOALmRN6fvrYeIUQbUw)
- [Vue3/Vite Options API專案建立流程(Vite/Pinia)](https://hackmd.io/8CnKFPo7Rp6HGxZidJt2Hw)
- [Vue3 Options API 元件介紹](https://hackmd.io/XRxkiXJzSkqyNAawIaDveQ)
- [Vue3 Options API 原筆記超10萬長度，將部分資訊移入此份備用。](https://hackmd.io/L88GEi4YR1icoXmQvjZ8Bg)
- [Vue3/Vite Composition API專案建立流程(Vite/Pinia)](https://hackmd.io/Q_W-6iCTSXucg9sdzv79xA)
- Next 功能類套件：
- [next-auth 身份驗證庫&第三方登入](https://hackmd.io/mu-eEZmrQ82FFB3bTeoa6g)
- React 功能類套件：
- [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)
- 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)
- [mui (Material UI) - React UI library 套件]()
- 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)
- 其他套件：
- [fort-awesome 各式 ICON 使用套件](https://hackmd.io/BXKHl30BQnW5AIgPY8ReQQ)
- [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)

## 後端應用
- [ 後端概念學習筆記 (未整理完成)](https://hackmd.io/VhpuBrp0SvC6OuZqgAjmHw)
- [Cookie、Session、JWT 管理 Token 驗證 (後端版本)](https://hackmd.io/Jkd6xYUPRUi6ofQ3ie_EXg)
- [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)
- [json-server 簡易 API](https://hackmd.io/tHKbZMvdQM-pJYwbY5METQ)
- [json-server-auth 模擬會員註冊登入 API](https://hackmd.io/FvnjJzPgSte3CdXAbzytTQ)
- [第三方登入紀錄 (Google、Line、Facebook、GitHub)](https://hackmd.io/QojjAHJ-Rrm_73fGlptFhA)
- [WebSocket 全雙工通訊](https://hackmd.io/0sShn-LYRF-AptmRoaIMug)
- [C# 紀錄](https://hackmd.io/wafkAVq0QLOZyM-o3r9EGQ)
- [Python 紀錄](https://hackmd.io/6tXR4sxXT9KTc7JDEw62WA)
- [Jest 單元測試紀錄](https://hackmd.io/kEw5hCXYRJeO8Ng4_9pkBA)
- [Cypress 測試 React/Next 元件](https://hackmd.io/0Q5bznKrQYidyMkXTjP5zQ)

## 資料庫應用
- [MySQL 資料庫筆記](https://hackmd.io/yEsxjgGUSCuBUnIm-9OtPg)
- [Monogo DB / MongoDB Atlas 資料庫筆記](https://hackmd.io/ZpqHGItsRVOBHjXRPONxXA?both)
- [better-sqlite3 模擬 SQL資料庫筆記](https://hackmd.io/h0Up4RX2R72MXTv3g8PgCw)

## 其他應用
- [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)
- [docker 部屬](https://hackmd.io/lrscp1NWSOebQKgG8HYjXg)
- [Bitvise SSH Client 設定 SSH 協定/文件傳輸/管理服務器](https://hackmd.io/ux_xNSymTROwaOmGw-TwQw)
- [GitHub Desktop 架設靜態網站](https://hackmd.io/5LQUlW-TRaS3IY9l0vfgJw)
- [HackMD 管理撰寫筆記](https://hackmd.io/vjHx4ohyS1yz10q0g8kiOg)
- [Telegram 紙飛機群發工具筆記](https://hackmd.io/neubG9bqTwGmDxDH9iPvYA)
- [Telegram 紙飛機群發操作](https://hackmd.io/P7H_K3jjTSGiDpERZRw91A)
- [Linux 作業系統](https://hackmd.io/d5I7IzVKRO6N3hpw1Q94XA)
- [Docusaurus 文件網站生成器]()

## 提升能力推薦
- [(電子書)費曼學習法：不管學什麼都能成功的技巧與心法[v]](https://www.books.com.tw/products/E050106617#P00bc00240020)
- [費曼學習法 - 個人心得學習筆記 2024年](https://hackmd.io/sUDfahTwQjaDnxD4EVJENQ)
- STEP 1 目標：確認學習目標
- STEP 2 理解：理解學習內容
- STEP 3 輸出：對外傳授知識
- STEP 4 回顧：深度回顧反思
- STEP 5 簡化：內化吸收知識
- [(影)搜索技术，普通人变强的唯一外挂。全套详细宝藏教程~](https://www.youtube.com/watch?v=tiN6T1LewmQ)
- 雙引號搜尋關鍵字："目標"
- 限定標題搜尋：intitle：搜尋目標
- 包含標題搜尋：allintitle:目標1 目標2
- 限定內容搜尋：intext:目標
- 限定網址搜尋：李子祈 inurl:cctv
- 限定網站來源搜尋：林雨微 site:cctv.com
- 限定圖片大小來源搜尋：目標 imagesize:2560x1440
- 限定文件格式搜尋：xxxx filetype:pdf
- 搜尋免費影音素材：best sites for free stock videos

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

## 專案製作紀錄
- [2022/4~2022/8：資策會PHPD02 (團隊製作)]()：[Youtube連結](https://www.youtube.com/watch?v=rIPBCkSgycI)
- 從零開始，Class React/bootstrap
- [2022/12/4 ~ 4/6：網球電商網站]()：[Github Pages連結](https://ben0588.github.io/shopping_site/)
- 邊做邊學，hook React/bootstrap/sass/node.js
- [2023-7/3~7/4：個人介紹+作品網址]()：[Github Pages連結](https://ben0588.github.io/PersonalWebsite/#/)
- 加減練習，React/cra/bootstrap5/scss
- [2023/8/17~8/17：TodoList&API(CRUD)]()：[Github Pages連結](https://ben0588.github.io/react-todolist/#/)
- 加減練習，React/cra/react-hook-form/react-router/bootstrap/sass/axios
- [2023/7/25~9/28：香水電商網站(前後台/動態更新網站)]()：[Github Pages連結](https://ben0588.github.io/react-fragrance-dawn/#/)
- 大量課程+自學練習。React/Redux/RTKQuery/Redux-persist/react-hook-form/framer-motion/swiper/sweetalert2/axios/Vite
- [2024/1/4：Vue 2023單人專題審核](https://hackmd.io/bGcqg2xoRZC06loJLGhKDw)：[Github Pages連結](https://ben0588.github.io/vue-review/#/)
- Vite/Vue3/Options API/Vue-Router/boostrap/axios
- [2024/1/4~3/10：家居電商網站(前後台/動態更新網站)]()：[Github Pages連結](https://ben0588.github.io/vue_mu_ri_homeware/#/)
- 在職學：Vite/Vue3/Components API/Vue-Router/bootstrap/axios
- [Vue家居電商-製作專案紀錄](https://hackmd.io/4BuWXgunR2S0COzEd3JbZA)
- [2024/4/10~：工作項目_01：](https://hackmd.io/1hYOsE7qSKmmgGoNjMpgag?both=)
- Next.js(v14 app router版本)
- Tailwind.css