Astro 5.x 升級實戰：從 4.10 到 5.14 的完整遷移指南
最近進行部落格的技術升級，首先從 Astro 4.10.1 升級到 5.14.1，接著再處理 TailwindCSS v4 升級。Astro 的升級相對平順，主要是 API 變更和最佳實踐的調整，沒有 TailwindCSS 那麼多坑要踩。 升級版本： Ast
標籤：JavaScript
2025
2022
Async/Await vs RxJS 非同步取值筆記
在使用 async/await 一定要先了解 Promise Promise 是 es6 之後才開始有的 Promise 程式碼 將 promise 封裝後包成 function 使用 promise 可轉成 then 的串接 async/await 範例 R
2021
樹狀結構的各種處理 (Tree Data Structure)
最近為了處理 tree 的樹狀結構多了好幾根白頭髮，囧 這是一筆 tree (樹) 的資料 參考資料： The Tree data structure
JS 匯出 CSV 破版
專案裡有很多需要把表格下載成 CSV 檔，最近出現了 CSV 破版的問題 情境如下： 原本某個儲存格裡面的內容裡面有換行，匯出成 CSV 時，照理說，換行應該是在當下儲存格做換行，沒想到卻變成了這樣 QQ 在資料來源裡，可以看到，換行的地方是 \n 因為這個\
拋棄 jQuery 用 JS 寫一個 gotop (回到最上) 功能吧!
jQuery 裡有提供一些動畫的函式庫 animate 讓使用者直接使用，所以短短幾行就能搞定 了 但為了一個 gotop 的功能 掛上一支 jQuery，實在有點不滑算，所以這裡使用了原生的 JS 來寫出相同效果的 gotop 在 JS 裡 有提供一個 wi
2020
JS Template Strings ( 模版字串 / 樣版字串 )
過去寫法 以 jquery 為例 上面這種寫法相當繁鎖不方便，ES6 引入了樣版字串解決這個問題 如果在字串裡需要使用到反引號，則前面要用反斜線(逃役字元)轉義 所有樣版字串 在使用多行字串時，所有的空格與縮排都是會被保留的，若不想要這個換行 可以使用 tri
JS Object 物件的屬性特徵
印出來後 如圖所示 修改物件裡面屬性的值可以是 obj.a = 4 或 obj[a] = 4 這兩種方法都可以 定義物件裡的屬性 與 調整屬性特徵 特徵： 值(value) = 對應的值是甚麼 可否寫入(writable) = 可否進行屬性質的修改 可否被刪除
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
JS Array 新增值的幾種方式
在工作上時 會常常處理到陣列傳遞的情況，偶然看到一些國外的文章寫整理的蠻好的，也就此剛好記錄下來 直接將新的值加到後面 es6 可以這樣寫 splice 可以在很多情境上使用 可用來新增新的值，或是取代某個值等 這裡就介紹新增值的部份 array.splice
2019
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
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 處理跟網域這部份 但到了要發佈的時後 資料出現一樣會出現異常啊啊啊啊 像
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 語法
JS30：30_Whack A Mole!
先規劃地鼠出現時間 ( 亂數時間出現 ) 設定地鼠出現位置 將出現時間跟地鼠出現位置整合 點按鈕控制遊戲開始 打地鼠計分!! 上述算法的產生可參考 [[筆記][JavaScript]用 Math.random()取得亂數的技巧](https://ithelp.
修改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
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/ 沒錯 都是英文，他寫的很清楚，但我看的很模糊 算了下我花了快半年以上的時間 才真正搞懂如何去應用它(應該是吧?! 主要是這一串，
JS var 跟 let 差別 (變數宣告)
如何在 for 迴圈裡跑出利用 setTimeout 分別跑出 15 var 全域變數 ( 在函式的區塊內 )，若找不到會向上查找，直到沒有相同的變數名稱 let 區域變數 (es6 新增) 作用區在 {} 大括號裡 沒有 hoisting 的問題 const