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 2017
This challenge was hosted by `QHacks` in 2017 at [Queen's University](https://www.queensu.ca). 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](https://www.barcadia.ca), and couch surfing at my sister's - too good to pass up.
### Photos
I scoured QHacks' Facebook albums and found some photographs featuring yours truly 📷
- 2017
- [!Lights 1](https://www.facebook.com/QHacks/photos/a.1837069209904265/1837397609871425)
- [!Lights 2](https://www.facebook.com/QHacks/photos/a.1837069209904265/1837397446538108)
- [Exciting Talk](https://www.facebook.com/QHacks/photos/a.1837069209904265/1837219003222619)
- 2018
- [Opening Ceremony](https://www.facebook.com/QHacks/photos/a.2027908820820302/2027914850819699)
- [Team MERA](https://www.facebook.com/QHacks/photos/a.2027908820820302/2027914234153094)
- [Fake Candid](https://www.facebook.com/QHacks/photos/a.2027908820820302/2027913824153135)
<!--
Photos that have me in them, but I'm out of focus or of my back.
- <https://www.facebook.com/QHacks/photos/a.2027908820820302/2027909834153534>
- <https://www.facebook.com/QHacks/photos/a.2027908820820302/2027912214153296>
- <https://www.facebook.com/QHacks/photos/a.2027908820820302/2027913594153158>
- <https://www.facebook.com/QHacks/photos/a.2027908820820302/2027914204153097>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837219179889268>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837397456538107>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837398173204702>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837397606538092>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837398833204636>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837398419871344>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837398549871331>
- <https://www.facebook.com/QHacks/photos/a.1837069209904265/1837072193237300>
my left shoulder is in it
-->
## 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 the 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](https://youtu.be/uxKmDWDUZ5A)
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 (2010)](https://www.imdb.com/title/tt1285016/) 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](https://www.imdb.com/name/nm0251986/), and to this day I still listen to its [beautiful soundtrack](https://open.spotify.com/album/1ijkFiMeHopKkHyvQCWxUa?si=f7c60f7486c24fd9).
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
![[facebook.png]]
[Wayback Machine Link](https://web.archive.org/web/20170202211957/https://www.facebook.com/) - 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
![[sauce.png]]
> [!info]- View the HTML + CSS
> ```html
> <!doctype html>
> <html>
> <head>
> <style>
> * {
> margin: 0;
> }
> #left {
> float: left;
> width: 40%;
> }
> #right {
> float: right;
> width: 48%;
> }
> header {
> background-color: blue;
> color: white;
> width: 100%;
> height: 180px;
> }
> button {
> border: 2px solid darkblue;
> color: skyblue;
> }
> img {
> width: 40px;
> height: 40px;
> background-color: skyblue;
> }
> .fl {
> float: left;
> }
> .fr {
> float: right;
> }
> label {
> padding: 6px;
> }
> .forgot {
> color: skyblue;
> }
> .section {
> padding: 30px 10px;
> }
> .fn, .ln {
> width: 40%;
> }
> div input {
> width: 80%;
> }
> h1 {
> padding-top: 20px;
> padding-left: 40px;
> }
> select {
> width: 1;
> }
> </style>
> <title>Facebook - Log in or Sign Up</title>
> <link rel = 'icon' href = 'http://facebook.com/favicon.ico'>
> </head>
> <body>
> <header>
> <h1>facebook</h1>
> <!-- login stuff -->
> <div class = 'fr'>
> <label>
> Email or Phone
> <input type = 'text'>
> </label>
> <div>
> <label>
> Password
> <input type = 'password'>
> </label>
> <button>Log In</button>
> <a class = 'forgot' href = '#'>Forgot account?</a>
> </div>
> </div>
> </header>
> <div>
> <div id = 'left'>
> <h2>Connect with friends and the world around you with Facebook.</h2>
> <div class = 'section'>
> <img src = 'img1.png'>
> <p><b>See photos and updates</b> from friends in News Feed.</p>
> </div>
> <div class = 'section'>
> <img src = 'img2.png'>
> <p><b>Share what's new</b> in your life on your Timeline.</p>
> </div>
> <div class = 'section'>
> <img src = 'img3.png'>
> <p><b>Find more</b> of what you're looking for with Facebook Search.</p>
> </div>
> </div>
> <div id = 'right'>
> <h2>Sign Up</h2>
> <p>It's free and always will be.</p>
> <input class = 'fn' type = 'text' placeholder = 'First name'>
> <input class = 'fl ln' type = 'text' placeholder = 'Last name'>
> <input type = 'text' placeholder = 'Mobile number or email'>
> <input type = 'text' placeholder = 'Re-enter mobile number or email'>
> <input type = 'password' placeholder = 'New password'>
>
> <h3>Birthday</h3>
> <select class = 'fl'>
> <option>Month</option>
> <option>January</option>
> <option>February</option>
> <option>March</option>
> <option>April</option>
> </select>
> <select class = 'fl'>
> <option>Day</option>
> <option>1</option>
> <option>2</option>
> <option>3</option>
> <option>4</option>
> </select>
> <select class = 'fl'>
> <option>Year</option>
> <option>2017</option>
> <option>2016</option>
> <option>2015</option>
> <option>2014</option>
> </select>
> </div>
> </div>
> </body>
> </html>
## 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, <span style="background-color: rgb(60, 89, 152)">rgb(60, 89, 152)</span> and I used <span style="background-color: rgb(0, 0, 255)">rgb(0, 0, 255)</span>
- 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](https://www.w3schools.com/TAGS/att_input_type_date.asp) 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](https://www.google.com/finance/quote/MSFT:NASDAQ) `Feb 1, 2019 at 10am` during my third consecutive QHacks attendance
- I still have the email I sent almost exactly 5 years ago!
- It's definitely cleaner without the `the`, thanks JT 😇
January 22, 2022