The important thing is that we're here now and the joy of getting together grandparents and grandchildren: priceless. Other than that Bulgaria is cool, unseasonably.

Today our family went to the yearly photo session with the girls. We took one shot that can be looked normally, as well as upside down, so I was wondering can you flip an image using a canvas tag. Turns out, yes, you can and it's pretty easy.

» Demo is here.

How to load an image in a canvas tag?

Start unpretentiously with an empty canvas tag:

<canvas id="canvas"></canvas>

Now the javascript. Two variables to store a handle to the canvas element and the 2D context of the canvas:

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

Now let's load an image into the canvas. Using the new Image() constructor you can create an image object, then set its src property to point to the location of the image file. Then set an onload handler for the image which is an anonymous function to be called when the image is done loading. There you put the image inside the canvas using the drawImage() method of the canvas context.

var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'zlati-nathalie.jpg';

You can also notice how the dimensions of the canvas are adjusted to match the dimensions of the image.

How to flip the image upside down

The canvas context provides a rotate() method. The rotation always happens around the top left corner of the image, so we first translate() the image to the bottom right. This way when the image is rotated, it fits back into the canvas. (There is also a one pixel correction, I have no idea why, just saw that the image wasn't flipping exactly otherwise). Assigning this functionality to the onclick:

can.onclick = function() {
    ctx.translate(img.width-1, img.height-1);
    ctx.rotate(Math.PI);
    ctx.drawImage(img, 0, 0, img.width, img.height);
};

C'est tout! Once again, the demo is here.

Always wanted to create a Firefox extension? Or a Firebug extension? Here's an easy way to take off the ground, no more excuses.

Firefox Extensions

The way most people get started with creating a Firefox extension is copying an existing extension and tweaking. This is not the best way as you can guess, the best way is to read documentation (where exists), but who cares about reading documentation. It's a fact that there are specific predefined files, directories and conventions you need to follow in order to get started with even the simplest "Hello World". Well, with my new tool, this is taken care of, so you can literally turn any piece of JavaScript (a bookmarklet for example) into a browser extension. Not bad, eh?

The tool

The tool is located at http://tools.w3clubs.com/ext/

It's basically just a simple form you fill out with your name, URL, extension name, etc, then a working extension is generated for you. You then install your own extension and just start modifying it. So your new extension is ready in under a minute.

Firebug extensions

I did this tool a while ago for personal needs and it has been working for me with no worries. Today before making it public, I thought of adding the option to generate Firebug extensions too. You knew Firebug is extensible and you can add new tabs, right? Yahoo!'s YSlow is an example of a Firebug extension.

I followed Honza's Firebug tutorials part I and II and it worked beautifully. Honza is a Firebug contributor and these tutorials are excellently written and highly recommended, even if you use my tool to generate the code, it's still a good idea to know why things are what/where they are.

So there you go, same tool for creating both Firefox and Firebug extensions.

Have fun with the tool, but be aware that writing extensions is addictive, don't say I didn't warn you. As always, any feedback is appreciated.

I've read somewhere Mark Twain was saying that "very" should always be cut out. I started paying attention to my use of "very" and found that a sentence only wins after I un-very it.

Today I came across this article listing 5 more words to cut out. So here's the list of no-no words, should make any editing process much easier:

• very
• really
• just
• quite
• perhaps/maybe
• that

Check the comments too, there was an interesting insight about words we use to "temper" our speech which we should probably omit when writing, words such as "slightly", "a bit", "somewhat".

And here's another excellent piece on editing I just found:

there is no good writing, only good re-writing

Sancta Simplicitas is a WordPress theme that uses YUI CSS utilities: reset, base, fonts, grids. It's very minimalistic in a sense that it's pretty much all white and simple. Hence the name. The theme is probably not usable by itself, but it's a base on top of which you can create your own themes.

When creating a new WordPress theme, people usually take the default Kubrick theme but I personally find Kubrick too much. So Sancta Simplicitas has a very minimal stylesheet and is based on the WordPress classic theme.

The fact that it uses YUI grids makes it trivial to tweak: fixed size vs full width, width of the sidebar, position of the sidebar. Basically right after the <body> there's this:

<div id="doc3" class="yui-t5">

Changing the id doc3 to doc, doc2, doc4 or doc5 will give you different widths of the content. The default doc3 is full width. Then changing the class name yui-t5 will give you different position and width of the sidebar. yui-t1, yui-t2 and yui-t3 put the sidebar on the left hand side, yui-t4, yui-t5 and yui-t6 place it to the right. You can go even crazier from here, nesting grids to get a two-column sidebar and so on, it's really easy with YUI grids and the docs are here.

Download Sancta Simplicitas

» sansim.zip

Examples:

d.strftime('%Y/%m/%d')
» en: 2008/04/25
» fr: 2008/04/25
» de: 2008/04/25

d.strftime('%A, %d %B')
» en: Friday, 25 April
» fr: Vendredi, 25 Avril
» de: Freitag, 25 April

There's also a demo to fiddle with.

I've previously had fun with kinda like the opposite: translating human-readable times into JS Date objects. Also here and here you have strtotime() look-alikes that take human-readable dates and turn them into Date objects.

In the end, if you want to write well I believe it all boils down to:

1. write - daily
2. edit - cut out needless words
3. read - everything you can lay your hands on

It's so simple and yet we keep looking for the "secret". Same with dieting: all boils down to a/don't eat junk and optionally b/exercise. But we keep looking for the shortcut, the miracle diet that will allow us to "take it off and keep it off" while lying on couch on front of the TV.

http://developer.yahoo.com/performance/rules.html

The list (used to be 13 items, then 14, now 34) is becoming too overwhelming so it's now split into categories:

• content
• server
• cookie
• css
• javascript
• images
• mobile

Act now to improve you page loading speed, your user will thank you later

This is a real story, but the actual names have been replaced in XXX, just not to make other people look bad

There is this site called xxxxxxxxx.com that charges you $XX membership access. Having just moved from Canada, last year I didn't have a US credit card to pay the fee and tried to use my Canadian visa. Problem: the input field for postal code (zip code) accepts 5 characters only, since the zip codes in US a like 90404, 90066 and so on. A Canadian postal code is like H0H-0H0 or H0H0H0, six characters. So seemed like I couldn't pay online. Or could I?

Checking the source code with Firebug gives me this:

From here it's trivial to change maxlength attribute of the input. Even with IE it's super easy just to type in the address bar something like:
javascript:document.getElementsByName('XXXXXXX')[0].maxLength = 100;

So I did change it, typed my Canadian CC#, Canadian postal code and submitted the form, crossing fingers that the developers who built the site were too pressed by deadlines to do a proper server-side validation. Lo and behold, it worked!

At the end with the help of an innocent client-side tweak I got what I needed (membership), xxxxxxxx.com got more business, and everybody's happy.

There's a lesson in this: sometimes being too strict in data validation for things that don't matter is just in your way.
And another: don't assume all your potential clients are from US.

The Yahoo! office is at a great location, Santa Monica, 23 blocks from the beach. And since I wanted to be close to the office, so that I spend more time with the family and less time stuck in the world-famous LA traffic, we wanted to find a place nearby.

It just occurred to me that (for the things that matter to us) the formula for apartment hunting in West LA is:

"Price, school, washer/dryer in unit: pick any two"

It's crazy how expensive housing is here. It's crazy how few apartments have washer in the unit (the idea of washing your baby's clothes together with some dude's smelly nikes is insane, but apparently totally acceptable here). And it's crazy how the school regions are divided - our street is in the region of a perfect school (rating 10 of 10), but two blocks from here, it's totally different (rating 4 of 10). And you're not allowed to pick the school, you just have to enroll in the school for your region.

I checked Burbank (another Y! office) and Sunnyvale (Y!'s HQ): nowhere, I mean nowhere, the situation is that tragic as here. For the same money and often much less you can get excellent apartments (or houses) with great schools. California is expensive, but LA and especially the beach areas are just beyond expensive.

Anyway, I can go on, but ranting isn't my style and it only makes me more miserable On the bright side you live close to Hollywood, Beverly Hills and celebrities (like I care), you can "make it" as an actor (which I'm not), you can hit nice clubs where some of your favorite bands played (never done it, kids and all) or strip clubs (not me, hello, I'm a father of two girls).

On the really bright side we can hang out with Cinderella in Disneyland (hello, I'm a father of two girls) and hit the beach. Which we do. We have to, I mean, to make up for the insane rent