不管是在制图软件中还是Web页面的DOM元素，都有层的概念。在制图软件中，大家比较熟悉，能非常的清晰的看出图层的概念。而在Web页面中，特别是我们熟悉的HTML的DOM中，其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的z-index属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。

自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因，并没有对SVG进行系统化的学习，在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识，并尝试在项目中使用SVG，有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识，希望在几个月后，这方面的技术有所突破。

在Vue中为了更好的操作DOM元素，其内置了一些指令，比如v-model、v-if、v-show、v-text、v-html、v-for和v-bind等。除此之外，Vue也允许注册自定义指令。这些自定义指令可以说我们对普通DOM元素进行底层操作。比如@SARAH DRASNER写的一篇有关于Vue自定义指令的文章，简单易懂。今天自己也仔细撸了一下Vue中怎么实现自定义的指令。

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中，我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局，但这些在实际的布局中使用场景并不常见。最近@vmcreative的Hexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。

在你初次接触一个新的JavaScript框架时，会像第一次进糖果店的孩子一样。给啥拿啥，而更直接点，有些东西可以让你更容易成为一个开发者。不可避免的是，我们在用框架时都会有一个同感，就是总有些场景是框架不能帮我们完成的。Vue框架的漂亮之处在于它的功能非常强大，虽然这个框架的指令不够面面俱到，但也能在开发上助你一臂之力了，因为创建一个自定义指令是很轻松的。

Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径，图片和（或）文本组成，并能够在不失真的情况下任意变换尺寸。本书主要介绍了内联SVG，它是指在HTML中编写的嵌入式代码，以便在浏览器中生成这些图形。以这种方式使用SVG有许多优点，包括为了交互目的访问所有图形的各个部分，支持访问 SVG 文档构成的 DOM 节点树，查询、修改 DOM 节点的属性，提升用户可访问性。先介绍基本组织和简单形状，再继续描述SVG坐标系或画布，然后用它绘制图形的内部和/或边框，变换，以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能，有助于你学习SVG。 它面向设计师和开发人员，希望以最可行的方式将SVG添加到他们的工作流程中。

从小笔画细节到开始使用手工制作的模式，本指南旨在成为一个围绕“go-to”编写SVG的参考。

我们处于一个用像素来作为度量衡的互联网世界中。 对于一名在互联网世界中工作的设计师和开发者来说, 像素对于我们来说亦敌亦友。 我们希望自己创作出的Web中每一张图片、每一像素都能棱角分明（如网站中的logo，icon以及任何修饰性的图片），清晰的在任何设备上展现给用户的同时， 也能尽可能的保证图片的体积来优化性能。而SVG就是解决上面问题非常棒的一个方案。SVG 意为可缩放矢量图形（Scalable Vector Graphics）与屏幕分辨率无关, 体积上能使用Gzip的方式压缩, 而且修改编辑都很方便。本文是SVG在Web开发中一些常见的应用场景、技巧以及使用方法的一个简单的入门指南。

无限滚动（Infinite Scroll）是一种很常见的用户体验模式，它建议用户在Web页面或应用程序加载显示很少的内容。当用户开始向下滚动页面时，会加载更多内容。这些内容是通过向负责提供内容的服务器发出请求来异步加载的。在这篇文章中，我将讨论JavaScript的异步操作以及Vue如何实现无限滚动效果。在这个过程中，我们将看到一个使用无限增发动的简单页面。

CSS3的动画相关的基础的属性基本都涉猎过了，个人认为，其中最复杂的是d:path()路径变形动画，超过3D，而位移、轨迹、旋转、缩放、斜切什么的，相对简单一些，但作为非动画设计师而言，灵活的掌握这些基本的动画加以无穷无尽的变换，就已经能做出很多华丽丽的效果了，这篇呢，源于做一个练习时，AI的连续旋转复制功能，试着做了几个动效，简单、省时、高效，最主要的是用到CSS3的transform:rotate()旋转属性，辅以位移和缩放。

这篇文章介绍了Firefox DevTools的一些鲜为人知的特性，这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS和网格这两个词，那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素，而CSS Grid则是一种新的布局模式，它为开发者提供了控制这些盒子及其内容大小和位置的能力。该模块引入了一系列属性，允许我们创建网格结构，并使用CSS控制网格项的位置和大小。