前端技术观察第25期

微信扫一扫,分享到朋友圈

前端技术观察第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等。如果你想加入我们的团队,欢迎投递简历到 lisqpersonal@163.com 标题:【求职】岗位-姓名-电话

点赞、在看、转发 支持作者:heart:

微信扫一扫,分享到朋友圈

前端技术观察第25期

Python 迭代器 生成器 装饰器 上下文管理器

上一篇

魅族举办王者荣耀全国大赛:冠军奖励5台魅族17 全年Pizza免单

下一篇

你也可能喜欢

前端技术观察第25期

长按储存图像,分享给朋友