上周前端发生哪些新鲜事儿? #405

# 前端每周文摘 - 每周更新:国外论坛的前端热门文章,推荐大家阅读/翻译,紧跟时事,了解/掌握前端行业新闻,也给想写作或尝试突破新技术领域的同学们提供思路~

网页开发

揭秘 Web 组件;这篇文章揭示了 Web 组件的原理和使用方法,帮助开发者理解自定义元素、Shadow DOM 与 HTML 模板的应用。

用原生 JS 和 CSS 制作基于浏览器的游戏;这篇文章讲解了如何利用纯 JavaScript 与 CSS 制作浏览器游戏,展示了无需框架也能实现游戏逻辑和动画的技术。

利用 Astro Actions 和 Fuse.js 构建搜索功能;这篇文章介绍了如何结合 Astro Actions 与 Fuse.js 实现高效搜索,详细解析了搜索算法和前端实现方案。

Apollo:GraphQL 现可轻松连接 REST API;这篇文章介绍了 Apollo 的新功能,使 GraphQL 能够简单整合 REST API 服务。

Oxlint 现已进入测试版,经过社区一年多的开发;这篇文章宣布了 Oxlint 测试版的发布,展示了社区协作下新工具的进展与功能预览。

使用 IntersectionObserver API 实现背景图片懒加载;这篇文章讲解了如何利用 IntersectionObserver API 实现背景图片的懒加载,有效提升页面加载速度和性能。


特效

在 Three.js 中玩转光影与折射:在玻璃环面内扭曲 3D 文本;这篇文章展示了如何在 Three.js 中利用光影与折射效果扭曲 3D 文本,创造出独特且引人注目的视觉体验。

在 WebGL 中复制 CSS object-fit:优化图像缩放和定位技术;这篇文章探讨了在 WebGL 环境下实现类似 CSS object-fit 效果的方法,提供了高效的图像缩放与定位技术。

使用 Three.js 和 TSL 在玻璃球内渲染程序化漩涡;这篇文章介绍了如何在玻璃球内利用 Three.js 和 TSL 渲染程序化漩涡,展示了复杂 3D 效果的实现过程。

玻璃按钮;这篇文章展示了玻璃效果按钮的实现方法,通过 CSS 和 HTML 制作出具有现代感的交互按钮。


CSS

CSS 中图片覆盖指南;这篇文章讲解了如何使用 CSS 实现图片覆盖效果,介绍了多种叠加技术和实现策略。

利用 content-visibility CSS 属性加速渲染;这篇文章介绍了 content-visibility 属性的使用,阐释了如何通过它提升页面渲染速度。

可定制的下拉选择框 ------ 第一部分:历史、技巧与 CSS 样式设计;这篇文章探讨了下拉选择框的定制化,回顾历史并讲解如何使用 CSS 美化选择框。

应用视图过渡:平滑动画边框圆角;这篇文章讲解了如何利用视图过渡实现平滑的边框圆角动画,提升界面切换的流畅度。

无限循环的 logo 动画;这篇文章展示了如何创建无限循环的 logo 动画,运用 CSS 技巧实现持续动画效果。

轻松风格的文本下划线;这篇文章介绍了如何设计时尚的文本下划线效果,通过 CSS 提升文本的视觉表现。

让错落排列实验开始;这篇文章探讨了利用 CSS 实现元素错落排列的实验方法,展示了渐进式动画和布局调整技巧。


TypeScript

10 倍加速的 TypeScript;这篇文章介绍了使 TypeScript 构建速度提升 10 倍的方法,通过原生移植实现更高效的编译过程。

TypeScript 正在将编译器移植到 Go 以实现 10 倍加速构建;这篇文章讲述了 TypeScript 编译器移植到 Go 的计划,旨在大幅提升构建速度与性能。

Deno 对 Node 最近支持 TypeScript 的回应;这篇文章讨论了 Deno 对 Node.js 新增 TypeScript 支持的反应,探讨了两大平台在生态系统中的竞争与合作。

TypeScript 枚举:用法、优势与最佳实践;这篇文章详细介绍了 TypeScript 枚举的使用方法,分析了其优势以及如何在项目中正确应用。


JavaScript

ECMAScript 引擎如何优化变量;这篇文章探讨了 ECMAScript 引擎优化变量的策略,揭示了底层性能提升的关键技术。

JavaScript 疲劳反击;这篇文章讨论了 JavaScript 社区面临的疲劳现象,反思了技术更新频繁所带来的挑战。

为何最新的 JavaScript 框架浪费时间;这篇文章批评了最新的 JavaScript 框架,指出其在实际开发中可能导致不必要的复杂性。

如何修复 Vue.js 中的 CORS 错误;这篇文章提供了解决 Vue.js 中 CORS 错误的方法,详细说明了常见问题及其修复方案。


React

超越 React.memo:更智能的性能优化方法;这篇文章探讨了比 React.memo 更高效的性能优化策略,分享了先进的 React 优化技巧。

纽约时报如何系统性地从 Enzyme 迁移到 React Testing Library;这篇文章详细讲述了纽约时报测试工具迁移的过程,展示了从 Enzyme 到 React Testing Library 的转变原因和方法。

如何在快速变化的 React 环境中处理 react-scripts;这篇文章讨论了 react-scripts 的最佳实践,帮助开发者应对 React 生态系统中的快速变革。

AbortController API 完整指南;这篇文章提供了关于 AbortController API 的详尽指南,讲解了如何控制和中断异步操作。

相关推荐
_一条咸鱼_28 分钟前
Python 数据类型之可变与不可变类型详解(十)
人工智能·python·面试
_一条咸鱼_28 分钟前
Python 入门之基本运算符(六)
python·深度学习·面试
_一条咸鱼_28 分钟前
Python 语法入门之基本数据类型(四)
人工智能·深度学习·面试
_一条咸鱼_29 分钟前
Python 用户交互与格式化输出(五)
人工智能·深度学习·面试
_一条咸鱼_30 分钟前
Python 流程控制之 for 循环(九)
人工智能·python·面试
_一条咸鱼_33 分钟前
Python 语法入门之流程控制 if 判断(七)
人工智能·python·面试
Senar33 分钟前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
_一条咸鱼_34 分钟前
Python 流程控制之 while 循环(八)
人工智能·python·面试
_一条咸鱼_36 分钟前
Python 垃圾回收机制 GC 深度解析(三)
人工智能·深度学习·面试
_一条咸鱼_37 分钟前
Android Picasso 监听器模块深度剖析(八)
android·面试·android jetpack