The DOM as a… dinosaur?

July 17, 2013


When I was last at UC Berkeley, I found this dinosaur skeleton in a science building and tried to capture it in one photo. As you can see, it’s a large model and I had to splice two pictures together. In person, it’s even more impressive. And it got me wondering: who had the job of assembling this huge thing and how did they go about it?

I pictured all the bones arriving in boxes or crates. And I sure hope a good instruction manual came with them. I imagined that manual (like most assembly manuals) would probably identify the pieces with some kind of anatomical naming convention, or at the very least, by number. And the assemblers would interpret those diagrams and instructions, fetching each piece from the create one by one, placing it in position.

So how does this relate to web design and how web pages and browsers work?

I’ve often been called upon to explain the DOM (Document Object Model) that is the basis of web pages, and I always point back to my Berkeley dinosaur friend for a great analogy because it can be used to explain the DOM, HTML, CSS, and (to a lesser extent) why jQuery is lauded for its simplicity.

The HTML document is the assembly manual, and the DOM is the resulting model. The web browser reads the HTML to understand the structure it needs to create. It forms a sort of memory-picture or “mental model.” Then it fetches the pieces required one by one (from the web server) and assembles the actual web page (that you experience) based on that model. This model is the DOM, and it is a living model that can be changed once initially assembled. If you change the DOM, the web page also changes to reflect the new model. It’s kind of like the bones with skin over the top. While the DOM is behind the scenes, it’s providing the structure for everything you actually see and experience. Change the bones, and the skin/body itself will reflectively change to the person experiencing it on the outside.

But is structure all the DOM deals with? Not quite.

Let’s return to the dinosaur model again. Once assembled, if you wanted to paint just one bone, to treat it differently from the others, you’d need to know how to identify it for the painting crew.  It would be important, for efficient painting and styling, if the painters understood the identification convention used for dinosaur bones. You’d give the painter the number or anatomical name for the bone you wished to tint and then specify the color.

For web pages, this is the job of Cascading Style Sheets. CSS provides this way of identifying and selecting elements in the model to which you want to apply a visual style or effect. Selector syntax is crucial for identifying the parts of the DOM to which styles should be applied, which will treat the appearance of each targeted element in the web page as specified. This is why mastering CSS rules and selector syntax is a major part of web design.

And finally, if, like in A Night at the Museum, you wanted to make your dinosaur skeleton dance around the room, you’d need a way to select specific bones and describe how to move them in a pre-planned way. That’s the beauty and simplicity of why people like jQuery. It uses the same CSS selector syntax for selecting elements, to target them for specific actions instead of visual styles.

Modern web browsers do all this interpretation, assembly, and styling every time you load a web page, and they do it relatively quickly given how many structural, style, and action details are contained in the average page. But the reality is that the browser, like the dinosaur assembly crew, is simply following the assembly manual instructions. Ever tried to cook something from a bad recipe? Carelessly written instructions will produce unreliable results, which is why web development is a profession. Because even through the browser is interpreting the HTML and applying the CSS, make no bones about it, it’s still the people behind the scenes writing the script and puling the strings.

I hope you enjoyed this explanation and remember it the next time you admire any model, be it prehistoric or modern.


Copyright explained with puppets (by YouTube’s lawyers)

July 10, 2013

While Copyright law isn’t technology itself, if affects plenty of things dealing with technology. So I couldn’t help but re-post this clever video created by YouTube that explains copyright basics with….puppets!

Well done, YouTube!

APIs explained via a game show

November 12, 2012

Since I’m fond of analogies and metaphors for explanations, here’s the first thing I tell my learner to do when explaining to him/her what an API (Application Programming Interface) is. Watch the first half of this clip from the old game show Who Wants to be a Millionaire, where the contestant uses his “Phone a Friend” lifeline:

What’s “Phone a Friend?” When the contestant gets stuck, he/she can make a single phone call to any friend and ask the question at hand, hoping the friend’s response will be the correct answer (or help lead to the correct answer). Provided the call is made correctly, the question is asked correctly, and the friend is the right person to answer such a question, the response will greatly help the contestant/caller to do something he/she otherwise could not do alone. With that in mind….

What’s an API? It’s when computer code (or an entire program) makes a call to something else to do something it could not otherwise do alone, allowing it to be greater than it is by itself. The call must be made correctly, according to the rules the API specifies, so that the caller can ask correctly and the recipient can understand the request and respond appropriately. And unlike the game show contestants, computer programs aren’t limited to talking with just one API. Programmers/developers often leverage multiple existing APIs to accomplish greater holistic functionality rather than taking the time to develop all the desired functionality themselves. The chances are, most programs you use have been designed to tap some existing API to achieve some part of its functionality.

So, do computer programs do this a lot? You bet. Programs aren’t superheros*; they often just have a lot of friends to call.

* I’ll make an exception for Tron.

Variables vs. Arrays vs. Objects

August 16, 2012

Having recently worked with a couple of groups developing games, I’ve found myself explaining nuances of programming concepts. Here’s one such topic I find I must cover with new developers: when to use a variable vs. an array vs. an object. I whipped up this quick video to explain the difference, and since summer picnic season is upon us, I leveraged some related food and props appropriately…

Stay hungry, my programmers!

Gamification Value: a Practical Use of Immediate Feedback

July 18, 2012

Gamification is currently all the rage, but it seems there’s a lot of use of this term with little understanding of application. Sure, there are plenty of people “gamifying” things right now and even more non-practitioners talking theory and principles. But many skeptics just don’t see the value, promise, or purpose of gamification. Truth be told, I agree with the purists about much of the hype and misuse of gamification. But I also believe there is some value where gamification is being used to cause positive behavioral change. So if you’re trying to decide if gamification is good or bad, or just need an example to help make sense of it, consider the following thoughts.

First, if you’re a newcomer to the gamification discussion,  here’s what most people mean by Gamification: applying certain principles of games — competition and recognition (usually via leaderboards), the challenge of mission and mastery, collecting things (like badges or points), and so forth — to something that is not a game. You might be asking, “Why would anyone want to try to add those elements to something that isn’t actually a game?” There are many answers depending on who you talk with, ranging from “just because we can and it’s the thing to do right now” to “it’d be really fun” to “it will attract more attention to our company/product” to “because we could help people change their behavior in a way that feels less like work.” And based on motive, the value proposition in each of those answers may very well be subjective. The proponents of each answer would likely tell you that their reason is the right one. But for the sake of this discussion, I’d like to hone in on the last one — behavioral change — because I personally believe it to hold the greatest value. It is possible to make changing their behavior easier for people by making it feel more fun or engaging, akin to “normal” games?

Have you noticed it’s hard to get people to do things that don’t have immediate consequences: buying life insurance, saving for retirement or other long-term financial needs, exercising healthy habits, and so forth? That’s because humans tend to react better to immediate feedback. We seem to value near-term events more than longer-term threats. We often postpone or ignore decisions when the impact isn’t immediately apparent, especially when dealing with the long-term isn’t pleasant.

On the other hand, game playing is something that is perceived as fun and provides much more immediate feedback. With most video games, when the player makes a decision, it has an effect in their game play anywhere from instantaneously to within seconds, minutes at the most. Even games designed to be played over long periods of time will yield results of decisions between hours and days at most, (because otherwise, no one would keep playing.)

And therein lies the promise of using gaming principles to influence real-life things. Game players are used to adjusting their playing behavior based on the near-term feedback. They make mistakes constantly, they learn, they adjust, and they eventually master new skills (or refine existing ones) in order to succeed at the game. So what if those motivations and techniques could be safely applied to real-world problems?

Here’s an example problem that occurs all too frequently where I live: drivers don’t leave enough stopping distance between their vehicle and the one in front, especially in inclement weather. Why? Well, I’d guess that they’re used to being able to stop just fine when road conditions are good. Further, since the threat of “you might have an accident someday if you don’t leave enough stopping distance” isn’t very immediate or apparent, the need to allocate safe stopping distance is kind of like the need to prepare for any of the other future scenarios I mentioned before. We just don’t see the need to respond — to alter our behavior — so we don’t.

So, if someone sought to solve the long-term issue with near-term thinking, they might consider gamifying the problem. Just for example’s sake, here’s one way it might look if a bunch of the commonly leveraged gamification devices were thrown together:

A depiction of an in-vehicle game designed to teach better stopping behavior

Imagine if a car’s dashboard had a gauge that indicated how well the driver stopped? This gauge might display a range from “too early” to “too late.” If points were awarded each time a good stop was performed, and if other awards – like virtual badges or trophies – were awarded when certain point thresholds were reached, it’s possible drivers might begin to adapt their actual daily driving behavior to the tolerances required by the game just in order to succeed at the game. The result? If the driving techniques actually became unconscious habits, when roads were slick, those drivers might actually perform their stops more safely.

Notice I used the word “might,” because most gamified things don’t always succeed in enticing everyone. Many people find low intrinsic value in many of the commonly used game engagement tactics. (I’ve previously read that only 21% are motivated by game mechanics.) Some people are clearly not so interested in being at the top of a virtual scoreboard just for bragging rights. Others are not significantly enthused about collecting virtual trinkets or being told they achieved or “unlocked” something that doesn’t really exist. But these techniques apparently do entice a large enough number of people — even 21% is a sizable percentage — and that’s why there is significant interest in gamifying things right now. And while much gamification is being pursued simply to make some inane things “fun” or “attractive” or “memorable” and more yet “just because,” it’s my hope that we’ll eventually see gamification done well enough to create performance changes where they might otherwise be difficult or boring via traditional methods.

Got your own idea for a practical application of gamification that might change real behavior? Drop your comment below.

Backspace x 10000: a true story about the value of highlighting & modifying

July 3, 2012

The following sounds like it belongs in the annals of computing lore along with other Tales of Tech Urban Legends like the infamous “cupholder” CD-ROM drive incident. But I swear I am not making this up.

Years ago a trustworthy colleague told me the true story of one coworker who seemed to take forever meeting deadlines when they involved composing and editing documents in a word processing program. Upon investigation, it was discovered that anytime the coworker found a mistake in a document, she would Backspace, Backspace, Backspace, Backspace, Backspace, Backspace, Backspace, Backspace, Backspace, Backspace over every single letter in the document until she had erased all words up to the typo. She would then begin re-typing the remainder of the document, additional errors would inevitably ensue, and she would again resort to backspacing over all her work. If only she had known the core computing concepts — highlighting and modifying — at her disposal. Just a small bit of knowledge explained the right way would have saved her much time, carpal tunnel surgery, and a lot of new Backspace keys.

I’ve never forgotten that story. It became the genesis for one of the first prop-based analogies I conceived to explain the concept of soft text when writing The Ultimate PC Primer. Here’s the introductory lesson in video form, something I whipped up to commemorate the book’s anniversary and the memory of that funny story that started it all:

How the Internet Works (video)

June 11, 2012

I stumbled across this short and cleverly done video about how a Web page is transferred across the Internet. I applaud the use of the tourist analogy to explain how packets make their way from source to destination.