Beautiful Eggert

Solving a very simple but long withstanding issue with UCLA CS course specs

The Problem

Have you ever been incredibly frustrated by something and wished someone would do something about it every time you encountered it? Well one of these things for me (and as I would soon realize for the rest of the CS students at UCLA as well) was the course specs for CS courses at UCLA. They are, for some reason made as plain HTML files which are a pain to read on any regular sized device since there’s no formatting or CSS at all. People have a hard enough time understanding the problem involved and figuring out a solution to it, that there’s absolutely no need to have a huge cognitive load reading the prompt itself. Yet, for over a couple decades, the course specs had remained the same plain HTML and no one had done anything to fix them.

A screenshot of CS Specs as they appeared before Beautiful Eggert

Solving it for myself

I was sitting with a a friend one day doing a project for CS35L that I could not understand anything about. In my frustration, I went into the web console and changed the font family, color, line-height, background and container width for the page and I was amazed at how much of a visual difference it made, and how less of an effort it required for me to read the spec.

body {
background: #f3f3f3;
width: 80%;
margin: auto;
max-width: 800px;
font-family: Baskerville;
line-height: 1.5;

I realized it was pretty useful and made it into a CSS file so I could just insert it into the HTML whenever I did any more of the projects. I called it beautify-eggert.css since the professor who led that class was Professor Eggert and it was while reading his specs that I made this CSS file.

The same page after Beautiful Eggert: cleaner, and easier to read

My friend loved it too and I shared it with him so we could use it later and I used it for the rest of my projects as well. But then CS35L ended and I was not taking any more CS classes the following quarter so I forgot about the script.

Realizing that this was a universal (or UCLA CS wide) problem

About a week ago, my friend messaged me and said he couldn’t find the CSS file on my website. I sent him the updated link and he probably used it for his CS 130 class to lessen the headache as well. It was then that I realized that if it’s still a problem for him, it’s probably a problem for more students as well.

Solving it for everyone

I thought I should post the CSS file on the CS group so everyone could embed it when they read the specs. But I realized that it would still lead to an unnecessary 2–3 minutes of work before they can start working on the project every time they open a new spec. So solving one issue would only lead to another. I thought I should make a Chrome Extension for it but had never made one and thought it would be a lot of work. I still started making one and it only took 15 minutes to make it and another 5 to put it up on the Google Chrome Store.

Beautiful Eggert can now be downloaded from the Google Chrome Store

I posted it on the CS Page as a simple plugin that you just need to install and it automatically beautifies the CS course pages without you having to do anything. It is as if the problem never existed and everyone sees the beautiful version with CSS instead. It received an amazing response on the page and out of the 180 people who saw the post, 150 downloaded it and are using it.

Conclusion and Lesson

Was this a problem? Yes. Was this hard to make and implement? No? So why had this not been solved before? Because everyone wanted “someone to solve it”.

“So the next time you face a problem that frustrates you so much, you wish someone solved it for you, solve it yourself and solve it for everyone who has that problem because it’s probably not gonna be that hard.”

This also gave me the idea to actually implement all the redesigns I do in the future. So instead of just redesigning in Photoshop/Sketch, I can actually make the redesigns work for people who like it and myself. Just a simple chrome plugin that changes the CSS file of the url’s associated with the product website and I’m good to go. What’s next? A Piazza Redesign! A LinkedIn Facelift! Who knows.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.