ExplainThis 全端開發雙週報 #22
50 題常見的前端程式題大補帖
嗨～ 歡迎閱讀 ExplainThis 全端雙週報第 22 期。
在這期最開始，要先分享一個雙週報的改版。由於 E+ 成長計畫 (連結) 訂閱讀者持續增加，目前已經突破 300 人，ExplainThis 團隊討論後，在未來會花更多時間確保 E+ 的品質能維持住。
未來我們仍會持續寫免費的全端雙週報，但會由本來每週前端、後端、職涯，加上 7 個推薦連結。轉為前端、後端、職涯每期輪流有一篇主題文，然後搭配 10 個推薦連結。而在這期，我們會先從前端主題開始～
[前端] 50 題常見的前端程式題大補帖
在過完年後，可能有些讀者會開始準備年後換工作。對於前端或者全端的面試中，除了常見的資料結構與演算法白板題外，也有所謂的前端手寫題。所謂的前端手寫題，也是要實際寫程式碼，但相對來說不會用到太多資料結構與演算法概念，而是會要用到前端或 JavaScript 概念的題目。
事實上，雖然這些題目是前端主要會考，但假如是用 Node.js 或者 Deno 寫後端的團隊，也很常會考這類型的題目。
ExplainThis 團隊先前整理了包含 LeetCode 的 30 Days of JavaScript 等 50 題面試中很常出現的前端手寫題，每題都有中文的題目描述，以及附上解答。有興趣的讀者，可以在這邊看到 (連結)。
而除了解答，我們同時有在 E+ 新增每一題的詳細思路解說，E+ 的讀者，可以在《前端手寫題》專區，看到每題除了解答以外的思路分析與解說。
具體來說，這類的考題可能會有常見的效用函式，就是平常大家會直接用 Lodash 的那些函式，在面試中面試官會想看你有沒有能力自己實作出來。另一個常見的，是手寫出 JavaScript 原生支持的東西。舉例來說，JavaScript 原生的 Promise，就有好幾個常見的手寫題，包含
Promise.all
Promise.race
Promise.any
或者是，要利用上 JavaScript 概念，進一步實作的東西。以 Promise 來說，可能會要用 Promise 概念來完成這個手寫題：「給定兩個 Promise (如下)，然後要寫一個 addPromise 函式，回傳把該兩個 Promise 相加而得的結果」
promise1 = new Promise(resolve => setTimeout(() => resolve(2), 20)), promise2 = new Promise(resolve => setTimeout(() => resolve(5), 60))
準備這類手寫題的方法，其實跟準備一般的白板題差不多，一開始先試著做，除非卡太久 (例如半小時)，不然不要直接看解答，要練習面對應對「卡住」時的狀況。卡住時可以試著從同角度切入討論，這樣真實面試時，也可以比較有效面對卡住的狀況。
就算看了解答，也不要看全部，可以先看一半，然後試著完成全部。在真實面試中，如果你卡住後，可以向面試官要提示，面試官給的提示只會有部分，所以要練習先只獲得部分的提示，然後試著自己去完整寫出來。
相信這些題目都練習完，之後遇到前端手寫題，應該都不用太擔心。未來我們會再陸續新增題目到 ExplainThis 網站，如果想多練習，可以時不時逛逛 ExplainThis 的網站 :)
[本期推薦]
這週的職涯主題文談到遠端工作，想到先前有位 Amazon 工程師寫《Amazon's Silent Sacking》一文 (連結)，來談論 Amazon 透過 RTO 讓許多人選擇離開，導致很多事故沒辦法被馬上解決
這篇前 Meta 的 VP 寫的關於升遷的文章，非常有洞見，推薦一讀 (連結)
Animation Code 是一個免費的可以把程式碼動畫化的工具，最近我們用它來做一些程式碼教學短片 (見此連結)，覺得滿不錯用的，推薦給大家 (連結)
Next.js App Router 優化 SEO 的實際案例分享，寫得很有洞見 (連結)
AWS 開源了給 Serverless 的 JavaScript 執行環境 LLRT，這是一個輕量的執行環境，比起 Node.js 少支援很多東西，但同時在啟動時間上快 10 倍、在 AWS Lamda 中使用的成本比其他執行環境降低 2 倍 (連結)
由微軟的工程師 Étienne BAUDOUX 開發的 DevToys 開源工具，支援了超過 28 個開發者常會用到的工具，例如把 JWT 解密工具、JSON 變美的工具、Base64 編碼與解碼的工具、測試正則表達式的工具，以及 Lorem Ipsum 產生器等工具，全都免費使用 (連結)
Planet Scale 最近推出了一個 MySQL 的 schema 優化功能，很多人以為也是串上 AI，但實際上沒有，這篇談到它們如何實作，值得一讀 (連結)
最近社群有一些討論度的 Vinxi，是一個讓你可以輕鬆打造 JavaScript SDK、JavaScript Framework 的工具 連結。這篇《Bullding a React Metaframework with Vinxi》教了如何用 Vinxi 打造 React 的框架，有興趣的人可以一讀 (連結)
你對於使用環境變數 (Environment Variables) 熟悉嗎? 如果不太熟的話，推薦一讀這篇《What every dev should know about using Environment Variables》(連結)