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.
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.
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.
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.
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.
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.