视野修炼-技术周刊第61期
筆者在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 訂閱源抓取最新前端技術文章
- 值得一讀技術博客 - 每天進步一點點，每天分享有料的技術文章！
總結
以上是生活随笔為你收集整理的视野修炼-技术周刊第61期的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 日常的问题也是日常的修行
- 下一篇： AtCoder Beginner Con