A fun toy with a fun solution
We featured the Met Gala in 2017 on AOL, which is an event where fashion designers feature their latest dress designs on prominent figures.
Using a bracketing system, we let users choose who was the best dressed, narrowing down their options one by one until they found their top choice.
The bulk of the work was in creating the bracket system.
My implementation took in 16 selections, removing the unselected choices for every round, until there was only one remaining dress.
The user’s selections were recorded and then appended to the URL, which navigated the user to a page showing them all their selections. They could then share their result through a few social channels or by just copying the link.
Executing the bracket system in the way I implemented it meant I needed to precisely manipulate arrays. Initially, I wanted to write this system server-side, so that the user wasn’t forced to wait for the JavaScript on the page to load before seeing their results.
However, the server-side language used in our site framework was Twig, which is a PHP-based language specifically made for templating. The only functions available to me to manipulate arrays were merge(), which merges two arrays into one array, and slice(), which extracts a sequence of a sequence, mapping, or string.
Functions like push(), pop(), or splice(), available in other languages, were not available in Twig, making array manipulation frustrating to deal with.
It ended up taking more time executing the back-end implementation than it would have taken me by simply writing this on the client-side in JavaScript, so with a deadline looming, I scrapped my Twig code and rewrote the implementation in JavaScript. Realizing the load time was minimal and the user needed JavaScript to do the bracket anyways, this was the best choice for the time I had available to me.
This is the JavaScript currently in use on the Met Gala page. See the full file with syntax highlighting on GitHub.
While I did not have the time to think too far outside the scope of this project, even so, the way I wrote this system has significant limitations. Firstly, my implementation requires the total number of choices in the bracket to be a power of 2.
Other bracketing systems can include any number of people included in all sorts of ways, so looking through and seeing how similar bracketing systems worked with numbers that weren’t a power of 2 would have made this much more extensible and reusable.
Secondly, it still does use JavaScript on the front-end for the results page, which is not ideal for my two-page implementation.
Better ways to do it would be to either make the whole page be a small single-page app and be all on the front-end, or to still use Twig and take two slices of that array—around each choice that was passed over—and merge those two arrays during the loop of each “round.” That way, my solution is either all on the front end or all on the back end.
Giving sufficient time estimates is key in making sure you can make something the right way the first time. And, if your first solution doesn’t work the way you expect it to, there are always other methods you can try. However, I was able to reuse this solution for the 2018 Met Gala by simply swapping out the names and images.