Languages I Speak or at least Know

I am fluent in over six million forms of communication. Well, not really.

O’Reilly Books for code4lib2009 book raffle

(in mostly alphabetical order, with varying levels of expertise and necessarily incomplete)

  • Ant
  • Bash
  • Batch (Windows shell)
  • CSS
  • HTML
  • Javascript
  • MySQL
  • PHP
  • VBScript
  • XML
  • XSLT

Things I want to learn:

  • jQuery
  • node.js

Powered by Plinky

Comments (1)

My fall/winter to-read list

This Plinky prompt only allowed one book even though the question asked for "books". Some others:

Side Jobs, a collection of "Dresden Files" short stories by Jim Butcher.

PHP: The Good Parts (re-read)

JavaScript: The Good Parts (re-read)

Naked Heat is the second mystery novel by "Richard Castle" (I'm not sure who actually writes them) as a tie-in to the terrific ABC series "Castle". The first novel, Heat Wave, was a lot of fun.

Powered by Plinky

Comments off

Why a Web page is like a blueberry pie

Yesterday afternoon I Tweeted this:

Poking the DOM with PHP. I know YOU all knew about it but *I* just found it and it's wonderful.
@smartwatermelon
Andrew Rich

I thought it might be worth explaining what I was talking about, using a metaphor lots of people would understand. So, consider a blueberry pie. To bake a blueberry pie, you assemble your ingredients, do some mixing and combining and stick it in the oven. Let’s say, though, that after the pie is out of the oven and cooled, a picky young man with short blond hair says “but Mom, I wanted cherry pie!” Being the outstanding parent you are, you lift the top off the pie, pick out every single blueberry and replace them with cherries. (I know, just go with it.) Remember that, it’ll be important in a few minutes.

On another day, you’re preparing your pie ingredients when the aforementioned picky young man again requests a cherry pie instead of blueberry. This time, you can replace the blueberries with cherries before mixing the ingredients and baking the pie. Same result, but one is clearly easier and less disruptive on the final product.

Finally, the pie is done and you cut a slice. Look at the cross-section of that slice of pie. You have a crust, filling, berries, maybe some ice cream or whipped cream on top. That’s the structure of the completed pie that’s ready to eat.

How does this tasty metaphor apply to Web pages, and specifically to my not-entirely informative Tweet?

A Web page, like a pie, has a structure that can be examined. It has text, images, colors, different fonts, maybe some embedded video clips. These are all elements that make up the structure of the Web page. This structure is called the Document Object Model, or DOM–for purposes of this post it’s not important what that means, but where you see “DOM” you can read “bits and pieces that make up a Web page.”

Let’s say you want to change one of these elements. You could do it after the page has been loaded (the Web browser is showing the page) or you could do it before the page has been sent to the Web browser. Changing the elements of the Web page after it has been loaded is usually done with JavaScript, which is code that runs in the Web browser and is analogous to removing the blueberries after the pie is baked. Changing the elements before the Web page is sent to the browser is, in this instance, done with PHP, which is code that runs on the Web server. This is like adjusting the pie recipe before mixing the ingredients.

The major difference, and why I was excited to discover this capability of PHP, is that adjusting or changing the Web page after it’s been loaded (with JavaScript) is about as simple as removing blueberries from a fully-baked pie. It depends on the capabilities of the Web browser viewing the page and in some cases of the OS running the Web browser. It also adds to the total amount of data sent from the Web server down to the browser (all content [text, images, video, etc] plus the extra code which runs after the page has loaded) and is just generally inefficient.

On the other hand, the ability of PHP to change the contents and structure of a Web page while its still in ingredient form and hasn’t been mixed and baked means that what’s sent down to the Web server is already what I want it to be and I can tweak it as much as I need to before it’s served.

This is a drastic oversimplification, of course–there are plenty of good reasons to fiddle with the DOM using JavaScript once the page has loaded; Web applications like Gmail, Twitter and even WordPress use this capability all the time to change, add or delete elements of the page without making a round trip back to the server. There are also lots of applications where large-scale preprocessing is done on the server with PHP and final tweaks are done in the browser, often depending on the specific browser and version being used. However, the pie metaphor does make a good high-level explanation of this aspect of Web page development.

At least, I think it does. What do you think? Comments welcome.

Comments (1)

Use a class to control whether links open in new windows (tabs) via JavaScript

This took me most of the day to figure out so I’m noting it here for anyone else who needs it. The object is to be able to set a list of links to open in a new window/tab without having to add target=”_blank” to each and every one.

First, we wrap our list of links in a DIV and give it a class name to reference later:

Of course that list of links could be much longer and adding the target=”_blank” attribute to each one would surely be a pain. Having thus classed the list, here is the script to add to our HEAD section (or included script file):

function setExtLinkTargets()
{
for ( var e = 0; e < document.anchors.length; e++ ) {
if ( document.anchors[e].className == “extLinks” ) {
document.anchors[e].target = ‘_blank’;
document.anchors[e].title = document.anchors[e].title + ‘ (opens in new window)’;
}
}
document.divs = document.all ? document.all.tags(‘div’) : document.getElementsByTagName(‘div’);
for ( var f = 0; f < document.divs.length; f++ ) {
if ( document.divs[f].className == “extLinks” ) {
document.divExtLinks = document.all ? document.divs[f].all.tags(‘a’) : document.divs[f].getElementsByTagName(‘a’);
for ( var g = 0; g < document.divExtLinks.length; g++ ) {
document.divExtLinks[g].target = “_blank”;
document.divExtLinks[g].title = document.divExtLinks[g].title + ‘ (opens in new window)’;
}
}
}
}

This function has two parts; one that processes DIVs with class “extLinks” and another that processes individual links. Why the second? Because if we already have the overhead of the script running on the page load, we might as well have all of our new-window links controlled in one place. So we can also add class=”extLinks” to any individual A element for the same effect.

Finally, we just need to call the script as soon as the page has finished loading. I like to put a general onLoadHandler() function in each of my pages:

function onLoadHandler()
{
// other onLoad stuff
setExtLinkTargets();
}

and call it from the BODY element’s onload event:

That’s it! Now any list or group of links wrapped in a DIV of class “extLinks”, or any individual links of class “extLinks” will open in a new window or tab.

Comments off