Archive for July 2009

23 July 2009

CSS Cards

After looking at the Scripty 2 demo, I wondered how hard it would be to generate CSS to draw playing cards, instead of relying on images.

The fruits of my experiment are now up, so you can see my Deck of CSS Cards. The cards are all just empty <div><span></span></div> tags with the appropriate classes on the div; CSS does the rest.

Note also that there are no images here, only Unicode, and you need only adjust the font size of the “card” class to scale up the card evenly.

Of course, it only works if you have proper CSS support for :before, :after and content, so IE7 and below get nada, but that’s the price of progress.

And then, because why not, I took it one step further and made a CSS/Unicode Tarot deck. I had to, um, take some liberties with a few of the glyphs, since Unicode has its limits, but it’ll do. I think perhaps next I’ll combine this with some JavaScript and make a DHTML fortune teller.

Posted in Misc | 2 Comments »

16 July 2009

IE Sicks

It’s been a week of big news on everyone’s favorite albatross, IE6.

First, YouTube is phasing out IE6. Facebook, another big-ticket site, has already been warning users to move away from IE6.

There was a lot of Web buzz about six months ago when a Norwegian site officially stopped supporting IE6. That was all fine and good, but, well, it was a Norwegian site most people had never heard of, and so unlikely to motivate users to switch. By contrast, according to this week’s Newsweek, YouTube is the third-biggest site on the Internet, with 426M visitors per month, so it’s pretty meaningful when a site like that decides it can start dropping support for a browser. When users can’t access YouTube or Facebook with IE6, maybe that will finally be the kick in the pants they need to upgrade.

Second, the crew at Digg did some great research on their IE6 users. They found that IE6 was about 10% of their traffic and was using a lot of development time, but accounted for only 1% of the traffic that was actually using Digg’s bookmarking features. So they polled their IE6 users to find out why they were still using IE6. They found that 69% said that work was forcing them to use it, either by stating they had to or by not giving them admin access on their computers.

Mind you, Digg users are likely to be a tech-savvier lot than users overall, where I suspect you’ll find more users who are naive or stubborn about browser upgrades. Still, this does shine a light on IE6 usage – that it may be corporate IT departments who pose the biggest obstacle to getting rid of IE6, not average users digging in their heels.

Posted in Browsers, IE6 | 1 Comment »

14 July 2009

jQuery UI and Scriptaculous

We use Scriptaculous at my day job, so we’re pretty excited about Scripty 2‘s release. We chose Prototype and Scriptaculous because, at the time, they had the best options for visual effects, and arguably Scripty still does, especially with version 2. Still, I’ve been curious about jQuery UI, which was still nascent at the time we picked a library, and has come a long ways since.

Recently I was thinking about the jousting minigame from the classic 1986 video game Defender of the Crown, because I’m that kind of nerd, and realized that I could probably do a decent simulacrum of it nowadays with DHTML. Well, with DHTML and a decent effects library. So I decided to use this as an excuse to play around with jQuery UI and kill two birds with one stone.

The result isn’t finished yet; I’ve got the basics down, but still need to fine-tune the effects and transitions and add a lot of chrome. But I’ve been pleasantly surprised at the positive transfer between jQuery UI and Scriptaculous. This shouldn’t be a surprise, really, since the two libraries are cousins, each learning from and copying the other to their mutual benefit, and they frequently have similar syntax. Moreover, their lists of basic effects are pleasantly similar.

There’s been some negative transfer as well; Prototype’s $ function, for instance, extends the native DOM object that it returns – while jQuery’s $ function only provides jQuery features, meaning that you can’t use methods like innerHTML(). (Not that you should often have to, given jQuery’s html() method, but still, this threw me off.)

Frustrating, though, has been the discovery of how often I get an animation working great in Firefox, only to watch it fail horrendously in IE7. One of the big advantages of using a library is to let the library take care of browser differences (e.g. CSS opacity) for you, and it’s always disappointing when the library doesn’t carry through. (Not, mind you, that I lay the fault here at the feet of jQuery, since I’ve run into the same problems with Prototype/Scripty.) One animation read in the background color value of an element whose CSS class explicitly defined a color; Firefox returned the correct value, while IE insisted its value was “rgb(0, 0, 0)”. Thanks, IE.

Posted in JavaScript | No Comments »