- 做个链接编码解码小工具时才发现，encodeURI 和 encodeURIComponent 这俩兄弟的区别，很多人一直没搞明白。这篇讲清楚：什么时候该用哪个、哪些字符它俩都不管、为什么 decodeURIComponent 会突然报错、以及用 URLSearchParams 拼参数比手写字符串靠谱在哪。 做个链接编码解码小工具时才发现，encodeURI 和 encodeURIComponent 这俩兄弟的区别，很多人一直没搞明白。这篇讲清楚：什么时候该用哪个、哪些字符它俩都不管、为什么 decodeURIComponent 会突然报错、以及用 URLSearchParams 拼参数比手写字符串靠谱在哪。
- 让用户自己选中一段文字再右键复制，转化率高不了。加个"点一下就复制"的按钮吧——这篇讲 navigator.clipboard 怎么用、为什么本地能跑线上却不行（必须是 HTTPS）、怎么处理不支持的浏览器，以及复制完给个"已复制"反馈这种细节。 让用户自己选中一段文字再右键复制，转化率高不了。加个"点一下就复制"的按钮吧——这篇讲 navigator.clipboard 怎么用、为什么本地能跑线上却不行（必须是 HTTPS）、怎么处理不支持的浏览器，以及复制完给个"已复制"反馈这种细节。
- 想做个在格子上涂色的像素画板，做出来发现两个毛病：线条模糊、画的格子跟鼠标对不上。根源都在 Canvas 的"两套尺寸"上——CSS 尺寸和画布尺寸不是一回事。这篇讲清楚 devicePixelRatio 怎么处理、鼠标坐标怎么换算成格子索引，以及画完怎么导出成图片。 想做个在格子上涂色的像素画板，做出来发现两个毛病：线条模糊、画的格子跟鼠标对不上。根源都在 Canvas 的"两套尺寸"上——CSS 尺寸和画布尺寸不是一回事。这篇讲清楚 devicePixelRatio 怎么处理、鼠标坐标怎么换算成格子索引，以及画完怎么导出成图片。
- 1995年5月，网景公司的程序员布兰登·艾奇用十天时间设计出了一门浏览器脚本语言。彼时没有人能预料到，这门仓促诞生的语言会在三十年后成为世界上使用最广泛的编程语言，驱动着从网页交互到服务器后端、从移动应用到物联网设备的庞大技术生态。诞生：一个“大杂烩”的十天设计JavaScript的诞生源于一个非常具体的需求。1994年底，网景的Navigator浏览器已占据超过90%的市场份额，但当时的网... 1995年5月，网景公司的程序员布兰登·艾奇用十天时间设计出了一门浏览器脚本语言。彼时没有人能预料到，这门仓促诞生的语言会在三十年后成为世界上使用最广泛的编程语言，驱动着从网页交互到服务器后端、从移动应用到物联网设备的庞大技术生态。诞生：一个“大杂烩”的十天设计JavaScript的诞生源于一个非常具体的需求。1994年底，网景的Navigator浏览器已占据超过90%的市场份额，但当时的网...
- 用TailwindCSS写一个响应式卡片栅格，说明utility-first思路和移动端优先的断点前缀（grid-cols-1 sm:grid-cols-2 lg:grid-cols-3）如何替代手写媒体查询。 用TailwindCSS写一个响应式卡片栅格，说明utility-first思路和移动端优先的断点前缀（grid-cols-1 sm:grid-cols-2 lg:grid-cols-3）如何替代手写媒体查询。
- H5 CSS Grid 二维布局详解摘要：CSS Grid 是浏览器原生的二维布局系统，能同时控制行与列，远超 Flexbox 的一维能力。本文从基本概念、容器属性、项目属性到实战模式，帮你掌握现代网页布局利器。 一、Grid vs FlexboxFlexbox 是一维布局：要么沿主轴排，要么沿交叉轴排，适合导航栏、按钮组等单行/单列场景。Grid 是二维布局：可以同时定义行和列，适合整体... H5 CSS Grid 二维布局详解摘要：CSS Grid 是浏览器原生的二维布局系统，能同时控制行与列，远超 Flexbox 的一维能力。本文从基本概念、容器属性、项目属性到实战模式，帮你掌握现代网页布局利器。 一、Grid vs FlexboxFlexbox 是一维布局：要么沿主轴排，要么沿交叉轴排，适合导航栏、按钮组等单行/单列场景。Grid 是二维布局：可以同时定义行和列，适合整体...
- 在上一篇文章中，我们从零实现了一个Markdown解析器，完成了块级状态机和行内分隔符栈的完整链路。那篇文章聚焦的是文本结构的解析。这一次我们把视角转向数值计算和几何算法，目标是一个更“物理”的系统：2D刚体物理引擎。物理引擎是游戏引擎、机器人仿真、交互式动画的底层支撑。它看起来复杂，但核心循环可以拆解为三个相对独立的问题：积分（给定力和速度，求解下一时刻的位置）、碰撞检测（判断两个物体是否... 在上一篇文章中，我们从零实现了一个Markdown解析器，完成了块级状态机和行内分隔符栈的完整链路。那篇文章聚焦的是文本结构的解析。这一次我们把视角转向数值计算和几何算法，目标是一个更“物理”的系统：2D刚体物理引擎。物理引擎是游戏引擎、机器人仿真、交互式动画的底层支撑。它看起来复杂，但核心循环可以拆解为三个相对独立的问题：积分（给定力和速度，求解下一时刻的位置）、碰撞检测（判断两个物体是否...
- 作品简介：将 CSV、TSV 或竖线数据转换为 Markdown 表格，支持表头与对齐Markdown 表格生成器（Markdown Table Generator）把 CSV、TSV 或竖线分隔的数据快速转换为对齐规范的 Markdown 表格。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有处理在浏览器本地完成。功能特性自动识别分隔符：优先识别 Tab，其次竖... 作品简介：将 CSV、TSV 或竖线数据转换为 Markdown 表格，支持表头与对齐Markdown 表格生成器（Markdown Table Generator）把 CSV、TSV 或竖线分隔的数据快速转换为对齐规范的 Markdown 表格。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有处理在浏览器本地完成。功能特性自动识别分隔符：优先识别 Tab，其次竖...
- H5 JavaScript 事件循环与任务调度JavaScript 在浏览器主线程上执行时，需要与用户输入、样式计算、布局和绘制共享时间。异步代码并不自动代表不会阻塞：Promise 回调过多、长循环和连续同步 DOM 操作都可能让页面迟迟无法渲染。理解任务、微任务和帧调度，有助于安排真正合适的执行时机。 一、调用栈必须先清空同步代码进入调用栈并依次执行。只要当前函数没有返回，浏览器就不能... H5 JavaScript 事件循环与任务调度JavaScript 在浏览器主线程上执行时，需要与用户输入、样式计算、布局和绘制共享时间。异步代码并不自动代表不会阻塞：Promise 回调过多、长循环和连续同步 DOM 操作都可能让页面迟迟无法渲染。理解任务、微任务和帧调度，有助于安排真正合适的执行时机。 一、调用栈必须先清空同步代码进入调用栈并依次执行。只要当前函数没有返回，浏览器就不能...
- 作品简介：支持四则运算、括号、幂与数学函数的安全表达式求值器，不使用 eval表达式计算器（Expression Evaluator）安全地计算数学表达式，支持四则运算、括号、幂、取模、常用数学函数与常量。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，使用自建解析器求值，不调用 eval。功能特性运算符：+ - * / %（取模）^（幂，右结合）数学函数：sqrt、... 作品简介：支持四则运算、括号、幂与数学函数的安全表达式求值器，不使用 eval表达式计算器（Expression Evaluator）安全地计算数学表达式，支持四则运算、括号、幂、取模、常用数学函数与常量。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，使用自建解析器求值，不调用 eval。功能特性运算符：+ - * / %（取模）^（幂，右结合）数学函数：sqrt、...
- 博客 · 前端工程 / 性能优化 · 2026-09-22前端性能优化实战：从加载到交互的完整体验只压 bundle 体积，往往把 LCP 做漂亮了，用户点按钮还是卡一秒。这篇按「指标 → 加载 → 渲染 → 交互 → 度量」的顺序，给一条可落地的优化路线。工程实践手记 ·2026-09-22 ·约 12 分钟阅读一、先定指标：三个核心体验指标「性能优化」四个字，很多团队的第一反应是「压一压... 博客 · 前端工程 / 性能优化 · 2026-09-22前端性能优化实战：从加载到交互的完整体验只压 bundle 体积，往往把 LCP 做漂亮了，用户点按钮还是卡一秒。这篇按「指标 → 加载 → 渲染 → 交互 → 度量」的顺序，给一条可落地的优化路线。工程实践手记 ·2026-09-22 ·约 12 分钟阅读一、先定指标：三个核心体验指标「性能优化」四个字，很多团队的第一反应是「压一压...
- 作品简介：数字模式与符号模式互转，支持 setuid、setgid 与 sticky 等特殊权限位Linux 权限计算器（chmod Calculator）在数字模式（如 755）与符号模式（如 -rwxr-xr-x）之间互相转换，支持 setuid、setgid、sticky 特殊权限位。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端。功能特性可视化权限位：所有者 ... 作品简介：数字模式与符号模式互转，支持 setuid、setgid 与 sticky 等特殊权限位Linux 权限计算器（chmod Calculator）在数字模式（如 755）与符号模式（如 -rwxr-xr-x）之间互相转换，支持 setuid、setgid、sticky 特殊权限位。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端。功能特性可视化权限位：所有者 ...
- 纯前端世界时钟，同时显示多个城市当前时间，可增删城市。技术内核是 Intl.DateTimeFormat 的 timeZone 选项和 IANA 时区名，避开自己手写时差。 纯前端世界时钟，同时显示多个城市当前时间，可增删城市。技术内核是 Intl.DateTimeFormat 的 timeZone 选项和 IANA 时区名，避开自己手写时差。
- 纯模板拼接的解读文案用两三次就能摸出套路。在不引入大模型、保持「纯前端零成本可离线」的前提下，用多模板轮换、牌组组合分析、叙事合成、主题能量线检测、位置交叉引用这五项改造，把重复感推迟了一个数量级。 纯模板拼接的解读文案用两三次就能摸出套路。在不引入大模型、保持「纯前端零成本可离线」的前提下，用多模板轮换、牌组组合分析、叙事合成、主题能量线检测、位置交叉引用这五项改造，把重复感推迟了一个数量级。
- 3D 零基础入门 · 第 3 章：材质、灯光、相机——模型是怎么"被看见"的前两章我们有了三角形的形状（Mesh）和摆放位置（TRS）。但你把一个纯白模型丢进场景，往往是——黑的。这一章回答：物体为什么有颜色？为什么"没光就看不见"？相机又是怎么看世界的？ 3.1 三个角色的分工一次 3D 渲染，就像一次拍照片：角色3D 里的对应类比被拍的物体模型（Mesh）模特打在物体上的光灯光（Lig... 3D 零基础入门 · 第 3 章：材质、灯光、相机——模型是怎么"被看见"的前两章我们有了三角形的形状（Mesh）和摆放位置（TRS）。但你把一个纯白模型丢进场景，往往是——黑的。这一章回答：物体为什么有颜色？为什么"没光就看不见"？相机又是怎么看世界的？ 3.1 三个角色的分工一次 3D 渲染，就像一次拍照片：角色3D 里的对应类比被拍的物体模型（Mesh）模特打在物体上的光灯光（Lig...
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战，从0到1打通消息通道；码道鸿蒙端云一体化实战，快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人；蒋春阳-华为云AI开发者案例开发专家
本期直播内容： AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签