Jon Rohan

Implementing an all CSS tooltip

2015-06-02T00:00:00-07:00

GitHub’s UI is a complex system of actions, notes and complex meanings. As a result, we’ve leaned pretty hard on tooltips. Since the site first launched we used a tooltip plugin called tipsy.

Tipsy

Tipsy, now unmaintained, was a jQuery plugin to replicate Facebook’s tooltip styles. Back then it was simple to add to the site, we dropped it in, and kept it around for a while.

Last year I began to turn a critical eye to tipsy. We were focusing on front-end performance and were trimming all excess javascript events. What I found was we were firing sometimes hundreds of mouseover & mouseout events on pages that had a lot of tooltips.

We knew then that we wanted to kill tipsy from our site, but the only hope we had was to make a fully CSS solution.

Hint.css

It was about this time that a library was released on GitHub. Hint.css, is ”..a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.” This was a very interesting development and perfect timing because we were considering a tooltip replacement. Hint promised to be everything we wanted.

We investigated and found that Hint.css is a very elegant solution, but didn’t match our tooltip style. More specifically, we wanted tooltips that centered on content.

Hint vs Tipsy

I didn’t want to have to redesign our tooltips or figure out how they fit on all the different places we scattered them. The fact that Hint.css, at the time, only showed tooltips from the top left or bottom left made using it a non-starter.

Primer.css tooltips

“I was tinkering around and found a way we can replace tipsy with all css tooltips. I’ve already seen a couple of downside and upsides, but I will create a pull request with the advantages and disadvantages here. We can have a thread on if we really want to do this or not.”

That’s how I started a pull request off where I had been working out a way to rebuild our tooltips with CSS. The breakthrough happened when I read about translateX which has pretty good browser support now. Translate calculates the position based on the object’s size. The difficulty before was, we don’t know how wide the tooltips are going to be. We can’t position them in the old fashion where we offset with margin-left: -50px;.

What we ended up with, was a hybrid of Hint and Tipsy.

Replacing 717 tooltips

I’m not exaggerating when I say I replaced 717 tooltips across our codebase. This didn’t happen in one big swoop. And it wasn’t released to non-staff for a few weeks.

The approach I took was to start out by making the new Primer tooltips and tipsy work side by side. To do this, I added a class to the body for all non-staff. tipsy-tooltips.

$.observe '.tipsy-tooltips .tooltipped',
  init:   ->
    el = $(this)
    el.attr('aria-label', el.attr('title')) unless el.attr('aria-label')
    el.tipsy {
      gravity: gravity
      title: 'aria-label'
    }
  add:    -> $(this).tipsy 'enable'
  remove: ->
    $(this).tipsy 'disable'
    $.fn.tipsy.revalidate()

Doing this would turn on tipsy tooltips for anyone who had the tipsy-tooltips class.

For GitHub staff, I had a conditional around the tooltip stylesheet bundle. Which would only add the css to the page if the user was staff.

<%= stylesheet_bundle 'tooltipped' if css_tooltips_enabled? %>

The strategy behind this was to give us the ability to find the bugs with the new system before shipping it to the public.

Advantages

There were going to be trade-offs in going from a JS based tooltip solution to a CSS based solution. I wanted to list the advantages and disadvantages to see if the benefits outweighed the trade-offs.

Performance

This was the first question in my head, because we’re doing a bunch of transformations and transitions with the css version it’s unclear that it’s really a win. But early diagnostics look good! Here’s the mouse hovering over the collapsed repository sidebar tipsy vs. primer css tooltips.

Tipsy repaints in the Chrome devtools event timeline

In the tipsy timeline, you can see at the top there are spikes that are shooting into the 30fps range. This causes jank hovering and scrolling on some of our larger pages.

Notice also the yellow bar that occurs at the beginning of the event waterfall. This is the time it takes for the JS mouseover event to fire and move the tooltip into position.

Primer css tooltip repaints in the Chrome devtools event timeline

For comparison here is the Primer.css tooltip timeline. All of the actions remain in the 60fps .

I was also looking into the paint rectangles that happen when tipsy was fired, versus primer.css tooltips.

Tipsy’s paint triangle was the whole screen. I believe because the tooltip is moved off screen and repositioned after every hover.

The fully css tooltips had very little screen repaints.

Flexibility

Tooltips on :focus

There was more flexibility with how and when we triggered the tooltips.

We could easily add :focus triggers for the tooltips without adding more js events to them.

Even adding transitions and delays to the tooltips. Delays could be useful if we didn’t want the tooltips to appear right away. Giving the UX a more natural feel.

Disadvantages

There were some disadvantages that caused us to rework some of our code.

Overflow hidden

This was one of the biggest trade-offs we had to overcome. There are many reasons you may want to use overflow: hidden; or scroll. We do this in our issue comments, and in a lot of places that traditional clearfix fixes won’t work.

The problem is the tooltips were no longer global elements in the DOM. They now existed right along side the element that was triggering the tooltip. When these elements were inside a container that had overflow:hidden; applied to it, you would get clipped content and not see the full tooltip or sometimes none of it.

With tipsy we didn’t have this problem, because tipsy creates a global tooltip that it reuses for every element. The global tooltip element lives at the bottom of the page, placing it safe from clipping.

`:before, :after` collisions

Anytime we used .tooltipped classes in conjunction with another class that used the :before, :after pseudo-selectors we had collisions. This meant that we couldn’t use the .tooltipped class with our octicons, clearfix or a few other minor places we used :before and :after.

We would get around this by separating these to separate elements.

title attributes

Native tooltips and css tooltips all together.

The way that tipsy worked was it used the already defined title= attribute on an element, grab the data within, destroy the title= attribute, then display the tooltip. This was how it got around displaying both the native tooltip and the tipsy tooltip.

That is a lot of logic that we couldn’t accomplish with pure CSS tooltips. We ended up using aria-label instead. Which would not display a native tooltip, but would add context for users with accessibility issues. “The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.”

What seemed like a disadvantage turned out to be an advantage. Our site was now getting more accessible.

Going live

After all the bugs were squashed, we decided that it was ready for everyone. Before shipping, we began tracking window performance with window.performance to see the results.

When we turned on the all css tooltips this was the performance graph of slow mouseover events

The graphs looked GREAT! When we turned on the css tooltips, slow mouseover js events went from around 30,000 an hour to almost 0.

How to vertically center a clipped image in CSS

2015-05-08T00:00:00-07:00

Sometimes you need to clip an image to a certain height, even though the image may be taller. Except when you do this, you end up getting only the top or bottom portion of the image, which probably isn’t useful.

Here’s how you vertically align the image inside of a clipping window.

Here’s an example

This is a 600px image clipped to a 100px high wrapper. I added some visual lines to help you see the center. You can click it to see the full original image.

<div class="image-wrapper">
  <img class="zoom-image js-zoom-image" src="http://jonrohan.codes/assets/images/posts/centering.png"/>
</div>

Calculating the offset

This is tricky because you need to calculate the amount of vertical offset based on the height of the image and the height of the wrapper. For example this image is 600px and the window is 100px (600 - 100) / 2 = 250px. We’ll need to bump image up vertically 250px It is impractical to calculate for all your images, or costly to use JavaScript.

If we use some algebra to move our equation around, we end up with a * 0.5 + b * -0.5 where a = wrapper height and b = image height.

A fist full of properties

The two properties that we use to compute this dynamically is top and translate.

top

top calculates based on the wrapper. If we’re moving the img { top: 50%; } it moves the image down 50% of the wrapper height.
translateY

translateY calculates based on the height of the object. When we’re applying it to the img { transform: translateY(-50%); } That moves the image back up, 50% of the image height.

Putting it together we get this css. We also need to set the position: relative; on the img and overflow: hidden; on the parent wrapper. Or we’ll end up seeing all the image anyways.

.image-wrapper {
  height: 100px;
  overflow: hidden;
}

.image-wrapper img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Oh and if you’re not using autoprefixer, which I highly recommend you put it in your workflow somewhere, then here are the browser prefixes you’ll need.

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Practical example

I threw together an example on codepen. The example is similar to an image reveal you might find in a social timeline. Click the photo to see more of the image.

See the Pen Vertically center image by Jon Rohan (@jonrohan) on CodePen.

A big update to this site

2015-05-03T00:00:00-07:00

Its been a while since I’ve given any attention to my site. I felt like devoting this weekend to it felt right. I’ve updated it to a new look. Its hosted on GitHub pages which fits perfectly into my daily workflow. The design was custom by me.

That new homepage feel

Tools

Heres a list of tools I’ve used in building this site.

autoprefixer
bower
grunt
ionicons
jekyll
normalize
primer
moment.js
typekit

Autoprefixer

Autoprefixer is a great tool for normalizing all your prefixed css property. Instead of always remembering and writing the -webkit- prefixes for different css3 properties that haven’t been fully supported yet. Autoprefixer remembers those things for you.

Bower

Bower.io is another package manager which is great for moving front end assets around like js/css libraries. You can checkout versions of jquery or d3.js and have them and any bug updates automatically included into your front end stack.

Grunt

Gruntjs is like make, but for node. What makes grunt great is I can use it to hook in existing node and grunt packages to do tasks for me. I use it to update my bower libraries, build my jekyll site, and publish to gh-pages.

ionicons

Most of the icons you see on the site are svg images of ionicons I picked them because they were free and open source. And were really easy to drop into my designs.

jekyll

Jekyll is the technology that is behind GitHub pages. It’s whole deal is it builds sites from html and markdown files and compiles them into plain old html. Then GitHub serves it. By computing the logic before you take out a lot of the processing time when a website is loaded.

normalize

Back in the day it was Eric Meyer’s css reset, but now you should really be using normalize.css It takes out any of the discrepancies between browser’s default settings. Making all of the default styles the same.

Primer

I’m using primer’s grid and markdown styles. Because sometimes you don’t really need to re-invent something that is great.

Moment.js

Moment.js is a way to take a date 2014-04-01T16:30:00-08:00 and turn it into something like 2 years ago. Jekyll doesn’t include this sort of date calculation, but I wanted to have something and this worked.

typekit

Typekit is probably the best way to include some beautiful fonts on your site. On this site I’m using:

‘Proxima Nova’ for the body
‘Quatro Slab’ for the headings and logo
‘Source Code Pro’ for the code snippets

More to come…

I’ll go into details in a later post on my gh-pages grunt build setup.

Scale a block-level element in CSS

2015-05-02T00:00:00-07:00

Sometimes you want to scale an iframe window like an image, but the iframe doesn’t behave that way. A good example is when you embed a youtube video in your site.

"Chewie, we're home"

A threw together a little demo on codepen showing how to accomplish this with only CSS.

If you are building a responsive site like a news site, or blog. You will probably include some video content, and when you do you will want to have the video scale properly with the container of the site.

Breaking it down

<iframe width="560" height="315" src="https://www.youtube.com/embed/wCc2v7izk8w?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

First thing you’ll have is a video, let’s say from youtube. By itself, the video will not scale. The actual video inside the <iframe> is scaling to fit the iframe as best it can. But the iframe doesn’t have the knowledge of the size of the video inside it. That’s why you typically set the width and height on the iframe.

<div class="scale-video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/wCc2v7izk8w?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Wrap the video in a <div>. We’re gonna be using this as the scaling container. The key is to add a padding-top: n% with a width: 100%; to the container. This makes the container scale when the parent container is scaled. For a 16:9 video size, you would calculate (9 / 16 * 100) = 56.25

.scale-video {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

Then all you need to do is absolutely position the iframe and have it scale to fill the parent container.

.scale-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Primer CSS Styleguide

2015-03-23T00:00:00-07:00

Primer is GitHub’s internal styleguide and css toolkit. It is used as a way to share buttons, forms, grids, tooltips and more with all the internal and external properties of GitHub. For example Gist, Enterprise and GitHub.com.

We recently open sourced Primer, because we wanted to be transparent with our styleguide and if anyone could get any use out of it we would like to share. The toolkit isn’t meant to be a full fledged CSS framework like Bootstrap.

Lets build a toolkit

I’ve been copying and pasting the stylesheets from github/github for new gist.

In 2012 it started becoming more apparent that we needed a toolkit that we could share between our other github properties. Until that year gist was and always had been a separate rails app combined with github.com.

Gist shared everything with github, because it lived in the same codebase. We were working on a big initiative to upgrade the whole app and separate it into it’s own codebase.

During the process I was talking with the designer/developer working on the front-end, and we were tossing around the idea of building something to make it easier to share common styles (buttons, forms, text, syntax) between the properties. “How have you been using the styles?” I said. “I’ve been copying and pasting the stylesheets from github/github for new gist.” o_O “Ok, I’m going to create a repo tomorrow, lets start sharing stuff.”

I performed a slam poem about primercss.io at a GitHub summit on November 11, 2012. Sorry about the first half of the video being blacked out.

Lets open source it

Primer went through a few iterations. It started as a rails gem, because bower.js wasn’t fully realized at the time. It wasn’t until recently that the work was beginning to look clean polished and ready for others to read and use.

A lot of what primer is today, is due to the hard work @mdo has been putting into it. He got us ready to release it.

Check out the source code or browse through the docs on GitHub.

Class Naming: Semantic Approach

2012-01-20T00:00:00-08:00

The Semantic Web

With the rise of web standards we have seen the rise of the semantic web. This applies to the HTML elements selected as well as the class names chosen for the HTML. When choosing semantic elements and class names you want to pick a name considering the function or meaning of the element as it is on your page, not the position or style of the element.

The Meaning

What exactly am I talking about “meaning” or “function”? This means that when picking a name you want to pick one regardless of where it is, only what it contains or what you’re using it for.

example: Imagine we have some markup that represents a search result

THE BAD WAY

<div class="search-result">
  <div class="search-result-large-header"><a href="">My Search Result</a></div>
  <div class="search-result-gray-description">This is the best search result</div>
  <div class="bottom-search-result-info"><a href="">1 comment</a> <a href="">12 views</a></div>
</div>

There is a lot of things wrong with this. To name a few, there are too many unnecessary DIV’s; The class names have style and position specific properties; Since this is a search result, multiples of these makes me want to pass out.

THE SEMANTIC WAY

<div class="search-result">
  <h3><a href="">My Search Result</a></h3>
  <p>This is the best search result</p>
  <div class="meta"><a href="">1 comment</a> <a href="">12 views</a></div>
</div>

using the semantic way, I don’t need as many divs and when I do use a div I try to pick a name that describes what I’m putting in the tag. I’m calling it “meta” because that info is the meta data for that search result. It has nothing to do with the bottom, and it doesn’t need “search-result” in the name because it is a child of search-result anyways.

I also selected h3 and p elements because an h3 refers to a heading, which the title of the search result is certainly a heading, and p, because this is a paragraph of text which describes the search result.

You may ask, “What’s the big deal? It’s all gonna render the same in the browser anyways?” The benefits for semantic code translate into faster development time, javascript traversal becomes easier and it makes me happy. :)

Some more bad names that I have witnessed: .padding5px, .topBorderGreen, .redErrorText. What happens if you want a padding of 4px, or suddenly the border becomes blue, or if the error text becomes yellow. Then you’ll need to go back through all your html and re-name classes. May I suggest names like .content, .important, or .error.

List of Git Contributors

2012-01-15T00:00:00-08:00

This is one of my favorite Git commands, I think mainly because I like to see where I am in a list of contributors.

git shortlog -s -n

This produces an ordered list of contributors to a Git repo, based on number of commits. Like this:

450 Jon Rohan
230 Jim Smith
100 Joe Jones
2 Fred Smith

Go ahead and try it on your repo.

Clear Fixes

2011-01-20T00:00:00-08:00

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 create a class called .clear and apply these styles.

<div style="border:1px solid red;">
  <div style="background-color:green;float:left;width:20px;height:20px;"></div>
  <div style="clear:both;"></div>
</div>

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!

<div style="border:1px solid red;overflow:hidden;">
  <div style="background-color:green;float:left;width:20px;height:20px;"></div>
</div>
<div style="background-color:blue;width:50px;height:50px;"></div>

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

Creating Triangles in CSS

2011-01-18T00:00:00-08:00

I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web. Which is why I am sharing it here.

The details

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.

Example

<div class="css-arrow-multicolor"></div>
<style type="text/css">
  .css-arrow-multicolor {
    border-color: red green blue orange;
    border-style:solid;
    border-width:20px;
    width:0;
    height:0;
  }
</style>

As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.

Example

<div class="css-arrow-acute"></div>
<style type="text/css">
  .css-arrow-acute {
    border-color: red green blue orange;
    border-style:solid;
    border-width:25px 10px 15px 30px;
    width:0;
    height:0;
  }
</style>

With a little creativity and tweaking there are lots of shapes that can be made.

Example `border-style: dotted;`

<div class="css-arrow-multicolor" style="border-style:dotted;"></div>

Example `border-style: dashed;`

<div class="css-arrow-multicolor" style="border-style:dashed;"></div>

Example `border-style: outset;`

<div class="css-arrow-multicolor" style="border-style:outset;"></div>

Example `border-style: inset;`

<div class="css-arrow-multicolor" style="border-style:inset;"></div>

Example `border-style: ridge;`

<div class="css-arrow-multicolor" style="border-style:ridge;"></div>

Example `border-style: groove;`

<div class="css-arrow-multicolor" style="border-style:groove;"></div>

Example `border-style: double;`

<div class="css-arrow-multicolor" style="border-style:double;"></div>

Now for application:

Demo

Buongiorno!

<div class="chat-bubble">
  Buongiorno!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

This is a classic chat bubble, no images used.

This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that. What you need to do is give the “transparent” sides a completely different color like pink and then use filter: chroma to turn that color transparent.

/* IE6 */
.chat-bubble-arrow {
  _border-left-color: pink;
  _border-bottom-color: pink;
  _border-right-color: pink;
  _filter: chroma(color=pink);
}

Classes and Inheritance

2010-10-15T00:00:00-07:00

Object oriented JavaScript is everywhere today, and its the type of thing that takes a developer from someone tinkering with JavaScript on the path to becoming a JavaScript ninja. In this post I’m gonna discuss the basics of creating a JavaScript class, and a subclass which inherits methods from the superclass.

A JavaScript Class

Let’s start out with a basic class. The Person class has one method getName, when you create a new instance of the Person class you will pass in the Person’s name.

The Person class

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}

In the above example I created a Person class with a name attribute and a function to retrieve the name. Now I’ll create a new person, “Jon Rohan”.

var p = new Person("Jon Rohan");
// output: Jon Rohan
console.log(p.getName());

The <pre>p</pre> is a new Person with the name “Jon Rohan”, when I log to the console the result of <pre>p.getName()</pre> it returns “Jon Rohan”.

Prototype Chain

Now we bring in the prototype chain. The chain is like an inheritance chain. Developer inherits → from Person. We are defining a Developer as a Person, cause developers are people too. ;-) The developer takes the name attribute like Person, and an array of skills. The first line of the Developer class is to <pre>call</pre> the Person class. This calls the Person’s constructor. The Developer class also has a new method getSkills, because a Person is too general to have skills, but as a Developer, there are skills that they have.

We also need to set Developer.prototype to the Person’s prototype, by creating a new Person. Now we set the Developer’s constructor to the Developer. And we have successfully created a prototype chain from Developer to Person.

The Developer Class

function Developer(name, skills) {
  Person.call(this, name); // we call the Person constructor since it's the superclass
  this.skills = skills;
  this.getSkills = function() {
    return this.skills;
  };
}
Developer.prototype = new Person();
Developer.prototype.constructor = Developer;

Now we’ll create a new Developer, with the name “Jon Rohan” and skills [“Javascript”, “HTML”, “CSS”]. When we create the new developer, he’ll also have the getName method inherited from the Person class, and the getSkills method from the Developer class.

var d = new Developer("Jon Rohan",["Javascript", "HTML", "CSS"]);
// output: Jon Rohan
console.log(d.getName());
// output: Javascript, HTML, CSS
console.log(d.getSkills().join(", "));

This is the basic ideas behind Object Oriented Programming in JavaScript, I’ve only really scratched the surface in JavaScript OOP.

Text Rotation

2010-10-10T00:00:00-07:00

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

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. I began to wonder, if I have a line, and I setup a javascript timer can I rotate it every second?

See the Pen VYoqwj by Jon Rohan (@jonrohan) on CodePen.

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. That won’t work for this clock, because we need more than only four angles. Here’s the IE rotate property anyways

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

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. This is to position the clock hands.

#clock {
  width:208px;
  height:208px;
  position:relative;
}

After getting the clock, I need a second hand, a minute hand and an hour hand. Originally I 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. 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.

<div id="clock">
  <div class="ten_min" style="-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);"></div>
  <div class="ten_min" style="-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);"></div>
  <div class="ten_min" style="-moz-transform:rotate(60deg);-webkit-transform:rotate(60deg);"></div>
  <div class="ten_min" style="-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);"></div>
  <div class="ten_min" style="-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);"></div>
  <div class="ten_min" style="-moz-transform:rotate(150deg);-webkit-transform:rotate(150deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(6deg);-webkit-transform:rotate(6deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(12deg);-webkit-transform:rotate(12deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(18deg);-webkit-transform:rotate(18deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(24deg);-webkit-transform:rotate(24deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(36deg);-webkit-transform:rotate(36deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(42deg);-webkit-transform:rotate(42deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(48deg);-webkit-transform:rotate(48deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(54deg);-webkit-transform:rotate(54deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(66deg);-webkit-transform:rotate(66deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(72deg);-webkit-transform:rotate(72deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(78deg);-webkit-transform:rotate(78deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(84deg);-webkit-transform:rotate(84deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(96deg);-webkit-transform:rotate(96deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(102deg);-webkit-transform:rotate(102deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(108deg);-webkit-transform:rotate(108deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(114deg);-webkit-transform:rotate(114deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(126deg);-webkit-transform:rotate(126deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(132deg);-webkit-transform:rotate(132deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(138deg);-webkit-transform:rotate(138deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(144deg);-webkit-transform:rotate(144deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(156deg);-webkit-transform:rotate(156deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(162deg);-webkit-transform:rotate(162deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(168deg);-webkit-transform:rotate(168deg);"></div>
  <div class="min_mark" style="-moz-transform:rotate(174deg);-webkit-transform:rotate(174deg);"></div>
  <div id="sec"></div>
  <div id="min"></div>
  <div id="hour"></div>
</div>

#sec {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  border-top:104px solid #353535;
  height:104px;
  left: 104px;
  position:absolute;
  top: 0;
  width:2px;
}
#min {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-top:104px solid #353535;
  height:104px;
  position: absolute;
  left: 102px;
  top: 0;
  width:4px;
 }
#hour {
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  border-top: 52px solid rgb(53, 53, 53);
  height: 52px;
  left: 104px;
  position: absolute;
  top: 52px;
  width: 5px;
}
#clock .ten_min {
  border-bottom:10px solid #353535;
  border-top:10px solid #353535;
  height:208px;
  left:104px;
  margin:0;
  position:absolute;
  top:-9px;
  width:5px;
}
#clock .min_mark {
  border-bottom:5px solid #353535;
  border-top:5px solid #353535;
  height:208px;
  left:104px;
  margin:0;
  position:absolute;
  top:-4px;
  width:1px;
}

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);
})();

Dead Simple Git Workflow

2010-10-09T00:00:00-07:00

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. It is 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 to 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 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 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'

Now when creating my branch for working on my bug I 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, 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

When I am coding, I can at anytime 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.

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"

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

8-bit Kill Screen

2010-10-04T00:00:00-07:00

Drawing some 8-bit stars in canvas and using a paralax technique to make it look like a kill screen. Check out the demo.

Your game is over

Demo

Building a deck of 20 cards and shuffling them

2010-06-16T00:00:00-07:00

Working on my card tricks. I built a page to shuffle out a deck of cards, and then discard the top card. Doing it without any images. Check out the demo

The cards get dealt, then you can shuffle them or discard one.

Demo

GitHub Integrations Directory

Thu, 01 Oct 2015 00:00:00 -0500

We shipped an Integrations directory for application makers on GitHub.

Updated syntax highlighting theme

Tue, 09 Dec 2014 00:00:00 -0500

When we launched syntax highlighted diffs, we needed to rewrite our pygments processor because of the extra processing power that it required. This gave us the opportunity to rethink the theme. We redesigned the colors with readability in mind for red/green highlighted lines in diffs.

GitHub's Explore Email

Mon, 11 Nov 2013 00:00:00 -0500

After shipping GitHub Trending, I had a lot of developers asking to be able to subscribe to the trending list. I created the explore email to give developers snapshots of activity daily, weekly or monthly.

GitHub Trending

Tue, 13 Aug 2013 00:00:00 -0500

I shipped GitHub’s trending section designing and developing it. The trending section was the first of a number of improvement’s to GitHub’s explore sections of the site.

GitHub Repository Search

Mon, 06 May 2013 00:00:00 -0500

After launching Global GitHub search, we focused our attention on updating repostory search, adding code search and issues search. I was the lead designer and front-end developer for this project.

Non Breaking Space Show #30

Thu, 14 Mar 2013 00:00:00 -0500

I was invited to speak on the Non Breaking Space show about CSS performance. I was prompted because of a talk I gave on the subject.

Global GitHub search

Wed, 23 Jan 2013 00:00:00 -0500

This was a complete update to GitHub’s global search page. We updated the backend to elastic search, and updated the UI including creating an advanced search page. I was the lead designer on all of these changes.

GitHub's CSS Performance

Wed, 05 Dec 2012 00:00:00 -0500

A talk I gave at the 2012 CSS Dev conference about monitoring and fixing some performance problems on GitHub’s diff pages. I talked about lessons learned, tools used and rules for the future. The talk was also recorded.

GitHub Notifications 2.0

Mon, 06 Aug 2012 00:00:00 -0500

I helped ship what was the second iteration of GitHub notifications. The focus of a lot of the work was around subscribing to threads and the web notifications view.

The making of octicons

Sat, 21 Jul 2012 00:00:00 -0500

Gave a joint talk with Cameron McEfee about octicons at a cascade sf event. This was a talk focused specifically after we launched octicons.

Say hello to octicons

Wed, 09 May 2012 00:00:00 -0500

This was a blog post introducing GitHub’s new icon font, Octicons. We did this because we wanted to make our site as HDpi as we could. Replacing the previous icon set with scallable ones was a win win.

Search iTunes hubot script

Tue, 25 Aug 2015 00:30:23 -0500

A hubot script that searches iTunes for a song and returns a preview.

Search for a ruby gem with hubot

Sun, 23 Aug 2015 00:30:23 -0500

A hubot script that searches rubygems.org for a gem and returns latest info.

Slack react me for hubot

Wed, 19 Aug 2015 00:30:23 -0500

A hubot script for Slack that will search the API for messages with reactions.

Primer

Thu, 19 Mar 2015 19:31:21 -0400

The CSS toolkit and guidelines that power GitHub.

Atom docs snippets

Thu, 27 Feb 2014 00:30:23 -0500

Atom snippets for writing documentation.

GitHub Pages time machine theme

Mon, 08 Oct 2012 00:30:23 -0500

Created an official theme for the GitHub pages automatic generator

ZeroClipboard

Thu, 12 Apr 2012 23:59:44 -0400

Copy to clipboard functionality.

Following listing

Tue, 09 Jul 2013 23:39:30 -0000

I updated the following/followers pages on GitHub. Was trying to get them to be more enticing.

Commits listing

Sun, 12 Apr 2015 19:31:33 -0000

Posting this after updating it a few months ago, but I thought I'd share.

Heisencat

Fri, 24 Aug 2012 21:04:50 -0000

#laterdribbble I don't know how I didn't dribbble this before. full size here http://octodex.github.com/heisencat/

Personal styleguide

Mon, 08 Jun 2015 12:30:37 -0000

This is my personal coding styleguide. I try to cover how I write HTML, CSS, JavaScript and Ruby.

I'm still writing out more docs, but I think I've pretty much nailed the design down.

Full site - http://jonrohan.codes/styleguide/

More input, more input

Sat, 27 Aug 2011 14:54:19 -0000

We're using these awesome bot avatars as default avatars on botriot.

Personal site redesign

Sun, 03 May 2015 14:13:10 -0000

Decided to give my site http://jonrohan.codes/ a little bit of a design update. More details here http://jonrohan.codes/fieldnotes/a-big-update-to-this-site/#post

2012 Workspace

Fri, 17 Feb 2012 22:05:55 -0000

My GitHub Desk

Total Bots

Mon, 14 Nov 2011 19:35:23 -0000

I love stats dashboards.

Jon Rohan

Implementing an all CSS tooltip

Tipsy

Hint.css

Hint vs Tipsy

Primer.css tooltips

Replacing 717 tooltips

Advantages

Performance

Flexibility

Disadvantages

Overflow hidden

:before, :after collisions

title attributes

Going live

How to vertically center a clipped image in CSS

Here’s an example

Calculating the offset

A fist full of properties

top

translateY

Practical example

A big update to this site

Tools

Autoprefixer

Bower

Grunt

ionicons

jekyll

normalize

Primer

Moment.js

typekit

More to come…

Scale a block-level element in CSS

Breaking it down

Primer CSS Styleguide

Lets build a toolkit

Lets open source it

Class Naming: Semantic Approach

The Semantic Web

The Meaning

List of Git Contributors

Clear Fixes

clear:both

clearfix hack

overflow:hidden

Creating Triangles in CSS

The details

Example

Example

Example border-style: dotted;

Example border-style: dashed;

Example border-style: outset;

Example border-style: inset;

Example border-style: ridge;

Example border-style: groove;

Example border-style: double;

Demo

Classes and Inheritance

A JavaScript Class

The Person class

Prototype Chain

The Developer Class

Text Rotation

How did I do it?

Dead Simple Git Workflow

8-bit Kill Screen

Building a deck of 20 cards and shuffling them

GitHub Integrations Directory

Updated syntax highlighting theme

GitHub's Explore Email

GitHub Trending

GitHub Repository Search

Non Breaking Space Show #30

Global GitHub search

GitHub's CSS Performance

GitHub Notifications 2.0

The making of octicons

Say hello to octicons

`:before, :after` collisions

`top`

`translateY`

Example `border-style: dotted;`

Example `border-style: dashed;`

Example `border-style: outset;`

Example `border-style: inset;`

Example `border-style: ridge;`

Example `border-style: groove;`

Example `border-style: double;`