最黑暗的界面時代來臨 網頁設計準備好了嗎？ 2020/06/01 2019 年的 iOS 13, iPadOS 13, Android 10 也都開始在系統內建了深色模式介面功能，深色模式網頁設計實作技術整理：CSS prefers-color-scheme、JS matchMedia 偵測切換、W3C System Color 應用... 繼續閱讀 使用者介面網頁設計視覺設計#apple#css#ios#mac#UI
PageSpeed 100 分又怎樣？全綠也可能在 SEO 排名輸給慢網站 2020/04/06 完整解析 PageSpeed Insights、Lighthouse 與 Core Web Vitals 的評分差異，說明實驗室跑分和真實使用者資料為什麼會互相打架。從 FCP、Speed Index、LCP、TBT、CLS、INP 到 TTFB，逐項介紹 render-blocking CSS、長時間占用主執行緒、未使用的 JavaScript、圖片傳送效能、字型載入、快取生命週期、第三方腳本與伺服器回應時間等常見 audit，並提供 Web Font、preconnect、preload、lazy loading、content-visibility、Web Worker、WebP 與自架主機的實作範例及反向優化翻車案例。本文也會討論 PageSpeed 100 分、Coew Web Vitals 全綠與 SEO 排名之間並非直接因果，協助網站經營者找出真正的效能瓶頸，而不是看到紅字就盲目修改。... 繼續閱讀 網頁設計#cloudflare#google#js#pagespeed#RWD#SEO#webfont
參加口罩地圖之亂 2020/02/17 COVID-19 疫情初期口罩地圖的混亂過程：民間工程師自製超商庫存地圖六小時收到 60 萬 Google 帳單、政府改推藥局實名制，以及自己用寶可夢道館相關的製作經驗，自製藥局口罩地圖的開發紀錄。... 繼續閱讀 網頁設計視覺設計軟體產品體驗#api#map#個資外洩
把 CorelDRAW 的煩人廣告關掉 2019/11/30 Adobe 身為一個資料外洩大戶，在 2013 年外洩了 3800 萬筆用戶資料，2019 年又有 750 萬筆，以及每年黑色星期五的三折/五折訂閱優惠讓大家口耳相傳，而且還是現代軟體訂閱制的知名案例。但今天要講的是另一個曾經的榮耀，CorelDRAW(摳桌)。CorelDRAW 很佛心，有提供短期免費試用版，雖然我也不會用，但開個檔案轉存 pdf 還是可以的，所以遇到給檔是給 CorelDRAW 的 cdr 格式的稀有行為，只要下載試用版來開檔案就好了。但遇到客人... 繼續閱讀 視覺設計軟體產品體驗#adobe
如果要做一個「離我最近可以騎的共享機車」線上服務 2019/11/16 幾年前，在 Facebook 上面看到一位大大表演，上網瀏覽露天會員中心時，開啟了瀏覽器的 Developer tool，改了一串東西後，整個會員中心的資料就變成別人的。那時候林北的露天帳號剛好被盜，瀏覽器的 Developer tool 我也有，網頁程式技術我也略懂，怎麼沒想到這樣用？從此打開了開關，不相信任何人寫的程式，自己寫的程式也可能全是坑….前陣子看到那位追蹤已久的大大又發了一篇共享機車服務某種程度上可以用來窺探隱私遭許多人抨擊... 繼續閱讀 網頁設計軟體產品體驗#api#gogoro#irent#map#個資外洩#共享機車#爬蟲
網頁無障礙網頁規範對於上稿人員的要求相當多 2019/11/03 台灣政府無障礙網頁標章申請流程概述，以及對網頁設計師和內容編輯的具體合規要求，包含各種插入圖片、表格、影片、超連結、檔案，都需要額外注意。... 繼續閱讀 文書小幫手網頁設計視覺設計#css#editor#HTML5#Https
CKFinder 3 .Net 版本安裝失敗小筆記 2019/09/23 CKFinder 檔案管理器的 PHP 版本於 2015 年釋出版本號 3 的大改版，.NET 版本比較遲，於2016年12月才釋出(CKFinder 3.3 for ASP.NET Released)，如今過了兩年多到 3.5.1，地雷應該都清光了吧？畢竟 CKFinder 2 已經不再更新了，在觸控裝置上也很難用，來自己摸索安裝看看 CKFinder 3。CKFinder 是最低品質 costdown web 程式開發重要的一環，開發人員不需要自己用 PHP 或 ASP.NET 的伺服器端語法讀取目錄和檔案清單、建立目錄、多... 繼續閱讀 網頁設計軟體產品體驗#CKEditor#ckfinder
iPadOS 讓 iPad 可以接滑鼠了，游標偵聽事件能用了嗎？網頁選單要大改嗎？ 2019/08/24 Apple 在2019年6月的 WWDC 開發者大會發佈了 iPadOS 和 iOS 13 的預覽版，所謂的 iPadOS 就是把 iPad 的 iOS 作業系統另外獨立出來，iPadOS 13.4（2020 年 3 月）外接滑鼠或觸控板後，CSS hover 事件與 JS 滑鼠事件終於正常觸發的實測記錄，整理哪些事件有效、哪些仍有限制，了解 iPad 可以觸控對網頁前端開發的影響。... 繼續閱讀 使用者介面網頁設計#apple#ios#mobile#RWD
網站放在台灣 容易讓Google Search Console偵測到網站有行動裝置可用性問題？ 2019/08/03 收到 Google Search Console「行動裝置可用性問題」通知信的排查記錄：文字太小、內容超出螢幕、可點選元素距離太近，追查原因推測台灣主機 IP 特別容易觸發此類偵測通知。... 繼續閱讀 網頁設計#google#mobile#SEO
思源黑體設計稿字體樣式與CSS font-weight 對照 2019/07/28 有時候要照別人的設計稿按圖施工，在 Adobe 的軟體裡面，思源黑體的字體樣式是用 Light, Black, Medium…而網頁的 css font-weight 並無這些東西，打 font-weight:black 是顯示不出來的。版本比較新的 Adobe illustrator 有一個產生 CSS 的工具，外行人的想法就是以為導入一個工具之後就可以解決所有問題，但是有常識的人都知道這種「自動轉換」的東西通常有三大特點，一：很雷，二：超雷，三：雷到爆。以本例來說，需要知道 ai 檔... 繼續閱讀 網頁設計視覺設計#webfont
