Weekly Tracker

Frontend Focus #527

2022/2/19

推送通知、WebXR 和更好的 PWA 支持即将登陆 iOS (opens new window) — Web平台的 iOS 正在更新，包括清单中的图标支持、Web 推送、AR 和 VR 实验 — 正如 Max 在此处详细解释的那样。这是 Apple 最新 Safari 测试版的发行说明 (opens new window)。

内存泄漏：Web 性能被遗忘的一份子 (opens new window) — 认真对待内存泄漏，尽管可能 “努力与回报不成正比”。

针对前端开发人员最大的研究调查 (opens new window) — 为您答疑解惑的 2022 年前端现状调查。帮助前端社区了解全局——我们在 2020 年有 4500 名参与者，所以让我们扩大规模。

Web 框架解决了什么，没有它们我们应该怎么办 (opens new window) — 深入探讨跨框架常见的一些技术特性，并解释一些不同的框架如何实现它们以及它们的成本。

npm 的完整初学者指南 (opens new window) — CSS Tricks 的指南涵盖了从头开始的所有内容。如果你是一名长期的 JavaScript 开发人员，npm 学习必不可少。

# ⚡️ 快览:

# 📙 教程、文章 & 意见

▶  !important 是如何工作的？（不是你想的那样） (opens new window) — CSS !important 不仅仅增加了样式规则的权重，它还反转了 CSS 级联 — 正如这个 8 分钟的视频中所解释的那样。

2022 年 Web 开发的底线？ (opens new window) — 分析围绕前端技术、浏览器共享等的众多统计数据，以了解我们必须支持的最低兼容。

使用 InfluxDB 可视化实时数据 (opens new window) — 如何使用基于 React 的 Giraffe 可视化库从流数据中获得有意思的东西。

WebAssembly 特性检测 (opens new window) — 了解如何在支持所有浏览器的用户的同时使用最新的 WebAssembly 功能。在这篇相关文章中，Harshal Sheth 谈到了这项技术现在处于 “拐点” (opens new window) — 预计在未来几年内采用率将激增。

CSS fit-content 的用例 (opens new window) — 一篇关于 Ahmad 最喜欢的 CSS fit-content 用例的短文。

使用 CSS 混合模式的背景移位动画 (opens new window) — 下面是如何使用 CSS 混合模式和多层动画来实现整洁的背景颜色偏移过渡效果。这是演示效果 (opens new window)。

流体类型的尺寸和间距 (opens new window) — 开发者 Piper 分享了他们使用流体类型的原因，以及您可能希望如何处理类似的类型设置。

如何在不陷入绝望的情况下跟上 Web 开发的步伐 (opens new window)

“大多数网站都是隐式设计的，生命周期很短” (opens new window)

在网站上更改字体之前要考虑的六件事 (opens new window)

# 🔧 代码、工具和资源

OpenMoji：面向设计师和开发人员的开源表情符号 (opens new window) — 目前包括约 4,000 个手工制作的表情符号，它们都遵循一致的风格，可按关键字或类别进行搜索。

渐变生成器：创建 CSS、SVG 和 PNG 颜色渐变 (opens new window) — 渐变生成器是一毛钱，但这个有一些有用的功能：包括圆锥渐变，渐变分层，并自动添加颜色以防止饱和度损失。

Doppler — 将所有环境变量集中在一处 (opens new window)

Open Props：增强型 CSS 变量 (opens new window) — 由预定义的 CSS 变量组成的小型即插即用组件，您可以使用它们来构建自己的设计系统、组件或与其他框架一起使用。

Runno: 基于浏览器的代码运行器，可以作为 IFrame 嵌入或用作库 (opens new window) — 类似于 JSFiddle 和 CodePen 的浏览器的版本工具，包括 JS、Python、SQL、C 和 C++ 的运行时。

PWA Studio 发布，用于构建渐进式 Web 应用程序的 VS Code 扩展 (opens new window)

Frontend Focus #526