Elisabeth Robson

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

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

  i++;

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

  i++;

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

  i--;

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.


(more…)

Tagged with: , ,