No Mod Required

Ultraviolet (Unrated, Extended Cut) So…. right after I watched Resident Evil: Extinction, a film I was biased by my Resident Evil video game addiction into liking, I watched a somewhat similar film built around the same lead actress- to very different results. Without the benefit of the emotional buy-in the RE video game series brought to the table and with an even worse plot and sometimes goofy effects I don't have all that much nice to say about this comic-booky (but not actual comic based) film. The best part of the film is comic-book cover montage in the intro.

That's not a good sign.

Sure, there are some okay action scenes and the film is occasionally pretty stylish, but man was this thing ridiculous. I've got years of bad (and not so bad) science fiction under my belt and even I had a hard time not groaning at some of the plot devices at play here.

I can't say I hated it, but I'd hate to say it was any good.

Resident Evil - Extinction (Widescreen Special Edition) As I've mentioned before I'm a huge fan of the Resident Evil game series so I'm basically part of the built-in audience for this franchise. No matter how bad it is and how silly it might seem to people who haven't spent literally hundreds of hours blasting zombies with a shotgun, moving statues around and piecing together random clues about the Umbrella Corporation; I look at these films and get all geeked out.

Literaly quotes from last night's viewing:

"Claire Redfield! It's Claire!"

"Oh snap! A Tyrant!"

So, yeah. If you're not a complete RE geek like me, then you're probably not going to like this movie.

Me? I'm thinking about buying the films on DVD.

I swear.

I've just seen all 45 potential flavors of awesome wrapped up into a single MAKE post and I'm going to share it with you.

"This is interesting - it seems that a group of artists have celebrated 1-31-07 in their own way and have created a series of political themed LED art sculptures and (you guessed it) placed them all over Boston.

Click through for the LED-goodness-

MAKE: Blog: LED art all over Boston today

Watch as I shamefully steal my favorite of the images:

Make with the clicking for the full glory.

What follows is a YSlow based performance survey of 200 top web sites. The list was seeded seeded by the the Compete Attention 200, a list based on the amount of time people spend at certain sites- as opposed to page views, etc. It's a little out of date, but it's as good a list as any to choose from, so I went with it (especially since sites like many of these where people spend a lot of time and that serve a lot of big media would benefit from far futures expires headers, CDNs, etc.)

For the most part I just dropped the URL in and went to the home page once, recording the YSlow score I saw there. With sites that had country specific home pages and "choose your country" gatekeeper screens, I clicked through to the US home page.

Sites marked with an asterisk were bought/merged, etc. and no longer pointed to the original Compete Attention 200 URL. Blank YSlow grades mean I couldn't get the report to actually run. All three sites simply hung up when the performance button was pressed.

Other than that? Read it and weep:

As a note, while compling this list, the funniest combination was going from alt.com directly to hallmark.com. "I love when a man begs for mercy" straight to "release your inner cupid." Talk about balancing extremes.

As for the breakdown- the vast majority fail with the average score being 51.12.

There are only 5 As, 6 Bs, 14 Cs and 31 Ds. The rest are all Fs, including  16 sites that scored in the 20s.

The big winner, is of course, Google.com which scored 99. The biggest loser? Other than the user, gamespot.com managed to score a 21. Check out the reports:


So as to not end on a negative, congrats go out to all the As and Bs…

• google.com
• craigslist.com
• starware.com
• mywebsearch.com
• invisionfree.com
• overture.com
• live.com
• yahoo.com
• icoke.com
• wildtangent.com
• gottahavetickets.com

Yeah, I'm still trying to finish up the digital version, but at the same time I've begun to really wrap my head around the style for the poster I want to do.

Here are a couple of sketches that hint at what's to come:

They'll be finished differently, and I'll pay greater attention to making the lighting accurate, but those definitely illustrate the direction I'll be moving in with this project.

Daim is a style master.

via who got it via [where you can also read an explanation]

image via de.wikipedia.org

From the landing page:

The uproar over the use of what are generically known as "PEDs" (performance-enhancing drugs) has become so clamorous that it is drowning out those few sources seeking to convey the facts about these matters. Great numbers of assertions that are dubious or demonstrably wrong are being parroted by a seemingly endless parade of individuals and entities all of whom have manifestly done no actual research into the matters on which they so loudly, and usually savagely, declaim. This situation has been sorely exacerbated by the recent release of the so-called "Mitchell Report", in which most of those dubious and false assertions have been embalmed as they were self-evident axioms. The purpose of these pages is to methodically dissect those claims and assumptions and compare each with what is actually known about it.

Lest this degenerate into what lawyers call a "he said/she said" controversy, I have taken great care throughout to support each analysis made here with extensive citations, most or all of a scholarly nature. The vast majority of pontification on PEDs has consisted of the ignorant quoting the ignorant; here, nothing is cited as support unless it comes from a dispassionate, scientific examination. In each case, I give not only the citation and a relevant quotation, but a link direct to the source, so that the full context is clear.

The point of these pages is not to advocate this or that policy or point of view, but to provide a comprehensive look at the facts in these issues, so that those who want to decide policies or adopt points of view can at least do so from a sound basis. The house whose foundation timbers are wormy is not safe to stand in. These pages are vermicide.

Read more:

Steroids, Other "Drugs", and Baseball

Is demand for the iPhone in America already starting to wane?

AT&T, the exclusive American carrier of the iPhone, activated just 900,000 iPhones during the fourth quarter, the company revealed during its earnings conference call Thursday. It wrapped up the year with "just at or slightly under 2 million iPhone customers," according to company executives.

Apple announced at Macworld that it has sold 4 million iPhones through the middle of January, and Toni Sacconaghi, a financial analyst with Sanford C. Bernstein, thinks the gap between the figures means that Apple might have a demand problem. He released a research note Thursday after AT&T's earnings saying that the carrier's figures imply that an awful lot of inventory is building up at Apple's channel partners.

Read the rest:

Report: iPhones piling up at AT&T stores

For my money, while it's a lovely device the lack of a keyboard and the lack of third party apps makes it an unattractive option. I couldn't live without my Treo and a healthy part of that is the wealth of third party applications I'm able to jam onto the thing.

And yeah, I'm sure mobile Safari would make me all tingly with it's slickosity, especially when compared to the sickly Blazer, but to be honest it probably wouldn't matter all that much. most of the time, if I'm surfing a site on my phone I'm not usually interested in bells and whistles anyway. I'm usually just looking for info, and Blazer's optimized mode is usually better for that than a full blown website anyway (Just another reason those black screen iPhone commercials drove me nuts. I wanted yell at the screen sometimes since they would imply that the only way you could quickly browse to a site to get someone's name is with the magical powers of the iPhone. )

The thing that's surprising is that I really felt like I was in the minority and that there was the usual insatiable Apple technolust for the iPhone. Of course, the numbers could be wrong and the demand could be as insane as I expected it to be, but if the numbers are accurate that's sure a lot of unsold iPhones.

Of course, thinking about it, I only know three people with iPhones. I see more Blackberries and Treos than that at pretty much any meeting with more than maybe seven or eight participants… Not a huge sampling of course, but it still seems like a small number.

USATF - Events - 2008 AT&T USA Indoor Track & Field Championships

2008 AT&T USA Indoor Track & Field Championships

February 23-24, 2008
Reggie Lewis Track & Athletic Center - Boston, Mass.

The Reggie Lewis Track & Athletic Center at Roxbury Community College will host the 2008 AT&T USA Indoor Track & Field Championships on Feb. 23-24. The concluding event of USATF's Indoor Visa Championship Series, the AT&T USA Indoor Track & Field Championships is the world's oldest indoor track championship, with the first meet being held in 1888 in New York.

It should be a good time. I've never seen track live before so it should be a cool experience. It'll also get me psyched up for track at this year's Olympics. Track at the Olympics is always a treat for me and seeing some live in an Olympic year will be fantastic prep for the games.

I used to use AddThis for social bookmarking here on the blog. And by "used to" I mean up until two days ago :-). Over the past couple of days I've been working on setting up my own version to use here and throughout the rest of the site. I launched it yesterday.

If you're on the single version of this post (as opposed to a category index or the blog home page) you should see it in all its simple glory below in the post info box.

Why bother since AddThis does what it's supposed to do and is dead easy to implement? Well, while the number isn't really important (only the underlying performance issues it uncovers really matter) it was pointed out recently that I (used to) get a 61 YSlow score for my blog pages (thanks Ben!) One of the contributing factors to that was the use of the AddThis widget which added another domain lookup and several extra HTTP requests for uncompressed files with no expires headers. I looked at all that overhead and inefficiency, looked at the functional complexity (or lack thereof) of the piece and decided I would just roll my own. Beyond the fact that it was just a fun little thing to do, doing my own saved 16 HTTP requests (including 13 Images,) removed a domain lookup and required a total of 0 (zero) extra files to implement. How? I obviously used my existing JS and CSS files and (most importantly) added the icons to my sprite. Those already come along with the page so it's just an extra 1-2K of image and script on top of my existing site infrastructure.

I didn't do anything particularly fancy (there's always time for that later :)), but if you're curious here's the basics of the implementation.

Here's the WordPress code, where we use the_permalink() and the_title() to build out the links:

<div class="shareThis">
Share This :  <a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="delicious" title="save to delicious">Del.icio.us</a>
<a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="digg-this"  title="digg this!"> Digg</a> 
<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="reddit"  title="submit to reddit">Reddit</a> 
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink();  ?>&title=<?php the_title(); ?>" class="stumble"  title="stumble this!">Stumble It</a> 
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();  ?>&t=<?php the_title(); ?>" class="facebook"  title="share on facebook">Facebook</a>
</div>

I chose those five because they were (a) amongst the most popular choices I saw in my AddThis stats and (b), with the exception of Facebook, they have all produced serious traffic spikes here. Facebook has never actually driven a lot of traffic for me, but it was a regular option in AddThis so I included it here.

As for the markup- as you can see, it's pretty stripped down. All I use are some anchors and a div to hold them. I then use a couple of common (for me) CSS techniques to get that stripped down markup styled up correctly. Here's the CSS:

.shareThis {
font-size:85%;
font-weight:bold;
color:#666;
background: url(http://media.drunkenfist.com/img/sprite2.png) -315px 0 no-repeat;
/*set position to relative in order to 'catch' child nodes at this level*/
position:relative;
padding:2px;
border:1px solid #ccc;
width:175px;
height:15px;
margin:auto;
margin-top:5px;
}
#moviespg  .shareThis,
#grafpg .shareThis,
#comicspg .shareThis,
#artpg  .shareThis{
/*there's a slightly different context for this widget on the rest of the site*/
font-size:75%;
}
.shareThis a {
/*I love absolutely positioned anchors with display:block*/
/*I use them all the time*/
position:absolute;
width:15px;
height:15px;
/*hide the text*/
/*I might switch this to opacity if the outlines bug me*/
text-indent:-9999px;
top: 2px;
}
/*position the individual anchors on top of their icons*/
/*this is like a new style 'image map'*/
.shareThis a.digg-this {
left:92px;
}
.shareThis a.delicious {
left:110px;
}
.shareThis a.facebook {
left:165px;
}
.shareThis a.reddit {
left:129px;
}
.shareThis a.stumble {
left:147px;
}
.shareThis a:hover {
/*hide the default hover since it obscures the icon*/
background:transparent url() !important;
/*safari didn't like the above, so I threw a little opacity in there*/
opacity:0;
}

I'll break out two of my favorite techniques in play.

Position:relative with no offset and absolutely positioned child nodes

The key with this technique lies in the behavior of absolutely positioned elements and the way that relatively positioned elements behave when there are no position coordinates (top, left, right, bottom) supplied.

Absolutely positioned elements search for the first parent element with a position other than static to begin to calculate it's positining. In the above example that's the containing div. The thing is, the containing div, while set to position:relative, has no offset coordinates supplied to it, which means it behaves exactly as if it were the default, static positioning. In other words it's still firmly in the normal flow of the document.

In the situation above the benefits of that might not be all that evident, but imagine this layout:

With the middle content div set to position:relative and the two sidebars set to position: absolute inside of it, that layout can be achieved with a minimum of fuss. The header, content and footer DIVs are just in the normal flow. They will expand and contract as needed and won't need any special handling to grow as long as might be needed by the site content or any conditional messaging. The content DIV is set with enough internal padding set to accommodate the sidebars and the sidebars, as long as they don't need to control the height of the document, can be placed with pixel perfection wherever they need to go. No need to mess with floated content or anything fussy like that. Just two nice and stable absolutely positioned elements mixed with a normal block item document flow that would have worked in 1999. That layout will produce very few surprises.

Of course, if the layout requires two or more of the columns to be able to control the height then this technique is invalid, but if it's as simple as the one above, go nuts.

Another place I use that technique is with headers or mastheads. Headers often have three elements- a logo, a main menu and a utility menu. With that layout I will use a relatively positioned div for the container and then place three absolutely positioned items inside for the three elements: an image replaced header (h1, h2) for the logo, and two unordered lists for the two menus. The markup might look something like this:

<div id="header">
   <h1><a href="/" title="return to the home page">Our Company Name</a></h1>
   <ul id="main-menu">
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
   </ul>
   <ul id="utility-menu">
      <li>menu item</li>
      <li>menu item</li>
     <li>menu item</li>
   </ul>
</div> 

And would render something like this:

So straightforward and it allows me to move things around with perfect precision.

Modern "Image Maps"

This ties in with the above but focuses entirely on using anchors as absolutely positioned block level elements to create "hot spots" in much the same manner old school image maps do. In the High Performance Web Sites book, Steve Souders talks about talk about using image maps to reduce HTTP Requests. While from a performance perspective that's a valid approach, image maps as a whole are out of favor and are rarely (if ever) a technique I'll look to use.

The following is a somewhat more accessible, SEO friendly method of achieving the same result.

A note about the example above, before I point out one that's a little more along the lines of my normal usage of this technique.

While I definitely like to use unordered lists as a container for menus and the like, there are plenty of situations where there's really no need for a containing framework. While in this example you could make an argument that I should have a list around the links (it's a list of links after all,) my first concern with this component was to create something really stripped down code-wise. I was trying to improve performance after all, so I went with the least code possible, sacrificing some potential semantic meaning in the process.

If I weren't flexible about these things I'd have to quit my day job and go work for a standards body

Anyway, the following image and code sample will outline a really useful implementation of this technique.

Here's some HTML:

<div class="messaging">
     <h2>The Toughest Challenges, The Most Interesting Ideas</h2>
     <a href="/register-now">register now</a>
</div>

Here's some CSS:

#copy .messaging h2 {
text-indent: -9999px;
height: 211px;
width: 778px;
position:relative;
}

#copy .messaging a {
position: absolute;
display:block;
text-indent:-9999px;
left: 200px;
top:150px;
height:28px;
width:140px;
}

And this is what it all looks like:

As you can see with the red highlight, the absolutely positioned anchor perfectly fits on top of the hot spot, just like an old school image map; except in this case the meaning of the link is clearer in a text browser or to a search engine spider than it would be just using an image maps alt attribute.

Cool stuff.

To me at least…

I might actually turn this into a WordPress plugin, by the way. I'm like 25% of the way there already. Not that we actually need another one of these things of course. I'd do it just for the pure enjoyment of creating a nice solid piece of code that can be used around the internet. If I do, I'll document the whole process here