How I Won my Coding Bootcamp by Ponyrolling

If you’ve been on the internet for longer than ten minutes, you are probably familiar with Rickrolling–tricking someone into listening to the earbug that is Rick Astley’s Never Gonna Give You Up under the guise of sending them legitimate information.  Before Rickrolling, there was Duckrolling, which is where you’d get sent this stupid wheeled duck instead of Rick Astley.  Either way, *rolling is bait-and-switch, you expect one thing and get another.  For example, I won my bootcamp by ponyrolling.

It all started three weeks into the program.  We had whiteboard tabletops, and I drew this on the table:

My Little Pony: Coding is Magic

It was pretty funny, the instructor took a photo of it, I took a photo of it, everyone laughed.  So a week later, I drew another pony while we were talking about data structures.  And I drew a couple ponies when we talked about exception handling.  And it got to be a thing that I was making ponies out of programming concepts and computer languages.  Just a quirky little thing, right?  Ponies on whiteboards.  Nothing extravagant.

We were assigned final projects with a week to go: make a portfolio website using ASP.NET MVC, hook it up to a database, do some other stuff, it has to have this, this, and this other thing.  By the middle of the week, a classmate had told me that I had to put a pony on it, because of the whiteboard ponies.  So I brought in my Macbook, opened up Photoshop and made a good version of that original C# pony:

C# Pony

Originally, I just had C# Pony hanging out on the home index view as a way to take up space.  I was going to remove her and put in another image later, but people would walk by and comment on the pony, and then they were upset when I said I wasn’t going to keep her there.  So I tweaked the stylesheet to make the site purple, and kept the pony, because so many people said they really liked the pony.

I got done with the site pretty quickly, and decided to make another pony.  Since the site was done in C# + HTML and drew project information and image URLs from a database, I decided that C# Pony’s companion would be SQL Pony:

SQL Pony

People were getting a pretty good laugh out of the ponies, which made me happy.  I really like My Little Pony, although I’m not completely sure why.  At least part of it is nostalgia value, having watched the cartoons and played with the toys growing up.  The newest incarnation of My Little Pony, Friendship is Magic, is actually a really good cartoon, if you can get over the characters being colorful small horses.  Plus the main character reminds me a lot of myself (Twilight Sparkle is a total nerd unicorn who special talent is being a total nerd), and her friend Pinkie Pie is a dead ringer for my dear friend Terri (in personality, of course, Terri is a real person and not a pony).  I don’t really have a large problem with being an adult who likes a little kid cartoon, either, although it’s also not as though I go to parties and introduce myself to people by comparing myself to Twilight Sparkle the nerd unicorn.

Moving on.  People were getting a pretty good laugh out of the ponies, and I liked that.  I like it when I can make other people laugh, especially when it’s over something small and silly.  I also don’t particularly mind making a fool of myself for a joke, so long as I’m sure people are going to laugh and not just silently wonder if I need to be institutionalized.

That Saturday evening, a little more than 24 hours before the project was due, it came to me:  it’s not enough to have two ponies.  If my bootcamp pals wanted ponies, then by all means, I would give them ponies.  I would give them so many ponies. 

Just as I had finished reading about session data and writing up some very basic code that switched the CSS the site used based on a session variable, my classmate Stephanie posted something on my Facebook wall.  She was at Plato’s Closet, which is a kind of resale clothes shop, and she had found a marvelously pink My Little Pony sweater, in my size, for $8:

pony sweater

Just as I was about to ask her to get it for me and I’d pay her back, she asked if I wanted her to get it for me and I could pay her back.  Of course I wanted it, because it was the perfect accompaniment for my plan to unleash so many ponies on my unsuspecting classmates.

I spent most of Sunday at Panera, eating an almost sickeningly sweet carrot cake muffin, drawing ponies and giggling to myself in the corner.  Late in the afternoon, I had a stylesheet that my eight-year-old self and her collection of My Little Ponies would have been immensely proud of.  I just still felt as though it was missing something

Only one of my classmates knew of my daring plan.  When I confessed on Facebook Messenger that I felt as though my utterly ridiculous style change was not ridiculous enough, this happened:

Him: My recommendation: have the ponies dance by tilting them left and right with 2 stunning frames of animation.
Me: …oh my god
Me:  You’re a genius.
Me:  That idea was too much for Visual Studio, apparently, because it’s crashed.
Him:  You should be able to do it with the same CSS animation tools I used for blinky text.
Me:  It’s perfect.
Me:  You don’t know why it’s perfect because you are not looking at the pony extravaganza right now, but trust me, it’s perfect.
Him:  I’m helping!
Me:  You’ve just saved Christmas.

It ended up being more a gentle rocking motion than the original vision of “two stunning frames of animation”, but that actually ended up as a good thing.  The effect is mesmerizing.  He also suggested making the cursor into a pony, which is surprisingly easy to do with CSS3.  I remember back in the day when loading up a horrible, hard-to-use custom cursor on your Geocities page required a ton of JavaScript, but now all you have to do is something like this in your stylesheet:
body {
cursor: url("Other_Images/ponycursor.png"), auto;
}

So I had a custom pony cursor, dancing ponies, a rainbow gradient header background, fluffy clouds for the body background, I had a very girly cursive font courtesy of Google Fonts… and the majority of my content was the same.  For all intents and purposes, I had taken a very boring, adult website and overloaded it with pink/purple/rainbow/ colors and so many ponies.

Stephanie brought my awesome new pony sweater to class on Monday morning, and I parted with $8.  I put the sweater on and waited until just before lunch to present my masterpiece.

I got my laptop plugged into the projected and started.  The site begins looking like this:

site with normal stylesheet (boring!)

I clicked through the pages, pretending like nothing was wrong and like I also wasn’t wearing a pink fuzzy pony sweater.  A couple people who had seen the site that Friday were disappointed that the ponies were removed.  Good.

The project page has all of my bootcamp projects laid out in little display boxes.  There is actually a box for the ponies, and, because I have the projects being sorted alphabetically on the back end, they ended up right next to box for the portfolio project.  So I could laugh it off, haha, yeah, I put the ponies on here for you guys, you can find the ponies on Github.  (You can, for the record, find the ponies on my Github.)  I clicked into the detail view for the portfolio project to show off the jQuery lightbox (Fancybox) I’d used to scroll through the screenshots for the project… I had included one of the second stylesheet.

Down at the bottom of the page, tucked under the copyright information in the footer, are three small icons.  Clicking an icon fires an AJAX post to the server that resets the session variable; when the post is successful, some jQuery takes care of scrolling back to the top of the page and refreshing the browser window.  Some Razor at the top of the layout partial view for the site loads the session variable and uses it to determine which stylesheet to apply, so clicking the second icon flips it from the above image to looking like this:

moderate pony stylesheet

There were some laughs, oh, I got them good, haha, the site is purple and there’s ponies!  I clicked through all the pages on this, too, just to show that it was the same site with a different stylesheet.

But wait.  There are three icons at the bottom of the page.

I toyed with my sweater a little.  The thing about being an adult who likes My Little Pony, I said, not quite looking at anything, is that you really have to own up to it.  It’s not just a casual thing, you kind of have to really go big or go home… so I decided to go big.

Are you ready for Super Bonkers Pony Mode?

Are you really ready for Super Bonkers Pony Mode?

Because here it is:

super bonkers pony mode

The ponies in the header sway gently back and forth.  Constantly.  The cursor is a tiny pony (unfortunately, Windows screenshots don’t pick up the cursor).  The only thing it doesn’t do is play the My Little Pony theme song, because I absolutely hate websites that auto-play music… but I’m kind of thinking that maybe it should do that.  I was also hoping to get some things to sparkle, but the jQuery plugin I found to make DOM elements sparkle didn’t work, and I ran out of time to futz with it.

The reaction to Super Bonkers Pony Mode was outstanding.  I wish I could have taken a photo.  There was so much laughter.  It was everything I had hoped it would be.

On my peer review form, under the question, “What could be improved?  How?”  someone wrote:

Nothing.  She won, it’s over.

…and that, ladies and gents, is the story of how I won my coding bootcamp by ponyrolling.  Please hire me, I’m funny.