Edward Loveall

The Rouge Website

I had the opportunity to work on the website for the Ruby gem Rouge. I designed and built the website, and created the logo. It’s probably been my biggest contribution to open source so far, and I’m very proud of it.

What is Rouge?

Rouge is a syntax highlighter. It comes with all the popular languages, and a bunch of less popular ones. It’s also built to be compatible with Pygments’ stylesheets. Pygments is a very popular (and good) syntax highlighting library written in Python. However, to use it in Ruby projects, you have to spawn a separate Python process and pipe in input and output, which is about as fun as it sounds.

Rouge aims to be a great stand-alone parser written entirely in Ruby, and I think it does a great job. The gem had a website but it was just a demo page of small code snippets from each language. I saw this in the gem’s readme:

Also, if anyone with design skills feels like helping me make a website for rouge, I’d really appreciate the help. So far all I’ve got is the demo page.

I emailed the maintainer, the very talented jneen, and she was thrilled to work with me on it. I spent roughly 35 hours total on everything over about four months from December through March.

Here’s the logo with some of the iterations I went through:

logo iterations

I started with the idea that rouge is a makeup. I tried to do a more-or-less photo-realistic version of a makeup compact which came out well but didn’t really work well in the context of a webpage. I also played with the {R} concept which led me to { Rouge }. It originally faded lighter and lighter to represent the different syntax tokens, but we eventually went away from that and the pinkish background. I also ended up using {R} concept in the favicon.


I made the website in Rails, naturally. jneen wanted a paste service like Pastebin or GitHub’s gists. I used Hashids to obscure the paste IDs so they’re harder to spelunk around for. I also thought it would be good to show code being parsed right when a visitor gets to the page.

I started by highlighting (heh) the features of Rouge that I thought were the most valuable:

jneen wanted to feature the language parser. After playing around with words, designs, and code color schemes, we created the website as it is now.

Some tools I used to get it all done

All in all it was a great project and I’m super proud to have worked on it. Check out the website, the gem, and the website’s source code.

Authentication vs Authorization

I have long struggled with the difference between authentication and authorization. They both revolve around user permissions and signing in and out. But I recently found out the difference and made a small mnemonic for keeping them straight:

Naming Conventions for String Identifiers in Rails

Rails has many conventions. It’s one of the reasons I’ve felt so successful with it. I can let go of a lot of decisions and trust the framework to do the right thing. However, it doesn’t (and couldn’t) have a convention for everything. For instance, there’s no convention for what to call an identifying string on a model.

An Example

What is the field you identify a Category by? Here are some choices:

I think title is probably the best choice out of those. However there are many circumstances where name works just as well:

Or perhaps label:

There are many options and it starts to get pretty confusing, especially since there are multiple names that make sense in the same situation. I’ve been on many projects where we’ve used these interchangeably and it’s a mess.

The Convention

So here’s what I’m trying:

This won’t cover everything, of course. Categories can have a name and Products can have a label, but sticking to title instead doesn’t break many grammar rules. And like with everything in Rails, occasional exceptions are just fine.