Archives

在做一个互动绘本 H5 时遇到的问题：美术给的是整张透明 PNG，按钮画在画布某个角落，前端不想手工量坐标也不想写死百分比。解决办法是用 canvas 读图片的 alpha 通道，扫出非透明像素的最小包围盒，自动生成点击热区——换素材时代码一行不用动。

记录一次从 0 到 1 的 RAG 实战：用 Gemini text-embedding-004 生成向量，Neon Postgres + pgvector 做检索，Groq 做流式生成，把博客文章/站点配置变成可对话的知识库（附核心代码片段）。

通过 Service Worker 实现 Cache First 策略，智能缓存来自资源 的大文件资源，大幅提升加载速度，支持离线访问，降低网络流量消耗。

集成 Pyodide 让 MkDocs 文档中的 Python 代码可以在浏览器中直接运行，打造交互式技术文档，提升读者学习体验和文章互动性。

🎯端口被占用是开发中常见的问题。使用 Bun 创建跨平台命令行工具，支持 Windows、macOS、Linux 端口占用进程查找和终止，是 Bun 入门实战的绝佳项目。

借鉴 Rust 的 match 语法，在 TypeScript 中实现类型安全的模式匹配工具，让复杂的条件判断代码更加清晰和优雅。

利用 Bun 的高性能特性和 EJS 模板引擎，打造支持文件浏览、目录导航的静态资源托管服务器，轻量级的本地开发利器。

使用 Bun 构建 WebSocket 信令服务器，结合 WebRTC 技术实现屏幕共享直播、弹幕互动等功能，完整的 P2P 视频流传输解决方案。

利用 CSS Grid 布局和 nth-child 选择器，无需复杂 JavaScript 即可实现表格查询表单的展开收起功能，代码简洁优雅。

封装 postMessage 通讯机制，结合 mitt 事件总线和 Promise 风格，在 Vue3 中打造类型安全、易于维护的 iframe 跨窗口通讯解决方案。

使用 React 18 的 createRoot API 实现函数式调用的 Loading 组件，支持多次调用计数管理，让全局状态管理更加优雅。

借鉴 Angular 的模板复用思想，通过自定义 Hook 在 Vue3 中实现无需封装组件即可复用模板代码，让代码更简洁、更灵活。

使用 @angular-builders/custom-webpack 突破 Angular CLI 的限制，自定义 Webpack 配置，添加 loader 和插件，满足项目的个性化构建需求。

利用 Vue3 的 createVNode 和 render 函数实现服务式 Toast 组件，深入理解 Composition API 的强大能力和组件化的最佳实践。

探索 Vue3 的 defineCustomElement API，学习如何将 Vue 单文件组件转换为标准 Web Components，实现跨框架的组件复用。

使用原生 Web Components 技术开发对话框组件，深入理解 Shadow DOM、自定义元素等核心概念，探索前端组件化的未来方向。

使用 Three.js 粒子系统创建逼真的 3D 雪花飘落效果，通过 BufferGeometry 和自定义着色器实现高性能的冬日雪景场景。

通过自定义 Vite 插件自动将 SVG 图标转换为雪碧图，配合 Vue3 组件封装，实现高性能、易维护的 SVG 图标解决方案。

从树莓派 GPIO 基础开始，通过 Python 和 PyCharm 远程开发控制 LED 灯闪烁，带你踏入硬件编程的奇妙世界。

结合 ElementUI 和 velocity-animate 打造流畅的电梯导航组件，支持点击跳转和滚动联动，完美解决长表单页面的导航需求。

利用强大的 IntersectionObserver API 实现图片懒加载和文字动态下划线效果，性能优越、代码简洁，让你的页面滚动体验更上一层楼。

基于 electron-updater 实现桌面应用自动更新功能，包含版本检测、下载进度、强制更新等完整流程，让你的应用始终保持最新版本。

告别 window.print 的弹窗烦恼！使用 Electron 实现 HTML 和网络 PDF 的静默打印功能，支持自定义打印机选择，完整的桌面应用打印解决方案。

使用 Web Audio API 和 Canvas 实现动态音频频谱可视化效果，将音乐转化为动态跳动的柱状图，打造专属的网页音乐播放器。

基于 Vue2 自定义指令和 CSS Transform 实现流畅的元素拖拽功能，支持边界检测和位置记忆，一个指令搞定所有拖动需求。

使用 JavaScript 的 getUserMedia API 实现浏览器调用相机拍照功能，包含视频流获取、Canvas 截图、图片下载等完整实现，轻松打造 Web 相机应用。

从零实现 Vue2 服务式 Loading 组件，深入理解 Vue.extend、$mount 等核心 API，掌握函数式调用组件的设计模式，提升代码的优雅度和复用性。

利用 Canvas 和 Video API 实现动态 Favicon 效果，让你的网页标签页图标变成会动的视频播放器，为用户带来前所未有的视觉体验。

深入剖析 Koa2 的洋葱模型设计理念，通过手写核心代码理解 async/await 在中间件中的巧妙应用，掌握现代 Node.js 框架的精髓。

通过手写代码深入剖析 Express 中间件的核心原理，从 next 函数的实现到完整的路由系统，带你彻底理解这个轻量级 Node.js 框架的设计精髓。