其實我一直都有點不太想碰這個話題，因為這個問題太基礎又有點太廣了，我一直沒有自信能講好這個話題，不過因為一些眾所週知的事情，我覺得還是至少分享下我的一些觀點，以及跟朋友們討論之後的一些心得。

無論前後端，環境變數(環境變量，Environment Variable)都是一個非常重要的概念，他可以用來給你的程式提供一些 context，比如說你正在開發的環境還是生產環境，或者說你正在開發的環境是本地還是遠端，或者說你正在部署的後端 URL，一些 SaaS 的 key，這些都是環境變數可以幫助你解決的問題。然後這個問題之所以難講，是因為不同的專案可能有不同的最佳做法，甚至根本不存在所謂的 the best practice。我親眼見過兩個 Senior Frontend Developer 因為這個問題吵起來。而且還有一點，你必須要深刻理解這個 project ，才能夠知道什麼是合適的 practice。

如果你有看我的 Twitter，可能會知道，我最近因為各種因素精神狀態特別糟糕，其中之一就是因為 Flutter Web。這可能會讓一些朋友感到驚訝，Suica 不是著名的 Flutter 狂粉嗎？

老實說，我仍然是 Flutter 移動開發能力的傳教鵝。然而，我無法以任何方式認可 Flutter Web，我將在本文中解釋我的理由。

響應式設計對許多前端開發者來說總是一場噩夢，特別是在開發應用程序時沒有仔細規劃和設計考慮的情況下。糟糕的響應式設計選擇會使調試和測試過程的複雜性呈指數級增長。

Flutter 從第一天起就是為了解決跨平台問題而開發的。它有效地解決了為多個平台構建應用程序同時維護單一代碼庫的挑戰。如果你在初創公司開發移動應用，或者正在實現一些性能敏感的需求，Flutter 可以提供比 React Native 更好的體驗。它用自己的方式渲染 UI 來解決 Android 設備碎片化問題是一個非常好的主意。我可以一直吹噓 Flutter 在開發中拯救了我的生活，直到我被要求開發一個 Flutter Web 應用程序。

在本文中，我將描述我對 Flutter 中使用 MediaQuery 進行響應式設計的一些理解，重點關注實用方法和需要避免的常見陷阱。

年輕時，我發現可以使用 cancelToken 取消 HTTP 請求，這讓我非常興奮。然而，一個月後我才意識到這實際上並不能幫助減少服務器負載。如今，開發者們對 AbortController 和 AbortSignal 非常熱衷。一些有影響力的開發者發現 AbortController 不僅可以用於取消 fetch 請求，還可以用於幾乎任何事件。不久之後，社交媒體上充斥著關於 AbortController 的文章 - 以至於不寫關於它的文章似乎就表明你不是一個合格的前端開發者。

我同意這些功能很棒且有趣，但作為開發者，我們不僅應該知道它是什麼，還應該知道它是如何工作的。

讓我們從基本用例開始：取消 fetch 請求。

幾週前，一篇關於行內樣式比導入樣式表更快的文章被發布。許多前端開發者對此感到驚訝，並建議也許我們可以像 Tailwind CSS 一樣將樣式方法編譯成行內樣式。我也很驚訝，框架如此流行以至於人們忘記了網站樣式的歷史以及瀏覽器如何渲染網站。

最近，我接到一個任務，要使用 Flutter 的 Snack Bar 實現一個固定在屏幕頂部的新 toast。最初，我以為這會是一個簡單的過程 —— 只需調用 showSnackBar 並將 behavior 配置為 floating，調整 margin 以確保它在屏幕頂部浮動。

眾所周知，JavaScript 是一個非常優美、優雅且設計精良的語言。Brendan Eich 花費了大量時間來設計它。多虧於此，我們有了如此直觀的語言：

NaN !== NaN // true
0.1 + 0.2 // 0.30000000000000004
1 < 2 < 3 // true
3 > 2 > 1 // false
[] + [] // ""
{} + {} // "[object Object][object Object]"
[] + {} // "[object Object]"
{} + [] // 0

今天我們有一個知識分享摸魚會議，有人分享了一個關於語言語法之美的問題。這讓我想起了之前在中國的工作經歷。幾乎所有中國公司都喜歡使用這些優雅的語法和原則作為面試題。當我回想我準備過的最令人難忘的問題時，一定是這個：

Math.max() < Math.min() 的結果是什麼？為什麼？

嗯，自從我開始使用 Flutter 開發商業應用程式已經有一段時間了。有一些最佳實踐幫助我交付高質量代碼，減少因性能問題而重構的次數，並防止加班。

當我第一次接觸 Flutter 時，它還是一個在 2018 年初的嬰兒專案。如今，它變得比 React Native 更受歡迎 —— 這是我過去開源領域的舊愛。我目前所在的公司決定使用 Flutter 開發一個應用程式，作為公司裡最弱的企鵝，我被迫加入了這個專案。

Flutter 變得更加穩定和功能豐富，但它仍然存在一些從未修復的錯誤，以及一些多年前就應該處理的問題。其中一個問題是，他們應該在構建過程中清理未使用的圖片。這是一個大問題，因為沒有簡單的方法來刪除它們以減少構建包的大小。很難找到一個庫/腳本來刪除它們，所以為什麼不自己寫一個呢？

簡而言之：https://pub.dev/packages/delete_unused_image

隨著專案規模的增長，日誌記錄的數量也在增加。在數百個不相關的日誌中找到有用的細節變得困難。雖然 JavaScript 在許多地方都很笨拙，但當它在瀏覽器中運行時，它有非常強大的工具和生態系統來進行調試。

由於我的朋友們發送大量 Wordle 垃圾訊息，我需要一些工具來降低他們玩 Wordle 的興趣。在這幾個月裡，我開發了一個網站來提供可能的單字提示，並持續優化算法。然後，發現了網站的限制，所以我轉向開發瀏覽器擴充功能。

在之前的一次面試中，一個 Debug 問題讓我深入思考。當我們使用 setTimeout 和 setInterval 時，JavaScript 的 GC 策略是什麼？如果我們在釋放 setTimeout 的計時器之前沒有清除它，會發生什麼？

延遲載入（Lazy loading）是一種實用的技術，可以延遲載入非必要的內容，直到需要時才載入。這種技術可以減少打包大小並提高載入效能。然而，在歷史上，這種技術有許多不同的實現方式和解決方案。

當我們在 LeetCode 上完成題目，或是開發一個複雜的專案時，迭代是一種非常有用的語法，可以用來遍歷複雜的資料結構。

陣列是一種在電腦科學中非常常見的資料結構，大多數程式語言都提供 while 或 for 迴圈來遍歷陣列。此外，高階程式語言通常也會提供一些操作陣列的 API。

JavaScript 提供了大量的方法來控制陣列，但在 ES5 之前並沒有內建的查詢方法。ES5 引入的 API 大幅減少了程式碼量，也顯著提升了程式的可讀性。