Viget Intern Prank: How to Improve any Website

During my internship, I was given a summer checklist in the form of a so-called “Vigtories card” — the idea was to accomplish as many non-work-related activities (some quirkier than others) as possible. You can see the interns’ final Vigtories on the intern tumblr blog.

Throughout the summer, I made some decent progress (bike to work, go hiking with a fellow Viget, learn something new about Brian or Andy), but one particular task remained unchecked for the majority of the summer - “pull one harmless prank in coordination with your mentor”.

THE IDEA

While celebrating Intern Appreciation Day at a local brewpub with the Boulder developers, we decided to hijack Viget’s DNS and redirect the intern tumblr blog to something funny. Weeks went by however and as the internship neared its end, we’d yet to decide what would be something funny. With one day left however a formal plan was crafted: we would manipulate the intern blog itself.

 

INITIAL IMPLEMENTATION

Since the task at hand was fairly lightweight, I went with building up a simple Sinatra proxy app. The basic idea was to load the original source using Nokogiri and fiddle with all the images to our liking. We targeted author images first, but what to do with them? Mustachify.

 

Adey Mustachifyed

 

The following snippet was the first implementation. It flipped through the HTML and replaced every image of class ‘author-photo’ with the mustachifyed version of itself, then returned the new HTML for eyes of the world to see.

get '/' do
 doc = Nokogiri::HTML(open("http://vignettesfromviget.tumblr.com/"))
 doc.css('.author-photo img').each do |image|
 image['src'] = "http://mustachify.me/?src=" + image['src']
 end

 halt 200, {'Content-Type' => 'text/html'}, doc.to_html
end

 

STEPPING THINGS UP

Things then got real as Pat jumped in with some MiniMagick and Digest::MD5 craftiness. This time the manipulation was targeted towards images in the bodies of every post. Since the new site was already riddled with mustaches, we decided to flip these images upside down. Using Nokogiri still to pluck all the posted images from the HTML, MiniMagick was used to make flipped copies of everything, and Digest::MD5 was used to save the new and improved copies to our own directory.

def flip_images
 document.css('.content img').each do |image_node|
 image_source = image_node['src']
 extension = File.extname(image_source)
 output_name = Digest::MD5.hexdigest(image_source) + extension

 image = MiniMagick::Image.open(image_source)
 image.flip
 image.write "./public/#{output_name}"

 image_node['src'] = output_name
 end
end

The last line in this method adjusts the HTML so pictures are loaded from our new directory and tada! - images were flipped! But not all of them…

 

ONE LAST ROADBLOCK

If you upload multiple images into one Tumblr post, an iframe is created in the post instead of a simple image. This difference was allowing these iframe photos to slip under the radar. To fix this, first we broadened the scope of our image flipping function from '.content img' to '.content img,.photoset_row img' allowing us to capture, flip, and save the iframe images with the rest. We then wrote a method to change the source of the iframe images away from the tumblr blog server and to our own directory.

def rewrite_iframe_source
 document.css('iframe.photoset').each do |iframe_node|
 iframe_node['src'] = iframe_node['src'].sub!("http://vignettesfromviget.tumblr.com", "")
 end
end

 

THE RESULT

 

Vignette Transformed

A glorious manipulation of the intern tumblr blog. The last step in the prank was to hijack the Viget DNS and redirect anyone who visits vignettesfromviget.tumblr.com to the IP of the modified site. This requires some administrative access to the DNS and thus was a job for Pat. But, after all, this was a “prank in collaboration with my mentor”. This prank was purely local as we could only redirect people to the new IP address if they were on a Viget network. But, for your viewing pleasure, feel free to enjoy the fruits of our labor - before and after

 

BONUS - CAGEME

You’ll notice a few posts do not have a mustachifyed young adult picture as the author, but instead a mustachifyed picture of Nicolas Cage as someone else. This indicates a post by Jack: one of the other Rails interns here this last summer, and the creator of one of the greatest websites around - http://cageme.herokuapp.com

Eli uses his mathematics degree from Carnegie Mellon to blur the lines between the digital and physical worlds. He codes for Shure, Volunteers of America, and other clients from our Boulder, CO, office.

More posts by Eli