首页

最近更新.rss.xml

公开项目经历

TSFullStack ts全栈最佳实践

自用的 ts 全栈项目,快速启动一个 mvp 项目。
自用的 ts 全栈项目,快速启动一个 mvp 项目。
feed:https://ld246.com/member/siyuan/articles
customParse:
js
async (feedDoc, resText, { xssDefend, elText }) => { // resText 是利用思源api获取的不用担心跨域,但这里你也可以使用 fetch 获取数据,不过小心跨域 const parser = new DOMParser(); const dom = parser.parseFromString(resText, "text/html"); console.log(dom) const r ={ title: elText(dom,'title'), subtitle: "nil", updated: "nil", entryList: Array.from(dom.querySelectorAll("li")).map((entry) => { return { title: elText(entry,'h2'), published: entry.querySelector('span').textContent.split('\n')[10].trim(), //summary: elText(entry,'p'), link: xssDefend(entry.querySelector("a").getAttribute("href")), //这个是用来识别文档的唯一性的,也是导航到文档的链接 }; }).reverse(), }; return r };
思源笔记 v3.1.29 发布,改进细节
published:2025-05-13 14:45
published:2025-05-13 14:45
published:2025-05-13 14:45
published:2025-05-13 14:45

node 版本管理

fnm(推荐使用) :全平台 / 通过二进制安装 node
bash
# 第一次使用 fnm 时需要安装 winget install Schniz.fnm # configure fnm environment fnm env --use-on-cd | Out-String | Invoke-Expression ## 之后直接使用对应版本就行 fnm use v24.0.1 # 修改默认使用什么版本 fnm default v24.0.1 # verifies the right Node.js version is in the environment node -v # should print `v24.0.1` # 启用 pnpm corepack enable pnpm # verifies the right npm version is in the environment pnpm -v # should print `10.8.3`
bash
# 第一次使用 fnm 时需要安装 winget install Schniz.fnm # configure fnm environment fnm env --use-on-cd | Out-String | Invoke-Expression ## 之后直接使用对应版本就行 fnm use v24.0.1 # 修改默认使用什么版本 fnm default v24.0.1 # verifies the right Node.js version is in the environment node -v # should print `v24.0.1` # 启用 pnpm corepack enable pnpm # verifies the right npm version is in the environment pnpm -v # should print `10.8.3`
最近在开发 NoteCalc ,他有一个类似 Playground 的界面
光速了解HTML shadowrootmode等属性的作用
published:Mon, 28 Apr 2025 08:35:35 +0000
template元素新支持了shadowrootmode、shadowrootserializable等4个新的HTML属性,花1~2分钟音速了解下他们的作用吧。
告别transform,是时候直接使用scale, rotate属性啦
published:Tue, 29 Apr 2025 08:28:08 +0000
你还在使用transform属性实现变换效果吗?大人,时代变了,试试直接使用scale, rotate, translate属性吧,谁用谁喜欢。
feed:https://www.zhangxinxu.com/wordpress/feed
cron:8 20 * * 5
光速了解HTML shadowrootmode等属性的作用
published:Mon, 28 Apr 2025 08:35:35 +0000
template元素新支持了shadowrootmode、shadowrootserializable等4个新的HTML属性,花1~2分钟音速了解下他们的作用吧。
光速了解HTML shadowrootmode等属性的作用
published:Mon, 28 Apr 2025 08:35:35 +0000
template元素新支持了shadowrootmode、shadowrootserializable等4个新的HTML属性,花1~2分钟音速了解下他们的作用吧。
光速了解HTML shadowrootmode等属性的作用
published:Mon, 28 Apr 2025 08:35:35 +0000
template元素新支持了shadowrootmode、shadowrootserializable等4个新的HTML属性,花1~2分钟音速了解下他们的作用吧。
published:Mon, 28 Apr 2025 08:35:35 +0000
published:Mon, 28 Apr 2025 08:35:35 +0000
published:Mon, 28 Apr 2025 08:35:35 +0000
template元素新支持了shadowrootmode、shadowrootserializable等4个新的HTML属性,花1~2分钟音速了解下他们的作用吧。
template元素新支持了shadowrootmode、shadowrootserializable等4个新的HTML属性,花1~2分钟音速了解下他们的作用吧。
告别transform,是时候直接使用scale, rotate属性啦
published:Tue, 29 Apr 2025 08:28:08 +0000
你还在使用transform属性实现变换效果吗?大人,时代变了,试试直接使用scale, rotate, translate属性吧,谁用谁喜欢。
告别transform,是时候直接使用scale, rotate属性啦
published:Tue, 29 Apr 2025 08:28:08 +0000
你还在使用transform属性实现变换效果吗?大人,时代变了,试试直接使用scale, rotate, translate属性吧,谁用谁喜欢。
告别transform,是时候直接使用scale, rotate属性啦
published:Tue, 29 Apr 2025 08:28:08 +0000
你还在使用transform属性实现变换效果吗?大人,时代变了,试试直接使用scale, rotate, translate属性吧,谁用谁喜欢。
published:Tue, 29 Apr 2025 08:28:08 +0000
published:Tue, 29 Apr 2025 08:28:08 +0000
published:Tue, 29 Apr 2025 08:28:08 +0000
你还在使用transform属性实现变换效果吗?大人,时代变了,试试直接使用scale, rotate, translate属性吧,谁用谁喜欢。
你还在使用transform属性实现变换效果吗?大人,时代变了,试试直接使用scale, rotate, translate属性吧,谁用谁喜欢。

网站文档转 md文档分享 ai 提示词

md
请帮我将下面的html文档转成对应的 markdown 文档方便分享 注意 1. 要处理相对路径为对应的绝对路径,包括链接和图片的 2. 请输出 ‍```md 内容‍``` 这种格式的 网页源地址: 网页内容:
md
请帮我将下面的html文档转成对应的 markdown 文档方便分享 注意 1. 要处理相对路径为对应的绝对路径,包括链接和图片的 2. 请输出 ‍```md 内容‍``` 这种格式的 网页源地址: 网页内容:

最近实践

好文推荐​ 浏览器插件开发最佳实践 https://wxt.dev/guide/installation.html

良好的错误信息显示

这是 ts 的错误信息显示界面
这是 vue 的错误信息显示界面
这是 NoteCalc 的错误信息显示界面
最佳实践就是要方便用户定位错误位置,如果有行号相关的数据的话最好就是标红线并且错误信息中提示行号。
最佳实践就是要方便用户定位错误位置,如果有行号相关的数据的话最好就是标红线并且错误信息中提示行号。
这是 NoteCalc 的错误信息显示界面
这是 vue 的错误信息显示界面
这是 ts 的错误信息显示界面

操作界面和即时的反馈

最好就是要能够做到所见即所得,退而求其次就是分栏预览。
所见即所得的难度还是太高了,所以我经过一番尝试挣扎之后还是选择了分栏预览。
vue 和 ts 也是这样。
vue 和 ts 也是这样。
首先我们看一些常见的 playground 的网页,以 https://www.typescriptlang.org/play/https://play.vuejs.org/ 为例。
所见即所得的难度还是太高了,所以我经过一番尝试挣扎之后还是选择了分栏预览。
最好就是要能够做到所见即所得,退而求其次就是分栏预览。

分享

毫无疑问,几乎所有的 playground 都具有分享功能。
另外不知道你们有没有注意到这些网页的地址栏,当你点击分享的时候他就变成了一长串,分享的数据就在这里面
实现这个功能有一个需要注意的点就是你的参数肯定要是url安全的这样你就基本只能使用base64,另外还应该足够的短(我借鉴 ts 选择了 lz-string 这个库来压缩字符长度)
实现这个功能有一个需要注意的点就是你的参数肯定要是url安全的这样你就基本只能使用base64,另外还应该足够的短(我借鉴 ts 选择了 lz-string 这个库来压缩字符长度)
另外不知道你们有没有注意到这些网页的地址栏,当你点击分享的时候他就变成了一长串,分享的数据就在这里面
毫无疑问,几乎所有的 playground 都具有分享功能。
在这里记录一下我的实践

相关文章