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 项目组时使用基线对齐
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以及它们可以派上用场的地方。
4.NodeGUI:使用 Node.js 构建本机跨平台桌面应用程序— 与依赖 Web 视图和 HTML 的 Electron 不同,NodeGui 使用基于 Qt 的方法。本周的0.58.0 版本是第一个基于 Qt 6 并提供高 DPI 支持的稳定版本。
5.Strudel REPL:浏览器中的实时 JavaScript 音乐— 这很有趣。这是一个小型在线沙盒,用于将用 JavaScript 编写的小型音乐实验组合在一起。使用右上角的“随机播放”按钮,直到找到您喜欢的声音
6.构建一个窃取所有内容的 Chrome 扩展程序—— Building Browser Extensions的作者 Matt证明尽管有 Manifest v3,但是仍然有很多不安全的浏览器扩展。当然,要意识到这一点,不要真的去做
mattfrisbie.substack.com/p/spy-chrom…
7.RxDB 14.1 -离线优先、用于 JS 应用程序的响应式数据库
动画相关
1.tsParticles: Particles, Confetti and Fireworks for Your Pages — 创建可自定义的粒子相关效果以在 Web 上使用。使用常规 2D 画布以获得广泛支持。
tsParticles | JavaScript Particles, Confetti and Fireworks animations for your website