Node.js 详解
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它让 JavaScript 可以在浏览器之外运行。本文将从概念到实践，全面介绍 Node.js，并深入分析它与浏览器 JavaScript 的差异。
0%
Reflect 详解
发表于 分类于 JavaScript
本文字数： 28k 阅读时长 ≈ 26 分钟
Symbol 详解
发表于 分类于 JavaScript
本文字数： 7.8k 阅读时长 ≈ 7 分钟
HTML 可渲染标签速览
发表于 分类于 HTML
本文字数： 7.4k 阅读时长 ≈ 7 分钟
事件循环（Event Loop）详解
发表于 分类于 JavaScript
本文字数： 16k 阅读时长 ≈ 15 分钟
事件循环（Event Loop）是 JavaScript 异步编程的核心机制，理解它是成为一名优秀前端工程师的必备技能。本文将从基础概念到浏览器和 Node.js 的实现，全面讲解事件循环。
IntersectionObserver 检测元素是否可见或元素间是否相交
发表于 分类于 JavaScript
本文字数： 4.2k 阅读时长 ≈ 4 分钟
过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：
- 图片懒加载——当图片滚动到可见时才进行加载
- 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
- 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
- 在用户看见某个区域时执行任务或播放动画
Web 用户体验设计提升指南
发表于 分类于 性能优化
本文字数： 4k 阅读时长 ≈ 4 分钟
用户体验设计秉承着以用户为中心的思想，以用户需求为目标。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。良好的用户体验设计，是产品每一个环节共同努力的结果。
除去一些很难一蹴而就的，本文将就页面展示、交互细节、可访问性三个方面入手，罗列一些在实际的开发过程中，积攒的一些有益的经验。通过本文，你将能收获到：
了解到一些小细节是如何影响用户体验的
了解到如何在尽量小的开发改动下，提升页面的用户体验
了解到一些优秀的交互设计细节
了解基本的无障碍功能及页面可访问性的含义
了解基本的提升页面可访问性的方法
汉堡菜单按钮的实现
发表于 分类于 CSS
本文字数： 1.9k 阅读时长 ≈ 2 分钟
当用户点击菜单按钮，在弹出导航栏的同时，汉堡形状的按钮也会动画渐变成叉号。再次对其点击时，导航栏收回，按钮也恢复原样。关于汉堡菜单，虽然 GitHub 上已经有相关的库 hamburgers，但因为我使用的 nuxt 框架采用的是 rem 布局，对于 px 到 rem 的转换让我实在头疼。再三思量之下，还是决定自己手动模仿一个出来。具体实现效果如下动图。
css 实现只旋转边框，内含文字不转动
发表于 分类于 CSS
本文字数： 2k 阅读时长 ≈ 2 分钟
在按设计稿搭建项目页面时，碰到了一处内容呈现方式如下图所示的元素。文字在菱形边框内居中摆放的布局看似简单，却让我陷入了长时间的束手无策。如果只是通过 transform 将一个 div 旋转 45deg，其内的文字也会跟着转动，这显然不符合要求。