Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. WebKit composites the element so that when rendering the transform, it doesn’t have to re-render sub-pixel anti-aliasing for every frame. This feature is a good thing in that vastly improves performance of transitions and transforms in WebKit.

But this affects anti-aliasing when there is no actual transform and hardware-acceleration is active on a element. i.e. banal 3D transforms like translate3d( 0, 0, 0) or scale3d( 1, 1, 1 ).

The solution is the same one for IE’s opacity bug: add a matching background to the affected background.

View fiddle: resolving anti-aliasing with hardware acceleration.

Hover over the image below to see the comparison for TUAW.

See also Webkit Hardware acceleration bleeding into subsequent elements, and how to fix it - The Official Posterous Tech Blog.

whois is a command-line utility.

whois icanhascheezburger.com

I’ve been familiar with jQuery’s data method for a while now. It’s awesome, allowing you to get and set data with a jQuery object.

$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });

$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}

It’s especially useful within jQuery plugins, providing a mechanism to save the plugin’s state.

While looking over jQuery UI plugin bridge, I found they were using $.data() instead of $.fn.data. Where as $.fn.data is a method for jQuery objects like $('#elem').data('foo', 52), $.data() is a utility function that uses an element as one of its arguments.

$.data( document.body, 'foo', 52);
$.data( document.body, 'bar', { myType: 'test', count: 40 });

$.data( document.body, 'foo'); // 52
$.data( document.body ); // {foo: 52, bar: { myType: 'test', count: 40 }}

Using $.data() can yield better much performance as you don’t have to wrap an element in a jQuery object. Testing on jsPerf, my results had $.data() performing 5x faster than $.fn.data(). Within Isotope, making this change is boosting performance of sorting by 2x.

cd -

Via The Designer’s Guide to the OSX Command Prompt by John W. Long.

Every now and then I open up Firefox solely to select table cells with Cmd+Click.

Use the -b flag with git checkout to create and checkout a new branch in one command.

# old way
git branch newbranch
git checkout newbranch

# new way
git checkout -b newbranch

I’m trying out developing without MAMP, and relying on the frameworks that are built into OS X. Here’s how I got Apache, PHP, and htaccess working:

• Install Apache/PHP/MySQL on Snow Leopard
• Enabling .htaccess in OS X

Additionally, I changed the document root to point to my projects folder.

Within /etc/apache2/httdp.conf it can be changed in:

DocumentRoot "/Users/username/projects/"

And then in /etc/apache2/users/username.conf

<Directory "/Users/username/projects/">

Per the HTML5 spec, you can access elements via their id. For example, on dropshado.ws, which has markup of <section id="posts">...</section>, plugging in window.posts or posts in the console will return the HTML element.

document.getElementById('posts')
// >> <section id=​"posts">...</section>​
window.posts
// >> <section id=​"posts">...</section>​
posts
// >> <section id=​"posts">...</section>​
posts === document.getElementById('posts')
// >> true

From my brief tests, WebKit and Opera support this, not Firefox 4.

Global HTML element with ids fiddle

The good news is that this is a convenient for debugging, no need to type out document.getElementById. Bad news is that its not especially reliable. See also this WHATWG thread polluting global namespace and other concerns.

git remote show origin displays info for your remote origin repo. I typically use this when I want to get the URL or the remote repo. Here’s what I get in my HTML5 Boilerplate repo:

$ git remote show origin
warning: more than one branch.master.remote
* remote origin
  Fetch URL: git://github.com/paulirish/html5-boilerplate.git
  Push  URL: git://github.com/paulirish/html5-boilerplate.git
  HEAD branch: master
  Remote branches:
    master   tracked
    mobile   tracked
    stripped tracked
  Local branch configured for 'git pull':
    master merges with remote master
              and with remote master
  Local ref configured for 'git push':
    master pushes to master (local out of date)

TextMate has an beautify command built into its default JavaScript bundle ⌃⇧H (Ctrl+Shift+H). To change the tab size used by the beautifier:

1. Crack open the Bundle Editor. Bundles > Bundle Editor > Show Bundle Editor or ⌃⌥⌘B (Ctrl+Cmd+Opt++B)
2. Select JavaScript > Reformat Document / Selection
3. Add a second argument for the number of spaces to js_beautify($input)

For mine, with two space tabs, it looks like:

print js_beautify($input,2);

If you want to hack the PHP script that makes it all happen, you’ll find it in /Applications/TextMate.app/Contents/SharedSupport/Bundles/JavaScript.tmbundle/Support/lib/beautify.php

Thanks to help from Ryan Stout.

Re: sans-serif differences, as of version 11.10, Opera now uses Helvetica as the default font for sans-serif for Macs. See changelog for Opera 11.10 beta. I’ve updated the previous post accordingly.

Thanks to Divya Manian for confirming the change and tracking down the changelog and being the awes.

MDC > DOM Reference > cssRule.cssText:

cssText returns the actual text of the style rule.

Found in a fiddle by Divya Manian.

It’s used like element.style.cssText. From what I understand, it’s the equivalent of getting the string returned by element.getAttribute('style'). I haven’t found a use-case for it yet. element.style already returns a object.

View cssText fiddle

I’ve finally clued in to setting and using simple strings within Terminal. Set a string:

name='David DeSandro'

No spaces around the =. Quotes are required if your string has spaces. Reference it with $

echo $name
# will output `David DeSandro`

For example, when creating a new post, I have to reference the same long filename several times.

dropfile='_posts/2011/2011-04-12-terminal-strings.mdown'
mate $dropfile
git add $dropfile
tumblr $dropfile