The WebApp Wizard Web development made magical


How to localize your JS

i18n (internationalization) and l10n (localization) are two major concerns in today's web. And JS isn't an exception to the rule. So here I propose a few ways to manage that essential task.

Simple JS files

The way I generally use. A single file per language, containing all the translated strings for all my JS. Variables respect the naming convention: "i18n_english_word", to distinguish them from other "standard" variables. Looks like this, for a French translation example:

var i18n_ok = 'OK',
    i18n_cancel = 'Annuler',
    i18n_yes = 'Oui',
    i18n_no = 'Non',
    i18n_close = 'Fermer';

I usually suffix the filename with "_fr_FR.js" for a French translation file, "_en_US.js" for an American English translation file, and so on.

I use this technique because I usually don't have tons of strings to translate in my JS code, so it is sufficient. Moreover, there is absolutely no overhead on server side, compared to the other solutions I present here.


Sliding Panel v1.1.0

In reply to Michael Teague on this post, I decided to make a few improvements to the Sliding Panel jQuery plugin.

The main improvement is about positionning. Now you have the ability to set a sliding panel at the top or bottom of your page, in addition to the left/right options. Everything is managed by the plugin to ensure a good experience: if you choose to set your panel at the top of your page, then it will slide upwards. If you choose to set it at the bottom, then it will slide downwards, etc. In the same way, if you put the panel at the top or bottom, the default tab text will be horizontal instead of vertical (default behavior) for the left and right options.

It has been tested with jQuery 1.3.2/jQueryUI 1.7.2 and jQuery 1.4.2/jQueryUI 1.8.2, so it should work just fine.

Sliding Panel v1.1.0 is out!


Turn any select element into an editable combo

Here is my second officially released jQuery plugin. It just turns any basic <select> element into a nice OS-X-like editable listbox. Just the smartest way to manage lists, really useful for users/groups logics for instance. Lightweight, unobtrusive, efficient, simple. Only what is needed, no more, no less. :-)

I let you discover this plugin here.


Sliding Panel v1.0.1

When putting in place the demo page for Sliding Panel, I realized some parameters were missing. In fact, v1.0.0 wasn't usable in all cases, mostly for CSS reasons.

So rather than let you add some custom CSS, I decided to add an offset parameter to allow proper positioning, depending on your DOM and CSS.

Sliding Panel v1.0.1 is out!


Sliding Panel, a nice way to help your users

Sliding Panel in actionI am really glad to announce I just released my first jQuery plugin. Or at least, my first publicly released jQuery plugin.

The goal was to allow to display help and examples to the visitor in an easy and user-friendly fashion. But as you can imagine, you can display just anything you want, in a nice sliding panel.

I let you discover this plugin here.