前端周刊第67期：Bun、htmx、Lodash、NakedJSX、Croner

周刊同步发表于微信公众号“写代码的宝哥”，欢迎各位小伙伴前来关注 ！

快讯

• Bun ——另一个（Deno 也算一个）用于取代 Node.js 的运行时，其创始人 Jarred Sumner 将在美国当地时间 09.07 召开 1.0 产品发布会

文章

• How Dropbox Reduced the Size of Its JavaScript Bundles by 33% - Dropbox 的小伙伴最近对网站 JavaScript 打包产物做了一次优化，减少了 33% 的体积。本文介绍他们是如何做的
• htmx is Part of the GitHub Accelerator - htmx 是一个存在已久的项目，最近才开始火。项目现在成为 GitHub 开源加速器计划的第一批扶持项目，有望促使 htmx 2.0 版本的开发
• You Might Not Need Lodash or Underscore - 受到 You Might Not Need jQuery 项目启发。这个仓库列举了差不多 100 个如何使用原生 JS 代码实现的同等 Lodash/Underscore 方法。当然，实际项目中为了安全稳定，我还会继续使用 Lodash，而将这里列举的实现可以作为了解内部工作模式的一种方式

• JSX Without React - Chris Coyier 体验了一个名为 NakedJSX 的 JS 库，可以让你在不需要 React 情况下使用 JSX
• You’ve Got Options for Removing Event Listeners - 本文讲述移除监听事件的 4 种方式，包括直接移除和间接移除
• 10 Web development trends in 2023 - 本文讨论 2023 年的 10 大开发趋势。包括 JavaScript 运行时以及 AI 驱动式开发
• Prepare Your Firefox Desktop Extension for the Upcoming Android Release - Android 设备上的 Firefox 浏览器开始支持桌面端扩展程序了，扩展程序开发者们需要注意为移动端适配了

• How to Make Lists Accessible - 介绍 HTML 列表元素的使用，包括无障碍优化相关

• Four New CSS Features for Smooth Entry and Exit Animations - 本文介绍 4 个新的 CSS 特性，介绍如何丝滑地开始和退出动画
• An Overview of CSS Sizing Units - 本文将 CSS 中的尺寸单位依据参照物划分成 4 类，并逐一介绍相关概念及应用场景

发布

• Croner 7.0: Cron for JavaScript and TypeScript - cron 表达式的 JavaScript 语言实现，用于定期执行特定函数。目前支持的平台包括：Node、Deno、Bun 和浏览器

• Fresh 1.4 - Deno 驱动的 Web 框架。地位类似 Node.js 的 Next.js，使用了 Preact 渲染页面
• Electron 26.0 - 跨平台桌面软件开发工具
• NodeBB 3.3 - Node.js 驱动一个论坛网站

• Playwright 1.37.0 - 微软出品的一款 e2e 测试工具
• Angular 16.2 - Google 公司创建的一款前端框架，现在仍在活跃维护中
• jest-dom 6.0 - 一个扩展 Jest DOM 操作的扩展匹配器，更易于 DOM 元素测试
• What's New in DevTools (Chrome 117)")") - 支持本地修改请求响应、代码高亮及高亮支持

资源

• Discover three.js: A Complete Guide to Creating 3D Web Experiences - three.js 是一款著名的 3D 动画库，本书免费从 0 到 1 教你如何使用它，有中文版可以阅读。值得注意的是，本文作者 Lewy Blue（路易·布鲁） 也是 three.js 项目的主要贡献者之一，
• Over 100 Algorithms and Data Structures Demonstrated in JS - 这个仓库总包含超过100 种数据结构与算法的 JavaScript 实现

• CSS Tip - 这个网站罗列了很多 CSS 编写技巧，每天一分钟学会一个！
• Iconbuddy - 一个免费 Icon 搜索引擎，搜索180K+ 在内的开源 Icon 资源

• LangUI - 一个包含 60+ Tailwind 组件的 UI 库，为构建 AI & GPT 这类项目而生，支持黑白两色主题
• Primo - 生成静态站点的可视 CMS。Primo 本身是一个使用 Supabase 作为后端的 SvelteKit 应用程序

工具

• OddContrast - 用于查看颜色 Contrast Ratio，为设计无障碍友好型网站。支持 Hex、HSL、Oklch 内在多种颜色格式

• Proto Tree: A Way to Observe the JS Prototype Chain - 这个网页可以用来展示 JavaScript 原型链的结构
• twentyhq/favicon - 一个用于获取网站 fav icon 的工具，比如：https://favicon.twenty.com/apple.com
• deno_python: Python Interpreter Bindings for Deno - 实现 deno 中操作 python 的一个桥接工具

库

• Linkify 4.1: Link Up URLs, Email Addresses, and More in Plain Text - 找出并转换文本中的链接、邮箱号关键信息。还支持通过插件支持 hashtag、@mentions、IP 地址、关键字等其他提取转换功能
• Barba.js: For Smooth Visual Transitions Between Pages - 为页面切换增加过渡效果，官网已经完美诠释了这个库所能做到所有精彩过渡展示

时光机

• 感受下 1999 年 Apple、Google 和 Amazon 站点长什么样子

---

资料来源：JavaScript Weekly#652、Frontend Focus#606。

本文由mdnice多平台发布