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

最新推荐文章于 2024-07-22 15:19:55 发布
最新推荐文章于 2024-07-22 15:19:55 发布
阅读量196 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71641959/article/details/132403830
版权

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

快讯

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

文章

alt
  • How Dropbox Reduced the Size of Its JavaScript Bundles by 33% [3] - Dropbox 的小伙伴最近对网站 JavaScript 打包产物做了一次优化，减少了 33% 的体积。本文介绍他们是如何做的
  • htmx is Part of the GitHub Accelerator [4] - htmx 是一个存在已久的项目，最近才开始火。项目现在成为 GitHub 开源加速器计划 [5]的第一批扶持项目，有望促使 htmx 2.0 版本的开发
  • You Might Not Need Lodash or Underscore [6] - 受到 You Might Not Need jQuery [7] 项目启发。这个仓库列举了差不多 100 个如何使用原生 JS 代码实现的同等 Lodash/Underscore 方法。当然，实际项目中为了安全稳定，我还会继续使用 Lodash，而将这里列举的实现可以作为了解内部工作模式的一种方式
alt
  • JSX Without React [8] - Chris Coyier 体验了一个名为 NakedJSX [9] 的 JS 库，可以让你在不需要 React 情况下使用 JSX
  • You’ve Got Options for Removing Event Listeners [10] - 本文讲述移除监听事件的 4 种方式，包括直接移除和间接移除
  • 10 Web development trends in 2023 [11] - 本文讨论 2023 年的 10 大开发趋势。包括 JavaScript 运行时以及 AI 驱动式开发
  • Prepare Your Firefox Desktop Extension for the Upcoming Android Release [12] - Android 设备上的 Firefox 浏览器开始支持桌面端扩展程序了，扩展程序开发者们需要注意为移动端适配了
alt
  • How to Make Lists Accessible [13] - 介绍 HTML 列表元素的使用，包括无障碍优化相关
alt
  • Four New CSS Features for Smooth Entry and Exit Animations [14] - 本文介绍 4 个新的 CSS 特性，介绍如何丝滑地开始和退出动画
  • An Overview of CSS Sizing Units [15] - 本文将 CSS 中的尺寸单位依据参照物划分成 4 类，并逐一介绍相关概念及应用场景

发布

alt
  • Croner 7.0: Cron for JavaScript and TypeScript [16] - cron 表达式的 JavaScript 语言实现，用于定期执行特定函数。目前支持的平台包括：Node、Deno、Bun 和浏览器
alt
  • Fresh 1.4 [17] - Deno 驱动的 Web 框架 [18]。地位类似 Node.js 的 Next.js，使用了 Preact 渲染页面
  • Electron 26.0 [19] - 跨平台桌面软件开发工具
  • NodeBB 3.3 [20] - Node.js 驱动一个论坛网站
alt
  • Playwright 1.37.0 [21] - 微软出品的一款 e2e 测试工具
  • Angular 16.2 [22] - Google 公司创建的一款前端框架，现在仍在活跃维护中
  • jest-dom 6.0 [23] - 一个扩展 Jest DOM 操作的扩展匹配器，更易于 DOM 元素测试
  • [What's New in DevTools (Chrome 117)](https://developer.chrome.com/blog/new-in-devtools-117/ "What's New in DevTools (Chrome 117 "What's New in DevTools (Chrome 117)")") - 支持本地修改请求响应、代码高亮及高亮支持

资源

alt
  • Discover three.js: A Complete Guide to Creating 3D Web Experiences [24] - three.js 是一款著名的 3D 动画库，本书免费从 0 到 1 教你如何使用它，有中文版可以阅读。值得注意的是，本文作者 Lewy Blue（路易·布鲁） 也是 three.js 项目的主要贡献者之一，
  • Over 100 Algorithms and Data Structures Demonstrated in JS [25] - 这个仓库总包含超过100 种数据结构与算法的 JavaScript 实现
alt
  • CSS Tip [26] - 这个网站罗列了很多 CSS 编写技巧，每天一分钟学会一个！
  • Iconbuddy [27] - 一个免费 Icon 搜索引擎，搜索180K+ 在内的开源 Icon 资源
alt
  • LangUI [28] - 一个包含 60+ Tailwind 组件的 UI 库，为构建 AI & GPT 这类项目而生，支持黑白两色主题
  • Primo [29] - 生成静态站点的可视 CMS。Primo 本身是一个使用 Supabase 作为后端的 SvelteKit 应用程序

工具

alt
  • OddContrast [30] - 用于查看颜色 Contrast Ratio，为设计无障碍友好型网站。支持 Hex、HSL、Oklch 内在多种颜色格式
alt
  • Proto Tree: A Way to Observe the JS Prototype Chain [31] - 这个网页可以用来展示 JavaScript 原型链的结构
  • twentyhq/favicon [32] - 一个用于获取网站 fav icon 的工具，比如： https://favicon.twenty.com/apple.com [33]
  • deno_python: Python Interpreter Bindings for Deno [34] - 实现 deno 中操作 python 的一个桥接工具

库

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

时光机

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

资料来源：JavaScript Weekly#652[38]、Frontend Focus#606[39]。

References

[1]

Bun: https://bun.sh/1.0

 [2]

Deno: https://deno.land/

 [3]

How Dropbox Reduced the Size of Its JavaScript Bundles by 33%: https://dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent

 [4]

htmx is Part of the GitHub Accelerator: https://htmx.org/posts/2023-06-06-htmx-github-accelerator/

 [5]

GitHub 开源加速器计划: https://accelerator.github.com/

 [6]

You Might Not Need Lodash or Underscore: https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#readme

 [7]

You Might Not Need jQuery: https://youmightnotneedjquery.com/

 [8]

JSX Without React: https://chriscoyier.net/2023/08/07/jsx-without-react/

 [9]

NakedJSX: https://nakedjsx.org/

 [10]

You’ve Got Options for Removing Event Listeners: https://www.macarthur.me/posts/options-for-removing-event-listeners

 [11]

10 Web development trends in 2023: https://www.robinwieruch.de/web-development-trends/

 [12]

Prepare Your Firefox Desktop Extension for the Upcoming Android Release: https://blog.mozilla.org/addons/2023/08/10/prepare-your-firefox-desktop-extension-for-the-upcoming-android-release/

 [13]

How to Make Lists Accessible: https://blog.pope.tech/2022/09/01/accessible-lists-and-tables/

 [14]

Four New CSS Features for Smooth Entry and Exit Animations: https://developer.chrome.com/blog/entry-exit-animations/

 [15]

An Overview of CSS Sizing Units: https://www.sitepoint.com/css-sizing-units/

 [16]

Croner 7.0: Cron for JavaScript and TypeScript: https://github.com/hexagon/croner

 [17]

Fresh 1.4: https://deno.com/blog/fresh-1.4

 [18]

Deno 驱动的 Web 框架: https://fresh.deno.dev/

 [19]

Electron 26.0: https://www.electronjs.org/blog/electron-26-0

 [20]

NodeBB 3.3: https://nodebb.org/

 [21]

Playwright 1.37.0: https://github.com/microsoft/playwright/releases/tag/v1.37.0

 [22]

Angular 16.2: https://github.com/angular/angular/releases/tag/16.2.0

 [23]

jest-dom 6.0: https://github.com/testing-library/jest-dom

 [24]

Discover three.js: A Complete Guide to Creating 3D Web Experiences: https://discoverthreejs.com/

 [25]

Over 100 Algorithms and Data Structures Demonstrated in JS: https://github.com/trekhleb/javascript-algorithms

 [26]

CSS Tip: https://css-tip.com/

 [27]

Iconbuddy: https://iconbuddy.app/

 [28]

LangUI: https://www.langui.dev/

 [29]

Primo: https://primocms.org/

 [30]

OddContrast: https://www.oddcontrast.com/

 [31]

Proto Tree: A Way to Observe the JS Prototype Chain: https://weizmangal.com/ProtoTree/?filters=XMLHttpRequest

 [32]

twentyhq/favicon: https://github.com/twentyhq/favicon

 [33]

https://favicon.twenty.com/apple.com: https://favicon.twenty.com/apple.com

 [34]

deno_python: Python Interpreter Bindings for Deno: https://github.com/denosaurs/deno_python

 [35]

Linkify 4.1: Link Up URLs, Email Addresses, and More in Plain Text: https://linkify.js.org

 [36]

Barba.js: For Smooth Visual Transitions Between Pages: https://barba.js.org/

 [37]

感受下 1999 年 Apple、Google 和 Amazon 站点长什么样子: https://mashable.com/article/90s-web-design

 [38]

JavaScript Weekly#652: https://javascriptweekly.com/issues/652

 [39]

Frontend Focus#606: https://frontendfoc.us/issues/606

本文由 mdnice 多平台发布

写代码的宝哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript运行时工具包:bun
03-07
项目标签：[前端设计] [包管理器] [自动化测试] [前端框架] 推荐理由：开发、测试、运行和捆绑JavaScript和TypeScript项目——都用Bun。Bun是一个为提高速度而设计的一体化JavaScript运行时和工具包，包含打包器、...
bun：Bun是易于使用的C ++对象数据库，对象关系映射器（ORM）和键值库
02-04
Bun是一个功能强大的C++库，它集合了多种数据库管理功能，包括对象数据库、对象关系映射器（ORM）和键值存储。这个框架的主要目标是简化C++开发者与数据库的交互，提供一种高效且易用的方式来管理和操作数据。下面...
DWSurvey-master.zip_DWSurvey-master_bun.dwsurvey_http://bnu.dwsu
07-13
JAVA web 问卷系统 问卷调查 题目拖拽
bun-setup：设置本地Ubuntu开发环境
02-13
开发设置 使用Ansible设置开发环境。 要求 如果需要，该项目旨在从头开始建立开发环境，因此很少有先决条件。 当前仅支持Linux主机。 安装 运行make在您的计算机上安装Ansible和必需的集合。 如果您使用的不是基于...
Current-Bun-Maternity.github.io：临时登陆站点
02-24
Current-Bun-Maternity.github.io 是一个基于 GitHub Pages 的临时登录站点，它可能是一个个人或者团队用来展示项目、提供信息或者作为临时交流平台的网页。 在GitHub Pages上创建网站，首先需要有一个GitHub账号，...
python爬虫基础——Webbot库介绍
最新发布
qq_56262770的博客
07-22 711
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 902
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1828
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 548
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
前端性能优化--懒加载
weixin_43799793的博客
07-19 183
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 404
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 516
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
Web Pages 表单
07-20 295
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 1069
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
web前端 React 框架面试200题（三）
柯晓楠
07-21 427
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
Linux上的系统服务——DNS、WEB、NFS 和 AutoFS 服务的详细配置步骤
qq_68600196的博客
07-17 727
现有主机 node01 和 node02，完成如下需求：1、在 node01 主机上提供 DNS 和 WEB 服务2、dns 服务提供本实验所有主机名解析3、web服务提供 www.rhce.com 虚拟主机4、该虚拟主机的documentroot目录在 /nfs/rhce 目录5、该目录由 node02 主机提供的NFS服务共享6、该目录可以通过autofs服务实现自动挂载7、所有服务应该在重启之后依然可以正常使用。
【芯片设计- RTL 数字逻辑设计入门 番外篇 12 -- SoC 设计中的 ECO】
CodingCos的博客
07-17 641
在芯片设计中，ECO，工程变更订单）是一个关键的环节，用于在芯片设计后期对设计进行必要的调整和优化。ECO通常应用于数字芯片的版图设计，它是对设计的layout进行局部的小范围修改和重新布线的过程，而不影响设计的其他部分的布局布线。ECO的目的是为了节省时间和成本，特别是在芯片设计的后期阶段，当RTL（寄存器传输级）代码冻结后，通过ECO来修正设计中的问题。
vue3前端开发-小兔鲜项目-一级页面banner图渲染
yrldjsbk的博客
07-19 363
其实，首页的banner渲染代码可以拿来复用的，只是区别在于，传递的接口参数不一样而已。我们的一级页面就可以成功拿到了后端接口反馈过来的一级栏目的banner图信息了。我们增加了一个参数对象params.而且做好了默认值的设置。（用的是一种解构赋值的模式）1：改造一下之前的获取banner的接口调用函数，增加一个参数对象。2：把之前HomeBanner.vue里面的代码，拿过来，在template里面新增banner的渲染模块内容。写好默认的值1.（不赋值的情况下，就是这个默认值1）3：修改完善页面内容。
了解 JSON Web 令牌 (JWT)
技术探索驿站
07-18 688
在现代 Web 开发领域，确保客户端和服务器之间的通信安全至关重要。JSON Web Tokens (JWT) 已成为确保安全高效数据交换的流行解决方案。本文将深入探讨 JWT 是什么、它们的工作原理以及它们为何对于 Web 应用程序中的安全身份验证和授权至关重要。JSON Web Token (JWT) 是一种紧凑且 URL 安全的表示双方之间传输声明的方式。
ip = f'http://y34iq4:3bun9xd9@{ip}' 解释下
05-14
具体地说，代码中的 `ip` 变量是一个 IP 地址字符串，`f` 函数是 Python3 中的字符串格式化函数，`{ip}` 表示将 `ip` 变量的值插入到字符串中。... 例如，如果 `ip` 的值为 `192.168.0.1`，用户名为 `admin`，密码为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值