!Lights Challenge
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
QHacks
This challenge was hosted by QHacks
in 2017 at Queen’s University.
Attending this hackathon and visiting my sister(s) on my birthday 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
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
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
Here’s what Facebook’s registration page looked like in February 2017
Wayback Machine Link - took me a little while to find the English version
Results
So ya, this is what facebook.com
could have looked like… if I was the only developer working in these horrible conditions
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