眼睛随鼠标运动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>眼睛跟随鼠标</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #f0f0f0 ...
skill的开发和使用
一、Skill 是什么
Skill 是一个文件夹，核心是 SKILL.md 文件，使用 YAML frontmatter + Markdown 正文 的格式。当 LLM 判断需要某个 Skill 时，会调用 skill 工具加载它，SKILL.md 的全部内容会作为 tool-result 注入到对话上下文中，LLM 读到后自主决定怎么执行。
my-skill/├── SKILL.md # 主文件（必须）├── scripts/ # 可执行脚本（可选）├── references/ # 详细参考文档（可选，按需加载）├── resources/ # 模板、清单等资源（可选）└── examples/ # 示例（可选）
关键机制：Skill 本质是”知识注入”——它不会动态生成新工具，而是把指令文本注入到 LLM 的上下文中，LLM 用已有的工具（bash、read、edit 等）来执行这些指令。
二、Frontmatter：
决定 Skill 是否被加载的”门面”
2.1 必填字段
字段
作用
示例
name
唯一 ...
openclaw 卸载(Mac版)
适用于 macOS 系统，一键清理所有 OpenClaw 相关文件、进程和数据。
第一步：停止并删除守护进程bash
停止 launchd 守护进程（如果存在）launchctl unload ~/Library/LaunchAgents/com.openclaw.gateway.plist 2>/dev/nulllaunchctl bootout gui/$(id -u)/com.openclaw.gateway 2>/dev/null
删除 plist 文件rm -f ~/Library/LaunchAgents/com.openclaw.*.plist
第二步：杀掉所有运行中的进程bash
强制停止所有 openclaw 相关进程pkill -9 -f “openclaw”pkill -9 -f “clawdbot”pkill -9 -f “moltbot”
验证进程已停止pgrep -l -f “openclaw|clawdbot|moltbot” ...
openclaw 卸载(Mac版)
📦 第一部分：环境准备1.1 安装 Homebrew（Mac 包管理器）打开终端（Command + 空格 → 输入”终端”），执行以下命令：
bash
/bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
按提示选择下载源（推荐选 1）
输入开机密码（输入时不显示，正常现象）
等待安装完成
验证安装：
bash
brew –version
1.2 安装 Node.jsbash
brew install node@22
验证安装：
bash
node --version # 应显示 v22.x.x
npm --version # 应显示 10.x.x
1.3 配置国内镜像加速（提升下载速度）bash
npm config set registry https://registry.npmmirror.com
🚀 第二部分：安装 OpenClaw2.1 全局安装 OpenClawbash
npm install -g ...
前端策略模式
设计模式单例模式单例模式确保一个类只有一个实例，并提供一个全局访问点class Singleton {
constructor(name) {
if (!Singleton.instance) {
this.name = name;
Singleton.instance = this;
}
return Singleton.instance;
}
static getInstance(name) {
if (!Singleton.instance) {
Singleton.instance = new Singleton(name);
}
return Singleton.instance;
}
sayHello() {
console.log(`Hello, I am ${this.name}`);
& ...
浏览器API
浏览器API会持续更新
使用需要判断浏览器的兼容性，在部分浏览器上可能不支持，且调用浏览器的部分api需要进行浏览器授权。
调用浏览器摄像头
<button type="button" id="start-camera">打开摄像头</button>
<button type="button" id="snapshot-btn">拍照</button>
<video id="preview-box" width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
const st ...
了解SSE和WebSocket
SSE介绍什么是SSEServer-Sent Events（SSE）是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比，SSE提供了更高效和实时的数据推送机制。SSE基于HTTP协议，允许服务器将数据以事件流（Event Stream）的形式发送给客户端。客户端通过建立持久的HTTP连接，并监听事件流，可以实时接收服务器推送的数据。
SSE的主要特点
简单易用：SSE使用基于文本的数据格式，如纯文本、JSON等，使得数据的发送和解析都相对简单。
单向通信：SSE支持服务器向客户端的单向通信，服务器可以主动推送数据给客户端，而客户端只能接收数据。
SSE的简单实现node
// 引入相关模块
const http = require('http');
// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
// 设置跨域响应头
res.setHe ...
打字机效果和拉拽方框伸缩
打字机效果今年最火的应该就是chatGpt,在chatgpt显示答案时，会有打字机效果，会将自己的答案以单个字的形式呈现在页面上。在上班摸鱼时，简单的写了一下当做自己联系。主要是使用css中animation进行实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
&l ...
简易时钟翻页
今天周五，老板请假了也没有开周会，手上也没有什么事，就在工位刷掘金。看见掘金上有篇帖子写了一个时钟的翻页效果。于是打发时间自己也写了一个。和掘金上面的不同效果，只是做了一个简易的版本。还没来得及看贴子代码的实现。但是看效果要比我的做的精致。下周再去看下别人的具体代码。
div效果
<div>时：<span class="h"></span></div>
<div>分：<span class="m"></span></div>
<div>秒：<span class="s"></span></div>
<div>翻页时钟⏰</div>
<div class="clock">
...
nest与mongodb构建node服务端应用
最近在使用nest.js和mongodb数据库一起构建node应用,记录下主要步骤。因为在过程中也遇见了一些问题，简单做个记录。
安装nest.js安装node需要注意的是node的版本需要是v16以上，否则在运行nest时会出现node版本不匹配问题。如果不匹配可以使用 nvm或者n工具切换node版本。
安装nest.js 使用npm包形式安装nest脚手架。 $ npm i -g @nestjs/cli
$ nest new project-name project-name为你创建的项目名 官网还提供了其他的安装方式 NestJs中文官网链接
安装Mongodb服务前往mongodb官网下载对应的mongo版本 Mongodb官网,选择产品(Products)->社区版本(Community Server),企业版要钱社区版免费。
选择mongodb服务版本 最好选择v5及以上版本 如果选择版本过低，在与nest链接时，可能会出现版本不匹配提示信息
以下是GPT提供的一些分析以及解决办法 ‘ 这个错误提示表示 MongoDB 驱动程序需要与 Mon ...