前端周刊#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开发

• Web采用曲线-2023年8月
• 如何使用HTML、CSS和JavaScript实现分页
• 请调整内联SVG的大小
• 如何制作下一级别的Figma插件：认证、路由、存储等
• 使用Web组件做好它们擅长的工作

工具

• 从Webpack迁移到Vite的指南
• 快速技巧：使用浏览器开发人员工具将任何网站的所有链接放入电子表格中

可访问性

• 如何构建可访问的按钮组件
• 渐进式增强的表单验证，第3部分：验证复选框组

用户体验

• 更好的上下文菜单与安全三角形
• 理想的视口不存在

CSS

• CSS 2023年结果状态
• 使用CSS阴影的一些有趣方法，不仅用于深度
• CSS @scope的快速介绍
• 开始探索CSS中的滚动驱动动画
• 闪电CSS-一个极快的CSS解析器、转换器、捆绑器和最小化器。
• 使用显示：flex和伪类在骰子上布置点
• 使用Panda CSS创建类型安全样式
• 使用CSS创建自定义选择下拉菜单
• 如何避免CSS ch布局转换

JavaScript

• 理解异步上下文和服务器端JavaScript的未来
• 使用现代原始JavaScript进行响应式的模式
• 使用Shadow DOM和样式封装的优缺点

React

• React的并发模式的基本机制
• React Js代码整洁指南
• 高级React模式🔡：增强错误🚫处理和感知性能🦾
• 如何更新几年前过时的Node和React项目？
• 状态管理的当前状态

框架

• 使用Analog和Angular构建博客✍️
• 如何使用Svelte构建计算器应用程序
• 宣布Nuxt 3.7

#326

Web-development

• Astro 3.0：第一个支持 View Transitions API 的主要 Web 框架
• 15 条糟糕的 Web 开发建议
• 构建 GraphQL 网关：组合、拼接或合并任何数据源
• 为什么邮件开发必须很糟糕？
• github.blog: 为什么 Rust 是开发者最喜欢的语言
• 烹饪出出色的 Web 性能：厨师的 Web 核心指标指南
• 暗模式：用户对其的看法和需要避免的问题

效果

• 连接的网格布局动画
• 使用 HTML、CSS 和 SVG 制作橡胶按钮
• 贝塞尔曲线

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

• 将图标库集成到 Vue 应用程序中
• 从父组件访问子组件数据
• 介绍 Vue.js 中的原子设计
• 探索 Nuxt 3 DevTools

Angular

• 使用 inject() 函数掌握 Angular 的分层依赖注入
• 2023 年之前，Angular 并不那么好

Svelte

• 如何在 Svelte 中使用 Tailwind CSS

#327

Web-development

• 新版 Google Fonts：找到您要找的内容
• WOFF 脱离设计
• 布局位置如何影响三大 Web 性能杠杆
• 浏览器视频播放器评估

工具

• Node.js 包含对 .env 文件的内置支持
• 宣布 Deno Deploy 上原生的 npm 支持
• Bun 1.0 终于来了。
• Biome 工具链发布了

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）

Vue

• Vue.js 中可重用组件的 3 个主要问题
• 使用 Vue3 在几分钟内使用腾讯 RTC 构建视频通话网站

Angular

• 这里发生了什么？Angular 日志记录入门
• 后端程序员在 Angular 中常犯的错误
• Angular 中的无限滚动：无需实现

Svelte

• Svelte 的新功能：2023 年 9 月
• 您不需要“学习”Svelte

Libs & Plugins

• Quickboot.js 是一种实验性的工具，可将 JS 代码大小缩小至树摇之外
• uDSV - 一个 5KB 的更快的 CSV 解析器

浏览器

• Firefox Profiler 和 CO2.js 中的浏览器 DevTools 碳排放量
• Firefox 中的更快的 Vue.js 执行
• Chrome 庆祝 15 周岁，推出新功能和新设计

有段时间没更了，回归初心，补齐、继续坚持~搬运的过程中让我想到了最初的《掘金翻译计划》，打开技术视野，还是相当有价值的，只不过还有多少人能耐下心来，翻译优化甚至反刍实践呢？