You're funny, the Onion

Yeah, it's almost exactly the same amount of time to skip the ad as to just finish watching it.

Inventory of text styles for a given psd

TODO - create a tool to capture the inventory of text styles for a given psd

Bonus - batch mode: create an inventory of text styles for all psds in a directory (or at least all open psds).

On Site Comment

3rd party comment system

• fb comments
• disqus
• intense debate
• js-kit
• sezwho

self-hosted comments

• threaded comments
• subscribe to replies
• reply by email

Anti-spam options (for app-handled comments)

• akismet (free for personal use, not for commercial use)
• reCaptcha (free, bought by google)
• app's "own" captcha
• moderate all comments
• moderate comments if they contain N or more links (default: N=1)
• only allow comments from authenticated users
• autoapprove comments from a commenter after first approval
• moderate all comments for content items older than X days
• close commenting for content items older than X days
• ip-based throttling (system will only accept N comments per M units of time from a given IP)
• system-wide throttling (system will only accept N SYSTEM-WIDE TOTAL comments per M units of time)

Security by obscurity?

• require random special inputs
• disallow extraneous inputs
• require that a form take at least N units of time to complete (spammers may submit immediately, people take at least a couple seconds to type something)

Suggestions from "User-generated spam - Webmaster Tools Help"

http://www.google.com/support/webmasters/bin/answer.py?answer#81749

• rel#"nofollow"

Use a blacklist to prevent repetitive spamming attempts.

• Google often sees large numbers of fake profiles on one innocent site all linking to the same domain. Once you find a single spammy profile, make it simple to remove any others.

Add a "report spam" feature to user profiles and friend invitations.

• Your users care about your community and are annoyed by spam too. Let them help you solve the problem.

Monitor your site for spammy pages.

• One of the best tools for this is Google Alerts. Set up a site: query using commercial or adult keywords that you wouldn't expect to see on your site. Google Alerts is also a great tool to help detect hacked pages. The Keywords page in Webmaster Tools lists significant keywords found on your site, so it's a good idea to check this regularly for unexpected and volatile vocabulary.

// (end content from google.com)

Further thoughts and links

• Use non-descriptive form names (i.e., not "comment")
• http://www.projecthoneypot.org/
• http://www.stopforumspam.com/
• tiny orwell? (old)

Table Row Height Reported Wrongly

Turns out that in all current browsers there may be a 1 pixel discrepancy between the reported height of a table row and the actual height of the table row.

Not only that, but identical table rows in the same table may differ in height from each other.

IE9 First Look

The folks over at the IEBlog just posted An early look at IE9 for developers.

Synopsis:

Javascript: almost as fast as ff 3.5, about half as fast as chrome. They brag about improved js speed, then turn around and slightly downplay the importance of it, pointing to the fact that there are many other factors that affect page render time.

CSS: They explain why they only got 32/100 on the acid3 test: Regarding the technologies that acid3 tests, "many [are] still in the “working draft” stage of standardization". (Editorial: And what? You don't deign to implement things that haven't fully settled down to your satisfaction? You're not getting any brownie points with consumers or developers with that attitude, IE team. Remember the good ol' days when you *invented* and implemented the standards before anyone else? Remember how it was that risk-taking, can-do, forge-ahead attitude that won you the browser war? You won't win this one by waiting for the spec to become 100% final before you dare to touch it.) Then the good news: we've got rounded corners now. CSS3 selectors seem to be coming along swimmingly, passing 574/578 tests on css3.info.

But perhaps the best news?

"We’re changing IE to use the DirectX family of Windows APIs to enable many advances for web developers. The starting point is moving all graphics and text rendering from the CPU to the graphics card using Direct2D and DirectWrite. Graphics hardware acceleration means that rich, graphically intensive sites can render faster while using less CPU."

Preload Images the Right Way

Sure, all of us cringe a little when we see that phrase. Even so, for things like overlays—of which modals and tooltips are members—preloading the background images is a reasonable thing to do. (I still don't fully endorse it, more on that later.)¹.

I tried this preload code:

(function(){
    var i, img, imageLoader = {
        imagesToLoad: [
            'resources/css/images/btn-default-sprite.png',
            'resources/css/images/bg-tooltip-left.png',
            'resources/css/images/bg-tooltip-right.png',
            'resources/css/images/bg-tooltip-image-left.png',
            'resources/css/images/bg-tooltip-image-right.png'
        ],
        loadedImages: []
    };
    for(i in imageLoader.imagesToLoad){
        img = new Image();
        img.src = imageLoader.imagesToLoad[i];
        imageLoader.loadedImages.push( img );
    }
})();

The images didn't seem to be loading any sooner though. So I put a tracer in the list - an image source reference that I knew didn't exist. Then I fired up the page and looked at fiddler. (I would've looked at firebug's net tab, but I was troubleshooting IE6 specifically.) No 404s. So then I tried this code:

(function(){
    var imagesToLoad = [
        'resources/css/images/btn-default-sprite.png',
        'resources/css/images/bg-tooltip-left.png',
        'resources/css/images/bg-tooltip-right.png',
        'resources/css/images/bg-tooltip-image-left.png',
        'resources/css/images/bg-tooltip-image-right.png'
    ];
    $('<div class="no-print" style="position:absolute;left:-9999px"/>')
        .appendTo('body')
        .html('<img src="'+imagesToLoad.join('"/><img src="')+'"/>');
})();

And I got my 404.

For the purposes of this discussion, preloading doesn't mean loading the images before the rest of the page, it means loading them before they're used.

Beyond Sprites - The New WAR

I was just looking at a set of image files which are used to decorate custom form elements. I was analyzing how best to turn them into sprites¹. One particular set of 3 images caused me to dream up a 'new' web standard: a resource tar.

The set was a left end-cap, a right end-cap, and a repeatable middle section to accommodate a control of fixed height but variable width. The end caps were say, 20px wide, but the repeatable middle section image was - and only needed to be - 1px wide. Now, if I were to combine the 3 in a stacked sprite, the 1px wide middle section would have to be stretched to the 20px width to match the end-caps. True, widening the middle section would compress well in PNG or GIF format - as it was destined to become -- but these were just 3 of the 20 or so images. I could make the tiny sacrifices along the way and probably create 7 sprites out of the 20 images .. but that's still 7 http requests.

Maybe right now you're thinking what I was - there should be a way to send all 7 at once. And if there was a way to do *that* - then why muss about with all this sprite nonsense at all²? Just leave the images alone in their 20 separate files, but send them all in one jar. It would be the browser's responsibility to interpret a jar file that came from "http://site.com/path/to/jars/jarfile.jar" and had an internal directory structure of
/.
/img/
/img/1.gif
/img/2.gif
...
so that the images could be referenced in CSS as "http://site.com/path/to/jars/img/1.gif", "http://site.com/path/to/jars/img/2.gif"...

So what's with the title phrase "the new WAR"? Sending along the image assets for custom controls is just one application of this new "jar" or "war" file concept. Another is to send a packet that has the base images for a site: the logo and primary site decoration elements. Other people may conceive of other sets of resources that it make sense to combine and send along together in one packet.

¹ For an excellent description of sprites, including some fantastic examples, see The Mystery Of CSS Sprites: Techniques, Tools And Tutorials.

² Ok, the reason to still create the sprites is so that 'older' browsers - you know, the ones that don't have this as-yet unproposed feature - will still have 7 http requests instead of 20 (instead of the 1 they could have with this!)