The WebApp Wizard Web development made magical

6Sep/103

JavaScript Content Assist in Zend Studio 8

Ever been wondering how to get the most out of Zend Studio for JavaScript? I had. With Zend Studio 8, JavaScript tends to be a bit more on the front of the scene. So let's take advantage of this by configuring Content Assist for our favorite JavaScript libraries.

Well, Zend Studio 8 now natively supports jQuery. That's good. But what if, for example, I want to add support for OpenLayers? That's really simple, and it is worth it. Tired of checking the online documentation every 5 minutes when you have to create a new layer? That is for you.

Right-click on your project, the go to properties, then to JavaScript => Include Path.

2Sep/100

jQuery plugins I never (OK, rarely) code without

Yes, another "X essential jQuery plugins". But this one focuses on utilities that will make your life easier, and not necessarily the user's one. It's not about shinny UIs here, but just about useful utilities. From time to time, it's also good to think about ourselves. :-)

Well, no more talking, let's go straight to the point.

Livequery

Definitely a must-have. Ever had to re-bind some event handlers when doing dynamic DOM injection? Well, throw away your aspirin and download this plugin. It will save you some time, headaches, and performance. I can already hear: "why not simply using jQuery.live()?". Because Livequery supports a larger number of event types (but it tends to be less and less true) and allows to bind handlers on element creation and removal as well.

ClassLike

Ever wanted to store some data on DOM elements? Well, there is jQuery.data() when you want to attach data to your DOM elements from your JS code. For all other cases, there is ClassLike. ClassLike allows you to easily match and retrieve parts of classnames with regexps. You could have, for example, elements wearing the class "colnumber-X" where X is a number. And you want to get this number out of the classname. Well, ClassLike does it for you with a simple regexp.

jTemplates

jTemplates is not the kind of plugin you will need in every project, but it is still so useful that it deserved his place here. Basically, it's like Smarty, but in JS. Very useful for writing widgets, with live refreshing for example.

Form

How can I not mention the Form plugin? It simply allows you to control your form submissions, do some verifications before submitting, and more.

jQueryUI

Quite a heavy plugin, but really useful, from animations to advanced controls, dialogs, sliders... A must-have too. I won't go any further with this one, everybody knows about it.

Of course, there is no need to blindly add these plugins to your pages, but I think they solve frequent problems, and they deserve, at least, a try. You may just love them. :-)

30Aug/100

Sliding Panel v1.2.0

I just released a new version of Sliding Panel, to allow more positioning possibilities.

Now you can use the offset parameter to position it right where you want it to be, for example, you could place it bottom right either by using:

position: 'right'
offset: {bottom: '0px'}

Which would place it at the bottom right, and make it slide horizontally

Or:

position: 'bottom'
offset: {right: '0px'}

Which would place it at the bottom right, and make it slide vertically.

You can also combine bottom and right offset for example, to fine tune the position, and, maybe, make the tab appear outside your container.

Feel free to try it out!

24Aug/107

Why I don’t localize my jQuery plugins

That's a question (I know, the title is actually the answer to that question) I've asked to myself yesterday. I mean, why do other people deliver jQuery plugins in a full-featured package, including localizations, and I don't? Take jQueryUI and the datepicker date formats for example.

At the beginning, I chose to deliver only the jQuery plugin file, and from now I will prefer to deliver a little package containing a full example (HTML + JS + CSS + PHP - if needed -). But I don't plan to deliver localizations, more than ever.

Why?

First, I don't pretend to know other languages than French well enough. That's already difficult to find the right words in your own language when it comes to describe really shortly, often in only one or two words. I prefer to let you do this job, you will probably be better than me. :-) I release my plugins in English by default (and not French) only to make sure most people will be able to understand.

Second, I have always found that already localized plugins were difficult to blend in an existent architecture. Mostly, localized plugins provide simple javascript files containing variables corresponding to the different strings, in each language. What if you want to get the data from your server? What if you want a more dynamic way to do that? And even when you're in a simple-javascript-file flavor (which I personally like), you've got work to do by yourself. Maybe you want to get all your localized strings in the same place, or maybe you would have organized that another way. OK, all that is not that difficult, but it's always a little pain anyway.

That's why I only set the basics for internationalization. All the user-displayed strings in my plugins are customizable, so you can simply pass the localized strings in parameters. The way you get these localized strings is your business, even if I do recommend a few ones.

24Aug/101

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:

<code>
var i18n_ok = 'OK',
    i18n_cancel = 'Annuler',
    i18n_yes = 'Oui',
    i18n_no = 'Non',
    i18n_close = 'Fermer';
</code>

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.

2Aug/100

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!

23Jun/101

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.

23May/103

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!

12May/100

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.