使用 Biome 代替 prettier

封面图：江苏·秋冬·红色的枫叶

OK！继续来分享上一周接触到了一些讯息！

CSS 技巧：高度自适应过度

笔者在这里分享一个CSS高度过度动画的小技巧：在鼠标hover在某个元素上时，显示其子元素文本，同时添加一个动画效果。

原文：🧙‍♂️ CSS trick: transition from height 0 to auto! - DEV Community

举个例子：

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>

你或许尝试过如下CSS样式来添加"动画":

.accordion-body {
  height: 0;
  transition: 500ms height ease;
}

.accordion:hover .accordion-body {
  height: auto;
}

但是这个属性是无法实现动画的，如果你能确定容器的高度，那么可以使用maax-height属性来添加动画过度效果：

.accordion-body {
  max-height: 0;
  transition: 500ms max-height ease;
}

.accordion:hover .accordion-body {
  max-height: 200px;
}

最大高度的设定能触发渐变效果，鼠标hover的时候确实可以让高度实现渐变。

但是，很多时候我们无法确定内部元素的高度，最好的方案还是希望忽视其内容高度。我们可以使用CSS Grid属性来解决这个问题：

.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body > div {
  overflow: hidden;
}

Chrome 在去年这个时候发布的v107版本上支持了grid-template-rows的动画过渡支持，如果你想要在生产上使用这个特性，可能需要考虑一下兼容性。

实在有这样的需求的话，也可以使用JS来实现。

Biome

前几天algora发起了使用Rust重写prettier工具的挑战，最终的赢家便是Biome!

Biome 是一款基于Rust语言开发的前端工具链，完美替代prettier+eslint。

你是否觉得eslint+prettier处理代码的速度变得难以忍受？不妨将其切换到Biome上来试试。

Vienna

ViennaRSS – The Free and Open Source RSS/Atom Reader for macOS免费开源的RSS阅读器，我用来作为Readkit的平替。

Comprehensive Rust

Welcome to Comprehensive Rust 🦀 - Comprehensive Rust 🦀 这是一份来自google安卓团队的免费Rust开发教程。

推荐给具有一定编程经验且并且打算学习Rust的朋友。

Daily.dev

daily.dev | Where developers grow together 开发者信息聚合应用，用户可以接收官方或者社区用户分享的技术讯息，主要内容都来源于国外，喜欢学习新知识的开发者应该会很喜欢。

Web3.0 资讯整理

wangschang/web3.0: web3.0知识整理 web3.0知识 web3.0学习资料

最后

笔者上周感染了流感，目前还没完全恢复，大家别放松，尤其是家里有小孩的。

好了，今天的分享就先到这里，大家下周见~