不得不感慨一句：打工日以每周计，时间过的真快啊~~

前端周刊 #318(6月3日至7月9日)

MEDIUM 上有位博主叫：Fresh Frontend Links （前端文摘速递）

每周都会更新 1 篇文章，关于：总结上一周 “前端新鲜事儿”，汇聚成链接合集

推荐大家阅读/翻译文摘里面的文章，紧跟时事，了解/掌握前端行业新闻，也给想写作或尝试突破新技术领域的同学们提供思路

Web开发

• 理解SVG路径：这篇文章介绍了SVG路径，包括它们是如何工作的，以及如何使用它们在Web上创建可缩放的图形。

• 反对在HTML中使用自我封闭标签：这篇文章探讨了是否应该在HTML中使用自我封闭标签，例如<img src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">和<br>标签。

• 使用Alpine.js和Deck of Cards API创建Blackjack游戏：这篇文章介绍了如何使用Alpine.js和Deck of Cards API创建一个简单的Blackjack游戏。

• 滚动时的SVG滤镜效果：这篇文章介绍了如何使用SVG滤镜在滚动时创建一个动态效果。

性能

• 捍卫DOMContentLoaded：这篇文章解释了DOMContentLoaded事件的含义以及为什么它比window.onload更好。

• 图像优化设计指南：这篇文章介绍了如何优化网站上的图像，以获得更快的加载时间和更好的用户体验。

可访问性

• article元素和屏幕阅读器：这篇文章解释了如何使用article元素来提高网站的可访问性。

• 纽约州要求州机构遵循WCAG：这篇文章介绍了纽约州的新规定，要求所有州机构的网站遵循WCAG 2.1 AA级标准。

• 禁用文本框中的粘贴不是安全功能：这篇文章解释了为什么禁用文本框中的粘贴不是一种安全功能。

• 开发人员的WWDC 2023辅助功能好东西：这篇文章介绍了苹果在2023年WWDC上推出的一些辅助功能功能。

CSS

• 新的@font-face语法：这篇文章介绍了新的@font-face语法，包括如何使用它来加载字体。

• CSS-Only滚动动画：这篇文章介绍了如何使用CSS创建滚动动画。

• 闪亮，透视和旋转：为图像创建花式CSS 3D效果：这篇文章介绍了如何使用CSS 3D效果为图像创建酷炫的效果。

• 原生CSS嵌套入门：这篇文章介绍了原生CSS嵌套，它是一种新的CSS功能，可以使样式表更易于阅读和维护。

• CSS只有浮动标签：这篇文章介绍了如何使用CSS创建浮动标签，以便在文本框中显示标签。

• 新的视口单位：这篇文章介绍了CSS中的新视口单位，包括vw、vh、vmin和vmax。

• 偏移父元素和堆叠上下文：在所有三个维度中定位元素：这篇文章解释了偏移父元素和堆叠上下文的含义，以及如何使用它们来定位元素。

• 重用代码：掌握SCSS Mixins：这篇文章介绍了如何使用SCSS mixins来重用CSS代码。

• 功能性CSS很棒，除非它不是（或者为什么您不应该在大型应用程序中使用功能性CSS）：这篇文章探讨了在大型应用程序中使用功能性CSS的利弊。

JavaScript

• 毫秒不是毫秒时：这篇文章解释了JavaScript中的时间处理中的一些陷阱，包括不同浏览器之间的差异。

• 编码随机的Zelda图案：这篇文章介绍了如何使用JavaScript和HTML Canvas创建Zelda风格的图案。

• 永远的功能性：使用TypeScript和Poker：这篇文章介绍了如何使用函数式编程和TypeScript创建一个简单的Poker游戏。

• 从TypeScript类型生成JSON模式：这篇文章介绍了如何从TypeScript类型生成JSON模式。

• 超越浏览器：JavaScript标准的长期未来：这篇文章探讨了JavaScript标准的未来，包括WebAssembly、服务端JavaScript和机器学习。

React

• React图表库：为Web构建交互式图表：这个React图表库包含了大量的交互式图表，非常适合在Web上创建数据可视化。

• Next.js中的增量静态再生（ISR）：这篇文章介绍了Next.js中的增量静态再生（Incremental Static Regeneration，简称ISR），它可以提高Web应用程序的性能。

• 如何防止不必要的React组件重新渲染：这篇文章介绍了如何防止React组件在不必要的情况下重新渲染，以提高应用程序的性能。

• 超越Axios拦截器：定制刷新令牌处理程序：这篇文章介绍了如何使用Axios拦截器定制刷新令牌处理程序。

• 在React中解耦UI和逻辑：使用无头组件的清晰代码方法：这篇文章介绍了如何使用无头组件来解耦React中的UI和逻辑。

• 如何使用XState和React实现媒体库：这篇文章介绍了如何使用XState和React创建一个简单的媒体库。

• 如何在React中实现功能门？：这篇文章介绍了如何在React中实现功能门（Feature Gates）。

Vue

• 2023年的Vue.js单体库：这篇文章介绍了如何使用Vue.js构建单体库。

• 将Jest测试集成到具有ViteJs的现有Vue 3项目中：这篇文章介绍了如何将Jest测试集成到具有ViteJs的现有Vue 3项目中。

• Vue.js条件渲染：v-if vs. v-show：这篇文章解释了Vue.js中的条件渲染，包括v-if和v-show指令的使用方法。

Angular

• 自定义Angular构建的一些技巧：这篇文章介绍了如何使用Angular构建自定义应用程序，包括如何优化构建时间和大小。

• Angular中的最差实践：这篇文章介绍了Angular中的一些最差实践，包括不良的代码组织和缺乏注释。

OK，以上便是本次分享，希望各位喜欢~ 欢迎点赞、收藏、评论 🤟 我是安东尼 🤠 人气技术博主 💥 坚持千日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏 微信 ATAR53，拉你入群，不定期抽奖、只学习交友、不推文卖课~

注：本文借助 AIGC 辅助创作