浏览器录音实战：getUserMedia 采集 PCM 并编码 WAV
从麦克风权限、暂停恢复和 60 秒限制，到 PCM 样本采集、16 bit WAV 编码、原生 audio 试听与资源清理，完整拆解浏览器录音的可靠实现。
technical-zh
最近更新
技术
我做 AI 开发时遇到的问题和工作笔记。
Chrome 扩展开发实战：Google Maps 邮编标注工具
这款 Chrome 扩展程序可在 Google Maps 上批量标注澳大利亚邮编位置，自动解析邮政编码并保存位置到指定列表，适用于房产分析、物流规划、市场区域管理等地理数据需求。
technical-zh
Vue 和 React 的区别怎么答才不死板？面试官最想听的回答思路全在这！
前端面试总被问“Vue 和 React 的区别”？本篇带你从实际开发、设计思想和编译原理3个角度拆解高质量回答，附口语化解释和项目实战理解，助你从众多候选人中脱颖而出！
technical-zh
微信小程序实现动态二维码海报生成与保存 | 高效便捷的前端方案
了解如何在微信小程序中实现动态二维码海报的生成与保存，支持用户自定义内容、高效绘制与一键保存，适用于活动推广、营销分享等多种场景。
technical-zh
【个人网站】12.七牛云私有空间图片访问最佳方案：CDN鉴权、URL签名与防盗链解析
如何在个人网站展示七牛云私有空间图片？推荐使用CDN自定义域名+URL鉴权，无需额外后端处理。本文详细解析三种方案：URL签名访问、开启防盗链、后端代理，帮你选择最佳图片访问方式！
technical-zh
微前端架构全面解析：什么是微前端及其主流解决方案
本文深入解析了微前端架构的概念与原理，详细介绍了微前端如何帮助大型应用进行拆分与管理。文章包括了常见的微前端技术方案如qiankun、single-spa及Web Components的介绍，并重点讨论了这些技术如何实现应用隔离、组件共享和通信。对于前端开发者、架构师及团队管理者，本文提供了全面的微前端架构知识。
technical-zh
为前端开发者设计的Python学习路线图
学习Python时，很多人容易走弯路，比如盲目跟着教程学，却缺乏实践经验。本文结合我的学习经历，总结了一套高效的Python学习方法：从官方文档入手、通过项目实战积累经验、稳扎稳打提升。无论是基础语法、Web开发、自动化脚本，还是数据分析，都有针对性的学习路径和小项目推荐，帮助你快速上手Python，避免半途而废。
technical-zh
如何选择合适的DeepSeek-R1并进行本地部署版本？
本文详细解析了DeepSeek-R1系列模型的不同版本，并提供相应的硬件配置指南，帮助开发者选择合适的本地部署版本。此外，文章还介绍了如何使用Ollama在本地部署DeepSeek-R1 1.5B模型的具体步骤，包括安装环境、下载模型、运行推理等，确保流畅的AI推理体验。
technical-zh
【Notion新手攻略】01.如何在Notion中设置进度条：提升项目管理效率的终极指南
在这篇文章中，我们将详细介绍如何在Notion中利用公式设置进度条，帮助你更高效地管理任务进度。通过自动化子任务和主任务的进度计算，让你在项目管理中不再漏掉任何细节，提升工作效率。我们还将分享如何根据任务状态自定义进度条，帮助你随时掌控项目动态，节省时间和精力。
technical-zh
如何打包并发布一个 NPM 包：从零到上线的完整流程
全面指南，教你从零开始开发、打包并发布一个高质量的NPM包。涵盖项目配置、代码质量控制、自动化部署、发布流程及最佳实践，帮助你高效提升开发效率并创建专业的开源项目。
technical-zh
程序员年终总结指南：高效归纳工作成果，助力职业晋升
年终总结是程序员展示工作成果和职业发展的关键机会。从技术成长、绩效成果到未来规划，全面教你撰写一份数据详实、有条理的年终总结，让你的努力不被埋没，助力升职加薪。
technical-zh
【个人网站】11.如何使用七牛云配置静态存储实现高效图片分发（实用教程）
本篇文章全面讲解如何使用七牛云配置云空间实现静态存储图片分发，涵盖注册、域名绑定、上传配置、CDN加速等实操步骤，帮助开发者优化图片加载速度，提高网站性能。通过七牛云的高效存储和分发方案，轻松解决图片管理与加载效率问题。
technical-zh
【LeetCode系列】双指针解题技巧及例题讲解
掌握前端开发中的高效算法，深入解析双指针技巧如何在LeetCode和面试中脱颖而出。通过案例学习，优化复杂度，提升解题效率，让算法成为你技术进阶的加速器！更多程序员成长秘籍，助力你的职业发展
technical-zh
【ES6系列】解构赋值：提升代码优雅度的魔法技巧 | JavaScript 简化赋值方式
解构赋值是JavaScript中的一项强大功能，可以使代码更加简洁、易读。在这篇文章中，我们将深入探讨解构赋值的基本概念、进阶用法以及实战应用，包括如何通过解构赋值简化数组和对象的提取，优化函数参数的传递，并通过实际案例展示如何用解构赋值处理复杂的API数据
technical-zh
【软考】程序员中级软件工程师备考分享
中级软件工程师备考分享，包含详细的备考计划、学习顺序和必考知识点。适合自学备考的考生，提供从学习资料到刷题策略的完整路径，并结合实际经验总结出高效备考方法，助力顺利通过考试。
technical-zh
【个人网站】10.Next.js 项目性能优化全攻略：从图片加载到 JavaScript 减少
在现代网站开发中，优化图片和减少未使用的JavaScript对于提升网站性能至关重要。本文详细介绍了如何在Next.js项目中使用next/image组件优化图片资源，并通过动态导入、按需加载等技术减少未使用的JavaScript，进而提升网站加载速度和用户体验。我们还探讨了通过预先连接外部资源和启用缓存来加速加载第三方服务如Google Ads。
technical-zh
【个人网站】09.在 Next.js 中集成百度翻译：无需额外的 Node.js 服务器实现安全翻译功能
将百度翻译功能集成到Next.js应用中，无需单独的Node.js环境。通过定义API路由、服务器端翻译逻辑和客户端集成，确保API密钥安全并实现便利的翻译功能。使用标准的Next.js命令即可运行应用，翻译功能完全集成，无需额外脚本。
technical-zh
在 Next.js 项目中结合 Webpack 实现高级功能：自定义配置详解
在 Next.js 项目中，如何通过自定义 Webpack 配置实现高级功能？本篇文章详细介绍了如何添加自定义 loader 和插件、优化代码分割、处理 CSS 与 Sass、配置 SSR 和环境变量等内容。
technical-zh
Webpack零基础小白学习路径分享
学习Webpack的路径包括理解基础概念、动手搭建项目、深入理解加载器和插件、优化构建性能、源码阅读与调试、探索进阶功能、实践项目以及参与社区与开源项目。通过这些步骤，可以全面掌握Webpack的原理与应用。
technical-zh
【LeetCode系列】链表详解：从基础到进阶的完整指南
链表是一种由节点组成的数据结构，分为单向链表、双向链表和循环链表。其优点包括便于插入和删除、动态长度和有效利用内存，但随机访问效率低且需要额外空间。链表在前端开发中应用于实现DOM结构、异步队列、LRU缓存等。处理链表时需注意指针丢失、越界和内存泄露等问题，使用哨兵节点可以简化操作。经典链表题目包括反转链表、合并有序链表等。
technical-zh
【面试精选】JavaScript常见面试题
本文总结了 JavaScript 常见面试题，包括数据类型、null 和 undefined 的区别、call、apply 和 bind 的用法、let、var 和 const 的区别、闭包、原型链、事件循环以及性能优化策略。重点强调了 JavaScript 的基本概念和性能提升方法，如减少 HTTP 请求、使用 CDN、资源压缩、延迟加载、缓存策略等。
technical-zh
【面试精选】TypeScript 常见 8 道面试题及解答
本文详细介绍了TypeScript的优势、与JavaScript的主要区别、基本数据类型、泛型、unknown与any的区别、readonly修饰符与const关键字的区别、装饰器的使用及其类型，以及interface与type的区别。TypeScript通过静态类型检查、增强的代码编辑体验和更好的工具支持，提高了代码的可维护性和开发效率。
technical-zh
【个人网站】06.使用Mailchimp做网站邮件订阅功能
Mailchimp 是一个流行的电子邮件营销平台，提供多种功能，如受众管理、自动化和分析报告。它的免费计划适合小型企业，允许最多 500 个联系人和每月 1,000 封邮件。文中还详细介绍了如何通过 Mailchimp API 集成邮件订阅功能到 Next.js 项目中，包括创建账户、获取 API Key、编写订阅函数和创建 API 路由。Mailchimp 的强大功能和免费计划使其成为初学者的理想选择。
technical-zh
【个人网站】05.基于i18n在Next项目中搭建国际化网站
本文分享了如何在Next.js项目中使用i18n实现国际化网站，包括依赖安装、项目结构、配置文件、国际化文件的设置，以及组件的使用示例。此外，还提供了常见错误及其解决方案，确保服务器端和客户端的语言设置一致。
technical-zh
Notion踩坑记：避坑指南+进阶技巧，让你的工作流更高效！
Notion好用但坑也不少？本文分享常见的Notion使用误区、数据同步问题、性能优化、数据库管理技巧，以及高效工作流打造，让你少走弯路，提升生产力！
technical-zh
【个人网站】04.如何使用 Vercel 快速部署个人网站 | 全流程指南
Vercel 是一个专注于前端开发的平台，提供简单快速的静态网站和前端框架应用部署服务。其主要特点包括一键部署、自动化 CI/CD、全球 CDN、预览部署、自定义域名和无服务器函数等。适用于静态网站、单页应用、服务器端渲染应用及电子商务网站。部署流程包括注册、创建项目、导入 Git 仓库、配置项目和管理监控。Vercel 使开发者能够专注于代码，而无需担心部署和性能优化问题。
technical-zh
从输入URL到页面展示发生了什么
本文详细介绍了从输入URL到页面展示的整个HTTP请求流程，包括请求的构建、缓存查找、TCP连接建立、HTTP请求发送、服务器处理请求及返回结果等九个阶段。还探讨了浏览器缓存的作用、TCP三次握手的必要性以及如何通过Cookie实现用户登录状态的管理，最后回答了一些常见问题，如站点加载速度快的原因和UDP与TCP的优缺点。
technical-zh
【Next踩坑记】开发者必看的常见错误与踩坑经验分享
实际开发中遇到的Next相关的bug，记录下来和大家分享
technical-zh
Next.js 基础知识全解析：核心概念、路由、数据获取
Next.js 是一个用于构建 React 应用的框架，它提供了服务端渲染(SSR)和静态网站生成(SSG)的功能，能够提升页面加载速度和 SEO 效果。通过自动化路由系统、数据获取策略（如 getStaticProps 和 getInitialProps）以及增量静态生成 (ISR)，Next.js 能够灵活地生成静态页面或根据需求进行服务器端渲染。它非常适合用于内容不频繁变化的博客、作品集、文档等静态网站，同时还能支持动态路由和嵌套路由。此外，Next.js 支持 API 路由，可以将后端功能集成到应用中。
technical-zh
【个人网站】03.如何做网站自定义页面 URL 映射
pageUrlOverrides 是一个配置对象，用于在 Notion 集成中定义自定义页面 URL 映射，以替换自动生成的 URL。它有助于 SEO 优化和用户体验。示例中展示了如何将 Notion 页面 ID 映射到更友好的自定义 URL，并提供了一个清理页面 URL 映射的函数 cleanPageUrlMap，确保映射的有效性。
technical-zh
【个人网站】02.如何在Next中集成Notion数据库
在Next.js项目中集成Notion数据库的步骤包括获取Notion API密钥和数据库ID、安装Notion官方SDK、设置Notion客户端、获取数据库内容、部署与验证，以及使用封装的Notion API进行交互。通过这些步骤，可以有效地将Notion作为内容管理系统，并利用react-notion-x组件渲染Notion页面，提升代码的可维护性。
technical-zh
【个人网站】01.如何使用Notion作为数据库进行全栈开发
使用 Notion 作为数据库进行全栈开发的步骤包括注册 Notion 账号、获取 Notion API Token、创建数据库页面并配置相应的列。文中详细介绍了如何创建新集成、共享数据库权限以及获取数据库ID，以便进行数据管理和展示。
technical-zh
【个人网站】08.Google 广告营收插件接入指南（详细教程）
在 Next.js 项目中集成 Google AdSense 广告的步骤包括在 _document.js 文件中添加验证代码，创建广告组件并在页面中使用。需要注意广告展示的延迟、广告位的正确配置，以及在开发环境中禁用广告代码以避免展示广告。
technical-zh
【个人网站】07.如何在Next.js中提升SEO及配置站点地图：完整指南
本指南详细介绍了如何在Next.js项目中使用next-sitemap插件配置站点地图，以提升SEO和加快Google搜索引擎收录。步骤包括安装依赖、配置next-sitemap、生成站点地图、部署和验证。还提供了如何在Google、Bing和百度等搜索引擎中提交站点地图的说明，以及如何查看站点地图的收录情况和SEO优势。
technical-zh
Tailwind CSS 常见坑避坑指南：最佳实践与解决方案
使用 Tailwind CSS 遇到问题？本指南汇总了常见坑点，并提供最佳实践和解决方案，帮助你高效排查错误，优化前端开发体验。
technical-zh
函数式编程入门：核心概念、优势及实战指南
函数式编程强调不可变性、函数作为一等公民、无副作用和高阶函数等核心特点。通过示例展示了如何使用高阶函数和纯函数来简化代码，提升可读性和可维护性。柯里化和组合函数的概念被详细介绍，强调了它们的灵活性和复用性。最后，介绍了 JavaScript 中的 reduce() 方法及其用法，展示了如何通过高阶函数处理数组数据。
technical-zh
变量命名规范：提升代码可读性与可维护性的最佳实践
本文介绍了变量命名规范，包括文件资源命名、变量命名、函数命名、常量命名及函数注释的规则。文件名应使用小写字母和连词线，变量和函数采用小驼峰命名法，常量使用全大写和下划线分隔，函数注释需遵循特定格式。
technical-zh
如何确保登录数据传输安全？最佳实践与安全加密策略
本文讨论了如何确保登录数据传输的安全性，涵盖了前端存储方式、Cookie的配置及使用、服务端Session管理、Token机制、JWT、Refresh Token以及单点登录(SSO)的实现。重点强调了Cookie的安全配置（如Secure和HttpOnly属性）以及加密技术在数据传输中的重要性，提供了具体的代码示例和加密解密过程。
technical-zh
【ES6系列】Map类型和Set类型详解
本文介绍了ECMAScript中的Set、WeakSet、Map和WeakMap类型，包括它们的定义、属性、方法及应用。Set用于存储唯一值，支持操作如添加、删除和查找，且时间复杂度为O(1)。WeakSet仅存储对象并具有弱引用特性。Map允许使用任意类型的值作为键，提供了丰富的方法来操作键值对。WeakMap与Map类似，但键名是弱引用，适合存储临时数据，避免内存泄漏。
technical-zh