Sign in Subscribe

Latest

自 Chrome 109 版本開始靜音影片在切換分頁會被暫停..?

自 Chrome 109 版本開始靜音影片在切換分頁會被暫停..?

這是一篇隨手紀錄，大概在 1/30 收到回報。 若進入播放頁是預設靜音 + 自動播放時，切換到其他瀏覽器 tabs 分頁一段時間再切回來，會發現原本播放頁的影片是被暫停又重新播放的。 但是..但是瀏覽器的行為原本不是這樣啊！！！ 排查過程 測試影片平台 * 公司平台任何一部影片 * Youtube 平台任何一部影片 錯誤複現 * 使用 Chrome 進入目前的播放頁 * 或是把有播放器自動播放且靜音的網頁作為該網站的首次進入點(ex：Youtube 播放頁）也就是初次打開網站即遇見播放器，即可複現此一情境。 排查方向 瀏覽器 核心版本 影片平台 是否複現(暫停影片) Chrome Chromium 109 Youtube 是 Brave Chromium 108 Youtube 否 Edge Chromium 108 Youtube 否 Firefox
SimonAllen
工程師們需要建立自提需求清單

工程師們需要建立自提需求清單

平常在開發上，RD 們可能會產生除 PM/PO 需求之外，自己注意到或想做之事，例如： * 專案環境設定、程式碼或套件版本升級 * RD 自己注意到的 bug * RD 自提需求 * ..etc 某些 RD 導向的需求，PM 會不太理解其對 Project 的幫助（例如程式語言的版本升級，短期對專案不會有助益)，有的則是 RD 自己對 Project 的新想法，想要增加某些功能時，這時 RD 們就會傾向先自行開單紀錄。 然而 RD 們的自提單號優先度往往很低，常常開了放在那邊長灰塵，一忙起來大家就忘記有這個需求。 雖然鼓勵團隊成員自行開單(再通知 PM 排後續開發時間），但每個人開了自己的單號，很容易產生重複開單或者沒有統一單號管理的問題。 具體做法建議 * 在任務發單系統建立一張主票、母票或主任務為「某某 Team
SimonAllen

關於 Chrome User-Agent Reduction

前陣子在處理公司應 Chrome User-Agent Reduction Plan 政策，盤點可能受影響之程式碼，這裡也記錄一下 User-Agent Reduction 這件事： 先說結論：User-Agent Reduction 旨在減少 user-agent 字串多餘資訊(或多餘的次版號）單純拿 user-agent 字串判斷的程式碼頂多 match 不到而已，應不至於造成 JS 扔出錯誤 以 https://developer.chrome.com/docs/privacy-sandbox/user-agent/#why-do-we-need-reduced-ua-and-ua-ch 內容來看： The reduced User-Agent includes the browser's brand and a significant version, where
SimonAllen
Git Commit 請加上任務單號

Git Commit 請加上任務單號

我在部落格這頁設定的置頂圖片就是很常見的情境，在大型專案中開發，我們能從 Git Message 知道做了什麼動作，卻無法知道是「為了什麼情境」而做這些動作。 在軟體開發中，如果是 VS Code 使用者，通常都會安裝 GitLens 擴充套件（或者其他你習慣的 Git 擴充套件)，好看到程式碼該行最後的 commit message。 而 Git Commit 的 message 流派不少，我認為 Web Frontend 在多人協作需要做到最基本、最大前提的一件事情 - 帶上開發的「任務單號」！ 不論團隊用什麼任務發單管理系統，如 Redmine 或 Jira，在新增任務開票、開單後，該任務都會有一個系統自動產生的號碼或編號「任務單號」 理解修改的 Context 情境比知道改了什麼還重要 當開發者覺得某段
SimonAllen
錯誤處理：開發 Client 別忘了實作 Error View 錯誤畫面

錯誤處理：開發 Client 別忘了實作 Error View 錯誤畫面

在 Web 前端中，若 JS Runtime 發生錯誤（例如存取 undefined 的屬性），頁面往往會直接變成一片空白，沒有任何提示，讓使用者以為網頁整個掛了。 雖然這對效能沒有幫助，但對使用者體驗來說卻非常關鍵。很多 Web 網站並未針對錯誤做處理。 常見情境 當 Web JS 拋出錯誤或後端 API 欄位漏給資訊，JavaScript 取用 response 不存在的物件 null 、undefined下另個不存在的值，就會拋出錯誤，若是沒實作 try-catch 或拋出的錯誤在元件樹層層傳遞都沒被接住，瀏覽器就會一片空白。 這在產品開發上是不太能接受的，通常會有個「something went wrong」的錯誤畫面，提醒使用者網頁壞囉。 例如 2020年 youtube 有爆掉過一次，大家就看猴子一個下午。 面對預料外的錯誤，Client
SimonAllen

一起來協作 MDN 翻譯吧！

前言 這陣子還在佛系找新工作中，聽不少朋友分享與查看網路上求職心得：有不少公司喜歡對 mid-senior level 求職者穿插一些基本題目例如： 「什麼是 eventloop ?」 有鑑於前端技能樹實在太廣，(Senior 需要準備的)問題很多，可能面試期待公司問這幾年做了什麼或框架特色，結果對方還在考 JS 語言特性，然後再回馬槍考核心基本題，mid-senior level 若沒準備，回答卡還算是好的，有時怕的是沒準備到，接著等著被公司電到像寶可夢臭泥一樣癱軟掉。 強者我朋友真的不是我，聽了別人誠心(血淚)建議，趕緊查看以前鐵人賽文章複習一下，期間也上 MDN 看看怎麼解釋的，結果： 恩？「視覺化呈現」下方的圖片是掛掉了嗎？ MDN 作為一個前端工程師常查閱的網站，JavaScript 核心中的 eventloop 圖片是掛掉多久了？ 想到了前陣子 FB 社群上討論，有人想合併 MDN 簡體中文與正體中文議題 Github issues
SimonAllen