Welcome to Mandy's website!https://mtwmt.com/https://mtwmt.com/blog/life/paper-island/https://mtwmt.com/blog/life/paper-island/上次改成 Astro 的時候說 這次改完後應該不會再改了...吧 嗯...果然還是改了 啊哈哈哈哈 回頭看看自己的首頁...一直都是文章列表 XD 之前的待辦事項還寫著「首頁內容 (目前先用文章列表撐下場面)」，結果這一撐就撐了三年 囧 剛好這幾年做了一些 sMon, 12 Oct 2026 00:00:00 GMThttps://mtwmt.com/blog/vibe-coding/bookshelf/https://mtwmt.com/blog/vibe-coding/bookshelf/「以前一個前端工程師很難獨立完成 App + Backend + DB + Landing Page。現在，我做到了。」 身為一個寫了多年 Angular 的前端工程師，我從沒想過有一天能獨立完成一款手機 App——從 UI 到後端、從資料庫到雲端部署，以及 Sun, 18 Jan 2026 00:00:00 GMThttps://mtwmt.com/blog/vibe-coding/webp_compression/https://mtwmt.com/blog/vibe-coding/webp_compression/把書籍封面圖從 390KB 壓到 58KB，減少 85%！這篇文章記錄了我從 Google Apps Script 遷移到 Cloudflare Workers 實現 WebP 壓縮的完整過程，包含各種套件的嘗試與踩坑經驗。 最近在開發一個書架管理 App，使Mon, 12 Jan 2026 00:00:00 GMThttps://mtwmt.com/blog/life/vibe-coding/https://mtwmt.com/blog/life/vibe-coding/身為一個寫了多年 Angular 的前端工程師，我從沒想過有一天會用 React Native 做手機 App、用 Three.js 做 3D 視覺化。 這一切都要歸功於 AI。 這是早期的 side project，最近用 AI 幫它加上了會員系統——也是實Tue, 30 Dec 2025 00:00:00 GMThttps://mtwmt.com/blog/astro/astro_v5_upgrade/https://mtwmt.com/blog/astro/astro_v5_upgrade/最近進行部落格的技術升級，首先從 Astro 4.10.1 升級到 5.14.1，接著再處理 TailwindCSS v4 升級。Astro 的升級相對平順，主要是 API 變更和最佳實踐的調整，沒有 TailwindCSS 那麼多坑要踩。 升級版本： AstSat, 04 Oct 2025 00:00:00 GMThttps://mtwmt.com/blog/tailwindcss/tailwind_v4_upgrade/https://mtwmt.com/blog/tailwindcss/tailwind_v4_upgrade/最近將部落格從 TailwindCSS v3.4.18 升級到 v4.1.14，過程中踩了不少坑，特別是自訂顏色完全消失的問題讓我困擾了很久。這篇文章記錄完整的升級過程和解決方案，希望能幫助到有相同需求的朋友。 專案環境： Astro 5.14.1 TailwSat, 04 Oct 2025 00:00:00 GMThttps://mtwmt.com/blog/life/2024_status/https://mtwmt.com/blog/life/2024_status/最近因沉溺於漫畫收藏，結果網站的更新就這樣荒廢了 XD 今天心血來潮，看看有沒有人透過網站聯絡我，結果居然真的有！ 再仔細一看，發現大部分訊息竟然都已經超過半年了。 天啊啊啊啊啊！真的很對不起那些透過表單聯絡我的朋友們。 之前只是簡單地把表單訊息同步到 GooThu, 24 Oct 2024 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_d30/https://mtwmt.com/blog/ironman2023/astro_d30/在認識 Astro 之前，也用過了不少框架架設 Blog 從最一開始的 HEXO, Angular Scully, 後來改為 Angular Universal 方式架設，直到現在改用 Astro。 原因無它，只因為受限太多．最後換成 Angular UnivSun, 01 Oct 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_deploy/https://mtwmt.com/blog/ironman2023/astro_deploy/Astro 裡有許多部屬方式，因我們這次介紹是針對初學者架設，所以選擇了 github pages 開啟 astro.config.mjs 檔案。這個檔案用於設定你的 Astro 網站相關的設定。 site：將site設定為你的GitHub Pages網址，或Sat, 30 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_transitions/https://mtwmt.com/blog/ironman2023/astro_transitions/Astro 3.0 加入了全新的功能 - 視圖轉換（View Transitions），它可以實現頁面之間更平滑的切換效果，無需進行瀏覽器的完整頁面刷新。今天我們就來把之前做過的頁面加上View Transitions的效果吧！ 首先，讓我們將視圖轉換效果應用Fri, 29 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_contact/https://mtwmt.com/blog/ironman2023/astro_contact/今天來實做做個簡易的聯絡表單。 聯絡表單是網站的重要元素之一，它使訪問者能夠輕鬆地與網站管理者或網站擁有者取得聯繫。 透過這個表單，訪問者可以提供他們的名字、電子郵件地址、手機號碼以及訊息，這對於商業網站來說尤其重要，因為它讓客戶能夠提問問題、提供反饋或請求更Thu, 28 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_search/https://mtwmt.com/blog/ironman2023/astro_search/當網站內容一多的話，很難快速找到我們想要的文章。 搜尋功能可以幫助用戶輕鬆找到所需的內容，提升使用者體驗，並提高網站的互動性和價值。 今天，將介紹如何在 Astro 框架中實現一個基本的搜尋系統，以加強你的網站。 以下是完成後的頁面，分別是搜尋後顯示的列表與未Wed, 27 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_comments/https://mtwmt.com/blog/ironman2023/astro_comments/一篇文章底下，如果有個留言版，可以讓讀者分享他們的看法、提出問題，今天我們將介紹如何在文章底下新增留言版 如圖所示 utterances 是一個基於 GitHub Issues 的評論系統，它可以讓使用者使用他們的 GitHub 帳戶來發表評論，且內容會存在 Tue, 26 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_bread-crumbs/https://mtwmt.com/blog/ironman2023/astro_bread-crumbs/今天，我們將實作如何使用 Astro 創建一個導覽麵包屑（Breadcrumbs）組件，以增加網站的導航和用戶體驗。導航面包屑通常用於指示用戶的當前位置，並使他們能夠輕鬆返回上一層或之前的頁面。 以下是完成後的畫面 首先，讓我們看一下創建面包屑導航所需的程式碼Mon, 25 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_toc/https://mtwmt.com/blog/ironman2023/astro_toc/在前面的教學中，我們學習了如何建立文章列表和實現分頁功能。然而，內容頁面目前看起來有些單調，因此，今天我們將優化內容頁面，為文章新增一個文章目錄。 文章目錄是一個常見的功能，特別對於長篇內容非常有用。它允許讀者輕鬆尋找和導航到內容中的特定段落或章節。今天，我們Sun, 24 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_formatteddata-card/https://mtwmt.com/blog/ironman2023/astro_formatteddata-card/在前幾天的文章中，我們已經學會了如何建立文章列表和實現分頁功能。 然而，目前的文章列表頁面看起來相當簡單，而日期格式也不符合我想要的需求。 所以今天要實做兩個組件。分別是 日期格式化顯示、與卡片樣式 以下是完成後的畫面 在 src/components 裡建立Sat, 23 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_tag/https://mtwmt.com/blog/ironman2023/astro_tag/在前幾天，我們已經學會了如何建立文章列表，今天將介紹如何在 Astro 裡實現文章標籤與標籤列表頁面。文章標籤是不可或缺的，它有助於組織和分類文章，讓讀者更輕鬆地尋找相關內容！ 在開始之前，確保你的文章資訊中包含了標籤（tags）的資訊。這些標籤將用於分類文章Fri, 22 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_pagination/https://mtwmt.com/blog/ironman2023/astro_pagination/昨天，我們已經學習了如何建立文章列表頁面。 今天，我們將進一步學習如何在 Astro 專案中實現分頁功能，以便更好地管理和顯示內容，特別是當內容列表變得過長時。我們將使用 Tailwind Components 這個分頁樣版來套用。 在前幾篇文章中，我們已經了Thu, 21 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_create-list/https://mtwmt.com/blog/ironman2023/astro_create-list/今天，我們將學習如何使用 Astro 項目建立一個部落格文章列表頁面，並確保這些文章按照日期由新到舊的順序排列。 在 src/pages/blog/index.astro 文件中，我們使用以下程式碼來查詢部落格內容並呈現文章列表 這段程式碼中，我們使用 getWed, 20 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_refactor/https://mtwmt.com/blog/ironman2023/astro_refactor/在我們之前的教學中，我們學習如何整合 Tailwind CSS 並創建 Astro 項目的基本組件。 現在，我們將更進一步，通過建立一個統一的佈局（Layout），確保所有頁面在外觀上保持一致，提高整體專業度和使用者體驗。 首先，在 src/layouts 文Tue, 19 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_dark-mode/https://mtwmt.com/blog/ironman2023/astro_dark-mode/在前一篇教學中，我們已成功整合了 Tailwind CSS 到我們的 Astro 項目中，並且已經設定好所需的變數。 今天，我們將進一步為我們的網站添加一個常見的功能：深色模式（Dark Mode）。 現在，我們將創建一個切換組件來啟用和禁用 Dark ModMon, 18 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_tailwind-setting/https://mtwmt.com/blog/ironman2023/astro_tailwind-setting/在這篇文章中，我們將學習如何建立 Dark Mode 所需的 CSS 變數，以使我們的網站能夠在不同模式下切換。 首先，在 styles/global.css 文件中，我們需要宣告一組 CSS 變數，用來定義 Dark Theme 和 Light Theme Sun, 17 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_install-tailwind/https://mtwmt.com/blog/ironman2023/astro_install-tailwind/看了這麼多天的文章介紹 Astro，是不是心動想躍躍欲試了呢？ 接下來，我們將開始實作我們的 blog。 將我們第二天文章裡介紹的開發環境啟動後，會看到以下畫面 接下來，都將會使用 tailwind CSS 來撰寫版面樣式，來優化這個 Blog！ 你可以使用以Sat, 16 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_fetch-data/https://mtwmt.com/blog/ironman2023/astro_fetch-data/在昨天我們了解了如何在 Astro 中獲取內容集合中的文章資料，但現在可能會有更多問題：如果我們的資料來自 API 呢？這時，就可以使用 Astro 的數據提取功能。 在 Astro 中，所有組件都可以訪問全局的 fetch() 函數，以向 API 發送 HTFri, 15 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_collections/https://mtwmt.com/blog/ironman2023/astro_collections/在 Astro 2.0.0 版本中，引入了 Content Collections 功能，這是一個極其強大的工具，用於管理和展示您的網站內容。本篇將帶您深入探討 Astro Content Collections，包括如何建立集合、定義集合結構、呈現內容，以及Thu, 14 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_markdown/https://mtwmt.com/blog/ironman2023/astro_markdown/在網站開發和內容創作中，Markdown 是一種簡單而強大的標記語言，它能夠幫助你輕鬆地創建格式豐富的文本內容，例如文章、文檔和筆記。在本教學中，我們將深入了解 Markdown 的基本語法和用法，並學習如何在 Astro 項目的文章內容中應用 MarkdowWed, 13 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_route/https://mtwmt.com/blog/ironman2023/astro_route/在前幾篇中我們介紹了 Astro 中的 Page 概念，今天讓我們更深入地探討路由，了解它在網站開發中的重要性以及如何在 Astro 中使用不同類型的路由。 在網站開發中，「路由」是指將特定的 URL 路徑映射到特定的網頁內容或功能。簡單來說，當用戶訪問某個 Tue, 12 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_image/https://mtwmt.com/blog/ironman2023/astro_image/Astro 提供多種方法來有效地管理和顯示圖片，不論它們是存儲在專案內部、遠程連結，還是由內容管理系統（CMS）或內容分發網絡（CDN）管理。 我們建議將本地圖片存儲在 src/ 目錄下，以允許 Astro 對其進行轉換、優化和打包。 位於 /public 目Mon, 11 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_style/https://mtwmt.com/blog/ironman2023/astro_style/昨天我們了解了 Astro 的樣版語法元素，今天我們將深入研究 Astro 中的樣式部分。 在 Astro 中，要為元件或頁面模板設置樣式，只需添加 標籤即可。當您將 標籤放入 Astro 元件中時，Astro 會自動偵測 CSS 並處理樣式。 範例： AstSun, 10 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_template/https://mtwmt.com/blog/ironman2023/astro_template/在這份教學中，我們將深入瞭解 Astro 語法的一些主要元素和相關範例，幫助您更好地理解如何使用 Astro 來建立網頁。 Astro 允許您在組件中綁定動態資料，這可以是來自組件屬性的資料，也可以是從資料源中獲取的資料。使用大括號 {} 來實現這一功能。以下Sat, 09 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_layouts/https://mtwmt.com/blog/ironman2023/astro_layouts/在 Astro 中，佈局是一種特殊的組件，旨在提供可重複使用的 UI 結構，通常用於頁面模板。我們經常使用 "佈局" 一詞來指稱提供頁面中共享元素的 Astro 組件，例如頁首 (header)、導航欄和頁尾 (footer)。一個典型的 Astro 佈局組件Fri, 08 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_page/https://mtwmt.com/blog/ironman2023/astro_page/在 Astro 項目中，Pages扮演了重要角色。這些頁面位於 src/pages/ 子目錄下，負責處理網站的路由、數據加載和整體頁面佈局。 今天，我們將探討 Astro 頁面的類型、路由策略和如何連接它們。 Astro 支援多種頁面文件類型，包括： .astThu, 07 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_components/https://mtwmt.com/blog/ironman2023/astro_components/今天，我們將進一步深入了解 Astro 的組件。 Astro 組件是 Astro 專案的基本構建塊，它們是僅支持 HTML 的模板組件，沒有客戶端運行時。您可以通過文件擴展名 .astro 識別 Astro 組件。 非常靈活，可包含可重複使用的 UI 元素。 Wed, 06 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_architecture/https://mtwmt.com/blog/ironman2023/astro_architecture/現在，我們將深入了解 Astro 專案的結構，這有助於您更好地理解 Astro 應用的架構和組織方式。 Astro 專案的結構如下： 以下是每個資料夾的檔案與用途說明： Astro 專案的程式碼存放在 src 資料夾中，這包括： 元件（Components） Tue, 05 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_basic/https://mtwmt.com/blog/ironman2023/astro_basic/前面已經介紹了 Astro 的優點，相信你已經迫不及待要開始試用了！現在，我們將逐步指導你如何設定適合開發 Astro 的環境。 首先，請確保你已經安裝了以下的工具和環境： Node.js 和 npm：請確保你已經安裝了 Node.js 和 npm（Node Mon, 04 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_v3/https://mtwmt.com/blog/ironman2023/astro_v3/很幸運在開賽前幾天遇到版本更新，那就讓我們來看看 Astro 3.0 帶來了哪些重要的改變。 Astro 3.0 引入了 View Transitions API，這是一組全新的平台 API，讓您可以在網頁頁面之間實現原生瀏覽器過渡效果，包括淡入淡出、滑動和更Sun, 03 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/ironman2023/astro_intro/https://mtwmt.com/blog/ironman2023/astro_intro/基於本身是純前端開發者，偶然看到了 Astro 的特性，被深深吸引，雖然現在有許多靜態網站的產生器，但裡面參雜著各種語言，想要客製化樣式的時後也不好改，且也繁複。而 Astro 採用了一種獨特的結構，將 HTML、CSS 和 JS 整合在一個單一檔案中。這讓程Sat, 02 Sep 2023 00:00:00 GMThttps://mtwmt.com/blog/life/ngtoastro/https://mtwmt.com/blog/life/ngtoastro/這次再次將整個網站翻寫啦，雖然樣沒什麼改，但整個框架已大改！！！ 偶然看到 Astro 這個新的框架，整個就是驚為天人啊啊啊 之前被我詬病的 SEO 問題，在 Astro 應該可以解決掉 XD 這個框架只需要熟悉 HTML 與 CSS 就足夠了，學習曲線相對較Tue, 01 Aug 2023 00:00:00 GMThttps://mtwmt.com/blog/css/css_palette_generator/https://mtwmt.com/blog/css/css_palette_generator/宣告變數，以500為主色， 500 以下明度會依續遞增彩度降低，驅近於白 500 以上明度會依續遞減彩度降低，驅近於黑 A100 A700 則是改變主色的飽合度 這裡的變數宣告能當做是 js 裡的陣列，不過在 scss 裡 沒有 string 與 numberTue, 10 Jan 2023 00:00:00 GMThttps://mtwmt.com/blog/python/py_getpage/https://mtwmt.com/blog/python/py_getpage/可到 https://www.python.org/ 這裡進行下載符合作業系統的 python 使用。 網路上有很多 python 安裝教學，這裡就不再贅述囉 安裝的版本是 Python 3.10.8 這裡只有列出目前有在使用的。 查詢 python 版本 查Sun, 23 Oct 2022 00:00:00 GMThttps://mtwmt.com/blog/tailwindcss/tailwind_ng_install/https://mtwmt.com/blog/tailwindcss/tailwind_ng_install/Angular 14.2.3 Node 14.16.1 編輯器 vscode 寫這篇文章的時後，所安裝的是 TailwindCSS v3 版本 以下將是 TailwindCSS v3 版介紹 在根目錄底下會多出一支 tailwind.config.js 所有 Fri, 21 Oct 2022 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_window_resize/https://mtwmt.com/blog/angular/ng_window_resize/偶然發現 Angular 有蠻多種方式可以偵到一些視窗事件，順手記錄下來 在 subscribe 前 可再多做些設定，當 resize 時，不用一直觸發，300ms 偵測一次就好Wed, 28 Sep 2022 00:00:00 GMThttps://mtwmt.com/blog/life/paint/https://mtwmt.com/blog/life/paint/如上篇所述因為請師傅來刷藝術漆在太貴了，一般行情約 60008000 / 坪，且需要上漆的部份有電視牆面與床頭背板，加起來大約三坪上下。做完也是要上萬塊 嗯...太貴了 .< 摸摸口袋深度，也順便了解了下藝術漆到底是在做什麼的，得到一些刷藝術漆的結論就是，刷藝Tue, 27 Sep 2022 00:00:00 GMThttps://mtwmt.com/blog/life/happyhome/https://mtwmt.com/blog/life/happyhome/是磚牆格局 建商附的是金利登的玫瑰白 驗屋這部份沒有另外請驗屋公司，就上網爬文，將相關注意事項記下來，在驗屋的時後，代銷這裡也有跟著我們一起驗，一起測試，有問題幫忙記錄，請建商一起修繕。 當時驗的部份有 漏水測試 水管是否有阻塞，通不通 地板碰供 網路與電路等Sun, 25 Sep 2022 00:00:00 GMThttps://mtwmt.com/blog/docker/docker_win_install/https://mtwmt.com/blog/docker/docker_win_install/記錄一下安裝 docker 時所遇到的問題 因為工作上的一些問題 需要在電腦上安裝 docker 測試，裝了後一直噴錯打不開 再 cmd 上執行 docker ps 則是一直報錯 打開 Docker Desktop 就會一直出現這畫面，按下 quit 後，接著Sun, 24 Jul 2022 00:00:00 GMThttps://mtwmt.com/blog/life/price-generator/https://mtwmt.com/blog/life/price-generator/https://mtwmt.com/price-generator/ 寫了個報價單產生器，下次遇到接案要報價時就方便多囉 javascript ES6 Gulp 4.0 用來編譯 html、js 以及部署到 github validate 驗証 tabler Mon, 21 Mar 2022 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_form-controlvalueaccessor/https://mtwmt.com/blog/angular/ng_form-controlvalueaccessor/當需要做 component 裡的表單特定值的連動，就會 ControlValueAccessor 就是不可或缺的要件 建立新的 component 透過 implements ControlValueAccessor 達到表單值與不同 component 間Sun, 13 Mar 2022 00:00:00 GMThttps://mtwmt.com/blog/js/async/https://mtwmt.com/blog/js/async/在使用 async/await 一定要先了解 Promise Promise 是 es6 之後才開始有的 Promise 程式碼 將 promise 封裝後包成 function 使用 promise 可轉成 then 的串接 async/await 範例 RSun, 13 Mar 2022 00:00:00 GMThttps://mtwmt.com/blog/life/github_page_custom_domain/https://mtwmt.com/blog/life/github_page_custom_domain/隔了好久，終於也買了個人網域啦～ 短網址就是爽！ 建立兩筆新的記錄 設定四組 IP 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 設定 CNAME 如下圖 切換到 SettingThu, 17 Feb 2022 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_highlight/https://mtwmt.com/blog/angular/ng_highlight/create highlight.service 在 styles.scss 引入 (可選自己喜歡的樣式引入) Themes https://highlightjs.org/static/demo/ prismjs 不只提供了 higtlight 樣式，也提供Sat, 29 Jan 2022 00:00:00 GMThttps://mtwmt.com/blog/rxjs/rxjs_cancel_pending_request/https://mtwmt.com/blog/rxjs/rxjs_cancel_pending_request/因為需求，有時後需要取消處理中的 http request 所以就來做個筆記吧 模擬另一種情境，比如說在 ngrx 裡處理，這裡寫的很簡略，只寫了方法，但沒有 ngrx 的寫法Wed, 26 Jan 2022 00:00:00 GMThttps://mtwmt.com/blog/js/js_tree-data/https://mtwmt.com/blog/js/js_tree-data/最近為了處理 tree 的樹狀結構多了好幾根白頭髮，囧 這是一筆 tree (樹) 的資料 參考資料： The Tree data structureWed, 27 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/life/newcomputer/https://mtwmt.com/blog/life/newcomputer/20211020 更新 排了三個月的顯卡終於到貨啦!!! 20211015 收到通知 立馬刷下去 (五倍卷就這樣用掉惹 XD) 20211019 到貨 還好機殼很給力 沒有讓我失望! 安裝成功!!! 結果發現 3080 四孔裡面 只有一個 HDMI 接頭 其他Wed, 20 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_deploy/https://mtwmt.com/blog/ironman2021/ng_deploy/Github 多了一個 Actions 的新功能，當 push 檔案到 Github 的時後，就會自動跑 CI/CD 部署 這個功能真是太方便啦!!! Angular 有提供了一個 Deploy 的功能 這次選用了 angular-cli-ghpages 加入Fri, 15 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_providers/https://mtwmt.com/blog/ironman2021/ng_providers/一直以來對 Angular Providers 這部份都還是有存在著半知半解的狀態，就趁著這次機會一次搞懂它吧！ Providers 提供了四種注入方式 Class Provider : useClass Value Provider: useValue FaSun, 10 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_urlinfo/https://mtwmt.com/blog/ironman2021/ng_urlinfo/在實作裡，很多時後我們會將一些必要資訊記錄在網址上，直接在網址裡就能得到我們要的訊息 不用再透過組件將資訊層層傳遞，達到解耦合的效果。 註：一切一切 都只是我用來舉例，不代表為鐵人賽網址真正的實際規劃哦！ 例如：我的鐵人賽主題網址為 https://ithelSat, 09 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_breadcrumb/https://mtwmt.com/blog/ironman2021/ng_breadcrumb/麵包屑 為提供網站裡的導航，讓使用者容易了解當下所在的位置 剛好也呼應前一天使用 router 的部份 現在位置：首頁 / 列表 / 內容 Angular 裡的 router 架構 通常會命名為 app-routing.module.ts 這裡會需要帶點 rxFri, 08 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_auth-guard-login/https://mtwmt.com/blog/ironman2021/ng_auth-guard-login/經過了昨天的介紹，今天就來看看使用登入範例囉 今天的登入資料依然是使用 FakeStoreAPI 這裡就做個簡單的驗証，沒填值就不能按按鈕 若是有成功得到 token 就裝這狀態記錄在 setToken$ 裡 在 canEnter 訂閱剛剛的 setTokenThu, 07 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_auth-guard/https://mtwmt.com/blog/ironman2021/ng_auth-guard/我們在開發的過程中，經常會遇到需要某些權限才能進入的頁面，這時後就會需要路由守衛的機制啦， 而它最常用在登入畫面時 Angular CLI 提供了命令列工具，可以快速建立路由守衛框架檔案： 或 官網介紹：guard 執行後，Angular CLI 會問我們需要Wed, 06 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_css/https://mtwmt.com/blog/ironman2021/ng_css/今天就只是個筆記，單純記錄寫法如何使用，以便自己日後查找，畢竟人非聖賢、會忘難免 XD 套用 className 變數為 isDark，value 必需為 boolean 在 html 的 dom 裡設定 https://angular.tw/api/commTue, 05 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_cdk-overlay/https://mtwmt.com/blog/ironman2021/ng_cdk-overlay/因為我的這個 blog 需要一個彈出視窗做提示，而套件裡的樣式我都不喜歡，所以今天就來客製化一個吧！ 這次的彈出視窗會使用 Angular Material 裡的 cdk 來做開發 安裝 cdk 注意： 若發現 @angular/cdk 裡的某些功能不能掛載，Mon, 04 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_viewchild-viewchildren/https://mtwmt.com/blog/ironman2021/ng_viewchild-viewchildren/ViewChild 這個屬性在 Angular 是屬於很常用的一部份 今天就來了解一下 ViewChild 與 ViewChildren 的差別與使用方式吧！ HelloComponent 子組件 屬性裝飾器，用於配置一個檢視查詢。 變更檢測器會在檢視的 DOSun, 03 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_absolute_path/https://mtwmt.com/blog/ironman2021/ng_absolute_path/當有一個連結需要另開新頁時，在 develop 或 production 需要對應到正確的路徑 Angular 提供了這個方式 https://angular.tw/api/common/Locationprepareexternalurl 所以我就做了以下的Sat, 02 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_shallowcopy-vs-deepcopy/https://mtwmt.com/blog/ironman2021/ng_shallowcopy-vs-deepcopy/又踩雷啦啊哈哈哈哈哈。 來重現一下遇到的情境吧 一開始建了一個 fruit 的物件，裡面有 apple 與 banana 這兩樣空物件 在 OnInit 時，賦予了 apple 與 banana 值 當我按下 button Click 的 時後， apple Fri, 01 Oct 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_detect-encoding/https://mtwmt.com/blog/ironman2021/ng_detect-encoding/前一陣子，後端有個需求是在檔案上傳前，需要提前知道上傳的檔案編碼 是 UTF-8 或是 ascii 等，才能決定要不要將檔案放進資料庫，或是在這之前再做一次轉檔。 今天的內容跟 Angular 比較沒有關係，屬於套件分享，但因也是使用 Angular 實作，所Thu, 30 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_adapter-data/https://mtwmt.com/blog/ironman2021/ng_adapter-data/今天的內容屬於設計模式的一種。 當我們從後端接到資料後，有時後資料格式往往不是如我們所想，所以會再加工做個轉換的動作。 所以就要使用 TypeScript 來做個轉接器，轉成我們所需的資料！ 就拿前幾天的文章 Angular 如何取得 API 資料 繼續做介紹Wed, 29 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_elementref-templateref-viewcontainerref/https://mtwmt.com/blog/ironman2021/ng_elementref-templateref-viewcontainerref/今天就來聊聊 ElementRef、TemplateRef、viewContainerRef，者實說，在這之前一直都沒很認真搞懂這部份 就趁著這次機會一起來看看吧！ 用於檢視 HTML DOM 元素，可以在瀏覽器中取得 DOM 的原生 Element ElemTue, 28 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_ngtemplateoutlet/https://mtwmt.com/blog/ironman2021/ng_ngtemplateoutlet/ngTemplateOutlet 這裡我解釋為 ng-template 裡的插槽 來看看實際上會是如何使用 先來段程式碼，這裡為一筆物件資料 HTML ngTemplateOutlet 這個插槽的名字 我們取做 jsonData 在 ng-template 的Mon, 27 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng-container-vs-template/https://mtwmt.com/blog/ironman2021/ng-container-vs-template/接續昨天的範例。 今天要聊的是 ng-container 與 ng-template 上面程式碼所要表達的是，若是資料大於 0 筆，頁面上就會呈現列表，沒有資料的時後在畫面上顯示 No Data ng-container 在 Angular 的 templatSun, 26 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_if-async-as/https://mtwmt.com/blog/ironman2021/ng_if-async-as/當我們在 template 訂閱一組資料，而需要對它做一些邏輯處理的時後。 .ts .html 若像上述這樣的寫法，會造成重覆訂閱而增加 server 的負擔，所以在實作上，通常會避免這情況發生 將 html 寫法稍做修改 將 products$ async Sat, 25 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/rxjs_ondestroy/https://mtwmt.com/blog/ironman2021/rxjs_ondestroy/昨天說到了將資料訂閱出來渲染在頁面上的事，那麼就就來說說 RxJs 解訂閱這件事吧。 這也是為了避免 memory leak，或重覆訂閱所造成的 BUG，若非有限訂閱，通常在訂閱離開後，都需要解訂閱。 只執行第一次，通常用於第一次進來讀取成功取得資料後，就不需Fri, 24 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_httpget/https://mtwmt.com/blog/ironman2021/ng_httpget/既然昨天已經說了 http post 這件事，那今天就來說說 http get 這部份吧！ 今天的資料依然使用 FakeStoreAPI 樣式套用 Angular Material 從 api 取得列表後，把資料渲染到 html 上 app.module.tsThu, 23 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_rxjs-create/https://mtwmt.com/blog/ironman2021/ng_rxjs-create/來回顧一下前幾天的日記文 Angular 圖片上傳之...日記文 程式碼流程規劃之...日記文 與今天介紹的內容有關，如何將多筆資料上傳後，取得全部回傳資料後 再將其資料整理，送到另一支 API 這次將會使用 RxJS 來做處理 我有一筆訂單，裡面有許多的產品Wed, 22 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_select-default-value/https://mtwmt.com/blog/ironman2021/ng_select-default-value/當表單送出後，資料庫會記錄送出後的值，下次再進來時，會需要重現上一次所填寫過的內容，這在實作上是很常遇到的事情。 原以為這是件很簡單的事，讀取資料後，直接把值填上後即可(我想得太簡單了)， 當實作時，卻怎麼樣也選不了預設值，後來發現在需要在 select 裡 Tue, 21 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_bubbling-event/https://mtwmt.com/blog/ironman2021/ng_bubbling-event/今天就來個說個在新手時期很常遇到，但卻不知為什麼會發生的問題 來看一下我們前幾天的表單範例，與圖上 console 的部份 在操控表單的時後，發現在點選新增欄位時，連submit 也一起被觸發了！ 這是怎麼一回事呢！！！，明明就沒有按送出呀！ 原來是 JavaMon, 20 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_formvalidator/https://mtwmt.com/blog/ironman2021/ng_formvalidator/有表單 當然少不了驗証，這次的情境是 名字是必填欄位。 手機不一定會是必填，但填了後必須符合手機的格式，09 開頭 共 10 碼 來囉！！ 在這個 form 表單的下方 新增一個驗証方式，動態驗証就寫在 validator 這裡面 .ts 若是號碼填寫錯誤，把Sun, 19 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/process-planning/https://mtwmt.com/blog/ironman2021/process-planning/今天，依然是篇日記文，每天遇到的事有太多好寫了。 一早 同事：Mandy, 今天是 deadline 囉，做好了嗎? 我：還差了 bala bala... 同事：有什麼需要協助的話，要快說哦 我：嗯...好 ! XD 接著繼續處理未完的專案 這次的情境是，表單Sat, 18 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_image-upload/https://mtwmt.com/blog/ironman2021/ng_image-upload/本來預定今天要發佈的文章延後了，今天要要來分享這一兩天的踩雷心路歷，花了一半天時間，連鐵人都沒時間寫，還好有一些些存檔 ! 這次公司專案需要做到圖片上傳這部份的處理，因這次的套件對於手動上傳沒有支援太多，所以需要自己處理這部份，接著就是一連串的踩雷過程... Fri, 17 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_form-setvalue-vs-patchvalue/https://mtwmt.com/blog/ironman2021/ng_form-setvalue-vs-patchvalue/今天就來說說 setValue 與 patchValue 差異這部份吧 一開始不太能理解這 setValue 與 patchValue 到底差在哪裡(官網的說明讓我不是很懂，理解力太差了 XD)，不是一樣都是賦值給 form 嗎 這幾天在使用的過程中，踩了一些Thu, 16 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_formarray/https://mtwmt.com/blog/ironman2021/ng_formarray/昨天介紹了 formControl 如何使用 今天來介紹 formArray 這部份老實說花了我不少時間才懂 XD 今天要在表單裡加上喜好，喜好會有很多，所以我們來使用 formArray 處理，預設值先給它一個空陣列 ts 程式裡的 favorites 是一Wed, 15 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_formcontrol/https://mtwmt.com/blog/ironman2021/ng_formcontrol/昨天我們看了 一長串的表單使用範例 都是經過理解消化後所寫出來的 code ，那麼今天就來聊一聊消化的過程吧！ 一開始 建立一個新的 form 表單，它會是一組的 group form 後面加上! 是 Typescript 2.0 的 non-null 可參考Tue, 14 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/ironman2021/ng_form/https://mtwmt.com/blog/ironman2021/ng_form/表單在實作上是件常見的的處理，為什麼會寫這篇呢？實在是因為我太容易忘了 XD 還記得一開始接觸到表單操控時， Angular reactive form 的官方文件它雖然寫的很清楚，但對於當時剛趟入 Angular 領域的我 還是看的一頭霧水，尤其是在 forMon, 13 Sep 2021 00:00:00 GMThttps://mtwmt.com/blog/js/js_export_csv_line/https://mtwmt.com/blog/js/js_export_csv_line/專案裡有很多需要把表格下載成 CSV 檔，最近出現了 CSV 破版的問題 情境如下： 原本某個儲存格裡面的內容裡面有換行，匯出成 CSV 時，照理說，換行應該是在當下儲存格做換行，沒想到卻變成了這樣 QQ 在資料來源裡，可以看到，換行的地方是 \n 因為這個\Sun, 23 May 2021 00:00:00 GMThttps://mtwmt.com/blog/angular/scully_comments/https://mtwmt.com/blog/angular/scully_comments/這次選定了 utterances 來當留言系統，它是使用 github issue 當成網站的留言系統 先前是使用 DISQUS 覺得不是很好用，所以趁著這次翻寫時 也一起換掉了 (雖說也沒什麼人會留言啦 哈哈哈) 先在 github 裡安裝 utterancSat, 15 May 2021 00:00:00 GMThttps://mtwmt.com/blog/js/js_gotop/https://mtwmt.com/blog/js/js_gotop/jQuery 裡有提供一些動畫的函式庫 animate 讓使用者直接使用，所以短短幾行就能搞定 了 但為了一個 gotop 的功能 掛上一支 jQuery，實在有點不滑算，所以這裡使用了原生的 JS 來寫出相同效果的 gotop 在 JS 裡 有提供一個 wiMon, 10 May 2021 00:00:00 GMThttps://mtwmt.com/blog/angular/scully_deploy/https://mtwmt.com/blog/angular/scully_deploy/終於！用 scully 把先前的 Blog 翻寫完成了!!! 灑花～ 接著當然是要把頁面佈署到 github 讓其他人看到啦 不然也只能自己自 high XD 首先安裝 angular-cli-ghpages 輸入 ngh --version 可檢查本機是否已Tue, 04 May 2021 00:00:00 GMThttps://mtwmt.com/blog/life/hexotoscully/https://mtwmt.com/blog/life/hexotoscully/在這裡 https://mtwmt.github.io/angular/scullyinstall 因為這個契機，使得開始動手這一切，將原本使用 hexo 改用 Angular Scully 建置 Blog 嗯...花了快半年的時間 看我有奪會拖就知道，畢竟平Sat, 01 May 2021 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_lib-build-css/https://mtwmt.com/blog/angular/ng_lib-build-css/因專案越來越龐大，需要將一些共用元件抽出來做 library 放到 npm 上，在其他專案在開 發時也能一起使用，以便節省開發時間。 照著官網的教學建立: https://angular.tw/guide/creating-libraries 建立完後 將所需Sun, 17 Jan 2021 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_ngif-viewchild-undefined/https://mtwmt.com/blog/angular/ng_ngif-viewchild-undefined/當 angular 裡的 範本變數裡使用到 ngIf，在執行範本變數的時後會報錯，出現 undefined，無法操控 程式碼如下 html component 使用 ngIf 時，一開始執行 ngOnInit，這個 dom 是不存在的，所以去操控這個 dom Sun, 27 Dec 2020 00:00:00 GMThttps://mtwmt.com/blog/js/js_template-strings/https://mtwmt.com/blog/js/js_template-strings/過去寫法 以 jquery 為例 上面這種寫法相當繁鎖不方便，ES6 引入了樣版字串解決這個問題 如果在字串裡需要使用到反引號，則前面要用反斜線(逃役字元)轉義 所有樣版字串 在使用多行字串時，所有的空格與縮排都是會被保留的，若不想要這個換行 可以使用 triTue, 08 Dec 2020 00:00:00 GMThttps://mtwmt.com/blog/js/js_destructuring-assignment/https://mtwmt.com/blog/js/js_destructuring-assignment/解構賦值，按照對應位置，進行賦值，如同鏡子般映射 若只是取得其中一個值，可以寫成這樣 以上是將一些常用的方式記錄下 更詳細的使用方式可觀看 变量的解构赋值Mon, 07 Dec 2020 00:00:00 GMThttps://mtwmt.com/blog/hexo/hexo_git_push_case/https://mtwmt.com/blog/hexo/hexo_git_push_case/最近在整理以前寫過的文章分類，把一些檔名的大小寫稍做調整， 發現文章佈署到 git 上後，git 對於檔名大小寫的更動 檔案不會更新， 導致頁面出現 404 找不到頁面 在 hexo 的目錄下 找到 .deploygit/.git/config 修改 ignoSun, 06 Dec 2020 00:00:00 GMThttps://mtwmt.com/blog/js/js_object_property/https://mtwmt.com/blog/js/js_object_property/印出來後 如圖所示 修改物件裡面屬性的值可以是 obj.a = 4 或 obj[a] = 4 這兩種方法都可以 定義物件裡的屬性 與 調整屬性特徵 特徵： 值(value) = 對應的值是甚麼 可否寫入(writable) = 可否進行屬性質的修改 可否被刪除Mon, 30 Nov 2020 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_httpparams/https://mtwmt.com/blog/angular/ng_httpparams/這篇記錄著關於如何使用 Angular HttpParams 且 HttpParams 接收的參數值必定要轉為字串才可以 在 service.ts 引入 以上是基本的傳參數方式，然而 Angular 提供了一些方法讓我們使用 若參數已存在 則後面會取代前面 或Tue, 03 Nov 2020 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_router/https://mtwmt.com/blog/angular/ng_router/在 app.module.ts 引入 RouterModule ps.注意：路徑不包含斜線 Route Guards 路由守衛 預設導址 網址 http://localhost:4200/list/網址變數 routing.module ts 設定網址連結 (Tue, 20 Oct 2020 00:00:00 GMThttps://mtwmt.com/blog/angular/scully_install/https://mtwmt.com/blog/angular/scully_install/原本就是寫 Angular 框架的我，最近得知 Scully 屬 Angular 的靜態頁面產生器，激起了 我的好奇心所以開始了以下路程 官方文件：https://scully.io/ 使用環境 先建立一個新的 ng 專案 新增 Scully 註：安裝完後 需Sun, 11 Oct 2020 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_reactive_form_error/https://mtwmt.com/blog/angular/ng_reactive_form_error/當我們在使用 Angular Reactive Forms 時 如 用到 disable 時 console 會噴出以下警告訊息 Angular 官方是建議在 ts 檔裡處理，但某些時後 在 html 裡處理會比在 ts 裡處理還要來的簡潔 便利 如： 有時後Sat, 26 Sep 2020 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_router_change_bug/https://mtwmt.com/blog/angular/ng_router_change_bug/最近在專案上出現了一個，點導址按鈕導頁後，出現 api 重覆打的情形 而且還是在特定會在 side bar 點了才會出現這 bug 奇怪了，之前做的都沒遇過這問題呀，寫的方式也都是一樣 花了好多間找問題點 怎麼找都找不到 找過 router, resloverSun, 13 Sep 2020 00:00:00 GMThttps://mtwmt.com/blog/d3/d3_range/https://mtwmt.com/blog/d3/d3_range/d3 range 屬於 d3-array 的一部份 源始碼如下 拆解後如下 因為要做計算所以 將傳進來的值強制轉為數字型別 可參考 你懂 JavaScript 嗎？8 強制轉型（Coercion） 拆解後如下 arguments 關於 arguments 可參Sun, 07 Jun 2020 00:00:00 GMThttps://mtwmt.com/blog/vscode/vscode_cdnjs/https://mtwmt.com/blog/vscode/vscode_cdnjs/搜尋 js 套件名稱，並直接引入 CDN 連結網址蠻方便的其實 安裝後 按 ctrl + shift + p 鍵入 cdnjs search for libraries 輸入要引入的套 件名稱接著選擇版本 即可使用！Tue, 02 Jun 2020 00:00:00 GMThttps://mtwmt.com/blog/gulp/gulp_gulp-iconfont/https://mtwmt.com/blog/gulp/gulp_gulp-iconfont/將 svg 轉 iconfont 字型 將 svg 輸出成 字型檔後 再來就是 css templpate 的 撰寫了 這裡關係著如何在 css 裡引用字型 可以依個人需求做客製化 這裡稍微參考了一下 fontawesome 的用法來建立 css templaFri, 29 May 2020 00:00:00 GMThttps://mtwmt.com/blog/gulp/gulp_gulp-file-include/https://mtwmt.com/blog/gulp/gulp_gulp-file-include/將共用的 html 抽出來 變成共用檔 於 20200523 更新 拿掉舊有寫法與更新一些個人設定 常常在編輯 html 時 會遇到許多共同地方 如 header footer 當時想著 如果能跟後端一樣 將共用的地方取出來 需要時 再 inclde 裡去時 Sun, 24 May 2020 00:00:00 GMThttps://mtwmt.com/blog/gulp/gulp_spritesmith/https://mtwmt.com/blog/gulp/gulp_spritesmith/將許多 icon 小圖轉換成大圖 做成 sprite 於 20200523 更新 拿掉舊有寫法 加上新的 cssTemplate 這次更新是因為把之前寫的很醜的 cssTemplate 翻新重寫 也因為個人需求 在 sprite 載入的圖檔轉成 base64 Sat, 23 May 2020 00:00:00 GMThttps://mtwmt.com/blog/js/js_array-filter/https://mtwmt.com/blog/js/js_array-filter/陣列裡 有時後會處理到把重覆的值濾掉，有以下幾種方式 以這個陣列為例 以上Mon, 04 May 2020 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_pipe/https://mtwmt.com/blog/angular/ng_pipe/在 Angular 裡用來做一個簡單的數據轉換 這次做的是數值對應 ASCII Table 對照表 在 terminal 裡鍵入 建立一個新的 pipe pipe.ts 在 module.ts 引入 html tsSun, 03 May 2020 00:00:00 GMThttps://mtwmt.com/blog/js/js_array_append/https://mtwmt.com/blog/js/js_array_append/在工作上時 會常常處理到陣列傳遞的情況，偶然看到一些國外的文章寫整理的蠻好的，也就此剛好記錄下來 直接將新的值加到後面 es6 可以這樣寫 splice 可以在很多情境上使用 可用來新增新的值，或是取代某個值等 這裡就介紹新增值的部份 array.spliceWed, 29 Apr 2020 00:00:00 GMThttps://mtwmt.com/blog/life/mask/https://mtwmt.com/blog/life/mask/因為 NOVID-19 (武漢病毒) 造成了全世界的罩慌，使得口罩供不應求 在這此時 The F2E - 前端修練精神時光屋 也發起了 口罩地圖 side project 的製作同時也提供了 API 還有徵求了許多設計師的設計 稿也就搭上了這一波的疫情列車! Fri, 17 Apr 2020 00:00:00 GMThttps://mtwmt.com/blog/d3/d3_bar_chart/https://mtwmt.com/blog/d3/d3_bar_chart/這次我們來繪製的是橫條圖！ 先建立一些基本變數 效果如下： D3 資料綁定與更新 D3 序數比例尺 scaleBandMon, 13 Apr 2020 00:00:00 GMThttps://mtwmt.com/blog/aggrid/ag-grid_intro/https://mtwmt.com/blog/aggrid/ag-grid_intro/agGrid 是個非常強大的表格套件 在撰寫上 大部份都是使用配置的概念做設定 在一開始 agGrid 分別做了 Grid Interface 與 Column Interface 兩大接口 所有的設定就從這兩大接口開始... 以下將會以 Angular 的寫Sat, 28 Mar 2020 00:00:00 GMThttps://mtwmt.com/blog/rxjs/rxjs/https://mtwmt.com/blog/rxjs/rxjs/連續性發生的資料 (主體) ，沒有寫 subscribe 是不會被執行的 要下了後才會被啟動 在執行過程中 隨時可以中斷行為 註冊到(Observable) next: Observer 接收到一個值 (.then error: Observer 接收到一個錯Fri, 27 Mar 2020 00:00:00 GMThttps://mtwmt.com/blog/d3/d3_databind/https://mtwmt.com/blog/d3/d3_databind/玩 d3 一定要了解的 d3 的資料綁定機制不然要怎麼讓畫面跑出來呢 XDDD 當我有一組的資料 想讓圖表依續產生時 就會用到 data 或 datum 將資料傳入 以便後續圖 表繪製動作 data 綁定一組資料 datum 綁定單一筆資料 先看圖會先較清楚些Mon, 28 Oct 2019 00:00:00 GMThttps://mtwmt.com/blog/aggrid/ad-gird_component/https://mtwmt.com/blog/aggrid/ad-gird_component/在 gridOptions 加上 frameworkComponents 在相對應的 columnDefs 裡設定 自訂義組件 或 DEMO: angularag-gridcomponentSat, 19 Oct 2019 00:00:00 GMThttps://mtwmt.com/blog/d3/d3_v3tov5/https://mtwmt.com/blog/d3/d3_v3tov5/最近因為專案需求 需要用到 D3 來畫圖表 而公司用的是 v5 版本 (v4 以上的版本已不相容以下版本) 剛開始初入 D3 的我 像個無頭蒼蠅般 先隨意的找了網路上的範例來練習 寫了幾行 code 後 發現怎麼不能 run!!! 爬了下文 才知道 D3 在 Sat, 05 Oct 2019 00:00:00 GMThttps://mtwmt.com/blog/hexo/hexo_next_copybutton/https://mtwmt.com/blog/hexo/hexo_next_copybutton/最近發現新版 Next 7 版有支援一鍵複製程式碼的功能之前還傻傻的自己套 clipboard.js 來用 想不到早就有內建了 XDDD 只要到 config.yml 裡 的 390 行下 找到 copybutton 將 enable 改 true 即 可 檔Sat, 05 Oct 2019 00:00:00 GMThttps://mtwmt.com/blog/life/working/https://mtwmt.com/blog/life/working/到職滿三個月，就來說說這三個月帶給我的改變 通勤時間變短了 有別於過去火車捷運通勤 現在轉變為機車一族 餐費變少了 由於公司有提供公司餐，能用少少的費用吃到飽飽的一餐 再來就是工作上所使用到的技術 也是跟過去差蠻多的 從一個人 heandle 一個專案 轉變到Tue, 01 Oct 2019 00:00:00 GMThttps://mtwmt.com/blog/d3/d3_scaleband/https://mtwmt.com/blog/d3/d3_scaleband/D3 的坐標不是只有數字，有時後也會用到除了數字以外的非連續性坐標這時後就有了 scaleBand 序數比例尺在這部份 v3 跟 v4 的版本寫了 有蠻大的落差而我是從 v5 才開始 真正的接觸到 d3 所以還是有小小踩到了一下 v3 轉 v5 時寫法差異的雷Mon, 30 Sep 2019 00:00:00 GMThttps://mtwmt.com/blog/angular/material_expansion-panel_edit-height/https://mtwmt.com/blog/angular/material_expansion-panel_edit-height/因為 Material Expansion Panel 展開後的高度是使用動畫高度產生 所以 css 設定過後 仍會被蓋過 除非是下 !important 但在展開的過程中 會有先變高再縮回去的不順效果 在 Material 提供了我們兩個方式去設定 collMon, 16 Sep 2019 00:00:00 GMThttps://mtwmt.com/blog/life/taobao/https://mtwmt.com/blog/life/taobao/第二次買淘寶，很開心的刷了一堆想要的東西，隔了幾天後不知道為什麼，要刷卡時就出現 支付寶就把我的帳號凍結了，無法支付集運運費 下載了支付寶 他要我綁定銀行卡 但我就是沒有大陸的銀行卡啊!! 所以我被凍結了 咨詢了一下支付寶的在線客服 星期日一大早就打了客服電話Mon, 02 Sep 2019 00:00:00 GMThttps://mtwmt.com/blog/life/a50_root/https://mtwmt.com/blog/life/a50_root/請先備份所有重要資料 刷機有風險，失敗手機掛點一概不負責，請仔細考慮清楚 三星驅動程式 SAMSUNGUSBDriverforMobilePhones.zip (35.12MB) 刷機程式 Odin3v3.13.1 MagiskManager-v7.3.2.aTue, 27 Aug 2019 00:00:00 GMThttps://mtwmt.com/blog/aggrid/ag-grid_infinite/https://mtwmt.com/blog/aggrid/ag-grid_infinite/先稍微介紹分頁會用到的 gridOptions 功能 rowBuffer: 0; //在網格呈現的可滾動可視區域外部呈現的行數。預設為 20 有一個緩衝區意味著當用戶緩慢地垂直滾動時，表格將準備顯示行。 rowSelection: 'multiple'; //Mon, 19 Aug 2019 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_dynamic/https://mtwmt.com/blog/angular/ng_dynamic/情境：tab 切換 app.module.ts component.html component.ts 新增預載入的component 另一種做法可以使用 if else 來做Sun, 21 Jul 2019 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_emit/https://mtwmt.com/blog/angular/ng_emit/一張圖說明 input 與 output 值的互相傳遞 透過 setter 截聽輸入屬性值的變化 把需要傳遞的 data 存到 service 裡然後再到 service 裡存取需要用的值 分別建立一個 list 跟 detail 的 compontent lSat, 20 Jul 2019 00:00:00 GMThttps://mtwmt.com/blog/hexo/hexo_next_update/https://mtwmt.com/blog/hexo/hexo_next_update/最近看到蠻多人的 blog next 這個主題裡多了好多功能 於是心血來潮來看一下 next 的主題是否有更新 赫然發現已更新至 7 版了 於是開始一連串的更新 發現舊版與新版架構完全不一樣 所以也可以當做一新全新的主題樣版來看待 更新後發現新版的 next Thu, 18 Jul 2019 00:00:00 GMThttps://mtwmt.com/blog/angular/ng_bind/https://mtwmt.com/blog/angular/ng_bind/Angular 共有四種資料繫結的方法 [property]='statement' (event)='someMethod($event)' [(ngModel)]='property' component.ts component.html app.modWed, 17 Jul 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/11f/https://mtwmt.com/blog/jsboss/11f/【特定技術】不可用 JS 框架，只能單純用原生 JS。 【特定技術】需符合響應式設計。 【特定技術】當螢幕伸縮(resize)時，介面與 JS 功能也需正常 這次的關卡大部份就是練習 JS 的語法主要就是語法不熟 需要花時間去找出寫法 囧 這次燈箱的圖片 花了Sun, 30 Jun 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/4f/https://mtwmt.com/blog/jsboss/4f/【特定技術】僅能使用原生 JS 開始，不能使用套件 【特定技術】特別注意必須用 JS 處理各國時區 【書寫能力】請寫一篇 BLOG 來介紹你的挑戰過程，並介紹 JavaScript 如何提供 GMT、UTC 時區語法，以及何謂 TimeStamp。 這次使用了Mon, 20 May 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/1f/https://mtwmt.com/blog/jsboss/1f/【特定技術】需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印 出。 需使用 HTML、CSS、JS 技術 介面需與設計稿一致 demo 頁 sourse code 其實這篤文也拖了蠻久才產出來的，算是新手入門題目，for 迴Sat, 18 May 2019 00:00:00 GMThttps://mtwmt.com/blog/css/css_line_chart/https://mtwmt.com/blog/css/css_line_chart/利用 畢氏定理 畫出兩點間的斜線 算斜率有兩種函數 分別為 Math.atan() 與 Math.atan2() Math.atan() 接受一個參數，用法如下： angel 為一個角度的弧度值，slope是直線的斜率，是一個數字，這個數字可以是負的無窮大到正Sun, 12 May 2019 00:00:00 GMThttps://mtwmt.com/blog/js/typescript/https://mtwmt.com/blog/js/typescript/繼承 property 預設都是 pubilc，若不想外外部存取的話 要加上 private 屬性宣告為 static 在使用時，不需要實體化就能呼叫 給屬性預設值 constructor 建構式 在 typescript 中 函式呼叫 傳遞的參數 必須與 函Wed, 01 May 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/10f/https://mtwmt.com/blog/jsboss/10f/【特定技術】請開發 Chrome extension，不需上架，投稿時請提供安裝檔放在雲端，以 供 GM 下載測試。 【特定技術】打開 Chrome 新頁(tab)時，會隨機顯示你自己新增的語錄，或者是幹話。 【特定技術】可切換夜間/日間模式 【特定技術】新增Sun, 14 Apr 2019 00:00:00 GMThttps://mtwmt.com/blog/js/js_fn/https://mtwmt.com/blog/js/js_fn/此篇不定時更新, 便利健忘的自己 XD 利用 10 的次方特性產生需要的長度 再加上本身數字 再利用字串特性移除掉第一位數字Fri, 15 Mar 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/9f/https://mtwmt.com/blog/jsboss/9f/【特定技術】2017 遊戲輪盤規則輪盤只能轉 20 次，人人有獎 Flight：1 份 Child：4 份 Anything：5 份 Wifi：5 份 Wish：5 份已經被抽到的獎項，就不可再次出現 【特定技術】2018 遊戲輪盤規則編號 20：69 份編號Tue, 12 Mar 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/7f/https://mtwmt.com/blog/jsboss/7f/【特定技術】繪圖區請使用 Canvas 來設計，上方的控制列與下方的畫筆調整可不用 SAVE ：點擊後可直接下載轉出的 PNG 圖片 CLEAR ALL：清除畫版樣式 UNDO、REDO：上 一步、下一步點擊箭頭時，功能列介面皆可進行收闔 【擴充功能】請再自行Fri, 08 Mar 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/8f/https://mtwmt.com/blog/jsboss/8f/【特定技術】先手為 O，後手為 X，某方獲勝時，上方會紀錄各方的獲勝戰績 【特定技術】每回合結束後，會判定結果頁(平手、Ｏ 獲勝、X 獲勝) 【特定技術】需符合 RWD，能在低螢幕解析度也能遊玩，介面不能超出 x 軸，至少在以 下解析度能夠遊玩。 iPhoneWed, 06 Mar 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/3f/https://mtwmt.com/blog/jsboss/3f/【特定技術】數字位數過多時，不能因此而破版，計算機功能皆須齊全 這次使用 原生 JS 來挑戰這次關卡 demo 頁 sourse code 處理的問題有以下 ieee754 浮點數 字數過長 不造成破版 eval 加總 千分位進位 決定面版顯示資訊 做個 flThu, 21 Feb 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/6f/https://mtwmt.com/blog/jsboss/6f/【特定技術】 0 20 秒為 1 位數計算 (5-3)，21 40 秒為 2 位數計算 (30\19)，41 60 秒為 3 位數計算 (332+312)，加減乘除規則請用隨機產生，不可寫 死題目，60 秒內可無限次數答題。 040 秒答對加一分，41 60 Sun, 17 Feb 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/5f/https://mtwmt.com/blog/jsboss/5f/【特定技術】必須使用 AJAX 技術串接資料 API，不可直些寫死資料在變數上。 【特定技術】上方切換城市(高雄、台北)後，下方會切換該城市的各地區 這次的關卡比較大的問題點就應該就是在 CORS 的問題處理上畢竟要用前端處理公開 api 這件事，本應由後經由Mon, 11 Feb 2019 00:00:00 GMThttps://mtwmt.com/blog/jsboss/2f/https://mtwmt.com/blog/jsboss/2f/【特定技術】需使用 JS 原生語法的 getDate() 撈取時間，不可用套件 【特定技術】需使用 JS 原生語法的 setTimeout() 或 setInterval()，持續讓秒針、分 針、時針能夠以台北時區移動 這次時鐘的關卡，之 前js30 天的第二Thu, 07 Feb 2019 00:00:00 GMThttps://mtwmt.com/blog/js30/05_flex-panel-gallery/https://mtwmt.com/blog/js30/05_flex-panel-gallery/這次要來做的 點擊圖片後 動畫展開的效果 了解 flex 裡的空間分配 了解 js 的 toggle 與 includes 事件 flex-grow 剩餘空間分配比例 flex-shirk 壓縮比例 flex-basis 預約剩餘空間 三個值的縮寫為 若是 fTue, 29 Jan 2019 00:00:00 GMThttps://mtwmt.com/blog/gulp/gulp/https://mtwmt.com/blog/gulp/gulp/指令 縮寫 ---------------------- -------- npm install npm i npm install --save npm i -S npm install --save-dev npm i -D --save 將此文件 安裝Thu, 24 Jan 2019 00:00:00 GMThttps://mtwmt.com/blog/js30/07_array-cardio-day-2/https://mtwmt.com/blog/js30/07_array-cardio-day-2/延續 04Array Cardio Day 的後續，繼續悉其他操作陣列的方法 這次作者提供了 people 與 comments 兩組資料做練習 練習的題目依序是 people 是否有人滿 19 歲 (some) people 是否全部人滿 19 歲 (eveFri, 18 Jan 2019 00:00:00 GMThttps://mtwmt.com/blog/js30/04_array-cardio-day-1/https://mtwmt.com/blog/js30/04_array-cardio-day-1/此次主要是練習陣列的一些用法 分別有八個例子 作者一開始在 html 上提供了三組資料給大家練習 inventors是一組是發明家的列表 裡面包含 姓、名、出生年份、死亡年份 練習的題目依序是 篩選出 1500年 1600前出生的人 (filter) 將invWed, 16 Jan 2019 00:00:00 GMThttps://mtwmt.com/blog/js/googlemap_bounds/https://mtwmt.com/blog/js/googlemap_bounds/如何讓所有地圖標記自動縮放都在可視範圍的區域 首先 可以先了解地圖的邊界值 先上 code GoogleMap event 參照 html javascript 在地圖上 隨意拖拉 放大縮小 可觀察到值的變動 接著加上多點景點的經緯度 在初始化地圖裡做些修改 Mon, 14 Jan 2019 00:00:00 GMThttps://mtwmt.com/blog/js/api_cors_error/https://mtwmt.com/blog/js/api_cors_error/最近在練習 vue 時 會去政府公開 api 取資料 但有些 api 會有跨網域讀取限的問題 一開始在開發環境vue-cli有提供http-proxy-middleware做 proxy 處理跟網域這部份 但到了要發佈的時後 資料出現一樣會出現異常啊啊啊啊 像Mon, 24 Dec 2018 00:00:00 GMThttps://mtwmt.com/blog/hexo/hexo_cannot-find-module/https://mtwmt.com/blog/hexo/hexo_cannot-find-module/一陣子沒更新的 blog 想記錄一下這幾天遇到的問題 就在寫好之際 想預覽一下 發現 hexo 也出問題了!!! 噴了一堆錯 估狗了一下 原來是前陣子在練習 vue 的時後 為了安裝 vue-cli 所以升級了 node 版本 想不到啊想不到 當下使用的 heThu, 20 Dec 2018 00:00:00 GMThttps://mtwmt.com/blog/js30/03_css-variables/https://mtwmt.com/blog/js30/03_css-variables/這次認識到 input 裡更多的 type 屬性 range 、 color 因為平常不太會用到 所以特別去查了一下 原來是 html5 裡新增的屬性 可參照 HTML5 input type 屬性 了解 css 變數 利用 js 綁定監聽 input 變動的Mon, 03 Dec 2018 00:00:00 GMThttps://mtwmt.com/blog/js30/02_js-and-css-clock/https://mtwmt.com/blog/js30/02_js-and-css-clock/認識 css transform與 transition 調整時鐘指針 使用new Date()來讀取當前的時間 認識setInterval()計時 transform css 變形 transform-oragin 設定變形軸心 transform:rotaSun, 02 Dec 2018 00:00:00 GMThttps://mtwmt.com/blog/js30/01_javascript-drum-kit/https://mtwmt.com/blog/js30/01_javascript-drum-kit/了解鍵盤監聽事件 keyCode(鍵盤數字代碼) 鍵盤與聲音對應 畫面顯示所按到的鍵 (更改樣式) 此次排版主要是以 flex 為主 FLEX 速查小抄 key code 速查 cosnt 是 es6 裡新增的變數宣告 可參照 MDN-const es6 語法Sat, 01 Dec 2018 00:00:00 GMThttps://mtwmt.com/blog/css/rwd-fontsize/https://mtwmt.com/blog/css/rwd-fontsize/在寫 rwd 頁面縮放的時後，常常會遇到因為視窗做縮放 超出的文字會往下擠 為了不破壞設計的美感，當然也希望文字能做縮放啊！ 那文字該如何做設定才能隨著視窗做縮放呢 在這裡我選擇使用 rem 這個單位 rem 的文字基準取決於最外層的 html 文字大小，很適Tue, 27 Nov 2018 00:00:00 GMThttps://mtwmt.com/blog/js30/30_whack-a-mole/https://mtwmt.com/blog/js30/30_whack-a-mole/先規劃地鼠出現時間 ( 亂數時間出現 ) 設定地鼠出現位置 將出現時間跟地鼠出現位置整合 點按鈕控制遊戲開始 打地鼠計分!! 上述算法的產生可參考 [[筆記][JavaScript]用 Math.random()取得亂數的技巧](https://ithelp.Mon, 26 Nov 2018 00:00:00 GMThttps://mtwmt.com/blog/vscode/vscode/https://mtwmt.com/blog/vscode/vscode/Windows %APPDATA%\Code\User\settings.json Mac $HOME/Library/Application Support/Code/User/settings.json Linux $HOME/.config/Code/USun, 25 Nov 2018 00:00:00 GMThttps://mtwmt.com/blog/vscode/vscode_liveserver/https://mtwmt.com/blog/vscode/vscode_liveserver/Live Server 網頁伺服器 在串接 api 測試的時後非常的好用 依需求在設定裡更改預設配置 donotShowInfoMsg 關閉彈出訊息 useLocalIp 使用實體 ip 做為連線位址( 寫 rwd 頁 面時很實用 方便手機瀏覽 ) donotSun, 25 Nov 2018 00:00:00 GMThttps://mtwmt.com/blog/vscode/vscode_prettier/https://mtwmt.com/blog/vscode/vscode_prettier/Prettier 是程式碼格式化工具，可設定為存檔時自動格式化，不用再花時間去手動格式化 相對的對自己在撰寫習慣上 會易讀許多。 在 VSCODE 擴充功能 尋找 prettier 安裝 Prettier - Code formatter 這個版本 依需求在設Sun, 25 Nov 2018 00:00:00 GMThttps://mtwmt.com/blog/css/css_border-radius/https://mtwmt.com/blog/css/css_border-radius/就是基本的圓角 四邊的值都一樣 以順時針方式 依續由 左上 右上 右下 左下 設定各四個值 如下圖所示 沒斜線 4em 表示為 左上與右下 8em 表示為 右上與左下 CSS 值裡有斜線 斜線前表示 x 軸 斜線前表示 y 軸 如下圖所示 這個圓看起來有點奇怪Wed, 14 Nov 2018 00:00:00 GMThttps://mtwmt.com/blog/js/api_name_change/https://mtwmt.com/blog/js/api_name_change/最近在跟後端合作時，常遇到 列表與明細頁的 api 相同， 但所提供的 api 卻是有分大小寫，在共用上常常因為大小寫不同，而導致 js 出錯 所以就只有在後端 api 吐過來的時後，先把 api 參數調整好，才能順利進行啊啊啊 codepen 參考Mon, 27 Aug 2018 00:00:00 GMThttps://mtwmt.com/blog/jquery/jqextend/https://mtwmt.com/blog/jquery/jqextend/這篇應該算是踩雷過後的學習記錄 這樣寫的話 會造成 a 的無窮迴圈 才能正常的做物件深度合併 http://www.css88.com/jqapi-1.9/jQuery.extend/ http://www.runoob.com/jquery/misc-extTue, 26 Sep 2017 00:00:00 GMThttps://mtwmt.com/blog/css/css_input_text_focus/https://mtwmt.com/blog/css/css_input_text_focus/input focus 的時後 去後 label 做變化 效果如下： 記得 input 裡一定要加 required 不然標題會一直卡在上面 css 注意要加上 -webkit-appearance: none; 這行屬性 取消 ios 的預設樣式 效果的話其Tue, 25 Jul 2017 00:00:00 GMThttps://mtwmt.com/blog/js/js_hoisting/https://mtwmt.com/blog/js/js_hoisting/所得到的結果依續會是 3 2 根據 js 的特性 一般在全域範圍裡 不管 function 寫在哪裡 整段函式都會被自動提升到最上面 當然 var 也是 但是 var 只會提升變數名稱 而後面的值並不會 所以 當 var 裡面的變數還沒有值的時後 回傳的值就會Thu, 20 Jul 2017 00:00:00 GMThttps://mtwmt.com/blog/js/js_scopechain/https://mtwmt.com/blog/js/js_scopechain/得到的結果會是 1 為什麼呢? 因為 function a、function b、var myVar = 1; 都是在同一個階層裡被宣告，以一般來說 如果外面沒有包任何東西 就是在全域裡被宣告 所以 b 函式在執行的時後 會往外一層是尋找 myVar 的變數，Tue, 18 Jul 2017 00:00:00 GMThttps://mtwmt.com/blog/jquery/jqtrigger/https://mtwmt.com/blog/jquery/jqtrigger/trigger 這個屬性是 jQuery 所建構出來的 官方文件介紹 http://api.jquery.com/trigger/ 沒錯 都是英文，他寫的很清楚，但我看的很模糊 算了下我花了快半年以上的時間 才真正搞懂如何去應用它(應該是吧?! 主要是這一串，Thu, 06 Jul 2017 00:00:00 GMThttps://mtwmt.com/blog/life/headphone/https://mtwmt.com/blog/life/headphone/第一次參加 diy 耳機的活動 可以做出屬於自己的耳機覺得蠻開心的 先使用 3d 列印將東西印出來 接著就開始組裝了 單體上有顏色的是正極 使用烙鐵(焊筆)把線跟單體焊起來 單體是整個耳機中的精華啊，注意不要手去碰到裡面的模 好的單體帶你上天堂Mon, 03 Jul 2017 00:00:00 GMThttps://mtwmt.com/blog/css/rwd-height/https://mtwmt.com/blog/css/rwd-height/常常在寫網頁的時後 我們會需要設到寬跟高 但卻發生 為什麼寬能吃到 "%" 而高卻不能 在 pc 版的頁面上設置就算了 因為都是固定大小 但在這科技發展的時代裡 怎麼可能只有 pc 版的頁面呢!!? 當然是要加上目前引領時尚潮流的 RWD 呀 這樣拿出去才潮嘛Thu, 29 Jun 2017 00:00:00 GMThttps://mtwmt.com/blog/css/css_input_checkbox-switch/https://mtwmt.com/blog/css/css_input_checkbox-switch/利用 input checkbox 的 checked 特性來做到開關效果 效果如下： 可用 html 裡的 data 來當作選取器 避免 className 過多造成混亂 注意!! input 裡的 id 跟 label for 裡的名字記得要一樣 不然不會Mon, 26 Jun 2017 00:00:00 GMThttps://mtwmt.com/blog/gulp/node_del/https://mtwmt.com/blog/gulp/node_del/刪除多餘的資料夾或文件 終端機指令： npm gulp clean 或 yarn gulp clean http://www.gulpjs.com.cn/docs/recipes/delete-files-folder/Mon, 26 Jun 2017 00:00:00 GMThttps://mtwmt.com/blog/css/css_input_checkbox/https://mtwmt.com/blog/css/css_input_checkbox/利用 css before、after 的特性 去修改裡面的 input 樣式 在 before 裡畫出一個 ✔ 使用矩形其中兩個長寬邊畫 border 線條 再利用 css3 rotate 屬性 旋轉 45 度 讓長寬兩個邊看起來像 ✔ 再來 將其比例縮小到Fri, 23 Jun 2017 00:00:00 GMThttps://mtwmt.com/blog/js/js_varlet/https://mtwmt.com/blog/js/js_varlet/如何在 for 迴圈裡跑出利用 setTimeout 分別跑出 15 var 全域變數 ( 在函式的區塊內 )，若找不到會向上查找，直到沒有相同的變數名稱 let 區域變數 (es6 新增) 作用區在 {} 大括號裡 沒有 hoisting 的問題 constFri, 23 Jun 2017 00:00:00 GMThttps://mtwmt.com/blog/life/createblog/https://mtwmt.com/blog/life/createblog/一直以來都以為架設一個專屬於自己的 blog 需要一個後台來建置 後來直到某天在群組裡看到有人分享他的心得文 其實本來只是要問他頁面上的 js 效果是如何呈現的 後來他給了我一個答案 是用 hexo 搭配 next 模板樣式所架設出來的 好奇心如我，立馬估狗了Tue, 20 Jun 2017 00:00:00 GMT