蒲公英 · JELLY技术周刊 Vol.22

近期 React Router 已经释出了 6.x 的 beta 版本，正式版本已经不远了，作为 React 生态中的重要组成部分，React Router 被广泛应用于各个 React 项目中，而它的每一次版本迭代也都备受关注。本次 React Router 具体有哪些改动？升级会带来多少新鲜特性？升级又需要付出多少成本？项目需不需要升级跟进？相信看完你会有自己的答案，小助手现在就要去尝鲜体验一把啦。

登高远眺

天高地迥，觉宇宙之无穷

基础技术

Text Fragments，一种你没见过的锚点技巧

Text Fragments（文本片段）是 Chromium 80+ 的新功能。使用 Text Fragments，我们可以在 URL 中指定文本片段作为锚点。当浏览器打开一个带有 Text Fragments 的 URL 时，浏览器会对匹配到的文本进行强调，引起用户的注意。

AVIF 已经来了

本文使用四幅不同的图片：细节丰富的照片/平面插画/重型SVG/渐变图作为 Demo，将常见的图片格式：JPEG，WebP，PNG 与 AVIF 进行比较，揭秘 Netflix 为什么选择 AVIF 作为下一代的图片压缩技术。【译文】https://juejin.im/post/6870741995204132877

Emscripten 是 WebAssembly 工具链里重要的组成部分。它能够帮助我们把 C/C++ 编译为 asm.js 或 WebAssembly，输出可以运行在 Web、Node.js 和 wasm runtimes 的代码。文章从一个 C 的 HelloWorld 展开，逐步介绍了调试、WASM 与 JavaScript 相互调用、Emscripten API 等知识点。阅读完本文后，读者能够掌握 Emscripten 的基本用法，学习到 asm.js/WASM 与 JavaScipt 实现交互的部分细节。

前端框架

【React 动态】React Router 6 新特性

React Router 最近发布了 6.x 的 beta 版本，相信很快将会发布正式版。作为 React 生态的重要组成部分，React Router 被广泛用于各 React 项目中。本次的升级将会引入哪些新特性、又是否会带来非兼容性改动呢？本文详细介绍了 React Router 6 的各项具体改动，其中 Route/Link 组件需要书写相对路径、支持以对象形式定义路由以及 suspense-ready navigate API 比较值得关注。

服务端开发

libuv 教程

熟悉 Node 的同学，对 libuv 肯定不陌生。libuv 是一个高性能的，事件驱动的I/O库，并且提供了跨平台（如 Windows，Linux）的API。Nikhil Marathe 在写node-taglib 的时候苦于没有好理解的 libuv 教程，于是就写了这本小册，现在已经被纳入 libuv 官方文档，有兴趣的同学，不妨尝试看一看，一定会为你打开一个新的世界。

设计哲学

如何为数据可视化选择颜色？

选择好用的颜色往往不是一件容易的事情，为图表选择合适的颜色也是如此，如果您完全不懂颜色，在选择颜色这件事情上有很大的困难，那么希望本文可以教会您寻找适合数据可视化的颜色，或者是制作 PPT 的色板。

沧海拾遗

沧海拾遗，积跬步以至千里

CSS层叠上下文和层叠顺序原理探究

作为前端开发，CSS 是我们惯手的工具，它和 HTML 充斥着日常工作的方方面面，但是对于它的原理却不是每个人都可以心中有数的。作为一篇 15 年的“古文”，这些细致的知识点经过岁月的沉淀至今，都依旧是大家需要好好学习的。

设计稿の超完美复刻

完美还原设计稿，不仅承载着设计师们的期待，更是对前端基本功的一个考验，但是很多时候，除了技术本身，还有很多以外的东西是我们需要思考判断的。如果只是复刻设计稿，在实际工作中并不足以将项目的体验做到极致，发挥出主观的能动性才能让项目完成最终 101% 的呈现。

「蒲公英」期刊，每周更新，我们专注于挖掘「基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能、设计哲学、前端框架」等多个大方向的业界热点，并加以专业的解读；不仅如此，我们还会推介精选凹凸技术文章，向大家呈现团队内的研究技术方向。

抬头仰望，蒲公英的种子会生根发芽，如夏花绚烂；格物致知，我们登高远眺、沧海拾遗，以求积硅步而至千里。

蒲公英 · JELLY技术周刊贡献指南

欢迎关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章：