本文翻译自liusy182
Jest框架是facebook旗下一款单元测试框架，我个人十分喜欢它，因为它自动mock这一点十分强大。然而，当它遇到问题的时候，就会经常抛出一些模糊的调用栈信息。我在网上搜索尝试找到如何debug Jest测试的方法，却很难找到有用的信息。总之，它仍然还是一个比较新的测试框架。
Jest使用虚拟DOM来运行测试。这一点不同于Karma和Jasmine（它们是利用浏览器来运行测试的）。我觉得这就会给它带来一个很大的缺点：不能使用浏览器上的调试工具来调试Jest的测试。因此，我们需要借助于Node/V8引擎自带的调试器。Node默认的调试器是完全基于命令行形式的，类似于GDB - 虽然我从来就不
继续阅读 »
webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。它摒弃了webpack（尤其是使用dev server时）在命令行内诸多杂乱的信息结构，为webpack在命令行上构建了一个一目了然的仪表盘(dashboard)，其中包括构建过程和状态、日志以及涉及的模块列表。有了它，你就可以更加优雅的使用webpack来构建你的代码。
另外，它自开源以来短短半个月，就已经在github上收获了6000多枚star，足见人们对于提升开发工具的用户体验有着巨大的需求。
继续阅读 »
相信大多数人都有过关于CSS的痛苦经历，从我加入公司到现在，不到两年的时间里，听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题，为什么很多人觉得CSS很难写，如何才能让其他人更优雅的写CSS。在Code Review的时候，我渐渐的发现了问题所在，其实很多人已经掌握了丰富的CSS知识，但却不知道如何分组属性写成class。最后只好在需要改变样式的元素上随意起个名字做class然后把所有要写的属性丢进这个class里，如果优先级不够，再把前面的选择器都加上。结果就是CSS代码不断堆积，重复和冗余不断增多，维护也变得举步维艰。
继续阅读 »
前一阵子在项目组中讲了一个关于CSS的Session，在讲之前我曾收到了许多意见，大部分是希望能讲讲CSS实用性的技术，比如盒模型，CSS3之类的。干货人人都喜欢，因为看得见摸得着，拿来就有用，但我最后还是决定讲一些”湿货“。因为在Code Diff的时候我发现了许多样式的问题不是由于不会写CSS导致的，而是由于在错误的地方使用了写在错误地方的样式。
其实CSS很简单，没有计算没有流程，只是一直描述，无论什么复杂的效果，你只要Google一下就知道怎么写了，甚至可以直接copy。但CSS又很复杂，一个元素的表现会受到它旁边的兄弟元素，也会受到内部的子元素影响，还会受到父元素影响，在这种多重影响下，一个元素的显示逻辑会变得错综复杂。
继续阅读 »
SPA
近期做了一个自己觉得还算不错的项目，全面SPA。
其实这不是我的第一个SPA项目，我的第一个项目是用React做的简历页面，用了一些很炫的东西，当然了，依旧是没打算向下兼容。
继续阅读 »
Sumary
今天我要说的其实和之前的ajax不太一样。包括以下内容：
FormData
Fetch
CROS
如果你认为你都知道就不用看了。
CROS
最近在写一个项目，完全的前后端分离，所有数据都是来自于Ajax，连权限控制也是前端完成了。
继续阅读 »
Introduction
正如阮一峰所说，前端变化太快了。
前年还在用Grunt, 去年就用了Gulp，而今年都在用Webpack，明年或许都用Brunch了。
我之前一直在用Grunt，后来追Gulp了。后来就实在是不想追了。就老老实实用gulp吧
继续阅读 »
Preamble
这里我把视觉模型谈谈，还没写完，从最重要的有价值的章节（我管它叫做MVS，如果喜欢篮球应该对MVP很了解吧）开始写的，后续还会写，不要因为里面有的只有标题就冲我扔臭鞋。
9.1 可视化格式化模型(Visual Formatting Model)
这章和接下来描述了可视化格式化模型（VFM）：用户代理如何在可视媒体上处理文档树.
在VFM中，每个在文档树中的元素参照盒子模型生成0个或多个盒子。这些盒子的布局由以下几方面掌控：
盒子的尺寸和类型
位置方案（普通流、float和绝对定位）
元素在文档树中的关系；
外部信息（比如viewport的尺寸、图片等实际尺寸等）
这章和接下来定义的属性适用于continu
继续阅读 »
本文翻译自macr.ae
Babel是一个JavaScript转换编译器，它可以将ES6（下一代JavaScript规范，添加了一些新的特性和语法）转换成ES5(可以在浏览器中运行的代码)。这就意味你可以在一些暂时还不支持某些ES6特性的浏览器引擎中，使用ES6的这些特性 - 比如说，class和箭头方法。本文，我将围绕gulp和babel，介绍如何使用它们。
"使用基于Babel的gulp"其实可以有两种理解：一是使用Babel编写ES6语法的gulpfile；二是使用gulp来运行babel，让ES6编写的JavaScript代码转化成浏览器可以理解的JavaScript代码。这两种情况接下来我将一一介绍。
继续阅读 »
Overview
This article in an advanced guide to [hexo] your blog, you need to prepare the following knowledges:
Front-end: You must has certain knowledge of Web tech such as javascript, css, html and node.js template.
Layout: The [hexo] layout is the view of site, it's usually using a template to render.
Variables: The
继续阅读 »