Tag Archives: Human Interest

Change the Viewport, be Ready for the iPhone!

micro tutorial, web development, , , , , , , , , , , , ,

Sites for mobile

Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.

This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.

Twitter for mobile

How to make a site visible in mobile …

Look at the http://mobile.twitter.com – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.

You can see how it’s made on …

The digg’s mobile version. Look at http://m.digg.com. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!

Don’t scale my site anymore:

<html>
 <head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 </head>
...
</html>

Fancy tooltips with jQuery

javascript, micro tutorial, , , , , , ,

I was decided to write this post from long time ago and now I’m pretty sure it has to be published. What I see in my practice and my browsing in the web there are too many old fashioned tooltips all over the web, as web developer don’t know how to make pretty good fancy tooltips.

That’s why I decided to show what’s not and what is fancy tooltip, with the help of jQuery. Of course don’t hesitate to make with every other library or pure JS code.

What is NOT fancy?

It’s not fancy when the tooltip is with fixed position. In the example here I made one pretty small sample:

What is fancy?

In the other side you can make the tooltip moving with the mouse pointer which is way better, as you can see here:

Theory of caching. Zend_Cache & Zend Optimizer.

zend framework, , , , , , , , , , , ,

Although it may sound strange I’ll say why I’m using caching. Because it speeds up the site! Yeah there’s no other reason that may be so important as this is.

The caching is not a process invented in the last year, it’s useless to describe why do you need it, but however my intention is to describe how to make it work with Zend Framework.

The docs page of Zend_Cache is pretty clear about everything and I’ll describe the most important part of the cache setup.

First setup the cache back and frontend options. You need to decide where to save the cache files, how to cache them, and what lifetime do they need.

The most used cache configuration is, as you may guess, this one described into the doc page. Setup the front and backend options is just as simple as:

$frontendOptions = array(
     'lifetime' => 7200, // cache lifetime of 2 hours
     'automatic_serialization' => true
);

$backendOptions = array(
   'cache_dir' => './tmp/'
   // Directory where to put the cache files
);

// getting a Zend_Cache_Core object
$cache = Zend_Cache::factory('Core',
                             'File',
                              $frontendOptions,
                              $backendOptions);

Because all this is well described into the doc page, which you can found here I won’t talk about it. But I’ll talk only about one sole thing. How much the cache must live? What should be its lifetime.

The answer is simple. If you have some basic statistic of your site traffic and you don’t change much the data you can prefer longer cache period. But imagine the site’s making 1000 visits per minute! Than even if you cache every minute and the cache expires every minute will be a success and the user perception will be really great. From those 1000 visitors only few will wait until the cache’s built and the other hundreds will receive really fast response!

Be careful when you cache only because you can overflow the directory where you cache, which will be difficult though.

In other way many people are thinking about Zend Optimizer and its work with Zend_Cache. These are really different things. Zend Optimizer has nothing to do with your code it is a PHP caching tool. As you may know PHP interpreter mingles the code into “machine like” code, which in turn can be cached into the RAM with the help of Zend Optimizer. Checkout more here.

Prevent link default action when mousedown and mouseup fires!

javascript, micro tutorial, , , , ,

What is preventing default?

I’m sure you know how to prevent the default action of a link when onclick event is attached to it. Yes, it is a common task and by simply adding a return false; at the end of the method called on click it simply doesn’t call the refresh the page. This is really an everyday task. To describe it first, let’s imagine there’s a link with # href value:

<a onclick="”myFunc()”" href="”#”">click here</a>

Than the definition of myFunc() is something like that:

function myFunc() {
   ...
   return false;
}

If that “return false” part was missing you simply get additional # in the uri of the page and worse – you may be scrolled to the top of the page, because of the lack of an anchor with empty name.

OK, but we know how to deal it! But what happens when you don’t attach click event but mousedown/mouseup pair? It may seem the same thing but it is not!

When you place return false on both event handlers of the mousedown/up events nothing happens, there is a # on the end of the uri and yes the document is scrolled.

How the prevent the default action?

Simply by adding onclick event! We already know that this is working and prevents the default action. Just do the following:

$(‘#element_id’).mousedown(function(){
    ...
    return false;
});
$(#element_id’).mouseup(function() {
   ...
   return false;
});

// this doesn’t work like preventing the default refresh
// action until ....
$(‘#element_id’).click(function() {
   return false;
});
// is added