![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
#sora
Levix
前端打杂
|
Null
获得徽章 16
Google 宣布专为中国开发者服务的 Chrome for Developers 现已在 .cn 域名上线，让在中国的开发者更容易地访问相关内容。所有内容都在 .cn 域名下进行镜像，并提供所有支持的语言版本。
在这里，可以找到针对中国的 Chrome 开发者资源：
developer.chrome.google.cn 。通过这个资源，开发者可以了解最新的 Chrome 稳定版和测试版的发布信息，发现 Chrome DevTools、浏览器扩展等丰富的文档资料。
此外，Google 还同时在中国推出了 web.dev 网站，以满足本地开发者对前沿技术资源的需求，访问地址为web.developers.google.cn。
这一举措是在 2023 年上海的 I/O Connect 事件中与中国开发者亲密互动后做出的决策。Google 希望这能够成为更好地支持中国开发者的一个良好开始。
在这里，可以找到针对中国的 Chrome 开发者资源：
developer.chrome.google.cn 。通过这个资源，开发者可以了解最新的 Chrome 稳定版和测试版的发布信息，发现 Chrome DevTools、浏览器扩展等丰富的文档资料。此外，Google 还同时在中国推出了 web.dev 网站，以满足本地开发者对前沿技术资源的需求，访问地址为
web.developers.google.cn。这一举措是在 2023 年上海的 I/O Connect 事件中与中国开发者亲密互动后做出的决策。Google 希望这能够成为更好地支持中国开发者的一个良好开始。
展开
21
38
《JavaScript Sets 即将引入并集、交集、差集等功能》
目前，JavaScript 的 Set 对象已可执行基本操作，如创建、添加、删除和检测成员。但对于进行集合运算，比如合并（union）、交集（intersection）和差集（difference）操作，ES2015 规范的 Set 对象还不支持。TC39 委员会（负责 ECMAScript 规范的开发）已经在这方面取得了进展，一些浏览器实现了相关功能。
以下是新增加的几个 Set 方法及其意义：
1. union ：创建两个集合所有元素的合集。
2. intersection ：创建两个集合中共有元素的交集。
3. difference ：创建在第一个集合中但不在第二个集合中的元素集。
4. symmetricDifference ：创建仅存在于两个集合之一中的元素集。
5. isSubsetOf ：判断一个集合是否为另一个集合的子集。
6. isSupersetOf ：判断一个集合是否为另一个集合的超集。
7. isDisjointFrom ：判断两个集合是否无交集。
目前，Safari 17 和 Chrome 122 已经支持这些新方法，Edge 也即将支持，Firefox Nightly 在标记后也支持了。
对于旧 JavaScript 引擎，可以使用 polyfills 来升级到符合规范的这些新功能。例如，core-js 或 es-shims 项目提供的独立功能包。
#前端 #新特性 #TC39
目前，JavaScript 的 Set 对象已可执行基本操作，如创建、添加、删除和检测成员。但对于进行集合运算，比如合并（union）、交集（intersection）和差集（difference）操作，ES2015 规范的 Set 对象还不支持。TC39 委员会（负责 ECMAScript 规范的开发）已经在这方面取得了进展，一些浏览器实现了相关功能。
以下是新增加的几个 Set 方法及其意义：
1. union ：创建两个集合所有元素的合集。
2. intersection ：创建两个集合中共有元素的交集。
3. difference ：创建在第一个集合中但不在第二个集合中的元素集。
4. symmetricDifference ：创建仅存在于两个集合之一中的元素集。
5. isSubsetOf ：判断一个集合是否为另一个集合的子集。
6. isSupersetOf ：判断一个集合是否为另一个集合的超集。
7. isDisjointFrom ：判断两个集合是否无交集。
目前，Safari 17 和 Chrome 122 已经支持这些新方法，Edge 也即将支持，Firefox Nightly 在标记后也支持了。
对于旧 JavaScript 引擎，可以使用 polyfills 来升级到符合规范的这些新功能。例如，core-js 或 es-shims 项目提供的独立功能包。
#前端 #新特性 #TC39
展开
1
4
Interaction to Next Paint（INP）将在 3 月 12 日成为核心 Web 指标（Core Web Vital）
文章内容：
- INP 的引入：INP 将在 3 月 12 日正式成为核心 Web 指标，并将取代首次输入延迟（FID）。Web Vitals 计划提供关键指标以帮助开发者衡量Web用户体验的重要方面，随着时间的发展，FID 不足以完全表达 Web 互动性，Chrome 团队于 2022 年 5 月引入了实验性指标 INP。去年 INP 成为一项待决指标，并宣布将在 2024 年 3 月晋升为稳定状态。
- 如何准备：首先，需要确保网站的 INP 在所有页面加载的第 75 百分位数中表现良好。可以使用 PageSpeed Insights（其中包含来自 Chrome 用户体验报告（CrUX）的数据）来查看网站在 INP 上的表现。如果已经与真实用户监测（RUM）提供商合作，考虑询问他们对 INP 的支持。如果网站的 INP 需要改进，提供了一系列资源和引导来优化 INP。
- INP 转变影响：FID 将不再是核心 Web 指标，并将官方弃用，并从程序中移除。在 Google 的各种工具中，FID 的信息将被移除并替换为 INP 的相关信息。PageSpeed Insights 和 CrUX 将提供 6 个月的弃用期，给开发者更新代码的机会。
- 未来的道路：过去两年来，INP 被纳入核心 Web 指标的计划已经仔细规划，这一步将推动 Web 互动性的提升。随着 INP 将成为核心 Web 指标的日期临近，开发者应该利用这个时间来理解和优化 INP 性能。
#前端 #性能 #INP
web.dev
文章内容：
- INP 的引入：INP 将在 3 月 12 日正式成为核心 Web 指标，并将取代首次输入延迟（FID）。Web Vitals 计划提供关键指标以帮助开发者衡量Web用户体验的重要方面，随着时间的发展，FID 不足以完全表达 Web 互动性，Chrome 团队于 2022 年 5 月引入了实验性指标 INP。去年 INP 成为一项待决指标，并宣布将在 2024 年 3 月晋升为稳定状态。
- 如何准备：首先，需要确保网站的 INP 在所有页面加载的第 75 百分位数中表现良好。可以使用 PageSpeed Insights（其中包含来自 Chrome 用户体验报告（CrUX）的数据）来查看网站在 INP 上的表现。如果已经与真实用户监测（RUM）提供商合作，考虑询问他们对 INP 的支持。如果网站的 INP 需要改进，提供了一系列资源和引导来优化 INP。
- INP 转变影响：FID 将不再是核心 Web 指标，并将官方弃用，并从程序中移除。在 Google 的各种工具中，FID 的信息将被移除并替换为 INP 的相关信息。PageSpeed Insights 和 CrUX 将提供 6 个月的弃用期，给开发者更新代码的机会。
- 未来的道路：过去两年来，INP 被纳入核心 Web 指标的计划已经仔细规划，这一步将推动 Web 互动性的提升。随着 INP 将成为核心 Web 指标的日期临近，开发者应该利用这个时间来理解和优化 INP 性能。
#前端 #性能 #INP
web.dev
展开
1
11
赞了这篇文章
Vite 5.1 版本的发布带来了许多新特性、性能提升和改进。主要更新内容包括：
1. Vite Runtime API：Vite 5.1 引入了一个实验性的新功能 Vite 运行时 API ，它允许通过 Vite 插件先处理任意代码后再执行。它与 server.ssrLoadModule 不同，因为运行时实现与服务器解耦。这使得库和框架作者能实现他们自己的通信层，用于服务器和运行时之间的通信。此新 API 旨在替代 Vite 当前的 SSR 原语，一旦稳定下来。
2. 性能改进：Vite 在每个发布版本中都在提升性能。对于加载 10K 模块的测试显示 Vite 5.1 在性能上又一次提升。
3. 支持`.css?url`：现在稳定并正确地支持将 CSS 文件作为 URL 导入。
4. build.assetsInlineLimit 支持回调：用户现在可以提供返回布尔值的回调，以选择性地调整特定资产是否内联。如果返回 undefined ，则应用默认逻辑。
5. 改进循环引入下的 HMR：Vite 5.0 中循环引入的接受模块总是触发整页重新加载，即使在客户端可以正常处理。现在这种局限性放宽了，HMR 可以应用而无需整页重载。
6. 支持`ssr.external: true`：这是一个新选项，可以用来外部化所有 SSR 包，包括链接包在内。
7. 预览服务器暴露 close 方法：预览服务器现在暴露了一个 close 方法，用来正确地关闭服务器，包括所有打开的套接字连接。
8. 在线程中运行 CSS 预处理器：Vite 现在支持在线程内运行 CSS 预处理器，可以通过`css.preprocessorMaxWorkers: true`启用。
9. 新选项用于改善服务器冷启动：可以设置`optimizeDeps.holdUntilCrawlEnd: false`来采用新的依赖优化策略，可能对大型项目有所帮助。
10. 更快的解析速度与缓存检查：`fs.cachedChecks`优化现在默认启用。在 Windows 上，`tryFsResolve`的速度提升了大约 14 倍。
11. 内部性能改进：开发服务器实现了数个性能增强。
1. Vite Runtime API：Vite 5.1 引入了一个实验性的新功能 Vite 运行时 API ，它允许通过 Vite 插件先处理任意代码后再执行。它与 server.ssrLoadModule 不同，因为运行时实现与服务器解耦。这使得库和框架作者能实现他们自己的通信层，用于服务器和运行时之间的通信。此新 API 旨在替代 Vite 当前的 SSR 原语，一旦稳定下来。
2. 性能改进：Vite 在每个发布版本中都在提升性能。对于加载 10K 模块的测试显示 Vite 5.1 在性能上又一次提升。
3. 支持`.css?url`：现在稳定并正确地支持将 CSS 文件作为 URL 导入。
4. build.assetsInlineLimit 支持回调：用户现在可以提供返回布尔值的回调，以选择性地调整特定资产是否内联。如果返回 undefined ，则应用默认逻辑。
5. 改进循环引入下的 HMR：Vite 5.0 中循环引入的接受模块总是触发整页重新加载，即使在客户端可以正常处理。现在这种局限性放宽了，HMR 可以应用而无需整页重载。
6. 支持`ssr.external: true`：这是一个新选项，可以用来外部化所有 SSR 包，包括链接包在内。
7. 预览服务器暴露 close 方法：预览服务器现在暴露了一个 close 方法，用来正确地关闭服务器，包括所有打开的套接字连接。
8. 在线程中运行 CSS 预处理器：Vite 现在支持在线程内运行 CSS 预处理器，可以通过`css.preprocessorMaxWorkers: true`启用。
9. 新选项用于改善服务器冷启动：可以设置`optimizeDeps.holdUntilCrawlEnd: false`来采用新的依赖优化策略，可能对大型项目有所帮助。
10. 更快的解析速度与缓存检查：`fs.cachedChecks`优化现在默认启用。在 Windows 上，`tryFsResolve`的速度提升了大约 14 倍。
11. 内部性能改进：开发服务器实现了数个性能增强。
展开
评论
3
文章主要讨论了 2023 年 AI 视频领域的崛起以及对 2024 年的一些展望。2023 年有重大的进步，见证了数十种视频生成工具问世，全球已有数百万用户使用这些工具通过文字或图像提示制作短视频。但这些工具仍存在局限性，只能生成 3 到 4 秒的视频，视频质量参差不齐，而像保持角色风格的一致性等问题还未得到解决。即使如此，过去一年在视频生成技术上的进步显示出我们正在一场大变革的初期阶段，衍生技术如图像转视频、视频转视频也开始流行。
文章也提到了一些疑问点，如大型科技公司如谷歌、Meta 等的选择。这些公司发布了一些视频模型的信息，但并未将它们公开或者对公众开放。这可能是由于大公司的决策和行动速度通常较慢，以及有法律、安全和版权相关的问题。
对于未来的展望，虽然 AI 视频制作有许多需要改进的地方，例如生成的视频往往需要经过多次的修改才能达到专业级别，但领域内的许多公司已在解决这些问题。控制——即是否能像描述的那样控制场面，和时间连贯性——如何确保在视频的不同帧之间角色、物体和背景的一致性，是当前面临的侧重问题。
进一步探讨，文章也提出了一些尚未解答的问题，例如目前的扩散架构是否适合视频制作、高质量的训练数据将从何而来、如何在不同平台或模型间区分开用例等。这些问题将会影响到未来的 AI 视频技术的进一步发展。
#AI
quail.ink
文章也提到了一些疑问点，如大型科技公司如谷歌、Meta 等的选择。这些公司发布了一些视频模型的信息，但并未将它们公开或者对公众开放。这可能是由于大公司的决策和行动速度通常较慢，以及有法律、安全和版权相关的问题。
对于未来的展望，虽然 AI 视频制作有许多需要改进的地方，例如生成的视频往往需要经过多次的修改才能达到专业级别，但领域内的许多公司已在解决这些问题。控制——即是否能像描述的那样控制场面，和时间连贯性——如何确保在视频的不同帧之间角色、物体和背景的一致性，是当前面临的侧重问题。
进一步探讨，文章也提出了一些尚未解答的问题，例如目前的扩散架构是否适合视频制作、高质量的训练数据将从何而来、如何在不同平台或模型间区分开用例等。这些问题将会影响到未来的 AI 视频技术的进一步发展。
#AI
quail.ink
展开
评论
点赞
Interop 2023 成功地聚集了浏览器厂商共同改善 Web 平台，专注于识别和改善浏览器引擎之间差异对用户和 Web 开发人员造成影响的关键领域。这个项目是基于通用标准的互操作性构建的，旨在确保 Web 保持开放和互操作，这对于 Mozilla 的使命和 Web 愿景至关重要 。
2023 年的项目涵盖了如新的 :has() 选择器和 Web 编解码器等高关注功能，以及如指针事件这样历史上互操作性差的领域。所有参与的浏览器在年末的预发布版本中的得分超过了 97%，整体互操作性得分从年初的 59% 增长到了现在的 95%，显著提升了 Web 平台的一致性和可靠性 。
随着 Interop 2023 的成功，Interop 2024 项目已经宣布，将继续关注 Web 平台上我们认为可以对用户和 Web 开发人员产生最大积极影响的新焦点领域。2024 年的新焦点领域包括 Popover API 和 CSS 嵌套等，这些都是基于 Web 开发人员反馈，我们希望从一开始就在多个实现中启动这些新功能，并达到高互操作性 。
这些努力不仅促进了浏览器之间的一致性，还为 Web 开发人员和用户提供了更无缝的体验，确保了他们在任何浏览器中都能获得可靠的 Web 行为。通过继续关注这些关键领域和调查，Interop 项目正在帮助推动一个更加健康、开放的 Web。
#前端
wpt.fyi
2023 年的项目涵盖了如新的 :has() 选择器和 Web 编解码器等高关注功能，以及如指针事件这样历史上互操作性差的领域。所有参与的浏览器在年末的预发布版本中的得分超过了 97%，整体互操作性得分从年初的 59% 增长到了现在的 95%，显著提升了 Web 平台的一致性和可靠性 。
随着 Interop 2023 的成功，Interop 2024 项目已经宣布，将继续关注 Web 平台上我们认为可以对用户和 Web 开发人员产生最大积极影响的新焦点领域。2024 年的新焦点领域包括 Popover API 和 CSS 嵌套等，这些都是基于 Web 开发人员反馈，我们希望从一开始就在多个实现中启动这些新功能，并达到高互操作性 。
这些努力不仅促进了浏览器之间的一致性，还为 Web 开发人员和用户提供了更无缝的体验，确保了他们在任何浏览器中都能获得可靠的 Web 行为。通过继续关注这些关键领域和调查，Interop 项目正在帮助推动一个更加健康、开放的 Web。
#前端
wpt.fyi
展开
评论
3
文章主要探讨了在使用 React 进行服务端渲染时可能遇到的“重渲染”问题，特别是在生产环境下可能会出现的一些意料之外的行为。作者通过分享个人经历，揭示了对 React 服务端渲染过程中的一些误解，并提供了避免这些问题的解决方案。
关键点列表：
1. 💡 开发环境下一切正常，但生产环境中博客底部出现了意外行为，暗示了 React 组件在错误的位置渲染的问题。
2. 🌐 作者发现自己对 React 在服务端渲染环境中的工作方式有根本性的误解，这是许多 React 开发者共有的误区。
3. 🚀 文章举例说明了可能导致渲染问题的代码，指出了许多开发者可能忽视的问题点。
4. 📚 介绍了 Gatsby 和 Next.js 等框架与传统客户端 React 应用的区别，以及服务端渲染（SSR）和客户端渲染的概念。
5. 🎯 提到了静态站点生成（SSG）的概念，解释了它是如何在构建时生成 HTML 文档，以加快 React 应用的加载速度。
6. 🔄 探讨了“水合”（hydration）过程，即客户端 JavaScript 如何构建页面并与服务端渲染的 HTML 文档进行比较。
7. ❗️ 强调了在服务端渲染和客户端“水合”过程中保持 DOM 结构一致性的重要性，以避免渲染不匹配的问题。
8. 🛠 提供了一种解决方案，通过使用 `useEffect` 钩子和 `hasMounted` 状态来管理动态内容的渲染，确保在客户端渲染完成后正确显示内容。
9. 📈 分享了“两阶段渲染”（two-pass rendering）的概念，以及如何通过客户端状态管理来处理动态数据。
#前端 #React #服务端组件
www.joshwcomeau.com
中文版：
sorrycc.com
关键点列表：
1. 💡 开发环境下一切正常，但生产环境中博客底部出现了意外行为，暗示了 React 组件在错误的位置渲染的问题。
2. 🌐 作者发现自己对 React 在服务端渲染环境中的工作方式有根本性的误解，这是许多 React 开发者共有的误区。
3. 🚀 文章举例说明了可能导致渲染问题的代码，指出了许多开发者可能忽视的问题点。
4. 📚 介绍了 Gatsby 和 Next.js 等框架与传统客户端 React 应用的区别，以及服务端渲染（SSR）和客户端渲染的概念。
5. 🎯 提到了静态站点生成（SSG）的概念，解释了它是如何在构建时生成 HTML 文档，以加快 React 应用的加载速度。
6. 🔄 探讨了“水合”（hydration）过程，即客户端 JavaScript 如何构建页面并与服务端渲染的 HTML 文档进行比较。
7. ❗️ 强调了在服务端渲染和客户端“水合”过程中保持 DOM 结构一致性的重要性，以避免渲染不匹配的问题。
8. 🛠 提供了一种解决方案，通过使用 `useEffect` 钩子和 `hasMounted` 状态来管理动态内容的渲染，确保在客户端渲染完成后正确显示内容。
9. 📈 分享了“两阶段渲染”（two-pass rendering）的概念，以及如何通过客户端状态管理来处理动态数据。
#前端 #React #服务端组件
www.joshwcomeau.com中文版：
sorrycc.com
展开
评论
5
接上一条，目测 iOS 设备浏览器的 navigation 又要做适配了。简介： 虽然苹果在欧盟的新规则允许像 Firefox 这样的浏览器在 iOS 上使用自己的引擎，但 Mozilla 表示相当失望，认为维护针对欧盟特定应用的独立浏览器实现带来了挑战。
关键要点：
1. 🌍 欧盟特定的浏览器引擎规则： 苹果在欧盟的改变意味着浏览器可以在 iOS 上使用自己的引擎，而不是被迫使用 WebKit，即苹果的引擎。这为 Blink（Google Chrome、Microsoft Edge）和 Gecko（Firefox）等引擎提供了机会。
2.
Mozilla 的失望： Mozilla 发言人 Damiano DeMonte 对苹果将新的 BrowserEngineKit 限制在仅欧盟特定应用的计划表示失望，这为独立浏览器维护两个不同版本带来了负担。3. 🚧 技术和竞争挑战： Mozilla 认为，苹果仅在欧盟实施这一方法使浏览器难以管理不同版本，并将此视为苹果在 iOS 上维持对真正浏览器竞争的障碍。
4.
对第三方浏览器的影响： 尽管新规则允许其他引擎，Mozilla 表示，这将使第三方浏览器的开发和维护更加困难，尤其是由于地域限制。5.
更广泛的开发者批评： 其他开发者，包括 Epic 首席执行官 Tim Sweeney 和 Spotify，也对苹果的新条款进行了批评，这些条款扩展到了游戏流媒体应用、替代应用商店和旁载，有些人称其为“恐怖展示”或“闹剧”。6. 📜 等待欧盟委员会的批准： 苹果的这些新指南仍在等待欧盟委员会的批准。
#浏览器
www.theverge.com
展开
评论
5
简介： 为了遵守欧盟的数字市场法案（DMA），苹果公司宣布了针对iOS、Safari和App Store的重大变更，包括新增API、替代应用分发和支付选项，以及为了抵御增加的隐私和安全风险而增加的用户保护措施。
关键要点：
1. 🍏 符合DMA规定： 苹果的更新旨在与欧盟的数字市场法案保持一致，引入超过600个新的API，以及替代应用分发和支付处理选项，并增强了应用分析功能。
2. 🔒 新的用户保护措施： 尽管提供了新选项，苹果强调这些变化可能导致恶意软件和诈骗等风险增加。他们计划通过诸如iOS应用公证和替代支付方式的披露等措施来减轻这些风险。
3. iOS 17.4 Beta测试： 开发者可以开始在iOS 17.4 beta中测试这些新功能，预计2024年3月在27个欧盟国家全面实施。
4. 🌍 全球开发者的好处： 除了针对欧盟的变更外，苹果还宣布了新的流媒体游戏选项和关于应用参与度和使用情况的详细报告，这些都将在全球范围内提供。
5. 💳 接触式支付的变化： 更新包括用于NFC技术的新API，允许第三方接触式支付应用在欧盟中使用。
6. 🚨 潜在风险和限制： 苹果提醒，这些变化可能导致用户体验直观性下降，并可能使用户暴露于有害内容。他们还指出，一些App Store功能，如家庭购买共享，将不兼容外部下载的应用。
7. 🌐 Safari的默认浏览器选择： 一个新的选择屏幕将提示欧盟用户在iOS 17.4或更高版本中首次打开Safari时选择一个默认网页浏览器，反映了DMA的要求。
8. 🏦 欧盟应用的新商业条款： 开发者可以选择新的商业条款，支持替代分发和支付处理，包括修订后的费用结构和费用计算工具。
9. 📊 App Store的变化： 苹果将引入披露，以告知用户使用非App Store支付处理的风险，以及对于此类交易的退款和客户支持功能的限制。
10.
苹果的持续承诺： 在遵守DMA的同时，苹果旨在维持iOS用户体验的质量，强调他们继续保护用户隐私和安全的努力。
www.apple.com
关键要点：
1. 🍏 符合DMA规定： 苹果的更新旨在与欧盟的数字市场法案保持一致，引入超过600个新的API，以及替代应用分发和支付处理选项，并增强了应用分析功能。
2. 🔒 新的用户保护措施： 尽管提供了新选项，苹果强调这些变化可能导致恶意软件和诈骗等风险增加。他们计划通过诸如iOS应用公证和替代支付方式的披露等措施来减轻这些风险。
3.
iOS 17.4 Beta测试： 开发者可以开始在iOS 17.4 beta中测试这些新功能，预计2024年3月在27个欧盟国家全面实施。4. 🌍 全球开发者的好处： 除了针对欧盟的变更外，苹果还宣布了新的流媒体游戏选项和关于应用参与度和使用情况的详细报告，这些都将在全球范围内提供。
5. 💳 接触式支付的变化： 更新包括用于NFC技术的新API，允许第三方接触式支付应用在欧盟中使用。
6. 🚨 潜在风险和限制： 苹果提醒，这些变化可能导致用户体验直观性下降，并可能使用户暴露于有害内容。他们还指出，一些App Store功能，如家庭购买共享，将不兼容外部下载的应用。
7. 🌐 Safari的默认浏览器选择： 一个新的选择屏幕将提示欧盟用户在iOS 17.4或更高版本中首次打开Safari时选择一个默认网页浏览器，反映了DMA的要求。
8. 🏦 欧盟应用的新商业条款： 开发者可以选择新的商业条款，支持替代分发和支付处理，包括修订后的费用结构和费用计算工具。
9. 📊 App Store的变化： 苹果将引入披露，以告知用户使用非App Store支付处理的风险，以及对于此类交易的退款和客户支持功能的限制。
10.
苹果的持续承诺： 在遵守DMA的同时，苹果旨在维持iOS用户体验的质量，强调他们继续保护用户隐私和安全的努力。www.apple.com
展开
评论
4
《编程列车（The Coding Train）》是由丹尼尔·希夫曼（Daniel Shiffman）创办的一个专注于创新编程学习的社区。这个社区提供一系列的对新手友好的教程和项目，旨在帮助初学者和对编程感到好奇的人开始他们的编程之旅。
网站主要内容包括：
1. 轨道（Tracks）：这是一系列遵循特定课程序列的视频教程集合，比如包含 35 个视频的 "编程！使用 p5.js"（Code! Programming with p5.js）。
2. 挑战（Challenges）：丹尼尔用 p5.js 和 Processing 解决各种编程挑战，这些挑战的主题包括算法艺术、机器学习、仿真、生成诗歌等。
3. 乘客展示（Passenger Showcase）：这是一个鼓励社区成员分享他们的项目和创作的平台，你可以在这里看到其他人的作品，也可以提交自己的作品。
除此之外，网站还提供了一些学习资源如入门指南、常见问题解答等，同时也支持社区的运行，你可以通过成为 YouTube 会员、Patreon 支持者或 GitHub 赞助者等方式来支持编程列车。
#Tools
thecodingtrain.com
网站主要内容包括：
1. 轨道（Tracks）：这是一系列遵循特定课程序列的视频教程集合，比如包含 35 个视频的 "编程！使用 p5.js"（Code! Programming with p5.js）。
2. 挑战（Challenges）：丹尼尔用 p5.js 和 Processing 解决各种编程挑战，这些挑战的主题包括算法艺术、机器学习、仿真、生成诗歌等。
3. 乘客展示（Passenger Showcase）：这是一个鼓励社区成员分享他们的项目和创作的平台，你可以在这里看到其他人的作品，也可以提交自己的作品。
除此之外，网站还提供了一些学习资源如入门指南、常见问题解答等，同时也支持社区的运行，你可以通过成为 YouTube 会员、Patreon 支持者或 GitHub 赞助者等方式来支持编程列车。
#Tools
thecodingtrain.com
展开
评论
4
Unlazy 是一个通用的占位图像懒加载库，使用本地浏览器 API，不受任何框架限制，支持 Vue、React、Solid、Svelte 和 Nuxt 等。
以下是一些主要特性：
1. 本地懒加载：使用 loading="lazy" 属性。仅支持现代浏览器。
2. 框架无关：可以和任何框架或无框架的环境配合工作。
3. 支持 BlurHash 和 ThumbHash：使用 BlurHash 和 ThumbHash 占位符实现即时加载。
4. 自动大小调整：自动计算 sizes 属性以实现最优性能。
5. SEO 友好：检测搜索引擎机器人并预加载所有图像。
6. 支持图像和图片标签：支持多种图像格式。和 picture 标签配合使用。
除此之外，Unlazy还支持在没有构建步骤的情况下通过 init 属性进行初始化。
#性能 #Tools #前端
unlazy.byjohann.dev
以下是一些主要特性：
1. 本地懒加载：使用 loading="lazy" 属性。仅支持现代浏览器。
2. 框架无关：可以和任何框架或无框架的环境配合工作。
3. 支持 BlurHash 和 ThumbHash：使用 BlurHash 和 ThumbHash 占位符实现即时加载。
4. 自动大小调整：自动计算 sizes 属性以实现最优性能。
5. SEO 友好：检测搜索引擎机器人并预加载所有图像。
6. 支持图像和图片标签：支持多种图像格式。和 picture 标签配合使用。
除此之外，Unlazy还支持在没有构建步骤的情况下通过 init 属性进行初始化。
#性能 #Tools #前端
unlazy.byjohann.dev
展开
评论
4