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.

Website

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.