Inspiration
It's yuuge! Hack&Roll 2017 falls on the same day that Donald Trump was sworn in as the 45th President of the United States, making it a significant event for not just the USA, but the rest of the world.
To mark the occasion, we decided that there is no better way to do that than to all dress up as The Donald. Well, we can't afford to all buy a suit and get a perfect golden crown like his, so doing it on Facebook would do!
What it does
Trumpify turns all your friends (and frenemies as well) into The Donald. It replaces all their profile pictures with awesome portraits of Mr. Trump, and also any text they type with his hallmark words like yuuge and bigly. As an added bonus, we perform face recognition to insert his famous golden crown onto your friends' photos, and also we fetch his latest tweets for you to post on your Facebook timeline.
Try installing it here, or install it on your unsuspecting friend's computer!
How we built it
We built it as a Chrome extension, which means that all work was done with client-side JavaScript, using a mix of vanilla JS and jQuery. We made use of a jQuery face detection plugin to detect faces, and then used CSS to position hair nicely onto your friends' faces.
Replacement of images and text is only performed on first load, as well as when new nodes are added to the DOM, in order for the plugin to be as performant as possible. Unfortunately, the face detection procedure is rather CPU and memory intensive, which when enabled, would cause the plugin's performance to take a significant hit.
We also built a nice popup window for the extension, allowing users to turn on and off the extension (or any part of it) at any time, using HTML/CSS.
Lastly, by making use of HTML5/Chrome APIs such as localStorage, we persist user preferences locally across sessions, and also detect tab/location changes to change icon and popup window states.
Challenges we ran into
One problem we faced was reverse engineering Facebook's HTML page structure. Because it consisted of many moving components, and class names were not considered constant (because of minification), targeting profile pictures was rather tedious. We had to declare over 20 selectors to identify most of the profile picture images on Facebook, and explored different convoluted methods of hooking onto DOM updates (because of infinite scroll/websocket real-time updates).
Another problem was that since Facebook runs on React, triggering events proved to be impossible in this short time period. We resorted to hacks which weren't cool, and ultimately couldn't hook onto the form event or submitting the form on Facebook.
Lastly, we spent quite long on trying to position the hair onto detected faces with CSS absolute positioning, where they would result in being spot on in some cases, but yet off-position in some cases.
Accomplishments that we're proud of
We're proud of being able to complete a rather polished product at the end of 24 hours! Furthermore, it was the first time we actually tried working on a browser extension, so it was all new to all of us.
Finally, we're proud to be able to work on something we really found fun and joy in working on these past 24 hours.
What we learned
Firstly, that you shouldn't try and reverse engineer Facebook in a short span of time.
Secondly, that stupid ideas are sometimes worth doing, just for learning or for fun's sake.
What's next for Trumpify
Well, no one knows what's next for Trump either, right? Let's wait and see :)
Log in or sign up for Devpost to join the conversation.