❌

阅读视图

发现新文章，点击刷新页面。

视野修炼-技术周刊第122期 | 发光图片制作

✇掘金 前端
粥里有勺糖

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

🔥强烈推荐

  1. HDRify - 发光 HDR 图片制作
  2. qnm - node_modules分析工具

🔧开源工具&技术资讯

  1. Glow UI - 开源SVG图标
  2. 在线的图片编辑器

📚教程&文章

  1. 面向 JS 开发的 Go 学习指南
  2. CSS 聚光灯效果

🤖AI工具&资讯

  1. Arc 浏览器停止开发

下面开始本期内容的介绍，预计阅读时间 5 分钟。

🔥强烈推荐

1. HDRify - 发光 HDR 图片制作

可以将普通图片转为 HDR 图片。

前段时间刷屏（闪瞎iOS）的青蛙图制作！

2. qnm - node_modules分析工具

🔧开源工具&技术资讯

3. Glow UI - 开源SVG图标

收藏！

4. 在线的图片编辑器

支持在线添加滤镜，裁剪的 WebGL 驱动的编辑器器。

📚教程&文章

5. 面向 JS 开发的 Go 学习指南

看一下 Hello World 对比。

涵盖了基础入门的知识。

6. CSS 聚光灯效果

看上去十分nb，收藏一下

🤖AI工具&资讯

7. Arc 浏览器停止开发

“浏览器公司” 解释停止开发 Arc 的原因。

转向开发新的浏览器 Dia （AI浏览器），不再为 Arc 开发新功能

笔者拿这个一直作为主力浏览器，贼好用哎。

Dia 浏览器 先排上队了。

⭐️强力推荐关注

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

用Trae做了个公众号小工具

✇掘金 前端
粥里有勺糖

是什么

MD标题外链转二维码

如图给 markdown 内容中带连接的标题下插入一个二维码和连接内容。

方便用户阅读时扫码直接访问或者复制链接。

已支持能力

  • 自动解析 MD 文档，识别带超链接的标题
  • 自动在标题下方生成对应的二维码和链接文本
  • 提供原始预览和转换后预览的对比视图
  • 支持一键复制转换后的内容(会将图片以 base64 形式通过img标签导入)
  • 自动保存编辑内容到本地缓存
  • 移动端提供便捷的预览切换功能

体验地址：

  1. aicoding.juejin.cn/aicoding/wo…
  2. atqq.github.io/md-qrlink/
  3. GitHub：github.com/atqq/md-qrl…

发公众号的话，搭配 微信 Markdown 编辑器（md.doocs.org/） 效果更加。

为什么搞这个

微信公众号的个人的文章无法直接跳转第三方的外链，文章通常会是外链转脚注，将相关链接放在最后。

但周刊类型的文章外链较多，不太方便用户 CV 跳转。

之前在其它公众号有看到过类似的展示，就想着复刻过来！

怎么搞得

用 Trae（Claude-3,7-sonnet）生成核心代码（99%），人工主要在一些特定的样式问题上做了介入。

技术原理

Vue 3 + Vite

  • Markdown解析: markdown-it
  • 二维码生成: qrcode和qrcode.vue
    • 前者负责复制的时候 base64 二维码内容生成，后者负责预览里的二维码渲染
  • 本地存储: localStorage API

人工介入部分

  1. 布局的样式，AI 每次在修改其它问题的时候会把我已经调整的布局扔掉用新生成的覆盖
  2. 复制到 markdown：HTML 标签在复制到微信里的时候 微信会做标签的转换，一些布局样式转换后被丢了。这块需要人工介入在微信的规则下做一下调整。

我的 Prompt

第一轮对话的“提示词”

使用Vite Vue实现一个md 格式转换项目，将Markdown中标题是超链接的提取出来，
放在标题下方 并在左侧生成对应的二维码图片

支持预览原Markdown和转换后Markdown内容

总共进行了 15 轮的连续对话，就达到了这个效果。

其中部署 GitHub Pages 的 GitHub Action 脚本也是用其生成的。

最后

现在有了 VibeCoding 的编码方式，出 Demo 非常的快，效率比人工高 N 倍。

可以快速验证想法。

顺便推荐一波此类型的在线工具

Trae 整体体验我觉得还行，3$ 的首月体验还可以接受，大模型都一样，这比 Cursor 便宜太多了。还没搞上AI IDE 的可以试用一波，每天也有些免费额度。

读者有发一些奇思妙想的应用想法，也可评论区来一波。

不多说了“两个字” AI NB

❌