I’ve been a big fan of American Express for a while.  So, when it came time to get a business credit card for my new company, I debated about whether to get a Plum Card or just go with the standard Amex Green, or Gold.  Today I got to take advantage of one of the benefits of the Plum–pay early and get a cash refund.  That’s right, not airline miles, or points that expire, but cash.  So far, I’m happy with my choice.

It also does seem to solve the antenna death grip problem for me.  I definitely noticed a drop in signal without it, usually from 3 bars to 1 at my house, and with the gelaskin applied, it stays at 3 bars no matter how I hold it.  All in all, I’m very happy with it, and while $15 might be just a tad high, it’s certainly more reasonable than the ridiculous prices of some of the “real” cases out there.

Of course, they’re not really black, more like maroon and dark green, but still, this monster was the size of small pumpkin! Can’t wait to taste!

Our first real harvest of broccoli. It’s a bit more leggy than what
you’ll find at the grocery store, but it’s also much sweeter and more
flavorful!

You know how the saying goes, something like “when all you have is a hammer, everything looks like a nail”. Lately, as you may have guessed from some recent posts, my favorite hammer has been HTML5 plus CSS3. Recently I’ve been looking for a good alarm clock app for my iPhone, and seeing some of the gorgeous digital clock apps got me wondering if I could create one using CSS3.

After a couple hours hacking last night, I think I ended up with something that looks pretty good. There are generous helpings of CSS3 gradients, rgba, and opacity, a side of CSS transitions, and a sprinkling of skew and scale transforms. There’s a side of dojo to pull it all together.

So, go keep some time, and pick your favorite color. Oh, and let it sit for a bit … you never know what might happen.

Recently, on one of my projects, I needed to rotate classes on a DOM node.  Given a set of classes, say “A”, “B”, and “C”, I wanted to be able to have a DOM node with class “A”, poke it and then have it have “B”, then “C”, then “A” again, and so on, and I didn’t want to keep any additional state beyond the node itself.  So, given a node, I wanted it to simply go to the next class and wrap back around … i.e. just do the right thing.

And, as is natural in the world of DOM, I wanted to be able to do that on a whole set of nodes.

There are lots of ways this could be useful.  As one very simple example, it can be used to toggle a bunch of nodes between two classes, to show or hide them using classes rather than specifically setting their display.  Why not just set their display, you ask?  One reason is CSS3 transitions, which are based on class (and pseudo-class) changes.  So, it’s possible to have hardware accelerated, animated show/hide via CSS3 transitions which degrade nicely to simple, instantaneous show/hide on browsers that don’t support transitions.

Then, of course, using more than 2 classes allows for lots of interesting behavior.

A quick aside

In my opinion, any good framework should provide, in addition to useful functionality and a clean API, a clear and well-defined way to extend the framework itself.  This is one of the reasons I am a big fan of dojo.  Don’t get me wrong, there are lots of great Javascript frameworks, but in my experience, this is one area where dojo has done an especially nice job.  Their widget infrastructure is a prime example.  The widgets have a well-defined inheritance structure and lifecycle which together make it darn easy to write your own.

Back to the task at hand

Using dojo.extend, It was easy to whip up an extension to dojo’s NodeList, and thus dojo.query to accomplish what I needed.  With this, you can do things like:

Here is my NodeList.rotateClass extension for your enjoyment or criticism.  It’s certainly not perfect, but it gets the job done.  If you have any suggestions for improving it, drop me a comment or twitter, as I’d love to hear them.

I had high hopes for this Shiraz after really enjoying Hobnob Cab a
while back. The initial taste is good, but unfortunately, it has a
bitter, chalky finish.

Finally got this done. It makes the water look great at night. Now I
just have to adjust it so it doesn’t blind everyone!

I threw together a set of image-less glass and gradients buttons last night.  They use a flat color behind a partially-transparent CSS3 gradient to create an overall glass or gradient effect.  The nice thing about it is that the gradient style can vary independent of the color, and you don’t have to play with a color selector or do color math to get the gradients to look nice.  You can simply setup one gradient and then you can change the flat color to suit what you need.

One obvious problem is that it won’t work in browsers that don’t support CSS gradients, and in browsers that do support gradients, but don’t support color stops, such as IE8, you can’t do the glass effect using this techique.

Another problem I found is with Firefox, and presumably any browser that uses gecko.  When using a border-radius on the outer button element, it doesn’t fully extend the inner element to the edges of the button, so you get a nasty flat colored “border” (not actually a CSS border).  Take a look in Firefox to see what I mean.  It’s a shame, because the technique works very well in WebKit.

Anyway, check it out here.

Update (7/2/2010): I added a hack to “remove” the nasty borders in Firefox by introducing a negative margin on the inner gradient overlay.  It stretches the overlay out to the edges of the button.  It works, but I really don’t like it at all.  I hope Firefox fixes their gradient rendering with border-radius to work “correctly”–or rather, what I feel is correct … like WebKit does it.

On a related note, Safari on the iPhone in iOS4 also renders the gradient overlays incorrectly.  It leaves large gaps on the left and right.  So, there’s something different about that version of WebKit as well.

I also added IE gradients, which don’t support color stops, so all the buttons will all appear to be straight two-color gradients.  They still look decent, but not nearly as snazzy as in WebKit and FF.