上周（#324~327）前端发生哪些新鲜事儿？
站长
· 阅读数 11
前端周刊#324~327 (2023年8月14日至2023年9月10日)
MEDIUM 上有位博主叫：Fresh Frontend Links （前端文摘速递）
每周都会更新 1 篇文章，关于：总结上一周 “前端新鲜事儿”，汇聚成链接合集
推荐大家阅读/翻译文摘里面的文章，紧跟时事，了解/掌握前端行业新闻，也给想写作或尝试突破新技术领域的同学们提供思路
#324
Web开发
- 使用OpenAI API创建经过自己数据训练的聊天机器人：本文介绍了如何使用OpenAI API创建一个聊天机器人，该机器人经过训练，可以回答你的问题，还可以学习你的偏好和兴趣。
- 🤖我们让AI把Web框架想象成超级英雄🦸♂️🦾：这篇文章介绍了作者使用AI生成了一组Web框架的超级英雄形象，并对每个超级英雄做出了简要解释。
- 页面滚动时的列与行动画：这篇文章介绍了如何使用CSS和JavaScript创建页面滚动时的列与行动画效果。
- 可访问性
- aria-haspopup和屏幕阅读器：本文介绍了aria-haspopup属性在屏幕阅读器中的使用方法及注意事项。
- 列表的入门指南和如何使其可访问：本文介绍了如何创建可访问的列表，以及如何使用ARIA属性增强列表的可访问性。
- The Verge的新闻链接显示方式是个糟糕的想法：本文批评The Verge网站的新闻链接显示方式，认为该方式不仅不可访问，而且会给用户带来困扰。
CSS
- 平滑的入场和出场动画的四个新CSS特性：本文介绍了Chrome 94中新增的四个CSS特性，这些特性可以用于创建平滑的入场和出场动画。
- CSS响应式滚动驱动文本揭示[Chrome 115+]：这篇文章介绍了如何使用CSS创建响应式滚动驱动的文本揭示效果。
- CSS选择器：可视化指南：这篇文章提供了一份CSS选择器的可视化指南，帮助你更好地理解和使用CSS选择器。
- 如何使用CSS gap属性：本文介绍了CSS gap属性的用法和优点。
JavaScript
- Dropbox.Tech：我们如何将JavaScript打包的大小减少了33%：这篇文章介绍了Dropbox是如何通过减小JavaScript打包文件的大小来提升网站性能的。
- JavaScript文件优化指南：本文提供了一系列优化JavaScript文件的技巧和工具，以提高网站性能。
- 渐进式增强的表单验证，第2部分：JavaScript层：这篇文章介绍了如何使用JavaScript实现渐进式增强的表单验证。
- 使用Bun构建快速的Next.js风格应用：这篇文章介绍了如何使用Bun框架构建快速响应的Web应用程序。
React
- 奇妙的闭包和如何在React中找到它们：这篇文章介绍了在React中使用闭包的技巧及其优点。
- React Hook：useGlobalState：本文介绍了如何使用React Hook实现全局状态管理。
- 构建双向数据绑定的钩子以在React中绑定表单输入：这篇文章介绍了如何使用React Hook构建双向数据绑定，以更方便地管理表单输入。
Vue
- 从Vue 2到3：一个漫长的旅程：本文介绍了Vue 3相对于Vue 2的更新，以及如何升级你的Vue应用程序。
Angular
- 信号和可观察之间的甜蜜点🍬：这篇文章介绍了如何在Angular应用程序中优雅地管理异步操作。
- 开始使用Angular生成AI：这篇文章介绍了如何在Angular中使用机器学习算法生成艺术作品。
- Angular信号：保持响应式：这篇文章介绍了Angular中的信号（Signal）概念，以及如何使用信号管理状态。
Svelte
- SvelteKit入门指南：这篇文章介绍了如何使用SvelteKit框架创建快速响应的Web应用程序。
- OAuth太复杂了…或者使用Svelte的90行代码：这篇文章介绍了如何使用Svelte轻松实现OAuth2认证。
#325
Web开发
工具
可访问性
用户体验
CSS
- CSS 2023年结果状态
- 使用CSS阴影的一些有趣方法，不仅用于深度
- CSS @scope的快速介绍
- 开始探索CSS中的滚动驱动动画
- 闪电CSS-一个极快的CSS解析器、转换器、捆绑器和最小化器。
- 使用显示：flex和伪类在骰子上布置点
- 使用Panda CSS创建类型安全样式
- 使用CSS创建自定义选择下拉菜单
- 如何避免CSS ch布局转换
JavaScript
React
框架
#326
Web-development
- Astro 3.0：第一个支持 View Transitions API 的主要 Web 框架
- 15 条糟糕的 Web 开发建议
- 构建 GraphQL 网关：组合、拼接或合并任何数据源
- 为什么邮件开发必须很糟糕？
- github.blog: 为什么 Rust 是开发者最喜欢的语言
- 烹饪出出色的 Web 性能：厨师的 Web 核心指标指南
- 暗模式：用户对其的看法和需要避免的问题
效果
CSS
- 案例研究：使用现代 CSS 重新构建 TechCrunch 布局
- CSS 中隐藏元素的 10 种方法
- 爱上 Oklch：色彩空间、色域和 CSS 的爱情故事
- 无预处理器的本地 CSS 嵌套——今天就开始使用吧
JavaScript
- Mastodon：使用 Cloudflare Workers 构建一个 Marvel 角色信息机器人
- JavaScript 函数式编程：深入探讨
- Angular vs. React vs. Vue.js：性能比较
- 如何使用 Supabase & Next JS 创建联系表单
React
- 使用 React Router v6 为私有和公共路由提供访问验证
- 掌握 useReducer 进行复杂状态管理
- 停止将 Web 组件与 React 进行比较：库中心批评的陷阱
- 理解 React 如何处理输入状态：深入探究
- React 状态管理：现代指南 2023
- 在 React 18 中将业务逻辑与 UI 组件分离
Vue
Angular
Svelte
#327
Web-development
工具
CSS
- CSS Only Pagination
- 使用 @property 实现类型安全的 CSS 设计系统
- 具有滚动驱动动画的 iOS 样式滚动栏
- 使用 CSS 提高响应式数据表格的用户体验
- CSS 鲁莽的 owl 选择器：现代指南
JavaScript
- JavaScript WTF：为什么 every() 返回空数组时返回 true？
- JavaScript 中的延迟、暂停、等待
- 在 JavaScript 中使用标记循环
- 如何创建双模式跨运行时 JavaScript 包
- MERN vs. MEAN vs. MEVN：为您的 Web 项目选择正确的 JavaScript 堆栈
React
- 使用 Props 在 React 中传递数据的指南
- 理解 React 服务器组件
- React 何时重新渲染以及何时需要担心？
- waku - 带有服务器组件的极简 React 框架
- Next.js vs. Gatsby：比较 React 框架
- 使用 Bun 和 React 进行服务器端渲染（SSR）