Archives
All the articles I've archived.
-
为Markdown文档添加 Python 在线运行功能
集成 Pyodide 让 MkDocs 文档中的 Python 代码可以在浏览器中直接运行,打造交互式技术文档,提升读者学习体验和文章互动性。
-
使用bun构建一个简易cli工具
🎯端口被占用是开发中常见的问题。使用 Bun 创建跨平台命令行工具,支持 Windows、macOS、Linux 端口占用进程查找和终止,是 Bun 入门实战的绝佳项目。
-
TypeScript 实现 Rust 风格的模式匹配:优雅的条件分支处理
借鉴 Rust 的 match 语法,在 TypeScript 中实现类型安全的模式匹配工具,让复杂的条件判断代码更加清晰和优雅。
-
Bun 实现静态文件服务器:支持目录浏览的完整方案
利用 Bun 的高性能特性和 EJS 模板引擎,打造支持文件浏览、目录导航的静态资源托管服务器,轻量级的本地开发利器。
-
Bun + WebRTC 打造实时直播平台:从信令服务到屏幕共享
使用 Bun 构建 WebSocket 信令服务器,结合 WebRTC 技术实现屏幕共享直播、弹幕互动等功能,完整的 P2P 视频流传输解决方案。
-
CSS Grid + nth-child:极简实现搜索表单展开收起
利用 CSS Grid 布局和 nth-child 选择器,无需复杂 JavaScript 即可实现表格查询表单的展开收起功能,代码简洁优雅。
-
Vue3 + iframe 优雅通讯方案:基于 PostMessage 和 Mitt 的实现
封装 postMessage 通讯机制,结合 mitt 事件总线和 Promise 风格,在 Vue3 中打造类型安全、易于维护的 iframe 跨窗口通讯解决方案。
-
React 服务式组件实现:基于 ReactDOM.createRoot 的 Loading 方案
使用 React 18 的 createRoot API 实现函数式调用的 Loading 组件,支持多次调用计数管理,让全局状态管理更加优雅。
-
Vue3 模板复用新思路:useReusableTemplate 实战
借鉴 Angular 的模板复用思想,通过自定义 Hook 在 Vue3 中实现无需封装组件即可复用模板代码,让代码更简洁、更灵活。
-
Angular 自定义 Webpack 配置:扩展构建能力实战指南
使用 @angular-builders/custom-webpack 突破 Angular CLI 的限制,自定义 Webpack 配置,添加 loader 和插件,满足项目的个性化构建需求。
-
Vue3 服务式组件设计:用 Composition API 打造优雅的 Toast
利用 Vue3 的 createVNode 和 render 函数实现服务式 Toast 组件,深入理解 Composition API 的强大能力和组件化的最佳实践。
-
Vue3 与 Web Components 完美融合:defineCustomElement 深度实践
探索 Vue3 的 defineCustomElement API,学习如何将 Vue 单文件组件转换为标准 Web Components,实现跨框架的组件复用。
-
Web Components 实战:从零打造原生对话框组件
使用原生 Web Components 技术开发对话框组件,深入理解 Shadow DOM、自定义元素等核心概念,探索前端组件化的未来方向。
-
Three.js 打造浪漫雪景:粒子系统与动画实战
使用 Three.js 粒子系统创建逼真的 3D 雪花飘落效果,通过 BufferGeometry 和自定义着色器实现高性能的冬日雪景场景。
-
Vite + Vue3 优雅使用 SVG 图标:自动化雪碧图方案
通过自定义 Vite 插件自动将 SVG 图标转换为雪碧图,配合 Vue3 组件封装,实现高性能、易维护的 SVG 图标解决方案。
-
树莓派入门实战:使用 Python 控制 LED 灯闪烁
从树莓派 GPIO 基础开始,通过 Python 和 PyCharm 远程开发控制 LED 灯闪烁,带你踏入硬件编程的奇妙世界。
-
Vue2 电梯导航组件:基于 ElementUI 的锚点定位方案
结合 ElementUI 和 velocity-animate 打造流畅的电梯导航组件,支持点击跳转和滚动联动,完美解决长表单页面的导航需求。
-
IntersectionObserver 实战:打造优雅的图片懒加载与文字动效
利用强大的 IntersectionObserver API 实现图片懒加载和文字动态下划线效果,性能优越、代码简洁,让你的页面滚动体验更上一层楼。
-
Electron 自动更新完整实现:从检测到安装的全流程
基于 electron-updater 实现桌面应用自动更新功能,包含版本检测、下载进度、强制更新等完整流程,让你的应用始终保持最新版本。
-
Electron 静默打印解决方案:HTML 与 PDF 打印实战
告别 window.print 的弹窗烦恼!使用 Electron 实现 HTML 和网络 PDF 的静默打印功能,支持自定义打印机选择,完整的桌面应用打印解决方案。
-
打造炫酷音频可视化:Web Audio API 与 Canvas 实战
使用 Web Audio API 和 Canvas 实现动态音频频谱可视化效果,将音乐转化为动态跳动的柱状图,打造专属的网页音乐播放器。
-
Vue2 自定义拖拽指令:优雅实现元素拖动功能
基于 Vue2 自定义指令和 CSS Transform 实现流畅的元素拖拽功能,支持边界检测和位置记忆,一个指令搞定所有拖动需求。
-
纯前端实现相机拍照:getUserMedia API 实战指南
使用 JavaScript 的 getUserMedia API 实现浏览器调用相机拍照功能,包含视频流获取、Canvas 截图、图片下载等完整实现,轻松打造 Web 相机应用。
-
Vue2 服务式组件开发:打造优雅的全局 Loading
从零实现 Vue2 服务式 Loading 组件,深入理解 Vue.extend、$mount 等核心 API,掌握函数式调用组件的设计模式,提升代码的优雅度和复用性。
-
神奇的动态 Favicon:让网页图标播放视频
利用 Canvas 和 Video API 实现动态 Favicon 效果,让你的网页标签页图标变成会动的视频播放器,为用户带来前所未有的视觉体验。
-
揭秘 Koa2 洋葱模型:异步中间件的优雅实现
深入剖析 Koa2 的洋葱模型设计理念,通过手写核心代码理解 async/await 在中间件中的巧妙应用,掌握现代 Node.js 框架的精髓。
-
深入理解 Express 中间件机制:从零实现一个轻量级框架
通过手写代码深入剖析 Express 中间件的核心原理,从 next 函数的实现到完整的路由系统,带你彻底理解这个轻量级 Node.js 框架的设计精髓。