Jon Aquino's Mental Garden: February 2007

Saturday, February 24, 2007

Workaround for the Safari FOUC bug

The Safari browser occasionally exhibits the dreaded Flash of Unstyled Content (FOUC) bug, in which the webpage is unstyled black-on-white text for a second or two before the styles kick in. This happens because Safari loads CSS and JavaScript in parallel - if the JavaScript accesses certain properties, it triggers a page render in Safari, even if the CSS hasn't fully loaded. Hence, the Flash of Unstyled Content. (Firefox does not suffer from this because it loads CSS and JavaScript in series rather than in parallel).

A workaround is to hide the body before the CSS files have loaded, and show the body afterwards:

body { display: none; }

body { display: block; }

Save these lines as safari-fouc-workaround-1.css and safari-fouc-workaround-2.css, respectively. Then place the following at the top of the <head> section, before your CSS declarations:

<link rel="stylesheet" type="text/css" media="screen" href="/safari-fouc-workaround-1.css" />

And after your CSS declarations, at the bottom of the <head> section, put:

<link rel="stylesheet" type="text/css" media="screen" href="/safari-fouc-workaround-2.css" />

(Even better, add these lines only if you detect that the browser is Safari.)

Update: The best way to implement this workaround is as follows:

Put the following in <head>:

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== FALSE) { ?>
    <!-- First part of FOUC workaround -->
    <style type="text/css">body { display: none; }</style>
<?php
}

and the following at the end of your main CSS file:

/* Second part of FOUC workaround */
body { display: block; }

Friday, February 23, 2007

RSS Feed for RFC 2616 ("Hypertext Transfer Protocol -- HTTP/1.1")

If you design software for the web, reading RFC 2616 ("Hypertext Transfer Protocol -- HTTP/1.1") is supposed to be good for you.

It looks to be a dry and lengthy document, so I've chopped it into sections and created an RSS feed for it. Enjoy the pain with me - subscribe today!

Sunday, February 18, 2007

Memorizing pairs is far easier than memorizing single items

Suppose you have a list of things you want to memorize (like the first-initial-to-conversation-topic list from The Art of Mingling):

A - Art
B - Baby
C - Cat
D - Danger
E - Energy
..........

I was getting frustrated trying to keep these 26 items in mind: "OK, A is for Art, B is for Baby, C is...shoot (looks) Cat, D is for...shoot (looks) Danger, E is...shoot..."

Well it turns out that if you double up the words, they become a lot easier to memorize:

Art baby
Cat danger
Energy food
Glowing host
Ice jewelry
..........

It then took only took a few minutes for me to master the list. I suppose it's because pairing up the words forces us to create an association between them, and associations are naturally "sticky".

Here's the rest of the list. Great triggers for conversation starters; trigger them off the first letter of someone's name, of something you see in the room, etc.

kill, laugh,
magic, noise,
old, practice,
quiz, real estate,
sun, toes,
utopia, vocabulary,
winner, xerox,
yell, zoo

Wednesday, February 14, 2007

On having reached my 30th year

Tonight is the eve of my 30th year.

To all who have not yet experienced turning 30, it is an event both frightening and exhilarating.

And to those who have, whose company I now join, a toast: to your health, prosperity, and honor.

Tuesday, February 13, 2007

DailyLit: A page a day, delievered to your email

Trying out a neat service called DailyLit, which delivers a page of a book to your email inbox each day.

I'm subscribing to Bennett's How to Live on 24 Hours a Day (14 parts), and Tolstoy's War and Peace (675 parts). War and Peace starts by jumping in on an interesting conversation.

Here's a quote from How to Live on 24 Hours a Day that arrived in my email this morning: "The supply of time is truly a daily miracle, an affair genuinely astonishing when one examines it. You wake up in the morning, and lo! your purse is magically filled with twenty-four hours of the unmanufactured tissue of the universe of your life! It is yours. It is the most precious of possessions."

Monday, February 05, 2007

RSS Feed: Firebug source code, 100 lines a day

Several months back, my colleague Phil McCluskey recommended that I check out the Firebug source code. "It's beautiful," he said. Then I read today that the Firebug code is available from Google Code.

So I decided to make an RSS feed out of it: Firebug source code, 100 lines a day. It's syntax-colored, for your viewing pleasure.

Let's learn from it together - subscribe today! (Note that the feed begins on the day you subscribe).

Sunday, February 04, 2007

Proportional fonts for programming

Yesterday I mentioned the Consolas monospaced font from Microsoft (actually, some consider Inconsolata to be slightly better, and it doesn't require you to install Visual Studio).

Anyway, it's often a nice change to try a proportional font for programming. Here's Franklin Gothic Book, with the PLEAC color scheme from jEdit's Editor Schemes plugin.

Publishing a personal zeitgeist using data from Google Search History

Every year Google publishes its "zeitgeist", which is a list of the most popular searches and search trends for the year. If you're one of those who like to introspect and to tell others about your interests (extrospect?), you might want to publish your Personal 2006 Zeitgeist, which is basically what Google Search Trends shows:

For Jonathan Aquino, 2006 was the year of Dojo, which is a Javascript programming toolkit you can use to make parts of your webpages fade in and out, load things in the background, and generally fly around. Yahoo evidently has a very nice Javascript toolkit as well - need to check that out sometime. The Prototype toolkit barely hung on, at #10 on the third list.

It was also, to a lesser degree, the Jonathan Aquino Year of CSS, in which I grew in my appreciation of the power of Cascading Style Sheets for styling website color schemes, typography, and graphics.

Wikipedia and Amazon were oft-used tools in 2006, as of course was the matchless PHP documentation (with some fantastic user-contributed notes).

There wasn't much in the way of non-programming searches for Jonathan Aquino in 2006. The Ditto Clipboard was found to be an excellent clipboard-history tool (provided you set a limit - I chose 30 days - for performance). And there were occasional excursions to danah boyd's Best of Apophenia site for sociological insights into social networking, though that too was work related, and perhaps of questionable benefit.

Finally some search-activity charts. Searching stopped at midnight, though occasionally went to 1AM. Here too you see evidence of a regretful all-nighter. Searching resumed in earnest at 9AM.

Google personalized start page - giving it a second chance

Today I decided to give Google Personalized Home a second look:

I've found that start pages don't seem to be that useful to me - they get in the way of where I want to go. So I usually set my start page to about:blank, or to Google. But on a whim, I decided to try Google's customizable start page. There are dozens (hundreds?) of "gadgets" that you can add to your page - a lot of it is junk that can slow down the page load, and a lot of it you can already get for your feedreader - but I did find some gadgets that might be useful for a start page.

At the top left I have the Interesting Items For You gadget, which is based on my recent searches. There are links about CSS ("Vertical Centering in CSS"), Catholicism ("Vatican: the Holy See"), and ergonomics ("Posture, Movement and Ergonomics"). To the right is the Search History Trends: Last 7 Days gadget. It's kind of neat to be reminded of what I've been searching for recently.

At the bottom left is a World Clock showing times for Victoria where I live, Paris where one of my colleagues lives, and the Philippines where my family is from.

And at the bottom centre is My Real Age which shows your age to three decimal places. It "concentrates the mind wonderfully", as Boswell said of knowing one's mortality.

On the far right is the Weather gadget, showing light rains in Victoria, clear skies in Paris, and a mix of sun and clouds in Palo Alto.

* * *

I'll try this start page and see how it goes. It loads relatively quickly, and is a bit more interesting than the basic Google page - although that has its own elegance.

EverNote is Jef Raskin's Canon Cat

In 2000, Jef Raskin wrote a book called The Humane Interface on user-interface design, and one of his visionary examples was the Canon Cat - an ideal computer that had no concept of files or filenames. Rather, you simply turned it on and started typing. I've always thought mandatory filenames an unnecessary burden.

Well, after using the free version of EverNote for a couple of years, I can confidently say that this is the modern equivalent of Jef's Canon Cat. If you have a thought and want to jot it down, or are in the middle of a phone call and need to write down some information, you switch to EverNote with Ctrl+Alt+N (it appears instantly) and start typing. There are no filenames to think up, and no need to save (it saves automatically). The EverNote people call their product an "endless tape", and you can use its incremental search to find old notes.

Mapping numeric keypad to mouse buttons, cut/copy/paste, etc.

The RSIGuard break-timer software I'm trying out comes with a mouse auto-clicker (clicks whenever you stop the mouse) and a keyboard remapper (which includes drag-lock). It's quite comfortable - I move the mouse with my left hand without clicking - it clicks for me whenever the mouse stops. This may sound dangerous, but in practice it works quite well.

With my right hand, I use the numeric keypad, which I have remapped as follows:

You can use any mouse - I find that the Evoluent Vertical Mouse works quite well. In the past I hated it because it gave me various aches (probably from sideways clicking), but that's no longer an issue when you use an auto-clicker.