- 纯前端 SPA 首屏白屏、搜索引擎抓不到内容。用 Next.js 的 SSR/SSG 把页面在服务端渲染成完整 HTML,爬虫友好、首屏更快,这篇从路由到数据获取讲透。 纯前端 SPA 首屏白屏、搜索引擎抓不到内容。用 Next.js 的 SSR/SSG 把页面在服务端渲染成完整 HTML,爬虫友好、首屏更快,这篇从路由到数据获取讲透。
- 从零构建「历史时间轴」小工具:技术路线、实战心得与优化思考作者:Eddygit日期:2026-09-07标签:前端开发、教育工具、原生JS、历史可视化 一、为什么做这个工具?高中历史学习有一个普遍痛点:中外历史事件散落在不同章节,学生很难建立横向时间关联。比如公元前221年秦始皇统一中国时,罗马正在布匿战争中;1840年鸦片战争爆发时,英国维多利亚时代刚步入鼎盛。这些同时期发生的中外大事,... 从零构建「历史时间轴」小工具:技术路线、实战心得与优化思考作者:Eddygit日期:2026-09-07标签:前端开发、教育工具、原生JS、历史可视化 一、为什么做这个工具?高中历史学习有一个普遍痛点:中外历史事件散落在不同章节,学生很难建立横向时间关联。比如公元前221年秦始皇统一中国时,罗马正在布匿战争中;1840年鸦片战争爆发时,英国维多利亚时代刚步入鼎盛。这些同时期发生的中外大事,...
- 作品简介:文本Diff对比器,LCS行级差异高亮,红色删除绿色新增,行号对齐并排展示,结果清晰直观。文本 Diff 对比器项目简介文本 Diff 对比器是一款零依赖的纯前端文本差异查看工具,把「原文 A」与「新文 B」逐行对比,红色高亮被删除的行、绿色高亮新增的行,让代码改动、配置变更、文章修订的差异一目了然。对比引擎采用行级最长公共子序列(LCS)算法,保证得到增删行数最少的差异结果。整个... 作品简介:文本Diff对比器,LCS行级差异高亮,红色删除绿色新增,行号对齐并排展示,结果清晰直观。文本 Diff 对比器项目简介文本 Diff 对比器是一款零依赖的纯前端文本差异查看工具,把「原文 A」与「新文 B」逐行对比,红色高亮被删除的行、绿色高亮新增的行,让代码改动、配置变更、文章修订的差异一目了然。对比引擎采用行级最长公共子序列(LCS)算法,保证得到增删行数最少的差异结果。整个...
- 本文以贷款计算器为例,分享了浏览器本地计算的技术实践。通过TypeScript编写计算逻辑,在浏览器端完成表单读取、月供计算、还款计划生成及CSV导出,业务输入全程不提交至应用服务器,仅加载页面所需静态资源,从源头减少不必要的数据流转。文章梳理了数据边界,对比了前后端计算的取舍,指出本地计算能提升交互速度并降低隐私风险,但也需配合HTTPS、CSP等措施,且不适用于需防篡改或服务端授权的场景。 本文以贷款计算器为例,分享了浏览器本地计算的技术实践。通过TypeScript编写计算逻辑,在浏览器端完成表单读取、月供计算、还款计划生成及CSV导出,业务输入全程不提交至应用服务器,仅加载页面所需静态资源,从源头减少不必要的数据流转。文章梳理了数据边界,对比了前后端计算的取舍,指出本地计算能提升交互速度并降低隐私风险,但也需配合HTTPS、CSP等措施,且不适用于需防篡改或服务端授权的场景。
- 2026 年必火的 5 个 JS 新趋势:ES2026、Wasm 组件模型与端侧 AI 落地2026 年的 JavaScript 生态不再是“加几个语法糖”的节奏,而是语言层补历史欠账、运行时层拥抱 Wasm 原生并发、AI 层把大模型搬进浏览器。下面按“语言 → 运行时 → 二进制 → AI → 架构范式”五条线拆给你看。1. ES2026 正式落地:Date 时代终结,Map/JSON/... 2026 年必火的 5 个 JS 新趋势:ES2026、Wasm 组件模型与端侧 AI 落地2026 年的 JavaScript 生态不再是“加几个语法糖”的节奏,而是语言层补历史欠账、运行时层拥抱 Wasm 原生并发、AI 层把大模型搬进浏览器。下面按“语言 → 运行时 → 二进制 → AI → 架构范式”五条线拆给你看。1. ES2026 正式落地:Date 时代终结,Map/JSON/...
- npx、npm run、npm install -g 到底有什么区别?Node.js 开发中经常会看到:npm installnpm runnpx xxx还有:npm install -g xxx它们到底有什么区别?npm install:安装依赖例如:npm install axios表示把 Axios 安装到项目中。开发工具则通常:npm install -D typescript安装到... npx、npm run、npm install -g 到底有什么区别?Node.js 开发中经常会看到:npm installnpm runnpx xxx还有:npm install -g xxx它们到底有什么区别?npm install:安装依赖例如:npm install axios表示把 Axios 安装到项目中。开发工具则通常:npm install -D typescript安装到...
- 作品简介:URL编解码工具,支持百分比编码解码、完整转义与QueryString参数一键解析,结果即时统计。URL 编解码工具项目简介URL 编解码工具是一款零依赖的纯前端编码工具,专治 URL 处理中各种「中文乱码」与「参数看不懂」的烦恼。一个面板做编解码:把任意文本编码成 percent 编码(%E4%BD%A0),或把编码还原成原文;另一个面板做参数解析:把一段 QueryString... 作品简介:URL编解码工具,支持百分比编码解码、完整转义与QueryString参数一键解析,结果即时统计。URL 编解码工具项目简介URL 编解码工具是一款零依赖的纯前端编码工具,专治 URL 处理中各种「中文乱码」与「参数看不懂」的烦恼。一个面板做编解码:把任意文本编码成 percent 编码(%E4%BD%A0),或把编码还原成原文;另一个面板做参数解析:把一段 QueryString...
- 从零构建科学计算器:纯前端实现的技术路线与实战心得作者:Eddygit日期:2026-09-01标签:前端开发、JavaScript、科学计算、华为云DevSpace 前言在华为云 AI DevSpace 开发者工作空间中,我使用 CodeArts 辅助编码,从零开始构建了一个功能完善的科学计算器 Web 应用。本文将分享完整的技术路线、开发过程中的心得体会、实战经验,以及当前存在的问题和... 从零构建科学计算器:纯前端实现的技术路线与实战心得作者:Eddygit日期:2026-09-01标签:前端开发、JavaScript、科学计算、华为云DevSpace 前言在华为云 AI DevSpace 开发者工作空间中,我使用 CodeArts 辅助编码,从零开始构建了一个功能完善的科学计算器 Web 应用。本文将分享完整的技术路线、开发过程中的心得体会、实战经验,以及当前存在的问题和...
- npx 实战指南:创建项目、运行工具与指定版本npx 最常见的用途就是运行各种 Node.js CLI 工具。下面通过几个实际例子了解它。使用 npx 创建项目例如使用 Vite:npx create-vite@latest创建 Next.js 项目:npx create-next-app@latest这里的:@latest表示使用最新版本。也可以指定具体版本:npx create-vite... npx 实战指南:创建项目、运行工具与指定版本npx 最常见的用途就是运行各种 Node.js CLI 工具。下面通过几个实际例子了解它。使用 npx 创建项目例如使用 Vite:npx create-vite@latest创建 Next.js 项目:npx create-next-app@latest这里的:@latest表示使用最新版本。也可以指定具体版本:npx create-vite...
- 作品简介:日期计算器,支持两日期间隔天数、日期加减推算与任意日期信息查询,周月年自动换算。日期计算器项目简介日期计算器是一款零依赖的纯前端日期工具,把日常生活中最常用的三种日期计算放进一个页面:两个日期之间相隔多少天、某个日期往前或往后加几天/几周/几个月/几年是哪一天、以及任意日期是星期几、是当年的第几天、还剩多少天。三种计算各占一张卡片,选择日期即出结果,无需点击计算按钮。整个应用由单个... 作品简介:日期计算器,支持两日期间隔天数、日期加减推算与任意日期信息查询,周月年自动换算。日期计算器项目简介日期计算器是一款零依赖的纯前端日期工具,把日常生活中最常用的三种日期计算放进一个页面:两个日期之间相隔多少天、某个日期往前或往后加几天/几周/几个月/几年是哪一天、以及任意日期是星期几、是当年的第几天、还剩多少天。三种计算各占一张卡片,选择日期即出结果,无需点击计算按钮。整个应用由单个...
- 作品简介:Base64编解码工具,支持文本与文件双模式互转,UTF-8多字节字符安全,可选URL安全变体。Base64 编解码工具项目简介Base64 编解码工具是一款零依赖的纯前端编码工具。它把 Base64 编解码做成两个顺手的面板:文本模式下输入文本或 Base64 串一键互转;文件模式下选择任意文件即可转为 Base64 字符串,图片文件还能即时预览。基于浏览器原生的 TextEnc... 作品简介:Base64编解码工具,支持文本与文件双模式互转,UTF-8多字节字符安全,可选URL安全变体。Base64 编解码工具项目简介Base64 编解码工具是一款零依赖的纯前端编码工具。它把 Base64 编解码做成两个顺手的面板:文本模式下输入文本或 Base64 串一键互转;文件模式下选择任意文件即可转为 Base64 字符串,图片文件还能即时预览。基于浏览器原生的 TextEnc...
- 在使用 Node.js 的时候,你可能经常会看到这样的命令:npx vite或者:npx create-next-app@latest那么,npx 到底是什么?简单来说,npx 是 npm 生态中的一个命令执行工具,主要用于运行 npm 包提供的 CLI 程序。例如,我们想使用 Vite,可以直接:npx vite而不需要先全局安装 Vite。传统方式可能是:npm install -g v... 在使用 Node.js 的时候,你可能经常会看到这样的命令:npx vite或者:npx create-next-app@latest那么,npx 到底是什么?简单来说,npx 是 npm 生态中的一个命令执行工具,主要用于运行 npm 包提供的 CLI 程序。例如,我们想使用 Vite,可以直接:npx vite而不需要先全局安装 Vite。传统方式可能是:npm install -g v...
- 在接触服务器、云计算和开源项目之后,我越来越觉得,真正困难的并不是让一个程序成功运行,而是让它能够稳定、低成本、可维护地长期运行。很多时候,我们部署一个 Node.js、Python 或 Go 项目,可能只需要几条命令:git clone ...npm installnpm start程序启动了,端口也能访问,看起来一切正常。但真正运行一段时间后,问题才会逐渐出现:进程莫名退出、端口被占用、... 在接触服务器、云计算和开源项目之后,我越来越觉得,真正困难的并不是让一个程序成功运行,而是让它能够稳定、低成本、可维护地长期运行。很多时候,我们部署一个 Node.js、Python 或 Go 项目,可能只需要几条命令:git clone ...npm installnpm start程序启动了,端口也能访问,看起来一切正常。但真正运行一段时间后,问题才会逐渐出现:进程莫名退出、端口被占用、...
- 拆解 SpiritValers 模拟器的 3D 换装技术:从 .pak 资源包到手写骨骼动画spiritvalers.com 的模拟器,我顺手把它的 3D 管线源码扒了一遍。整个 viz3d.js 只有 739 行,却完整实现了一套「从一个二进制包按需切模型 → 重建骨骼 → 手写采样器播动画 → 把武器挂到活骨骼上」的完整链路。没有用任何框架,也没有用 Three.js 的 Animati... 拆解 SpiritValers 模拟器的 3D 换装技术:从 .pak 资源包到手写骨骼动画spiritvalers.com 的模拟器,我顺手把它的 3D 管线源码扒了一遍。整个 viz3d.js 只有 739 行,却完整实现了一套「从一个二进制包按需切模型 → 重建骨骼 → 手写采样器播动画 → 把武器挂到活骨骼上」的完整链路。没有用任何框架,也没有用 Three.js 的 Animati...
- 作品简介:单位换算工具,覆盖长度、重量、温度、面积、体积、速度六类单位,实时互转并附常用换算参考。单位换算工具项目简介单位换算工具是一款覆盖长度、重量、温度、面积、体积、速度六大类的纯前端换算应用。它把日常高频的单位互转放进一个页面:选分类、输数值、读结果,输入即实时换算;每类还内置四条常用换算快捷参考,点击即可应用;⇄ 按钮一键交换前后单位。整个应用由单个 HTML 文件承载,零依赖、零后... 作品简介:单位换算工具,覆盖长度、重量、温度、面积、体积、速度六类单位,实时互转并附常用换算参考。单位换算工具项目简介单位换算工具是一款覆盖长度、重量、温度、面积、体积、速度六大类的纯前端换算应用。它把日常高频的单位互转放进一个页面:选分类、输数值、读结果,输入即实时换算;每类还内置四条常用换算快捷参考,点击即可应用;⇄ 按钮一键交换前后单位。整个应用由单个 HTML 文件承载,零依赖、零后...
上滑加载中
推荐直播
-
华为云码道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华为软件挑战赛冠军
高手来了:看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签