The WebApp Wizard Web development made magical

2Nov/100

A new way to paginate

Hi.

Just a little post to tell you I released a new jQuery plugin, Universal Paginate.

It simply allows you to paginate any content, and is not limited to a type of list or table. You want to paginate simple paragraphs? Universal Paginate is here for you. A table? UP is here for you too! Any kind of list (dl, ul, ol)? UP is here, again.

It supports natively some advanced features like remote Ajax JSON datasources, jQuery Templates syntax, on-the-fly changing of the number of elements to display on one page, etc.

Check it out!

4Oct/100

Even lighter and prettier confirmation

Hi all.

I took advantage of working on a little Fast Confirm bug to enhance a bit the user experience. Facing my little confirm boxes, I told myself: these boxes don't stand out as much as they should. Don't disturb the user is nice, but we want him to answer anyway.

So I decided to use a few CSS3 features to make them a bit prettier, a bit more distinct from the rest of the page. So I added a shadow under the box and gave the buttons some color and depth.
I also wanted to get rid of the images I used to make the little arrows on the boxes. So I used some border techniques to achieve that.

The boxes looked like this before:

And now:

I hope you will have a nice time using it.

21Sep/102

How to ask politely the user

When working on a project, you often have to ask the user for information: choice, confirmation, etc. There are a few ways to achieve this: plain old confirm(), prompt(), or fancy dialog boxes (jQueryUI for example), or "inline" stuff.

After having tested Producteev for a while, I found out that I really like the "inline" way. So I decided to do it this way on my current project. I needed an easy, unobtrusive way of asking the user for confirmation. I didn't want to spend hours developing or debugging it, so I came out with this simple plugin: Fast Confirm. It allows you to ask simply and politely the user, without throwing a modal dialog box  in his face. Also, it clearly identifies the source of the confirmation so that there is no doubt what you're talking about.

As usual, there is a tiny demo page to show you how the plugin behaves on a simple use case. Feel free to try it out, download and play with it!

17Sep/1014

How to reinstall .NET Framework 2.0

I write this post with a great feeling of relief. I mean it, sincerely. But first, let me show you this piece of art. It sums up quite well the situation. :-)

Yeah, I know, at least the best Photoshop of the year. But let's get serious, as this kind of issue can cause serious damage to one's brain.

After having some problems running MySQL Workbench (it wouldn't start), I found out that it was related to the .NET framework. I went through all imaginable solutions, from windows update to some esoteric registry hacks. Eventually, I succeeded. You just have to :

  • Delete everything inside HKEY_LOCAL_MACHINE\SOFTWARE\MICROSOFT\.NET FRAMEWORK
  • Delete everything under %WINDIR%\Microsoft.NET\Framework
  • Delete the %WINDIR%\WinSxS\Policies directory

And then try to reinstall the .NET Framework 2.0.

I don't know if all these three steps are necessary, but the first and second one, without the third, had no effect for me. I also tried quite a bunch of other solutions before this, so maybe there is something else to do than these three steps in order to make it work.

Anyway, everything else I tried seemed to have no effect at all, so you probably should try this. Please let me know if that was helpful or not. If not, maybe I will be able to give you a few other tips that could unblock your situation (I hope).

15Sep/100

The forgotten jQuery methods

jQuery is great, jQuery is fast, jQuery is the best JS library, etc. But what if it was more awesome than we think? Personally, I went through that, and I wanted to share.
At the beginning, like most other web developers, I discovered jQuery with very basic features, and, over time, I discovered new ones. One day, I decided to really go through the documentation to see if I could find shortcuts for what I do on a daily basis.
The problem is that we try to solve problems with the tools we know well. But sometimes, we could do a lot better with a new, stronger, sharper tool. That's what I am talking about here. The need to keep up to date, and always try new tools.

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.