Frontend Focus #514

2022/1/25

深入了解 CSS 中的 object-fitbackground-size (opens new window) — 本文介绍了 object-fitbackground-size 的工作原理,讲述了什么时候使用、为什么使用,以及一些用例和建议。

Photoshop 的网页之旅 (opens new window) — 几年前,很难想象 Photoshop 这种复杂的软件可以在浏览器中直接运行,多亏了新的标准化网络技术,Adobe 已经可以将 Photoshop 的公开测试版在网页上运行。这不仅为 Adob​​e 带来了巨大的潜力,对于一些使用浏览器的人,影响也很大。

带示例的简单 Angular Data 栅格用法 (opens new window) — 您可以编写自定义的栅格数据,那如果这个栅格已经存在了,您为什么还需要手动定义呢。您可以了解一下如何简单地设置、绑定数据、分组、排序页面。亲自手动安装试一下吧,千万不要错过它。

现代 web 缓存中新的 Http 标准 — 通过 CDN 或者类似服务的静态缓存非常重要,尤其对于大型的站点。但是这类服务通常会特别复杂和混乱。这篇文章将会介绍这类服务改进后的新 Http 标准,以及你为什么应该关注。

Safari 15 中更新的 WebKit 功能 (opens new window) — 本文介绍了 Safari 15.1 版本中可使用的新功能,包括 aspect-ratio、CSS Grid Inspector、Workers 和 ServiceWorkers 中的 ES6 模块,以及 WebGL2 等。

# ⚡️ 快览:

# 📙 教程、文章 & 意见

防止有过度滚动行为的滚动条 (opens new window) — CSS 中的 overscroll-behavior 属性到底解决了什么问题,它是如何运作的,以及我们如何使用它。

构建一个多选项组件 (opens new window) — 讲述了如何构建一个响应式、自适应且易用的多选项组件,并且用户可以进行排序和过滤操作。

如何不去创建一个菜单式 Burger 按钮 (opens new window) — 在 HTML 里的一系列不良用法 — 从在线网页上找一个菜单按钮来看看。

为什么“过时” 的 jQuery 在 JavaScript 库中仍然占主导地位 (opens new window) — jQuery 是网络上运行时间最长、影响最大的 JavaScript 库之一。它是如何经受住时间的考验的?

“根据 BuiltWith 的数据,前 100 万个网站中有 78% 都在使用 jQuery。”

暗黑模式下的适配 (opens new window) — 本文阐述了 “深色模式” 和 “在深色背景上渲染的组件” 之间的区别。

构建一个可用的图片组件 (opens new window) — 一个从加载、压缩和响应速度上为 Next.js 框架做的优化图片的开箱即用解决方案,现在 Next.js 12 (opens new window) 中也支持了 AVIF

Shortcut 有助于简化和管理您的工作流程 (opens new window)

使用 Vanilla JavaScript 进行页面过滤搜索 (opens new window)

100 个字节的 CSS 可以让你的项目更简洁 (opens new window)

CSS Grid 中的可扩展部分 (opens new window)

# 🔧 代码、工具和资源

Huetone:使用 LCH 色彩空间提供可预览的调色板 (opens new window) — 作者对此有一个详细的介绍。

Box Shadow 生成器:可以生成 Box Shadow 的可视化工具 (opens new window) — 您可以选择预定义的 Box Shadow,同时也支持自定义。

适合团队的免费聊天平台和相关 API (opens new window) — 您可以使用 Stream 中的 Maker 帐户创建免费的企业级软件。

Blobity:升级你的光标体验 (opens new window) — 这个脚本可以让你用光标做各种想不到的事情,官网的演示是类似于 iPad OS 上的光标操作。请注意,它仅对开源项目免费。

图片压缩器:压缩和优化 JPEG 和 PNG 图像 (opens new window) — 这个工具可能会是压缩图片工具的另一个选择。它可以让您上传多张图片,并且有调整大小、转换和镜像的功能。


🍓 您是否使用过 Jamstack(一个基于 JavaScript 的标记架构堆栈的工具)?如果没有的话,我猜您可能会喜欢 Brian Rinaldi 的 JAMstacked,它每两周会更新一次,其中涵盖了崛起的 Jamstack 生态系统。以下是最新一期中分享的一些内容:

JAMstacked