文章
1、Type system of the React compiler
文章详细介绍了React编译器的类型系统及其实现和使用方式。
2、Creating an Interactive 3D Bulge Text Effect with React Three Fiber
这篇文章是关于如何使用React Three Fiber创建一个互动的3D 膨胀文字效果的教程。文章详细介绍了设置3D场景、将HTML元素转换为纹理并应用到平面上、使用着色器程序实现膨胀效果,以及添加光照效果以增强3D外观的过程。此外,还提供了自定义钩子useDomToCanvas来处理DOM元素到画布的转换,并在窗口大小变化时进行调整。
3、Navigating the future of frontend
文章讨论了框架的兴衰、基础概念的融合、以及如何通过编译、路由、数据加载和变更、缓存和失效等构建高层次的心智模型。文章还强调了服务器端组件(如React Server Components)的出现,它们提供了新的架构模式和能力,使得前端开发人员可以更好地理解前端生态系统的发展方向。此外,文章还涉及了客户端与服务器端路由的差异、数据获取和缓存管理的新方法,以及如何利用URL状态来优化性能和用户体验。最后,文章提出了多维组件的概念,探讨了React Server Components与其他新兴技术的结合,以及它们如何影响未来的前端开发。
过去 15 年中,Chrome 开发者工具中的“性能”面板一直在帮助开发者以一种方式衡量和优化运行时性能。该工具从名为“时间轴”的面板开始,现已演变为您现在熟悉的“性能”面板。
在此期间,Chrome 发布了其他性能强大且性能强大的产品和功能。值得注意的是,Lighthouse 于 2016 年推出,旨在帮助用户更轻松地发现优化机会。实验性 Performance Insights 面板已于 2022 年发布,以测试显示效果数据分析的新方法。
“性能”面板包含丰富的数据和功能,可帮助开发者深入了解网页加载和运行时性能问题。但接下来我们说说实话,认识一下它使用起来可能很困难,而且很难找到提高网页性能的最大优化机会。此外,Lighthouse 等其他工具(例如 Lighthouse)会整理出噪声并快速隔离机会,其功能也与“性能”面板脱节。
5、Implementing Vertical Form Controls
文章介绍了Safari 17.4版本新增的功能,即在macOS、iOS、iPadOS和visionOS上为表单控件元素添加了垂直书写模式的支持。这是为了更好地服务于东亚语言(如中文、日文和韩文)以及传统蒙古文等习惯于垂直书写和阅读的脚本。通过使用CSS的writing-mode属性,开发者可以简单地为表单控件应用垂直书写模式。WebKit团队对这一特性的支持包括了对多种控件的样式、布局和渲染的更新,以确保它们在垂直模式下的显示效果。
工具 & 库
react-json-view-lite 是一个用于 React 应用程序的 JSON 树查看器组件。它允许开发者以树状结构的形式展示和格式化 JSON 数据,使得在开发过程中查看和调试 JSON 数据变得更加直观和方便。这个库是 react-json-view 的一个轻量级版本,它去除了对 react-lifecycles-compat 的依赖,从而减小了包的大小。
主要特点包括:
- 树形视图:以树形结构展示 JSON 对象,支持展开和折叠节点,方便查看嵌套的数据结构。
- 格式化输出:自动格式化 JSON 数据,使其易于阅读。
- 自定义样式:允许开发者通过 CSS 来自定义组件的样式,以符合应用程序的设计需求。
- 键盘导航:支持使用键盘进行导航,提高交互效率。
- 响应式:组件能够适应不同的屏幕尺寸和布局。
- 无依赖:作为一个轻量级的库,react-json-view-lite 尽量减少了对外部库的依赖,使得集成更加简单。
评论 & 观点
这周去了一趟上海,住了一晚酒店,发生一件插曲,就是我的苹果耳机盒不小心掉地上了,我听到声音后看了一下耳机盒还是好的就直接捡起来放口袋里了。
第二天出去玩的时候,用耳机时发现耳机盒里面是空的,当时就懵逼了,仔细回想了一下猜到估计就是昨晚这次酒店掉地上的是耳机摔出去了,然后耳机盒又自动盖好了。于是赶紧打电话给酒店让帮忙去找一下,还好找到了。
所以各位如果下次遇到这种情况,建议确认一下耳机还在不在盒子里面,不要直接捡起耳机盒就不管了。