前端技术观察第 16 期
- 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
本系列会持续更新，欢迎大家持续关注。IES前端团队负责字节跳动互娱社区全线产品前端开发工作，包括但不限于抖音、火山、轻颜、faceu等。如果你想加入我们的团队，欢迎投递简历到 lisqpersonal@163.com 标题：【求职】岗位-姓名-电话
About The Author
