Mickey 是一款基于 react、redux、redux-saga 和 react-router 的轻量前端框架，其大部分思路借鉴了 dva，提供了更方便的 model 设计思路和更简单的 actions 管理方案。
more
为什么
基于 redux 的应用避免不了大量的样板代码，还要维护大量的 action-type 常量字符串，这些都是低效和重复的劳动。dva 基于 elm 概念，通过 reducers, effects 和 subscriptions 来组织 model，在减少样本代码层面前进了一大步：
js
{
namespace: 'xxx', // 命名空间，规定了 store 的结构
subscr
继续阅读 »
防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者即相似又不同。
我们无法直接控制 DOM 事件触发频率，但我们可以在事件绑定和函数执行之间加一个控制层，所以当我们绑定 DOM 事件的时候，加上防抖或节流的函数变得特别有用。
more
看下面滚动事件的例子：
当使用触控板，滚动滚轮，或者拖拽滚动条的时候，一秒就可以触发 30 次事件。经测试，在移动设备上轻轻滚动一下，一秒可以触发 100 次之多。这么高的执行频率是你期待的吗？
早在 2011 年，Twitter 就出现了一个问题：当向下滚动页面的时候，页面会变得很卡顿。John Resig 发表了一篇博客解释这个问题
继续阅读 »
在我们的日常开发中经常会遇到这种情况：手上有好几个项目，每个项目的需求不同，进而不同项目必须依赖不同版的 NodeJS 运行环境。如果没有一个合适的工具，这个问题将非常棘手。
nvm 应运而生，nvm 是 Mac 下的 node 管理工具，有点类似管理 Ruby 的 rvm，如果需要管理 Windows 下的 node，官方推荐使用 nvmw 或 nvm-windows。不过，nvm-windows 并不是 nvm 的简单移植，他们也没有任何关系。但下面介绍的所有命令，都可以在 nvm-windows 中运行。
more
nvm 与 n 的区别
node 版本管理工具还有一个是 TJ大神的 n 命令，n 命令是作为一个 nod
继续阅读 »
当你发现代码中的某些注释完全无用时你会怎么办？
我们经常会犯一个错误：当我们更新代码时，却忘记更新相应的注释。不友好的注释并不会影响代码的执行，但使我们的调试和阅读带来极大困扰，注释描述的是一种逻辑，而代码确是另外一种，结果会浪费我们大量时间来搞懂这段代码的意思，更糟糕的是这样的注释很可能误导我们。
这并不是说注释完全没有必要，优秀的代码有具有相应优秀的注释。我们可以利用某些编程技术来减少我们的注释，使我们的代码更加自解释。这不仅仅使我们的代码更加容易理解，还有助于改善项目的整体设计。
这样的代码通常被称为自解释的代码，下面我将介绍一些编写自解释代码的方法。
more
概览
一些程序猿将注释也作为自解释代码的一部分，注释很
继续阅读 »
CSS 动画已经存在很多年了，使用恰当可以很好地提高网站的用户体验，也正是由于其容易使用，就很可能出现性能低下的动画，从而降低了整个页面的运行效率。回想一下：你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置？如果回答是肯定的，就意味着你触发了性能低下的重排或重绘计算，在某些情况下甚至可能导致页面闪烁。
什么样的情况会导致页面闪烁呢？现代浏览器根据设备的刷新率来刷新页面中的内容，对大多数设备而言，屏幕以 60 次每秒的频率刷新，即 60HZ。如果在屏幕上出现了某些运动，如滚动、过渡或动画，浏览器应该每秒刷新 60 帧，如果某些帧花费的时间太长，进而导致浏览器的刷新频率跟不上设备的刷新频率（跳帧现象），就会出现页面闪烁。所以
继续阅读 »
html
css
.no-fancy{
margin-top:20px;
}
但也并非一定要如此，我们可以通过 CSS 为加载失败的图片定制样式，提供更好的体验。
more
关于 img 标签的两个事实
要了解如何为破裂的图片定制样式，需要先搞清楚连个事实：
我们可以为 元素指定字体样式，这些样式将用于破裂图片的替代文字，不会影响正常显示的图片。
元素实际上是一种替换元素，其外观和尺寸由外部资源定义，所以通常情况下 :before 和 :after 这两个伪元素都不起作用，一旦图片加载失败时这两个伪元素将出现。
正是基于以上两点，我们可以为破裂的图片定制样式，而不会影响正常加载的图片。
实践
使用下面的
继续阅读 »
GitHub 不再使用字体来输出图标了。我们把代码中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但马上你就能体会到 SVG 图标的优点。
切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地以各种像素值显示。
more
为何使用 SVG？
图标字体渲染问题
图标字体从一开始就是一种 Hack。将图标作为 Unicode 符号生成一个自定义字体，并通过打包后的 CSS 来引入图标，这样只需要在任意元素上添加一个 class，图标就可以显示出来，然后我们通过 CSS 就能即时改变图标的尺寸和颜色。
然而，虽然这些图标是矢量图形，但在 1x 显示屏下的渲染效果并不理想
继续阅读 »
上个月，我在这篇文章《为什么要停止使用 Grunt 和 Gulp》中建议大家使用 npm 作为替代方案，npm 的 scripts 配置可以实现这些构建工具的所有功能，而且更简洁、更优雅和较少的模块依赖和维护开销。本文第一稿大概有 6000 字，深入讲解了如何将 npm 作为替代方案，但那篇文章主要在表达我的观点，而不是作为一篇教程。然而，读者的反馈却很强烈，许多读者告诉我 npm 并不能完全实现这些构建工具提供的特性，甚至有的读者直接给我一个 Gruntfile，然后反问我：“怎么用 npm 来实现这样的构建方案”？所以我决定进一步更新本文，将其作为一个新手入门教程，主要分享如何使用 npm 来完成一些常见的构建任务。
npm
继续阅读 »
Github 作为代码分享平台在开发者中非常流行。此平台托管了包括游戏、书籍以至于字体在内的一千两百多万个开源项目（现在更多），这使其成为互联网上最大的代码库。Github 还提供另一个非常有用的功能，这就是 Gist。开发人员常常使用 Gist 记录他们的代码片段，但是 Gist 不仅仅是为极客和码农开发的，每个人都可以用到它。如果您听说过类似 Pastebin 或 Pastie 这样的 Web 应用的话，那您就可以看到它们和 Gist 很像，但是 Gist 比它们要更优雅，因为这些免费应用一般含有广告，而且带有很多其他杂七杂八的功能。
如果您不是极客您也可以按照如下方式使用Gist：
more
匿名张贴
您不需要拥有 Gi
继续阅读 »
当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。
资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。
引用 Patrick Hamann 的解释：
预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我们可以对我们的核心资源使用该技术。
这种做法曾经被称为 prebrowsing，但这并不是一项单一的技术，可以细分为几个不同的技术：DNS-prefe
继续阅读 »