The Big Green Ball Analogy

Over the years I’ve had to explain what I do to a lot of people. More often than not, I’ll have to explain some basic concepts of the languages that I use as well. The web design and development industry is a pretty popular one, and like most tech centered jobs i deal with a lot of jargon and buzz words, and their misuses. Luckily, I ran into a pretty effective analogy in my early days that’s stuck with me as I try to explain to glazed over eyes what the differences are between HTML, CSS, And JavaScript, and how basic web pages are formed.

The big green ball bounces when I drop it.
That sentence may sound completely random, and it is, but it’s also a pretty accurate analogy of how basic web languages work together to create even the most complicated of sites. like in the english language, each part of this sentence can be defined individually.

The Ball

To Mrs. Jeppson, my 7th grade English teacher, the ball would be a noun. Here we could call it HTML. HyperText Markup Language was created as a skeleton for websites; a way to organize the textual content. This of what a website would have looked like in 1993. It would be similar to a very blank magazine article. Images could be included between the paragraphs of text (sometimes bolder or italicized). No background images, textures, or even colored letters. The ball just exists, without any description at all. Every website would look the same, aside from the actual content.

It is Big and Green

In the mid 90′s, early tech adopters grew tired of unstyled text documents, and grew hungry for change. Along comes CSS. Cascading style sheets allow for adjectives to be applied to our ball. We can make our text bigger, add color to backgrounds, position HTML elements where we want them on the page, the possibilities are virtually endless now!!

By doing nothing more than changing a few lines of CSS, a website can go from a big green ball to a small, slimy, polka dotted sphere. For examples of how drastically a new style sheet can change a website, check out CSS Zen Gardens.

It Bounces, but only when I drop it

Websites of the 90′s were great. You could put your content out there just like anyone else, but eventually a question came up in everyone’s minds: What can this website actually DO?? Well, nothing really. Once you loaded the page, the content was loaded and that was it. You could click on hyper links to take you to another page, but nothing exciting.

We want our ball to do something exciting. We want it to hit the pavement and ricochet with as much gravity defying force as possible. JavaScript introduces verbs to our sentence. JavaScript fades things in and out, it animates elements, it updates content without refreshing the page, anfd retrieves twitter feeds, and spins and jumps and plays!!

( side note: around the time JavaScript became popular another language, java, was also pretty popular. Although they sound similar, java and JavaScript are nothing alike. They are about as similar as a car and carpet. )

Only, we have to play with it first. JavaScript can only make our ball bound when we drop it. An event occurred and triggered our JavaScript’s reaction. The same thing happens on websites. The lightbox image only popped up when I clicked on the thumbnail. The background only changed when I scrolled down far enough. The form autocompleted when I hit tab. Every JavaScript action requires an event to trigger it. There are TONS of events in the World Wide Web. Even just loading the page is considered an event, and will often trigger automatic JavaScript actions.

The Big Green Ball Bounces when I drop it.

If you didn’t understand the basic concept of what these three languages were, or how they fit together, you do now. HTML structures our content, which is then styled by CSS while JavaScript allows us to interact with it.

  1. Daniel Rippstein
    Oct 31, 2013
    Lovely analogy. I'll definitely try to remember this whenever I have to explain what these languages are. Translating 'geek' to 'normal people speak' is something I always want to be ready for.
    Reply