2023-第二十九週

該周報主要為各個地方內容的彙總整理

技術
工具
更新
- Storybook 7.1
其他
- How to Do Great Work
- 穿透 Web3

技術#

Software engineering: problem-solving and critical-thinking #

軟體工程經常被誤解為僅僅是編碼，但它涉及問題解決和批判性思維。工程師首先要理解問題，然後使用分解和模式識別等策略來提出解決方案。批判性思維應用於設計、實施和測試階段，考慮可擴展性和性能等因素。軟體工程是關於理解問題、構思解決方案並應用批判性思維以確保有效性。隨著軟體的重要性越來越高，工程師需要成為優秀的問題解決者和批判性思考者。

軟體工程不僅僅是編碼，還需要解決問題和批判性思維的技能。
工程師必須理解問題，構思解決方案，並應用問題解決策略來開發有效的軟體系統。
批判性思維在整個軟體開發過程中至關重要，從設計到實施和測試，以確保高效和高品質的程式碼。

Introducing Flame graphs: It’s getting hot in here #

火焰圖是一種用於識別程式碼瓶頸和理解程式碼執行模式的可視化工具。現在在 VS Code 和 JetBrains 編輯器的 AppMap 擴展中提供了火焰圖。火焰圖提供了函數執行的分層視圖，使開發人員能夠快速識別耗時的函數並優化程式碼效率。它們揭示了長時間運行的查詢、N+1 查詢以及函數對整體性能的影響等見解。AppMap 在火焰圖的基礎上進行了改進，通過突出顯示應用程式中的缺陷並展示它們的直接影響。該工具還提供了序列圖、傳統的依賴和跟蹤視圖。

火焰圖提供了程式碼執行模式的可視化表示，幫助開發人員識別瓶頸並優化性能。
火焰圖的顏色方案幫助開發人員理解不同類型的程式碼，如 SQL 查詢、函數調用和外部服務調用。
AppMap 通過突出顯示應用程式中的缺陷並展示這些缺陷的直接影響，使問題的識別和修復更加容易。

How React 18 Improves Application Performance - React 18 如何提升應用性能 #

React 18 引入了改進應用程式性能的並發特性。JavaScript 中的主線程逐個執行任務，長時間的任務可能會阻塞其他任務。使用 50ms 的基準來保持流暢的視覺體驗。總阻塞時間（TBT）和交互到下一次繪製（INP）是用於衡量長時間任務對性能影響的指標。傳統的 React 渲染是同步的，導致延遲和無響應的 UI。React 18 引入了並發渲染器，允許非緊急渲染讓出主線程，並優先處理更重要的任務。並發渲染器還可以根據用戶交互暫停和恢復渲染。

React 18 引入了並發渲染，它允許非阻塞渲染並優先處理更重要的任務，提高了應用程式的性能。
React 18 的並發渲染器可以根據用戶交互等外部事件暫停和恢復渲染，以優化用戶體驗。
通過使用 startTransition 函數，開發人員可以將更新標記為非緊急的，通過優先處理重要任務進一步增強性能。

How to Iterate Over Object Keys in TypeScript #

本文討論了在 TypeScript 中遍歷物件鍵的挑戰，並提出了幾種解決方案。作者解釋了使用 Object.keys 返回一個字串陣列而不是所有鍵的聯合可能會導致在嘗試訪問物件上的值時出現問題。他們提出了兩個主要的解決方案：將鍵轉換為 keyof typeof 以縮小類型範圍，並使用類型斷言在索引之前檢查鍵是否實際上在物件上。文章還提到了通用函數方法和將 Object.keys 包裝在自定義函數中。作者總結說，類型轉換是他們首選的解決方案，但承認在某些場景中其他方法可能更合適。

在 TypeScript 中遍歷物件鍵可能會有挑戰，因為 Object.keys 的限制，它返回一個字串陣列而不是所有鍵的聯合。
使用 keyof typeof 進行類型轉換或使用類型斷言可以幫助更安全、更具體地縮小類型範圍並訪問物件鍵的值。
雖然類型轉換是最簡單且通常足夠的解決方案，但 isKey 類型斷言和通用函數方法提供了在 TypeScript 中遍歷物件鍵的替代方法。

5 Common Pitfalls with Server Components in Next13 (with examples)#

本文討論了在使用 NextJS 13 中的 App Router 功能時常見的問題和解決方案。它強調了在伺服器組件中使用 React Hooks、在伺服器組件中使用事件處理程序以及直接將伺服器組件導入客戶端組件時可能出現的問題。文章針對每個問題提供了解決方案，包括添加 "use client" 以啟用熟悉的行為，根據需要將組件轉換為伺服器組件，並使用路由更改來觸發重新渲染。

NextJS 13 中的 App Router 取代了 Pages Router，並引入了默認的伺服器組件，但在使用 React Hooks 和事件處理程序方面存在一些限制。
直接將伺服器組件導入客戶端組件可能會導致 fetch 請求問題和組件行為低效，需要將其轉換為客戶端組件或仔細組合伺服器和客戶端組件。
伺服器組件在狀態或數據更改時不會自動重新渲染，因此需要依賴路由更改來觸發重新渲染。

Writing CSS In 2023: Is It Any Different Than A Few Years Ago?#

本文討論了 CSS 的演變如何影響我們今天編寫 CSS 的方式。作者強調了幾個具有重大影響的特性，如容器查詢、級聯層、() 和() 偽選擇器、新的顏色函數語法和用戶偏好查詢。作者還提到，儘管這些特性改變了 CSS 的方法，但它們在生產環境或日常使用中尚未得到廣泛採用。總體而言，文章強調了在這些新特性的推動下編寫 CSS 的興奮和樂趣。

CSS 的特性，如容器查詢和級聯層，改變了 CSS 的編寫方式，使得創建響應式佈局和管理級聯變得更加容易。
類似() 和() 的關係偽選擇器在管理特異性和簡化命名約定方面非常有用。
CSS 中顏色函數的更新語法，如 rgb () 和 hsl ()，使得定義顏色值更加方便，不再需要在不同函數版本之間做出選擇。

Write Clean Server-Side React Code with Higher-Order Server Components #

React 18 引入了伺服器組件，但它們有一些限制，可能會導致耦合和重複的程式碼。一種方法是在頁面級別獲取數據並將其傳遞給使用者組件，但這會導致耦合。另一種方法是為每個使用者組件獲取數據，但這會導致重複。一個清晰的方法是使用高階伺服器組件，它可以獲取數據並將其作為 props 傳遞給包裝組件。這樣可以實現可重用和解耦的程式碼。提供了示例和程式碼片段供參考。

React 18 中的伺服器組件可能導致耦合和重複的程式碼，使數據獲取和傳播變得困難。
在最近的伺服器組件中獲取數據可以幫助解決耦合問題，但可能會導致多個獲取請求，並違反單一責任原則。
使用高階伺服器組件可以提供一種清晰的解決方案，通過獲取數據並將其作為 props 傳遞給包裝組件，無論它們是伺服器還是客戶端組件。

Everything You Want To Know About Media Queries and Responsive Design #

本文討論了媒體查詢和響應式設計在 Web 應用中的應用。它解釋了媒體查詢如何根據設備特性（如視口寬度）應用 CSS 規則。響應式設計旨在為不同螢幕尺寸優化的定制化視覺呈現。文章介紹了移動優先設計的概念，強調在設計和開發過程中優先考慮移動體驗的重要性。文章還解釋了 CSS 像素和設備像素的區別，以及如何使網站具有響應式佈局和處理非矩形顯示。還討論了媒體查詢中的斷點及其使用方法。

媒體查詢允許根據設備特性有條件地應用 CSS 規則，實現響應式設計和定制的視覺呈現。
移動優先設計將首先針對移動設備進行設計和開發，以便更容易適應較大的螢幕尺寸。
媒體查詢中的斷點定義了基於視口大小開始或停止應用條件樣式的點，有助於創建響應式佈局。

JWTs vs. sessions: which authentication approach is right for you?#

本文討論了基於會話的身份驗證和 JWT 身份驗證在 API 調用之間維護身份驗證狀態的區別。它解釋了基於會話的身份驗證涉及在伺服器上創建和存儲會話記錄，而 JWT 身份驗證涉及向客戶端發送一個自包含的令牌。基於會話的身份驗證的好處是簡單和可靠，但可能引入延遲和性能問題。JWT 身份驗證可以實現更快的授權和與外部應用的互操作性，但它缺乏使令牌無效或更新其中信息的能力。文章建議使用會話 cookie 和 JWT 的組合來實現平衡。文章還提到了 Stytch 的會話管理產品作為提供自定義選項的解決方案。總體而言，文章強調了在選擇適當的身份驗證方法時評估安全性和延遲之間的權衡的重要性。

基於會話的身份驗證依賴於存儲在資料庫中的伺服器端會話記錄，提供可靠性，但在規模上可能引入延遲。
JWT 身份驗證可以實現更快的授權和與外部應用的互操作性，但缺乏使令牌無效或實時更新授權權限的能力。
使用會話 cookie 和 JWT 的組合可以在性能和安全性之間取得平衡，允許自定義會話持續時間，並減少對非敏感路由的 API 調用。

工具#

jscodeshift #

jscodeshift 是一個用於在多個 JavaScript 或 TypeScript 檔案上運行 codemods 的工具包。它提供了一個運行器，可以對每個傳遞給它的檔案執行提供的轉換，並輸出轉換了多少個檔案的摘要。它還提供了對 recast 的封裝，提供了不同的 API，recast 是一個 AST 到 AST 的轉換工具，盡可能地保留了原始程式碼的風格。

driver.js #

Driver.js 是一個輕量級、無依賴的原生 JavaScript 引擎，可以引導用戶在頁面上集中注意力。它沒有外部依賴，支持所有主流瀏覽器，並且非常可定制。它可以突出顯示頁面上的任何元素，創建強大的功能介紹，為用戶添加焦點轉移器，並且一切都可以通過鍵盤控制。

virtua #

一個零配置、快速且小巧（約 3kB）的 React 虛擬列表和網格組件。

react-content-font #

使用 React 組件，僅為頁面上使用的字符創建字體。

更新#

Storybook 7.1 #

引入了一個應用內引導流程，使新用戶更容易學習和導航組件工作坊。
為 Tailwind、Material UI、Emotion 和 styled-components 等流行庫添加了零配置的樣式支持。
包括 API 參考文檔、Vue 3 源代碼片段和響應性改進、UI 文檔的目錄以及對 Figma 設計插件的官方支持。

其他#

How to Do Great Work #

本文探討了發現和追求優秀工作的過程。文章建議要做出優秀的工作，一個人必須選擇自己天生擅長、深感興趣並具有偉大潛力的事物。文章強調了進行個人項目和培養好奇心和探索習慣的重要性。它建議個體要學習足夠的關於自己選擇的領域的知識，達到知識的前沿，並積極尋找空白和未解答的問題。文章承認找到要做的事情的挑戰，特別是對於年輕和雄心勃勃的人來說，但鼓勵他們採取行動，保持好奇心，並優化有趣性。它還強調了堅持自己的興趣並不被外部力量左右的重要性。總的來說，文章認為做出優秀工作的關鍵在於找到自己深感興趣的事物，並以激情和好奇心去追求。

要做出優秀的工作，選擇自己天生擅長、深感興趣並具有偉大潛力的事物是很重要的。
要學習足夠的關於你選擇的領域的知識，達到知識的前沿，並注意到其他人忽視的空白。
跟隨你的好奇心、喜悅和渴望去做一些令人印象深刻的事情，並願意冒險並擁抱工作中的奇異之處。

穿透 Web3 #

本文介紹了 Web3 的核心概念，包括智能合約、DeFi、DAO 和錢包等。Web3 的核心理念是用戶擁有自己的數據和資產，而不是被互聯網公司所控制。然而，這也意味著用戶需要自己負責管理自己的錢包和資產。Web3 的出現是為了解決信任問題，但也存在著決策效率低下的問題。Web3 可能會成為人類社會的增益，但不可能完全主導這個世界。