Elisabeth Robson


Posted in Blog, Technology, Tutorial by Elisabeth on January 20, 2013

CSS ModulesOne of the topics I get a lot of questions about is CSS3. In Head First HTML and CSS (2nd ed), we cover CSS basics, all of which you need to know to understand new features in CSS3 of course, and we do include some properties and features that are new in CSS3 (where they are well supported across modern browsers). However, we didn’t have room to focus on CSS3 which is a large, and growing spec (and not complete yet!). In Head First HTML5 Programming, we barely touch on CSS at all, assuming that you know the basics, and instead focusing programming with new elements (like <video> and <canvas>) and APIs (like Geolocation, Web Storage, and Web Workers).

So, I thought I’d start a new series of blog posts on CSS3, to cover some of the new features I’m excited about in this still developing specification. Before we dive into these new features though, it is a good idea to start by taking a look at the specification itself, because it’s structured completely differently from CSS2.1.

The CSS2.1 specification (at W3.org) is one big document: everything about CSS2.1 is described there. By contrast, CSS3 is defined in modules, with each module describing just a part of CSS. This breaks the large spec up into more manageable chunks, and also allows each module to be developed separately. At first, this might be a bit confusing, especially given that there are many different modules in development, all at different stages of development! Fortunately, the W3 has put together a great document summarizing the current work on the spec, linking to each module in the spec, and showing clearly what stage a given module is in development (for instance, it might be completed, in testing, being explored, and so on).

Remember though, just because a CSS3 module specification is “completed”, doesn’t mean that all the features defined and described by that module spec are implemented consistently in all browsers! A great site to use to help determine browser support for CSS features is caniuse.com. On the front page is a nice list of CSS features which you can click on, or you can search for a feature.

Let’s take the border-radius property, for example. This property gives you the ability to make rounded corners on boxes, like this:

This has been a much-desired property for many years. If you search for “border-radius” in caniuse.com, you’ll see that this property is now well-supported across all the modern browsers! Good news. And fortunately, in browsers that don’t support it, the user will see regular square corners, which isn’t the end of the world.

However, what about a feature like CSS filter effects? This feature allows you to create a filter process before an element is rendered to the screen (like greyscale, saturation, hue, and so on – the same kinds of basic effects you’ll find in an image processing application). As of January 2013, you’ll see that filter effects aren’t well supported across browsers, and are supported as extensions only in Safari and Chrome (using -webkit-). This spec is still in the “exploratory” stage so that makes sense.

If you want to use a new feature in your web page, then it’s a good idea to test for that feature using the Modernizr library. This is an excellent library that allows you to easily create styles that provide a fallback style for browsers that don’t support a new feature, without you having to write a lot of JavaScript code to test for browsers or test for CSS support yourself. Modernizr supports several CSS3 features (along with HTML5 elements and JavaScript APIs). I’ll give some examples in later posts about how to use Modernizr.

With the next post, we’ll get started by looking at some of the new selectors included in CSS3. These new selectors give you even more fine-grained control over applying style to the elements in your page. So check back soon, and in the mean time, take some time to look over the CSS3 specification and familiarize yourself with the different modules.

Reader Question: Border for image on hover?

Posted in Blog, Reader Question, Technology by Elisabeth on August 30, 2012

Eric and I recently completed the second edition of Head First HTML and CSS. Along with a slew of small changes to bring the book up to date with the latest standards, we also removed the chapter on XHTML and added a new chapter on HTML5. It’s still quite mind boggling to see how much the direction in web development changed from the first time we wrote the book to now! The web is much less about “documents” and much more about “web applications,” and this “application-in-the-browser” view of the web has enabled everything from online banking to Facebook and Twitter.

In any case, along with the transition from XHTML to HTML5 in our book, I am getting questions about transitioning to HTML5 from readers. This question is from Bernie, and he asks about the border attribute on the <img> element. The border attribute is a stylistic attribute that was actually phased out in HTML4.01 (along with other stylistic attributes and elements, like <font>). Many browsers still support the border attribute, but if you use it, your HTML will not validate! And it’s best practice to replace all stylistic HTML attributes and elements with CSS equivalents.

In this case, the CSS equivalent is the border property. You can set different aspects of a border using border-width, border-style, and border-color, or you can combine these three into one border property, like this:

border: width style color;

However, Bernie doesn’t just want to set the border of an image; he wants a linked image to have no border when the user’s mouse isn’t hovering over the image, and a border when the mouse is hovering over the image. Like this:

html5 logo

Fortunately, this is easy to do with CSS! First, you need the HTML for an image; I’ll use the HTML5 logo from the w3.org web site:

<a href="http://www.w3.org/html/logo/">
    <img src="http://elisabethrobson.com/wp-content/uploads/2012/08/200px-HTML5-logo.png" alt="html5 logo">

To style this image correctly, we need two rules: one to select the image when the mouse is not hovering over it, and one to select the image when the mouse is hovering over it. Fortunately, the :hover pseudo-class is supported on many elements, not just the <a> element, so this is easy to do.

a > img {
    border: 2px solid transparent;

a > img:hover {
    border: 2px solid black;

In the first rule, we’re selecting an image, with no hover state, that’s nested in an <a> element. We need to go ahead and set a transparent border on the image when it’s not in the hover state, so we set the border to a 2px, solid, transparent border. Why do we need to do this? Because when you add a border to an image, it changes the width (and height) of the element. Remember, the CSS box model determines the width of an element to include the margin, border, and padding along with the width of the content. So if you add a border only when you’re in the hover state, the image will appear to shift over by the width of the border, producing a jarring visual effect.

So with an invisible border in place for the non-hover state of the image, we can now add the hover state selector to add the border when the user mouses over the image. We add the same width and style border as before (so the total width of the element remains the same), but now we change the color to black so the border is visible. When the user mouses over the image, the border changes to black and becomes visible.

There are many different ways you could do this, but this is simple, works well in all modern browsers, and validates as HTML5.

Reader Question: passing functions as values?

Posted in Blog, Reader Question, Technology by Elisabeth on July 5, 2012

Another great question from a reader of Head First HTML5 Programming is about passing functions as values. This comes up when using the Geolocation API: the way you get your location is to call the built-in function getCurrentPosition() and pass in two arguments, both of which are functions. The reader asks:

When you call getCurrentPosition(displayLocation, displayError), how are you able to call the function displayLocation() from within the parameters of this method, and when you call it, how does it know to how to pass the position object to displayLocation() when you didn’t pass any parameters when you called it?

When you write getCurrentPosition(displayLocation, displayError), you are not calling the displayLocation and displayError functions, you are passing them as values! I know it seems odd to pass a function as a value, but that is actually one of the powerful things about JavaScript (not all programming languages allow you to do this!). Think of the parameters displayLocation and displayError as names for values, just like any other parameter that expects a value (whether that’s a number, a string, an object, or a function!). Because getCurrentPosition() is a function built-in to JavaScript (and part of the Geolocation API), rather than one you write yourself, you don’t see getCurrentPosition() actually calling those functions. If you could see inside getCurrentPosition(), you’d see it call one of the functions, say displayLocation(position), and of course it would be passing in your position (as an object).

You can write your own functions that take other functions as arguments. For example:

function f(g) { 
  return g(1); 

function add1(x) {
  return x + 1;


You’ll get 2. Kind of mind-bendy, right? So what’s happening here is that you are creating two functions: add1 takes a number, x, and adds 1 to it and returns it. Function f takes a function, which you give the name g. f calls g, and passes a number, 1, into it.

So, when you pass the function value add1 to f, f uses the parameter name g as the name for the function value (remember, JavaScript is pass by value!!) and calls g, with the result that you get the number 2.

This topic of functions as values and passing functions to other functions is quite complex and deserves a more in-depth treatment for sure, and we just didn’t have room in Head First HTML5 Programming to delve into it. We’ll have to tackle that in an in-depth tutorial at some point! Let us know if that’s a topic you’d be interested in learning more about.

Tagged with: , ,

Reader Question: What is an API?

Posted in Blog, Reader Question, Technology by Elisabeth on July 5, 2012

A couple of weeks ago, I got a great question from a reader of Head First HTML5 Programming:

What is a API? Is it like a constructor function or is it just an object or something else?

We use the term “API” frequently in Head First HTML5 Programming because the book is primarily about the JavaScript APIs you use to program web pages. So, what exactly is an API?

An API is an Application Programming Interface. If you write some software that can be used by another piece of software, the API is what specifies how to do it.

When you use the built-in JavaScript functions, you’re using an API, because you are using functions running in the browser (a program) that are designed to be used by other programs (your JavaScript program). We often call collections of functions that work together to achieve some purpose–like Geolocation–an API, as in “The Geolocation API”. Typically, there is some documentation somewhere (in this case, the HTML5 spec) that tells you *how* to use those Geolocation functions.

The APIs we cover in Head First HTML5 Programming include Geolocation, Web Workers, Web Storage, Canvas and Video. We also talk about using JSON with the Twitter REST API, which is an API that’s designed to be accessed via URLs. All these APIs are now part of JavaScript; each is just a group of functions that allows you to access particular functionality in the browser.

Thanks for a great question!

Tagged with: , , ,

10art10tech at The Project Room

Posted in Art, Blog, Technology by Elisabeth on July 5, 2012

On June 27, I participated in an event at The Project Room in Seattle, WA, that brought together ten artists and ten technologists to discuss “solutions”. The event was run just like a speed-dating event, which meant each artist had 5 minutes at a table with a technologist, and a chaperone to make sure we were on our best behavior monitor the conversations and tweet. It was a huge amount of fun, and at each table, I found myself wishing that I could continue the conversation that had begun. The discussions I had were all over the place, and included everything from spaghetti code to overpopulation to creating a response to the Japanese tsunami disaster to storytelling in film and in books. Some of the tweets from the evening have been collected at The Project Room blog.

I’m looking forward to the follow up event, “Dinner and a Movie” on July 11. You can follow that event on Twitter @projectroomSEA, where we’ll be considering some of the questions raised at the previous event.

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: ,