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