我是个很懒的人，开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 CSS3 来实现，timing-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画，说实话以前我没怎么考虑过。每次当动效设计师提出，能不能这样那样的时候，我会理所当然地予以否决。所以有很长一段时间，我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。
这篇文章主要跟着@David East的《HOW TO BUILD A SIMPLE CAMERA COMPONENT》 学习。学习如何使用MediaDevices API获取摄像头的访问权限，然后将相关的流通过video元素来播放。并且将视频流通过canvas元素转换为blob或base64格式的图片。并且依赖于自定义元素将这些功能封装成一个简单的摄像机组件。感兴趣的同学，请继续往下阅读。
首先要声明的是，我们在这篇文章中要了解的不是CSS混合模式如何使用，而是来一起探索CSS混合模式的一些高级运用以及它能做些什么，又会带来什么样的效果。操作过像Photoshop这样的图像处理软件的同学，对于图层混合模式一定不会感到陌生，但对于CSS中的混合模式，估计还是有不少的同学会感到陌生或者好奇。在这篇文章并不会介绍CSS的混合模式相关的属性怎么使用，而会探讨CSS的混合模式的一些高级运用，以及对应的效果。
如果考虑周全，滚动捕捉可以是一个有用的设计工具。CSS Scroll Snap Points允许你连接到浏览器的本机滚动交互，因此你的界面感觉无缝且平滑。随着JavaScript API的出现，这些功能将变得更加强大。CSS Scroll Snap（CSS 滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。
说到度数，你可能已经从生活中了解了很多关于他们相关的知识。在学校里学习几何课，做基本的木工活，进入外层空间或在图像编辑器中旋转一个元素等，都会有角度相关的身影。在现实世界中，度数几乎是测量角度的单位。它在Web中同样是一个受欢迎的角色，也适用于我们将遇到的各种场景。幸运的是，在现实世界中的度数和虚拟世界中的度数有很多相似之处，所以在这篇文章中将来学习一些有关于度数相关的知识，然后深入了解一些细节。
在上一节中，学习和了解了DOM事件模型，了解到JavaScript中每种事件模型都有其自己独具的特性。不同的事件模型中，绑定DOM事件的姿势也将略有差异，在这一节中，我们一起来学习JavaScript中DOM事件是如何绑定的。在JavaScript中，给DOM元素绑定事件主要分为两大类：HTML中直接绑定和JavaScript中绑定。
视窗单位一直都存在争议，部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法，这样就让本来简单的事情变得更加复杂化。一个典型的示例是：vw的计算是否要包含浏览器的滚动条？那么网站的导航或页面控件呢？这些应该算在计算中吗？还有一些设备本身的物理属性（比如iPhone X的刘海）是不容忽视的。
@evilmartians的《滚动的特性》一文介绍了目前有关于滚动相关的特性。今天我想花点时间重新整理一下，时至今日，CSS中为浏览器滚动提供的相关新特性究竟能给用户带来哪些新的体验。
最近在纠结程序语言和设计语言中的一些概念，整到层叠上下文和图层相关的事情，然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。如果想要理解清楚CSS中的层叠相关的知识点，我们就很有必要先了解一些重要的概念：文档流（Normal Flow）、格式化上下文（Formatting Context）、层叠上下文（Stacking Context）、层叠水平（Stacking Level） 和 层叠顺序（Stacking Order）。