[譯] useEffect 有時候會在瀏覽器繪製(Paint)之前觸發

useEffect 應該在瀏覽器渲染( paint() )之後執行,以防止阻塞更新。但您知道它並沒有保證一定在渲染之後觸發?在 useLayoutEffect 中更新狀態(state)會導致同一次渲染中的 useEffect 在渲染之前執行,這是為了有效率的處理佈局的效果。感到困惑嗎?

繼續閱讀

[譯] 概覽 React 18 新功能

React 18 alpha 已經釋出,穩定版可能幾個月後就會跟進。是時候聊聊加入的新功能了。如果您本來就不知道 React 那您可以略過這篇文章。

介紹新功能之前,我們先來看一些您有可能不熟的概念,例如 SSR,Suspense 還有 Hydration。如果您已經知道這些,您可以直接跳到 React 18 的變更一章。

深入新功能之前需要了解的概念

Server Side Rendering

伺服器端渲染 SSR 主要和改善使用者體驗和 SEO 有關,並不是針對改善應用程式的效能。當客戶端對一般 React 應用程式請求頁面時,伺服器會回應一些檔案。這種情境下有兩個很重要的檔案:第一個是一個幾乎為空的 HTML,第二個就是 bundle.js。應用程式依據路由在這個空的 HTML 中利用 JS 動態產生內容。這種模式叫做客戶端渲染,因為主要是由客戶端動態渲染。使用者最一開始會看到空白的頁面,接著當 bundle.js 下載完畢會動態渲染。

繼續閱讀

使用 Zoom API (1)

Zoom API 允許開發者從 Zoom 請求平台的資訊,包含但不限於使用者詳細資料,會議報告,儀表板資料,以及執行平台的一些功能。例如建立新的使用者或刪除會議紀錄。

繼續閱讀

您可能不知道關於 useState 的 7 件事

在為我們的專案(React)進行程式碼審查的時候,我常發現開發成員沒有意識到關於 useState 提供的一些好用功能或討厭的陷阱。雖然這些觀念不是什麼重大的啟發,但每一個使用 Hook 的人都應該要了解。

繼續閱讀

[譯] CSS 容器查詢單位

幾天前(2021-09-18)我看到 Miriam Suzanne 的一則關於 CSS Query 單位支援的 Tweet 。這個功能最一開始是由 Una Kravets 建議提案。我忍不住試試看它們,看看我們可以從這個功能中得到什麼好處。

本文會嘗試解釋每個單位的運作和我們該如何使用它們,尤其是元件該如何因應父元素的寬。如果您還不知道什麼是 CSS 容器查詢。這裡有一些範例介紹關於容器查詢如何影響我們的實作,如果您還沒有任何概念強烈建議您先閱讀該文章。

繼續閱讀

[譯] CSS 容器查詢 (CSS Container Query)

作為前端開發人員,在過去六年中,我沒有像現在這樣對 CSS 的新功能感到興奮。容器查詢(Container Query)現在已經可以通過在 Chrome 設定參數啟動支援。感謝那些像是 Miriam Suzanne 的人的努力。

我記得看過很多關於支援 CSS 容器查詢的笑話,但最終它成為現實。這篇文章試著了解為什麼我們會需要容器查詢,以及我們如何使用它們簡化開發,更重要的是您可以實現更強大的元件和佈局。

CSS Media Query 的問題

一個網頁通常由不同的區塊和元件組成,然後我們利用 CSS Media Query 讓它們支援 RWD。這機制沒有什麼問題,但有一些限制。例如我們可以使用 Media Query 在行動裝置呈現元件最小化的版本。

很多時候,RWD 並不是由 Viewport 或螢幕大小來決定的,而應該是由容器的大小來決定。試想下面的範例:

繼續閱讀

您必須了解關於 AWS 的 IOPS

假如您持續深入了解 AWS ,您肯定會發現系統層面比您想像的還要複雜。EBS 儲存空間也不例外!

掛載儲存體到一個伺服器或主機看似相對簡單,然後您發現您的應用程式有點慢。不知道到底是什麼原因直到您看到 Stack Overflow 的討論關於 IOPS 和吞吐量(Throughput)的問題。在面對這個問題幾次之後,我決定要研究一下這個問題。

下面是我嘗試理解為什麼 EBS 變成效能瓶頸的原因。

AWS 有 SSD 和傳統的磁盤硬碟,這裡我們說的是 SSD 的部分,如果您不是很確定您使用的,大概多數都是 SSD。

繼續閱讀

Laravel 8 自動產生 Sitemap

Sitemap 是否真的必須?

理論上 Sitemap 協助搜尋引擎的網頁爬蟲發現您網站所有的頁面。Google 文件有詳細說明

如果您網站的頁面都有正確的連結,爬蟲通常可以發現全部的頁面。即便如此,Sitemap 也可以改善網頁抓取尤其是您的網站滿足下拉條件之一時:

  • 您的網站非常大。因此 Google 爬蟲有可能會忽略抓取一些最近更新的頁面
  • 您的網站有大量內容頁面存檔。這些頁面屬於獨立頁面或沒有被妥善連結。如果您的網站本身每個頁面沒有做好參考關聯,您可以將他們列在 Sitemap 上來確保 Google 不會忽略它們。
  • 您的網站是新網站,當下幾乎沒有外部連結。Google Bot 和其他爬蟲是根據某個頁面的連結來找到另一個頁面的。如果外部沒有任何連結,結果就是 Google 可能根本沒有發現您的頁面。
  • 您的網站使用大量媒體內容,顯示在 Google News 或其他網站相容的 Sitemap 註記
繼續閱讀