Bubblings Blog

grunt-contrib-cssmin使用指南

grunt-contrib-cssmin v0.7.0

使用cssmin压缩css文件

Getting Started

这个插件要求 Grunt 为 0.4.0 或以上版本。

如果你还不了解grunt,请查阅相关文档来了解什么是 Grunt Grunt新手入门,比如如何创建 Gruntfile,如何配置 Grunt 任务,如何安装 Grunt 插件。

致逝去的2013

2013对自己来说注定是一个特殊、艰苦而又难忘的一年,从象牙塔步入社会,一个人的北漂,工作的变动……太多太多的经历仿佛都在昨天,但回想起来却又有一丝的朦胧。

回不去的象牙塔

13年虽说到了毕业季,但是自己真正在学校呆的时间却不长,除去在京实习的时间真正在学校的生活也就两个月。两个月挺长,但却是13年过的最快、最没有压力的两个月。清晰的记得和基友们游了八公山,看了中国合伙人,躲在寝室里扎金花,还有踢得最后一场足球赛……春节的时候希望还能在一起聚一聚。

getByClass函数进化史

对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法。尽管现在高版本的浏览器已经支持getElementsByClassName()方法,但是对于低版本浏览器来说,还是无法兼容,在脱离其他库的时候,还是得自己封装一个方法。

方法一

function getByClass1(parent, cls){
    var res = [];    //存放匹配结果的数组
    var ele = parent.getElementsByTagName('*');
    for(var i = 0; i < ele.length; i++){
        if(ele[i].className == cls){
            res.push(ele[i]);
        }
    }
    return res;
}

当然class里的值只有一个时,上面的方法没问题,但当值为多个时,就会出现问题。

<div class="test"></div>
<div class="test box"></div>
<script>
    getByClass1(document, 'test');    //只获取到第一个div
</script>

前端智勇大闯关(第三季)答案

下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下。附上题目地址:

http://ued.campus.alibaba.com/quiz3/index.php

第1题 突破,带锁的门

方法1

这题相对比较简单,查看源码即可看到提示信息:

<!--
-====================================
-   调用powder.blow()显示指纹痕迹!
-====================================
-->

只要在控制台里多次调用powder.blow()函数即可看到图片上的指纹信息。然后尝试组合这几个数便可过关。如下图所示:

深入理解 IE haslayout

无意间翻阅自己以前写的文章,发现css学习笔记系列文章有很长一段时间没更新了。懒惰这东西有时确实挺可怕的,它会慢慢吞噬着你的斗志和决心。要不是最近准备换工作,可能又不知道什么时候才能想起温习这些知识了。刚好后面这几天事情不多,把之前落下了的文章给补上。今天先来学习haslayout。

1.什么是haslayout

layout是windows IE的一个私有概念,它决定了元素如何对其内容定位和尺寸计算,以及与其他元素的关系和相互作用。当一个元素“拥有布局”时,它会负责本身及其子元素的尺寸和定位。而如果一个元素“没有拥有布局”,那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

必须说明的是,IE8及以上浏览器使用了全新的显示引擎,已经不在使用haslayout属性,因此文中提到的haslayout属性只针对IE6和IE7。

通过sublime text2/3来编辑markdown

markdown简介

markdown是一种简单的、轻量级的标记语言,由John Gruber和Aaron Swartz创建。markdown的优点非常多,如:语法简单,能让文档更易阅读、维护和修改,但是我觉得更吸引人的一个优点是:

markdown让我们专注于文章内容,而不是关注排版

确实是这样,不管是写博客还是写其他文章,如果用word来写,排版势必会是一个让人烦恼的问题。而如果用html来写的话,虽然很直观,但是不停的输入标签必然大大降低了写作效率。比如写一个简单的列表:

<ul>
    <li>sublime text2</li>
    <li>markdown</li>
    <li>notepad++</li>
</ul>

其实我们只是想输出一个简单的列表,但是编辑标签花费的时间都快要赶上编辑内容的时间了。那么我们来看下用markdown来实现这个列表。

- sublime text2
- markdown
- notepad++

javascript中字符串常用操作总结

字符串的操作在js中非常频繁,也非常重要。以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊。。。今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温习查阅

String对象属性

(1)length属性

length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度。当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不一样。

var str = 'abc';
console.log(str.length);

(2)prototype属性

prototype在面向对象编程中会经常用到,用来给对象添加属性或方法,并且添加的方法或属性在所有的实例上共享。因此也常用来扩展js内置对象,如下面的代码给字符串添加了一个去除两边空格的方法:

String.prototype.trim = function(){
    return this.replace(/^\s*|\s*$/g, '');
}

css样式缩写知多少

css缩写 不仅能高效率的控制页面表现,而且还能使css文件变得更小、更有条理,也是 前端工程师必备的素质之一。虽然《精通css》中没有专门介绍缩写的专题,但是在各章零碎的都有所提及,所以还是做一个总结,也方面日后查阅。

1.色值缩写

色值的缩写比较简单,一般最常用的就是两种情况,如:

color:#336699

可以缩写成

color:#369    

2.background缩写

背景在css中也经常用到,涉及到背景的相关属性及值如下:

background-color: color;
background-image:url(...);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed; 
background-position: X Y;

常见的缩写方式:

background:url(...) no-repeat 0 0;    //纯背景图片
background:#ccc url(...) no-repeat 0 0;    //背景颜色+图片
background:transparent none repeat scroll top left;    //也可把属性补全