视野修炼-技术周刊第130期 | 光影效果

欢迎来到第 130 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

🔥强烈推荐

屏幕边缘光影效果
Blossom Carousel - 轮播组件
Virtua - 快且小的虚拟滚动库

🔧开源工具&技术资讯

Dot Matrix = 点阵动画
Stolen Buttons - 可供参考的一大批按钮
termdom - 使用3剑客构建终端应用
Ant - 仅 9 MB的运行时
gridstack.js
tslog - Beautiful logging
import defer
hucre - 0 依赖的 Excel 处理库
scriptc - TS2Native

📚教程&文章

Node 新文档站

又 🕊 了好几个月了，VibeCoding 多了都没顾上刷资讯了，最近补一下，有趣的还挺多。

🔥强烈推荐

1. 屏幕边缘光影效果

类似手机助手唤起时（如苹果的 Siri/超级小爱）周围的柔和发光效果。

2. Blossom Carousel - 轮播组件

基于浏览器原生滚动 API 的轮播组件。部分场景可以实现0外部依赖，

3. Virtua - 快且小的虚拟滚动库

支持 React、Vue、Solid 等，API 简单。

Vue	React

🔧开源工具&技术资讯

4. Dot Matrix = 点阵动画

先收藏，以后没准能用上

5. Stolen Buttons - 可供参考的一大批按钮

印象之前有一个插件也是类似这样，会将访问过的网站收集一个按钮。

Button Stealer

6. termdom - 使用3剑客构建终端应用

使用熟悉的dom API 来操作构建终端应用。

7. Ant - 仅 9 MB的运行时

C 语言构建的 JavaScript 运行时，仅 9MB。

8. gridstack.js

可用于创建可灵活拖拽的大盘页面。

9. tslog - Beautiful logging

多运行时支持的日志库，运行时 0 外部依赖。

看着不错，引入项目里用用看。

10. import defer

7月底进入 stage 3，延迟加载模块的语法。

在此之前动态加载的版办法。

js 复制代码

// cjs
exports.renderReport = function (data) {
  const chartRenderer = require('chart-renderer')
  return chartRenderer.render(data)
}

// esm
export async function renderReport(data) {
  const { render } = await import('chart-renderer')
  return render(data)
}

defer 语法。

ts 复制代码

// 此时会导入，但不执行
import defer * as ns from "some-module";


function useFeature() {
  // 首次读取的时候才执行模块里的代码
  return ns.feature(); // reading this is what triggers evaluation
}

// or 动态导入
const ns = await import.defer("some-module");

又学到一手

11. hucre - 0 依赖的 Excel 处理库

支持读写XLSX、CSV、ODS、JSON、NDJSON、XML等格式。服务端客户端都可以使用。

12. scriptc - TS2Native

将TS脚本编译成可执行文件。

📚教程&文章

13. Node 新文档站

beta.docs.nodejs.org/

⭐️强力推荐关注

周刊部分内容来源如下渠道，推荐大家关注。

frontendfoc - 🚀 Frontend Focus
JavaScript Weekly - A newsletter of JavaScript articles, news and cool projects
nodejs Weekly - A free, once--weekly e-mail round-up of Node.js news and articles.