山月週刊第6期：React 學習路線圖

前端愛好者週刊 (Github: shfshanyue/weekly)，每週記錄關於前端的開源工具、優秀文章、重大庫版本發佈記錄等等。每週一發布，訂閱平臺以下，歡迎訂閱。

• 訂閱網站: https://weekly.shanyue.tech
• 訂閱Github: shfshanyue/weekly

封面

包含了從初級到高級有關 React 生態的學習路線圖，圖片出自 roadmap.sh

一句話

• 在 Chrome 中打開開發者總局，<Ctrl+Shift+P> 搜索 Full Size，可截屏網頁滾動長頁面
• Deno & Node.js 做者 Ryan Dahl 和聯合創始人 Bert Belder 宣佈成立了 Deno 公司
• vue3 將再也不支持 IE11，原定投入 Vue 3 IE11 支持的精力將投入給 2.7
• 最新數據顯示，截至2021年2月底，我國公募基金管理規模達到21.78萬億元

開發利器

1、 Svg Viewer

可視化 SVG，並支持壓縮圖片、轉化爲 React/RN 組件、轉化爲 png 格式的圖片等

2、 URL-encoder for SVG

把 SVG 轉化爲 DataURI，並嵌入到 CSS 樣式中

文章推薦

1、 圖片加載異常兜底方案

當圖片加載失敗後，咱們能夠使用 DataURI 做爲一個友好的兜底方案。可是仍有許多複雜的狀況，能夠看這篇文章瞭解一下。

代碼片斷

1、 如何把一個數組隨機打亂?

使用原生實現，Math.rondom() - 0.5 有時大於0，有時小於0會達成這樣的效果

[1, 2, 3, 4].sort((x, y) => Math.random() - 0.5)

借用 lodash 可更方便

_.shuffle([1, 2, 3, 4])
//->

開源與庫

1、 tippy: 最好用的 tooltip 工具

一個 tooltip 工具，可在 React 中使用，支持多達幾十種豐富的選項。

• repo: atomiks/tippyjs/
• npm: tippy.js

版本發佈

1、 Next.js 10.1

We are excited to introduce Next.js 10.1, featuring:

• 3x Faster Refresh: 200ms faster refresh with no changes necessary.
• Improved Installation Time: 58% smaller install size and 56% fewer dependencies.
• next/image Improvements: Apple Silicon (M1) Support, plus more layout and loader options.
• Next.js Commerce Shopify Integration: Flexible data layer for composable e-commerce apps.
• Custom 500 Page: Add your own logo and branding to error pages.
• Strict PostCSS Configuration Loading: Improved caching with Webpack 5.
• Support for extends in tsconfig.json: Extensible configuration for large TypeScript apps.
• Detect When Preview Mode Is Enabled: Conditionally show content when viewing previews.
• Router Methods Scroll to Top: Automatically scroll to the top, now consistent for all routing.
• Documentation Improvements: Incremental adoption, migration, and Docker deployment.

2、 Node v15.13.0

在 Node 中也支持了 btoa 與 atob 了

• buffer:

  • implement btoa and atob (James M Snell) #37529

• deps:

  • upgrade npm to 7.7.6 (Ruy Adorno) #37968

    • This update adds workspaces support to npm run and npm exec

• doc:

  • add legacy status to stability index (James M Snell) #37784
  • add @linkgoron to collaborators (Nitzan Uziely) #37817

• http:

  • add http.ClientRequest.getRawHeaderNames() (simov) #37660

3、 npm v7.8.0

主要集中在對 workspaces 支持的加強

FEATURES

• 8bcc5d73f #2972 feat(workspaces): add repo and docs (@wraithgar)
• ec520ce32 #2998 feat(set-script): implement workspaces
• 32717a60e #3001 feat(view): add workspace support (@wraithgar)
• 7b177e43f #3014 feat(config): add 'envExport' flag (@isaacs)

BUG FIXES

• 4c4252348 #3016 fix(usage): specify the key each time for multiples (@isaacs)
• 9237d375b #3013 fix(docs): add workspaces configuration (@wraithgar)
• cb6eb0d20 #3015 fix(ERESOLVE): better errors when current is missing (@isaacs)