Why Streaming Video Makes You Wait

January 28, 2016

Have you ever wondered why this spinning icon Throbber shows up whenever you try to play an online video or skip forward in it? This video explains what’s happening and why:

 


LMFAO parody to explain jQuery?

January 7, 2015

As a colleague and I were providing some introductory web development training, one of our pupils asked some questions about how web content works that isn’t static, changing state either by positional movement or by appearing/disappearing. The web pages in question used jQuery, and it was during our explanation of some basic jQuery concepts that I found myself saying something that sounded a little too much like LMFAO’s “Sexy and I Know It.”  Parodies of that song abound, so I thought, “Why not a parody to explain jQuery?” And this emerged shortly afterward: Read the rest of this entry »


Heartbleed explained with metaphors

April 13, 2014

Heartbleed. To most of us, it’s that mysterious annoyance that has caused us to change passwords for many of our on-line accounts. But can Heartbleed be explained in a way it’s not seen as a fatal hole in the “magic” of the Internet?

While many sites have explained Heartbleed’s literal failures through code and even comic, I felt an explanation with some everyday analogies and metaphors was still lacking…. until I stumbled across Eric Limer’s article on Heartbleed over at Gizmodo. Not only has Eric saved me the time of crafting an explanation, he’s done an admirable job of making the magic of computer code and internet communication simple through his real-world examples.

First, Eric explains how Heartbleed derives it’s name — from “heartbeat,” a standard operation that two computers must use to make sure they’re talking to each other in sync. Since a personal computer and an Web server are disconnected until they have a reason to talk to each other (over the Internet), they must have some way to check to make sure they both stay connected to each other during their conversation. Like calling your bank via telephone, you don’t want to have your phone call disconnected until your business transaction is finished. This “heartbeat” operation is a way to ensure nothing has gone wrong at either end during the computers’ conversation. Eric uses a clever reference to old audio cassette tapes to illustrate this:

It’s like making sure that both spindles in a cassette tape are moving when you’re playing it. If one spindle stops and the other keeps going, something will break.

Heartbleed was named as such because the recently uncovered flaw is in this “heartbeat” operation, or more specifically, the coded instructions for the “heartbeat” procedure that the Web server follows. As I’ve explained in my book, computers don’t have common sense. They follow only the instructions provided (in the form of code), literally. Like a robot/zombie chef, they follow the recipe exactly as written. So the problem of Heartbleed is actually one of an oversight in the written recipe for the “heartbeat” function. And while a human might be able to recognize this type of sloppy instruction in a recipe and compensate, computers cannot.

So what’s the problem? Read the rest of this entry »


Explain/Teach Nearly Anything with this Hands-on Game

November 20, 2013

cloudBoard-TopAngle

cloudBoard is a new project on Kickstarter that intrigues me as it uses a physical board with puzzle-like pieces and a digital computer game component to teach various concepts, primarily to kids. I think this learning approach is ingenious, as it blends kids’ natural desire to play with (and relate to) something physical (like a classic board/puzzle game) and yet leverages the ability to drive video games, providing a rich visual element kids love. And not just kids. The guys at Digital Dream Labs have play-tested their invention with kids and adults alike, often finding that it bridges the generation gap, engaging young and old alike. Early play-testing also revealed some encouraging results with autistic individuals.

How’s it work? Players place various tiles in the cloudBoard in specific positions or sequences, and that becomes a direct link to functionality and features enabled in the video game. Repetitive play — the key to learning — is easy, accomplished by simply swapping or rearranging the pieces in the board, allowing learners to tinker with various configurations.

cloudBoard-TopDownWithStickers

3 things I love most about the cloudBoard project:

It bridges the physical and virtual. I’ve long been a believer in leveraging aspects of the physical world in explanation and teaching because people connect with physical things in a unique and memorable way. cloudBoard takes this to a whole new level, grabbing the best aspects of board and puzzle-piece games from our childhood while marrying them to what’s possible with modern digital computer technologies. And unlike the Skylanders concept, where the physical figure’s position or relationship to other figures is irrelevant, the physical cloudBoard pieces mean different things when they’re in different positions on the board.

cloudboard-cork

It’s not just a single game. Multiple games can be supported. While the Cork The Volcano game — designed to teach trial-and-error concepts, key to understanding computer programming — is the first game to be released, the Digital Dream Labs dudes have multiple other concepts in the works, including a chemisty game, a music game, and a farming game. Virtually any game can be created with the right software and new tops to the puzzle pieces. And here’s where the real extensibility of the cloudBoard concept shines…

Developers can extend it themselves.  I spoke with Justin Sabo from Digital Dream Labs, and I think this is a point worth emphasizing about their project. The game APIs will be open to those who wish program their own video game to interface with the cloudBoard hardware. And unlike some other game systems, cloudBoard is designed to run the same across many platforms (tablet, PC, etc.), extending its usefulness.

cloudBooard-piecesAlone

The tops of the puzzle pieces can also be swapped with other tops, allowing the physical aspect to be ever-changable but using the original pieces. (You don’t necessarily need brand new pieces for every game; just change the toppers.) Change the pictures? Fine. Add fuzzy three-dimensional toppers? Go for it. 3D-print your own? Why not? This is part of the future vision that Justin shared with me — that what they’ve created is a platform others can easily expand upon. Who knows how many educational games could be created.

Here’s what I don’t like about the cloudBoard project:

It’s not fully funded yet.  So spread the word and head on over to the cloudBoard kickstarter page to help make it a reality.


What is 64-bit?

October 1, 2013

Have you noticed that the technical specifications for computing technology always seem to be numbers that double after a while? This has particularly been true of numbers with the word “bit” after them. 8-bit. 16-bit. 32-bit. And now, yes, 64-bit is the latest buzz. But if you’re a normal person (not a computer person), what does this mean?

One of my colleagues (Ed) sent me a link to this short article that loosely explains what 64-bit means to you, the normal person: What the iPhone 5s ’64-bit’ processor means, in plain English. I particularly like the library and book analogy. While I see from the comments that the true technophiles object to the explanation, I’m still going to call it good enough for the normal person. By passing it along, I hope it’s helpful to you or someone you know.


Explaining Programming to Kids

September 14, 2013

There’s been a lot of focus on preparing the next generation to learn to code/program. (See Code.org for starters.) And many websites have sprung up sporting interactive tutorials for hands-on learning. But what about really young kids? Is it ever too early to learn the core concepts of programming?

Dan Shapiro doesn’t think so. He took a leave of absence from his job at Google to give the world another way: a board game. His project, Robot Turtles, went up on Kickstarter last week and is gaining funding. I hope he gets everything he needs, because this is a clever approach. Give kids a fun board game with great graphics, but at the heart of learning to route the Turtles appropriately, players learn the logic for writing basic computer programs. It’s brilliant.

So if you’ve got some kids you want to introduce to programming concepts in a fun, offline format, consider supporting the Robot Turtles project. It looks like it’s going to be a reality for now, but like Dan says, it may never be in print again.

Robot Turtles board game, courtesy Kickstarter project by Dan Shapiro


The DOM as a… dinosaur?

July 17, 2013

dino-skeleton

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.