Articles
全部文章
新 Mac 先别急着装软件：系统自带的办公功能已经能做什么
从 PDF、ZIP、截图录屏到图片转换、扫描签名和隔空投送，逐项判断 macOS 自带工具能做到哪里，以及什么时候才真正需要安装第三方软件。
设计师和前端都该有的图片压缩流程：从原图到线上资源
网页图片不应该靠每个人手动压一遍。设计师可以用 TinyPNG、ImageOptim、XnConvert、HandBrake 这类免费或低成本工具解决日常压缩，前端再用 sharp 和 ffmpeg 把项目资源统一生成线上文件。
2026 免费 Mac 软件榜：Windows 转 Mac 必装 15 款
2026 年 7 月免费 Mac 软件榜：为 Windows 转 Mac 用户精选 15 款免费工具，按第一天、第一周和进阶需求给出安装顺序，并附官方榜单。
pnpm 实战使用指南：从安装、迁移到 Workspace
pnpm 适合同时维护多个前端项目的开发者。它通过全局内容寻址存储复用依赖，能减少 node_modules 占用、提升安装速度，并用更严格的依赖结构减少幽灵依赖问题。
AppCleaner 替代 CleanMyMac 卸载功能：免费够用吗
如果你的需求只是卸载 App 并检查常见残留，AppCleaner 是免费的轻量方案；本文说明它能做什么、不能做什么，以及什么时候仍值得考虑完整维护工具。
用了 10 个月 Claude Code，我学到了什么
从技能、钩子到 MCP 管理，这篇文章归纳了长期使用 Claude Code 后最值得分享的配置哲学与实战技巧。把配置当成微调，而非架构工程。
Hookify 完全使用指南：用对话生成 Claude Code 钩子，告别手写 JSON
你知道 Claude Code 的 Hooks 钩子系统很强大，却因为要手写嵌套 JSON 太繁琐一直没去配置？这篇文章就是为此而写的。 Hookify 是 Anthropic 官方出品的插件，让你用一句自然语言对话就能生成钩子规则，无需重启立即生效。本文从安装到实战，完整覆盖三
从 Windows 转 Mac，第一天你会遇到这 5 个问题
鼠标滚轮方向反了、找不到 Delete 键、复制粘贴快捷键变了……这篇文章先解决 Windows 转 Mac 第一天最容易卡住的 5 个问题，再告诉你下一步该去哪几个设置和工具。
Git worktree：一个让我少用很多次 stash 的 Git 命令
还在用 stash + checkout 在不同分支之间来回切换？这篇文章用真实开发场景讲清 git worktree 的作用、常用命令、和 clone的区别，以及一套适合日常开发的工作流。
Claude + Chrome DevTools + MCP 完整指南：让 AI 直接“操作浏览器”
《Claude+Chrome DevTools+MCP实现AI直接操作浏览器指南》介绍了如何通过Model Context Protocol(MCP)协议让Claude AI直接控制浏览器操作。MCP是Anthropic公司2024年推出的AI与外部工具交互的标准协议，而chro
Cron 是什么？从 0 到精通这门“时间语言”
Cron是一种用于定义定时任务执行时间的表达式语言，广泛应用于自动化任务如数据清理、报表生成等场景。文章介绍了Cron的两种格式（Unix标准5字段和扩展6字段），重点说明NestJS必须使用6字段格式。详细解析了Cron的语法结构，包括特殊符号(*,-,/)的含义和常见表达式示
![[特殊字符]为什么不建议全局安装 Claude Code？官方推荐的最佳实践与代理配置指南](/images/csdn/u012446963/claude-code/image-01.png)
[特殊字符]为什么不建议全局安装 Claude Code？官方推荐的最佳实践与代理配置指南
在使用 Claude Code CLI 时，很多开发者第一反应是全局安装（npm install -g @anthropic-ai/claude-code）。这样无论在哪个目录都能直接敲 claude，看起来很方便。但官方其实并不推荐全局安装，而是建议在项目里本地安装。下面就来拆
NestJS 装饰器：类装饰器和方法装饰器怎么分
用控制器和服务的常见例子解释 NestJS 类装饰器、方法装饰器、参数装饰器分别作用在哪一层，并说明它们在一次请求里的执行位置。
Git 提交规范：Husky + Commitlint 实践
结合当前 Husky 和 Commitlint 官方文档，说明如何用 `husky init`、commit-msg hook 和 Conventional Commits 约束提交信息，并解释这套流程在多人协作里真正解决什么问题。
Motion for React 完整指南：动画、手势与退出效果
从安装和 motion 组件开始，系统掌握 Motion for React 的 variants、拖拽手势、MotionValue、useTransform 与 AnimatePresence，并了解 Next.js 使用方式和性能边界。
css中的3d使用：深入理解 CSS Perspective 与 Transform-Style
和是 CSS 3D 变换中不可或缺的两个属性。赋予了场景深度，模拟了观察者的视觉体验；而则决定了子元素如何在 3D 空间中呈现。掌握这两个属性的用法，将为您的网页设计带来更丰富的视觉层次和更具吸引力的交互体验。现在，不妨动手尝试一下，释放您的创意，打造出令人惊叹的 3D 世界吧！
深入理解CSS对齐属性：align-items, align-self, justify-items, justify-self
属性作用对象方向适用布局覆盖关系容器垂直Flex/Grid被align-self覆盖align-self子项垂直Flex/Grid覆盖容器水平Grid被覆盖子项水平Grid覆盖记忆口诀想调垂直用align，想调水平用justify容器设置用-items，单个调整用-selfGri
重排与重绘：CSS 动画为什么会卡
把浏览器渲染中的样式计算、布局、重绘和合成拆开解释，说明哪些 CSS 属性更容易触发布局开销，以及为什么 transform 和 opacity 通常更适合做动画。
CSS 继承与重置：initial、inherit、unset 怎么选
把 initial、inherit、unset 的差异放到真实 CSS 场景里讲清楚，并说明哪些属性默认会继承、哪些不会，避免把重置和继承写反。
深入理解 IntersectionObserver：让前端滚动监听更高效
是浏览器提供的 API，用于监听目标元素是否进入或离开可视区域（视口）或某个指定的父容器。它的特点是：✅高效：相比scroll事件，它不会频繁触发，提高性能。✅易用：不需要手动计算。✅灵活：可以自定义监听范围（root）、触发阈值（threshold）、提前触发（rootMarg
rem 是什么：1rem 为什么常等于 16px
解释 rem 与 html 根字体大小的关系，说明为什么浏览器里 1rem 常常等于 16px，以及什么时候该改根字号、什么时候不该用 62.5% 方案。
z-index 为什么失效：理解 Stacking Context
解释 stacking context 的独立分层规则，说明为什么元素写了更大的 z-index 仍然会被遮住，以及 position、opacity、transform、isolation 等属性何时会创建新的层叠上下文。
Tailwind CSS 中的 spacing 详解
（间距）是 Tailwind CSS 里的一个核心概念，它主要用于控制 padding。Tailwind 提供了一套默认的。Tailwind 让布局变得简单直观！Tailwind 预定义了一组。如果默认值不够用，可以在。如果要在 CSS 里使用。
玩转 Tailwind CSS：深入解析函数与指令
主要用于引入框架样式、组织代码、复用样式等。你可以把它们想象成 Tailwind 版的“魔法咒语”，帮助你写出更整洁的 CSS。如果你想在 CSS 里使用 Tailwind 配置的颜色、间距等，可以用。，可以让你的代码更加优雅、可维护。如果你正在使用 Tailwind CSS，可
React Hydration Failed：原因、定位与修复
系统排查服务器 HTML 与客户端首次渲染不一致的问题，覆盖时间、随机数、浏览器 API、无效 HTML、客户端存储、第三方扩展和 suppressHydrationWarning 的边界。
Next.js Server Actions 与 Fetch 怎么选
比较表单 Server Action、客户端 fetch 和直接调用后端 API 的边界，说明认证、渐进增强、缓存刷新、文件上传与公开 API 场景下的选择方法。
理解 React Portal：让你的组件跳出层级限制
在 React 中，组件默认是渲染在父组件的 DOM 树中的。比如你有一个父组件，它包含了多个子组件，每个子组件都渲染在父组件的 HTML 结构里。这种渲染方式是 React 的常规操作。然而，有时候我们需要让某些组件脱离父组件的 DOM 结构，单独渲染到其他位置。比如当我们使用
Strapi 5 populate 完整指南：关联、媒体与嵌套查询
解释 Strapi 5 REST API 为什么默认不返回关联数据，并通过 populate=*、字段选择、嵌套 populate 和 qs 构造器展示可维护的查询方式与性能边界。
Strapi 5 入门：安装、内容建模与 API 权限
从创建 Strapi 5 项目开始，说明 Collection Type、Single Type、Component 和 Dynamic Zone 的选择，并完成发布、权限配置与 REST API 验证。
深入理解 DOM 和 CSSOM：网页渲染的核心
DOM 是浏览器用于表示网页内容和结构的对象模型。它将网页的 HTML 或 XML 文档表示为一个树形结构，每个部分（如元素、文本和属性）都成为一个节点。通过 JavaScript，开发者可以操作这些节点，从而动态地修改页面的内容和结构。CSSOM 是浏览器用来表示 CSS 样式
VS Code 快捷键指南：少用鼠标的高频操作
按命令面板、文件切换、编辑、多光标、终端和侧栏管理六类整理 VS Code 最常用快捷键，重点解决“记不住太多快捷键，到底先学哪几个”的问题。
Git 入门工作流：add、commit、pull、push
把 Git 最常用的本地与协作流程拆成工作区、暂存区、本地仓库和远端仓库，说明 add、commit、fetch、pull、push、branch、restore 在日常开发里的正确用法。
Linux 常用命令：文件、进程、网络速查
按文件目录、文本查看、进程排查、网络连接和环境变量五类整理 Linux 常用命令，重点讲开发与运维里最常见的 ls、cd、cp、mv、rm、find、ps、top、curl、ssh、ip。
Next.js Image 指南：sizes、fill 和远程图片
基于当前 Next.js Image 官方文档，解释 width/height、fill、sizes、preload、placeholder、remotePatterns 的作用，以及哪些旧教程里的 layout、objectFit 写法已经不该继续照搬。
JavaScript Event Loop：任务、微任务与渲染顺序
通过调用栈、任务队列、微任务检查点和浏览器渲染流程，解释 Promise、queueMicrotask、setTimeout 与 async/await 的真实执行顺序和常见性能陷阱。
React Hooks 完整指南：状态、副作用与 Context
用一篇文章理清 useState、useEffect、useReducer、useContext 和自定义 Hook 的职责、选择方法与常见错误，包含可验证的 TypeScript 示例。
React 组件设计：组合、抽象与复用边界
从函数组件、props 和组合模式出发，说明什么时候值得抽象组件、如何避免过度封装，并给出受控组件、children、状态提升和自定义 Hook 的选择方法。
MySQL REGEXP 正则查询：匹配、提取与替换
以 MySQL 8 为准讲解 REGEXP、REGEXP_LIKE、REGEXP_SUBSTR、REGEXP_REPLACE 的常见写法，并说明大小写、转义、索引和跨数据库差异。
如何通过命令行解锁 macOS Gatekeeper（并恢复默认设置）
Gatekeeper 是 macOS 中的一项安全机制，它会阻止没有通过 Apple 审核的应用程序运行。默认情况下，Gatekeeper 只允许安装来自或经过 Apple Developer ID 认证的开发者的应用程序。
系统完整性保护 (SIP) 及其启用/禁用的详细指南
Apple 在 macOS El Capitan (10.11) 中引入了 SIP（系统完整性保护），旨在保护系统文件、核心扩展和某些进程免受恶意软件或用户误操作的干扰。通过 SIP，Apple 提供了更强大的系统安全保护，但也限制了用户对文件和进程的控制能力。（系统完整性保护）
Docker 常用命令：容器、镜像、日志与清理
按实际排障流程整理 Docker 容器、镜像、日志、网络、数据卷和磁盘清理命令，解释 run、exec、logs、inspect 与 prune 的使用边界。
Dockerfile 与 .dockerignore：Node.js 镜像构建指南
从构建上下文、Dockerfile 分层和多阶段构建讲起，给出 Node.js 项目的 Dockerfile 与 .dockerignore 示例，并解释缓存、镜像体积和敏感文件边界。
Docker中 localhost 与 0.0.0.0 的区别详解
localhost0.0.0.0在 Docker 中，选择绑定地址 (localhost或0.0.0.0) 直接影响到服务的可访问性。localhost适用于仅容器内部访问的服务，而0.0.0.0则用于需要容器外部（包括宿主机和其他网络设备）访问的服务。在实际开发和部署中，选择正
反向代理是什么：Nginx 配置与排障指南
解释正向代理与反向代理的区别，并通过 Nginx proxy_pass、请求头、WebSocket、超时和日志配置展示应用上线时的常见做法。
for 循环里 var 和 let 为什么结果不同
用经典的 `for` 循环闭包例子解释为什么 `var` 会得到 `3 3 3`，而 `let` 会得到 `0 1 2`，并说明函数作用域、块级作用域和 IIFE 在这里分别扮演什么角色。
JavaScript 中 var 和 let 的作用域差异解析
作用域定义了变量和函数的可访问范围。函数作用域：变量在整个函数内都有效，通常由var创建。块级作用域：变量只在其所在的代码块内有效，通常由let和const创建。在 JavaScript 中，var和letvar声明的变量具有函数作用域，这意味着它在整个函数内都有效。由于var的
127.0.0.1、localhost 和 0.0.0.0 的区别
从回环地址、本机监听和所有网卡监听三个角度解释 127.0.0.1、localhost 和 0.0.0.0 的差异，重点说明为什么本地能访问、局域网却访问不到，以及 hosts 文件里的两种写法有什么区别。
JavaScript 数组与遍历：map、splice、for of
按是否修改原数组梳理 map、filter、reduce、find、slice、splice、sort、toSorted，以及 for、forEach、for of、for in 的选择方法。
TypeScript 里 as 和 satisfies 怎么选
解释 TypeScript 中 `as`、尖括号断言和 `satisfies` 的差异，重点说明为什么 `satisfies` 更适合对象结构校验，而 `as` 更像是在告诉编译器“先按我说的算”。
Three.js 模型动画：GSAP 与 AnimationMixer 怎么配合
用车门开关这类真实例子解释在 Three.js 里什么时候直接用 GSAP 控制部件，什么时候应该保留模型自带动画并交给 AnimationMixer。
Homebrew 使用指南：为开发者和日常用户量身定制的包管理器
Homebrew 是 macOS 和 Linux 平台上强大的包管理工具，它让软件的安装、更新和卸载变得简单而优雅。如果你是开发者或想高效管理工具，这篇指南将帮助你快速上手并掌握 Homebrew 的使用技巧。
pnpm 替换 npm：迁移步骤与常见坑
从 lockfile、node_modules、脚本兼容和 CI 四个方面讲清项目从 npm 迁移到 pnpm 的步骤，并说明什么时候不该启用 shamefully-hoist。
JavaScript % 余数运算：负数、取模与实用场景
解释 JavaScript % 返回余数而非数学取模，展示负数归一化、奇偶判断、循环索引、角度归一化和 BigInt 的正确写法。
JavaScript 解构与对象复制：浅拷贝、深拷贝
讲清对象和数组解构、展开语法的浅拷贝边界，并比较 structuredClone、JSON 序列化与自定义深拷贝的适用场景。
理解与掌控副作用：前端开发（Vue 3 和 React）中的关键环节
在现代前端开发中，副作用（Side Effects）是一个经常被提到的概念。它指的是那些在执行计算或操作时，不仅影响当前函数的输出，还可能对外部世界产生某些影响的操作。常见的副作用包括：数据请求、事件监听、定时器、DOM 操作等。处理副作用是前端开发中非常重要的一部分，尤其是在构
Vue 3 响应式：ref、reactive 和 toRefs 怎么选
围绕基本类型、对象、解构丢失响应性这三个高频问题，解释 Vue 3 里什么时候用 ref，什么时候用 reactive，以及 toRefs 到底解决什么。
Next.js 路由指南：App Router 常见模式
基于当前 Next.js App Router，梳理静态路由、动态路由、catch-all、route groups、parallel routes 和 route handlers 的使用场景，并说明什么时候还会遇到 Pages Router。
Next.js 连接 Strapi 5：数据获取、缓存与安全
在 Next.js App Router 中封装 Strapi 5 REST 请求，处理 populate、缓存、错误、草稿预览和 API Token，避免把私密凭据暴露到客户端。
Next.js Server 与 Client Components 怎么选
解释 App Router 中 Server Component 与 Client Component 的执行位置、数据获取、序列化边界和 hydration，并给出缩小客户端 bundle 的组件拆分方法。
Canva Create12 个强大功能
Canva 在其最新的 Canva Create 活动中发布了一些令人兴奋的新功能，已经成为 Photoshop 的强大替代品。
硬链接（Hard Link）技术概述
在文件系统中，每个文件都会有一个 inode，该 inode 存储了文件的元数据（如文件大小、权限等）以及文件数据在磁盘上的位置。当你创建一个硬链接时，操作系统并不会复制文件的数据内容，而是为文件创建一个新的目录项（即一个新的文件名），并将其指向原文件的 inode。并不直接包含
pnpm vs npm vs yarn: 对比、优缺点及使用方法
最常见的包管理工具有 npm、yarn 和 pnpm，它们都能帮助开发者管理项目的依赖包，并提供丰富的功能。不过，它们的工作原理有所不同，每个工具在性能、磁盘空间利用、依赖管理等方面都有优缺点。
EditorConfig 与 Prettier：统一团队代码风格
说明 .editorconfig 和 Prettier 各自负责什么、配置如何覆盖，并给出适用于前端项目的配置、脚本和 CI 检查方法。
前端项目配置文件指南：env、Node、Git 与 ESLint
系统梳理 .env、.nvmrc、package.json engines、.gitignore、Babel 和 ESLint flat config 的职责、安全边界与团队协作方式。
如何快速修改Adobe Animate(以前称为 Flash) 库中的原件名称
这段脚本的作用是遍历 Adobe Animate (以前称为 Flash) 中当前文档的库（Library）项目，检查并替换符合条件的项目名称的前缀
console.dir 和 console.log 有什么区别
说明 console.log 与 console.dir 在浏览器 DevTools 里的实际差异，重点回答对象调试、DOM 节点查看和 Node.js 环境下什么时候该用哪一个。
可选链 ?.: 什么时候该用，什么时候别用
用属性访问、数组索引和函数调用三个场景讲清 JavaScript 可选链 `?.` 的行为，并解释它与空值合并、逻辑或和错误兜底之间的边界。
Tailwind CSS 4 入门：安装、主题与响应式
以 Tailwind CSS 4 为基础，从 CLI 安装、CSS 导入和 utility class 开始，讲清响应式、状态变体、主题变量、类名扫描和组件抽取边界。