简报 187 @ 2023.11.3
@云谦 · 前端日更星球
# 简报
Announcing Docusaurus 3.0 | Docusaurus (opens new window)
新闻：Docusaurus 发布 3。
Supabase is now compatible with Next.js 14 (opens new window)
新闻：Supabase 现已与 Next.js 14 兼容。
Deno 1.38: HTML doc generator and HMR (opens new window)
新闻：Deno 发布 1.38。
https://remix.run/blog/remix-heart-vite (opens new window)
新闻：Remix ❤️ Vite。Remix v2.2.0 现已支持 Vite 的不稳定版本，提供了 Vite 出色的开发体验。Vite 的主要优势包括快速的模块热替换、优化的构建速度和对构建框架的特定设计。现在，Remix 不再是一个编译器，而是一个 Vite 插件，允许开发者利用 Vite 插件生态系统的全部功能。尽管 Remix 最初没有使用 Vite，但随着 Vite 的发展和其对服务端渲染、非 Node 运行时支持等的增强，Remix 决定采纳 Vite。现在，Remix 团队与 CloudFlare 核心团队合作，期望在 Remix Vite 插件稳定之前提供最佳的 CloudFlare 支持。Remix 鼓励用户反馈，目前有一些已知的问题。Remix 也向 Vite 团队表示感谢，并宣布 Remix 和 Shopify 现在将赞助 Vite。同时，Remix 社区对 Vite 的支持进行了探索，并感谢其他框架如 Astro、SolidStart 和 SvelteKit 为 Vite 支持提供的启示。
Release v1.0.0 · eslint-stylistic/eslint-stylistic... (opens new window)
新闻：eslint-stylistic 发布 1。由于维护成本高昂，ESLint 和 typescript-eslint 团队决定放弃核心中与格式化/风格相关的规则，因此启动了该项目。此 repo 移植了这些规则，并将它们作为独立的软件包发布，并将由社区进行维护。
辟殊 - Rust 在前端构建高性能前端打包工具_哔哩哔哩_bilibili (opens new window)
好文：辟殊 - Rust 在前端构建高性能前端打包工具。
https://www.youtube.com/watch?v=pSQjU3GB23E (opens new window)
好文：Use React Forget TODAY。本文讲述了作者在 React Advanced 会议上听到有关 React Forget 的新编译器技术后，对 React 应用性能优化的见解和实践建议。React Forget 是一个专门为 React 项目设计的新编译器，能自动记忆组件，提供更精细的性能优化，比如自动管理 useMemo 和 useCallback，但目前尚未发布。作者通过实例展示了在没有 React Forget 的情况下，如何手动通过 useMemo 对 JSX 进行优化，提高组件的渲染效率。文中还详细解释了 JavaScript 的对象和数组是如何通过内存引用来比较的，这对于理解 React 组件的性能优化至关重要。最后，作者提到了这种手动优化的代码可能更难阅读和维护，是一种权衡选择。
Speeding up the JavaScript ecosystem - Tailwind CS.. (opens new window).
好文：加速 JavaScript 生态系统 - Tailwind CSS。这篇文章总结了关于Tailwind CSS的性能优化探讨。作者首先提到了Tailwind CSS作为一种流行的网页样式工具，并计划分析其性能，但面临了一些挑战。文章中详细介绍了Tailwind CSS的工作原理，包括扫描CSS文件中的@tailwind规则，提取潜在的Tailwind类名，解析这些类名并生成相应的CSS规则，最后替换原始CSS文件中的@tailwind规则。作者在优化性能方面提出了一些方法，包括使用正则表达式快速查找@tailwind规则，减少搜索空间以提高效率，以及优化解析过程以更快速地判断类名的有效性。通过这些优化，作者成功将Tailwind CSS的性能从原来的388毫秒降低到98毫秒，并最终完成了自己的性能优化项目。
CSS Selectors: A Visual Guide & Reference | fffuel (opens new window)
好文：CSS Selectors: A Visual Guide。
CSS is fun again (opens new window)
好文：CSS 又好玩了。这篇文章主要讨论了CSS的发展历程和最新的功能。作者首先回顾了CSS的历史，从90年代的内联属性到CSS 2的出现，使得开发者可以更灵活地定位和调整页面元素。然后，作者讨论了CSS的静默复兴，CSS慢慢地增加了新的功能，如:is和:where选择器，Flexbox和CSS Grids，以及变量或自定义属性。最近，新功能的推出速度加快，如CSS嵌套，color-mix，Containment和Style queries等。此外，还有一些小的改进，如Transform属性被分解为单独的属性，display的重新审视，新的三角函数等。最后，作者预测了CSS的未来，包括Relative Colors特性和Native CSS scoping等。总的来说，作者认为CSS正在经历一个复兴期，新的功能使得编写样式更加方便和强大。
https://dev.to/what1s1ove/ecmascript-decorators-th... (opens new window)
好文：ECMAScript Decorators 十年历史。
https://engineering.atspotify.com/2023/10/switchin... (opens new window) 好文：无缝切换构建系统。Spotify从2017年开始试验Bazel构建系统，经过几年的发展，为了满足多语言、多平台和大量代码的需要，他们决定完全用Bazel来构建他们的iOS应用。构建系统用于简化构建过程，以前Spotify依赖Xcode构建系统，但随着移动应用的增长，现代构建系统变得更为重要。为了平稳过渡，Spotify让两种构建系统同时运行，直到Bazel得到完全验证。结果显示，使用Bazel大大提高了构建速度和开发者的效率。但迁移过程中也存在挑战，如维护多个构建系统的成本和IDE的集成问题。最终，为了确保发布的质量，Spotify对比了Bazel和Xcode构建的版本，并设计了一套逐步发布策略。结论是，通过与开源社区的合作，Spotify成功地用Bazel完全构建了其iOS应用。
https://www.youtube.com/watch?v=hn_L56ypX1A (opens new window)
好文：React Advanced London 2023。
https://www.youtube.com/playlist?list=PLBnKlKpPeag... (opens new window)
好文：Next.js Conf 2023。
https://garrit.xyz/posts/2023-10-13-organizing-mul... (opens new window)
好文：组织多重 Git 身份。文章讲述了如何管理多个Git身份（例如个人、工作、客户1、客户2等）。作者使用三级目录来组织Git仓库：第一级是个人和工作项目的总目录（~/sources和~/work），第二级是不同客户的目录（如~/work/client1），第三级则是具体项目的仓库（如~/work/client1/foo-api）。文章的重点是利用Git的全局配置文件（~/.gitconfig）的“条件性包含（conditional includes）”功能。这允许用户根据仓库的位置自动切换Git配置，从而解决了因为忘记更改电子邮件地址而收到客户请求的问题。
https://developer.chrome.com/articles/at-scope/ (opens new window)
好文：使用 CSS @scope 限制选择器的使用范围。文章讨论了如何在CSS中精细控制选择器，尤其是在需要权衡特定选择与易于重写选择器之间的需求时。它介绍了@scope关键字，允许你限制选择器的作用范围，只针对DOM的一个子树。@scope可以设置一个上限（scoping root）和一个下限（scoping limit），因此你可以非常精确地控制哪些元素被选中。
http://plumshell.com/2016/03/10/work-for-only-3-ho... (opens new window)
好文：每天只工作 3 小时，但天天如此。独立iPhone开发者通过每天工作3小时的方式，持续近两年找到了自己的高效工作模式。这个想法最初受到DHH（Rails创造者）和Taleb（《反脆弱》作者）的影响，强调短时间内的高效工作比长时间的劳动更为生产力高效。作者试验了多种工作模式后，放弃了每周工作40小时的方式，改为每天只工作3小时。这不仅提高了工作质量，还让他在决策时更加慎重。短时间工作还有助于编程问题的解决，即使有时难以在当天解决问题，第二天往往能以全新的视角找到解决方案。该方法的挑战包括“进入状态”时不想停下来，以及可能影响一些长期项目的进度。尽管如此，该方法不仅提高了短期和长期的工作效率，还让作者觉得可以持续工作，而不是早日退休。
axem | Blog | Creating and Exporting Project-Speci... (opens new window)
好文：加快你的 VSCode 项目设置。根据2023年的Stackoverflow调查，Visual Studio Code依然是73.71%开发者首选的IDE。VS Code以其轻巧且强大的代码编辑器著称，但搭配合适的扩展则更显其潜能。文章探讨了如何增强VS Code体验，特别是在新项目中。文章强调了统一的开发环境的优势，如简化入职流程、标准化的调试和代码格式化设置等。VS Code支持将安装的插件列表导出为文件并在另一设备上复制。文章列出了如何显示和保存已安装扩展的命令，并提供了如何共享和在另一设备上复制的指南。此外，还介绍了VS Code的settings.json配置文件的位置和常见的自定义设置，并给出了一个警告建议在进行大的更改前备份settings.json文件。文章的结论是，通过VS Code的扩展配置的导入和导出功能，可以确保团队中的每个人都使用相同的工具和设置，从而节省宝贵的时间并优化工作流程。
https://www.youtube.com/watch?v=p9PK4zQE0Ak (opens new window)
好文：如何利用 AI 加速学习。视频内容是关于如何使用AI，特别是ChatGPT，来更有效地学习和准备技术面试。视频中的主讲者分享了她如何在日常生活中，如去杂货店的路上，使用ChatGPT来学习复杂的技术主题。她特别强调了使用语音命令与ChatGPT进行交互的好处，这使得学习变得更为便捷。此外，她还展示了如何使用ChatGPT进行模拟面试，并从AI那里获得有关回答的反馈，以更好地为实际的技术面试做准备。最后，她鼓励观众利用这些技术来加速学习。
https://andadinosaur.com/youtube-s-anti-adblock-an... (opens new window)
好文：Youtube 的反广告屏蔽和 uBlock Origin。近期，YouTube 加强了反广告拦截工具的努力。以往，广告拦截工具通过修改 YouTube 的 API 响应来屏蔽广告。但今年，YouTube 开始模拟请求检测广告拦截工具的干扰。YouTube 和广告拦截工具之间的对抗已成为 “猫捉老鼠” 的战争。但不是所有人都受到 YouTube 的这种策略影响，这取决于用户的账户、浏览器和 IP 地址。此外，YouTube 不仅仅针对广告拦截工具，其他防跟踪工具和浏览器设置也可能导致被标记。同时，Reddit 上的 uBO 团队发布了一篇关于如何应对 YouTube 反广告拦截的详细帖子，但很多用户并未真正按照其建议操作，导致技术支持困难。有人尝试使用自定义过滤器来隐藏广告，但这种方法并不有效。YouTube 每次调整脚本时，部分 URL 都会改变，而用户对此产生了误解。由于压力和负面评论，uBO 团队的一些成员选择离开。考虑到 uBO 团队的志愿者状态，不断的对抗和用户压力可能导致他们最终放弃，这或许是 YouTube 赢得这场消耗战的方式。
https://www.indigox.me/build-exobrain/ (opens new window) 其他：构建外脑 / 智变时代的个人知识管理。
Don't start exploring Personal Knowledge Managemen... (opens new window)
其他：不读这篇文章，就不要开始探索个人知识管理。
https://blog.douchi.space/pull-up/ (opens new window) 其他：为什么每个人都该做引体向上。
Notion – The all-in-one workspace for your notes, ... (opens new window)
其他：Nas 私有云：真国内观影必备。
Dot by New Computer (opens new window)
工具：Dot。可以加个 Waitlist。
GitHub - ddupont808/GPT-4V-Act: AI agent using GPT... (opens new window)
工具：GPT-4V-Act。使用 GPT-4V(ision)的人工智能代理能够使用鼠标/键盘与网络用户界面交互
https://twitter.com/WildCat_io/status/171953391027... (opens new window)
技巧：使用 VSCode 开发 iOS App。
https://twitter.com/ralex1993/status/1720123606183... (opens new window)
技巧：您知道 React Portals 可以跨浏览器窗口共享状态和事件吗？得益于 React 的虚拟 DOM 和合成事件系统，即使在不同窗口之间共享状态，应用程序也能像在同一个窗口中一样运行。
GitHub - browserless/browserless: The browserless ... (opens new window) 开源：browserless chrome。Docker 中的无浏览器 Chrome 浏览器服务。在我们的云上运行，或自带云。
