前端技术观察第 31 期

《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集，主要分为以下几个板块：

• Highlights
  • 优秀的工具、库
  • 好的教程、深度解读已有技术的文章
  • 业界最新的技术、热点文章
  • 业界对（新）技术的深度地、优秀地实践
  • Tutorial
  • Tools And Codes

《前端技术观察》的目的是让大家：

• 更及时的了解到业界最新的技术
  • 受益于高质量的教程、文章
  • 了解业界更优秀的代码、工具
  • 更多地、氛围更浓厚地讨论、研究、落地技术

highlights

TypeScript 4.2 发布（英）

https://devblogs.microsoft.com/typescript/announcing-typescript-4-2/

4.2版本改进了类型别名的处理方式，在元组类型中添加了前导/中间的rest元素，等等.

开源可视化库D3.js的十年（英）

https://observablehq.com/@mbostock/10-years-of-open-source-visualization

D3.js(流行的数据可视化库)的创建者回顾了D3 1.0发布以来的十年，以及他从事D3开发和长久以来带领一个优秀项目所学到的东西。

JavaScript开发人员应该更喜欢Axios而不是Fetch（英）

https://betterprogramming.pub/why-javascript-developers-should-prefer-axios-over-fetch-294b28a96e2c

这是一个有趣的，或许最初有些反常的想法。

聊一聊Serverless

https://lengyuexin.blog.csdn.net/article/details/113833894

本文介绍了Serverless的概念、发展过程、优势和不足、云函数诸多特性、SFF、BaaS，科普性质鲜明。

JavaScript 性能超过了打包大小（英）

https://nolanlawson.com/2021/02/23/javascript-performance-beyond-bundle-size/

Nolan思考了为什么在JavaScript性能方面“bundle size”是一个很常见的问题，并分享了一些有用的工具来进一步研究它。

NodeJS:2021年二月安全的发布版本(英)

https://nodejs.org/en/blog/vulnerability/february-2021-security-releases/

现在可以对每个正在维护的版本行进行更新，包括v15.10.0、v14.16.0、v12.21.0和v10.24.0，以修复三个安全问题。

tutorial

从Sketch转换成IOS、Android应用的方式（英）

https://medium.com/sketch-app-sources/tutorial-from-sketch-to-xcode-the-no-code-way-f6859dc9f2b7

本文介绍如何在不编写任何代码的情况下从Sketch转换iOS和Android应用

Streams 权威指南（英）

https://web.dev/streams/

Streams API允许你用灵活的方式编写读取流、写入流和数据转换流。

用React、Three.js和WebGL着色器重建真实世界的地形（英）

https://techblog.geekyants.com/recreating-real-world-terrain-with-react-threejs-and-webgl-shaders-1

受一个有趣的飞行模拟器启发，创建自己的真实世界纹理三维渲染的网页。

用TypeScript创建React组件(英)

https://felixgerschau.com/react-typescript-components/

为对这个过程有些许忧虑的开发人员展示用TypeScript创建React组件的简单方法。

你不知道的Proxy

https://juejin.cn/post/6924442692667572237

本文从概念，使用场景，注意事项等诸多方面由浅入深介绍了Proxy。

实现Web端自定义截屏

https://juejin.cn/post/6924368956950052877#heading-0

本文使用Vue3和Canvas极为细致地讲解了Web端截屏的实现过程,思路巧妙。

tools And codes

React Drawer:滑动抽屉组件(英)

https://github.com/react-component/drawer

周下载量过500k的滑动抽屉组件

可高度定制的Tooltip和Popover库(英)

https://atomiks.github.io/tippyjs/

可访问，易于主题，在低端设备上快速，并且支持TypeScript。也是一个很好的项目网站/主页的例子。

vue3图标选择器:一个漂亮的Vue图标选择器组件（英）

https://github.com/hasinhayder/vue3-icon-picker

你可以在这里试一下。

浅谈Vite 2.0

https://juejin.cn/post/6932367804108800007

本文介绍了Vite 2.0 原理，依赖预编译，以及插件机制与Rollup的兼容。

关于包管理器，我更推荐pnpm而不是 npm/yarn

https://juejin.cn/post/6932046455733485575

本文从概念、特性、依赖管理和安全性角度介绍了pnpm