Frontend Focus #526

2022/2/17

CSS Cascade Layers 入门 (opens new window) — 级联层引入了 @layer 的新规则。目的是帮助 CSS 用户更有意识地将 CSS 规则的 “层” 排序为一种新的级联管理方法。来看看 Stephanie Eckles 的介绍吧。

让 Web 标准在谈判桌上占有一席之地 (opens new window) — Web 标准项目 (WaSP) 在努力推动 Microsoft 构建最符合标准的浏览器,这是一本关于 Internet Explorer 团队标准化的精彩读物。

使用您最喜欢的技术堆栈管理和发送内容 (opens new window) — Contentful 的 headles 内容平台支持使用您喜欢的框架和技术构建。Jamstack、SPA、静态网站 — 只要你能想到的,Contentful 都支持它。访问我们的指南、视频和教程,立即开始构建。

自 2015 年 CSS3 以来有哪些新功能? (opens new window) — CSS3 为 CSS 向前迈出了巨大的一步。但是从那以后 CSS 发生了怎样的变化?

我们没有认真对待可访问性的三种情况 (opens new window) — 涵盖了网页设计中可访问性的观点,这些观点可以帮助我们弥合用户和设计师/开发人员之间的 “巨大鸿沟”。

DevTools 有什么新功能? (opens new window) — 对 Chrome、Edge、Safari 和 Firefox 中开发人员工具的最新更改和新增功能进行了不错的介绍。

# ⚡️ 快览:

# 📙 教程、文章 & 意见

比较 CSS 的特性 (opens new window) — 当谈到 CSS 特性时,你如何选择两个类似的选择器?这篇文章深入探讨了这一点。

这是我不知道的关于 :where() 的内容 (opens new window) — Manuel 概述了 where() 伪类可能比最初想象的更有用。

尝试为软件团队构建的快速、直观的项目管理 (opens new window) — Shortcut 是为开发人员构建的快速直观的项目管理。取悦 Scrum 之神并立即尝试吧。

2022 年前端预测 (opens new window) — 对今年我们可能会看到的内容的思考,包括:“回归微前端、函数式 JavaScript 以及我们所知道的 Jamstack 的消亡”。

沿 SVG 路径为任何内容设置动画 (opens new window) — 如何使用 SVG 路径和 getPointAtLength() 函数来创建创意动画。

上下文感知 Web 组件比您想象的要容易 (opens new window) — 查看可用于 Web 组件的四个生命周期回调。

使用 Web Worker 提高性能:基本知识 (opens new window) — 通过 Web Worker 介绍 JavaScript 中多线程的基本概念。

少写点 (opens new window) — 作为开发人员,我们喜欢添加我们的工具/库,但这通常意味着使应用程序会超出其实际需要的内容,并使其速度变得比可能要慢。

URL 的尾部斜杠:有争议或已解决? (opens new window)

为什么现在对 Web3 感到兴奋还为时过早 (opens new window)

“当我们关闭 AMP 时发生了什么” (opens new window)

Flexbox 的工作原理 (opens new window)

# 🔧 代码、工具和资源

mo.js 1.3:用于 Web 的动态图形工具带 (opens new window) — 使用声明式 API 来完全控制动画。查看 入门教程 (opens new window),了解它是如何从代码 POV 工作的。

mmmotif:用于 3D 类同构模式的 SVG 生成器 (opens new window) — Sébastien Noël 的另一个工具(我们之前在这里介绍过其他一些工具)。它可以生成具有 3D 感觉的 SVG 形状图案,然后您可以将其保存或复制为 SVG。

使用 Buildkite 的测试分析识别、跟踪和问题修复的测试 ✅ (opens new window)

metaSEO:为任何网页快速生成 Meta 标签 (opens new window) — 例如,包括 OpenGraph 和 Twitter 卡片数据,用于在 Twitter 和 Facebook 上直观地表示页面。

DevToys:一个原生 Windows 应用程序,是开发人员的瑞士军刀 (opens new window) — 是一个包括了许多离线工作的内置实用程序,包括格式化和转换 JSON、文本差异、测试 RegExp、编码器/解码器、图像压缩等等。

Colourpalette:为您的 CSS 提供美丽色彩的画廊 (opens new window) — 这是一个非常简单的项目,但它之所以脱颖而出,仅仅是因为它是由一位 11 岁的开发人员构建的。很高兴看到这么年轻的人在网络上构建东西!

PostSrc 组件:50 多个 Tailwind CSS 组件 (opens new window)

rasterizeHTML.js:将 HTML 渲染到 HTML 画布上 (opens new window)