前端技术观察第25期

《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集，主要分为以下几个板块：

• Highlights

  • 优秀的工具、库

  • 好的教程、深度解读已有技术的文章

  • 业界最新的技术、热点文章

  • 业界对（新）技术的深度地、优秀地实践

  • Tutorial

  • Tools And Codes

《前端技术观察》的目的是让大家：

• 更及时的了解到业界最新的技术

  • 受益于高质量的教程、文章

  • 了解业界更优秀的代码、工具

  • 更多地、氛围更浓厚地讨论、研究、落地技术

highlights

如何使用AVIF:新一代图像压缩格式(英)

与JPEG或WebP相比，AVIF为图像提供了显著的文件大小缩减;与JPEG相比节省50%，与WebP相比节省20%。

https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

铅字排版:数字排版的未来(英)

一个新兴的CSS标准如何解决老问题并提高web应用程序的门槛

https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202

DevTools（Chrome 86）的新增功能(英)

包括一个新的 Media 面板，捕获节点屏幕截图的能力，模拟缺少的本地字体，等等

https://frontendfoc.us/link/94118/web

理解 Web 性能监控(英)

这是一个度量web性能和发现现代web应用程序中常见性能问题的不错指南。

https://blog.bitsrc.io/understanding-web-performance-monitoring-2ed52f97a974?gi=2c42efc41da7

登录表单最佳实践(英)

查看如何使用跨平台浏览器特性来构建安全、可访问且易于使用的登录表单。

https://web.dev/sign-in-form-best-practices/

CSS主题化指南(英)

如何使用CSS变量和JavaScript创建具有主题的应用程序。

https://blog.logrocket.com/a-guide-to-theming-in-css/

Marks: 一种用于快速网页渲染的标记语言(英)

类似于Markdown，但有一些额外的特性，包括添加样式的能力和自定义组件的使用

https://marksjs.com/

ImmortalDB: 为浏览器提供的弹性键值存储(英)

数据被冗余存储在许多地方，如cookie、IndexedDB、LocalStorage和SessionStorage，以及根据需要的self healing中。1.1版本刚刚问世。

https://github.com/gruns/ImmortalDB

Electron 10.0.0 已发布(英)

v10升级到Chromium 85、Node 12.1.3和V8 8.5。

https://www.electronjs.org/blog/electron-10-0

tutorial

如何使用Firebase构建自己的评论系统?(英)

通过学习Firebase的基础知识，学习如何用Firebase在你的博客上添加评论部分。

https://www.smashingmagazine.com/2020/08/comment-system-firebase/

无头技术：Puppeteer 和 Playwright 的学习指南(英)

Puppeteer 和 Playwright 都是非常棒的高级浏览器控制 api，您可以从 Node 使用它们，无论是用于测试、Web上的自动操作、抓取，还是更多。使用这些工具时，代码示例总是很有用，而这些指南在这方面有很大帮助。

https://theheadless.dev/

我是如何贡献 Angular 组件的(英)

一个开发人员分享他作为Angular组件贡献者的经验

https://blog.angular.io/how-i-contributed-to-angular-components-b3a8830ca268?gi=29080e8b0694

让我们建立一个多人战舰游戏(英)

由三位不同的开发人员组成的由三个部分组成的截屏视频系列，真正深入地研究了在前端和后端构建完整的多人游戏。您需要花一些时间来完成所有这些工作，但这是一个整洁的协作，可能会激发您参加Js13kGames！

https://www.youtube.com/watch?v=U64vIhh0TyM

使用状态机在React中构建确认模式(英)

使用useEffect并跟踪显示/隐藏，加载/不显示和错误，React确认模式可能很棘手。状态机使它更加容易。

https://daveceddia.com/react-confirmation-modal-state-machine/

tools And codes

dnjs：配置语言，javascript的子集（英）

dnjs是使用python编写的配置语法，是JavaScript的子集，可以用于快速动态生成json、xml、html等配置。

https://github.com/leontrolski/dnjs

yarn2.2：更快、更轻量，支持dedupe优化（英）

yarn2.2提供了dedupe命令，用于合并兼容的依赖的版本，同时通过优化减少了依赖安装的时间。

https://dev.to/arcanis/yarn-2-2-dedupe-faster-lighter-ha5

light-date：快速、轻量时间格式化库

light-date是一个支持node和浏览器的处理时间格式化的库，具有快速、轻量（157 Bytes）的特点。

https://github.com/xxczaki/light-date

fake.js：自动生成大量近乎真实的模拟数据

fake.js用于模拟器数据的自动化生成，能够自动生成git历史记录、数据库返回字段、地址、网络信息等等模拟数据。

https://github.com/Marak/faker.js

本系列会持续更新，欢迎大家持续关注。IES前端团队负责字节跳动互娱社区全线产品前端开发工作，包括但不限于抖音、火山、轻颜、faceu等。如果你想加入我们的团队，欢迎投递简历到 [email protected] 标题：【求职】岗位-姓名-电话