web新技术周报(第二期)

210 阅读3分钟

web新技术周报

html与css相关

1.Lighthouse 10 中的新功能— Chrome 的网站审核工具 Lighthouse发布版本 10,引入了对网页性能评分方式的更改以及新的审核

developer.chrome.com/blog/lighth…

2.Chrome 110 中 DevTools 的新功能,包括记录器的更新、更好的语法突出显示等

developer.chrome.com/blog/new-in…

3.如何检查浏览器中的交互元素,这篇文章展示了两种方法

How to Inspect Interactions in the Browser

4.CSS 渐变阴影

Different Ways to Get CSS Gradient Shadows | CSS-Tricks - CSS-Tricks

5.iOS 和 iPadOS 上网络应用的网络推送——iOS 和 iPadOS 16.4 beta 1 支持主屏幕网络应用的网络推送、徽章 API、屏幕唤醒锁定 API 等。现在,Web 应用程序可以通过 Push API、Notifications API 和 Service Workers 协同工作向用户发送主屏幕推送通知

Web Push for Web Apps on iOS and iPadOS | WebKit

6.align-items: baseline; 使用first和last关键字的对齐现在可用于主要引擎。这意味着我们可以在对齐 flex 或 grid 项目组时使用基线对齐

Last baseline alignment

7.ScrollTrigger:让您的页面对滚动变化做出反应——根据当前滚动位置触发class。例如,当一个元素进入视口时,您可以将其淡入

GitHub - terwanerik/ScrollTrigger: Let your page react to scroll changes.

js相关

1.使用 Playwright 监控可能影响用户体验的第三方资源——虽然使用第三方资源对性能可能有不利影响,您应该尽可能自行托管您的资产,但有时依赖外部文件是不可避免的。这篇文章着眼于如何使用Playwright评估和监控此类资源

Using Playwright to Monitor Third-Party Resources That Could Impact User Experience | Checkly blog

2.刚刚发布的Firefox 110 for Android现在支持Tampermonkey,这是一个在您访问的网站上运行 JavaScript“用户脚本”的扩展

What's new in Firefox for Android | Firefox for Android Help

3.Well-Known Symbols in JavaScript — TC39 展示了 14 个Symbols api以及它们可以派上用场的地方。

Well-known Symbols

4.NodeGUI:使用 Node.js 构建本机跨平台桌面应用程序— 与依赖 Web 视图和 HTML 的 Electron 不同,NodeGui 使用基于 Qt 的方法。本周的0.58.0 版本是第一个基于 Qt 6 并提供高 DPI 支持的稳定版本。

GitHub - nodegui/nodegui: A library for building cross-platform native desktop applications with Node.js and CSS 🚀. React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org

5.Strudel REPL:浏览器中的实时 JavaScript 音乐— 这很有趣。这是一个小型在线沙盒,用于将用 JavaScript 编写的小型音乐实验组合在一起。使用右上角的“随机播放”按钮,直到找到您喜欢的声音

strudel.tidalcycles.org/

6.构建一个窃取所有内容的 Chrome 扩展程序—— Building Browser Extensions的作者 Matt证明尽管有 Manifest v3,但是仍然有很多不安全的浏览器扩展。当然,要意识到这一点,不要真的去做

mattfrisbie.substack.com/p/spy-chrom…

7.RxDB 14.1 -离线优先、用于 JS 应用程序的响应式数据库

github.com/pubkey/rxdb

动画相关

1.tsParticles: Particles, Confetti and Fireworks for Your Pages — 创建可自定义的粒子相关效果以在 Web 上使用。使用常规 2D 画布以获得广泛支持。

tsParticles | JavaScript Particles, Confetti and Fireworks animations for your website