Google Font API and Directory

Nobody knows why but Google has always been good for developers. They give things to us, we would never expect from a large corporation, at least not for free. Just look at the javascript tools they released, or Google Analytics. Recently I found something that will again ease the pain of webdeveloping: Google Font API and Directory.

A new website design arriving in your mailbox is always a stressfull moment. Will it be complex, or will it have features you’ll strugle with cross-browser wise. Designers also tend to use pretty fonts, instead of widely available fonts, who do look good, but are a pain to implement in a cross browser way. This is where Google comes in with a helping hand.

The API allows you to load font from Google’s font directory, as well as other providers. First thought on this aren’t too positive, the fonts all seem a bit pixilated, and they doesn’t look very high quality when viewing the demo texts. That aside, they have made it very easy to implement them, all you need to do to laod a font from Google font directory is add a link tag.

<head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
        body {
            font-family: 'Tangerine', serif;
            font-size: 48px;
        }
    </style>
</head>

What the link does is send a request for a stylesheet to google, which in turn renders a stylesheet for the specific browser doing the request. And it’s as ready as it’ll ever be.
More information can be found here

ASP MVC2 typesafe generic listbox renderer

I was putting together my first listbox in asp.net mvc2, and found that it would be quite tedious doing this a lot. Beeing a programmer, and thus lazy, I started thinking about a solution for this. Here’s what I came up with.

Continue reading »

jQuery Event Propagating

For a website I helped building at work I had to make some tabs hanging from to top of the browser viewport. When the mouse hovered over any of these tabs, a content pane slides down. I’ve created a plugin to do this which I’ll maybe write up and post some time. For now I’m going to walk through some of the problems I encountered with event propagation.

The whole contruction is pretty standard: a container div containing all content panels, which are hidden and displayed at appropriet times. followed by an ul for the tabs. These are at the bottom for obvious reasons. To let the panel slide down I used the mouseover() function on the li elements of the tabs. To hide the panel again I used the mouseout() function on the container div, this ensures that the panel does not close when moving the mouse to different tabs or over the content of the selected tab. This is where it went wrong, when moving from tab to tab or our of the tabs into the content panel, the panel closed. After some fiddling and debugging I found our that the .mouseout() event comming from the tab elements propagated to the surrounding container, triggering it’s .mouseout() and thus closing the panel.

Now istead of digging into the API and documentation I stubournly searched for any workaround or fixes, without success I might add. I tried stopping the event manually, and setting event target parameters, but nothing seemed to solve the problem. When the frustration took the upper hand I posted my problem on stackvoerflow.com, and the answer came within minutes (!). The problem lies withing the function I chose, as the jQuery documentation appearently clearly states.

This is the last paragraph of the documentation:

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

So all I had to do was replace the .mouseout() with .mouseleave() and all problems solved.

Release guessing

Google AndroidA while ago I bought myself a new phone. I was fed up with Windows Mobile, but that’s a whole story by itself… So my new phone ran Google’s Android 2.1, with the added joys of HTC’s sence smeered over the original UI. The latter is a nice addition by the way, I quite like it. The problem however is the following: about 2 months after my purchase Google released Android 2.2 A.K.A. Froyo. This brings some nice features aswell as claiming a 400% speed improvement.

This update is available for the Google Nexus One, but not yet for my HTC Desire. This is the case with all software updates due to the fact that HTC needs to tinker with their sence UI and various applications to update them to the new platform aswell. As soon as word from Google got out, HTC owners all around the interwebs started specualting about when HTC will update their phones. Beeing a customer myself this actually annoys me quite a bit. I’ve payed well enough for this device, and I have to looking about on the interwebs for rumours about speculated release dates. Why doesn’t HTC want to provide us any information on this? Surely they have got to have an idea themselves? I can’t imagine they don’t have any planning internally…

There are a few drawbacks on making release plans public, especially when you aren’t going to be able to stick to it, but I think you’re frustrating many more customers by just letting them stand into a corner wondering… People are going to set dates for themselves anyways, which could be wild guesses or leaks from trusted sources, but they do want dates set. So why not come clean and make your release plans public? I think it will only benefit the customer relationship.