正则表达式基本语法备忘录。

常用 Sublime Text 3 快捷键。

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素（成为 Grid Container 网格容器）和其子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid 布局。

Flexbox 布局（也叫Flex布局，弹性盒子布局）模块（ W3C 候选推荐，截止到2017年10月）旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

最重要的是，flexbox布局与方向无关，不同于常规布局（基于垂直的块（block）和基于水平的内联（inline））。 虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）。

Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。

Flexbox 布局（国内很多人称为弹性布局）正式的全称为 CSS Flexible Box 布局模块，它是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的元素的对齐，方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区，以最优的方式达到兼容不同屏幕大小。

很多设计人员和开发人员发现使用Flexbox来布局很容易，可以使用更少的代码，更简单的方式实现更复杂的布局，也使整个开发过程更为简单。Flexbox布局算法不同于那些基于垂直或水平的块或内联布局。Flexbox布局应该用于小的应用程序组件之中，而新的CSS 网格布局模块正在兴起，来处理大规模布局。

本指南将以可视化的方式重点介绍 flex 属性是如何影响布局的，不是解释 flex 属性是如何工作。

最近做小程序开发，本来是个私人的小项目，所以一开始都是从 iconfont 上下载png文件再用图片标签引入的，后来想实现图标的点击态变色，发现以前的方案太原始太落后，不好维护，还是得上矢量图形的引入方案。然后就开始尝试照搬Web中引入iconfont图标的解决方案，才发现事情并没有想象的这么简单。

小程序的环境和Web挺有几分相似，但又不是完全一样，所以iconfont推荐的三种方案并不都是可行的，尝试的过程中一路走了不少坑，此文记录探索过程中的思考与感悟。

阿里妈妈出品的 iconfont 是一个矢量图标管理、交流平台，支持矢量图、位图等格式下载，并提供便捷的前端项目植入引用方法，是当前Web开发中主流的icon解决方案。

最近入坑 Overcooked!2，人称分手厨房，和老婆组队刷故事模式，看她操作真急眼：笨手笨脚，全程梦游，打也不是，骂也不行，每一关只能安排一个活，要么洗碗、要么切菜，特点就是站着按一个键不动就行。我一人分饰两角，一顿指挥，疯狂操作，艰难上分。别看她笨，玩的倒挺嗨，煮糊了不去灭火还要鼓掌的。

工作中遇到了这样一个场景：突然发现自己写的一段代码被人改过，想看看到底是谁改的，改了啥。

本文就基于以上这样一个场景预设介绍一系列相关的Git命令。

一开始，我们都习惯于将QQ作为默认截图工具，直到有一天我按了 Ctrl + Alt + A 却没有响应，展开任务栏发现居然没有挂QQ，突然意识到陪伴了我们十几年的QQ已经开始淡出我们的社交圈。同时，我对截图功能有了更复杂的需求，例如为博客中的截图添加四周阴影，所以开始寻找一些独立的截图工具。

本文对比几款比较实用的截图工具，并谈及具体的应用场景。