前端周刊第69期：Hello 算法、CSS 年度调查报告、Astro 3.0、Biome

周刊首发于微信公众号“写代码的宝哥”，欢迎各位前端小伙伴前来关注！

快讯

• Astro 3.0 发布，成为第一个支持 View Transitions API 的 Web 框架
• Biome 发布，Fork 自 Rome 官方仓库，继续 Rome 的未竟事业

文章

• CSS 2023 年度调查报告 - CSS 正在经历前所未有的新功能演进，浏览器也在不断跟进实现。从本份报告你不仅能了解 CSS 常用的一些功能特性，还能接触到一些新特性、新名词，帮你掌握未来 CSS 的发展趋势。值得一提的是，从今年报告的结果中，可以看到 CSS 框架的使用现在正处于某种下降趋势。
• 请停止比较 Web Component 与 React - 凭借其庞大的生态系统和社区，React 经常成为衡量其他技术的标准。对于Web组件来说尤其如此。然而，这种比较框架是不公平的，并助长了过度依赖 React 等库的误导性批评。这篇文章旨在理清这些错位的批评，并强调为什么 Web Component 值得根据其自身的优点进行评估

• TypeScript中的数组类型 - 最近有人在 Twitter 开展调查，使用 TypeScript 数组类型时，更喜欢 Array<string> （泛型语法）还是 string[]（数组语法），78% 的人选择了数组语法。作者认为 78% 的人完全错了，我们更应该使用泛型语法，并在文中给出了理由

• 面向未来的 React 应用结构：本文为构建现代 React 项目，给出了一套自己的目录方案。引导您你远离那些常见的错误，收获编码愉悦感
• 如何构建像 Lodash 这样的 JavaScript 工具库 - 手把手教你构建一个简易版本的 Lodash 工具库

• 几个使用 CSS 阴影的有趣方法 - 本文较少几种不同的阴影效果的实验
• 为什么 Tailwind CSS“赢”了 - Tailwind CSS 是一个新的、无处不在的前端框架。它取代了用 Twitter Bootstrap 构建的一代网站。然而，现在当前我们提到 Tailwind CSS 时，往往不是指框架本身，而是指通过 Tailwind UI 提供的 UI 组件。为什么 Tailwind CSS 变得如此受欢迎？文中列举了 4 个原因

• 给 Web 开发人员的15条可怕建议 - 做到这 15 条，你就能快速写出难以维护的屎山项目了
• 如何在社交媒体上为代码截图编写 alt 文本 - 帮助视力有障碍的程序员从代码片段中进行学习
• 基于滚动的布局动画 - 使用 GSAP 的 ScrollTrigger 和 Flip 探索不同的基于滚动的布局切换动画
• 探索 Oklch 色彩空间 - Oklch() 是 CSS 中一个新的表达色彩的函数，这篇文章教我们如何使用它

发布

• Firefox 117 - 目前所有主流浏览器都已支持 CSS 嵌套
• jQuery 3.7.1 - 修复 jQuery 3.7.0 中删除 Sizzle 时引入的一个 BUG

• TypeScript 5.2

工具

• SnippetBuilder - 一个代码截图工具。不过支持多片段代码添加、Logo 图标的添加等增强功能

• Lightning CSS：极快的 CSS 解析器、转换器、捆绑器和精简器，基于 Rust。可以替代 PostCSS，但功能更强大， 类似于 SWC 与 Babel 之间的关系
• Image-To-Pixel - 将照片转换为像素艺术的编辑器，使用 p5.js 构建。repo

库

• Better Select - 基于原生 <select> 的最小化封装，提供 Web Component 和方法调用 2 种使用方式
• fs-lite - 一个 fs-extra 的轻量级替代品，无任何依赖，源码实现非常适合用来学习

• Default composer：一个只有 ~500B 大小的 JavaScript 工具库，用于设置嵌套对象的默认值
• Peaks.js 3.0 - 一个 JavaScript 组件，用于基于浏览器的音频波形可视化，来自 BBC 的研发部门

资源

• 《Hello，算法》 - 一本免费、开源、新手友好的数据结构与算法入门教程。提供在线和 pdf 文档下载 2 种阅读方式
• WebGL 图像处理技术实践 - 探索在浏览器中使用 GPU 着色器的几种图像处理技术，包括颜色校正、混合模式、抖动等

• WebGlossary.info - 该站点罗列了 Web 开发领域 3,500 多个术语和概念，方便查询学习
• Toools.design - 这个站点收集了 1000+、18 个类别的设计资源和工具，供开发软件或寻找灵感使用，每周都会有更新

---

资料来源：Frontend Focus#607、社交网络

本文由mdnice多平台发布