前端周刊第64期

快讯

• 🐦 Dan 神从 Meta 离职，但仍将作为独立三方开发者留在 React 团队 💙

文章

• 如何使用 Nextjs、React 和 GitHub Copilot 构建 GPT-3 应用程序 - GitHub 并不经常在其博客上写教程，这篇文章中他们推广现代面向 Copilot 的编程方式，提升我们的开发效率
• Hono + Htmx + Cloudflare - 一套可选的、全栈使用 JS 构建网站的技术栈
• 解构 YouTube 的“环境模式”功能 - 学习如何使用 HTML <cavans> 和 requestAnimationFrame 函数来创建 Youtube 是用的发光效果

• 有趣的 CSS 滚动驱动动画 - 滚动驱动动画在 Chrome 115 中发布，让我们有机会基于滚动而不是时间来动画元素，帮助我们创建一些有趣的交互效果
• 如何使用 CSS object-fit 和 object-position 属性 - 学习如何使用 CSS object-fit 来确定图片在给定空间中的适配效果，以及如何使用 object-position 来定位这些图片
• 简单创建 SVG 星形图（sparklines） - 只需一点 SVG，你就能轻松在浏览器中创建星形图，根本不需要借助任何 JavaScript

• ▶  DX 2023 - Stefan Judis: 前端开发者生态系统中的开发体验 - 半个小时的演讲内容涉及前端趋势、新工具和浏览器功能，询问我们是否都在忙着重新发明轮子，或者“昨天”建立的网站是否与那些处于前沿的网站一样好
• WebGPU: 未来的跨平台图像 API ? - 学习如何使用 WebGPU（使用 C++）为 Web 和特定平台构建应用程序
• JPEG XL 的兴起 - JPEG XL 是下一代图片压缩格式。WWDC23 上，苹果宣布了 Safari 浏览器的新功能列表中包含“JPEG XL”，这是 JPEG XL 的开发人员都没有预料到的

• 我们是如何通过 ‘name mangling’ 构架步骤，减小 VS Code 体积的 - VS Code 团队文章，讲述最近通过引入一个新的构建步骤的添加，最终减小了近 4MB 的打包体积
• [观点] 往日热炒的 Jamstack 技术栈是否要终结？ - 本周早些时候，Netflix 正式关闭了 The Jamstack Community Discord。作者就此事发表了一些自己的看法
• [观点]💛 好的代码就像一封写给下一个维护它的开发人员的情书 - 我们作品的美丽，不仅仅是由我们算法的优雅或代码的效率来判断，而是由其他人可以在我们的工作上能够获得的喜悦和轻松来判断

发布

• Bun 0.7 - 基于 JavascriptCore 的可选的 JS 运行时。这个版本中增加了 Vite 支持（实验性的）、Web Workers 支持，并支持在内存受限的环境中运行
• Astro 2.9 - “默认零 JS”框架。这个版本中增加了对视图转换（View Transitions）的实验性支持
• Neutralinojs v4.13.0 - 可移植的轻量级跨平台桌面应用程序开发框架。同类型框架还有 Electron、tauri
• Remix 1.19 - 现代全栈 JS 框架
• Node.js v20.5.0 (Current)")

资源

• 📘 简明 TypeScript 小书 - 免费、开源的 TypeScript 小书，旨在对 TypeScript 功能做全面而简洁的概述
• Tabler Icons: 超过 4550 的矢量图标库 - 你可以复制或下载 svg 或 png 来使用这些开源图标，也可以使用 @table/icons- React 这样的辅助库来直接将它们放入 React 应用中
• No CSS Club - 这个站点收集了完全不使用 CSS 网站集合。别指望有什么好看的东西，网页打开速度确实很快
• 易读性：排版是如何以影响阅读便利性的 - 这是一个关于排版的优秀资源，共有 7 章节的内容。非常值得一读，用来快速了解易读性、可读性和可用性

工具

• Arc 浏览器 - 一个新的基于 Chromium 的浏览器，经过一段时间的邀请后，终于发布了可供下载的 1.0 版本
• Twin 3.4 - 在 CSS-in-JS 库中使用 TailwindCSS 类
• JSPlayground - 一个新的基于 Web 的 JavaScript 沙盒工具
• Winded - 在不同视口尺寸下同时测试响应式设计的工具
• Praxis：一个 iOS 上浏览器 - 特色会禁止网页上任何 JavaScript 的运行（Block scripts on the web）😄

库

• React Tweet: 在 React 应用中嵌入推文的新方法 - 比官方更快、更小的内嵌推文的工具，并且支持 React 服务器组件和任何其他 React 框架
• Mapkick.js - 用一行 JavaScript 创建漂亮的交互式地图
• a11y-dialog 8.0: - 一个轻量的、用于创建可访问对话框窗口的 JS 库
• Spectacle 10 - 适用于开发者的网页 PPT 制作库。基于 React，能够实时演示代码。其他同类库还有 slidev、reveal.js 等
• Detect Scroll：一个快速，轻的 JS 模块，用于检测滚动活动 - 扩展了浏览器有限的滚动事件监听器，能够准确地检测两个轴上的方向和位置的变动

---

资料来源：JavaScript Weekly#649、Frontend Focus#603。