網頁顯示地圖之免費開源解決方案
 |  | 1 |  | 1,639 |
上回玩網頁地圖已是 14 年前的事，我的認知停留在申請 API Key 使用 Google Map 程式庫的做法，後來的印象是 Google Map 限制愈來愈多，雖然仍有免費額度，但要綁信用卡才能用。 最近在 Side Project 想搞圖地圖相關應用，十多年來物換星移，滄海桑田，決定在 202...
「中文計算機術語速查工具」上線啦~
| | | 1 | | 2,010 |
這大概是為了喝牛奶養一頭牛的典型案例吧... (笑) 許多計算機相關術語，繁體與簡體翻譯及慣用說法不同，有些不難識別，像是記憶體/內存、陣列/數組、影片/視頻... 大家耳熟能詳，但有些如外掛/插件、繫結/綁定、死結/死鎖、回饋/反饋就不是那麼一望便知。至於「行」與「列」則是進入一個「你的列是我的行...
手捏支援 Vue v-model 的可清除文字輸入框
| | | 0 | | 542 |
自從 IE 登出，Trident 版 Edge 被放生，瀏覽器重回大一統時代。有別於前次的 IE 王朝，當今主宰前端的 Chromium 配備的 HTML / JavaScript / CSS 規格完備，功能與二十年前不可同日而語，且會自動更新不用太擔心支援問題，現在寫前端輕鬆許多。 2016 加入...
使用原生 JavaScript + 瀏覽器內建 API 實作連動式文章目錄(TOC)
| | | 0 | | 859 |
這篇文章源自上回 Vibe Coding 踩坑經驗，Claude Sonnet 4 幫改程式時硬生生吃掉一個 </div>，最後回歸傳統除錯技巧，分析 Intersection Observer 運作原理，靠 F12 偵錯工具設中斷點查元素狀態才破案。 當時是我第一次認真研究 Inter...
2025 年，前端框架還是 React、Angular、Vue 三分天下嗎？
| | | 1 | | 5,882 |
對於前端框架，我的認知停留在 - React、Angular、Vue 三分天下，React 最受歡迎，仍為當今框架之首應無人異議，至於昔日王者 Angular 因複雜度及學習曲線有衰退的趨勢，Vue 仗其漸進式特性(可以 <script src="..."> 在網頁寫...
前端小技 - 使用瀏覽器原生 API 執行壓縮與解壓縮
| | | 0 | | 1,582 |
自從 IE 被送走，Trident 版 Edge 被微軟賜死，Edge 從善如流改用 Chromium 核心，瀏覽器又重回到當年的大一統時代。 對企業內部網站應用來說，瀏覽器版本統一意味不需要煩惱跨瀏覽器版本問題，只要開發人員測試 OK，很少會因使用者瀏覽器不同而出問題。 (年輕同學可能沒體驗過惱人...
前端筆記 - 瀏覽器端資料長期儲存解決方案：localStorage、IndexedDB 與 OPFS
| | | 0 | | 1,966 |
上回提到在瀏覽器裡跑的 SQL 引擎 - SQLite WASM 帶出 DB 檔案該存哪裡的議題，我後來用序列化存進 localStroage 做了簡單示範，但 localStorage 5 ~ 10 MB 的容量上限明顯限制了應用場景。 除了 localStorage，瀏覽器還有另外兩種長期儲存資...
前端練習 - 真·多執行緒背景作業 WebWorker
| | | 0 | | 2,131 |
WebWorker 的誕生可以追溯到 2009 年參考，說起來已是項古老的技術，Firefox 3.5 最早開始實作，如今所有主流瀏覽器都已支援，除非你還需要支援 IE (拍拍)，大可安心使用。 不過，需要動用 WebWorker 多屬進階應用情境，大多也有替代方法可實現，所以寫了幾十年網頁從沒在實...
答客問 - SQLite WASM 資料庫如何長期保存？
| | | 2 | | 1,810 |
昨天介紹了可以在瀏覽器裡跑的 SQL 引擎 - SQLite WASM，部落格跟臉書留言都出現類似提問 - 這種做法的 SQL 資料庫只存在記憶體，分頁一關閉便化為烏有，要如何長期保存？ 既然蠻多人有此疑惑，值得專門寫一篇講解。 簡單來說，SQLite WASM 提供了 .export() 方法可將...
在瀏覽器裡跑 SQL 引擎 - SQLite WASM
| | | 5 | | 2,697 |
用 Kaggle 上的最受歡迎 Github 專案資料集當練習，67MB 大小的 CSV 檔包含 210,180 個 Github 專案的 Id、名稱、說明、URL、星星數、Fork 數、關注數、程式語言、開源授權... 等欄位。 如何寫個網頁可以下 SQL 即興查詢前十大程式語言、最多專案用的授權...
好用的 Chrome/Edge 內建 JavaScript 程式片段收藏箱 - Snippets
| | | 3 | | 1,631 |
前幾天分享瀏覽器 F12 開發者工具轉存物件到 JSON 檔的 JavaScript 小函式，從讀者們的回饋我又學到新東西。(特此感謝) shelob 分享可以將這些小程式放在 Tampermonkey，這樣子要用時可以省去爬文、複製、貼上的功夫。 Chester Fung 則提醒我，其實 Chro...
前端小技 - 更多確認刪除玩法：長按 3 秒、加按 Shift
| | | 0 | | 1,434 |
幾天前我展示了兩款免 JavaScript 的刪除確認設計，讀者 Dante Lee 主張勾 Checkbox 並不算好設計，它一樣需要額外移動滑鼠加點選，還會讓人想起被迫違背自由意志勾選「我同意」的不愉快回憶 (我他Ｘ的根本不想同意啊)。 想想，這說法確實有幾分道理，於是我厚著臉皮交流，索取到一個...
再談班佛定律 - 台股股價第一位是 1 比例最高是因為面值 10 元？
| | | 0 | | 873 |
故事從這則貼文開始： 依直覺，台股上市公司股價的第一位數字，1 到 9 的出現次數應該是平均分佈吧？ 事實不然，依據「班佛定律」，舉凡人口、土地面積、河川長度，乃至影片文章的點閱數，這些自然形成的數字，只要筆數夠多，統計下來 1 開頭的機率多半超過 30%，其次是 2 的17.6%，一路到 9 下滑...
JavaScript 互動圖表程式庫 - D3.js 長條圖練習
| | | 0 | | 1,602 |
繪製圖表是常見的程式需求，過去我寫過不少相關文章： Python 練習：CSV 繪製樞鈕分析圖表 分析Log 計算平均、標準差、95 百分位數並繪製圖表- 從C# 到Python 讀書筆記 - 資料視覺化常用圖表整理 C# 開源圖表程式庫 - ScottPlot 就語言生態系及程式庫成熟度來說，...
Coding4Fun - AVL 樹新手練習區
| | | 0 | | 1,712 |
上回提到我最近在看 Hello 演算法。這陣子進度推進到 AVL 樹，原理不算難，把握「Balance Factor 達到正負 2 就旋轉節點降回正負 1 以內以維持平衡化」的原則，再將旋轉規則簡化成：LL 右旋、LR 左旋再右旋、RR 左旋、RL 右旋再右旋，就算學完了。 圖片來源 話雖如此，但...
資安小常識 - 為什麼不建議在網址用 QueryString (?a=...) 傳資料？
| | | 9 | | 8,860 |
幫忙 Review 前端網頁程式，發現某網頁用了以下寫法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...