前端技术观察第 30 期

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

• Highlights

  • 优秀的工具、库

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

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

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

  • Tutorial

  • Tools And Codes

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

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

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

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

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

highlights

尤雨溪与Rich Harris关于Vue和Svelte的对话

尤雨溪，Vue.js之父, Rich Harris则是Svelte的创造者， 在同一个直播节目里面讨论前端的未来。

https://javascriptweekly.com/link/99823/web

提升Typescript性能的小贴士（英）

文章汇总了一些能提高Typescript编译性能的使用方法和配置技巧

https://javascriptweekly.com/link/99442/web

WMR：适用于现代Web应用程序的微型多合一开发工具

Preact团队推出了一个有趣的把打包，JSX，CSS等模块支持等功能的web应用整合在一起的全家桶。如果您想了解此Twitter主题以了解令人兴奋的原因，请从npminit.wmr项目名开始。

https://javascriptweekly.com/link/99821/web

2020 年 CSS 现状报告（英）

CSS 在 2020 年使用现状(偏国外的一个统计)，可以借此理解 CSS 的开发者现状、特性使用现状、单位、选择器、周边工具等情况。

https://2020.stateofcss.com/en-US/

来自 JS13K 2020 竞赛的十大游戏（英）

这个比赛需要开发者在一个月的时间内用不到 13KB 的 JS 实现一个网页游戏，来看看排名前十的都有哪一些。

https://github.blog/2020-10-11-top-ten-games-from-the-js13k-2020-competition/

如何搭建一套 “无痕埋点” 体系?

本文主要讲解如何搭建一套 无痕埋点 数据采集体系。

https://mp.weixin.qq.com/s/nJZk-0WtEW6C8mTeJCSUzQ

tutorial

浏览器自动化测试工具Puppeteer、Selenium、Playwright的性能对比（英）

剧透：有各种针对特定场景的基准测试，然而实际应用场景基本都不能一概而论，使用适合您使用情况的任何一种。

https://javascriptweekly.com/link/99792/web

一种交互体验更好的鼠标悬停动画方案（英）

文章通过鼠标悬停动画的优化这一小改进，阐述了一个道理：用户体验需从细节入手

https://javascriptweekly.com/link/99457/web

浏览器前进/后退缓存（英）

文章介绍了在使用浏览器的后退和前进按钮时，如何优化页面使其即时加载

https://javascriptweekly.com/link/99430/web

如何搭建发布一个Serverless的机器学习应用

完整的代码示例展示如何用 React JavaScript 构建一个有趣的图片滤镜的APP，并部署到 Netlify 和 S3

https://javascriptweekly.com/link/99433/web

如何给Node.js应用搭建CSP安全策略（英）

文章介绍了CSP的原理，用代码演示了如何设置CSP安全策略，以及监控违反CSP的请求

https://nodeweekly.com/link/99300/web

响应式图片完全手册（英）

系统性阐述了响应式图片相关的所有知识点

https://mobiledevweekly.com/link/99327/web

使用Vime.js自定义视频播放器（英）

演示了Vime.js的使用，它是一个可自定义的媒体播放器组件，支持Html5，HLS，Dash，YouTube，Vimeo，Dailymotion等。

https://javascriptweekly.com/link/99434/web

tools And codes

auth.js 3.0: 在Node和浏览器上对 GitHub API 授权相关类库

官方类库，不仅如此还支持4中授权策略。

https://nodeweekly.com/link/99661/web

uvu: 一个既快又轻量的测试库（英）

一个支持nodejs和浏览器的测试库，特点是速度快和轻量

https://javascriptweekly.com/link/99438/web

reading-time: 一个预估文章阅读时长的工具（英）

这个库帮助预估阅读一篇文章需要多长时间

https://javascriptweekly.com/link/99440/web

Odiff: 一个高性能图片diff工具（英）

速度最快的图片diff工具，进行像素级比对

https://nodeweekly.com/link/99310/web

ni: 帮你使用正确的包管理器（英）

ni会识别项目中的lockfiles，自动使用对应的包管理器，支持npm、yarn、pnpm

https://nodeweekly.com/link/99316/web

Screenity: 一个屏幕录制和标注工具（英）

一个Chrome插件，可以录制屏幕并且进行涂鸦和标注，功能很强大

https://github.com/alyssaxuu/screenity

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