Jon Rohan » Tutorial

Dead Simple Git Workflow

Jon Rohan — Tue, 18 Aug 2009 20:00:55 +0000

Recently I have had the privilege to work with a few excellent small agile teams. With each team, they have their own process, which works best for them. And there’s nothing wrong with that, a team should work in it’s most effective way. But I came across a team recently that had a workflow that really impressed me. To put it simply it’s described as an extremely cool Git workflow.

I can’t take credit for coming up with this workflow, but I’m gonna do my best to re-describe it here so it can be shared. The basis for this post comes from reinh.com’s posts A git workflow for Agile Teams and Hack && Ship. Also this workflow pulls alot from Josh Susser’s post on the story branch pattern.

Let’s start by summarizing Josh’s post. In his post he describes a 7 step process that begins with Pivotal Tracker. The idea being you locate a story on pivotal tracker, like a bug, or feature, or chore. Then you update your working master by pulling from the origin, and create a whole branch just for that bug. Once you’ve fixed the bug, commited it to your branch, you then merge your branch with the master and push it all back up to the origin. Then just remove the old branch and you’re done.

That’s the basic workflow, but there is alot of automation that can be done. The first is the creation of the branch. This isn’t terribly long command ‘git checkout -b’ but I went ahead and created a shell alias ‘gcb’.

alias gcb='git checkout -b'

So now when creating my branch for working on my bug I just type

gcb fix_ie_bug_Story123456

After creating my branch I would work on it normally doing ‘git commits’ when needed. Then when I’m ready comes the cool part. Hack & Ship. Hack is what it’s called when you pull the lastest code from the origin and merge it with your branch. It’s a good idea to do this often, just to keep everything up to date. To not have to type and remember the few commands for accomplishing this, I use a shell script.

hack.sh

#!/bin/sh -x
# hack: Merge the latest changes from the master branch into your current branch
ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0
CURRENT="${ref#refs/heads/}"
git checkout master
git pull origin master
git checkout ${CURRENT}
git rebase master

So during my coding, I can at anytime just type the command hack. And my branch is updated!

Once I’ve finished my bug and I’m ready to send it back to the origin I do one more ‘hack’, make sure it’s all updated. And then I ship. This will checkout the master merge my branch with it, and then push it to the origin. Once again I use a shell script for this.

ship.sh

#!/bin/sh -x
# Git workflow ship script from: http://reinh.com/blog/2008/08/27/hack-and-and-ship.html
# git name-rev is fail
ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0
CURRENT="${ref#refs/heads/}"
git checkout master
git merge ${CURRENT}
git push origin master
git checkout ${CURRENT}

Now I’m done with my bug, and there’s a script for that ‘dwf’. This will move me back to the master, and delete my old branch.

dwf.sh

#!/bin/sh -x
# dwf, aka "Done With Feature" script: deletes current branch and puts you back on master
ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0
CURRENT="${ref#refs/heads/}"
git checkout master
git branch -d ${CURRENT}

And we’re ready to repeat the whole process on a new bug/feature/chore.

To summarize:

gcb awesome_new_feature_Story12345

develop...
commit....
hack....
[repeat]

hack
ship
dwf

You can even take this a bit farther, and create an alias for the last three commands ‘hsd’ (hack ship done)

alias hsd="hack && ship && dwf"

Which cuts our workflow to

gcb awesome_new_feature_Story12345

develop...
commit....
hack....
[repeat]

hsd

Pretty awesome! I’m sure there are hundreds of awesome workflows out there. What do you guys use on your projects?

CSS Text Rotation Clock

Jon Rohan — Tue, 11 Aug 2009 22:53:31 +0000

I recently saw an article on CSS text rotation on the internets and decided to try my own experiement.

What I wanted to make was a clock. The basis of this project is using the -webkit-transform:rotate(0deg); css property. This allows you to rotate any object 360 degrees. So I began to wonder, if I have a line, and I setup a javascript timer can I rotate it every second?

The design is inspired by @eston‘s Sarai desktop.

This clock won’t work in IE. There is an IE rotate property, but it only rotates at 0, 90, 180, 270. So that won’t work for this clock. Here’s the IE rotate property anyways

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

So How did I do it?

I started with an external div for the clock. Giving it a width and height of 100px and position relative (so I can position the clock hands)

#clock {
  margin: 25px;
  float: left;
  width: 100px;
  height: 100px;
  position: relative;
}

After getting the clock, I need a second hand, a minute hand and an hour hand. Originally I just used a side border on the hands, but realized that the rotate property rotates the object at it’s center, and not at it’s end. So to create the hands, I gave them a border top equal to the length of the hand, then a height to offset the border, and some margin to vertically align.

#sec {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  border-top:50px solid #353535;
  height:30px;
  left: 49px;
  margin:10px 0;
  position:absolute;
  top: 0;
  width:2px;
 }

#min {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-top:50px solid #353535;
  height:30px;
  position: absolute;
  left: 48px;
  top: 0;
  margin:10px 0;
  width:4px;
 }

#hour {
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  border-top:35px solid #353535;
  height:25px;
  left:47px;
  margin:20px 0;
  position:absolute;
  top:0;
  width:5px;
}

The tick marks are also the lines, with a top and bottom border rotated 180 degrees.

The javascript is a simple timer which updates the degrees of each hand based on the time.

(function(){
  var tick = function() {
    var now = new Date();
    $("#sec").css({"-moz-transform":"rotate(" + (now.getSeconds() * 6) + "deg)",
    "-webkit-transform":"rotate(" + (now.getSeconds() * 6) + "deg)"});
    $("#min").css({"-moz-transform":"rotate(" + (now.getMinutes() * 6) + "deg)",
    "-webkit-transform":"rotate(" + (now.getMinutes() * 6) + "deg)"});
    $("#hour").css({"-moz-transform":"rotate(" + (now.getHours() * 30) + "deg)",
     "-webkit-transform":"rotate(" + (now.getHours() * 30) + "deg)"});
  };
  setInterval(tick,1000);
})();

CSS Clear Fixes

Jon Rohan — Sat, 01 Aug 2009 19:18:22 +0000

There is a common problem in front end engineering where, when you float an element it is actually removed from it’s parents’ flow. This can cause the elements below the floating element to run into the floating elements. Like below. The green box is floating and it’s parent has the red border. The blue box is below the red border box.

There are a few solutions to this, but I have heard of a new solution that I don’t think is widely published. overflow:hidden;

First lets go through the other solutions.

clear:both

This is the most common that I’ve found, and the one I’ve used the most. The style in this code is inline, but typically you can just create a class called .clear and apply these styles.

In this example you place another element at the end of the child elements in the red border box. This last element gets applied the style clear:both which disallows any floating elements on either side of it.

This can run into problems if you have multi-column layouts this can clear the content in the other columns

clearfix hack

This is essentially taking the previous method and adding to it. I don’t use this very often.

.clearfix :after  {
  content :  "." ; 
  display :  block ; 
  clear :  both ; 
  visibility :  hidden ; 
  line-height :  0 ; 
  height :  0 ; 
} 
 
.clearfix  { 
  display :  inline-block ; 
} 
 
html[ xmlns]  .clearfix  { 
  display :  block ; 
} 
 
*  html .clearfix  { 
  height :  1 % ; 
}

This method works but it feels like a lot of overhead, and now my CSS is non-standard.

overflow:hidden

In this method you apply overflow:hidden to the parent element which is the red border box. And that’s it!

Pretty simple! And it doesn’t require extra div tags. I’ve tested this in IE7, Firefox, Safari, and Chrome works in all.

CSS 3 @font-face

Jon Rohan — Fri, 24 Jul 2009 01:47:54 +0000

Surprisingly embed-able opentype fonts have been included in Internet Explorer since version 4. But with the recent release of Firefox 3.5 and Safari, you can now embed Opentype and Truetype fonts across all major browsers. It’s pretty simple and here’s how it’s done.

First you must define your font, basically tell the browser where to get the font file, and what you’re going to call it.

/* For IE */

@font-face {
font-family: 'Komika Display';
src: url('Komika_display.eot');
}

/* For Other Browsers */

@font-face {
font-family: 'Komika Display';
src: local('Komika Display Regular'),
     local('KomikaDisplay-Regular'),
     url('Komika_display.ttf') format('truetype');
}

@font-face {
font-family: 'Komika Display';
src: local('Komika Display Bold'),
     local('KomikaDisplay-Bold'),
     url('Komika_display_bold.ttf') format('truetype');
font-weight: bold;
}

@font-face {
font-family: 'Komika Display Kaps';
src: local('Komika Display Kaps Regular'),
     local('KomikaDisplayKaps-Regular'),
     url('Komika_display_kaps.ttf') format('truetype');
}

@font-face {
font-family: 'Komika Display Kaps';
src: local('Komika Display Kaps Bold'),
     local('KomikaDisplayKaps-Bold'),
     url('Komika_display_kaps_bold.ttf') format('truetype');
font-weight: bold;
}

ok, now that you have defined your font, you can use it.

body {
  font-family: Komika Display Kaps, sans-serif;
}

And here’s what it looks like:

This should be the demo font face

The second part of this tutorial is should you use font-face?

This is another call to your server, which when u have a huge website, isn’t a great thing. But compared to most things on a website, this size is tiny.

You have to consider too, for the designers who need the exact font everywhere this is a better alternative than to cut images for every heading on the website, or for the nav. And bonus! The text is still crawl-able by search engines.

Targeting IE6 for style

Jon Rohan — Sun, 31 May 2009 16:35:18 +0000

I wanted to share with you my preferred method of targeting CSS to IE6.

Conditional Comments

I prefer this method because it keeps the CSS cleaner, and when the apocalypse hits and IE6 is no longer relevant it’s easy to remove code specific to IE6.

The idea behind this method is, you would write your code how you normally would for any standards compliant browser. Then you would go back and in the ie6.css sheet you would add “overrides”. Because CSS (Cascading Style Sheets) is by design built so that style classes lower on the page take higher priority, this should fix your issue.

So you would put something like this in your global.css

.textarea {
   border: 1px solid #000;
   padding: 3px 5px;
   margin: 5px;
}

and you would put this in your ie6.css

.textarea {
   border: 1px solid #FF0000;
}

The margin and padding properties are inherited so all you are changing is the border color. And it only occurs in IE6 because of the Conditional Comments.

What is your preferred IE targeting method? Leave a comment below.