切图及自动生成 sprite
切图是前端的基础技能之一，然而之前我一直用的是原始人的切图方法，后来觉得实在太浪费时间，而且还有误差，因此踩了一遍坑，把这个流程整理出来。
首先将需要切出来的图层全部拖到一个 PSD 文件，并把需要合并的图层Ctrl + E合并。然后，选择文件 - 脚本 - 将图层导出到文件…将所有图层导出为单个 PNG 图片。由于图层的名称最终会成为类名，因此这个时候就应该把图层命名好。
姜葱炒蟹
楼下的菜市场今天在卖青蟹。70 块钱一斤，我买了两只，盛惠 114 元。姜葱炒蟹这个菜我只做过一次，还是用花蟹做的，吃的不够过瘾，今天一看到有青蟹，就买了。
继续阅读 »BEM 介绍
BEM(Block, Element, Modifier) 是一个基于组件的 web 开发方法。它背后的思想是将 UI 拆分成独立的块（blocks）。这可以更容易和快速开发复杂的 UI ，并且无需复制粘贴就可以重用已有的代码。
继续阅读 »Grid 完全指南
CSS Grid 布局（也叫“Grid”），是一个二维的基于网格的布局系统，旨于彻底改变我们设计基于网格的 UI 的方式。CSS 一直被用于排版网页，但是它一直不是很好用。一开始我们用 table，后来是 float，positon 和 inline-block，但这些方法本质上都是 hack，并且忽略了一些重要功能（比如垂直居中）。flexbox 有一定的帮助，但是它是用于简单的一维布局，和不复杂的二维布局（Flexbox 和 Grid 其实可以很好的配合）。Grid 是第一个用来解决过去我们在做网页中遇到的排版问题的 CSS 模块。
继续阅读 »使用 WebP 图片
很多网站都有一些吸引眼球的大尺寸图片，然而这些图片实在是太大了。在缓慢的移动端网速下，甚至可以看到这些图片在你面前展开。你突然感受到那些被拨号上网支配的恐惧。
继续阅读 »
较旧文章
较新文章