Frontend Focus #528

2022/2/19

A-Frame 1.3: 构建 WebVR 体验的框架 (opens new window) — 用于构建虚拟现实体验的 Web 框架,可在 Vive、Rift、Quest 以及桌面和移动平台(包括浏览器)中运行(如此处的演示所示)。

iOS 15.4 Beta 建议 Apple 支持来自基于 Web 的应用程序的推送通知 (opens new window) — 看起来 Apple 正在努力将基于 Web 的通知引入 iOS — 这对于一系列基于 Web 的应用程序来说将是一个真正的巨大胜利。

关于软件艺术与实践的每周对话 (opens new window) — 12 多年来,The Stack Overflow 播客一直是开发人员的目的地。主持人 Ben Popper、Cassidy Williams 和 Ceora Ford 与令人难以置信的客人聊天,探讨在软件中工作意味着什么,以及代码如何重塑我们的世界。

如何在 2022 年使用 Favicon:满足大多数需求的六个文件 (opens new window) — “是时候重新考虑 [..] 现代浏览器的网站图标并停止图标生成器了”。高级建议:用 SVG 而不是 PNG,信任浏览器以缩小规模,放弃旧的格式。这是一个很好的现代网络网站图标指南。

“常青树” 并不意味着开箱即用 (opens new window) — 在一个自动更新无处不在的时代,“我们在创建网络体验时没有一个特定的设备、浏览器和人”。在考虑更广泛的网络平台方法时,请牢记这一点。

# ⚡️ 快览:

# 📙 教程、文章 & 意见

减少 Web 的足迹:优化社交媒体 (opens new window) — 看看我们可以做些什么来减少社交媒体嵌入和社交共享小部件对环境的影响 — 加上一些完全避免它们的策略。这些也是比较好的性能提示。

用 HTML 的 <dialog> 替换 JavaScript 对话框 (opens new window) — 如何用与 alert()confirm()prompt() 方法具有相同功能的 HTML 对话框元素替换 JavaScript 对话框。

Web 框架解决了什么:Vanilla 替代品 (opens new window) — 对如何直接使用 Web 平台作为框架提供的一些解决方案的替代方案的模式给出了一些建议。

纵横比太棒了 (opens new window)aspect-ratio 是一个不起眼的属性,但是它满足了 CSS 中期待已久的需求。

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

创建 SVG 网格 (opens new window) — 介绍如何使用 JavaScript 和 SVG 创建一些色彩丰富的生成式网格设计,然后为它们制作动画。

CSS 动画:初学者完整指南 (opens new window) — 对于刚开始使用 CSS 的人,这涵盖了 CSS 动画规范的所有部分,并为每个功能提供了交互式演示。

深入介绍 WordPress 块主题 (opens new window)

使用 JavaScript 防止平滑滚动 (opens new window)

演示 CSS from-font 的四个例子 (opens new window)

'是的,我可以连接到 CSS 中的数据库' (opens new window)

# 🔧 代码、工具和资源

Hotkey 2.0: 按下 ”Hotkey“ 时触发元素上的操作 (opens new window) — 使用 Hotkey,在你的元素上设置 data-hotkey 属性,你就可以得到键盘快捷键。 v2.0 (opens new window) 刚刚下架。如果它足够好用在 GitHub 上,那对我们来说就太好了!

lite-youtube: 更快地呈现 YouTube 嵌入的 Web 组件 (opens new window) — 这是 Paul Irish 的 lite-youtube-embed 的 Shadow DOM Web 组件版本,具有键盘特性和其他一些不错的功能。

将 Pinterest 的 iOS 构建迁移到自动缩放的 EC2 Mac (opens new window)

Tailwind 的 DevTools:在浏览器中重新进行设计和调试 (opens new window) — 不是免费工具,但如果您希望能够在页面上试验所有 Tailwind 类,可以考虑使用一下 — 不仅仅是在构建过程中编译的那些

CodeCaptcha.io:在小型编码挑战背后隐藏的网络链接 (opens new window) — 绝对是对验证码的独特看法。在访问链接之前,用户必须解决一个 1-3 行代码相关的任务。目前,只有 JavaScript。

Compress Images:在线压缩 WEBP、JPEG、PNG、AVIF 和 JXL 图像的快速工具 (opens new window)

ssspill:用于 “溢出” 风格 / 融化效果的 SVG 生成器 (opens new window)