前陣子講到 .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 規格小圖示讓網頁元素意義更容易理解，不需視覺設計人員支援，單兵就能完成戰鬥。(不只全端還一條龍呢) 很多時侯，圖示會帶來畫龍點睛的神奇效果，...

生活與工作上遇過多次，從後端接到 2023-07-25T23:30:00Z JSON 格式的 UTC 時間字串，new Date('2023-07-25T23:30:00Z') 轉成 Date 物件後，不想為此引用程式庫，如何用原生 API 再轉成本地時間的 yyyy-MM-mm HH:mm:ss ...

使用微軟相關產品、平台時，最權威的參考資料來源莫過 MS Learn 網站。 老一輩開發者更熟悉應是它的前前身 - MSDN 文件，MSDN 在 2016 時改版為 docs.microsoft.com，2018 時再更名為 Microsoft Learn，彙集 Microsoft 所有產品與服務相...

這篇適合技能停在 jQuery 及 WebForm + AJAX 時代的老人。 依我從小學到的傳統概念，要存取 DOM 元素必須把程式寫進 $(function() ) 或 window.onload 事件（二者差別在於前者發生在載入 DOM 後，後者需等圖檔等資源載入完成)以確保程式執行時 DOM...

繼續我的 HTML 文件檔計劃。封裝文件檔的另一項重點是把所有內容打包成單一 .html 檔 (高年級同學可能還記得 IE 時代有個 .mht，差不多的概念)，把要引用的第三方程式庫、CSS、圖檔都嵌進 .html 是較可行的做法，若包成 ZIP 閱讀時要在本機解壓縮，應該沒人能接受吧？網頁 HTM...

最近突發奇想，想將系統查詢結果嵌入網頁匯出成 .html，概念上像 Excel 或 Word 一樣是個文件檔，方便 Email 轉寄、歸檔保存，而採用網頁的好處是免裝軟體，用瀏覽器就能開啟，透過 JavaScript 可實現極佳的互動操作體驗。 但我馬上想到一個問題，針對機敏資料，Excel/Wor...

學會 CSS Flexbox 時超開心，以為人生從此不必再為佔滿剩餘網頁寬/高度煩惱，豈知還是會踩到小石頭。 有個需求是希望 IFrame/DIV 佔滿 TD 全部高度，IFrame/DIV 有設 height: 100%，但因父容器未指定高度時，不會發生效果。 用範例解說。table 透過 fle...

這些年在 JavaScript 處理 XML 的機會愈來愈少，但從事古蹟翻新與維護難免遇到。最近想為老系統增加一個編輯及檢視 XML 的小工具，有兩個小需求： 想讓 <textarea> 輸入的 XML 內容依標準縮排規則排版 提供可以展開、縮合 XML 節點的互動式 XML 檢視器 ...