“前端微周刊”每周五更新，为你带来不一样的前端周刊新体验
微信搜索订阅“前端微志”公众号
🗿 冷知识
很多人可能不知道，Math.min()和Math.max()的值跟预想的不太一样。
📰 资讯
Rome创始人成立Rome Tools, lnc
Rome 是一个支持JavaScript、TypeScript、JSON、HTML、Markdown和CSS等语言的语法检查、编译和构建工具，它被设计的目的是为了替代Babel、ESLint、Webpack、Prettier和Jest等工具。
值得注意的是，Rome的创始人（Sebastian McKenzie）也是Babel的创始人，且是知名开源项目Yarn和Lerna的早期开发人员。
这次成立的Rome Tools, lnc已经获得450万美金的种子投资，这家公司的定位是“开源优先”，目的是为了通过构建新的产品和服务来支持开源项目的发展。
Bootstrap 5发布
历时几个月，经过3个alpha版本和三个beta版本，Bootstrap 5终于正式发布了。整体上，这次大版本的更新，还是带来了不少新变化的，大致有：
- 设计了新的logo，更新了文档设计
- 全新的Offcanvas组件，可以隐藏在页面的不同位置
- 新更新的form表单
- 支持了
RTL（Right to Left）布局 - 全新修正的工具API
- 抛弃对
Microsoft Edge Legacy、IE10/11、Firefox < 60、Safari < 10、Chrome < 60、iOS Safari < 10和Android < 6等浏览器的支持 JavaScript侧已经完全抛弃了jQuery- ……
VS Code四月份版本（v1.56）发布
📖 文章
2020 中国独立开发者生存现状调研报告
“不过目前中国独立开发者群体远远小于欧美等发达国家，且中国国内鲜有以独立开发者为视角的报告，原因有很多，其中中国软件开发者工作时间过长，自由职业文化相对较弱等为主要原因。但种种迹象表明独立开发者这一群体在不断增多，为此 SegmentFault 思否通过调查问卷、采访、现有数据分析等手段撰写此《2020中国独立开发者生存现状调研报告》。目的是让包括独立开发者在内的对独立开发者感兴趣的人群了解这个职业和这个群体。”
Optimizing Web Vitals using Lighthouse
Lighthouse是一个帮助开发者提升web页面质量和性能的自动化工具，在7.x版本中带来了一些新的特性，如元素截图和更加容易查看UI中影响用户体验指标的内容等。
Lighthouse可以综合地测量包括Largest Contentful Paint、Cumulative Layout Shift和Total Blocking Time在内的Core Web Vitals指标。这些指标影响“加载”、“布局稳定”和“准备据需”等，帮助你更好地发现页面中存在的一些性能问题。
Custom State Pseudo-Classes in Chrome
文中介绍了一个没有在New in Chrome 90中提到的，Chrome中新支持的一种CSS“自定义”特性。
与自定义属性，自定义标签，自定义事件类似，这次要说的自定义特性是：自定义状态伪类。
如果你还不知道说的是什么，那你一定知道CSS中的:hover、:visited和:focus这种伪类，它们表示了页面元素的某种状态。Chrome 90开始，就支持了状态伪类的自定义能力。
通过一段示例代码，定义一个checkbox，给它添加选中和未选中的自定义状态伪类（--checked）：
class LabeledCheckbox extends HTMLElement {
constructor() {
super();
// 1. 实例化元素的“internals”（）
this._internals = this.attachInternals();
// (other code)
}
// 2. 切换元素的状态
set checked(flag) {
if (flag) {
this._internals.states.add("--checked");
} else {
this._internals.states.delete("--checked");
}
}
// (other code)
}
上述代码中有一个方法值得注意，要添加状态，需要通过this.attachInternals()来初始化一个状态实例。attachInternals相关内容，可以查看HTMLElement文档。
How we sped up Chrome DevTools stack traces by 10x
很多人可能没有意识到，在Chrome浏览器中开启DevTools会影响页面打开的性能，因为DevTools中的收集堆栈信息、设置断点、获取性能追踪的快照等都需要浏览器自身花费很多精力来完成。在Chrome 90之前的版本中，这种影响是可以明显看出来的。
Chrome团队在v90版本中对这种性能恶化的情况进行了优化（不可能完全解决），主要是对StackFrame相关的逻辑进行了优化。具体措施，详见原文。
Why You Should Not Use Webpack
Webpack无疑是目前最受欢迎的前端项目的打包和构建工具，目前也达到了第五个大版本，包含了非常多的功能。
然而，在以下场景中，Webpack已经不是最好的打包构建工具：
- Dev模式下的构建速度
- 非常简单的配置文件
- Bundle文件大小
针对上述几个问题，社区有一些其他可使用的替换工具，如Parcel、Rollup、Vite和Snowpack等。
所以，在以后的项目构建技术方案选型时，可以多考虑一下你的使用场景，是否真的应该还使用Webpack?
Alt vs Figcaption
文中介绍了关于img标签相关的两个东西：alt属性和figcaption标签。
alt属性，大家应该都不陌生，它是图片资源的一个描述信息，且只在图片加载失败的情况下才会显示出来，以应对这些异常情况和支持Accessibility的场景（它的内容会被阅读器读出来）。
而figcaption标签不太一样，它也是表示对图片内容的描述，只不过它需要被figure标签包裹，且内容会一直显示页面中。国内的网站中，我只注意到知乎的网页版用到了这个特性。
文中给出了一些这两个特性的使用场景介绍和示例代码，可以帮助你更好地理解它们。
🛠 工具、插件
zx：让你更好地写Shell脚本
zx是一个JavaScript生态下的工具，它可以让你通过JavaScript调用并执行bash命令，用法还比较简单直观。
GitHub主页给出的示例代码，可以看出它的简洁：
#!/usr/bin/env zx
await $`cat package.json | grep name`
let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`
await Promise.all([
$`sleep 1; echo 1`,
$`sleep 2; echo 2`,
$`sleep 3; echo 3`,
])
let name = 'foo bar'
await $`mkdir /tmp/${name}`
fx：命令行工具JSON工具
fx是一个命令行的JSON处理工具，它有易用、可交互和支持文件流等优点。
一直没有找到在命令行中查看JSON文件的好方法，这个工具或许是个不错的选择。
Fig：命令行工具中第自动填充工具
Fig是一个命令行的自动填充工具，可以让你快速敲出想要的命令。目前，它在内测中，官网填写邮箱和问卷可获得使用资格，问卷已填，等待资格邮件中。
CSS Hell
CSS Hell是一个常见CSS错误的集合，并给出这些错误的解决方法。
下面，列一个z-index的错误使用及其解决方法：
/* Bad */
.my-class {
z-index: 122828282882;
}
/* Good */
.my-class {
position: absolute;
z-index: 2;
}
🥅 代码片段
让文字段落展示成三角形
如图，我们可以通过以下三个CSS属性实现这种三角形展示效果：
- shape-outside
- floats
- text-align-last
<triangle-paragraph>
<div class="cutout"></div>
<div class="cutout"></div>
<p>
Larry doesn't care.
Jump so high grow a beard in the air.
......
</p>
</triangle-paragraph>
triangle-paragraph > p {
text-align: justify;
text-align-last: justify;
}
triangle-paragraph > .cutout:first-of-type {
content: '';
inline-size: 50%;
block-size: 100%;
shape-outside: polygon(0 100vh, 0 0, 100% 0);
float: left;
}
triangle-paragraph > .cutout:last-of-type {
content: '';
inline-size: 50%;
block-size: 100%;
shape-outside: polygon(100% 100vh, 0 0, 100% 0);
float: right;
}
html {
block-size: 100%;
color-scheme: light dark;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: flex;
place-content: center;
}
超简单判断闰年
通常我们要判断某一年是否是闰年，需要掌握闰年的定义规则，并按照该负责的规则来判断。下面介绍一个通过反推来判断是否是闰年的方法。
function isLeapYear(year: number) {
return new Date(year, 1, 29).getDate() === 29
}
export default isLeapYear
使用URLSearchParams更新URL中的查询参数
通常会有一种场景：在查询页面，我们需要在当前页面的URL中添加一些查询参数（如q=xxx），然后打开更新后的URL，让页面获取到查询参数查询相关数据。
let searchParams = new URLSearchParams(window.location.search);
searchParams.set("q", 'xxxx');
if (window.history.pushState) {
const url = window.location.protocol
+ "//" + window.location.host
+ window.location.pathname
+ "?"
+ searchParams.toString();
window.history.pushState({
path: url
}, '', url)
}
989