2025-06-22 19:51:15
欢迎来到第 124 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
var figlet = require("figlet");
figlet("Hello World!!", function (err, data) {
console.log(data);
}); _ _ _ _ __ __ _ _ _ _
| | | | ___| | | ___ \ \ / /__ _ __| | __| | | |
| |_| |/ _ \ | |/ _ \ \ \ /\ / / _ \| '__| |/ _` | | |
| _ | __/ | | (_) | \ V V / (_) | | | | (_| |_|_|
|_| |_|\___|_|_|\___/ \_/\_/ \___/|_| |_|\__,_(_|_)还有 CLI 版本支持
收藏起来，写CLI能用上！
将状态信息存储在URL中，便于持久化当下的用户操作后的页面数据，也便于分享复现。
目前支持Next，React Router，Remix。
原生的 web component，用于代码高亮。
import 'syntax-highlight-element';<syntax-highlight lang="js">
const a = 1;
</syntax-highlight>使用非常简单！基于 CSS 自定义高亮API实现。
用于监控 Node.js 应用程序日志的仪表板，实现应用自托管。
使用也比较简单，支持多种日志存储方式！(数据库，文件，内存)
// Import the necessary tools
const express = require('express');
const { setupLogger, viewerMiddleware } = require('log-vwer');
// Create your Express app
const app = express();
const PORT = process.env.PORT || 3000;
// This is an async function to make sure we connect to the database *before* starting the server.
async function startServer() {
// === Part 1: Set up the logger ===
const logger = await setupLogger({
serviceName: 'My Awesome E-Commerce App',
store: 'mongodb',
mongoUrl: 'mongodb://localhost:27017/my_app_logs',
});
// === Part 2: Activate the dashboard ===
// This tells your app: "When someone goes to /_logs, first check the password, then show the log dashboard."
app.use('/_logs', myAuthMiddleware, viewerMiddleware(logger));
// Start your server only after everything is ready
app.listen(PORT, () => {
logger.warn(`Server is alive on port ${PORT}. Ready to rock!`);
console.log(`Log dashboard is live at: http://localhost:${PORT}/_logs`);
});
}
// Run the function to start the server!
startServer();可以检测网页中的外链，死链等情况。
Chrome 同款风格
宣称是首个无需依赖 TypeScript 编译器(tsc)、却仍能提供类型感知规则的 JavaScript 和 TypeScript 代码检查工具。
周刊部分内容来源如下渠道，推荐大家关注。
2025-06-15 16:45:19
欢迎来到第 123 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
还没有升级的官方建议跳过 v20 直接使用 v22，剩余更长的生命周期，更多的新特性支持！
🤡 公司里主流还在用 Node 16，基建拉胯，XS！
Oxlint 的第一个稳定版本已经发布！它的性能比 ESLint 提升了 50 到 100 倍 ，支持超过 500 条 ESLint 规则。
支持 0 配置直接启动使用。
npx oxlint@latest提供更清晰的诊断信息
尝鲜，笔者项目也准备迁一下试试
简洁的 ORM 库，支持 TypeScript 和 JavaScript，以及 CommonJS 和 ESM。
利用 matchMedia API 及其监听器，结合 prefers-color-scheme 媒体查询实现。
使用也超简单！
import darkmodejs from '@assortment/darkmodejs'
function onChange(activeTheme, themes) {
switch (activeTheme) {
case themes.DARK:
console.log('darkmode enabled')
break
case themes.LIGHT:
console.log('lightmode enabled')
break
case themes.NO_PREF:
console.log('no preference enabled')
break
case themes.NO_SUPP:
console.log('no support sorry')
break
}
}
darkmodejs({ onChange })antfu 大神的又一力作。
npx node-modules-inspector多种视图下查看依赖的情况。
文章介绍了 4 种常用的限流算法：令牌桶、漏水桶、固定窗口、滑动窗口。
每种算法都提供了可交互的 Demo 方便理解。
| 令牌桶 | 漏水桶 |
|---|---|
 |
 |
2025-06-07 18:58:38
欢迎来到第 122 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
可以将普通图片转为 HDR 图片。
前段时间刷屏（闪瞎iOS）的青蛙图制作！
收藏！
支持在线添加滤镜，裁剪的 WebGL 驱动的编辑器器。
看一下 Hello World 对比。
涵盖了基础入门的知识。
看上去十分nb，收藏一下
“浏览器公司” 解释停止开发 Arc 的原因。
转向开发新的浏览器 Dia （AI浏览器），不再为 Arc 开发新功能
笔者拿这个一直作为主力浏览器，贼好用哎。
Dia 浏览器 先排上队了。
周刊部分内容来源如下渠道，推荐大家关注。
2025-06-06 20:17:59
MD标题外链转二维码
如图给 markdown 内容中带连接的标题下插入一个二维码和连接内容。
方便用户阅读时扫码直接访问或者复制链接。
已支持能力
体验地址：
发公众号的话，搭配 微信 Markdown 编辑器（https://md.doocs.org/） 效果更加。
微信公众号的个人的文章无法直接跳转第三方的外链，文章通常会是外链转脚注，将相关链接放在最后。
但周刊类型的文章外链较多，不太方便用户 CV 跳转。
之前在其它公众号有看到过类似的展示，就想着复刻过来！
用 Trae（Claude-3,7-sonnet）生成核心代码（99%），人工主要在一些特定的样式问题上做了介入。
Vue 3 + Vite
第一轮对话的“提示词”
使用Vite Vue实现一个md 格式转换项目，将Markdown中标题是超链接的提取出来，
放在标题下方 并在左侧生成对应的二维码图片
支持预览原Markdown和转换后Markdown内容总共进行了 15 轮的连续对话，就达到了这个效果。
其中部署 GitHub Pages 的 GitHub Action 脚本也是用其生成的。
现在有了 VibeCoding 的编码方式，出 Demo 非常的快，效率比人工高 N 倍。
可以快速验证想法。
顺便推荐一波此类型的在线工具
Trae 整体体验我觉得还行，3$ 的首月体验还可以接受，大模型都一样，这比 Cursor 便宜太多了。还没搞上AI IDE 的可以试用一波，每天也有些免费额度。
读者有发一些奇思妙想的应用想法，也可评论区来一波。
不多说了“两个字” AI NB
2025-06-01 18:26:13
欢迎来到第 121 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
祖师爷官宣 Rolldown 版本的 Vite 的使用 rolldown-vite。
拿 VitePress 验证一下速度，看看提升。
笔者 mac m1 的设备，大约 500 多篇 md，验了一下大概3s的提升有🤭！
感觉存量项目切换还是得折腾一下，笔者跑 VitePress 改了半天才跑起来
贴几个比较认同的一些观点：
“专业性永远重要。你只有对很多东西掌握到足够的深，才能判断AI输出的正确性。”
“不要自我设限，别给自己贴上‘前端工程师’的标签，你是解决问题的工程师。”
“AI不是让你的活变少，而是让你的价值更大。”
将任何 HTML 元素捕获为可缩放的 SVG 图像。
官网提供了各种场景的 Demo，效果还是不错。
H5 生成海报分享又多一个选择！
通过预测鼠标将要经过的位置，以此来做数据的预加载。
将文本转为 SVG ，可以用来制作文字 Logo。
比如下面这两个 “sugar”。
不过好像不支持中文。
本文就可以看见这个效果
将Markdown文档中带超链接的标题提取出来，在标题下方显示对应的链接和二维码图片。
这对于需要在微信公众号等不支持外部链接的平台发布文章时特别有用，读者可以通过扫描二维码访问链接。
笔者新鲜打造的，使用 Trae（Claude-3,7-sonnet）生成，人工微调
阿里推出的 AI IDE 内置自己的大模型。
没上手使用，感兴趣的可以下载试试，目前免费
笔者估计后面腾讯百度美团这种的 AI IDE 推出公测应该也不远了
周刊部分内容来源如下渠道，推荐大家关注。
2025-05-25 16:35:12
欢迎来到第 120 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
美团推出的 Web 网站生成平台。对标 Bolt，V0。
目前免费，可以体验体验，效果还可以，支持部署！
常见的通过 $input.value 获取的是字符串类型
但浏览器还支持 $input.valueAsNumber API，支持获取数字类型
<input id="number" min="1" max="10" type="number" />
<button id="btn">获取</button>
<script>
btn.addEventListener('click', () => {
const numberValue = number.valueAsNumber
console.log(typeof numberValue, numberValue)
})
</script>API 支持程度非常高。
小知识，记下了！
一套为 AI 应用打造的灵活且高质量的组件库。
基于 Shadcn/UI 打造。
免费本地批量转换图像、音频和文档的工具.
多框架支持的在线 Playground
使用 Gemini 直接修改DOM的CSS样式
通过 Gemini 直接询问数据分析效果
国内要直接使用，得车腾一番才能开启AI助手的功能
Deno 团队精心梳理了一条时间线，生动呈现了 JavaScript 的发展历程：从最初在 Netscape Navigator 中崭露头角，到衍生出 JScript 等分支，再到标准化进程的推进和 Node.js 的横空出世，直至今日取得的辉煌成就。
npm install -D @typescript/native-preview
npx tsgo --project ./src/tsconfig.json功能丰富，体验了一下效果也还可以，也是纯本地运行。
收藏+1
周刊部分内容来源如下渠道，推荐大家关注。
