Category: html

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

為了防止使用操作網頁時誤刪或不小心觸發一些不可逆動作,系統規格通常要求刪除前請使用者再次確認。 傳統設計會偏向彈出 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 已開始要接管地球了?...

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

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

同事報案,某表單有個連絡電話欄位,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 可免費用於個人或中低量用途(每...