在很多语言当中都有变量，而这也是基础知识。在JavaScript中也有变量，而最近也在学习有关于这方面的知识。今天就来总结一下JavaScript中有关于变量的一些基础知识。

CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。

洗牌算法是我们常见的随机问题，在玩游戏、随机排序时经常会碰到。它可以抽象成这样：得到一个M以内的所有自然数的随机顺序数组。在百度搜“洗牌算法”，第一个结果是《百度文库-洗牌算法》。扫了一下里面的内容，很多内容都容易误导别人走上歧途，包括最后用链表代替数组，也只是一个有限的优化（链表也引入了读取效率的损失）。

有时候我们需要向别人展示两幅图像的视觉差异，通常一幅是修改前的图像、一幅是修改后的。例如，把两幅图像放在一起，展示照片处理的效果。比如一些美容师的网站要展示某些美容护理的效果，某个地理区域发生灾难的结果。最常见的方案是将两张图片并排放置。但是，这样的话人的眼睛就只能注意到非常突出的差异、而察觉不到那些小的变化。如果对比不是那么重要或者两图之间的差异非常大的话，这种方法是没有问题的，但是对于其它情况呢，我们需要一些更好的方法。

滚动条主要是用来告诉用户当前显示的并不是所有的内容，滚动的话可以查看更多。但是，它们往往显示得很笨拙而且分散了用户的注意力，所以现代操作系统中已经开始对它们进行简化，通常是把它们完全隐藏起来，等到用户和可滚动的元素元素有实际交互的时候再出现。

在上一节的“通过调节亮度去强调”中，我们看到了通过调节亮度来让Web APP上的一些部分de-emphasize的方法，使用了一个半透明的黑色覆盖层。但是，当页面上有很多东西的时候，我们需要调暗很多，才可以为其上的文本提供足够的对比度，或是把用户的注意力转移到突出显示的盒子上或其它元素上边。还有一种更优雅的方式，如下图所示，是除了调光之外（或者直接不要调光）还把其它的所有东西都模糊。这看起来更真实，因为它模仿了我们看对象的视觉创建了一个深度，也就是当我们专心看物理上离我们近的东西时的视线。

很多时候，我们需要通过在元素背后添加一个半透明的深色叠加来让内容变暗，强调并提醒用户关注某个UI元素。例如，lightboxes和“quick tours”接口经常需要这种效果。

我把CSS的黑魔法和把CSS推动到极限当作我的至爱。许多人没有意识到这是有多么的强大（特别是结合Sass）的预处理技术。这篇文章结合这两种至爱来做一些有意思的东西。当然它可能会或可能不会被你的下一个客户问，这样做有价值吗？但这样尝试才能真正的理解一种语言(当然，很多人说CSS不是一种语言)。但你也能使用纯CSS技术做一些简单的小游戏。

CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。如我们所知，CSS 总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。虽然Flexbox可以起到一定的补救作用，但是它只可以实现简单的一维布局，并不适用于复杂的二维布局(实际上 Flexbox 和 Grid 可以一起结合使用起到最佳效果)。网格是 CSS 第一次专门创建的模块，用来解决我们之前在制作网站时使用hacks处理布局问题。

JavaScript中对象的属性分为两种：数据属性和访问器属性。然后根据具体的上下文环境的不同，又可以将属性分为：原型属性和实例属性。原型属性是定义在对象的原型(prototype)中的属性，而实例属性一方面来自构造的函数中，然后就是构造函数实例化后添加的新属性。