前端技术观察第 16 期

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

• Highlights
  • 优秀的工具、库
  • 好的教程、深度解读已有技术的文章
  • 业界最新的技术、热点文章
  • 业界对（新）技术的深度地、优秀地实践
  • Tutorial
  • Tools And Codes

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

• 更及时的了解到业界最新的技术
  • 受益于高质量的教程、文章
  • 了解业界更优秀的代码、工具
  • 更多地、氛围更浓厚地讨论、研究、落地技术

highlights

如何通过performance.measureMemory API监控页面内存 （英）

How to Monitor Your Web Page's Total Memory Usage with performance.measureMemory()

学习如何在生产环境中检测性能退化

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

给前端开发者的10个安全建议（英）

Ten Security Tips for Frontend Developers

针对CSP, XSS等前端漏洞的检测和修复方法

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

Bootstrap 5将放弃对IE的支持（英）

Reminder: Bootstrap 5 Is Dropping Support for Internet Explorer

一个时代终将过去

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

midori: 动图背景库（英）

midori: A Library for Animated Image Backgrounds

基于three.js, 提供了非常丰富的效果选项

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

用JS写一个"模拟器"（英）

Writing an 'Emulator' in JavaScript (and Interfacing with Multiple UIs)

实现了一个Chip-8语言解释器，对理解计算机体系结构很有帮助

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

React性能优化（英）

Profiling React.js Performance

深入了解React Profiler API和新的Interaction Tracing API

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

CodePen支持Flutter拉（英）

Announcing CodePen Support for Flutter

Flutter代码预览/分享更便捷

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

为什么一些HTML元素废弃了（英）

Why Do Some HTML Elements Become Deprecated?

深入讨论一些HTML元素废弃的影响原因

https://css-tricks.com/why-do-some-html-elements-become-deprecated/

Stack Overflow如何打造Dark Mode（英）

How Stack Overflow Built Its New 'Dark Mode'

对于大型网站，Dark Mode不只是切换一些CSS颜色，看看Stack Overflow在这个过程中做了什么

https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/

扩展CSS的边界（英）

Extending the Limits of CSS

CSS历史回顾和未来展望

https://www.welcometothejungle.com/en/articles/btc-css-limits

用OffscreenCanvas渲染图表（英）

Rendering Charts with OffscreenCanvas

通过Web Worker高性能渲染图表

https://blog.scottlogic.com/2020/03/19/offscreen-canvas.html

如何让JS和CSS/SASS共享数据（英）

Getting JavaScript to Talk to CSS and Sass

利用CSS varibles和getComputedStyle，实现JS和CSS之间的通信.

https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/

Node发布周期的改变(尽管只有一点)（英）

Node's Release Schedule is Changing (Though Only A Little)

v10支持延长，v12延期发布

https://nodejs.org/en/blog/announcements/adjusted-release-schedule-covid/

tutorial

Node EventLoop（英）

Node EventLoop

官方文档对事件循环的介绍

https://github.com/nodejs/node/blob/v6.x/doc/topics/event-loop-timers-and-nexttick.md

在k8s中开发Node（英）

Node.js in a Kubernetes world

关于K8S, 7个需要知道的点

https://developer.ibm.com/articles/nodejs-kubernetes-basics/

TDD开发时插件（英）

Time Travel Debugger

实时运行测试，并在内部代码旁显示各种结果

https://wallabyjs.com/docs/intro/time-travel-debugger.html?utm_source=cooperpress&utm_campaign=javascript&utm_content=javascript

你可能不需要写switch（英）

You might not need switch in JavaScript

借鉴py的dict，字典代替switch

https://www.valentinog.com/blog/switch/

tools And codes

Highlightjs

Syntax highlighting for the Web

成熟的Web语法高亮库

https://highlightjs.org/

developit/web-worker

Native cross-platform Web Workers. Works in published npm modules.

兼容browser、node的webworker

https://github.com/developit/web-worker

lazynpm

A simple terminal UI for npm commands

项目npm依赖和scripts等的可视化管理，cli工具

https://github.com/jesseduffield/lazynpm

Winddown

Write code and stay healthy

休息时间管理。定时灰掉编辑器字体，键盘无操作一段时间后恢复

https://github.com/schneefux/vscode-winddown

HotKey

Hotkey binding

键盘快捷键绑定

https://github.com/github/hotkey