原测试链接：http://davidshariff.com/quiz/
这些测试题是David Shariff(不要问我他是谁，因为我也布吉岛)写的，感觉挺有意思，拿来分享一下。注意了，这里是前端测试题，找前端面试题的盆友请绕行，当然如果你绕行可能会错过面试时遇到的测试题。
CSS
1、 CSS是大小写敏感的吗? 不是
css
ul {
MaRGin: 10px;
}
2、 margin-top和margin-bottom会对行内元素有影响吗？不会
3、 padding-top和padding-bottom会影响行内元素的大小吗？不会
4、 如果有个的样式为font-size:10rem，当用户改变浏览器大小
继续阅读 »
没图片太单调，用啥图呢，思考片刻选择了这幅图
数据绑定的本质
实现数据绑定的本质就是Setter+change事件，前者Setter用于在数据模型变化时更新UI，后者change事件，用于在UI变化时更新数据模型，来看个大某：
Demo1
```js
// 数据模型
var data = {
text: 'Hello World'
};
// UI元素
var input = document.getElementById('input'),
label = document.getElementById('lbl');
// Setter
Object.defineProperty(data, 'tex
继续阅读 »
昨天有朋友说让vsc支持react和es6太难配置了，我说直接用webpack吧，vsc仅仅用来敲代码就行了。之所以我这么说，因为我的vsc只是用来敲代码的，常用的git操作，依赖安装都是寄几在终端搞的。于是今天试了一下webpack，也踩了几脚坑，先让我擦干眼泪。
这里是这篇文章涉及到的源代码，如果需要运行可以直接跳到下面的最后一步生成。
如何配置
当你看到最终的是如何实现的时候，我其实是拒绝的，我宁可花长时间写的复杂点，但是很简单，绞尽脑汁也多写不了几行字。
创建目录
cd ~/Desktop
mkdir hello-react
cd hello-react
初始化npm
npm init -y
// 你也可以不
继续阅读 »
CSS自定义属性除了简单的保存和获取CSS值机制外，还有很多有趣的用处。在这篇文章里，我们将会探索自定是属性的最佳实践。
浏览器支持度
从图中可以看出浏览器的支持度还是挺高的。
用class分离css和js
大多数情况下，为了分离关注点和简化两者的交互，你想让js和CSS保持高度分离。最简单的经常被工程师实践的示例是使用定义良好的CSS类，在js端为了触发事件驱动的视觉变化，只需要添加或移除相关的css类，比如：
```css
.button {
position: relative;
transform: scale(1);
}
.button.js-toggled {
transform: scale
继续阅读 »
最近在网上看到有部分人在面试（比如1月面试记）的时候被问到了LazyMan，而且网友也有不同的实现方式。这里我用两种方式实现了lazyman，以供参考，如有更好的方法，欢迎留言。
队列
这种方式，每次都是往queue里添加执行函数，next函数用来决定什么时候调用下一个函数。
``js
var LazyMan = function LazyMan (name) {
if (!(this instanceof LazyMan)) return new LazyMan(name);
this.queue = [() => {
console.log(hello ${name}`);
继续阅读 »
在以前的十多年里，我们通常会把web页面根据视觉分成不同的节（或者叫做块，盒子，区域等）。问题是我们从没有一款工具可以去做这种划分。往往是网页开起来是分块的，但是底层结构确是用编号标题（h1,h2,h3...）和非语义化元素堆积起来的。因为我们可以用来实现视觉上的分块，但是其表现与不同。对于AT用户和数据挖掘软件并不认为div分块是文档内容的分块
现在H5最终有了可用的section元素，但是很多人都不情愿去使用。为什么？因为我们是一个反对改变的群体，而且也因为说明文档与建议存在一些差异。事实上，该建议与section的算法比先前的实现更容易使用。
没错，section元素可以帮助你构建文档结构，这是w3c说明文档里的说到的。接
继续阅读 »
唠叨
还有一周2016就要过去了，时间过得太快，压抑的一年，好像什么都没做，闭目冥思，反思自我得失...我勒个去，文采不好，再唠叨真成大妈了。
这一年听到最多的声音就是房价涨了，房价涨了，房价上蹿上蹿，一路飙升，疯了，全国都疯了，我也疯了，房租涨了，工资没涨，不好意思，我又禁不住
啰嗦了两句，还是聊技术吧，只有技术最可靠。
最近看了几篇关于table-cell的用法，觉得旭神总结的还不错，于是乎我就抄袭，不对，是模仿，也不合适，
其实是微微扩展了以下，增加几点需要注意的地方。
支持度
从下图可以看出，所有浏览器都支持的很好嘛。
特性(Peculiarities)
table-cell的特征就是跟table的td表现是
继续阅读 »
前言
每次写文章都想在前面提提~~事实~~时事，今天想说的是：*******，如果你看到的是星号，那很抱歉，“福利”被和谐了，你可以更换浏览器试试。本文对setTimeout、setImmediate、process.nextTick的区别做了简单阐述，如有疑问，请留言。
api介绍
setTimeout(callback, delay)：经过delay时间后只执行一次callback，但是并不能保证时间点的精确性。delay的意思是，告诉callback可以被执行了，如果callback所在队列前面还有任务没执行，那它也得稍等等。
**setImmediate(callback)**：执行callback的时机是在IO
继续阅读 »
随便聊聊
最近三星在研究炸弹，不仅手机能爆炸，洗衣机也会爆炸，尼玛，产品设计师难不成是研究炸弹的；NBA开赛了，可惜湖人没了科比的身影，在我还没成为球迷之前他已经不在了，很湿伤心，还是听听音乐吧。说到听歌，给大家推荐一首神曲《我的滑板鞋》，看到这歌名，我想你们内心是崩溃的，听到原唱你们肯定骂了不止一百遍逗比碧池，心细的同学可能注意到我提到了原唱，没错原唱是不堪入耳，但是经过华晨宇的改编已经脱胎换骨了，“一步两步，一步两步”，steps, step-start, step-end。
示例
CSS:
```css
.cube {
height: 150px;
width: 200px;
}
继续阅读 »
是时候总结一下vim的使用方法了，一方面防止自己忘记不常用的指令，另一方面给大家提供一个参考。
等有时间再把文中的链接内容展开介绍。
先来看看我的vim
vim键盘图
vim的安装
exvim中文这里面包含了exvim的安装与配置，以及插件的安装。
vim指令入门
Vim入门教程这篇文件是我强烈推荐的，入门必备，告诉你如何使用指令，
如何人类的语言来使用指令。
高频组合指令
单指令是必须记住的，这里提几个组合指令。
替换: :s/a/b将该行的第一个a替换成b，:s/a/b/g替换该行的所有a，:n,ms/a/b替换n行到m行，%s/a/b替换所有行的第一个a，%s/a/b/g替换所有a
选中: v20G，
继续阅读 »