“前端微周刊”每周更新一次，发现国外前端圈技术相关资讯及优秀工具和文章，为你提供更前沿的前端技术视角。

微信搜索订阅“前端微志”公众号。

😬 本周话题

开发团队通常会进行Code Review的“集会”活动，在这个活动中，肯定会遇到很多匪夷所思的代码。本周，我们就来聊一聊那些你看到过的“神奇”代码吧，欢迎评论区留言~

📰 资讯

Ghost 4.0发布

Ghost 是一个流行的开源发布工具（CMS），发布了4.0的大更新的版本。

这次版本中新增了dashboard，人员特性，集成调整和整洁的前端变更，如响应速度快、所以图片的懒加载和显著的性能提升。

Socket.IO 4.0.0 发布

Socket.IO 4.0 是一个大版本更新，主要在API级别有一些重大的变更。如：

• io.to()现在是不可变的；
• wsEngine配置更新，是为了解决问题：Critical dependency: the request of a dependency is an expression
• event支持TypeScript类型定义
• ……

Storybook实验性支持webpack 5

Storybook 是一个非常流行的UI组件车间，可以在线解析组件并方便预览。

除了支持webpack 5，Storybook团队还设计了一个可插拔的builder抽象概念，可以用来探索下一代builder，如：Snowpack，ESBuild和Vite等等。

V8（和Chrome）将实行更快的发布周期

Google Chrome将发布周期由六周加快至四周，所以我们有望在2021年底看到Chrome v100的发布。为此，V8也调整了发布的周期，以迎合这一调整。

📖 文章

我对 Svelte 的看法

Svelte是前端三大框架之外，评价比较高的一个框架，它跟Vue在用法上很像，但是在底层原理上有很大的不同。Svelte是在编译层实现了Reactivity，而Vue是在运行时环境实现了Reactivity。

本文试图通过告诉读者 Svelte 在编译阶段做了什么，来让只听说过 Svelte 的读者，从浅层的原理和设计的角度，了解到 Svelte 是一个怎么样的框架、它和其它框架的区别是什么。

🔑 OAuth 2.0 flows explained in GIFs

OAuth（Open Authorization）可以让第三方网站或app能够访问到用户数据而无需共享它们的凭证。它是一组使授权访问成为可能的规则，用户可以授权app可以访问哪些资源，并做相应地限制访问。

文中有创意地使用gif图来演示整体的数据交换的流程，读者可以很清晰地了解到整个过程，帮助理解底层原理和规则。

JavaScript: What is the meaning of this?

this指什么？这是一个老生常谈的面试题，且非常基础。文中通过列举不同场景来讲解this到底是指向什么，非常的清晰易懂，非常建议阅读一下。

CSS-in-JS support in DevTools

从Chrome 85开始，DevTools就支持了CSS-in-JS。现有的CSS-in-JS框架都是使用CSSOM API来做开发环境下的主要依赖方法，文中详细介绍了Chrome DevTools如何实现这一支持的功能。

🛠 工具、插件

npm diff：创建npm包的版本diff

在npm的7.5.0版本中，带来了一个新的命令：npm diff，这个命令的功能类似git diff，它可以比较已发布的npm包的不同版本中文件的差异。

命令示例操作：

# 语法
npm diff --diff=<spec-a> --diff=<spec-b>

# 示例
npm diff --diff=antd@4.0.0 --diff=antd@4.0.1

CSS Generators

作者写过一个系列文中，列出了一些对开发者和设计师都很有用的工具。这篇文章中讲述了关于CSS Generator的工具，从CSS shadow特性到简单的径向渐变，再到CSS层级和涂改等方面的多个工具。

AVIF 转换器

AVIF 是AV1 Image File Format的简写，它表示一种新的图片格式，这种图片格式由开源组织AOMedia开发，Netflix、Google与Apple都是该组织的成员。

相比传统的图片格式，它对图片的压缩度非常地高，且可以用JavaScript进行解析，所以即使浏览器不兼容这个图片格式，你也可以通过引入polyfill 的方式支持它。

上面这个工具可以很方便地将png、jpg、webp和gif等格式的图片压缩成avif格式的图片，可达90%多的压缩率。

transition.css：轻松获取CSS动画

该网站是一个CSS动画相关的工具，各种动画效果，点击即可预览，一键复制该动画的CSS代码。

🥅 代码片段

CSS Reset

CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在不同浏览器中显示时，都有一个各自的默认属性值，通常为了避免重复定义元素样式,并保证页面元素在不同浏览器中的显示样式保持一致，我们需要对样式进行重置。你可以使用一个CSS Reset库来做这件事，如Normalize，也可以自己用下面这段简易版的：

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Optional Chaining

Optional Chaining（可选链）是一个 Javascript 中可以增强惰性求值时健壮性的特性，目前已经在Stage 4阶段，各大浏览器也早已实现了这一特性，TypeScript也从 v3.7（2019.11）开始支持Optional Chaining的一级特性。下面写一些示例代码帮助你认识它：

// 这是一个示例对象
const person = {
  name: "Catalin Pit",
  socialMedia: {
    twitter: "@catalinmpit",
    instagram: "@catalinmpit",
    linkedin: "@catalinmpit",
  },
  experience: "Junior",
  employed: true
};

// 以前，我们如果想访问到`twitter`字段，需要做很多层的属性判断
if (person && person.socialMedia && person.socialMedia.twitter) {
  console.log(person.socialMedia.twitter);
}

// ---------------------------------
// 有了optional chaining，我们就可以这样写了，是不是非常简便
if (person?.socialMedia?.twitter) {
  console.log(person.socialMedia.twitter); // outputs @catalinmpit
}

// 还可以省掉if判断，这样写
console.log(person?.socialMedia?.twitter);

目前，各大主流浏览器早已支持这一特性，大家可以放心地在项目里使用它。

将字符串拆分成一个字符数组

通常，我们要将一个字符串按单个字符进行拆分，会这样做：

const firstName = "Catalin";

const firstNameArr1 = firstName.split('');
console.log(firstNameArr1);
// ['C', 'a', 't', 'a', 'l', 'i', 'n']

其实，在ES6+语法中，我们可以使用拓展运算符很简单地实现这一逻辑：

const firstName = "Catalin";

const firstNameArr2 = [...firstName];
console.log(firstNameArr2);
// ['C', 'a', 't', 'a', 'l', 'i', 'n']

使用CSS函数attr()创建动态tooltip

tooltip是一个当鼠标点击或悬浮在某个元素上时，突出展示一个提示的小区块。下面教大家一个不使用JavaScript实现tooltip的方法：

<span
  class="tooltip"
  data-tooltip="Tooltip content"
>
  鼠标悬浮
</span>

.tooltip:before {
  content: attr(data-tooltip);
}

简单CSS实现轮播图

.container {
  scroll-snap-type: x mandatory;
}
.slide {
  scroll-snap-align: start;
}

💻 前端岗位

近期如有前端岗位的招聘需求，可以添加到评论区。也可以公众号私信我或邮件联系zollero@163.com。