Frontend Focus #525

2022/2/16

使用 CSS Clamp 的现代流体排版 (opens new window) — 探索流体排版原理、用例、使用 CSS clamp() 实现一个交互式流体排版计算器。

Parcel CSS:用 Rust 编写的新 CSS 解析器、编译器和压缩器 (opens new window) — 延续用其他语言编写 JS 基础架构的方式,Parcel 捆绑器有一个用 Rust 编写的新 CSS 编译器和压缩器。 Parcel 2.2 (opens new window) 刚刚发布并支持一个新的实验性 CSS 转换器插件。

我们如何预测 Covid19 大流行不断变化的形态? 🦠📊 (opens new window) — 蒙纳士公共卫生与预防医学学院的流行病学建模负责人和开发人员解释了他们如何提取数据来生成模型。

使用 SVG 和 CSS 构建 UI 组件 (opens new window) — 这里有很多很棒的例子来介绍如何在 SVG 的帮助下创建用户界面组件。

2021 年最热门的前端工具是什么? (opens new window) — Louis Lazaris 写了一份报告,回顾了 2021 年以来一些最受欢迎和值得注意的前端工具和资源。这里有 50 多种工具可供查看(图标、按钮、代码生成器、方便的库等),你一定会找到一些有价值的东西。

# ⚡️ 快览:

# 📙 教程、文章 & 意见

▶  CSS 级联层:新的 @layer 和 layer() CSS 概述 (opens new window) — 在当前的 Safari 技术预览版中,级联层功能正在开发,它们将出现在 Chromium 99(Canary)和 Firefox 97(Nightly)中。这个视频展示了它们的内容以及如何使用它们。这里有一个支持浏览器的演示 (opens new window)

用 Umbrella JS (8kb) 替换 jQuery (110kb) (opens new window) — 这里有一个小案例,着眼于用明显更小的 Umbrella JS 取代曾经占主导地位的 jQuery — 它具有类似的 API 和基于原型的插件系统。代码示例和视频也在这里。

2021 年开发人员搜索的前五个 Angular 示例 (opens new window) — 由 The Kendo UI 团队提供的带有代码的 5 个实时演示,其中显示了搜索次数最多的 Angular 示例的前五个。

使用 Navigation Timing API 测量 Web 性能 (opens new window) — 探索 Navigation Timing Web API (opens new window) — 一种以编程方式收集和测量 Web 应用程序关键性能指标的强大工具。

网站性能地球 (opens new window) — 从生态意识的角度来看性能。

编写更好的 CSS (opens new window) — 关于如何使用新的特性编写更好的 CSS 的合理建议,例如 :is:where 伪类函数、逻辑属性和值、clamp、gaps 和纵横比。

可选的链接运算符、“现代”浏览器 和 我的妈妈 (opens new window) — 一些不受支持的 JavaScript 语法导致整个网站在两个单独的硬件设备上无法访问。本篇讲述有关设备过时、可访问性和渐进增强的故事。

将 GitHub 页面变成渐进式 Web 应用程序 (opens new window)

▶  Flexbox 还是 Grid — 如何抉择? (opens new window)

# 🔧 代码、工具和资源

Clay.css:一个 CSS 实用程序类和 Sass Mixin,用于向组件添加 “Claymorphism” 样式 (opens new window) — 生成仅适用于某些设计的独特外观。这些样式可以通过 CSS 自定义属性轻松自定义。

Vanilla List: Vanilla JavaScript 插件目录 (opens new window) — 主要面向有用的前端 Web 控件和 UI 元素。请注意,插件本身可能有多个依赖项 — 而不是像 jQuery、React 等。

响应式查看器:测试响应式设计的 Chrome 扩展 (opens new window) — 类似于现在浏览器的 DevTools 中的功能,但它可以通过同步滚动一次查看多个屏幕。

CSS 指纹:学习使用 CSS 跟踪网站访问者信息的资源 (opens new window) — 解释了一些在纯 CSS 跟踪中出现的技术。您可以查看自己的指纹,或者只是查看该 存储库 (opens new window)

Two.js: 与渲染器无关的 2D 绘图库 (opens new window) — 该库由图形设计师构建,专注于矢量形状和动态图形,特别是基于场景图构建的。

Alwane:从任何网站提取颜色 (opens new window) — 粘贴任何网站的 URL 或使用现有的 CSS 代码生成各种调色板,您可以将其视为 CSS 或 SCSS。