身為十幾年前開始學 JavaScript 的老人，腦中總有些過時的觀念與知識，就像聊天時偶爾會脫口說出小叮噹、神奇寶貝般不合時宜，當場曝露年紀。 昨天談到 Chromium keydown Bug，讀者 Chester Fung 提醒，keydown/keyup 事件中已不該再用 keyCode 取...

使用者反應，上線超過十年的 jQuery 自動完成套件最近常失靈，使用者輸入字元時沒反應，但時好時壞，有時是好的，有時會壞掉。 無法 100% 重現的茶包最麻煩了，連我們在測試台嘗試重現問題，也是有時可以有時不行，理不出頭緒。費了番手腳，終於找出容易重現問題的關鍵(但也非 100% 可重現) - 啟...

自從 IE「榮退」(雖然我也曾是「IE 必須死」派，念在當全端攻城獅靠他吃了十幾年飯不能忘本，該有的尊敬還是要給)、Edge 也投靠 Chromium 幫，瀏覽器再次進入大一統時代，寫企業應用前端介面頓時簡單許多，不必再為跨瀏覽器傷透腦筋。 而隨著 HTML5 / CSS / 瀏覽器 API 規格日...

前幾天用 CSS + 自訂網頁元素刻了香草 3D 骰子，好久沒寫前端寫出興趣來，最近有另一個需求是想做上傳進度條。類似的東西十年前做過，當時是用 Knockout.js MVVM。 盤點十年下來我用的前端框架從 Knockout.js 換 Angular.js 再轉到 Vue.js，經歷過兩次砍掉重...

故事是這樣的，在網路上查到一個很酷的 CSS 3D 旋轉方塊教學： 看到後禁不住手癢，馬上照著刻了一套洗巴辣擲骰子動畫： 嚴格來說，我的 HTML 5 CSS 跟 JavaScript 技能等級只到中上，過去要挑戰這種題目屬越級打怪，少不了爬文地獄加撞牆撞到飽。現在有了 Github Copli...

JavaScript 在 JSON.stringify() 時會將 Date 型別轉成 ISO 8601 格式，而時區則一律轉成 UTC 時間 參考，故在網頁 new Date() 取得台北時間轉成 JSON 時會減 8 小時變成 YYYY-MM-DDTHH:mm:ss.sssZ 格式。 然而 IS...

如果有人問你，要怎麼寫 JavaScript 在以下網頁的 textarea 欄位塞值並按下送出鈕，你可能會像我噗哧一笑，想說這是什麼白痴問題？ 然後用肌肉記憶生出兩行程式碼： document.querySelector('textarea.ant-input').value = 'summar...

前陣子講到 .NET PDF 文件製作，讀者 fredli 提到 HTML 轉 PDF 缺乏 好用套件。在我心中，HTML 轉 PDF 首推微軟推出的 Playwright，可選擇 Chromium 引擎，不必擔心 HTML 支援不夠力或渲染邏輯不對(網頁用 Chrome 看不正常，錯的當然是網頁)...

在很多網站看過一種方便設計 - 從別處選取圖片複製到剪貼簿，在網頁空白處按 Ctrl-V，便會將圖片上傳到網站。 總想著，改天我要為自己的網站也加上這個酷功能，就今天吧! 在 IE 退役及Edge 改用 Chromium 引擎後，瀏覽器回到大一統的和平局面(令人想起當年 IE 市佔 95% 的時光)...

最近玩了自架 ChatGPT 網站的開源專案 Chatbot UI，網站以 React 前端程式為核心，1.0 原以 localStorage 儲存資料，基於安全疑慮、大小限制、無法跨機器共用等因素，改版時將資料改存到後端，用了一個我沒看過的資料庫 - Supabase。 Supabase是一個開源...

說一下我的需求，有個寬度有限的 HTML 表格欄位，內容文字長度不一，大部分都放得下，但偶爾文字過長會折行使列高加倍，造成排版雜亂且不易閱讀。增加欄位是最簡單的解法，但但因表格欄位眾多難再增大。換個思路，既然無法增加欄寬就讓字小一點，若還是擠不下也別勉強，多行就多行；但另外有個問題，原本文字置中，遇...

踩到一個 Node.js 小問題，用一小段程式重現。 簡單的 HTTP 客戶端測試，一人分飾兩角，預設為伺服器模式，利用內建 http 模組 Bind 127.0.0.1 9527 Port 跑一個簡單的伺服器(永遠回傳 Hello World)；若帶入參數 client，則使用 fetch 呼叫 ...

維護古蹟過程遇到要串接多個非同步作業的需求，例如：Warn()、UpdateConfirm() 與 CallApi() 為非同步作業(詢問使用者確認或取消、呼叫 WebAPI)，函式有點年紀故傳回的是 jQuery Promise，我要做到 Warn() 確定才呼叫 UpdateConfirm()，...

想在網頁加上動畫效果，資料表格中在某列資料變化時改變背景色吸引注意，再使用淡化效果恢復原本背景色。 以此目標我設計了一個綜合練習題，在網頁上放五個 DIV，點擊後使用 CSS 動畫效果將背景色改為紫色再逐漸淡化，1.5 秒後恢復原來顏色。若連續點擊同一 DIV，需停止現有動畫，重頭播放。另外，設計一...

先前提過我想用便宜的自製 USB 實體金鑰配合 GPG 軟體實現「擁有特定硬體才能簽章、解密及登入」的高強度資安機制，實體 USB 金鑰具備有金鑰無法匯出複製、無法遠端破解、密碼及 PIN 碼雙重保護、錯誤次數上限鎖定銷毁等特性，安全性一般金鑰檔高出數倍。 不過，用 GPG 工具指令將金鑰存入 US...

全端工程師做的網頁以簡單質樸著稱(是說想華麗也華麗不起來)，用到的視覺元素不多，以我自己為例，內部系統操作介面通常就 CSS 簡單配個色，頂多加些 16x16 規格小圖示讓網頁元素意義更容易理解，不需視覺設計人員支援，單兵就能完成戰鬥。(不只全端還一條龍呢) 很多時侯，圖示會帶來畫龍點睛的神奇效果，...