苦B的前端每次在制作和修改页面时，都有一个特定的三部曲：coding-save-F5。很多时候都希望自己一改东西，页面就能立刻显示，而现在LiveReload就能做到这点。

LiveReload会监控你指定的目录中文件，如果有文件被更改，它就自动触发浏览器刷新页面。但如果你修改的是CSS或者图片，页面内容会即时更新，无需重新加载。这样我们不用每次修改文件后，都要去按下F5刷新页面，而是直接就能显示，有点类似所见即所得的编辑模式，特别适合使用双屏coding的人。另外同时结合Sublime text和Emmet LiveStyle，能提高不少开发效率。

LiveReload安装前的准备工作：

安装Node.js和Grunt，如果第一次接触，可以参考：Windows下安装Grunt的指南和相关说明，根据步骤操作，创建完package.json 和 Gruntfile.js这2个文件就行。

接下来，开始配置LiveReload所需要的环境和相关插件。这里所提供的有两种安装方案，根据自己需求进行选择。 [ 查看全文... ]

Grunt基于Node.js，其中 npm 是 Node.js 的包管理器，而Grunt和Grunt插件就通过 npm 安装并管理。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。

安装Node.js：
去Node.js官网，点击INSTALL下载并安装，现在的Node.js会自动安装npm。

安装完成之后，打开命令行，进行后续的操作（开始->输入CMD 或 开始->所有程序 ->命令提示符）。

进入Node.js的安装目录（默认路径为"C:\Program Files\nodejs"）：
cd \pro*\nod*
[ 查看全文... ]

新浪微博：
http://service.weibo.com/share/share.php?url=

count=表示是否显示当前页面被分享数量(1显示)(可选，允许为空)
&url=将页面地址转成短域名，并显示在内容文字后面。(可选，允许为空)
&appkey=用于发布微博的来源显示，为空则分享的内容来源会显示来自互联网。(可选，允许为空)
&title=分享时所示的文字内容，为空则自动抓取分享页面的title值(可选，允许为空)
&pic=自定义图片地址，作为微博配图(可选，允许为空)
&ralateUid=转发时会@相关的微博账号(可选，允许为空)
&language=语言设置(zh_cn|zh_tw)(可选)
[ 查看全文... ]

想必听到Emmet(原名：Zen coding)都不太会陌生，它是个能够帮助开发人员高效和快速编写HTML和CSS的插件。

而这次的Emmet LiveStyle，则是个提供“样式实时预览”插件，最大好处就是方便了我们对页面的调试。

不过Emmet LiveStyle目前处于公测阶段，暂时只支持Chrome和Safari浏览器与Sublime Text 2/3的双向修改。并且在官网中提到，它并免费使用，而是有偿使的，即正式版出来后会收费（但相信这个问题难不倒"天朝"...你懂的...）

Emmet LiveStyle的特点：
1. 即时更新（不会重新加载页面，样式修改以后无需保存也能预览)；；
2. 多个页面同时预览（例：同时打开多个页面，并且关联到相同的CSS，此时修改该CSS，这些页面都能即时显示修改内容）；
3. 双向修改（在Chrome开发者工具和Sublime Text中，只要有一处修改，两个工具的样式都会更改。）
4. 便捷的安装和使用。 [ 查看全文... ]

在一次聊天中讨论到如何利用CSS来制作一个按钮，不但能自适应宽高，并且还要在不实用图片的情况下，让按钮有类似“外描边”、“内描边”和圆角的效果，并且兼容IE6、IE7。所以今天特地花了点时间来做这个。

当完成以后，发现单纯的按钮有点单调，就想加点ICON来美化一下。可既然按钮都是用CSS来完成，那ICON还用图片来显示，是否有些背道而驰，所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下，也加入一些CSS3属性，起到渐进增强的目的，让“高级用户”能够得到更好的呈现效果。

这样做的好处在于按钮和图标颜色都能通过CSS来调整，维护起来比较方便。还有就是CSS的渲染速度比较快，同时还减少了HTTP请求量。

不过，并不是说用CSS必定比图片好，关键还是要根据实际环境和需求，合理使用才是关键。

本例兼容：IE6-10、Chrome、Safari、Opera。 [ 查看全文... ]

以前做过个项目，需求是做一个图片集（图片相册），其中有个小功能是底部带拖动按钮，拖动按钮相册列表一起滚动。当初单独做个拖动按钮没什么问题，问题不知道怎么让上面的内容随着这滚动条一起等比例的滚动，后来这块是由我同事帮忙写的。所以空下来便研究一下，把思路理清自己写个试试，结果比想象中的要简单很多。

当前版本：v1.2
兼容：IE6+、Firefox、Chrome、Safair [ 查看全文... ]