幾天前我展示了兩款免 JavaScript 的刪除確認設計，讀者 Dante Lee 主張勾 Checkbox 並不算好設計，它一樣需要額外移動滑鼠加點選，還會讓人想起被迫違背自由意志勾選「我同意」的不愉快回憶 (我他Ｘ的根本不想同意啊)。 想想，這說法確實有幾分道理，於是我厚著臉皮交流，索取到一個...

為了防止使用操作網頁時誤刪或不小心觸發一些不可逆動作，系統規格通常要求刪除前請使用者再次確認。 傳統設計會偏向彈出 Modal 視窗，強迫使用者在【確認/刪除】或【取消】間擇一執行： 圖片來源 我不是很愛這種設計方式，理由使用者在點完【刪除】圖示/按鈕後，畫面會轉換成 Modal 對話框在中央的顯...

有在管理對外網站的朋友，應該都有發現網站憑證的有效期限愈來愈短! 早年申請一次 SSL/TLS 憑證可以用兩年，不知何時起變成只能用一年，每年都要重新申請更新。 那麼，再告訴大家一個他 X 的好消息，CA/Browser Forum (CA/B 論壇) 於上個月做出最新決議，SSL/TLS 憑證最長...

被問到如何在單一 HTML 網頁做出多頁切換效果。 情境是一個只有兩三頁的超迷你網站，一切從簡，想改用單一 HTML 檔打死，但要有點選導覽頁籤切換不同頁面的效果，還必須能用瀏覽器的上一頁下一頁鈕跳轉。 這個需求技術難度不高，只用上古時代的 HTML/JavaScript 規格也能搞定。(查了一下，...

最近有個需求：手上有現成圖片(例如：投影片截圖、廣告 DM) 想快速轉成網頁，圖片上的特定項目希望加上超連結，點下去要能開啟指定網頁。 把整張圖當設計稿切版拆圖塊轉成 HTML 網頁當然是最完美的做法，但如果求快求簡單，則古老的 HTML <map> 元素 是個解法，在圖檔上方宣告幾何形...

YouTube 支援在網頁內嵌 IFrame，讓你可在自家網頁直接播放 YouTube 影片，我的部落格文章有時也會用。 最近幫忙查了一起案例，某些 YouTube 影片無法在某些網頁內嵌播放，必須單獨在 YouTube 開啟才能看。只有某些影片不能播，而且相同的網頁可能放在 A 網站 OK，放在...

使用者反映：有張電腦上看起來色彩正常的 JPG 檔，上傳到網站後，照片偏亮且鮮豔到浮誇，詢問程式是否在上傳過程修圖？ 聽完心想，我寫的檔案上傳向來都是Garbage In Garbage Out原封不動搬資料，何德何能還會修圖(連該用什麼演算法我都沒概念)，莫非 ChatGPT 已開始要接管地球了？...

朋友分享了一篇網路文章，題材我有興趣，但讀來帶有痛苦感，像是馬拉松最後階段，得靠意志力才能撐下去不棄賽，但我明明是在讀第一段呀。 做了民調，原來不只我有這種感覺。嚴格來說，文章用字還算淺白通順，到底什麼原因讓它散發著「別讀了，快放棄吧，這些文字不是你能駕御的」的暗示？ (以上非原文章，是用廢文產生...

再來聊聊「依據背景色切換黑字或白字，確保文字明顯容易閱讀」這檔事。 過去我都用 Github Copilot 教我的186 魔術數字公式：complementary = (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000000' : '#ffff...

寫網頁介面時，有時我會想用多種顏色表示不同類別資料，此時如何挑選一組彼此差異明顯的顏色，差異大到即使同框出現也不致混淆，這批顏色該如何搭配組合是個學問。 面對這個常見的小需求，我 Google 到不錯的建議 - List of 20 Simple, Distinct Colors，為了繪製捷運路線圖...

上回提過 Azure 有提供 OpenAI Service，與 OpenAI API 相比，具有 SLA 保證、多區域備援、AD 整合、虛擬網路整合、更符合企業規範... 等特色。而對個人用戶，若手上有 Azure 免費額度(例如：Visual Studio Enterprise 訂閱 150 US...

同事報案，某表單有個連絡電話欄位，Edge/Chrome 的自動填表功能會提示上回填的電話號碼，但使用者選擇帶入上次填寫電話，瀏覽器卻把另一個代理人欄位連帶改成上次填寫的姓名，使用者沒注意到，上傳了錯誤的內容。 我知道瀏覽器有自動填表的功能，最常遇到是在填馬拉松報名資料時但沒細究過，這次看來得花點時...

IE 時代即將劃上句點，客戶端近期已開始改用 Edge，甚至連 PDF 也改為預設用 Edge 開啟 (註：依之前的經驗，某些 PDF 文件用 Edge/Chrome 開啟會有字型問題，有時仍得依賴 Acrobat Reader)。 IE Only 網頁經過拉皮翻修，多能順利在 Edge 檢視，但過...

FB 是當今網路行銷不可或缺的社群媒體。大家應該有注意到，在 FB 分享網頁有些網站 URL 會產生包含圖片、標題及摘要說明的精美預覽區塊[1]，有些則只有單調的網站名稱及標題[2]： 二者的差別在於網頁有沒有加入 Open Graph Tag (「開放社交關係圖」標籤)，就是網頁 HTML 要加...

免費字型檔圖示 Font-Awesome 是我的主力圖示來源，至今已到 6.1.1 版，授權方案也有些改變。前幾天 Google Material 圖示一文提到 Font-Awesome 6 分為 Free、Pro、Pro Max 三種方案，當時的認知是只有 Free 可免費用於個人或中低量用途(每...

前陣子驚喜發現 Google 有一套 Material 風格字型檔案圖示，數量超過 2500 個，開放原始碼，採 Apach V2 授權可免費用於個人及商業用途，還有友善的查詢介面： 使用方法跟 Font Awesome 一樣簡單，用 LINK 參照 CSS，在 HTML 插入 <span ...