作為前端開發人員，在過去六年中，我沒有像現在這樣對 CSS 的新功能感到興奮。容器查詢（Container Query）現在已經可以通過在 Chrome 設定參數啟動支援。感謝那些像是 Miriam Suzanne 的人的努力。
我記得看過很多關於支援 CSS 容器查詢的笑話，但最終它成為現實。這篇文章試著了解為什麼我們會需要容器查詢，以及我們如何使用它們簡化開發，更重要的是您可以實現更強大的元件和佈局。
一個網頁通常由不同的區塊和元件組成，然後我們利用 CSS Media Query 讓它們支援 RWD。這機制沒有什麼問題，但有一些限制。例如我們可以使用 Media Query 在行動裝置呈現元件最小化的版本。
很多時候，RWD 並不是由 Viewport 或螢幕大小來決定的，而應該是由容器的大小來決定。試想下面的範例：
假如您持續深入了解 AWS ，您肯定會發現系統層面比您想像的還要複雜。EBS 儲存空間也不例外！
掛載儲存體到一個伺服器或主機看似相對簡單，然後您發現您的應用程式有點慢。不知道到底是什麼原因直到您看到 Stack Overflow 的討論關於 IOPS 和吞吐量（Throughput）的問題。在面對這個問題幾次之後，我決定要研究一下這個問題。
下面是我嘗試理解為什麼 EBS 變成效能瓶頸的原因。
AWS 有 SSD 和傳統的磁盤硬碟，這裡我們說的是 SSD 的部分，如果您不是很確定您使用的，大概多數都是 SSD。
理論上 Sitemap 協助搜尋引擎的網頁爬蟲發現您網站所有的頁面。Google 文件有詳細說明
如果您網站的頁面都有正確的連結，爬蟲通常可以發現全部的頁面。即便如此，Sitemap 也可以改善網頁抓取尤其是您的網站滿足下拉條件之一時：
- 您的網站非常大。因此 Google 爬蟲有可能會忽略抓取一些最近更新的頁面
- 您的網站有大量內容頁面存檔。這些頁面屬於獨立頁面或沒有被妥善連結。如果您的網站本身每個頁面沒有做好參考關聯，您可以將他們列在 Sitemap 上來確保 Google 不會忽略它們。
- 您的網站是新網站，當下幾乎沒有外部連結。Google Bot 和其他爬蟲是根據某個頁面的連結來找到另一個頁面的。如果外部沒有任何連結，結果就是 Google 可能根本沒有發現您的頁面。
- 您的網站使用大量媒體內容，顯示在 Google News 或其他網站相容的 Sitemap 註記
本文為翻譯自 Comparing the New Generation of Build Tools 一文加上更新補充。因建置工具更新速度關係，如遇部分內容無法實作或不一致請參考各官方文件。
過去的一年出現了一堆新的開發工具，它們緊跟著那些目前佔據前端世界的建置工具例如：webpack，Babel，Rollup，Parcel，create-react-app。
這些新工具的目的並不是實現一模一樣功能，它們各自有不同想嘗試解決的問題或新增的功能。儘管有所不同，但這些工具都有著共同的目標：改善開發者體驗。
具體來說，本文希望試著分析每個新工具，概述它們的功能，以及為什麼我們需要它們和適用的情境。我知道項目之間的比較很難非常公平，再一次強調這裡比較的項目，它們的關係並非直接的競品。實際上例如 Snowpack 底層就有使用 esbuild 來處理某些事情。
本文的目的是更進一步了解這些工具的前景和它們提供什麼功能可以讓我們簡化開發流程。如此一來我們就知道能有什麼選擇，以及它們是如何組成的，然後在需要的時候我們可以做出比較好的決定。
當然這些論述有受到我使用 React 和 Preact 經驗的影響。個人比較熟悉這些函式庫，但我們也會探討對其他前端函式庫的支援和使用。
關於這些新工具網路上有許多不錯的文章，影片，廣播等。推薦 ShopTalk Show Episode 454 探討關於 Vite 以及 Episode 448 Snowpack 和 wmr 作者的介紹。從這些影片介紹我們知道這些工具如何加速優化了我們的開發工作。
[toc]
React DnD 是 React 一系列的單元功能，用來協助您建置介面上複雜的拖拉功能同時維持元件解耦。特別適合像是 Trello 類型的應用程式利用拖拉來轉移資料，並依據拖拉事件變更的狀態改變元件的外觀。
1 | $ npm i react-dnd react-dnd-html5-backend |
本文為 Laravel 7 — Socialite in Action ( Social Media Login Integration with Facebook, Twitter, LinkedIn, Google) 之更新簡化版本。省略大部分說明只提供步驟紀錄。詳細說明請參考原文。
自 Laravel 5.3 之後，看到過許多專案的 Eloquent 關聯與查詢都不是使用相對有效率的用法。這些情況之所以存在是因為有不同的方法可以取得同一個資料集，而且多數看起來非常像。除非您非常了解底層做了什麼，不然判斷哪個方法比較好也不是那麼容易。
Sanctum 是一套輕量化的 API 認證機制套件。本文會介紹如何使用 Sanctum 支援 React 單頁應用程式認證（會員登入）。我們假設應用程式的前端和後端使用相同 TLD 頂級網域下的子網域，如此才可以使用 Sanctum 基於 Cookie 的驗證流程。利用這種作法可以省去處理 API Token 。為此我們使用 Homestead 設定兩個網域 api.sanctum.test 指向 Laravel 專案的 public 目錄用於提供後端，sanctum.test 指向另一個目錄提供前端的部分。
本文主旨於介紹 React 渲染的行為，包含使用 Context 和 React-Redux 之後的渲染行為。
我已經見了太多關於渲染的問題並且這些問題仍然持續出現 - 什麼時候，為什麼 React 會重新渲染元件，如果使用了 Context 或 React-Redux 會如何影響重新渲染的範圍和觸發的時機。經歷了多次的解釋，似乎有這個必要將這些回答彙整成一個較完整的介紹。
注意：這些資訊網路上都已經有了，而且很多人都解釋過了，但人們似乎還是蠻困擾因為資訊散落而不容易有個比較完整的了解，所以這篇文章試著將這些問題整理說明清楚，希望能對您有些幫助。