| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2024-03 | 使用 Angular + Signals + SSR + PWA 做個 TodoMVC | 學習 signal 相關概念與練習 SSR + PWA 配置。 | 連結 |
| 2024-04 | 開發一套右鍵快速查詢線上字典的工具，並上架於 chrome web store | 改善線上查詢字典時的使用體驗。 | 連結 |
| 2024-04 | 使用 Angular 開發 Chrome Extension：配置 popup.html 與 options.html | 使用 Angular 開發 Chrome Extension 體驗。 | 連結 |
| 2024-04 | todomvc-backend | nestJs | 連結 |
| 2024-05 | vue-todomvc | 練習 Vue + Pinia | 連結 |
| 2024-05 | chat-app-backend | 這是一個可以用來練習 web socket 的後端專案。 | 連結 |
| 2024-05 | ng-chat-app | 練習 Angular + @ngrx/signals。 | 連結 |
| 2024-06 | vue-chat-app | 練習 Vue + pinia。 | 連結 |
| 2024-06 | Pinia Store 的單元測試 | 練習使用 Vitest 撰寫單元測試。 | 連結 |
| 2024-06 | vue-refresh-token-demo | vue jwt refresh token | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2023-04 | 開發一套 ChatGPT 的 輔助工具，並上架於 chrome web store | 改善 ChatGPT 的使用體驗，並提供更快速、更實用的 UI 介面與功能，以協助使用者更輕鬆地操作 ChatGPT。 | 連結 |
| 2023-04 | 使用 Angular 開發 Chrome Extension | 嘗試使用 Angular 開發 Chrome Extension 的 可行性 | 連結 |
| 2023-12 | 使用 Angular 開發 Chrome Extension：配置自動刷新的開發環境 | 配置自動刷新的開發環境 | 連結 |
| 2023-12 | ngx-chrome-extension-live-reload | 使用 Angular Schematics ng add 開發快速配置功能 | 連結 |
| 2023-12 | AutoPath Script Executor | 開發一個 vscode 套件，可在資料夾按右鍵執行執行，且自動加上資料夾路徑 | 連結 |
| 2023-12 | GPTs 串接 Dev.to | 串接 GPTs Action | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2022-04 | [有聲版] Angular ControlValueAccessor 介紹與實作 | 客製表單控制 | 連結 |
| 2022-05 | ng-tailwind-css-pricing | TailwindCss 切版練習 | 連結 |
| 2022-05 | ng-tailwind-css-facebook | TailwindCss 切版練習 | 連結 |
| 2022-07 | [有聲版] Angular Strict Typed Forms 強型別表單 簡易示範 | 強型別表單 | 連結 |
| 2022-10 | [有聲版] 其實本來只是想講講 defer | rxjs cold / hot / warm obs | 連結 |
| 2022-10 | jwt-refresh-token-mock-backend | nestJs | 連結 |
| 2022-10 | [有聲版] 前端刷 token ，這次就弄懂 ! | angular jwt refresh token | 連結 |
| 2022-12 | react-refresh-token-demo | react jwt refresh token | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2021-01 | Angular-devkit , 翻譯翻譯神馬叫 Schematics ！ | Angular Schematics | 連結 |
| 2021-01 | Schematic 詞彙篇 : 他們說我是沒有用的小章節 | Angular Schematics | 連結 |
| 2021-01 | Schematics : 我知道我是沒有用的 Hello World 。 | Angular Schematics | 連結 |
| 2021-01 | Schematics : 如何進行本地測試？ | Angular Schematics | 連結 |
| 2021-01 | ng new : 你會不會和我一樣，把一切都寄託 new 身上。 | Angular Schematics | 連結 |
| 2021-02 | Schematics Prompts : 你寫 code 幾個天?，再堅持幾年我們再來討論! | Angular Schematics | 連結 |
| 2021-03 | ng generate : 我們只喜歡小確幸，放棄去改變複製貼上。 | Angular Schematics | 連結 |
| 2021-12 | Angular Unit Test Demo | Angular Unit Test | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2020-10 | Angular-devkit , 翻譯翻譯神馬叫 Schematics ！ | Angular Schematics | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2019-06 | Typescript：先別管強型別了，你聽過enum嗎？ | TypeScript | 連結 |
| 2019-09 | 動物認養 v2 | Unit Test | 連結 |
| 2019-10 | jasmine-cheat-sheet | 整理一份 jasmine 的 cheat sheet | 連結 |
| 2019-10 | 學習Jasmine的技巧 + 測試異步的四種方式 | jasmine + async test | 連結 |
| 2019-12 | command-line-tips | 練習做 cli 的 小工具 | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2018-02 | 聽說 Excel 不懂 CSV ? 。 Excel : 拜託，是你不懂我。 | Excel操作 | 連結 |
| 2018-04 | 其實 Css 的內心還住著一位 Print | Css列印 | 連結 |
| 2018-06 | 當 Angular 邂逅 Electron --- 簡易CSV編輯器 | 桌面程式 | 連結 |
| 2018-07 | Grid Layout 首部曲：原生網格的崛起 | Css排版 | 連結 |
| 2018-07 | Grid Layout 二部曲：流動排列與隱式網格的小藏識 | Css排版 | 連結 |
| 2018-07 | Grid Layout 三部曲：auto-fill ? auto-fit ? 我們不一樣。 | Css排版 | 連結 |
| 2018-10 | 動物認養 (Angular6 + Firebase) | Angular | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2017-02 | RxJS 基礎練習 純筆記 | RxJs觀念 | 連結 |
| 2017-02 | Laravel 小白的筆記 系列一 | 後端運作 | 連結 |
| 2017-03 | Array filter && map 純筆記 | Js陣列 | 連結 |
| 2017-03 | 使用 Angular4 + Redux 做個 TodoMVC | Redux思維 | 連結 |
| 2017-04 | 使用 Protractor 做前端E2E測試 | E2E測試 | 連結 |
| 2017-04 | Study Promise | Js Promise | 連結 |
| 2017-05 | Study Closure | Js Closure | 連結 |
| 2017-07 | NPM + Gulp Demo | 套件管理與自動化工具 | 連結 |
| 2017-08 | Webpack Demo | 打包工具 | 連結 |
| 2017-09 | Angular Dynamic-Component-Loader | 動態組件 | 連結 |
| 2017-10 | Flexbox Demo | Css排版 | 連結 |
| 2017-12 | Docker Demo | 輕量化虛擬容器 | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2016-04 | Angular 2 Beta.15 初探 | Angular | 連結 |
| 2016-06 | Angular 2 release rc.1 練習 | Angular | 連結 |
| 2016-06 | 使用Gulp 管理切換Api | Gulp | 連結 |
| 2016-08 | CSS 筆記 偽元素 && z-index | Css | 連結 |
| 2016-08 | Angular cli && Angular 2 Component 筆記 | Angular | 連結 |
| 2016-08 | LocalStorage 介紹與應用 | LocalStorage | 連結 |
| 2016-08 | SCSS介紹 | SCSS | 連結 |
| 2016-09 | Heroku架簡易Proxy 筆記 | Proxy | 連結 |
| 2016-09 | Angular 2 版型元件化 && Router 建置 | Angular | 連結 |
| 2016-10 | Box-Shadow 介紹 | Css | 連結 |
| 2016-12 | Npm && Yarn | NPM | 連結 |
| 2016-12 | Linebot 小試 | Linebot | 連結 |
| 2016-12 | 使用Typescript寫Angular 1.x | Typescript | 連結 |
| 時間 | 項目 | 學習內容 | 備註 |
|---|---|---|---|
| 2015 | Jquery 基礎筆記 | 前端入門 | 連結 |
| 2015 | Socket.IO聊天室 練習 | Socket.io | 連結 |
| 2015 | JHL's Blogger建置 | 面試小專案 | 連結 |
| 2015 | Parse 介紹 | Parse | 連結 |
| 2015 | Angular 初探 | Angular.js | 連結 |
| 2015 | Google analytics | Google Analytics | 連結 |
| 2015 | Music Web 練習 記錄 | 實習練習 | 連結 |
| 2015 | Angular 筆記(一) | Angular.js | 連結 |
| 2015 | Angular 筆記(二) | Angular.js | 連結 |
| 2015 | Ionic Framework 試用 | Ionic | 連結 |
| 2015 | Angular + Cordova = ngCordova | ngCordova | 連結 |
| 2015 | Node.js 筆記 | Nodejs | 連結 |
| 2015 | Blogger後台操作 | 前端入門 | 連結 |
| 2015 | 『 筆記 』 Heroku平台 架設 github 上的 node.js | Heroku | 連結 |
| 2015 | CSS Position & Box model ＆display 筆記 | css | 連結 |
| 2015 | Javascrip概述 筆記 | JS | 連結 |
| 2015 | Postman 測試api工具 | Postman | 連結 |
| 2015 | Webapp 開發工具 & Xcode 7 實機測試 | Webapp | 連結 |
| 2015 | Ionic 開發紀錄 | Ionic | 連結 |