Introduction CSS 一直是撰寫 web page 最有趣的要素之一，透過它的畫龍點睛總能讓網頁更加的生動、活潑有趣～近年來 CSS 除了在呈現上有了驚人的突破，更在其他領域做出了卓越貢獻，比方說透過 pseudo class 讓一些互動效果可以在 non JavaScript support 下完成，大大的減少了 JavaScript init 的 effo …

Introduction WWDC 23 於 06/06 隆重登場，相信大家最關切的莫過於 Vision Pro 的推出，一個全新且超級貴的的 xR 裝置究竟能激盪出多少火花？我其實不是很在乎，個人比較關切的唯有 web page 於 visionOS 下的 Safari 究竟有哪些要素需要注意，所以挑的第一個 session 便是 Meet Safari for spa …

一年一度的 Google I/O 又來了，由於從未體驗過現場觀看的氛圍，所以也準備了些 red bull 來伴我渡過這令人剛尬的時段（01:00 AM～03:00 AM）。為的不外乎就是希望第一時間可以掌握這間大公司未來為 developers 準備的方向，或是焦慮或是不安，希望能夠掌握更多的拼圖為自己服務打造出令人欽賴且不退流行的遠景。 在倒數 …

Introduction Safari 16.4 終於正式降臨了，從其功能介紹頁面可以感受得到充滿了自信且可望重新拾得 developers & users 的親睞，更新的項目森羅萬象非常的豐富，Scrollbar 長度會讓人捲個幾下就放棄不想再繼續看下去，我也大多跳著看不然工作都做不完了～ 簡單先歸納一下此次更新的要點如下： Web APP 的全面進化與支援，除了大家敲碗的 …

Introduction 隨著 Chrome VER.105 以及 Safari VER.16 的推出，CSS Layout 又邁向一個新的里程碑，一波設計革命即將展開，media queries 已經讓 web developers 可以快速勾勒出 responsive design 的神奇變化，加上 container queries 渲染後，兩者交乘，將讓 web …

Introduction 一年一度的 WWDC 於 06/06 正式展開，靠 web 吃飯的我，對於每年這個時刻總是期待非常，一方面想知道 Safari 推出了哪些有趣、新穎的功能，另一方面又怕噴出了一堆光怪陸離的實作~深深希望它可以跟標準靠攏，不要成為新生代 IE 。 鎖定了 What’s new in Safari and WebKit 這場 talk，要來跟大家分享一 …

Introduction 現在的 front-end 真他媽不是人幹的，所需具備的 know-how 也越來越多，除了完成頁面基本呈現外，尚有其他需要要素需要注意。簡單整理一下個人覺得 web page 必須具備哪些基本要素： Semantic layout Accessibility Mobile friendly Search Engine Optimize Web Vitals …

Introduction Chrome DevTools 於 VER.97 隆重推出 Recorder Panel，讓 user 可以透過該功能來做些使用行為的紀錄甚至是自動化流程。User 可以憑藉頁面的操作行為讓 Chrome 將之轉換成 end to end testing 的 JavaScript code，以利日後再利用。除此之外，更可以將之匯出，分享給其他人～ 玩過之後，發現它背後實際上是透過 Puppeteer 來加持並且完成這樣的 automation，也因為這樣，讓筆者想知道 Puppeteer 的點點滴滴，與 selenium 間的差異又是什麼 …

Introduction 由於現在越來越多的 mail client 已經支援了 Dark mode，為了提供一致的瀏覽體驗，所以理論上 mail content 能夠支援 Dark Mode 的話，便能讓瀏覽體驗昇華至另一境地。但是由於 mail client 對 Dark mode 的支援度有所差異，便成了最大的阻礙。 目前 mail client 可以分成以下三種支援： CSS @media (prefers-color-scheme: dark) 與平常 front-end 撰寫 CSS 相同，可以針對 Dark mode 下不同的 style，當 user 切換 view mode 的時候便能立即反應，不過目前完整支援的 mail client 不多，僅有 Apple Mail 以及 Outlook series app …