Finding a specific commit in GIT

An issue that I came across recently is, checking if a certain commit is present in a branch or tag.

This could be usefull if you want to know if a certain bugfix has been deployed to a certain branch/tag.

Doing this is quite easy, say we want to find a commit containing 'puppies':

git log --all --grep='puppies'

This will return you the commits containing puppies. ( eg. edd12e3d44364957832a0a74169469a1 )

To find all branches, use:

git branch --contains edd12e3d44364957832a0a74169469a1

To find all tags, use:

git tag --contains edd12e3d44364957832a0a74169469a1

CSS3 animations made easy with SASS

With CSS3 a lot of goodies have been made available out of the box with HTML. One of these goodies is the ability to use animations.  The problem is, that different browser vendors have created different CSS properties to support these functionalities.  This requires you to copy those vendor tags over and over again.  This make your CSS bigger then it needs to be, and hurts to the readability of the styles.

One way to deal with this is by using SASS, which is a meta language written on top of CSS allowing you to write "CSS" in a structured way while also supporting mixins and other goodies.

SASS can be easily installed as a Ruby gem, and you can make it watch a "scss" file and automatically generate your CSS files.

As an example, let say we have a webpage with a "<div class='box'/>".  We want that box to have a certain size, on hovering we would like to make that size grow.  In CSS you could do something like this : 

.box {
  -webkit-transition: height 1s;
  -moz-transition: height 1s;
  -o-transition: height 1s;
  -ms-transition: height 1s;
  transition: height 1s;
  width: 100px;
  height: 20px;
  background: #00F; 

}
.box:hover {
    height: 100px;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    -o-transition: height 1s;
    -ms-transition: height 1s;
    transition: height 1s; 

}

While this works, it has quite a lot of repetition, and that kind of hides the more important properties.  In this case: the height that changes from 20 to 100 pixels.

Using SASS you can make this a lot more concise, improving readability. We can get rid of those vendor properties, resulting in a much shorter CSS that clearly describes what we want.

.box{

    @include animate(height);
    width: 100px;
    background: #00F;

    height:20px;
   &:hover{
        height:100px;
        @include animate(height);
    }
}

Notice we are using indentation for the hover selector, and it is contained within the parent CSS closure. This clearly expresses the inheritance of those properties.

We are however cheating a little. As you may have noticed I am including an "animate" mixin. The animate method doesn't come out of the box, you have to write it.

This is trivial however, you can pass in the desired property and apply it to all vendor properties.

We can also use variables within SCSS, this makes sure you never have to copy the same color code over and over again. Or for our example, we can make all animations take the same amount of time (1s).  

$animationTime : 1s;

@mixin animate($property){
    -webkit-transition: $property $animationTime;
       -moz-transition: $property $animationTime;
         -o-transition: $property $animationTime;
        -ms-transition: $property $animationTime;
            transition: $property $animationTime;
}