Elisabeth Robson

Getting started with HTML5′s Web Sockets

Posted in Blog, Technology by Elisabeth on February 16, 2012

Web Sockets is a new addition to HTML5 that allows you to create a persistent connection with a server for communication. With Ajax, because you’re using HTTP to communicate, the connection between your client and the server must be reestablished each time you want to get get or send data. This is fine if your application doesn’t need to get or send data a lot, but if you’ve built an application that, for example, gets regular updates of data (e.g. a real-time sports leader board, a stock ticker, a chat room, or a MMOG) then the overhead of creating those connections each and every time can make your app sluggish. Web Sockets can vastly improve the efficiency of communication in these types of apps. Note that as of this post, Web Sockets are supported only in Chrome and Safari.

One of the trickiest things about getting started with Web Sockets is getting a server set up. Because you’re not using HTTP, you can’t just use your regular web server. Two implementations of Web Socket severs are socket.io and Jetty, but the set up for these is not obvious, particularly if you’re a client-side person and don’t have much experience with the server-side of things.


Tagged with: ,

Book Review: Building Hypermedia APIs with HTML5 and Node

Posted in Blog, Technology by Elisabeth on January 30, 2012

I picked up Building Hypermedia APIs with HTML5 and Node by Mike Amundsen hoping to learn more about HTML5, Node.js and how they are used to build web applications. Instead, the book primarily offers specific hypermedia solutions to the “type-marshaling” problem, that is, the problem of communicating between clients and servers. For instance, if the server publishes a schema that the client uses, and then that schema changes, all the clients break.


Tagged with: ,

Reader Question: Incrementing variables

Posted in Blog, Reader Question by Elisabeth on January 19, 2012

I got a good reader question today about incrementing variables. This reader is completely new to programming and was getting confused about two common ways to increment variables:

  count = count + 1;

a statement that often appears in a while loop, and


a statement that often appears in a for loop, like this:

  for (var i = 0; i < 10; i++) {

While this question is about JavaScript, these lines of code could appear identically (or almost identically) in many languages! In Head First HTML5 Programming, we speed through these language basics pretty quickly, so it's understandable that someone new to programming might be a bit confused on this point. Plus, and I hate to admit this, I think we completely forgot to explain what operators ++ and -- actually do! (We'll fix that on the next printing!)

The trick to understanding the first one is to remember that when you use =, you are assigning a value to a variable. You're not comparing two values; you do that with the comparison operator, which is ==.

So, when you write

  count = count + 1;

you are saying: "Take the current value of the variable count, add 1 to it, and then change the value of count to that new value."

So if count is equal to 4, and you run this line of code, after you run the code, the value of count will be 5.

Adding 1 to the value of a variable is something we do so often in programming that language designers have added shortcuts to make it even easier to add 1 to a variable with a number value. One shortcut used in many languages is the ++ operator. Writing


is the same as writing

  i = i + 1;

It's just a shortcut to do the same thing. So, when you see a for loop like this:

  for (var i = 0; i < 10; i++) {

there are three things happening in that for loop: the first part, var i = 0;, declares and initializes the the variable i to the value 0. Then the conditional expression is run: i < 10. This says, is i less than 10? Well, if we just started the loop it is less than 10, in fact it's 0. In that case, all the statements in the body of the for loop are run (that is, everything between the { and the }). Finally, the value of i is incremented with i++, making the new value of i equal to 1. Then you start over, except you skip the initialization bit. So you go right to the conditional expression: is i still less than 10? Yes, it's 1. So run all the statements in the body of the for loop again. And so on. When i is incremented to 10, then the for loop stops because the conditional expression is no longer true.

An analogous operator to ++ is -- which subtracts 1 from the value of a variable. In other words, writing


is the same as writing

  i = i - 1;

I hope that helps clear up that reader question. Keeping send me your questions if you run into any problems. Thank you!

Tagged with: ,

Tell Congress: Don’t sensor the web!

Posted in Blog by Elisabeth on January 18, 2012

Today I, and others (Google, Wikipedia, O’Reilly Media, Ignite Show, Boing Boing, and more) are protesting the SOPA and PIPA bills making their way through congress.

These bills will undermine the existing laws that have enabled the Web to thrive, creating millions of U.S. jobs.

Here’s what you can do:

  • Learn about SOPA and PIPA and tell your friends and family why it’s important that these bills are NOT passed
  • Learn if your U.S. Representative or Senators support SOPA or PROTECT IP through SOPAOpera.org
  • Use the tools at AmericanCensorship.org, Engine Advocacy, and PopVox to tell Congress where you stand.
  • Participate in Better Activism Day
  • Call or meet with or email your representatives in Congress.. Make your voice heard! Congress begins voting on these issues on January 24th, so act fast.
  • If you are in Seattle, like I am, there is a rally in downtown Seattle today (Jan 18th) to educate people about SOPA and PIPA. Join in if you can!
Tagged with: , , , ,

My adventure making a wood block for block printing

Posted in Art, Blog by Elisabeth on December 9, 2011

The other day, I decided I wanted to try making my own wood block for block printing out of a photograph (I was inspired by a Kickstarter project).

I started with a photograph of the mountains I took on a hike. (In retrospect, this wasn’t the best photograph to choose, as you’ll see. Next time I’d choose a simpler photo with high contrast).

I converted it to black and white, posterized it, and inverted it, using Photoshop.

Then I took it in to Metrix Create Space in Seattle. They have a laser cutter and I knew they’d be able to make the block. They loaded the image into the LaserMate software to set up the laser cutter. We first made a small test image to make sure the whole thing was going to work.

Once we’d confirmed it would work, we made the real thing.

I took the block home and tried making some cards with it. The results are a bit mixed; the concept is great and part of the cards came out really well. But the photo is too complex, and too many of the lines just blur together with the ink, so there’s not enough detail.

Next time, I’m going to glue a rubber stamp material to the top of the wood and use the laser cutter on that instead. I’m also going to make the depth of the etching just a bit deeper – this one was set at 1mm and I want to try 2mm or possibly even 3mm.

Overall, I’m pleased with the result, and had a blast making it.

Tagged with: ,

Web workers and Firefox 8

Posted in Blog, Technology by Elisabeth on December 7, 2011

For those of you who have purchased Head First HTML5 Programming, be aware that there is a bug in Firefox 8. In this version of the browser, you cannot create a web worker from localhost, which means that the code:

var worker = new Worker("worker.js");

will fail. If you open the JavaScript console, you’ll see an error saying “Could not get domain.” This error will prevent the examples in Chapter 10 from working, since we are creating workers from localhost. So, please use a different browser! Hopefully this bug will be fixed in Firefox 9.

Mozilla is pushing out releases of Firefox at a blazing speed, so I don’t think it will take too long for this to be fixed.

Tagged with: , ,

Tutorial: How to create a pie chart with HTML5′s canvas

Posted in Blog, Tutorial by Elisabeth on December 6, 2011

One of the best things about the HTML5 <canvas> element is that we can now do things like this:

Sorry your browser doesn’t support canvas!

without needing a plug in. I recently had to implement a similar type of graphic in canvas for a project I’m working on, so I thought I’d turn it into a tutorial on how to make a pie chart.


Tagged with: , ,

Why learn HTML5 for the holidays?

Posted in Blog, Technology, Tutorial by Elisabeth on November 30, 2011

Snowflakes falling in a canvas

There are many good reasons to learn HTML5. One really great one is the <canvas> element. This element gives you the ability to add graphics and animation to your page without any plugins. If you’re at all interested in HTML5, you’ve very likely seen some compelling canvas demos. And once you know canvas, you can make your very own winter scenes for your browser. Then you can impress your whole family and keep the conversation around the holiday dinner table much more interesting. What’s not to like about that? (And yes, this web app will work on your iPad so you can pass it around easily for demos.)

In this post, I’ll show you how to create a falling snowflake winter scene using HTML5′s <canvas> element and the canvas API. This little web app will display a canvas that fills the browser window. When you click on the canvas, a snowflake image is added to the canvas, which then proceeds to fall to the bottom of the window. When it reaches the bottom, it reappears at the top of the window, and continues to fall.


Tagged with: , ,

Coming up: Webcast about HTML5 Programming, Dec 2, 2011

Posted in Blog, Technology by Elisabeth on November 12, 2011

Eric and I will be doing a 60 minute webcast about our new book, Head First HTML5 Programming, on December 2, 2011. It’s free to join; just sign up to attend. If you’re curious about the kinds of topics we cover in Head First HTML5 Programming, or you just want to know more about HTML5, this is a good webcast for you. Hope to see you there, online!

10 things every web developer, designer (and manager) should know about HTML5

Is HTML5 just an incremental update to HTML4.01, or is it a new, revolutionary technology that is gong to change the web? Well, it’s actually a bit of both, and in this webcast we’ll give you a 45 minute jumpstart on this new technology and everything you need to know when you walk into your next staff meeting and the subject comes up. You can expect to leave this webcast with the answers to questions like:

  • Do I need to rewrite my HTML4.01 pages to be HTML5 compliant?
  • Is web video as easy as it looks with the new <video> element?
  • Do I need to know JavaScript to use HTML5?
  • What are “web workers” anyway?

Tutorial: Video Selection Menu for Webville TV

Posted in Blog, Reader Question, Technology, Tutorial by Elisabeth on November 10, 2011

Today, I received a question from Eva, a reader of Head First HTML5 Programming. Eva asks about how to create a clickable list of videos, so that if you click the name of a video in the menu it will play or pause.

In Chapter 8 of Head First HTML5 Programming, we show you how to create a custom video player with a choice of two videos, as well as play and pause buttons (along with various other buttons to add video effects). Here’s the custom video player you build in that chapter:

Screenshot of Video Booth from Chapter 8

While you’ll learn everything you need to know to create a video selection menu with the behavior that Eva asks about as you build the custom video player in Chapter 8, I thought I’d also show you how you could add a plain menu of videos to the other example in Chapter 8, Webville TV. I’ve kept it plain and simple so you can easily see exactly how it works.

Screenshot of Webville TV with a selection menu added

As you can see, I’ve added a simple menu bar below the TV, with the names of the three videos we used in that example. When you load the page, the Preroll video automatically loads and begins to play. I’ve left the controls in the browser video player, but you can also control playback by clicking on the name of the video. Clicking on a different video loads and plays that video. This is a very basic interface, and easy to do with the video API.


Tagged with: , ,