"Dock to right" - Handy for Mobile, iPad, and Fixed-Width Sites

You fire up chrome to test mobile project x, or iPad project y. Next thing you're doing is undocking web inspector so isn't constrained to the dimensions to which you've resized the browser. But then you have to cmd-` or alt-tab between the console and the page you're working on. Annoying. And if you happen to have two of these, it can be even more annoying to keep track of what undocked web inspector belongs to what page.

No more!

To dock to right, open the Web Inspector, click on the gear icon at the bottom right, and check "Dock to right". This feature was made available in the stable channel on Mar 28/v18, so you should either have it or just need to update. You may also be able to accomplish this through the UI element that would normally undock the console - instead of just clicking it, click and hold, and it turns into a little iconized menu where the menu item is a toggle for dock right / dock bottom. One long click vs. 3 clicks - even better!

This feature is fantastic for working on mobile and ipad in portrait mode, but it can also be handy for working on fixed-width sites since they're usually <1024 wide, and you've probably got 1920 pixels of width to work with.

Thanks Chrome/Webkit devs!

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.