Facebook Homepage !Lights Challenge

[GitHub Repository](https://github.com/mic-max/sauce) [Live Demo](https://mic-max.github.io/sauce/) ![[sauce.png]] 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)  ## 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 ## 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, [[Heather Barr]] and [[Jennifer 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