Sign in Subscribe
SimonAllen

SimonAllen

自 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
SimonAllen
Git Commit 請加上任務單號

Git Commit 請加上任務單號

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

一起來協作 MDN 翻譯吧！

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

TypeScript 筆記：never 簡介

上一篇 TypeScript 筆記簡單介紹了 unknown，而此篇改來介紹另一個特殊型別—— never： never never 型別是所有型別的子集，TypeScript 「所有」型別(甚至包括 any、null 與 undefined)都有包含 never 例外處理的狀態，其在 TypeScript 2.0 版提出，表示不存在值的型別，那怎樣會出現不存在值的型別呢？ 最常見的情形有兩種： * 無法結束的函式方法 * throw error 錯誤處理 無法結束的函式方法 無法結束函式方法情境，最常見就是函式內發生了無限迴圈的情況: function infiniteLoop(){ while(true){ } } 不過，上述程式碼在型別推論因為函式沒有回傳值，會被自動推論成 void。 可以這麼理解，當一個函式沒有返回值時，它的 return 值為 void 型別，