奇舞周刊第 470 期：(10 月最新) 前端图形学实战：从零开发几何画板 (vue3 + vite 版)...

记得点击文章末尾的“ 阅读原文 ”查看哟~

下面先一起看下本期周刊 摘要 吧~

奇舞推荐

■ ■ ■

 (10 月最新) 前端图形学实战：从零开发几何画板 (vue3 + vite 版)

昨天我们发表了 react + canvas 搭建简易画板，今天这篇文章你将收获，利用 vue3 + vite 从零开发几何画板，从而学到几何画板的基本开发思路、元素创建、编辑、拖拽、图层管理、撤销和重做、导入导出、利用几何和代数学知识解决前端问题等知识。

 尤雨溪：Turbopack 真的比 Vite 快 10 倍吗？

11月1日，Vue、Vite 作者尤雨溪发表文章《Is Turbopack really 10x Faster than Vite？》，本微博对 Turbopack 和 Vite 进行了测试对比，下面就来一起看看详细内容吧！

 原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理

本文将用一个极简的例子详细讲解如何用原生 JS 一步步实现一个完整的图片预览和查看功能，无任何第三方依赖，兼容 PC 与 H5，介绍了如何仅通过指针事件进行多端统一的事件监听，如何实现触屏双指缩放等，干货满满。 茶无味推荐

技术实践

■ ■ ■

 现代 CSS 指南 -- at-rule 规则必知必会

在 CSS 中，存在大量的以 @ 符号开头的规则。称之为 @ 规则 (at-rule)。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的“@ 规则”规则。干货满满

 手写 Puppeteer：自动下载 Chromium

Chpuppeteer 是一个基于 CDP 实现的网页自动化测试工具，可以用来跑测试用例，也可以用来做爬虫等。为了深入理解它的实现原理，我们会从 0 实现一个 mini puppeteer。这是第一集，我们实现了自动下载 chromium。让我们一起来学习吧！

 全新的 React 组件设计理念 Headless UI

作者先介绍了 React Hooks，然后引出了 Headless UI 组，介绍了为什么是 Headless UI、什么会有 Headless UI，以及 Headless UI 的优劣势，下面就让我们一起来学习吧！

拓展边界

■ ■ ■

 Chrome 最近带来了哪些有意思的新东西？

作者给我们介绍了 Chrome 105，Chrome 106，Chrome 107 几个版本里一些有意思的更新，到底有哪些有意思的更新呢，让我们一起看看吧！

 WebXR 技术调研 - 在浏览器中构建扩展现实应用

本文介绍了利用 WebXR Device API 可以在 Web 环境访问到 XR 设备，它主要分为 3 种模式 inline、immersive-vr 和 immersive-ar，inline 模式还是在渲染在浏览器页面中，而 immersive-vr 则是访问 VR 设备，将画面渲染到 VR 设备中，整体渲染过程与普通 WebGL 程序差不多，只不过画面要渲染到 XRWebGLLayer 的 framebuffer 中，并且区分左右眼这些知识。

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。