筆者在GitHub開了個 discussion ? 技術&開源&文章推薦，歡迎讀者推薦貢獻內容或者知識渠道
歡迎來到第 61 期的【視野修煉 - 技術週刊】，下面是本期的精選內容簡介
?強烈推薦
- 2023年??工程師的 Mac 工具箱
?開源工具&技術資訊
- react-exercise-playground - React playground 元件
- Caravaggio - 一個快速的圖片處理服務
- eslint-stylistic
- 新版 React 文件中的九項最佳建議
?AI工具&資訊
- AIGC相關教程資源收集
也推薦大家關注一下最後的推薦內容（週刊的主要內容來源渠道）
下面開始本期內容的介紹，預計閱讀時間 6 分鐘。
?強烈推薦
1. 2023年??工程師的 Mac 工具箱
Arc - 瀏覽器， Warp - 終端， Raycast - 啟動器，Orbstack - 容器，Setapp - 軟體訂閱，CleanShotX - 截圖，OBS - 錄屏推流，Gifox - Gif圖製作， 1Password - 密碼管理器，Bartender - 選單欄管理，Downie - 影片下載，IINA / Infuse - 影片播放器，iRightMouse - 滑鼠右鍵增強，PopClip / Bob - 滑鼠工具
Arc 和 Warp 目前筆者一直在用，其它的看著也還不錯，按使用場景可以試試
?開源工具&技術資訊
2. react-exercise-playground - React playground 元件
一個開源的 React playground 元件，可以單獨在專案中接入使用
特點
- 可以線上編輯程式碼,提供實時互動式演示
- 支援引入第三方庫（ESM包）
- 自動從jsdelivr載入第三庫ts型別檔案
- 支援自定義檔案並動態引入，支援ts/tsx/js/jsx/css/json
- 程式碼自動儲存到 URL 上, 分享網址即可分享程式碼
- 純前端部署, 不依賴伺服器，可公司內部署使用內部包
3. Caravaggio - 一個快速的圖片處理服務
可以根據 URL 引數將原圖轉換成不同大小、格式等。
部署非常簡單，提供了 docker 和 npm 開箱即用的方式。
npm install -g caravaggio
caravaggio
使用也非常簡單，在服務後拼引數即可
http://localhost:8565/rotate,v:90/o:png/?image=https://sugarat.top/logo.png
4. eslint-stylistic
由於維護成本高昂，ESLint 和 typescript-eslint 團隊決定放棄核心中與格式化/風格相關的規則，因此啟動了該專案。此 repo 移植了這些規則，並將它們作為獨立的軟體包釋出，並將由社群進行維護。
目前看核心貢獻者還是 antfu 大神
5. 新版 React 文件中的九項最佳建議
- 在迴圈中給元素設定 key 時，使用穩定唯一識別符號，不要使用索引
- 定義元件時放在檔案頂層，不要巢狀
- state 中只儲存計算所需的最小資料
- 除非效能問題明顯，否則推遲使用快取
- 提取的共享函式只有呼叫 hook 才加 use 字首
- 根據 prop 改變 state 時直接在元件函式中設定，不要在 effect 中
- 資料獲取首選第三方庫，不要只用 useEffect
- 響應事件時用事件處理函式，不要用 useEffect
- effect 依賴引起不必要重渲染時，去掉函式里的依賴，不僅是陣列裡的
?AI工具&資訊
6. AIGC相關教程資源收集
專案收集了關於 AIGC 的各種精選教程和資源。
?趣圖
篇幅有限，如果你還沒看夠，可移步後面的推薦渠道，繼續遊覽，歷史週刊（<20）移步部落格
⭐️強力推薦關注
- 阮一峰: 科技愛好者週刊 - 記錄每週值得分享的科技內容，週五釋出
- 雲謙：MDH 前端週刊 - 前端資訊和分享
- 童歐巴：前端食堂 - 你的前端食堂，吃好每一頓飯
- 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
- 值得一讀技術部落格 - 每天進步一點點，每天分享有料的技術文章！