假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。

当您开始学习JavaScript时，首先需要学习的是数据类型。只要我们讨论Number、String、Boolean和Object时，一旦涉及到null和undefined出现时，作为初学者要理解清楚他们就可能会有点混乱。

去年，我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年，我在另一个工作室工作，我学到了一些更令人兴奋的事情，那就是我们都喜欢布局规范。当然，我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。

Web渲染是Web开发中最常用的实战之一。动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息。在我们使用的每个Web应用程序中，都可以看到很多内容列表被用于Web应用程序当中。在这篇文章中，我们将收集有关于Vue中的v-for指令生生动态列表的理解，并通过一些示例来说明为什么在这样做的时候应该使用key属性。由于我们将在开始编写代码时全面地解释一些事情，本文假设你对Vue或其他JavaScript框架有一定的了解。

大多数编程语言都支持变量。但遗憾的是，CSS从一开始就缺乏对原生变量的支持。如果写CSS的话，那是没有变量的，除非你使用像Sass这样的CSS处理器。变量是Sass这样处理器的一个非常有用的特性之一。这也是你尝试使用的理由之一。Web技术发展是非常快速的。我很高兴地告诉你，CSS现在终于支持原生的变量了。虽然CSS处理器还支持更多的特性，但是CSS添加原生的变量是很好的。这些举措使用Web更接近未来的技术。在这篇文章接下来的内容中，我将向你展示如何在CSS使用变量，以及如何使用它们让你的工作变得更轻松。

有时候我们需要从文件中读取数据。在以前，你需要将其发送到服务器，然后返回所需的数据。问题是，现在我们还可以使用FileReader API直接访问浏览器中的文件。如果我们只是想读取一个文本文件，以便在UI级别上做一些无关紧要的事情，那么就不需要将文件发送到服务器。下面的示例将实现从一个文件中读取相关的数据填充到一个textarea中。

不知道您是否以前有过在第三方组件库中提取过组件的经历，在提取组件的过程中发现需要做一些小的调整，而且也避不开提取整个包。比如像自定义的下拉框，日历或自完匹配等组件，而这些组件可能非常的复杂，需要处理许多意想不到的边界情况。

2017年3月，CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴，大家可以使用它来解决实际问题。CSS Grid是一种不同的布局方式，在大家开始使用规范的时候，有很多常见的问题。这篇文章的目的是回答其中的一些问题，并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。

在一些特别生的网站上，用户需要一个可视化的是示，以表明网站资源仍然在加载。从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果。如果我们使用的是开箱即用的解决方案，它为我们提供了当前的进度，比如Jam3所提供的预加载程序包，那么构建一个加载指示器就变得更容易了。为此，我们将制作一个带有动画的环形（圆形）的进度条，然后将其包装成一个组件，再提供给用户使用。

我一直在做一个网站，这个网站主要用来向用户展示大型图片。我没有创建一个典型的Lightbox效果，而是尝试让一些交互效果更有意思。最后的效果是我在一个容器上添加了一个效果，当用户把鼠标悬浮在图片（用户鼠标移动图片上）时，它会倾斜（鼠标移动到不同的角度时，向不同的方向倾斜）。