前端
React 核心概念的可视化探索
React 核心概念的可视化探索，React gg 出品的教程，通过可视化能更快的理解 React 核心概念。忘了就会来这里翻一翻。
Slack、Notion与VSCode优化Electron应用性能的6种方法
Electron应用通常面临相同的性能问题：启动缓慢且交互体验不佳。但通过正确的性能优化方法，您的Electron应用完全可以媲美原生应用。
- 使用 Bundler，避免
require() - 推迟非关键性的功能导入
- 将计算密集型工作负载迁移至 WebAssembly 或原生模块
- 利用 V8 快照缩短初始化时间
- 监控生产环境中的终端用户性能
- Electron中的终端用户JavaScript性能分析
今年 JS 30 岁了，JS 发展简史
这是有一份 Deno 整理的 JS 发展时间线。在 30 年内，JavaScript从一个在10天内开发的奇怪的小脚本语言发展成为世界上最受欢迎的编程语言。以下是其历史上的一些关键时刻，以展示JavaScript是如何演变的，以及它的发展方向。
React 实验室：View Transitions, Activity 功能
React 发布了两个新的实验性特性。
**<ViewTransition> (视图过渡)：**简化了在 React 应用中添加 UI 过渡动画（如导航、展开、重排等）
支持页面导航动画、共享元素过渡（Shared Element Transitions）、根据触发原因（使用 addTransitionType）应用不同动画、Suspense 加载状态切换动画、列表项重排/过滤动画。
<Activity> (活动)：控制 UI 部分的显示和隐藏，同时在隐藏时保留其状态。
Node 24.0.0 发布
- V8 引擎已升级至 13.6，带来了多项新的 JavaScript 特性
- Npm 升级到 11，带来了性能提升、增强的安全特性以及对现代 JavaScript 包更好的兼容性
- AsyncLocalStorage API 的默认行为变更
- URLPattern API 成为全局可用
- ...
HTML Dialog 元素的几个CSS技巧
背景模糊：
dialog::backdrop {
backdrop-filter: blur(2px);
}
打开时禁止页面滚动：
body:has(dialog[open]) {
overflow: hidden;
}
CSS height 属性的困惑
- CSS中，
width和height的默认计算方式截然不同：块级元素的width默认扩展以填充可用宽度（依赖父元素），而height则默认收缩以包裹其子元素内容（依赖子元素）。 - 当子元素设置
height: 50%时，它期望基于父元素的高度来计算；但如果父元素的高度依赖于其子元素的内容（默认行为），这就形成了一个无法解析的循环依赖："子元素高度依赖父元素，父元素高度依赖子元素"。 - 因此，浏览器会忽略子元素上的百分比高度声明。
如何解决这个问题呢，我们需要让高度变得可预知
-
通过为父元素设置固定高度（如
px或rem）或利用html元素相对于视口的特性来解决此问题 -
警惕
min-height的陷阱 ，并不能使其高度变为"可预知"的 -
使用 Flexbox 或 Grid 布局