Faster YouTube Embeds with JavaScript

We want our visitors to get our content as fast as possible, which means as light as we can, and with the minimum number of requests. But we want to keep them on our pages, and be entertained. This is where embedding videos enters the scene.

Videos illustrate our textual content, bring life to it, and are often served by a third party. What more to ask? Well, there’s a hidden price tag: they are slow and heavy to download, even when the visitor is not watching them.

One simple video on a page called through an innocuous iframe can add up to 6 HTTP requests and as much as 450kb of content. The solution I’m proposing can reduce those numbers to 1 request and about 50kb per video, along with a few bytes of JavaScript.

If you want to know more, I invite you to read the full article on Sitepoint.

Photo credit: Mirror of Ashes

Accélérez vos pages contenant des vidéos YouTube (full article in French)
Acelere sus páginas con vídeos de YouTube (full article in Spanish)
Acelere suas páginas com vídeos YouTube (full article in Portuguese)

jQueryUI Dialogs

jQueryUI is a set of graphical interface libraries that comes on top of jQuery. Developped by the same team, it follows jQuery's evolutions and proposes a set of interface elements (named widgets) such as buttons, accordions, tabs, and what interesses us here CSS popups called dialogs. A dialog can display a text message or an HTML form, and it can be modal, i.e. it stops the user's navigation and waits for an action to go on (the validation of a form, the click of a button…).

Porting Prototype code to jQuery

Javascript frameworks evolve through time, and some give way to others. This is the case for the Prototype framework, supplanted by jQuery since a few years now.

We will see in that example the differences of calling an ajax function to process a minimalist contact form.

Advanced jQuery Form validation (5): how to limit the value of an input field to another's

In this example, we will limit the maximal value entered in an input field according to the one entered in another one.
The form has two input fields:

• The first field is limited between 0 and 100 (limitation defined in the rule range: [0, 100])
• The second one is limited between 0 and the value entered in the first field.

Advanced jQuery Form validation (4): Display error message for grouped fields

After having discovered conditional triggers and learnt more about where to display error messages, we are going to display an error message for a group of fields.

In that example, two fields are related and at least one of them is required. In other words, each of those two fields is required if the other is empty. These two fields can be of any type, but we'll focus here on an input text and a textarea. Of course, we could have used a radio button to indicate that specific behavior, but we would like to keep it simple on the interface and limit the number of form elements.

Check a chromosome region with jQuery validator

A chromosome region is the part of a chromosome defined either by anatomical details, especially by banding, or by its linkage groups, and divided in bands and subbands. In other words, these regions have been defined to talk about the location of a gene. The regions p and q are respectivelly used for the short arm and the long arm of the chromosome.

Here are some examples of chromosomal regions: 13q14, 1p12, 1p12.3

1p12.3 means on the short arm (p) of the chromosome 1, region 1, band 2, subband 3.

Advanced jQuery Form validation (3): Add conditional requirement rule for a set of checkboxes

The third article of that series about advanced jQuery Form validation deals with conditional triggers. In that particular case, we have a conditional trigger displayed as a radio button that makes a set of checkboxes required when activated, and optional when not activated.

All the checkboxes share the same name checkBoxesName[]. Note the square brackets, as we handle them with PHP on the server side, and the grouping has to be done this way.

To apply a validation rule to the set of checkboxes, the square brackets have to be used, hence the simple quotes used to delimitate their name in form validator set of rules.

Advanced jQuery Form validation (2): Validate a date

After checking a phone number against its international format, we will now check if a date entered as a string is valid.

We can of course use a date picker such as jQueryUI Datepicker to ease the user experience and with a nicer look and feel, but the aim of this example is to show you some advanced jQuery Form validation so we will use a very simple example. As a matter of fact, even with the aformentioned date picker, this control is still useful as your users can enter the date manually in your text input field.

Advanced jQuery Form validation (1): check a phone number format

The jQuery Validation plugin is a very powerful plugin aimed at form validation.

Among its main features, you can create your own validating methods. In that example, we will check a French phone number against the international format.

French phone numbers are made of ten digits, starting with 0 (zero), grouped by two and usually separated by dots or spaces (e.g.: 01 23 45 67 89). In the international format, the country code for France (33) prefixes the actual phone number, and the first digit is set between parenthesis. For a better readability, we use the space character as separator (e.g.: 33 (0)1 23 45 67 89).