At one of my first hackathons, I participated in a challenge called !lights. The goal was to recreate a webpage in a limited amount of time, using only a text editor, and having to drink a shot of hot sauce. For just a moment, life felt like a movie; things were getting a little heated :fire:

QHacks

This challenge was hosted by QHacks in 2017 at Queen’s University. Attending this hackathon and visiting my sister(s) on my birthday :aquarius: weekend became a tradition over the next couple years. Taking the sponsored bus or making the two hour drive myself from Ottawa down to Kingston to get my hack on, game & drink at barcadia, and couchsurfing at my sister’s - too good to pass up.

I scoured QHacks’ Facebook albums and found some photographs featuring yours truly :camera:

The Challenge

For the uninitiated, the ! symbol is a unary operator in many programming languages called the logical NOT operator. It is used to reverse the logical state of its operand. If a condition is true, then Logical NOT operator will make it false, and vice versa. All of this is to say that, the !Lights means no lights, since participants couldn’t check what the website would render to while writing it. Apologies to all you programmers that didn’t need my long-winded explanation :pensive:

In hacker culture, the exclamation mark is called “bang”, “shriek”, or, in the British slang known as Commonwealth Hackish, “pling”.

I didn’t know about this challenge beforehand, so I had no chance to get in any kind practice. Luckily, I was fairly comfortable with HTML and CSS at the time.

The Social Network - Hacking & Drinking Scene I don’t remember if I connected the dots at the time… but this is was definitely based off the scene above. If you haven’t seen The Social Network what are you doing! This is one of my favourite movies, the hacking scenes in it hype me up, I’m a big fan of Jesse Eisenberg, and to this day I still listen to its beautiful soundtrack.

Thanks Wayback Machine for backing up the Internet! Truly doing God’s work :pray: Here’s what Facebook’s registration page looked like in February 2017 Facebook Registration Page in 2017 Wayback Machine Link - took me a little while to find the English version :satisfied:

Results

So ya, this is what facebook.com could have looked like… if I was the only developer working in these horrible conditions

My Recreation Sauced Remake - If you want to open the actual HTML file

Chamber of Reflection

How I would modify my approach

  • Images don’t work, replace them with a CSS gradient, emoji, or ASCII art
  • Match the colours better, rgb(60, 89, 152) and I used rgb(0, 0, 255)
  • Include all content first, then work on styling
  • Use a more similar font, sans-serif at least

Aside

The birthday input being made of dropdowns allows people to say they were born on February 30, which is probably handled after clicking the Create Account button, but it’s funny the input even allows for invalid values. HTML5 has a date input type that could have been used to avoid this possibility…

Fun facts

  • My Mom and both of my sisters, @heathermaxwelll and @jenn_maxwell, went to Queen’s
  • I had my phone interview with $MSFT Feb 1, 2019 at 10am
  • I still have the email I sent almost exactly 5 years ago!
  • It definitely cleaner with the the, thanks JT :innocent: