- 博客(168)
- 资源 (32)
- 收藏
- 关注
RSS订阅
原创 我的新书《PWA入门与实践》上市了
前言我初接触PWA是在2017年年初，当时参加了一个前端分享会，其中一个主题就是与PWA相关的，介绍了PWA的Service Worker和安装到桌面的能力，以及这门技术未来的发展趋势，听完这个分享后，我就为PWA的一些能力所吸引。Web本身的优势就非常明显，如可分享，可搜索，无须下载，在任何设备上有相同的展示等，现在再加上PWA的能力，让Web在原有的基础上具备了类原生应用程序的功能，这对...
2020-05-07 11:21:17
2451
原创 快速创建 TS MCP 脚手架：gen-mcp
这个模板适合开发命令行工具集成的 MCP 服务，比如与 Claude CLI 集成。通过标准输入/输出流通信适合开发命令行工具可以通过npm link快速全局安装进行测试。
2025-03-28 22:20:30
857
原创 前端技术月刊-2025.2
业界资讯板块复盘 2024 年热门前端项目，梳理年度大事记，介绍了 React Native 0.77、Tailwind CSS 4.0 等新版本发布，还提及微软 Edge 团队弃用 React 改用 Web 组件的动态。技术点精读板块涵盖快手 KMP 鸿蒙落地实践、跨端技术发展探讨、ShadCN UI 解读、去哪儿网前端代码自动生成技术实践，此外还涉及 Vue3 开发技巧、架构转变等内容。
2025-02-11 21:51:37
273
原创 SuperDiff：提供详细差异信息的 JS diff 工具
微信搜索“”关注公众号。Superdiff 是一个专门用于处理对象和数组差异比较的工具库。在日常的开发工作中，我们经常会遇到需要比较两个对象或者数组是否相同，以及找出它们之间具体差异的场景。例如，在前端开发中，当我们需要更新页面数据时，就需要知道哪些数据发生了变化；在后端开发中，数据的同步和更新也离不开对数据差异的精确判断。Superdiff 正是为了解决这些问题而诞生的。
2025-02-11 15:38:01
866
原创 必看！wechat-article-exporter：轻松批量下载公众号文章
微信搜索“”关注公众号。在信息爆炸的时代，我们每天都会接触到大量优秀的微信公众号文章。有时候，我们想要将这些精彩的内容保存下来，以便日后回顾或者分享给更多的人。然而，微信公众号并没有提供直接的批量下载功能，这给我们带来了不少困扰。今天，我要给大家分享一款非常实用的软件——wechat-article-exporter，它能够帮助我们轻松地批量下载微信公众号文章，让你不再为文章的保存而烦恼。
2025-01-21 21:59:12
1648
原创 react-scan：集调试与性能优化于一身，助力 React 项目完美蜕变
微信搜索“”关注公众号。一款能够自动检测和突出显示React应用中导致性能问题的组件的工具——ReactScan。
2025-01-20 15:03:13
933
原创 3 秒克隆专属声音！这款 AI 语音神器 AnyVoice，你绝对不能错过
在这个科技飞速发展的时代，AI技术已经渗透到我们生活的方方面面。今天，就给大家分享一款超厉害的AI语音软件——AnyVoice，它凭借独特的功能，足以让你眼前一亮。
2025-01-18 19:19:33
11704
原创 GSAP - 前端动画领域的全能冠军，你了解吗？
GSAP（GreenSock Animation Platform）是一款强大的 JavaScript 动画库，由 GreenSock 公司开发，在动画制作领域颇负盛名。
2025-01-09 11:03:47
1529
原创 前端技术月刊-2025.1
这期月刊全面展现了 2024 年前端技术领域的最新动态和发展趋势。内容涵盖了从 AI 编程到框架更新的重要业界资讯，包括 React 19 的创新特性、Astro 5.1 的重要更新、以及 VSCode 推出 GitHub Copilot 免费版等重磅消息。技术层面深入探讨了前端工程化、性能优化、跨端开发等热门话题，特别关注了 Qwik 的可恢复性技术、Remix 模块预加载优化等前沿技术实践。
2025-01-02 21:37:48
1010
原创 Cursor 提示 Too many free trial accounts used on this machine，继续使用方法
位置 $HOME/Library/Application Support/Cursor/User/globalStorage/storage.json。执行脚本：. ./keep-cursor-free.sh。保存脚本为：keep-cursor-free.sh。找到 设备ID 进行重置解决。Github 仓库地址。
2024-12-11 11:42:05
1013
1
原创 Plop.js：一键生成代码模板，提升开发效率的利器
尤其是在前端开发中，开发者通常会创建大量的类似代码结构（如组件、服务模块、Redux actions 等），这些操作容易出错且耗时。Plop 的设计初衷就是以简单、灵活的方式，帮助开发者快速生成标准化的代码结构和文件，从而减少手动创建的工作量。它可以通过简单的模板定义和 CLI（命令行界面）交互，在项目中快速生成预定义的代码片段，从而提升开发效率。：操作是生成器的核心，它定义了在生成过程中如何处理用户的输入。在 Plop.js 中，生成器是一个集合，包含生成文件所需的模板、操作和用户输入提示。
2024-11-07 12:41:50
1065
原创 Handlebars.js：让模板编写更快、更优雅的引擎
https://github.com/handlebars-lang/handlebars.jsHandlebars.js 是一个流行的模板引擎，基于 JavaScript，常用于前端和 Node.js 环境。它采用逻辑简单的模板语法，用于将动态数据填充到 HTML 模板中。与一些其他模板引擎不同，Handlebars.js 遵循逻辑与视图分离的原则，限制在模板中编写复杂的 JavaScript 逻辑，从而保持模板的简洁和可维护性。Handlebars 表达式是一个 ，一些内容，后跟一个 。执行模板时，这
2024-11-06 10:54:20
1057
原创 前端技术月刊-2024.11
本月技术月刊聚焦于前端技术的最新发展和业务实践。业界资讯部分，React Native 0.76 版本发布，带来全新架构；Deno 2.0 和 Node.js 23 版本更新，推动 JavaScript 生态进步；Flutter 团队规模缩减，引发社区关注。技术点精读部分，深入探讨了 Vue 3.5 的性能提升、Vue 项目的可视化编程技术，以及 CSS 的新特性 content-visibility 对渲染性能的影响。
2024-11-04 12:47:02
321
原创 从 Lerna 到现代化：原生 Workspaces 和 Changesets 的高效协作
4.0.08.1.315134通过 lerna 官网可以看到，它诞生背景解决的包管理的问题，现在的包管理工具，如 npm、pnpm、yarn 等都已经支持，官方也呼吁有此功能需求的，建议不要再用 lerna 了，因为这些功能 lerna 已经全部移除。原文：在此背景下，也有了对于 monorepo 的改造。核心诉求是，操作更简单，使用更方便，保持技术先进性。
2024-06-03 11:09:48
1016
原创 vue vite 环境非构建包编译 React 报错定位
vite 固然好，但多编译环境还是会出现对不齐的问题，一些配置在 vite 官网中也讲的不是很清楚，还是得抠源码看具体实现细节。另外对于库的开发者来讲，一定要提供编译好后的代码给开发者，包括脚本和样式，默认美好。微信搜索“好朋友乐平”关注公众号。github原文地址。
2024-05-13 22:10:48
1047
1
原创 内源 npm 无法同步官方 npm 解法
内源的 NPM 通常通过全局配置了内源 NPM，采用 T+1 进行官方 NPM 的缓存同步。但可能会存在没有sync机制的场景，当依赖的一个外部包发了新版本是无法立即消费的。可以采用以下方式修正。
2024-03-29 20:16:45
619
原创 Git 内幕探索：从底层文件系统到历史编辑的全面指南
blob（Binary Large Object）是一种数据类型，用于存储文件的内容。每个文件在 Git 中都被存储为一个 blob 对象。blob 对象包含了文件的原始内容，它们是 Git 中最基本的数据单元之一。内容存储：blob 对象存储文件的实际内容。这些内容以二进制格式存储，并且是文件的原始数据。Git 不关心文件的类型，它将所有文件都视为二进制文件，并以 blob 对象的形式存储它们。唯一标识：每个 blob 对象都有一个唯一的 SHA-1 哈希值，这个哈希值是通过 blob 对象的内容
2024-03-08 00:44:29
1274
原创 告别繁琐的数据校验：用JSON Schema简化你的代码
JSON Schema 是一种基于 JSON 的格式，用于描述 JSON 数据的结构和验证 JSON 数据。它为 JSON 数据提供了一个清晰的描述，可以用来验证、文档化，以及界定数据的接口。下面是 JSON Schema 的一些核心特点和应用方式的详细介绍：描述数据格式：使用 JSON Schema，你可以详细描述 JSON 数据的预期结构，包括哪些字段是必需的，字段的数据类型是什么（如字符串、数字、布尔值等），以及字段的其他属性（如字符串的最小长度、最大长度、正则表达式模式等）。数据验证：JSO
2024-03-03 00:54:34
1761
原创 提升 Node.js 服务端性能：Fastify 框架
Fastify 是一个高效且快速的 Node.js web 框架，专为提供最佳的性能而设计。它是相对较新的，但已经因其高性能和低开销而受到许多开发者的欢迎。Fastify 提供了一个简洁的开发体验，同时支持快速的路由和插件架构，使得开发者可以快速构建和扩展他们的应用。Fastify 可以被视为 Node.js 中的一个高效、现代化的 web 框架，是构建快速 web 应用的一个优秀选择。主要特性和原则：
2024-02-27 23:00:50
1791
原创 使用PM2实现高效的应用监控与管理
PM2还允许你定义自己的指标来监控。你可以在你的应用中集成 PM2的 API 来发送自定义指标，这样就可以在 PM2的监控工具中查看这些指标了。
2024-02-25 01:16:24
2297
原创 实时反馈的力量：如何用nodemon改善你的编码实践
nodemon是一个帮助开发基于 Node.js 的应用程序的工具，通过在检测到目录中的文件更改时自动重启 node 应用程序来实现。nodemon不需要对您的代码或开发方式进行任何额外的更改。nodemon是 node 的一个替换包装器。使用nodemon时，只需在执行脚本时将命令行中的node替换为nodemon即可。
2024-02-22 21:20:01
689
原创 告别后端依赖：用 MSW 实现独立的前端应用 Mock
);},});});});Mock Service Worker 旨在使用标准的 Fetch API 类进行请求拦截和响应模拟，无需对代码进行更改和配置，可以在各种环境中使用。
2024-02-14 12:42:08
2234
原创 Promise 常见题目
delayAll 函数应确保从 functions 中的每个 Promise 都被延迟执行，形成返回延迟的 Promise 的函数的新数组。promise 的解析值应该是一个按照它们在 functions 中的顺序排列的 promise 的解析值数组。给定两个 promise 对象 promise1 和 promise2，返回一个新的 promise。数组中的每个函数都不接受参数并返回一个 promise。编写一个函数，接受另一个函数 fn ，并将基于回调函数的函数转换为基于 Promise 的函数。
2024-02-13 11:21:18
1180
原创 依赖注入的艺术：编写可扩展 JavaScript 代码的秘密
DIP 是一个高层的设计原则，DI 是实现这个原则的一种模式，而 IoC 是一个更广泛的原则，它表达了控制权转移的思想，并且可以通过包括 DI 在内的多种方式实现。在许多框架和库中，这些概念往往交织在一起，以支持松耦合、可测试和灵活的软件设计。
2024-02-12 14:28:03
1038
原创 重构利器：如何用 Immer 优雅地管理应用状态
在选择适合的不可变数据库时，你需要考虑几个关键因素，比如应用程序的规模、状态管理的复杂性、开发团队的偏好、以及与其他库或框架的集成需求。本身的完整特性集合。这个库允许你编写看似可变的代码来更新一个不变的状态，但实际上，你是在修改的一个临时的草稿状态。的诞生背景是为了解决在处理复杂不可变状态时的编码复杂性问题，同时帮助开发者避免常见的不可变数据操作错误，提高代码的可维护性和可读性。，你可以继续编写简单直观的可变代码，但是产生的结果是按照不变性原则处理的，这样就既保持了代码的简洁，也确保了状态的不可变性。
2024-02-11 12:31:38
920
原创 实时协作的艺术：构建高效共享白板系统
前面看到一个共享白板的场景，如：发给你一个地址，让你在上面做题，双方都可以进行实时编辑。这个功能小而美，这里简单实现下。
2024-02-09 23:56:10
1127
原创 React 浮层组件实现思路
React 浮层组件（也称为弹出组件或弹窗组件）通常是指在用户界面上浮动显示的组件，它们脱离常规的文档流，并且可以在用户进行某些操作时出现在页面的最上层。React 浮层组件可以用于创建模态框（Modal）、下拉菜单（Dropdown）、工具提示（Tooltip）、侧边栏（Sidebar）或任何其他需要动态显示和隐藏且通常位置固定或绝对定位的内容。React 浮层组件的特点包括：层级管理：浮层组件通常具有较高的值，使得它们能够显示在其他内容之上。动态性：它们通常是响应用户交互（如点击按钮或鼠标悬停）而显示的
2024-02-05 16:19:50
1582
原创 告别繁杂的状态管理：Zustand 的简洁之道
它允许你创建一个全局状态存储，并且可以在应用程序的任何地方访问和更新这个状态，而不需要像 Redux 那样编写大量的 action creators 和 reducers。路径中导入的一个工具函数，它对返回的对象进行浅层比较，如果对象的顶层属性和之前的状态一样，即使引用不同，也不会重新渲染组件。因此，社区开始探索其他的状态管理解决方案，目的是减少样板代码、简化开发流程，并提供与 React 更自然的集成。随着 React 应用程序的增长和复杂性的提升，开发者开始寻找更简单、更易于维护的状态管理解决方案。
2024-02-04 20:51:24
3288
2
原创 2024 React 面试问答
总的来说，React 的这些 Hooks 的工作原理依赖于 React 的 Fiber 架构，该架构允许 React 在内部追踪组件状态和引用。每当组件渲染时，它都会以正确的顺序和位置检索状态和引用，确保它们在多次渲染之间保持不变。这个设计使得函数组件可以在不失去其函数式和声明式特性的同时，使状态和引用在组件的整个生命周期中保持持久化。Fiber。
2024-01-31 02:38:21
1651
原创 算法，不再难学！揭秘两款让你迅速学会算法的在线工具
用户可以创建自己的数据示例或使用随机生成的数据集，这有助于理解算法如何对不同类型的数据集进行操作。
2024-01-28 14:20:03
752
原创 从 React 到 Qwik：开启高效前端开发的新篇章
React使用 JSX 语法定义组件结构。通过import语句引入其他组件和库。使用函数组件和类组件两种形式。利用useStateuseEffect等 Hooks 进行状态管理和副作用处理。});Qwik同样使用 JSX 语法，但引入特有的 Qwik 优化器语法（如useSignalcomponent$useStore组件使用component$函数包装，指示 Qwik 优化器如何处理。事件绑定使用特殊的后缀，如onClick$，以启用 Qwik 的懒加载机制。
2024-01-27 18:03:47
1599
原创 突破React限制：Million.js带来的性能新境界
React 是一个非常受欢迎的 JavaScript 库，它允许开发者通过声明式的方式构建用户界面，并通过其虚拟 DOM 系统来高效地更新和渲染组件。当一个应用的状态(state)或属性(props)发生变化时，React 会经历一个分为渲染(rendering)和对比更新(reconciliation)的两部分的更新过程。如果可能，以渐进的方式迁移一小部分应用程序，并监控性能和稳定性的变化，可以帮助你做出更明智的决策。的优化中受益更多，因为在这些情况下，React 的虚拟 DOM 操作可能成为性能瓶颈。
2024-01-26 11:34:09
1180
原创 探索HTMLx：强大的HTML工具
htmx 的诞生背景来源于现代 web 开发中一个普遍的问题：随着前端技术的复杂性不断增加，开发者不得不学习和维护越来越庞杂的 JavaScript 框架和库，以构建动态和互动式的 web 应用。：如果你正在寻找一种可以简化前端开发过程的方法，减少 JavaScript 的编写量，并且依靠 HTML 本身的能力来构建交云富的动态网页，那么 htmx 是一个很好的选择。：htmx 可以让你更快地构建和原型化应用，特别是对于小到中型的项目或者需要快速迭代的项目，它的简洁性和易用性可能会显著降低开发时间。
2024-01-25 20:43:10
3408
2
原创 超越 Node.js：Bun 的创新与突破
运行时”（Runtime）在计算机编程中指的是一个软件程序执行时提供的环境，其中包含了执行程序所必需的库、调试和其他支持功能。在 JavaScript 的世界中，运行时负责解释执行 JavaScript 代码，并提供可以由 JavaScript 代码调用的 API，例如处理文件系统、网络通信、定时器等。就 JavaScript 语言而言，最著名的运行时环境是浏览器和 Node.js。浏览器提供了一个针对客户端脚本的运行环境，允许 JavaScript 与网页交互，控制 DOM 元素，响应事件等。
2024-01-24 16:51:29
1916
原创 GraphQL的力量：简化复杂数据查询
在 GraphQL 中，你需要定义一个类型系统（schema），在这个 schema 中指定你的数据模型和可用的查询和变更操作。id: ID!
2024-01-23 16:16:12
1328
IP地址定位器v1.0
2016-10-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人