Live Activity

簡單的說 iOS Live Activity 讓我們可以顯示一些當前的即時資料而不用開啟應用程式，顯著的提升用戶體驗。首次支援是在 iOS 16.1 和 iPadOS 17 ，重點是可以在鎖定螢幕、待機畫面、以及動態島即使更新顯示資訊，減少反覆開啟應用程式的次數。

• Lock Screen 鎖定螢幕 - 喚醒 iPhone 時看到的畫面，這裡可以顯示通知 Push Notification 和 Live Activity。
• Stand By 是 iOS 17 的時候加入的，在充電時可以顯示的區塊。
• Dynamic Island 動態島則是 iPhone 14 Pro 開始新增的功能。

進一步我們釐清在 iOS 14 加入的 Widget 和 Live Activity 的差別。Live Activity 以提供即時資訊為核心例如追蹤某個事件的狀態，比賽分數、Uber 司機是否抵達等資訊。Widget 比較合適的情境是提供跟短時間即時性比較沒有那麼強烈關係的資料例如天氣等。

首先，介面（Interface）是物件導向的基礎，在 Laravel 中，介面被用來定義規範 Contracts ，即規定類別 class 必須實作的方法。讓我們可以建立彈性且模組化的程式碼且容易維護和測試。

本文我們將探索如何在 Laravel 中使用介面實作，如何為 Service 定義介面，使用相依注入 DI（Dependency Injection） ，繫結 Service 到應用程式 Container。

另外補充；``Factory` 工廠模式是一種建立物件的設計模式，主要用途除了生成測試資料還可以協助「相依注入」建立需要的物件。上面幾個概念將有助於我們實現更具可維護性，可讀性的程式碼。

Laravel Passport 提供了 Laravel 應用程式完整的 OAuth2 伺服器實作整合。Passport 是基於 League OAuth2 Server 套件建置。

如果您還不知道何謂 OAuth2，在繼續之前，請先熟悉 OAuth2 的一般術語和功能。

參考資源

加速 40% 冷啟動和 28% 建置速度

在 Next.js 最新版本，官方優化了套件匯入，改善了本地開發的效能和正式環境冷啟動的速度。特別適用於使用大型的 Icon ，元件庫，或其他重複 Export 大量模組的相依套件。

原文連結
備註：本文有略微簡化原文內容並提供一些補充，目標提供一個較簡化流暢容易理解的版本。另外本文改寫了 tsx 的範例希望能更容易了解觀念。

提到建置網頁應用程式，React 已經成為主流好一陣子了（目前 2023），並且採用率持續在上升。常見搭配 React 開發網站的方式中，Next.js 是比較主流的選項之一。

自從去年他們發佈了 App Router 等重大更新以來也一直備受關注。新的路由架構採用了嵌套佈局（Nested Layouts）並緊密整合了 React Server Component 和 Suspense 。

macOS 環境安裝

使用 pyenv 目的是讓本地環境支援多種 Python 版本。大多的程式語言都有對應的工具如 Nodejs 的 nvm，Ruby 的 rvm，rbenv 等。

首先，參考以下的實務範例：

1
2
3
4
5
6
7
8
9
10
11

async function main() {
  const stream = await opeanai.chat.completions.create({
    model: 'gpt-4',
    messages: [
      { role: 'user', content: '測試回答' },
    ],
  });
  for await(const part of stream) {
    process.stdout.write(part.choices[0]?.delta?.content || '');
  }
}

這是一段 OpenAI Node SDK 的範例，使用 GPT-4 搭配串流的方式。

如過您希望製作像 Airbnb 那樣自訂標記的樣式，動態顯示一些資訊並且當用戶和其互動時可以渲染自訂的 React 元件，那麼您來對地方了。

本範例嘗試使用 Google 官方的 React Wrapper 函式庫實作 Google Map 功能，目標為自訂 MapOverView 達成在 Map 上加入複雜的 Marker。 例如像 Airbnb 點擊房源時可以展開。這個範例我們會支援 Marker Clustering。

完整教學與範例請參考 Github

使用者介面（UI）是由許多不同“部分”組成，而每個部分會以不同的頻率回應使用者的操作。有些例如表單的輸入欄位（<input>），需要即時回應使用者的操作，而其他像是內容很長的“篩選列表”或切換頁面則稍微慢一些。

在同步渲染的情況下，也就是沒有併發功能的 React 或者大部分的 JavaScript UI 框架/函式庫。一些回應比較慢的介面操作就會阻塞執行而拖累較快回應的部分。

React 併發功能就是為了解耦/分離回應快和慢的介面，使渲染慢的部分在背景繼續執行而不阻塞較快的部分，達到每個部分可以各自回應使用者的操作。

併發渲染並不會讓應用程式提升效率變快，只是利用上敘分離的方式讓使用起來感覺體驗變快了。

本文將探討 React 併發功能（React Concurrent），了解其解決的問題以及如何利用。

雖然 ref 是一個可變更 (mutable 物件在建立後可被修改) 的容器，我們理論上可以儲存任何資料。通常我們會拿來處理存取 DOM 節點:

1
2
3

const ref = React.useRef(null);

return <input ref={ref} defaultValue='Hello world' />;

ref 是一個內建的屬性，React 會在渲染後儲存 DOM 節點，當元件卸載後也會設為 null。