做前端的应该都听过Node.js，偏开发背景的童鞋应该都玩过。
对于一些没有计算机背景的，工作内容以静态页面呈现为主的前端，可能并未把玩过Node.js，且很有可能对Node.js都没有一个比较立体的认识——知道这玩意可以跑服务，构建很多前端工具，看上去很厉害的样子，但是，可能就仅限于此了。
实际上，就算你JS一般般，你也能搞出一些有意思，可以提高自己生产效果的小工具小脚本什么的，本文就将通过示例演示，玩Node.js，只要懂中文，会毛毛雨程度的JS就够了……
基于用户行为的图片等资源预加载
2016年06月4日 by 阅读 60282 次, 今日 1 次懒加载和本文要提到的预加载实际是不同的概念。
典型的懒加载，例如本博文章的图片，当用户滚动图片进入窗体的时候，才去加载；或者用户点击选项卡，原本隐藏的图片此时再去加载，这个也称之为懒加载。
而预加载则是，用户还没有行为发生，资源已经加载完毕，从这一定义来讲，我们传统图片啪啪啪全部加载完毕，本质上也是预加载，好处就在于，体验好啊，没有泛白或者菊花的出现。不足也很明显，那就是资源可能白白加载了。
那有什么办法可以把懒加载的省资源省流量和预加载良好体验结合在一起呢？
基于screen.width的伪响应式开发
2016年06月3日 by 阅读 41276 次传统的响应式实现往往基于基于media query查询，这是基于CSS的布局控制，因此，当我们缩小浏览器窗口，可以即时看到布局变化。但是，这种实现在我看来，除了让总监大人可以方便体验窄屏效果外，就然并卵了！ 而反倒是有可能增加了额外的资源消耗和开发成本。
那有没有什么办法既能满足响应式的需求，同时我们开发这边不要那么烦心呢？
试试使用screen.width来做伪响应式开发……
canvas图形绘制之星空、噪点与烟雾效果
2016年06月2日 by 阅读 75933 次, 今日 1 次本文的3个效果都是源自我最近做的几个真实的项目，是canvas领域基本入门的一些效果。代码我都专门重新梳理了下，必要注释也都加上去了，方便大家的学习……
理解CSS3 max/min-content及fit-content等width值
2016年05月20日 by 阅读 153825 次, 今日 2 次在CSS3的世界里，width属性又多了几个关键字成员，fill-available, max-content, min-content, 以及fit-content。
本文就将分析与介绍这几个关键字，顺便帮忙理一下CSS世界中的尺寸概念，相信本文的内容不仅对于CSS3的学习，包括对CSS2.1整个尺寸的认知都会有一定的帮助。
CSS3 filter:drop-shadow滤镜与box-shadow区别应用
2016年05月18日 by 阅读 123504 次, 今日 1 次要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？
本文就将探讨此问题，其实主要目的还是介绍下相当了不得的drop-shadow滤镜。
改变CSS世界纵横规则的writing-mode属性
2016年04月27日 by 阅读 144127 次, 今日 1 次
writing-mode这个CSS属性，我们是不是很少见到，很少用到！我们往往称不常见的东西为“生僻”，就像是不常见的文字我们叫“生僻字”，因此不常见的CSS属性，我们可以叫做“生僻属性”，writing-mode给我们的感觉就是一个“生僻属性”，很弱，可有可无。
但是，实际上，我们都错了，大错特错，writing-mode很弱？卧槽，别开玩笑了，writing-mode可以说是CSS世界里面最逆天的CSS属性了，直接颠覆CSS世界的众多规则……
本月为4月压轴作品，大量demo，大量脑洞大开的创意处理，希望可以对您的学习有所帮助。
了解HTML/HTML5中的download属性
2016年04月6日 by 阅读 191470 次如果我们想实现点击下载按钮下载一张图片，你会如何实现？
我们可能会想到一个最简单的方法，就是直接按钮a标签链接一张图片。
但是，想法虽好，实际效果却不是我们想要的，因为浏览器可以直接浏览图片，因此，我们点击“下载”链接，并是不下载图片，而是在新窗口直接浏览图片……
简单了解CSS3的all属性
2016年03月24日 by 阅读 46396 次all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction这两个CSS属性。
为什么会有这个CSS属性呢？
我们可能知道，有些CSS属性值基本上所有CSS属性都有，比方说继承inherit!
我们CSS reset输入框的时候，是不是有类似这样的代码…
以20像素为基准的CSS网页布局实践分享
2016年03月22日 by 阅读 186377 次, 今日 5 次以20像素为基准进行CSS网页布局，说不定会让一些细节和潜能大放光彩，当然这需要体系的配合，还需要一些完整的解决方案在里面，本文就将分享这一实践心得，保证是其他地方都没有的。外甥点灯笼——照旧(舅)，有demo有截图有必要的源代码展示，希望本文的内容能够对您的学习有所帮助！
我的应用
我的应用