前端技术观察第 16 期
source link: http://mp.weixin.qq.com/s?__biz=Mzg2NDAzMjE5NQ%3D%3D&%3Bmid=2247485605&%3Bidx=1&%3Bsn=dd3183c3929efcb935258581d9a00b7b
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
《前端技术观察》是由字节跳动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
本系列会持续更新,欢迎大家持续关注。IES前端团队负责字节跳动互娱社区全线产品前端开发工作,包括但不限于抖音、火山、轻颜、faceu等。如果你想加入我们的团队,欢迎投递简历到 [email protected] 标题:【求职】岗位-姓名-电话
轻点在看:heart:,支持作者:point_down:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK