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