Quizbowl Website (Winter 2020 - Spring 2023)

When I became the webmaster of quizbowl, the club website looked like this:

The old website was okay, but it was relatively bare. There was only one page on the site, and it did not contain much information beyond the basics. In addition, most of the material had not been updated in years.

First, I thought about what the website was unable to provide. I came up with the following list of what the website needed, in order of priority:

1. Better landing page: The original website didn't draw the eye in the way that I wanted it to. My vision was a website that tried to sell you on quizbowl right from the get go. I also thought that more important information should be hitting the user right at load time: for example, I thought it was silly that you learn the names of the officers but not how to contact the club.
2. A more thorough explanation of quizbowl: The quizbowl explanation on the website was okay, but it only gave the most basic facts about the activity. If you wanted to learn more, there was nowhere to go for that information. Since quizbowl is still a relatively unknown activity, that was a problem.
3. Better club records: At the bottom of the old site, there was a link to archived tournament results. This archive had not been updated in a long time. As a "stretch goal", I wanted the site to have a more detailed archive that really gave you a better sense of the club's past.

But before I could do any of that, I had to figure out how to SSH into the student server. The quizbowl website is hosted on vergil, an Apache server for UW students. The old webmaster had long since graduated the university, so I had to figure out most of the hosting logistics myself.

After a long saga that involved tracking down long-forgotten credentials and downloading many an SSH app, I was finally able to get access to the backend of the site. The interface was simple, but it was pretty clunky and hard to use. I could see why no one had updated the website in a long time...

While I had issues with the original website, I initially wanted to keep it as a single-page application. Many websites are far too complicated, and I thought it would be best if I kept it short and sweet. I planned to keep the original section layout of the site the same with only a few changes to the design. You'll notice that I kept many of the original elements, as well as the color palette of the background; in other words, I wasn't just rebuilding the site from the ground up!

That being said, there were still certainly some changes I wanted to see. I used flexbox to create a banner for the website and to render some YouTube explainer videos that I put on the page. I also added some changes to make sure that the site was compatible with mobile browsing.

You can see what is roughly the finished design below:

The changes weren't dramatic, but I liked how they came out. The website (and therefore the club) felt more accessible after the redesign. That big old low-res picture was gone, replaced by elements that delivered a much cleaner landing experience. And you could now instantly watch videos explaining what quizbowl when visiting the site, satisfying what I considered to be the primary use case. This was enough to satisfy my needs as president at the time, so I considered the website redesign to be sufficient. The website stayed unchanged in this form for about a year.

In 2022, I took a class on fullstack web development. There were many independently-directed personal projects assigned with the class, which inspired me to bring back a project that I started in high school. In high school I was friends with an aspiring web developer, and he asked me if I could help him make a web app called the "Short Generator" that would generate a random short work of literature to read for quizbowl. I assembled a somewhat lengthy CSV file of short literature, complete with quizbowl metrics and links to the works in question. Unfortunately, that app never materialized.

Now that I had some JavaScript knowledge under my belt, I figured I could apply my new knowledge about HTML style to the site, and then I could go about implementing my "Short Generator". My big realization here was that you cannot manipulate a file on the client side through conventional methods. If I wanted my web app to work, I was going to have to set up some external location from where I could retrieve my data.

The file seemed too small to warrant a website, so I mounted it on an external website hosted through Netlify. You can download the file here. I then used a fetch request to pull down the data from the website. The fetch request was chained into a function that pulls a random entry from the table based on the frequency that the entry occurs in quizbowl.

After that, I used some client-side JavaScript to render what I wanted. I pulled down the row of data as an array, and then I used JavaScript to insert them into the HTML (using the old methods, like .getElementById() functions). I also used some CSS to style the page elements on click. This allowed user to get information about the work directly on the page. (You can still try out this feature by selecting "What Should I Read" on the website.)

One challenge that I ran into was weird caching of the CSS and JavaScript files on the Apache server. After a site update, the new HTML would render immediately, but the new CSS and JavaScript wouldn't show up until some sort of refresh occured. To solve this problem, I decided to change the name of the files every time I reuploaded them (v2, v3, etc.): an imperfect solution, but it got the job done!

After my brief JavaScript adventure, I became dissatisfied with my explanation of quizbowl. The website referred to external explanations of quizbowl here and here. While I thought these explanation were okay, they were still missing a little something. They focused too much on the "what" of quizbowl and not the "why". I wanted to create my own "What Is Quizbowl?" guide that built things up from first principles: one that spent less time on the granular details of quizbowl and more time on how we got here.

After consulting with the Partnership for Academic Competition Excellence, I created a guide that used the now deprecated 30-20-10 model from old quizbowl and the pyramidal article model from journalism to illustrate why quizbowl exists in its current form. I supplemented this with a "How to Write Questions" guide later on, which covered similar ground.

Since I now had several distinct pages on the website, I decided to refactor the landing page and add a navbar. The Meet the Officers section was moved to its own page, as were Resources and Past Results. Once a topic was moved to its own page, I fleshed it out further to make the site feel more full. The Resources page got one of the more dramatic overhauls, expanding from a short bulleted list to a well-organized clickable table of contents. The wide scope of the outbound links made it one of the best "Quick Links" quizbowl pages on the Internet (shown below).

Past Results also got a dramatic overhaul, turning into a comprehensive history of the club. There are detailed stats pages for every event that the club has ever attended, as well as a brief overview of every club season. At first, the page just chronicled the events of my tenure, but it now even covers events from the distant past. This culminated in a live interview with a "College Bowl" competitor from the 1960s, which you can find information about on the site.

My final fluorish for the website was a rehash of the landing page, which I felt was no longer taking full advantage of what the website had to offer. Most importantly, I felt that the website was overly oriented towards potential new members. It was easy for new people to quickly get the information they wanted, but it was difficult for existing members to see what the site had to offer.

To that end, I introduced a brand new Quick Links page. I had just recently been learning about some reactive CSS techniques for my other projects, and I decided that it would be fun to employ some here. I added a function where the buttons fill up with color on hover (you can try this out at the top of the page).

I also replaced the hardcoded schedule of events with an embedded Google Calendar. This was a long-overdue change, and it was unrealistic for the website to be updated as often as needed, even with a webmaster as active as myself at the helm. I had hoped that this could be synced with Discord Events on our server, but Discord Events was a new feature that had not yet been integrated with Google Calendar. This will be a problem for a future webmaster to solve!

Around this time, I was able to hand over control to a new webmaster: a fellow UW student named Anirudh Kumar. It is my hope that this website will continue to be maintained by the community well into the future!

In the end, I feel glad that I was able to leave the quizbowl website better than how I found it. Web development is so concrete and rewarding, especially in a community context. I am happy that I was able to create something that betters the world in some small way.

And I really am grateful towards this site for being a constant source of learning. This has been my pet project ever since I started learning web development in college. Whenever I learned something new, this site was the first place I would try to apply it. I skipped over this earlier, but I even converted the website into a full-fledged React app for a brief time. (This was very difficult and overkill for this particular project, but I learned a lot from it!)

Learning how to integrate modern techniques with UW's ancient web technology helped me put technological advancements into context. It helped me realize that I really do enjoy the more mundane aspects of web development, like naming pages and putting everything together in a readable format. I really put a lot of love into this website, and I hope that it shows!

Towards the end of my tenure as webmaster, I managed to find a successor: a fellow UW student named Anirudh Kumar. It is my hope that this website will continue to be passed down for years to come!

—K, August 2023