I Love You, border-radius. You Too, box-shadow. No, I Didn’t Forget About You, rgba Color!

Posted on by Rob Larsen

As I’ve mentioned I’m doing a couple of HTML5 implementations and in one of them I was faced with some “post” boxes in a WordPress theme that featured both rounded corners and a drop shadow. Since I’m using already using Modernizr, which exposes specific CSS3/HTML5 feature support on the HTML element, I figured I’d do a little bit of extra work and use some CSS3 magic to make the design happen in modern browsers. For this post I’ll skip the extra work bit (a little JavaScript to insert extra markup in for Internet Explorer/Opera) and just look at the implementation for fancy new browsers (Firefox 3.5 and the latest/greatest Webkit based browsers.)

First, let’s look at it in action (this will suck in IE/Opera)
Continue reading “I Love You, border-radius. You Too, box-shadow. No, I Didn’t Forget About You, rgba Color!” →

HTML5 With Modernizr… Come on in! The Water’s Fine.

Posted on by Rob Larsen

Things are afoot. I’m building out the redesign of Drunkenfist.com, and we’re working on an internal redesign at work. I’ve been toying with the idea of using the new HTML5 semantic elements for both and to that end I took some time to evaluate Modernizr, the small JS library that programatically exposes HTML5/CSS3 feature support (via classes on the HTML element) and “fixes” IE’s style support for some of the newer semantic elements.
Continue reading “HTML5 With Modernizr… Come on in! The Water’s Fine.” →

Why I Dumped Tweetdeck For Brizzly

Posted on by Rob Larsen

I upgraded to Tweetdeck 0.3.0 and I was almost immediately looking for an alternative. There are a few reasons for that (the disappearing columns bug, watching it auto-shorten an already short url) but the biggest issue was the change they made to the behavior of the close button. What did they do? Well, with almost every other application on my machine (and all of the trivial ones*), when I click that red X, the application closes. Exits. Stops doing what it’s doing. The ones that don’t (my antivirus software springs to mind) actually need to run all the time. I don’t need Tweetdeck running 24/7. I often need it to just go away (using Fiddler with Tweetdeck running is maddening.) But yet, in Tweetdeck, if you click close, it actually minimizes to the systray.
Continue reading “Why I Dumped Tweetdeck For Brizzly” →

HTML5 Demo: Tracking Video Progress With Google Analytics

Posted on by Rob Larsen

There’s a back story to this one. I once failed to get video progress tracking working with a Flash video player and Big Expensive Analytics Company™ code. It was a real pain in the ass. We missed the deadline, wasted about 8 hours and eventually just dropped the feature. A frustrating experience for all involved.

With that in mind, then, it should come to no surprise that I returned to the problem when exploring the <video> element and related APIs. What was a fruitless 8 hours of hoping the Big Expensive Analytics Company™ code would “just work,” turned out to be about 30 minutes of light hacking to get it up and running with Google Analytics and HTML5.

By the way, between you and me the Big Expensive Analytics Company™ code never “just works,” even though that kind of feature is one of the reasons they get the big bucks for their product. I don’t really like working with Big Expensive Analytics Company™. I’m much happier with GA. It behaves as expected and is a lot easier to “get” right out of the box.

Anyway, here’s what I did. It’s hack-y, but works:
Continue reading “HTML5 Demo: Tracking Video Progress With Google Analytics” →

File Under Cool Tools: Record Page Load Video With WebPageTest

Posted on by Rob Larsen

As you could probably guess since Performance is one of the six site categories around here, I’m a fan of WebPageTest. You can imagine my reaction to the news that page load videos are now available from the service.

From Recording video with WebPagetest:

One of the things we like to look at is what a page looks like when it is loading, particularly if you are comparing a before and after or multiple sites to each other. This is particularly helpful when talking to the business about performance and sometimes the raw load times don’t adequately represent the user experience.

Up until now this has been a pretty manual process where we screen record a video while loading a site then load it up into Premiere and stitch it together.

Starting today, you can have WebPagetest record a video of a page load directly. It’s still in a pretty rough form and it’s going to be a while before it’ll be ready for the masses but what is there is already pretty powerful and extremely flexible.

read the rest of this article…

Very cool. I can think of two or three presentations where video of page load would have been super useful and will definitely find a use for the feature in the near future.