Tag Archives: Technology/Internet

Fast way to manage the Arabic version of a web form

css, web development, ,

Left to Right vs. Right to Left

As you may know the Arabic language is written from right to left in reverse of Latin and Cyrillic languages and in the web that means you must change the look of the page for that subset of users coming to your site.

One of the main problems are with web forms. Usually we use something like label:input pairs:

label: <input type="text" />

but when it comes to Arabic version it should be turned into:

<input type="text" /> : label

and that’s quite tricky!

The easiest way for me!

Well I simply wrap that chunk of code into a table. That helps me manage the direction with the CSS direction:rtl like so:

1
2
3
4
5
6

<table>
 <tr>
  <td>Label:</td>
  <td><input type="text" /></td>
 </tr>
</table>

When it comes to the Arabic version it can be translated with the simple:

1
2
3
4
5
6

<table style="direction:rtl;">
 <tr>
  <td>Label:</td>
  <td><input type="text" /></td>
 </tr>
</table>

HTML5 video support. Detecting, playing and progressive enhancement!

web development, , , , , ,

HTML5 video

HTML5 is mentioned as entirely new “thing” out in the web, but what it actually means is rather a collection of new, unknown for the current HTML version, features. One of the most interesting and used things in HTML5 are the support of a video in a entirely new “video” tag. Until now the playing of a video was either with Flash player or with Quick Time. But in both cases it relied on a third party plugins. Of course normally the question about performance was inevitable. Which is faster? But imagine we didn’t have the IMG tag? This give you the answer – using third party plugins always slows down the page, and today most of the web is based on video sharing and therefore the browsers become slower!

Performance of HTML5 video tag against Flash video players

As I mentioned above the performance of HTML5 video should be way better than the performance of any Flash video player. To be more precise I’ll reference an article from ajaxian.com, where the author points on his turn an interesting presentation. Indeed the performance of HTML5 video was way, way better:

But sometimes this doesn’t resolves all the problems. Normally with this “new” technique of putting a video into the page, come some additional issues.

First of all there are many codecs that the browser should support and almost always there is something “your” browser don’t support. That makes the task bigger. Now you should support more and more video file formats for the different browsers. And yet another problem is the detection of this codec support.

Detection and integration

Lucky enough, I found a great article and tutorial describing how to integrate HTML5 video with progressive enhancement. First of all you can check for it’s support than downgrade to Quick Time and Flash and if the client doesn’t support even that – render an image.

You can find the source here.

Thanks to this technique you can fully integrate new video tag into your page. Remember that most of the clients for sure will be happy to watch video in a more user friendly manner.

Storing JavaScript objects in html5 localStorage

javascript, micro tutorial, , , , , , , , , ,

There is a rising new age of HTML5, which comes with very nice features as video tag and localStorage. What localStorage is? In fact we have been waiting for long time to have something that give us the power of storing more and more on the client side. That’s because the net is becoming larger and therefore heavy.

Imagine if you have the possibility to store large JSON returned from an AJAX call on the client. That’s now reality with the localStorage object in HTML5 and it can be accessed with something like this code:

localStorage.setItem(key, value);
alert(localStorage.getItem(key));

Can we store entire objects?

Yes there is a way extending a bit the logic of the code above. The localStorage in fact stores only strings, but what about arrays and objects. You can additionally use JSON global objects and its two methods – stringify and parse:

var a = JSON.stringify({name:'obj'});
alert(JSON.parse(a));

Do browsers support all that?

Of course … not! localStorage is supported by Firefox 3.5+, Chrome 2+, Safari 4+ and MSIE 8+. The solution is not to rely on browser version, but to check for object existence, and than to combine both techniques:

localStorage.setItem('a', JSON.stringify({ name : 'obj' }));
alert(JSON.parse(localStorage.getItem('a')));

Get the browser locale and language from Zend_Locale

zend framework, , ,

In a short snipped I’d like to mention the method of use in Zend_Locale:

$locale = new Zend_Locale();
$browserLocale = $locale->getBrowser();

it’s quite useful! Sometimes you don’t need to redirect user only by IP or domain name. Think about browser’s language!

jQuery tips – storing data

javascript, web development, , , , , , ,

Storing data?

I was reading an article where the author says it is not a good practice to store data in the DOM. Indeed this is a bad practice and you should avoid it. After that he gives an example with using the DOM with the ALT attribute:

$('selector').attr('alt', 'data being stored');
// later the data can be retrieved using:
$('selector').attr('alt');

and after that the more clean:

$('selector').data('paramtername', 'data being stored');
// then later getting the data with
$('selector').data('paramtername');

OK, is more clean. But however it is bad practice to use such a “heavy” construction to store local data. It is obvious you can prefer to store it in a local variable. Thus you avoid the extra performance.