網站又改版啦～這次首頁變成一座可以逛的小島
上次改成 Astro 的時候說 這次改完後應該不會再改了...吧 嗯...果然還是改了 啊哈哈哈哈 回頭看看自己的首頁...一直都是文章列表 XD 之前的待辦事項還寫著「首頁內容 (目前先用文章列表撐下場面)」，結果這一撐就撐了三年 囧 剛好這幾年做了一些 s
搜尋筆記
輸入關鍵字搜尋文章標題。
2026
Vibe Coding 之旅：從零打造書櫃日記 App
「以前一個前端工程師很難獨立完成 App + Backend + DB + Landing Page。現在，我做到了。」 身為一個寫了多年 Angular 的前端工程師，我從沒想過有一天能獨立完成一款手機 App——從 UI 到後端、從資料庫到雲端部署，以及
Cloudflare Workers 圖片壓縮實戰：減少 85% 的踩坑歷程
把書籍封面圖從 390KB 壓到 58KB，減少 85%！這篇文章記錄了我從 Google Apps Script 遷移到 Cloudflare Workers 實現 WebP 壓縮的完整過程，包含各種套件的嘗試與踩坑經驗。 最近在開發一個書架管理 App，使
2025
Vibe Coding 實戰心得
身為一個寫了多年 Angular 的前端工程師，我從沒想過有一天會用 React Native 做手機 App、用 Three.js 做 3D 視覺化。 這一切都要歸功於 AI。 這是早期的 side project，最近用 AI 幫它加上了會員系統——也是實
Astro 5.x 升級實戰：從 4.10 到 5.14 的完整遷移指南
最近進行部落格的技術升級，首先從 Astro 4.10.1 升級到 5.14.1，接著再處理 TailwindCSS v4 升級。Astro 的升級相對平順，主要是 API 變更和最佳實踐的調整，沒有 TailwindCSS 那麼多坑要踩。 升級版本： Ast
Astro + TailwindCSS v4 升級實戰：從 v3 到 v4 的完整遷移指南
最近將部落格從 TailwindCSS v3.4.18 升級到 v4.1.14，過程中踩了不少坑，特別是自訂顏色完全消失的問題讓我困擾了很久。這篇文章記錄完整的升級過程和解決方案，希望能幫助到有相同需求的朋友。 專案環境： Astro 5.14.1 Tailw
2024
2023
尾聲
在認識 Astro 之前，也用過了不少框架架設 Blog 從最一開始的 HEXO, Angular Scully, 後來改為 Angular Universal 方式架設，直到現在改用 Astro。 原因無它，只因為受限太多．最後換成 Angular Univ
實作 Astro 部署：將網站部署到 GitHub Pages
Astro 裡有許多部屬方式，因我們這次介紹是針對初學者架設，所以選擇了 github pages 開啟 astro.config.mjs 檔案。這個檔案用於設定你的 Astro 網站相關的設定。 site：將site設定為你的GitHub Pages網址，或
實作 Astro 功能：換頁過場動畫 (View Transitions)
Astro 3.0 加入了全新的功能 - 視圖轉換（View Transitions），它可以實現頁面之間更平滑的切換效果，無需進行瀏覽器的完整頁面刷新。今天我們就來把之前做過的頁面加上View Transitions的效果吧！ 首先，讓我們將視圖轉換效果應用
實作 Astro 頁面：建立聯絡表單
今天來實做做個簡易的聯絡表單。 聯絡表單是網站的重要元素之一，它使訪問者能夠輕鬆地與網站管理者或網站擁有者取得聯繫。 透過這個表單，訪問者可以提供他們的名字、電子郵件地址、手機號碼以及訊息，這對於商業網站來說尤其重要，因為它讓客戶能夠提問問題、提供反饋或請求更
實作 Astro 功能：文章搜尋(Search)
當網站內容一多的話，很難快速找到我們想要的文章。 搜尋功能可以幫助用戶輕鬆找到所需的內容，提升使用者體驗，並提高網站的互動性和價值。 今天，將介紹如何在 Astro 框架中實現一個基本的搜尋系統，以加強你的網站。 以下是完成後的頁面，分別是搜尋後顯示的列表與未
實作 Astro 組件：文章留言版
一篇文章底下，如果有個留言版，可以讓讀者分享他們的看法、提出問題，今天我們將介紹如何在文章底下新增留言版 如圖所示 utterances 是一個基於 GitHub Issues 的評論系統，它可以讓使用者使用他們的 GitHub 帳戶來發表評論，且內容會存在
實作 Astro 組件：麵包屑 (Bread Crumbs)
今天，我們將實作如何使用 Astro 創建一個導覽麵包屑（Breadcrumbs）組件，以增加網站的導航和用戶體驗。導航面包屑通常用於指示用戶的當前位置，並使他們能夠輕鬆返回上一層或之前的頁面。 以下是完成後的畫面 首先，讓我們看一下創建面包屑導航所需的程式碼
實作 Astro 組件：文章目錄 (Toc)
在前面的教學中，我們學習了如何建立文章列表和實現分頁功能。然而，內容頁面目前看起來有些單調，因此，今天我們將優化內容頁面，為文章新增一個文章目錄。 文章目錄是一個常見的功能，特別對於長篇內容非常有用。它允許讀者輕鬆尋找和導航到內容中的特定段落或章節。今天，我們
實作 Astro 組件：格式化日期(FormattedDate) 與 卡片(Card)
在前幾天的文章中，我們已經學會了如何建立文章列表和實現分頁功能。 然而，目前的文章列表頁面看起來相當簡單，而日期格式也不符合我想要的需求。 所以今天要實做兩個組件。分別是 日期格式化顯示、與卡片樣式 以下是完成後的畫面 在 src/components 裡建立
實作 Astro 功能：文章標籤 (Tags)
在前幾天，我們已經學會了如何建立文章列表，今天將介紹如何在 Astro 裡實現文章標籤與標籤列表頁面。文章標籤是不可或缺的，它有助於組織和分類文章，讓讀者更輕鬆地尋找相關內容！ 在開始之前，確保你的文章資訊中包含了標籤（tags）的資訊。這些標籤將用於分類文章
實作 Astro 頁面：建立文章列表分頁 (Pagination)
昨天，我們已經學習了如何建立文章列表頁面。 今天，我們將進一步學習如何在 Astro 專案中實現分頁功能，以便更好地管理和顯示內容，特別是當內容列表變得過長時。我們將使用 Tailwind Components 這個分頁樣版來套用。 在前幾篇文章中，我們已經了
實作 Astro 頁面：建立 Blog 文章列表
今天，我們將學習如何使用 Astro 項目建立一個部落格文章列表頁面，並確保這些文章按照日期由新到舊的順序排列。 在 src/pages/blog/index.astro 文件中，我們使用以下程式碼來查詢部落格內容並呈現文章列表 這段程式碼中，我們使用 get
重構 Astro Blog，實現統一的外觀佈局
在我們之前的教學中，我們學習如何整合 Tailwind CSS 並創建 Astro 項目的基本組件。 現在，我們將更進一步，通過建立一個統一的佈局（Layout），確保所有頁面在外觀上保持一致，提高整體專業度和使用者體驗。 首先，在 src/layouts 文
實作 Astro 組件：新增深色模式 (Dark Mode)
在前一篇教學中，我們已成功整合了 Tailwind CSS 到我們的 Astro 項目中，並且已經設定好所需的變數。 今天，我們將進一步為我們的網站添加一個常見的功能：深色模式（Dark Mode）。 現在，我們將創建一個切換組件來啟用和禁用 Dark Mod
實作 Astro Tailwind CSS 變數設定
在這篇文章中，我們將學習如何建立 Dark Mode 所需的 CSS 變數，以使我們的網站能夠在不同模式下切換。 首先，在 styles/global.css 文件中，我們需要宣告一組 CSS 變數，用來定義 Dark Theme 和 Light Theme
Astro 整合：使用 Tailwind CSS 優化你的 Blog
看了這麼多天的文章介紹 Astro，是不是心動想躍躍欲試了呢？ 接下來，我們將開始實作我們的 blog。 將我們第二天文章裡介紹的開發環境啟動後，會看到以下畫面 接下來，都將會使用 tailwind CSS 來撰寫版面樣式，來優化這個 Blog！ 你可以使用以
使用 Astro Data fetch 抓取 API 資料
在昨天我們了解了如何在 Astro 中獲取內容集合中的文章資料，但現在可能會有更多問題：如果我們的資料來自 API 呢？這時，就可以使用 Astro 的數據提取功能。 在 Astro 中，所有組件都可以訪問全局的 fetch() 函數，以向 API 發送 HT
了解 Astro Content Collections（內容集合）
在 Astro 2.0.0 版本中，引入了 Content Collections 功能，這是一個極其強大的工具，用於管理和展示您的網站內容。本篇將帶您深入探討 Astro Content Collections，包括如何建立集合、定義集合結構、呈現內容，以及
了解 Markdown：網站開發和內容創作的強大工具
在網站開發和內容創作中，Markdown 是一種簡單而強大的標記語言，它能夠幫助你輕鬆地創建格式豐富的文本內容，例如文章、文檔和筆記。在本教學中，我們將深入了解 Markdown 的基本語法和用法，並學習如何在 Astro 項目的文章內容中應用 Markdow
了解 Astro 的路由設定：路由 (Route)
在前幾篇中我們介紹了 Astro 中的 Page 概念，今天讓我們更深入地探討路由，了解它在網站開發中的重要性以及如何在 Astro 中使用不同類型的路由。 在網站開發中，「路由」是指將特定的 URL 路徑映射到特定的網頁內容或功能。簡單來說，當用戶訪問某個
了解 Astro 圖片處理 (Image)
Astro 提供多種方法來有效地管理和顯示圖片，不論它們是存儲在專案內部、遠程連結，還是由內容管理系統（CMS）或內容分發網絡（CDN）管理。 我們建議將本地圖片存儲在 src/ 目錄下，以允許 Astro 對其進行轉換、優化和打包。 位於 /public 目
了解 Astro 的樣式設定 (Style)
昨天我們了解了 Astro 的樣版語法元素，今天我們將深入研究 Astro 中的樣式部分。 在 Astro 中，要為元件或頁面模板設置樣式，只需添加 標籤即可。當您將 標籤放入 Astro 元件中時，Astro 會自動偵測 CSS 並處理樣式。 範例： Ast
了解 Astro 語法元素 (Template)
在這份教學中，我們將深入瞭解 Astro 語法的一些主要元素和相關範例，幫助您更好地理解如何使用 Astro 來建立網頁。 Astro 允許您在組件中綁定動態資料，這可以是來自組件屬性的資料，也可以是從資料源中獲取的資料。使用大括號 {} 來實現這一功能。以下
認識 Astro Layouts (佈局)
在 Astro 中，佈局是一種特殊的組件，旨在提供可重複使用的 UI 結構，通常用於頁面模板。我們經常使用 "佈局" 一詞來指稱提供頁面中共享元素的 Astro 組件，例如頁首 (header)、導航欄和頁尾 (footer)。一個典型的 Astro 佈局組件
認識 Astro Pages (頁面)
在 Astro 項目中，Pages扮演了重要角色。這些頁面位於 src/pages/ 子目錄下，負責處理網站的路由、數據加載和整體頁面佈局。 今天，我們將探討 Astro 頁面的類型、路由策略和如何連接它們。 Astro 支援多種頁面文件類型，包括： .ast
認識 Astro Components (組件)
今天，我們將進一步深入了解 Astro 的組件。 Astro 組件是 Astro 專案的基本構建塊，它們是僅支持 HTML 的模板組件，沒有客戶端運行時。您可以通過文件擴展名 .astro 識別 Astro 組件。 非常靈活，可包含可重複使用的 UI 元素。
了解 Astro 專案的架構
現在，我們將深入了解 Astro 專案的結構，這有助於您更好地理解 Astro 應用的架構和組織方式。 Astro 專案的結構如下： 以下是每個資料夾的檔案與用途說明： Astro 專案的程式碼存放在 src 資料夾中，這包括： 元件（Components）
Astro 基礎介紹與開發環境設定
前面已經介紹了 Astro 的優點，相信你已經迫不及待要開始試用了！現在，我們將逐步指導你如何設定適合開發 Astro 的環境。 首先，請確保你已經安裝了以下的工具和環境： Node.js 和 npm：請確保你已經安裝了 Node.js 和 npm（Node
Astro v3 帶來的新特性
很幸運在開賽前幾天遇到版本更新，那就讓我們來看看 Astro 3.0 帶來了哪些重要的改變。 Astro 3.0 引入了 View Transitions API，這是一組全新的平台 API，讓您可以在網頁頁面之間實現原生瀏覽器過渡效果，包括淡入淡出、滑動和更
為什麼會選 Astro
基於本身是純前端開發者，偶然看到了 Astro 的特性，被深深吸引，雖然現在有許多靜態網站的產生器，但裡面參雜著各種語言，想要客製化樣式的時後也不好改，且也繁複。而 Astro 採用了一種獨特的結構，將 HTML、CSS 和 JS 整合在一個單一檔案中。這讓程
網站再次改版 這次改用 Astro 啦～
這次再次將整個網站翻寫啦，雖然樣沒什麼改，但整個框架已大改！！！ 偶然看到 Astro 這個新的框架，整個就是驚為天人啊啊啊 之前被我詬病的 SEO 問題，在 Astro 應該可以解決掉 XD 這個框架只需要熟悉 HTML 與 CSS 就足夠了，學習曲線相對較
使用 SCSS 建立一個 Palette 產生器
宣告變數，以500為主色， 500 以下明度會依續遞增彩度降低，驅近於白 500 以上明度會依續遞減彩度降低，驅近於黑 A100 A700 則是改變主色的飽合度 這裡的變數宣告能當做是 js 裡的陣列，不過在 scss 裡 沒有 string 與 number
2022
初探 Python，用 Python 來寫個爬蟲吧
可到 https://www.python.org/ 這裡進行下載符合作業系統的 python 使用。 網路上有很多 python 安裝教學，這裡就不再贅述囉 安裝的版本是 Python 3.10.8 這裡只有列出目前有在使用的。 查詢 python 版本 查
使用 Angular 安裝 TailwindCSS
Angular 14.2.3 Node 14.16.1 編輯器 vscode 寫這篇文章的時後，所安裝的是 TailwindCSS v3 版本 以下將是 TailwindCSS v3 版介紹 在根目錄底下會多出一支 tailwind.config.js 所有
Angular Window Resize Event (偵測視窗縮放事件)
偶然發現 Angular 有蠻多種方式可以偵到一些視窗事件，順手記錄下來 在 subscribe 前 可再多做些設定，當 resize 時，不用一直觸發，300ms 偵測一次就好
人生第一間房：藝術漆牆面DIY
如上篇所述因為請師傅來刷藝術漆在太貴了，一般行情約 60008000 / 坪，且需要上漆的部份有電視牆面與床頭背板，加起來大約三坪上下。做完也是要上萬塊 嗯...太貴了 .< 摸摸口袋深度，也順便了解了下藝術漆到底是在做什麼的，得到一些刷藝術漆的結論就是，刷藝
人生第一間房：從無到有全記錄
是磚牆格局 建商附的是金利登的玫瑰白 驗屋這部份沒有另外請驗屋公司，就上網爬文，將相關注意事項記下來，在驗屋的時後，代銷這裡也有跟著我們一起驗，一起測試，有問題幫忙記錄，請建商一起修繕。 當時驗的部份有 漏水測試 水管是否有阻塞，通不通 地板碰供 網路與電路等
在 windows 環境下安裝 docker
記錄一下安裝 docker 時所遇到的問題 因為工作上的一些問題 需要在電腦上安裝 docker 測試，裝了後一直噴錯打不開 再 cmd 上執行 docker ps 則是一直報錯 打開 Docker Desktop 就會一直出現這畫面，按下 quit 後，接著
Angular ControlValueAccessor (客製表單控制項)
當需要做 component 裡的表單特定值的連動，就會 ControlValueAccessor 就是不可或缺的要件 建立新的 component 透過 implements ControlValueAccessor 達到表單值與不同 component 間
Async/Await vs RxJS 非同步取值筆記
在使用 async/await 一定要先了解 Promise Promise 是 es6 之後才開始有的 Promise 程式碼 將 promise 封裝後包成 function 使用 promise 可轉成 then 的串接 async/await 範例 R
GitHub Pages 設定 Google Domain 個人網域
隔了好久，終於也買了個人網域啦～ 短網址就是爽！ 建立兩筆新的記錄 設定四組 IP 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 設定 CNAME 如下圖 切換到 Setting
在 Angular 文章裡幫程式碼加上語法高亮 (highlight)
create highlight.service 在 styles.scss 引入 (可選自己喜歡的樣式引入) Themes https://highlightjs.org/static/demo/ prismjs 不只提供了 higtlight 樣式，也提供
使用 RXJS 取消 http request
因為需求，有時後需要取消處理中的 http request 所以就來做個筆記吧 模擬另一種情境，比如說在 ngrx 裡處理，這裡寫的很簡略，只寫了方法，但沒有 ngrx 的寫法
2021
樹狀結構的各種處理 (Tree Data Structure)
最近為了處理 tree 的樹狀結構多了好幾根白頭髮，囧 這是一筆 tree (樹) 的資料 參考資料： The Tree data structure
如何使用 Github Actions 自動部署 Angular 到 Github Pages
Github 多了一個 Actions 的新功能，當 push 檔案到 Github 的時後，就會自動跑 CI/CD 部署 這個功能真是太方便啦!!! Angular 有提供了一個 Deploy 的功能 這次選用了 angular-cli-ghpages 加入
Angular Providers
一直以來對 Angular Providers 這部份都還是有存在著半知半解的狀態，就趁著這次機會一次搞懂它吧！ Providers 提供了四種注入方式 Class Provider : useClass Value Provider: useValue Fa
如何在 Angular 獲取 URL 資訊
在實作裡，很多時後我們會將一些必要資訊記錄在網址上，直接在網址裡就能得到我們要的訊息 不用再透過組件將資訊層層傳遞，達到解耦合的效果。 註：一切一切 都只是我用來舉例，不代表為鐵人賽網址真正的實際規劃哦！ 例如：我的鐵人賽主題網址為 https://ithel
如何在 Angular 建立 Breadcrumb (麵包屑)
麵包屑 為提供網站裡的導航，讓使用者容易了解當下所在的位置 剛好也呼應前一天使用 router 的部份 現在位置：首頁 / 列表 / 內容 Angular 裡的 router 架構 通常會命名為 app-routing.module.ts 這裡會需要帶點 rx
Angular 路由守衛(登入篇)
經過了昨天的介紹，今天就來看看使用登入範例囉 今天的登入資料依然是使用 FakeStoreAPI 這裡就做個簡單的驗証，沒填值就不能按按鈕 若是有成功得到 token 就裝這狀態記錄在 setToken$ 裡 在 canEnter 訂閱剛剛的 setToken
Angular 路由守衛
我們在開發的過程中，經常會遇到需要某些權限才能進入的頁面，這時後就會需要路由守衛的機制啦， 而它最常用在登入畫面時 Angular CLI 提供了命令列工具，可以快速建立路由守衛框架檔案： 或 官網介紹：guard 執行後，Angular CLI 會問我們需要
Angular 筆記 css 樣式篇
今天就只是個筆記，單純記錄寫法如何使用，以便自己日後查找，畢竟人非聖賢、會忘難免 XD 套用 className 變數為 isDark，value 必需為 boolean 在 html 的 dom 裡設定 https://angular.tw/api/comm
Angular 客製彈出視窗
因為我的這個 blog 需要一個彈出視窗做提示，而套件裡的樣式我都不喜歡，所以今天就來客製化一個吧！ 這次的彈出視窗會使用 Angular Material 裡的 cdk 來做開發 安裝 cdk 注意： 若發現 @angular/cdk 裡的某些功能不能掛載，
Angular ViewChild 與 ViewChildren 介紹
ViewChild 這個屬性在 Angular 是屬於很常用的一部份 今天就來了解一下 ViewChild 與 ViewChildren 的差別與使用方式吧！ HelloComponent 子組件 屬性裝飾器，用於配置一個檢視查詢。 變更檢測器會在檢視的 DO
如何在 Angular 取得當前頁面的絕對路徑
當有一個連結需要另開新頁時，在 develop 或 production 需要對應到正確的路徑 Angular 提供了這個方式 https://angular.tw/api/common/Locationprepareexternalurl 所以我就做了以下的
Angular 淺拷貝之日記文
又踩雷啦啊哈哈哈哈哈。 來重現一下遇到的情境吧 一開始建了一個 fruit 的物件，裡面有 apple 與 banana 這兩樣空物件 在 OnInit 時，賦予了 apple 與 banana 值 當我按下 button Click 的 時後， apple
使用 Angular 做檔案編碼檢測 (detect-encoding)
前一陣子，後端有個需求是在檔案上傳前，需要提前知道上傳的檔案編碼 是 UTF-8 或是 ascii 等，才能決定要不要將檔案放進資料庫，或是在這之前再做一次轉檔。 今天的內容跟 Angular 比較沒有關係，屬於套件分享，但因也是使用 Angular 實作，所
Angular 轉換 API 資料格式 (Adapter)
今天的內容屬於設計模式的一種。 當我們從後端接到資料後，有時後資料格式往往不是如我們所想，所以會再加工做個轉換的動作。 所以就要使用 TypeScript 來做個轉接器，轉成我們所需的資料！ 就拿前幾天的文章 Angular 如何取得 API 資料 繼續做介紹
Angular ElementRef、TemplateRef、viewContainerRef 的區別
今天就來聊聊 ElementRef、TemplateRef、viewContainerRef，者實說，在這之前一直都沒很認真搞懂這部份 就趁著這次機會一起來看看吧！ 用於檢視 HTML DOM 元素，可以在瀏覽器中取得 DOM 的原生 Element Elem
Angular ng-template 與 ngTemplateOutlet
ngTemplateOutlet 這裡我解釋為 ng-template 裡的插槽 來看看實際上會是如何使用 先來段程式碼，這裡為一筆物件資料 HTML ngTemplateOutlet 這個插槽的名字 我們取做 jsonData 在 ng-template 的
Angular ng-container 與 ng-template
接續昨天的範例。 今天要聊的是 ng-container 與 ng-template 上面程式碼所要表達的是，若是資料大於 0 筆，頁面上就會呈現列表，沒有資料的時後在畫面上顯示 No Data ng-container 在 Angular 的 templat
Angular ngIf 與 Async Pipe
當我們在 template 訂閱一組資料，而需要對它做一些邏輯處理的時後。 .ts .html 若像上述這樣的寫法，會造成重覆訂閱而增加 server 的負擔，所以在實作上，通常會避免這情況發生 將 html 寫法稍做修改 將 products$ async
Rxjs 各種解訂閱方式
昨天說到了將資料訂閱出來渲染在頁面上的事，那麼就就來說說 RxJs 解訂閱這件事吧。 這也是為了避免 memory leak，或重覆訂閱所造成的 BUG，若非有限訂閱，通常在訂閱離開後，都需要解訂閱。 只執行第一次，通常用於第一次進來讀取成功取得資料後，就不需
Angular 如何取得 API 資料
既然昨天已經說了 http post 這件事，那今天就來說說 http get 這部份吧！ 今天的資料依然使用 FakeStoreAPI 樣式套用 Angular Material 從 api 取得列表後，把資料渲染到 html 上 app.module.ts
Angular 如何將多筆資料上傳後，取得全部回傳資料，再送到另一支 API
來回顧一下前幾天的日記文 Angular 圖片上傳之...日記文 程式碼流程規劃之...日記文 與今天介紹的內容有關，如何將多筆資料上傳後，取得全部回傳資料後 再將其資料整理，送到另一支 API 這次將會使用 RxJS 來做處理 我有一筆訂單，裡面有許多的產品
Angular 下拉選單如何選定預設值
當表單送出後，資料庫會記錄送出後的值，下次再進來時，會需要重現上一次所填寫過的內容，這在實作上是很常遇到的事情。 原以為這是件很簡單的事，讀取資料後，直接把值填上後即可(我想得太簡單了)， 當實作時，卻怎麼樣也選不了預設值，後來發現在需要在 select 裡
Angular 冒泡事件
今天就來個說個在新手時期很常遇到，但卻不知為什麼會發生的問題 來看一下我們前幾天的表單範例，與圖上 console 的部份 在操控表單的時後，發現在點選新增欄位時，連submit 也一起被觸發了！ 這是怎麼一回事呢！！！，明明就沒有按送出呀！ 原來是 Java
Angular Reactive Forms 自訂表單驗証器
有表單 當然少不了驗証，這次的情境是 名字是必填欄位。 手機不一定會是必填，但填了後必須符合手機的格式，09 開頭 共 10 碼 來囉！！ 在這個 form 表單的下方 新增一個驗証方式，動態驗証就寫在 validator 這裡面 .ts 若是號碼填寫錯誤，把
程式碼流程規劃之日記文
今天，依然是篇日記文，每天遇到的事有太多好寫了。 一早 同事：Mandy, 今天是 deadline 囉，做好了嗎? 我：還差了 bala bala... 同事：有什麼需要協助的話，要快說哦 我：嗯...好 ! XD 接著繼續處理未完的專案 這次的情境是，表單
Angular 圖片上傳之日記文
本來預定今天要發佈的文章延後了，今天要要來分享這一兩天的踩雷心路歷，花了一半天時間，連鐵人都沒時間寫，還好有一些些存檔 ! 這次公司專案需要做到圖片上傳這部份的處理，因這次的套件對於手動上傳沒有支援太多，所以需要自己處理這部份，接著就是一連串的踩雷過程...
Angular Reactive Form 表單 setValue 與 patchValue 差異
今天就來說說 setValue 與 patchValue 差異這部份吧 一開始不太能理解這 setValue 與 patchValue 到底差在哪裡(官網的說明讓我不是很懂，理解力太差了 XD)，不是一樣都是賦值給 form 嗎 這幾天在使用的過程中，踩了一些
Angular Reactive Form 響應式表單 (formArray)
昨天介紹了 formControl 如何使用 今天來介紹 formArray 這部份老實說花了我不少時間才懂 XD 今天要在表單裡加上喜好，喜好會有很多，所以我們來使用 formArray 處理，預設值先給它一個空陣列 ts 程式裡的 favorites 是一
Angular Reactive Form 響應式表單 (formControl)
昨天我們看了 一長串的表單使用範例 都是經過理解消化後所寫出來的 code ，那麼今天就來聊一聊消化的過程吧！ 一開始 建立一個新的 form 表單，它會是一組的 group form 後面加上! 是 Typescript 2.0 的 non-null 可參考
Angular Reactive Form 表單
表單在實作上是件常見的的處理，為什麼會寫這篇呢？實在是因為我太容易忘了 XD 還記得一開始接觸到表單操控時， Angular reactive form 的官方文件它雖然寫的很清楚，但對於當時剛趟入 Angular 領域的我 還是看的一頭霧水，尤其是在 for
JS 匯出 CSV 破版
專案裡有很多需要把表格下載成 CSV 檔，最近出現了 CSV 破版的問題 情境如下： 原本某個儲存格裡面的內容裡面有換行，匯出成 CSV 時，照理說，換行應該是在當下儲存格做換行，沒想到卻變成了這樣 QQ 在資料來源裡，可以看到，換行的地方是 \n 因為這個\
Scully 新增留言系統
這次選定了 utterances 來當留言系統，它是使用 github issue 當成網站的留言系統 先前是使用 DISQUS 覺得不是很好用，所以趁著這次翻寫時 也一起換掉了 (雖說也沒什麼人會留言啦 哈哈哈) 先在 github 裡安裝 utteranc
拋棄 jQuery 用 JS 寫一個 gotop (回到最上) 功能吧!
jQuery 裡有提供一些動畫的函式庫 animate 讓使用者直接使用，所以短短幾行就能搞定 了 但為了一個 gotop 的功能 掛上一支 jQuery，實在有點不滑算，所以這裡使用了原生的 JS 來寫出相同效果的 gotop 在 JS 裡 有提供一個 wi
Scully 佈署到 github
終於！用 scully 把先前的 Blog 翻寫完成了!!! 灑花～ 接著當然是要把頁面佈署到 github 讓其他人看到啦 不然也只能自己自 high XD 首先安裝 angular-cli-ghpages 輸入 ngh --version 可檢查本機是否已
Blog 改版 使用 Scully 翻寫
在這裡 https://mtwmt.github.io/angular/scullyinstall 因為這個契機，使得開始動手這一切，將原本使用 hexo 改用 Angular Scully 建置 Blog 嗯...花了快半年的時間 看我有奪會拖就知道，畢竟平
如何將 Angular library 裡的 scss/sass 正確導出
因專案越來越龐大，需要將一些共用元件抽出來做 library 放到 npm 上，在其他專案在開 發時也能一起使用，以便節省開發時間。 照著官網的教學建立: https://angular.tw/guide/creating-libraries 建立完後 將所需
2020
Angular viewchild undefined with ngIf
當 angular 裡的 範本變數裡使用到 ngIf，在執行範本變數的時後會報錯，出現 undefined，無法操控 程式碼如下 html component 使用 ngIf 時，一開始執行 ngOnInit，這個 dom 是不存在的，所以去操控這個 dom
JS Template Strings ( 模版字串 / 樣版字串 )
過去寫法 以 jquery 為例 上面這種寫法相當繁鎖不方便，ES6 引入了樣版字串解決這個問題 如果在字串裡需要使用到反引號，則前面要用反斜線(逃役字元)轉義 所有樣版字串 在使用多行字串時，所有的空格與縮排都是會被保留的，若不想要這個換行 可以使用 tri
Hexo：Github 上傳佈署後 檔名大小寫問題
最近在整理以前寫過的文章分類，把一些檔名的大小寫稍做調整， 發現文章佈署到 git 上後，git 對於檔名大小寫的更動 檔案不會更新， 導致頁面出現 404 找不到頁面 在 hexo 的目錄下 找到 .deploygit/.git/config 修改 igno
JS Object 物件的屬性特徵
印出來後 如圖所示 修改物件裡面屬性的值可以是 obj.a = 4 或 obj[a] = 4 這兩種方法都可以 定義物件裡的屬性 與 調整屬性特徵 特徵： 值(value) = 對應的值是甚麼 可否寫入(writable) = 可否進行屬性質的修改 可否被刪除
Angular HttpParams
這篇記錄著關於如何使用 Angular HttpParams 且 HttpParams 接收的參數值必定要轉為字串才可以 在 service.ts 引入 以上是基本的傳參數方式，然而 Angular 提供了一些方法讓我們使用 若參數已存在 則後面會取代前面 或
Angular Router 筆記
在 app.module.ts 引入 RouterModule ps.注意：路徑不包含斜線 Route Guards 路由守衛 預設導址 網址 http://localhost:4200/list/網址變數 routing.module ts 設定網址連結 (
初探 Scully 建立 blog
原本就是寫 Angular 框架的我，最近得知 Scully 屬 Angular 的靜態頁面產生器，激起了 我的好奇心所以開始了以下路程 官方文件：https://scully.io/ 使用環境 先建立一個新的 ng 專案 新增 Scully 註：安裝完後 需
Reactive Forms in Angular Disabled Warning ( 響應式表單 Disabled Warning )
當我們在使用 Angular Reactive Forms 時 如 用到 disable 時 console 會噴出以下警告訊息 Angular 官方是建議在 ts 檔裡處理，但某些時後 在 html 裡處理會比在 ts 裡處理還要來的簡潔 便利 如： 有時後
Angular Router Change 踩雷日記
最近在專案上出現了一個，點導址按鈕導頁後，出現 api 重覆打的情形 而且還是在特定會在 side bar 點了才會出現這 bug 奇怪了，之前做的都沒遇過這問題呀，寫的方式也都是一樣 花了好多間找問題點 怎麼找都找不到 找過 router, reslover
D3 Range 解析
d3 range 屬於 d3-array 的一部份 源始碼如下 拆解後如下 因為要做計算所以 將傳進來的值強制轉為數字型別 可參考 你懂 JavaScript 嗎？8 強制轉型（Coercion） 拆解後如下 arguments 關於 arguments 可參
vscode：cdnjs
搜尋 js 套件名稱，並直接引入 CDN 連結網址蠻方便的其實 安裝後 按 ctrl + shift + p 鍵入 cdnjs search for libraries 輸入要引入的套 件名稱接著選擇版本 即可使用！
Gulp：gulp-iconfont ( 將 svg 轉 iconfont 字型 )
將 svg 轉 iconfont 字型 將 svg 輸出成 字型檔後 再來就是 css templpate 的 撰寫了 這裡關係著如何在 css 裡引用字型 可以依個人需求做客製化 這裡稍微參考了一下 fontawesome 的用法來建立 css templa
Gulp：gulp-file-include
將共用的 html 抽出來 變成共用檔 於 20200523 更新 拿掉舊有寫法與更新一些個人設定 常常在編輯 html 時 會遇到許多共同地方 如 header footer 當時想著 如果能跟後端一樣 將共用的地方取出來 需要時 再 inclde 裡去時
Gulp：自動化 rwd css sprite ( 自適應雪碧圖 )
將許多 icon 小圖轉換成大圖 做成 sprite 於 20200523 更新 拿掉舊有寫法 加上新的 cssTemplate 這次更新是因為把之前寫的很醜的 cssTemplate 翻新重寫 也因為個人需求 在 sprite 載入的圖檔轉成 base64
Angular Pipe (管道)
在 Angular 裡用來做一個簡單的數據轉換 這次做的是數值對應 ASCII Table 對照表 在 terminal 裡鍵入 建立一個新的 pipe pipe.ts 在 module.ts 引入 html ts
JS Array 新增值的幾種方式
在工作上時 會常常處理到陣列傳遞的情況，偶然看到一些國外的文章寫整理的蠻好的，也就此剛好記錄下來 直接將新的值加到後面 es6 可以這樣寫 splice 可以在很多情境上使用 可用來新增新的值，或是取代某個值等 這裡就介紹新增值的部份 array.splice
2019
D3 資料綁定與更新
玩 d3 一定要了解的 d3 的資料綁定機制不然要怎麼讓畫面跑出來呢 XDDD 當我有一組的資料 想讓圖表依續產生時 就會用到 data 或 datum 將資料傳入 以便後續圖 表繪製動作 data 綁定一組資料 datum 綁定單一筆資料 先看圖會先較清楚些
更改 ag-grid 資料欄位顯示 ( ag-grid component )
在 gridOptions 加上 frameworkComponents 在相對應的 columnDefs 裡設定 自訂義組件 或 DEMO: angularag-gridcomponent
D3 v5 與 v3 差異
最近因為專案需求 需要用到 D3 來畫圖表 而公司用的是 v5 版本 (v4 以上的版本已不相容以下版本) 剛開始初入 D3 的我 像個無頭蒼蠅般 先隨意的找了網路上的範例來練習 寫了幾行 code 後 發現怎麼不能 run!!! 爬了下文 才知道 D3 在
hexo：Next 一鍵複製程式碼
最近發現新版 Next 7 版有支援一鍵複製程式碼的功能之前還傻傻的自己套 clipboard.js 來用 想不到早就有內建了 XDDD 只要到 config.yml 裡 的 390 行下 找到 copybutton 將 enable 改 true 即 可 檔
D3 序數比例尺 scaleBand
D3 的坐標不是只有數字，有時後也會用到除了數字以外的非連續性坐標這時後就有了 scaleBand 序數比例尺在這部份 v3 跟 v4 的版本寫了 有蠻大的落差而我是從 v5 才開始 真正的接觸到 d3 所以還是有小小踩到了一下 v3 轉 v5 時寫法差異的雷
修改 Material Expansion Panel (手風琴) 標題高度
因為 Material Expansion Panel 展開後的高度是使用動畫高度產生 所以 css 設定過後 仍會被蓋過 除非是下 !important 但在展開的過程中 會有先變高再縮回去的不順效果 在 Material 提供了我們兩個方式去設定 coll
支付寶被鎖 淘寶不能付款
第二次買淘寶，很開心的刷了一堆想要的東西，隔了幾天後不知道為什麼，要刷卡時就出現 支付寶就把我的帳號凍結了，無法支付集運運費 下載了支付寶 他要我綁定銀行卡 但我就是沒有大陸的銀行卡啊!! 所以我被凍結了 咨詢了一下支付寶的在線客服 星期日一大早就打了客服電話
Samsung Galaxy A50 root
請先備份所有重要資料 刷機有風險，失敗手機掛點一概不負責，請仔細考慮清楚 三星驅動程式 SAMSUNGUSBDriverforMobilePhones.zip (35.12MB) 刷機程式 Odin3v3.13.1 MagiskManager-v7.3.2.a
使用 ag-grid 讀取 server 端分頁 ( Ag-grid server-side with paginated RESTful API and Angular )
先稍微介紹分頁會用到的 gridOptions 功能 rowBuffer: 0; //在網格呈現的可滾動可視區域外部呈現的行數。預設為 20 有一個緩衝區意味著當用戶緩慢地垂直滾動時，表格將準備顯示行。 rowSelection: 'multiple'; //
Angular 動態載入組件
情境：tab 切換 app.module.ts component.html component.ts 新增預載入的component 另一種做法可以使用 if else 來做
Angular 組件傳值
一張圖說明 input 與 output 值的互相傳遞 透過 setter 截聽輸入屬性值的變化 把需要傳遞的 data 存到 service 裡然後再到 service 裡存取需要用的值 分別建立一個 list 跟 detail 的 compontent l
hexo：Next 主題更新
最近看到蠻多人的 blog next 這個主題裡多了好多功能 於是心血來潮來看一下 next 的主題是否有更新 赫然發現已更新至 7 版了 於是開始一連串的更新 發現舊版與新版架構完全不一樣 所以也可以當做一新全新的主題樣版來看待 更新後發現新版的 next
Angular 繫結方式
Angular 共有四種資料繫結的方法 [property]='statement' (event)='someMethod($event)' [(ngModel)]='property' component.ts component.html app.mod
JS地下城：11F-燈箱效果
【特定技術】不可用 JS 框架，只能單純用原生 JS。 【特定技術】需符合響應式設計。 【特定技術】當螢幕伸縮(resize)時，介面與 JS 功能也需正常 這次的關卡大部份就是練習 JS 的語法主要就是語法不熟 需要花時間去找出寫法 囧 這次燈箱的圖片 花了
JS地下城：4F-時區
【特定技術】僅能使用原生 JS 開始，不能使用套件 【特定技術】特別注意必須用 JS 處理各國時區 【書寫能力】請寫一篇 BLOG 來介紹你的挑戰過程，並介紹 JavaScript 如何提供 GMT、UTC 時區語法，以及何謂 TimeStamp。 這次使用了
JS地下城：1F-9x9 乘法表
【特定技術】需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印 出。 需使用 HTML、CSS、JS 技術 介面需與設計稿一致 demo 頁 sourse code 其實這篤文也拖了蠻久才產出來的，算是新手入門題目，for 迴
利用 js 搭配 css 繪製折線圖
利用 畢氏定理 畫出兩點間的斜線 算斜率有兩種函數 分別為 Math.atan() 與 Math.atan2() Math.atan() 接受一個參數，用法如下： angel 為一個角度的弧度值，slope是直線的斜率，是一個數字，這個數字可以是負的無窮大到正
初探 Typescript
繼承 property 預設都是 pubilc，若不想外外部存取的話 要加上 private 屬性宣告為 static 在使用時，不需要實體化就能呼叫 給屬性預設值 constructor 建構式 在 typescript 中 函式呼叫 傳遞的參數 必須與 函
JS地下城：10F-Chrome 應用程式(幹話產生器)
【特定技術】請開發 Chrome extension，不需上架，投稿時請提供安裝檔放在雲端，以 供 GM 下載測試。 【特定技術】打開 Chrome 新頁(tab)時，會隨機顯示你自己新增的語錄，或者是幹話。 【特定技術】可切換夜間/日間模式 【特定技術】新增
JS地下城：9F-抽獎轉盤
【特定技術】2017 遊戲輪盤規則輪盤只能轉 20 次，人人有獎 Flight：1 份 Child：4 份 Anything：5 份 Wifi：5 份 Wish：5 份已經被抽到的獎項，就不可再次出現 【特定技術】2018 遊戲輪盤規則編號 20：69 份編號
JS地下城：7F-畫版
【特定技術】繪圖區請使用 Canvas 來設計，上方的控制列與下方的畫筆調整可不用 SAVE ：點擊後可直接下載轉出的 PNG 圖片 CLEAR ALL：清除畫版樣式 UNDO、REDO：上 一步、下一步點擊箭頭時，功能列介面皆可進行收闔 【擴充功能】請再自行
JS地下城：8F-井字遊戲
【特定技術】先手為 O，後手為 X，某方獲勝時，上方會紀錄各方的獲勝戰績 【特定技術】每回合結束後，會判定結果頁(平手、Ｏ 獲勝、X 獲勝) 【特定技術】需符合 RWD，能在低螢幕解析度也能遊玩，介面不能超出 x 軸，至少在以 下解析度能夠遊玩。 iPhone
JS地下城：3F-計算機
【特定技術】數字位數過多時，不能因此而破版，計算機功能皆須齊全 這次使用 原生 JS 來挑戰這次關卡 demo 頁 sourse code 處理的問題有以下 ieee754 浮點數 字數過長 不造成破版 eval 加總 千分位進位 決定面版顯示資訊 做個 fl
JS地下城：6F-60秒算數遊戲
【特定技術】 0 20 秒為 1 位數計算 (5-3)，21 40 秒為 2 位數計算 (30\19)，41 60 秒為 3 位數計算 (332+312)，加減乘除規則請用隨機產生，不可寫 死題目，60 秒內可無限次數答題。 040 秒答對加一分，41 60
JS地下城：5F-全台空氣指標儀表板
【特定技術】必須使用 AJAX 技術串接資料 API，不可直些寫死資料在變數上。 【特定技術】上方切換城市(高雄、台北)後，下方會切換該城市的各地區 這次的關卡比較大的問題點就應該就是在 CORS 的問題處理上畢竟要用前端處理公開 api 這件事，本應由後經由
JS地下城：2F-時鐘
【特定技術】需使用 JS 原生語法的 getDate() 撈取時間，不可用套件 【特定技術】需使用 JS 原生語法的 setTimeout() 或 setInterval()，持續讓秒針、分 針、時針能夠以台北時區移動 這次時鐘的關卡，之 前js30 天的第二
JS30：05_Flex Panel Gallery
這次要來做的 點擊圖片後 動畫展開的效果 了解 flex 裡的空間分配 了解 js 的 toggle 與 includes 事件 flex-grow 剩餘空間分配比例 flex-shirk 壓縮比例 flex-basis 預約剩餘空間 三個值的縮寫為 若是 f
Gulp4 與 gulp-cli
指令 縮寫 ---------------------- -------- npm install npm i npm install --save npm i -S npm install --save-dev npm i -D --save 將此文件 安裝
JS30：07_Array Cardio Day 2
延續 04Array Cardio Day 的後續，繼續悉其他操作陣列的方法 這次作者提供了 people 與 comments 兩組資料做練習 練習的題目依序是 people 是否有人滿 19 歲 (some) people 是否全部人滿 19 歲 (eve
JS30：04_Array Cardio Day 1
此次主要是練習陣列的一些用法 分別有八個例子 作者一開始在 html 上提供了三組資料給大家練習 inventors是一組是發明家的列表 裡面包含 姓、名、出生年份、死亡年份 練習的題目依序是 篩選出 1500年 1600前出生的人 (filter) 將inv
利用 google.maps.LatLngBounds 讓googlemap自動縮放到適合的大小
如何讓所有地圖標記自動縮放都在可視範圍的區域 首先 可以先了解地圖的邊界值 先上 code GoogleMap event 參照 html javascript 在地圖上 隨意拖拉 放大縮小 可觀察到值的變動 接著加上多點景點的經緯度 在初始化地圖裡做些修改
2018
利用 google apps script 做中繼點跨網域遠端取得api資料
最近在練習 vue 時 會去政府公開 api 取資料 但有些 api 會有跨網域讀取限的問題 一開始在開發環境vue-cli有提供http-proxy-middleware做 proxy 處理跟網域這部份 但到了要發佈的時後 資料出現一樣會出現異常啊啊啊啊 像
hexo：Error:Cannot find module
一陣子沒更新的 blog 想記錄一下這幾天遇到的問題 就在寫好之際 想預覽一下 發現 hexo 也出問題了!!! 噴了一堆錯 估狗了一下 原來是前陣子在練習 vue 的時後 為了安裝 vue-cli 所以升級了 node 版本 想不到啊想不到 當下使用的 he
JS30：03_CSS Variables
這次認識到 input 裡更多的 type 屬性 range 、 color 因為平常不太會用到 所以特別去查了一下 原來是 html5 裡新增的屬性 可參照 HTML5 input type 屬性 了解 css 變數 利用 js 綁定監聽 input 變動的
JS30：02_JS and CSS Clock
認識 css transform與 transition 調整時鐘指針 使用new Date()來讀取當前的時間 認識setInterval()計時 transform css 變形 transform-oragin 設定變形軸心 transform:rota
JS30：01_JavaScript Drum Kit
了解鍵盤監聽事件 keyCode(鍵盤數字代碼) 鍵盤與聲音對應 畫面顯示所按到的鍵 (更改樣式) 此次排版主要是以 flex 為主 FLEX 速查小抄 key code 速查 cosnt 是 es6 裡新增的變數宣告 可參照 MDN-const es6 語法
rwd 自適應文字大小
在寫 rwd 頁面縮放的時後，常常會遇到因為視窗做縮放 超出的文字會往下擠 為了不破壞設計的美感，當然也希望文字能做縮放啊！ 那文字該如何做設定才能隨著視窗做縮放呢 在這裡我選擇使用 rem 這個單位 rem 的文字基準取決於最外層的 html 文字大小，很適
JS30：30_Whack A Mole!
先規劃地鼠出現時間 ( 亂數時間出現 ) 設定地鼠出現位置 將出現時間跟地鼠出現位置整合 點按鈕控制遊戲開始 打地鼠計分!! 上述算法的產生可參考 [[筆記][JavaScript]用 Math.random()取得亂數的技巧](https://ithelp.
vscode：vscode基本介紹與安裝
Windows %APPDATA%\Code\User\settings.json Mac $HOME/Library/Application Support/Code/User/settings.json Linux $HOME/.config/Code/U
vscode：Live Server 套件
Live Server 網頁伺服器 在串接 api 測試的時後非常的好用 依需求在設定裡更改預設配置 donotShowInfoMsg 關閉彈出訊息 useLocalIp 使用實體 ip 做為連線位址( 寫 rwd 頁 面時很實用 方便手機瀏覽 ) donot
vscode：Prettier 套件
Prettier 是程式碼格式化工具，可設定為存檔時自動格式化，不用再花時間去手動格式化 相對的對自己在撰寫習慣上 會易讀許多。 在 VSCODE 擴充功能 尋找 prettier 安裝 Prettier - Code formatter 這個版本 依需求在設
css圓角概念
就是基本的圓角 四邊的值都一樣 以順時針方式 依續由 左上 右上 右下 左下 設定各四個值 如下圖所示 沒斜線 4em 表示為 左上與右下 8em 表示為 右上與左下 CSS 值裡有斜線 斜線前表示 x 軸 斜線前表示 y 軸 如下圖所示 這個圓看起來有點奇怪
修改api(json)參數名稱(大小寫)
最近在跟後端合作時，常遇到 列表與明細頁的 api 相同， 但所提供的 api 卻是有分大小寫，在共用上常常因為大小寫不同，而導致 js 出錯 所以就只有在後端 api 吐過來的時後，先把 api 參數調整好，才能順利進行啊啊啊 codepen 參考
2017
jQuery-extend
這篇應該算是踩雷過後的學習記錄 這樣寫的話 會造成 a 的無窮迴圈 才能正常的做物件深度合併 http://www.css88.com/jqapi-1.9/jQuery.extend/ http://www.runoob.com/jquery/misc-ext
簡易 input focus 效果
input focus 的時後 去後 label 做變化 效果如下： 記得 input 裡一定要加 required 不然標題會一直卡在上面 css 注意要加上 -webkit-appearance: none; 這行屬性 取消 ios 的預設樣式 效果的話其
JS hoisting (變數提升)
所得到的結果依續會是 3 2 根據 js 的特性 一般在全域範圍裡 不管 function 寫在哪裡 整段函式都會被自動提升到最上面 當然 var 也是 但是 var 只會提升變數名稱 而後面的值並不會 所以 當 var 裡面的變數還沒有值的時後 回傳的值就會
JS scope chain (範圍鏈)
得到的結果會是 1 為什麼呢? 因為 function a、function b、var myVar = 1; 都是在同一個階層裡被宣告，以一般來說 如果外面沒有包任何東西 就是在全域裡被宣告 所以 b 函式在執行的時後 會往外一層是尋找 myVar 的變數，
jQuery-trigger
trigger 這個屬性是 jQuery 所建構出來的 官方文件介紹 http://api.jquery.com/trigger/ 沒錯 都是英文，他寫的很清楚，但我看的很模糊 算了下我花了快半年以上的時間 才真正搞懂如何去應用它(應該是吧?! 主要是這一串，
rwd 自適應高度大小
常常在寫網頁的時後 我們會需要設到寬跟高 但卻發生 為什麼寬能吃到 "%" 而高卻不能 在 pc 版的頁面上設置就算了 因為都是固定大小 但在這科技發展的時代裡 怎麼可能只有 pc 版的頁面呢!!? 當然是要加上目前引領時尚潮流的 RWD 呀 這樣拿出去才潮嘛
如何利用純 css 寫 switch 開關
利用 input checkbox 的 checked 特性來做到開關效果 效果如下： 可用 html 裡的 data 來當作選取器 避免 className 過多造成混亂 注意!! input 裡的 id 跟 label for 裡的名字記得要一樣 不然不會
input chexcbox
利用 css before、after 的特性 去修改裡面的 input 樣式 在 before 裡畫出一個 ✔ 使用矩形其中兩個長寬邊畫 border 線條 再利用 css3 rotate 屬性 旋轉 45 度 讓長寬兩個邊看起來像 ✔ 再來 將其比例縮小到
JS var 跟 let 差別 (變數宣告)
如何在 for 迴圈裡跑出利用 setTimeout 分別跑出 15 var 全域變數 ( 在函式的區塊內 )，若找不到會向上查找，直到沒有相同的變數名稱 let 區域變數 (es6 新增) 作用區在 {} 大括號裡 沒有 hoisting 的問題 const