Frontend Focus #524

2022/2/15

深入研究径向和圆锥渐变的 CSS (opens new window)conic-gradientradial-gradient。本文解释了它们各自的工作原理、它们之间的区别(和相似之处)、使用它们的方式,以及它们的一些用例。

Fuite:在 Web 应用程序中查找内存泄漏的工具 (opens new window) — Fuite 旨在使检测网页中的内存泄漏的过程变得简单作为后者。

React 身份验证,简化 (opens new window) — 在本文中,我们展示了一种在 React 应用程序中进行身份验证(访问控制和 SSO)的新方法。

制作漂亮的渐变 (opens new window) — 有没有注意到渐变在中间看起来有点灰色/褪色?发生这种情况是因为 RGB 颜色有一些数学上的问题。在这里,Josh 展示了我们如何解决这个问题,并创建丰富、饱和的渐变。

Firefox 96 发布 (opens new window) — 这里汇集了一些特性,其中最值得注意的是 CSS color-scheme (opens new window) 支持,默认启用 Web Locks API,以及减少主线程负载。

# ⚡️ 快览:

# 📙 教程、文章 & 意见

为什么超链接是蓝色的 (opens new window) — 去年夏天,我们分享了 Elise Blanchard 的这篇文章 (opens new window),试图揭开不起眼的蓝色链接的起源故事。本文会从头描述以进行更多互联网历史探索。

Web 性能的统一理论 (opens new window) — Web 性能通常以无数种方式定义 — 因此想深入学习可能会很棘手。在这里,性能专家 Alex Russell 解释了他对我们应该努力实现的目标的看法,并分享了他的 “北极星” 网络性能价值观。

构建可靠的 Webhook 交付系统太恶心了 (opens new window) — 跳过繁重的工作,让 Hook Relay 为您管理您的 webhook。为您的应用可视化 Stripe 质量的 webhook — 在几分钟内将其变为现实。

不要与级联作斗争,掌控它 (opens new window) — 我们的 CSS 工具箱中有新工具,可以让我们更好地控制级联。

标注要点:WCAG 中标签滥用的场景 (opens new window) — WCAG 中的标签何时会失效?这篇文章试图强调 WCAG 标签滥用的场景,并试图澄清一些东西。

没有版本号的 Web (opens new window)在 “web3” 领域之外,网络还有很多有意思的用途

# 🔧 代码、工具和资源

Vanta.js:您网站的 3D WebGL 背景动画 (opens new window) — 从预定义的背景动画之一中选择,然后使用 UI 来调整其他设置。

APCA 对比度计算器:在 WCAG 3 中计算可访问文本的工具 (opens new window)Dan Hollick 的 Twitter 帖子 (opens new window) 解释了这种新的颜色对比功能,显然它将包含在 WCAG 的未来版本中。

使用带有 Recharts 和 InfluxDB 的 JavaScript 可视化数据 (opens new window)

CSS 渐变生成器 (opens new window) — Josh 创建了一个很棒的基于 Web 的工具,用于制作 “漂亮的渐变” — 效果看起来不错。

Theme UI: 用于创建主题用户界面的库 (opens new window) — 让您可以构建自定义组件库、设计系统、以及使用 Gatsby 主题等。

SQIP:具有矢量支持的可插拔图像转换器 (opens new window) — 它非常灵活,也有一些用例,例如创建较大图像的小预览。