- 星空笔记是一款基于纯前端技术栈构建的轻量级个人知识管理应用，采用玻璃拟态设计风格配合星空渐变背景，支持笔记管理、标签分类、全文搜索和主题切换，数据本地持久化，开箱即用。本文分享其设计思路与技术实现。 星空笔记是一款基于纯前端技术栈构建的轻量级个人知识管理应用，采用玻璃拟态设计风格配合星空渐变背景，支持笔记管理、标签分类、全文搜索和主题切换，数据本地持久化，开箱即用。本文分享其设计思路与技术实现。
- README 是项目的门面，写得好不好直接决定别人愿不愿意用。本文给出一个能直接套用的 README 结构：一句话定位、安装、最小可用示例、配置、贡献方式、许可证，并讲清每部分怎么写才不劝退人。 README 是项目的门面，写得好不好直接决定别人愿不愿意用。本文给出一个能直接套用的 README 结构：一句话定位、安装、最小可用示例、配置、贡献方式、许可证，并讲清每部分怎么写才不劝退人。
- #CSSFlex布局display:flex让子元素沿主轴排列，justify-content控制主轴对齐，align-items控制交叉轴对齐。配合gap控制间距，是最常用的页面一维布局方案。---*每日一个技术小知识，第15篇。*... #CSSFlex布局display:flex让子元素沿主轴排列，justify-content控制主轴对齐，align-items控制交叉轴对齐。配合gap控制间距，是最常用的页面一维布局方案。---*每日一个技术小知识，第15篇。*...
- 相对时间"3分钟前"的核心逻辑很短，分时间差计算、区间文案、时区注意三点讲清楚 相对时间"3分钟前"的核心逻辑很短，分时间差计算、区间文案、时区注意三点讲清楚
- 点"选择文件"、在弹出的窗口里翻半天、选中、确定——这套流程能省掉。这篇做个拖拽上传区域：dragover 不阻止默认行为 drop 就永远不触发这个必踩的坑、怎么拿到拖进来的文件、用 FormData 发出去、以及 fetch 拿不到上传进度这个限制该怎么绕。 点"选择文件"、在弹出的窗口里翻半天、选中、确定——这套流程能省掉。这篇做个拖拽上传区域：dragover 不阻止默认行为 drop 就永远不触发这个必踩的坑、怎么拿到拖进来的文件、用 FormData 发出去、以及 fetch 拿不到上传进度这个限制该怎么绕。
- 从高频事件带来的性能与业务问题切入，给出防抖与节流的完整实现代码，对比两者执行时机与适用场景，并总结实战中的三个注意点。 从高频事件带来的性能与业务问题切入，给出防抖与节流的完整实现代码，对比两者执行时机与适用场景，并总结实战中的三个注意点。
- 原价加折扣率（或打折件数），一键算出折后价和优惠金额，还顺手做了"满减 vs 打折"哪个更划算的对比。纯前端，输入即算。 原价加折扣率（或打折件数），一键算出折后价和优惠金额，还顺手做了"满减 vs 打折"哪个更划算的对比。纯前端，输入即算。
- 做个随机密码生成器，第一反应是 Math.random() 取随机数。查了资料才后怕——它生成的东西是可预测的，用来生成密码等于没生成。这篇讲浏览器里正确的随机方式 crypto.getRandomValues：为什么它安全、为什么"取模取随机数"会有偏差、以及一个能直接用的密码生成函数。 做个随机密码生成器，第一反应是 Math.random() 取随机数。查了资料才后怕——它生成的东西是可预测的，用来生成密码等于没生成。这篇讲浏览器里正确的随机方式 crypto.getRandomValues：为什么它安全、为什么"取模取随机数"会有偏差、以及一个能直接用的密码生成函数。
- 纯前端作息时间表，自定义每日各时段安排，到点弹窗/通知提醒，配置存本地。技术内核是时间字符串解析和"当前时间是否落在区间内"的区间判定。 纯前端作息时间表，自定义每日各时段安排，到点弹窗/通知提醒，配置存本地。技术内核是时间字符串解析和"当前时间是否落在区间内"的区间判定。
- 手写拼接 URL 查询参数容易漏掉编码、拼出 `?&` 这类脏链接，参数一多顺序和空值全靠人脑记。改用 URLSearchParams，编码、空值、多值参数交给它统一处理，附遍历、追加、序列化与常见坑。 手写拼接 URL 查询参数容易漏掉编码、拼出 `?&` 这类脏链接，参数一多顺序和空值全靠人脑记。改用 URLSearchParams，编码、空值、多值参数交给它统一处理，附遍历、追加、序列化与常见坑。
- 懒加载的代码只有几行：loading="lazy"。但"让图片晚点加载"和"让用户看到图片时它刚好已经在加载"是两件事——后者才是难的地方。 一、原生方案够用的情况<img loading="lazy" decoding="async" alt="描述文字">loading="lazy" 是浏览器原生的，视口外的图片不加载。目前主流浏览器都支持，绝大多数场景用这一行就够了。两个配套属性：d... 懒加载的代码只有几行：loading="lazy"。但"让图片晚点加载"和"让用户看到图片时它刚好已经在加载"是两件事——后者才是难的地方。 一、原生方案够用的情况<img loading="lazy" decoding="async" alt="描述文字">loading="lazy" 是浏览器原生的，视口外的图片不加载。目前主流浏览器都支持，绝大多数场景用这一行就够了。两个配套属性：d...
- 用 Intersection Observer 给长页面做图片懒加载：data-src 存真地址、进视口才赋值 src、加载完 unobserve，含 rootMargin 提前加载、threshold 阈值、完整片段与老浏览器降级等注意点。 用 Intersection Observer 给长页面做图片懒加载：data-src 存真地址、进视口才赋值 src、加载完 unobserve，含 rootMargin 提前加载、threshold 阈值、完整片段与老浏览器降级等注意点。
- 做一个喝水提醒小工具的三个部分——按天记录水量与目标量、页面内定时加系统通知双通道提醒、以及跨天自然清零的统计方式，附后台降频和权限被拒的兜底处理。 做一个喝水提醒小工具的三个部分——按天记录水量与目标量、页面内定时加系统通知双通道提醒、以及跨天自然清零的统计方式，附后台降频和权限被拒的兜底处理。
- 手写一个单文件前端异常监控脚本：window.onerror 收同步错误、unhandledrejection 收 Promise 拒绝、捕获阶段 error 收资源失败，用 sendBeacon 上报并以 fetch(keepalive) 兜底，配指纹去重、随机采样和上下文补全，另附 Express 接收接口。含死循环、Script error、source map、体积限制等坑。 手写一个单文件前端异常监控脚本：window.onerror 收同步错误、unhandledrejection 收 Promise 拒绝、捕获阶段 error 收资源失败，用 sendBeacon 上报并以 fetch(keepalive) 兜底，配指纹去重、随机采样和上下文补全，另附 Express 接收接口。含死循环、Script error、source map、体积限制等坑。
- 从容量、失效时机、是否随请求发送、读写 API 四个维度对比 cookie、localStorage、sessionStorage，说明登录态应放 HttpOnly 的 cookie，纯前端数据放 Storage。 从容量、失效时机、是否随请求发送、读写 API 四个维度对比 cookie、localStorage、sessionStorage，说明登录态应放 HttpOnly 的 cookie，纯前端数据放 Storage。
上滑加载中
推荐直播
-
华为云码道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华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签