Hipster Logo shortcode

Project Description

Wordpress is not fun to work with. The more plugins you add, the more your website becomes Frankenstein's monster. All it takes is one plugin to crash your whole site. But Wordpress is a great CMS, so we decided to use it for a few of our sites. Because all our other applications use Google App Engine, we decided to host Wordpress within a Google App Engine application. Turns out that this comes with a whole host of issues. Our entire dev team had to modify the PHP build and the plugins we used to even get it to work. I, along with the rest of the team, were feeling burned out. "Joy in the work" is one of the core values of the Carnegie Foundation. For one afternoon in May, I found joy in the work by writing a shortcode that could generate a hipster logo in posts and pages.

Apparently, other developers had a similar idea to mine. I was able to find a full CSS implementation of the hipster logo. All I needed to do was copy it into a shortcode in our Wordpress instance. I added it to one of custom plugins. If one ever wanted to use it in a post or page, all they had to do was type

[hipster_logo left='R' top='<span class="fa fa-coffee fa-fw">'
    right='G' bottom='<span class="fa fa-laptop fa-fw">']

You can use letters as well as FontAwesome or Glyphicon icons.

Backend

Because this was a Wordpress shortcode, it was written in PHP.

Frontend

A somewhat complex implementation of HTML and CSS.

Design Decisions

The ubiquitous hipster logo will always be the X with letters or icons around it.