Category Archives: Tech

Enumerate, Iterate, Pretty Kate, …

Posted on by
1

Ever wanted to iterate over some objects using Java’s for each syntax, but the only interface exposed is an Enumeration? I have.

There’s an exercise in the Head First Design Patterns book that adapts an Enumeration to the Iterable interface. Pretty nifty, so I coded it up and used it in some code at work. Works great!

But then I found this: the list() method of the Collections class. It stuffs all the items in an Enumeration into a List. And it’s been there since Java 1.4! Where in the world have I been?

Anyway, the upshot is that instead of having to use this old drivel

Enumeration<Nargle> nargles = Nargle.getNargles();
while (nargles.hasMoreElements()) {
  Nargle nargle = nargles.nextElement();
  // do something with nargle
}

You can do this

for (Nargle nargle : Collections.list(Nargle.getNargles())) {
  // do something with nargle
}

Yes, that is a sight better.

Webkit Disrespects My Personal Whitespace

Posted on by
Reply

I’ve been trying to put some of CSS3′s nth-* selectors to use in a site I’m working on right now, and I’ve run into a problem. I’m testing my markup and styles in Safari 5 (before moving on to other browsers), and I am trying to style child elements 3, 7, 11, etc. So I write this rule:

p:nth-of-type(4n - 1) { … }

That should work, right? After all, 4(1) − 1 = 3; 4(2) − 1 = 7; 4(3) − 1 = 11.

Well I open up Safari, and my changes haven’t taken. OK. How about a different but equivalent equation?

p:nth-of-type(4n + 3) { … }

Again, pretty simple: 4(0) + 3 = 3; 4(1) + 3 = 7; 4(2) + 3 = 11. The last one hasn’t taken, for whatever reason, but this one’s right on.

Still nothing.

I begin to doubt my math skills. I’ve been doing software of one type or another for 15 years, but my bachelor’s degree is in electrical engineering. I had to take four calculus classes, linear algebra, and differential equations. OK, I haven’t used most of that in years, but an + b is simple algebra—stuff I’ve been doing for over 20 years. I know simple algebra.

I decide to fire up Firefox (version 3.6.12). Lo and behold, there is the formatting I’ve been trying desperately to get to show up. Firefox gets it (so does Opera, for the record), but Safari doesn’t (neither does Chrome). Evidently we have a Webkit bug.

For grins, even though it won’t get me where I want to go, I try this:

p:nth-of-type(4n) { … }

The formatting appears correctly in both Firefox and Safari! Therefore Webkit does understand nth-of-type, but something about an + b gives it heartburn that an doesn’t.

I try one more thing: remove the whitespace in the equation.

p:nth-of-type(4n+3) { … }

It works! Safari and Firefox both rendered the formatting properly. Webkit just doesn’t care for the whitespace.

But is whitespace forbidden in the equation? Here’s what the spec has to say:

Whitespace is permitted after the “(“, before the “)”, and on either side of the “+” or “-” that separates the an and b parts when both are present.

Valid Examples with white space:

:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )

—http://www.w3.org/TR/css3-selectors/#structural-pseudos

So then, we do have a bug. Webkit doesn’t respect the whitespace in nth-child and the other nth-* selectors. The workaround is easy enough, but it’s going to be hard for me to break the habit of adding space around the arithmetic operator. It’s a best practice, so far as I’m concerned, for code readability. Nevertheless, the expressions are simple enough that it’s not a terrible price to pay to get Safari/Chrome to play.

If you want to see it in action, check out this test file. Below is a screen capture of Safari’s rendering (left) and Firefox’s rendering (right). As you can see, Safari only renders nth-child(2n+1) correctly while Firefox renders them both correctly.

Safari's rendering is on the left. It does not render nth-child(2n + 1) correctly, but only nth-child(2n+1), i.e., without spaces. On the right, Firefox renders both correctly.

nth-child Rendering Comparison (Safari vs. Firefox)

Sugar Scrub

Posted on by
Reply

I am reading Andy Clarke’s Transcending CSS, and in it he encourages looking for Web design inspiration in places other than the Web: cereal boxes, newspapers, magazines, buildings, to name a few. (This is something I’ve done for some time now, but I’ve been making a more conscious effort of late, given his advice.)

This morning I picked up a tube of my wife’s facial scrub. I looked for anything interesting in the design on the front. Then I looked at the back, which contains, among other things, an ingredient list. I wasn’t scanning the ingredient list as much as my eyes just happened to fall on one word:

Saliva.

Saliva! They put saliva in facial scrub? I looked again.

Salvia.

Salvia officinalis (sage) leaf extract. Ah, helps to keep reading past the line break.

Reason #10,754 To Execrate Internet Explorer 6

Posted on by
Reply

Ever seen this pop up in Internet Explorer 6 (or 7)?

This page contains both secure and nonsecure items. Do you want to display the nonsecure items?

You spend hours combing through server-side source, hours more combing through client-side source, and yet more hours sniffing and poring over headers, and nothing. Nothing HTTP when it should be HTTPS.

Well this could be your problem, yet another non sequitur brought to you by Microsoft:

This problem occurs if the Web page script calls the removeChild() method to delete a DIV element that references a background image. —http://support.microsoft.com/kb/925014

This only appears to happen when the style is inline. In other words, say you have something like this:

<div id="err" style="background-image:url(err.gif)">
   Nee!
</div>

If you attempt to vaporize that div with removeChild(), you’re suddenly no longer secure.

Okaaay. Make sense to you? Makes sense to me!

Firefox, take me away!

URI Decomposer

Posted on by
Reply

At work, we build our client websites upon a framework uses a lot of GET parameters. It makes for some URIs that average, oh, about three feet in length. Examining some of those monsters can make your eyes cross if you ever need to verify some parameter values in the query string, so I decided it was time for a little tool that would break up the URI into its constituent parts for me, instead of wading wearily though the whole URI myself. Google has a JavaScript URI object that does most of the heavy lifting already. I just had to add code to break up the query string into the individual key-value pairs.

Hence the URI Decomposer was born. You’ll find it among the items on the Tools page (few as they are as of this writing).

Audacity Crudity

Posted on by
Reply

I’m starting to do some rudimentary audio editing on the Mac. Not impressed with Audacity version 1.2.5 for the Mac. The most glaring oddity is when exporting a file. As I type the file name, Audacity starts playing the audio. Evidently Audacity does not disable its keyboard shortcuts (not related to the Save dialog, that is). Awfully flaky.

That’s not to mention the rough-around-the-edges UI that makes a Mac user cringe. Guess I’m just spoiled.

Don’t Let A Spec Pick Your Button Type

Posted on by
Reply

Ever need to create a <button> of type button when you’re doing a little DOM scripting? Easy enough, right? It should go something like this:

var okButton = document.createElement('button');
okButton.type = 'button';

Nevertheless when you run this code in IE6, you get the super-informative “Communication error” message. It turns out that IE6 (for once) is following the standard. I don’t know what the W3C were thinking, but so sayeth the ECMAScript Language Binding (9 January 2003) spec about the type property of the HTMLButtonElement:

type
This read-only property is a String.

So, the common way to set the property of an HTML element is, according to the standard, right out? I mean, it’s not inconceivable that I would want to create a <button> on the fly with a type that is not the default.

Alas there is a workaround. Ironically, it employs the standard method of setting DOM Node‘s attribute value:

var okButton = document.createElement('button');
okButton.setAttribute('type', 'button');

Works like a charm! Even in IE6.

(I should note that Firefox 3 allows for writing to the button’s type property using the button.type notation. I didn’t test with other browsers to see whether they balk at the button.type notation, but Firefox 2/3, Opera 9.6, and Safari 3, along with IE6/7, are more than amenable to the setAttribute method.)