上周前端发生哪些新鲜事儿? #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 的详尽指南,讲解了如何控制和中断异步操作。

相关推荐
野生的程序媛4 分钟前
重生之我在学Vue--第12天 Vue 3 性能优化实战指南
前端·javascript·vue.js
vvilkim24 分钟前
Vue.js 中的计算属性、监听器与方法:区别与使用场景
前端·javascript·vue.js
乘风!26 分钟前
SpringBoot前后端不分离,前端如何解析后端返回html所携带的参数
前端·spring boot·后端
嘟嘟叽27 分钟前
flutter 图片资源路径管理
开发语言·javascript·flutter
qq_4560016542 分钟前
32、构造函数
开发语言·javascript·ecmascript
Anlici2 小时前
跨域解决方案还有优劣!?
前端·面试
uhakadotcom2 小时前
MaxCompute Python UDF开发指南:从入门到精通
后端·面试·github
苹果电脑的鑫鑫2 小时前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼2 小时前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
忧郁的蛋~2 小时前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化