《熊猫周刊》-2022/03/25

《熊猫周刊》是一个专注于前端领域的技术周刊，我们为您收集了最新的前端技术文章和行业资讯内容，欢迎您的阅读。
如果您有好的内容，我们诚挚的欢迎您的投稿。
如果觉得内容对您有价值，麻烦点个赞和关注鼓励下我们哦！感谢您的支持~

【技术研究】

一文彻底搞懂前端沙箱

沙箱，也称为沙盒/沙盘，是一种安全机制，为运行中的程序提供隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。

本文讲解了前端和 Node 领域的沙箱实现原理。

原文地址

深入浅出前端监控

本文讲解了前端监控中的各项指标和数据采集上报的方式，可以作为性能监控入门学习。

原文地址

基于 TypeScript 理解程序设计的 SOLID 原则

SOLID 其实是以下五个单词的缩写：

• Single Responsibility Principle：单一职责原则
• Open Closed Principle：开闭原则
• Liskov Substitution Principle：里氏替换原则
• Interface Segregation Principle：接口隔离原则
• Dependency Inversion Principle：依赖倒置原则

TypeScript 的出现让我们可以用面向对象的思想编写出更简洁的 JavaScript 代码，在本文章，我们将通过 TypeScript 编写一些示例来分别解释下这些原则。

原文地址

CSS 国际化

“国际化是一种产品、应用程序或文档的设计和开发，可以方便地为不同文化、地区或语言的目标受众进行本地化。”

本文讲解了 CSS 中应该如何设置样式和布局来描述网页的显示。在使用 CSS 的多语言页面上，我们可以使用几种方法将不同的样式应用于不同的语言。

译文地址

原文地址

开启这些隐藏功能，让你的Chrome更强大

本文讲解了 chrome 中隐藏的一些实验性功能，一起来看看吧。

原文地址

A Complete Guide to Flexbox

这是一个关于flexbox的指南，由浅入深的讲解了flexbox相关的属性以及这些属性的历史、浏览器支持等。即使你对flexbox相当熟悉，也建议保存这篇文章，写样式的时候作为工具书来查阅也是十分不错的。

原文地址

Flex Cheatsheet

本文是挑选了flex-direction、flex-wrap、flex-flow等flexbox布局的重点属性进行介绍。

和上一篇文章不同的地方在于，本文有大量可交互的demo，读者可以通过实时改变属性的value来观看其对布局的影响，十分生动形象。建议和上一篇文章配合使用。

原文地址

Centering in CSS: A Complete Guide

居中是样式布局中最常见的需求之一，本文针对inline元素，block元素在水平、竖直以及水平竖直同时居中给出了不同的解决方案，建议作为工具书保存。

原文地址：https://css-tricks.com/centering-css-complete-guide/

parseInt 的小问题

为什么 parseInt (0.0000005) === 5，如果你不知道原因的话来看看这篇文章吧。

原文地址：https://javascript.plainenglish.io/why-is-javascripts-parseint-0-0000005-5-eb9e2432f1b0?gi=3e6b3d4188e7

【音视频扫盲】可分级视频编码

SVC（Scalable Video Coding，中文叫“可伸缩视频编码”或“可分级视频编码”）是传统视频编码的延伸，它具有可伸缩和可分层的特点，可以在帧率、分辨率、质量上进行划分，一次编码可以输出多层码流，分为基本层和增强层，适用不同的终端和网络状况。

原文地址

【行业资讯】

阿里低代码引擎开源

LowCodeEngine 低代码引擎由阿里巴巴前端委员会、钉钉宜搭联合出品。

使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台，官网地址：https://lowcode-engine.cn/

原文地址

Shader Park

一个用于简化创建渲染图形的 JavaScript 开源库，拥有完善的社区和文档。

原文地址：https://shaderpark.com/

Apple 使用 React？

Apple 团队似乎使用了 React 来渲染其 macOS 系统偏好设置中的一些“原生”视图！

原文地址：https://blog.jim-nielsen.com/2022/inspecting-web-views-in-macos/

---