Recreating the GitHub Contribution Graph with CSS Grid Layout

Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge.

As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of my CSS ended up being less than 30 lines, with only 15 declarations!

grid-auto-flow: column;, that’s the key to this one. What shines the most though is the use of CSS Variables.

Recreating the GitHub Contribution Graph with CSS Grid Layout →

Related: Frappé Charts easily lets you create GitHub Contribution Graphs.

Improve the GitHub Website with “Refined GitHub”

Refined GitHub is a browser extension for Chrome and Firefox “that simplifies the GitHub interface and adds useful features”. The nice list of additions includes URL Condensing (pictured above) and Markdown preservation when copying comments (pictured below).

The extension is also able to add a few extra views, filters, and links (such as linking to issue references from the code view); but what I even like most of all is Refined GitHub’s goal:

Our hope is that GitHub will notice and implement some of these much needed improvements. So if you like any of these improvements, please email GitHub support about doing it.

The goal of Refined GitHub is to make itself obsolete.

Refined GitHub →
What’s new in Refined GitHub →

Context aware MySQL pools via HAProxy

At GitHub they use MySQL as their main datastore. The setup is a typical “single-writer-multiple-readers” design. They loadbalance between server pools using HAProxy, with some cleverness built in:

Instead [of checking whether a MySQL server is live with mysql-check], we make our HAProxy pools context aware. We let the backend MySQL hosts make an informed decision: “should I be included in a pool or should I not?”

The HAProxy config contains all known hosts. The hosts themselves can answer to checks running with either HTTP 200 (OK), HTTP 503 (Not OK), or HTTP 404 (Maintenance). Based upon those answers HAProxy will assess if there are enough hosts in the main mysql_ro_main pool to handle the load, and automatically switch to the failover mysql_ro_backup pool if need be.

frontend mysql_ro
  ...
  acl mysql_not_enough_capacity nbsrv(mysql_ro_main) lt 3
  use_backend mysql_ro_backup if mysql_not_enough_capacity
  default_backend mysql_ro_main

Clever.

As an extra, they’ve also integrated it all into their chatops.

github-mysql-haproxy-chatops

Context aware MySQL pools via HAProxy →

Using <details> in GitHub

Turns out you an use the <details> element in GitHub:

<details>
 <summary>Summary Goes Here</summary>
 ...this is hidden, collapsable content...
</details>

Handy if you have a rather big stack trace that might make your comment a tad too cluttered:

ezgif-842406230

Going into the rabbit hole it looks like support for this tag was initially requested back in 2014. In the issue raised it is mentioned that GitHub uses html-pipeline, making – if they use the default whitelist – all of these elements whitelisted:

h1 h2 h3 h4 h5 h6 h7 h8 br b i strong em a pre code img tt div ins del sup sub p ol ul table thead tbody tfoot blockquote dl dt dd kbd q samp var hr ruby rt rp li tr td th s strike summary details

Deployment at Github

deploying-at-github

All deployments happen in chat via Hubot commands, which ensures that everyone in the company (from development to operations to support) has visibility into changes that are being pushed into production.

Deploying branches to GitHub.com →

Reminds me of how deployments at Etsy happen. They’ve got Deployinator integrated into IRC and deploy using deployment trains. See Scaling Deployment at Etsy for more info.

The $2375 Amazon AWS mistake

aws_logo

When I got to GitHub, I checked my application.yml, and it was online with my [Amazon S3] API keys… Crap! I reverted the last few commits, and deleted all traces from GitHub. I was able to clean it up within about 5 minutes and no one else knew about the repo. After a close call, I went to bed.

When I woke up the next morning, I had four emails from Amazon AWS and a missed phone call from Amazon AWS. Something about 140 servers running on my AWS account. What? How? I only had S3 keys on my GitHub and they where gone within 5 minutes!

Let this be a lesson to treat your API keys/tokens/etc. like your passwords: never expose them. And if they do get exposed – even for just a little while – change them all.

My $2375 Amazon EC2 Mistake →

GitHub’s CSS

I’m always interested in the development details of other products, particularly their styleguides and approach to CSS. Given my penchant for the otherwise inane CSS details, I decided to write a bit about GitHub’s CSS.

Always great to see how a company organises its code. It’s an honest piece, also covering stuff that should improve.

GitHub’s CSS →

Related: Did you check out Github’s Styleguide yet?