Shanyue Weekly Issue 6: React Learning Roadmap

Front-end enthusiasts weekly (Github: shfshanyue/weekly), weekly records about front-end open source tools, excellent articles, major library version release records, etc. Published every Monday, the subscription platform is as follows, welcome to subscribe.

• Subscription website: https://weekly.shanyue.tech
• Subscribe to Github: shfshanyue/weekly

Cover

Contains a learning roadmap about React ecology from elementary to advanced level. The picture is from roadmap.sh

One sentence

• Open the Developer Headquarters in Chrome, search for Full Size by <Ctrl+Shift+P>, you can screenshot of 16076b62354207 and scroll the long page
• Deno & Node.js author Ryan Dahl and co-founder Bert Belder announce the formation of Deno
• Vue3 will no longer support IE11, and the energy originally planned for Vue 3 IE11 support will be invested in 2.7
• The latest data shows that as of the end of February 2021, my country’s public fund management scale reached 21.78 trillion yuan

Development tool

One, Svg Viewer

Visualize SVG, and support image compression, conversion to React/RN components, conversion to png format images, etc.

Two, URL-encoder for SVG

Convert SVG to DataURI and embed it in CSS style

Article recommendation

One, Image loading abnormal

When the image fails to load, we can use DataURI as a friendly solution. But there are still many complicated situations, you can read this article to understand.

code segment

1. How to randomly scramble an array?

Using native implementation, Math.rondom()-0.5 sometimes greater than 0, sometimes less than 0 will achieve this effect

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

lodash is more convenient to borrow 06076b62369ded

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

Open source and library

I. tippy: The best tooltip tool

A tooltip tool that can be used in React and supports dozens of rich options.

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

Version release

One, 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.

Two, Node v15.13.0

Btoa and atob are also supported in Node

• 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

, npm v7.8.0

Mainly focused on enhancements to workspaces support

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)