摘要：
上周在公司内部分享了利用Grunt打造前端开发自动化工作流，这周整理了一篇文章出来，用于记录。###什么是Grunt Grunt是基于NodeJs的一个... 阅读全文
摘要：
平时经常给这样的行内元素设置浮动float:left or float:right，浮动了之后还可以给它们设置高度啊宽度啊。这点大家都知道，但是为什么呢？为什么行内元素在浮动之后就可以设置高宽了呢。 引用下曹刘阳写的《编写高质量代码-Web前端开发修炼之道》一书中看到的一句话：position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position：absolute 、 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。这样似乎可以解 阅读全文
摘要：
我们在写页面时，要不断的保存并刷新浏览器才能看到最新的结果，比较麻烦。现在介绍一款只需按下保存按钮而不用去需要刷新浏览器就可以看到实时页面的工具-liveReload，尤其适合拥有双显示器的高富帅开发童鞋。官方网站：livereload.com首先我们需要安装liveReload的工作环境，下载地址：windows运行环境：Try LiveReload 0.8.4 Alpha（Linux或者Ma... 阅读全文
摘要：
什么是Chrome桌面通知chrome桌面通知即chromenotification，它可以在用户的windows桌面弹出一个消息框，如图：可以直接去看它的文档，我们将这个效果通过三个步骤来实现：第一步、检测浏览器是否支持Notifications APIif(window.webkitNotifications){console.log("你的浏览器支持Notifications");}el... 阅读全文
摘要：
最初这个效果是在Playnext.cn看到的，感觉挺好玩，今天就跟大家分享一下，用CSS3怎么来实现这个效果。 先来看下我做的demo Hello 二货，这个抖动效果的原理是通过元素小角度快速旋转和元素上下左右快速移动组合而成的，首先我们来了解两个个CSS3的知识点：transform、animation，下面我们逐一介绍一下这两个属性。transform从字面上讲是变形改变的意思，他包括：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）、matrix（矩阵变形），抖动效果中我们只用到了rotate和translate，它的语法是：-*-transform 阅读全文
摘要：
将来会有越来越多的人来访问我们的网站，为他们提供基于HTML5的离线储存功能将大大提高网站的可访问度和友好度，接下来通过一个小demo分享一下我学习到的HTML5离线储存技术。首先讲下它的运行机制，每张需要离线使用的页面都指向一个 .manifest 文件，这个 .manifest 文件罗列了这张页面离线时所需要的资源。当浏览器第一次访问页面时，.manifest 文件会告诉它哪些资源是需要缓存下... 阅读全文