Weekly Tracker

Frontend Focus #529

2022/2/20

你好，CSS 级联层 (opens new window) — 探索级联层（一种在离散 “层” 中确定级联逻辑范围的新机制）如何工作，它们可以帮助我们对未来更有信心地编写 CSS。

Chrome 和 Firefox 的 100 个版本 (opens new window) — Chrome 和 Firefox 都将在几个月内达到第 100 个版本。这篇文章着眼于解决潜在用户代理字符串检测问题，以及 Chrome 和 Firefox 为减轻影响而采取的策略。

从头开始构建渐进式 Web 应用程序 (opens new window) — 加入 Maximiliano Firtman 观看这个详细的视频课程，内容包括创建和发布 PWA、组件、Web app maintest、service workers、分发等。

跳过 JavaScript？一些后端语言如何学习前端 (opens new window) — 你可能认为这是关于使用 WebAssembly 在浏览器中运行 Python 之类的文章，然而不是。这是关于维护与后端进程的 WebSocket 连接并从后端动态渲染 HTML 的，如现代 Elixir 和 Rails 堆栈。

JS 2021 调查报告 (opens new window) — 年度 “JS” 调查报告现已出炉，其中包含大量有趣的数据点。 React 仍然是首选的前端框架。

# ⚡️ 快览:

# 📙 教程、文章 & 意见

带有 Origin 私有文件系统的文件系统访问 API (opens new window) — WebKit 现在支持这个新的 API（在 Safari 15.4 测试版和 Safari 技术预览版中），使 web 应用程序可以直接创建、打开、读取和写入文件，或者创建目录并枚举其内容。这里有篇 关于 Firefox 是如何处理事情的 (opens new window)。

文件系统访问 API 入门 (opens new window)

没人能看到 Wordle 字体 (opens new window) — 作者解释了网络排版中如何不提供字体文件的一个错误。这可能也发生在 Wordle 上。

很棒的网页设计 (opens new window) — 庆祝网页设计也有异想天开的一面。那些让网络变得有趣的奇怪、古怪、有时却毫无意义的网站。

如何避免 Jamstack 网站上的内容导致的生产错误 (opens new window)

构建自适应网站图标 (opens new window) — 关于如何构建 adaptive favicon 的基本概述，该图标会根据您的浅色 / 深色主题偏好而变化。

过去，今天和未来 (opens new window) — 又快又慢的网络世界…

从 “Tumblr 女孩” 到工程师：该平台如何激发一代女性编程 (opens new window)

“为什么 Safari 不需要任何 Chromium 保护” (opens new window)

Adobe XD，哪里出错了？ (opens new window)

# 🔧 代码、工具和资源

Apache ECharts：一个开源的 JS 可视化库 (opens new window) — 发行说明 (opens new window) 详细介绍了最新版本中的内容，包括关键帧动画、自定义加载动画和具有改进性能的新 SVG 渲染器。这里 (opens new window) 也有很多演示。

团队的免费活动和聊天 API (opens new window) — 使用 Stream 中的 Maker 帐户为您的启动或副项目完全免费解锁企业级特性、功能和 UI 组件。

SPCSS：用于简单 HTML 页面的最小化、无类样式表 (opens new window) — 绝对是基于文本的内容的最佳选择，它会根据系统偏好自动以暗模式呈现。你可以在 这里 (opens new window) 试试。

Minze：原生 Web 组件的 JavaScript 框架 (opens new window) — 基于最新的 Web 组件标准，它允许您构建可用于任何项目的可移植组件库。

Polka Dot Generator：为自定义圆点图案背景生成 CSS (opens new window) — 使用自定义属性和 CSS 渐变生成代码。您可以调整圆点的颜色、大小和模糊度。

Griffel：带有提前编译的 CSS-in-JS (opens new window) — 来自 Microsoft，CSS-in-JS 解决方案的另一种选择。这个拥有近乎零的运行时、SSR 支持以及使用 JS 对象定义的样式以及其他功能。

pppointed：各种装饰风格的SVG箭头制作工具 (opens new window)

# 🧑‍💻 结尾

深入了解现代 Web 浏览器 (opens new window) — 我们在 2018 年首次发布时展示了这个由四部分组成的精彩插图系列，最近又在 Twitter 上出现了。它仍然是现代浏览器如何工作的优秀解答，并且使用 Chrome 架构。

Frontend Focus #528