devspade

a developer's website

Fixing Gist Embeds in Octopress

If you follow this blog at all, which if my google analytics are right you don’t, you’ll know I not too long ago rebooted. One of the things that held me back from writing anything at all was being preoccupied with the platform. As a developer I fell into the all too common trap of worrying more about the tools then the output.

I finally settled on Octopress which is what currently powers this site. It solved what I was looking for in that it was relatively simple, powered by ruby which I was looking to work with and it has a recently well developed ecosystem of themes, plugins etc.

The Problem

One of the plugins I was eager to check out was the gist tag plugin which will allow you to embed a gist right into your blog. Octopress already formats embedded code so we’re all set there - but not exactly.

A regular code embed will look something like this (I’ve change the colors on this blog but you get the idea):

code embed

And here is what a gist embedded with the plugin looks like:

gist embed

As you can see it does work. The gist is there. But the fonts aren’t quite right, they’re a bit larger, and the line numbers are all out of whack. If you check out the source for the plugin you can kind of see why. At line 43 - it uses the the /gist/{gist id}.js file which is built by the folks at Github. It tries to return to you an already formatted code block. Of course their format is slightly different from the Octopress format and thus your close but not quite right result.

A Solution (kind of)

So here’s a quick and kind of dirty way to fix this. It’s not perfect. I’m considering a more full rewrite of the plugin but this solves my immediate needs.

First, edit your /octopress/plugins/git_tag.rb file. You want to edit the html_output_for method so it looks like this:

1
2
3
4
5
6
7
8
def html_output_for(script_url, code)
  code = CGI.escapeHTML code
  <<-HTML
<div><script src='#{script_url}'></script>
<script type="text/javascript">$(".gist-file table tr td.line-numbers").remove();</script>
<noscript><pre><code>#{code}</code></pre></noscript></div>
  HTML
end

Here we just add a small bit of javascript to remove the line numbers altogether. I was unable to get them to format correctly so for now - punt.

Second, add a style to your /sass/custom/_style.css file to fix some formatting problems. I fix some width issues that were showing whitespace to the right of the gist and I chose a font size to match my other code embeds and the regular body of my blog - your mileage may vary here depending on your design and theme:

1
2
3
4
5
6
7
.gist-file {
  font-size:.8em !important;
}

table.lines{
  width: 100%;
}

It’s not quite perfect but this is a developer’s blog not a designers. Now at least my gist embeds look more like the rest of the embeds on this site.

And yes I did create that just for this post.

Scratch Your Own Itch

Writing software is such a strange profession. It’s one of those rare spaces where a high school drop out and a Harvard graduate can apply for the same job and have an equal chance of getting it. It’s one of the few true meritocracies I’ve encountered.

For a profession that is so open, so approachable - it still remains an enigma to some. I often hear people say things like “I’d love to learn to code”. Strangely you never hear people say things like “I’d love to learn how to properly calculate a loan amortization schedule” but I digress.

I think people often ask me how to learn to code or how to get started because of my background. I graduated as a marketing major and was one class shy of a French minor. So I didn’t spend much time in college learning to write code - my A in ‘Computer Science I’ being the exception. From college I took a job doing tech support. It was while doing tech support that I started writing code. First it was a few VBA macros to help some financial advisors automate Excel. I moved on to VB6, then VB.Net and along the way figured it all out.

I am so often asked by people how they too can learn to code that I felt compelled to write this post. Like everything in life people want “the answer”. Is it Code School? Should I be taking a class at Code School? What about a book? Is there a book I should be reading? As if there is some silver bullet - “Ah yes, just read Code Complete and the code will write itself”.

The silver bullet

You want to learn to write software? You want to know the secret? Here’s the dirty secret that no software engineer is telling you. Learn the way we all did. Write code. Would some online class help? Probably. Are there good books out there? Definitely. But the only way you’re going to learn to write code is by writing code. The code will suck. And that’s ok. That’s great even. Because you’ll make it better and it will suck less.

The best way to do this - scratch your own itch. Do you want a personal website or blog? Don’t use tumblr write one yourself. Wish you could automatically back up your itunes to some external hard drive? Script it. For sure there is some aspect of your life, your day to day, that you could marginally improve by writing a small script to automate it.

Taking my own advice

In the last year or so I’ve taken to trying to learn more Ruby. Part of this is motivated by the fact that it drives much of what we do at Litmus but also because it’s new to me and new is fun.

So following my own advice, how would I learn Ruby? First, find the itch. As I’ve mentioned in a prior post I’m a bit of a runner. Every Thursday I do a group run with my running club. The times for the run are posted each week on their website. I was wondering one day - I wonder what my personal best for that run is? What’s the fastest I’ve ever run it? So I started to click through 50+ weeks of results and quickly realized there must be a better way to do this.

So I opened my editor and started googling things like ‘how to parse a web page in ruby’. After a lot of trial and error I cam up with this:

It’s a script that uses Nokogiri to scrape my club’s website and parse out a single runner’s results. Is it perfect? Heck no. And that’s why it’s awesome. I mentioned I was going this to some other people in my club and they wanted to see this too. And so Srr Pr was born making this search available to my teammates. Once you start scratching your own itch you will quickly find others have the same itches. That’s how scripts become apps, apps become products and products become companies.

Stop asking, start scratching

So with all due respect and apologies and all that: stop asking me to teach you HTML, stop asking about whether I think Code Academy is better then Code School or whether you should learn Ruby first or is C# a better first time language. You’re asking the wrong questions. You should be asking things that start more like “so I’m working on this little project and I’m having trouble with…”. I’d love to help you solve a problem.

Projects

Alkaline for Windows
alkaline for windows

Alkaline for Windows was built as part of Litmus Sprint week. It’s a metro styled Windows desktop application that allows you to create Litmus tests right from your desktop. Just drag and drop your email in. It’s built with C#, WPF and the MVVM pattern.

C# Wrapper for the Litmus Api
Litmus api wrapper

The Litmus C# wrapper is a client library that wraps the REST based customer api for the popular Litmus email testing platform. It allows you to created Litmus email and page previews right from your application. It’s open source and come’s with a complete set of unit tests