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.
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!
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.
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.
PHPUnit / Zend Studio 7 configuration
Everybody knows about unit testing. Some people know about PHPUnit, a unit testing library for PHP. There are people who tried it, and among those, people who where disappointed because they didn't manage to get it to work.
Well, I almost fell into this last category. But then I found the solution.
If, like me, you're using Zend Studio, that's no big deal, really. But here are a few pointers that might help you achieving your goal.
Zend Debugger configuration
One of the great things about Zend Studio is the integration of powerful tools like the Zend Debugger or the Profiler. But, in order to take full advantage of the IDE, there is some configuration to do.
Zend Debugger will allow you not only to debug your PHP code, of course, but will also allow you to profile your code. Profiling consists of measuring the time spent in each portion of your code. That means you will be able to know that you spend 200 milliseconds in function a(), then 700 milliseconds in function b(), then 32 milliseconds in function c(). You will also know that you didn't spend any time in function d(). Yes, you will be able to see which portions of your code are unused. And that's pretty cool.
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.
MapServer 5.7-dev for Windows
MapServer 5.6.3 is fine, but there is still a bug in this release. This bug is currently fixed in the SVN trunk, but is not released yet.
If you send a WFS GetFeature request, with POST parameters, you may not have all the data you expect in return. In fact, you will miss the geometry data (yes, too bad
). I really needed this feature to work as soon as possible, so I decided to try compiling the latest SVN version by myself.
First of all, let me tell you that I'm quite a beginner with MapServer... So maybe my instructions are not the best, but hey, it just works. I also assume that if you read this article, you have the minimum necessary knowledge about Windows C/C++ development and Apache administration.
After trying (in vain) a few times following MapServer instructions for compiling on Win32 (these instructions seem to be a bit outdated), I found the Gateway Geomatics package that included all the sources and libs needed to compile it successfully using Visual Studio 2008. But that still needed some adjustments to work just fine. Here are the steps I had to complete to compile MapServer 5.7-dev successfully.
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.