Elisabeth Robson

Tenth anniversary of Head First Design Patterns

Posted in Blog, Technology by Elisabeth on July 15, 2014

Tenth Anniversary Edition

Tenth Anniversary Edition

It’s been ten years since Eric and I wrote our first Head First book, Head First Design Patterns. Ten years! Wow, time flies by. To celebrate the tenth anniversary of the book, we just wrapped up a special 10th anniversary edition of the book, which brings it up to date with Java 8, and (mostly) updates the book into color, so you’ll see the eBook looking a lot brighter and more colorful than before (the print book will still be black & white) .

We have to admit, when we wrote this book in 2004 we never thought it would have ten years of longevity, or be one of O’Reilly’s best-selling books. But why has it it been so popular? And, after ten years, are design patterns still relevant?

The answer is pretty simple: if you want to write flexible software that you can change and extend in the future, you need to know about design patterns.

(more…)

CSS3 Selectors

Posted in Blog, Technology, Tutorial by Elisabeth on February 7, 2013

CSS3 expands considerably on the selectors you can use to select elements in your page for styling. These selectors are described (along with the selectors previously supported in CSS2.1) in the Selectors Level 3 Module (http://www.w3.org/TR/selectors/). This document includes a nice summary of all the selectors in CSS in a table near the top of the specification, so this is a good document to bookmark for reference.

The selectors that have been added to CSS3 include one element selector, attribute selectors, pseudo-class selectors, and a pseudo-element selector. Let’s take a look.

Element Selectors

An element selector is a general name for selectors like this:

body {
  background-color: gray;
}

Here, the selector is body which selects the <body> element in your page. The rule sets the background-color property of the <body> to gray. Easy enough. You also know from CSS2.1 that you can select children and siblings of elements. There is one new element selector that’s been added to CSS3 that allows you to select an element that is preceded by another element (that is, a sibling of the element). We’ve already been able to do this with the selector:

h1 + p { ... }

which selects all <p> elements that are immediately preceded by <h1> elements; now we can select based on sibling more generally with:

h1 ~ p { ... }

which selects all <h1> elements that are preceded (anywhere) with a <p> element.

So, in the example below, with the h1 + p selector, only the first <p> element would be selected, but with the h1 ~ p selector, both <p> elements are selected:

<h1>My Playlist</h1>
<p>
Here are my favorite songs:
</p>
<ul>
    <li>Blue Suede Strings by Elvis Pagely</li>
    <li>Great Objects on Fire by Jerry JSON Lewis</li>
    <li>I Code the Line by Johnny JavaScript</li>
    <li>That'll be the Data by Buddy Bitly and the Variables</li>
    <li>Your Random Heart by Hank 'Math' Williams</li>
</ul>
<p>
Play them loud!
</p>

(more…)

Tagged with: , ,

CSS3

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">
</a>

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;
}

f(add1);

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.

(more…)

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.

(more…)

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