Associer Galleria et Fancybox pour jQuery
Par Mathias le 26 décembre 2011
Vous connaissez très certainement Fancybox qui est le plugin de « box » jQuery le plus populaire, il peut être facilement associé au plugin de galerie Galleria.
Galleria est très pratique pour afficher une galerie dans un espace restreint (comme une sidebar) pusiqu’on contrôle la taille du bloc le contenant, le plugin gère le redimensionnement des miniatures et des images. Cependant ce mode ne permet pas d’afficher les images en taille réelle. Il existe donc un hack pour l’associer à Fancybox pour remédier à cette problématique. J’ai modifié un peu le code fourni afin d’afficher la galerie complète dans la Fancybox également.
$("my_gallery_div").galleria({
"width": 300,
"height": 300,
"image_crop": true,
"thumb_crop": true,
"debug": false,
"transition": "fade",
"transition_speed": 700,
"extend": function () {
this.bind(window.Galleria.LOADFINISH, function (e) {
$(e.imageTarget).attr("title", "Click here to see the full-size image")
.on("click", this.proxy(function (e) {
var obj = this.getData(),
images = [], i, l = this._data.length,
img, index = 0;
for (i = 0; i < l; i += 1) {
img = this._data[i];
images[i] = {
"href": img.big,
"title": img.title
};
if (img.big === obj.image) {
index = i;
}
}
e.preventDefault();
$.fancybox(
images,
{
"index": index
}
);
}));
});
}
});
Source : Ce post est basé sur l’article Add Galleria slideshow / image gallery onto your website.
Deux bookmarklets bien utiles
Par Mathias le 8 décembre 2011
Je vais aujourd’hui vous proposer deux bookmarklets récemment sorties et qui s’avèrent des plus utiles pour les développeurs web.
Dom Monster
Dom Monster (@dom_monster) fait une analyse du DOM de votre page et vous donne certaines indications sur les « soucis » rencontrés.
Vous verrez ce qu’il est important de modifier rapidement (les warning oranges) et obtiendrez des astuces moins importantes mais qui peuvent permettre à votre page d’être plus fluide.
Les détails de tous ces points sont ajoutés à votre console (F12 sur Firefox et Chrome), c’est un jeu d’enfants à utiliser, je le recommande fortement.
SEO Bookmarklet
L’outil SEO Bookmarklet (par Troy Meyer) est dédié au référencement, vous l’aviez deviné je suppose.
Celui-ci vous donne des informations simples sur l’optimisation SEO de votre page avec le nombres de titres h1, h2 et h3 et d’autres infos utiles. Des liens vers des outils plus poussés sont aussi présents. C’est pour voir rapidement si quelque chose de « grossier » cloche question référencement.
Attention au mode maintenance !!!
Par Mathias le 13 novembre 2011
Je vais ajouter une note suite à mon article donnant des astuces pour personnaliser le mode maintenance de WordPress. Elles sont toujours valables mais je vais vous mettre en garde d’une chose si jamais vous suivez le post précédent, ça vous évitera de faire la même connerie que moi. 
En effet, je vous avais donné un bout de code permettant de voir le site en maintenance si l’on est connecté, ce qui est bien pratique assez souvent… Seulement parfois souvent les mises-à-jour de WordPress buggent, on le sait tous, et le fichier .maintenance n’est alors pas supprimé du répertoire du blog.
C’est là que ça devient vicieux car en tant qu’administrateur, vous ne vous en rendrez pas compte tout de suite vu que le blog s’affichera correctement pour vous, ça peut prendre des jours, comme pour moi sur un autre blog.
SugarJS, boîte à outils javascript
Par Mathias le 3 octobre 2011
Je viens de découvrir SugarJS, une sorte de boîte à outils Javascript qui m’a l’air vraiment bien pratique. Je compte bien l’utiliser sur mes projets futurs pour « adoucir » Javascript comme ils disent. 
Elle augmente les objets existants – nombres, fonctions, tableaux, chaînes de caractères, dates… – avec de nombreuses méthodes bien utiles et est donc très intuitive à utiliser puisque ces dernières s’appellent comme les méthodes de base du langage.
Il y a de nombreux ajouts pour tous les types d’objets, j’accorde une mention spéciale aux dates qui en avaient vraiment besoin, voici quelques exemples pour vous donner envie d’utiliser SugarJS :
Chaînes de caractères
- truncate qui permet de raccourcir une chaîne
- trim qui supprime les espaces, celle-ci est présente dans le très bon php.js
- toDate pour créer une date facilement
- …
Nombres
- floor, round et ceil pour arrondir de la manière souhaitée
- isEven pour déceler les nombres pairs et isOdd pour les impairs
- …
Tableaux
- clone pour dupliquer un tableau
- union afin de combiner plusieurs tableaux en un
- unique qui supprime les doublons
- …
Dates
- create pour obtenir des dates à partir de plusieurs formats, voir les dates dans SugarJS
- isFuture, isPast, isWeekday et isWeekend, ai-je besoin de les expliquer ?
- now qui équivaut à time en php
- …
Notez que les méthodes ne sont ajoutées que dans l’éventualité où elles ne sont pas nativement proposées par le navigateur que vous utilisez.
Les Easter Egg de PHP
Par Mathias le 23 septembre 2011
Voilà un bien bel article qui ne sert strictement à rien aujourd’hui.
Il est en effet dédié aux Easter Egg de PHP, il y en a quatre à ma connaissance, les voici :
Les crédits PHP : PHPB8B5F2A0-3C92-11d3-A3A9-4C7B08C10000
Le logo PHP : PHPE9568F34-D428-11d2-A769-00AA001ACF42
Le logo Zend: PHPE9568F35-D428-11d2-A769-00AA001ACF42
Les oeufs de Pacques : PHPE9568F36-D428-11d2-A769-00AA001ACF42
Le premier renvoie une page qui ressemble au phpinfo avec le nom des contributeurs du langage. Les trois autres retournent une image, celle du dernier change selon les périodes. On a commencé avec les chiens de Zeev Suraski et Stig Bakken puis une photo de Thies C. Arntzen. Tous trois ont bien entendu contribué au développement de PHP.
Comment les voir ?
Il suffit d’ajouter la chaîne « ?=… » à une page php pour les voir, exemple sur votre serveur local :
http://localhost/?=PHPB8B5F2A0-3C92-11d3-A3A9-4C7B08C10000
Vous pouvez aussi voir la source de l’image ci-contre.
Bonnes pratiques Javascript
Par Mathias le 18 septembre 2011
JSLint et JSHint
Vous connaissez surement le fameux JsLint du non moins fameux Douglas Crockford (honte à vous si vous ne connaissez pas le créateur du format JSON 
) qui a maintenant son fork communautaire JSHint que je lui préfère personnellement.
Ces deux outils en ligne ont pour but de vérifier que votre code est correct et respecte les bonnes pratiques que je vais exposer ci-dessous. Un code valide sous JSHint / JSLint n’empêche pas les erreurs mais les limite énormément, je vérifie d’ailleurs tous mes codes avec JSHint, c’est devenu un réflexe.
Bonnes pratiques Javascript
Le points-virgule en fin d’instruction : Javascript insère automatiquement les points-virgule en fin de ligne, cependant il est conseillé de ne pas compter sur cette fonctionnalité du langage et de terminer toutes vos instructions par « ; » car elle peut conduire à des erreurs selon les sauts de ligne, voici un exemple très connu :
function maFonction () {
//...
return
{
"prop1": 1,
"prop2": 2
}
}
// Ne retourne rien... sinon une erreur, c'est l'équivalent de :
function maFonction () {
//...
return;
{
"prop1": 1,
"prop2": 2
}
}
// La bonne fonction
function maFonction () {
//...
return {
"prop1": 1,
"prop2": 2
};
}
// Retourne l'objet attendu
L’affectation de valeur dans une instruction conditionnelle : Il est possible d’assigner une valeur à une fonction dans un structure conditionnelle ou une boucle (if, for, while…) en utilisant « = » plutôt que « == » ou « === ». Cette affectation retourne true et est la cause de cheveux blancs chez bien des développeurs.
Utilisez cette façon de coder seulement si vous être surs de ce que vous faites.
// Exemple de code incorrect
var verif = false;
if (verif = true) {
// Affecte la valeur true à la variable verif, retourne true vu que l'affectation a bien eu lieu
// Ce code va s'exécuter
}
// Exemple de code correct
var verif = false;
if (verif === true) {
// Ce code ne va pas s'exécuter
}
Les accolades (curly braces) autour des blocs : Il est conseillé de toujours entourer vos blocs d’accolades (curly braces) même si, encore une fois, ce c’est pas obligatoire. Dans le cas contraire, seule la première instruction est englobée automatiquement, le code va illustrer :
var i, var1 = 0, var2 = 0;
for (i = 0; i < 5; i += 1)
var1 += 1;
var2 += 1;
// var1 = 5, var2 = 1
var i, var1 = 0, var2 = 0;
for (i = 0; i < 5; i += 1) {
var1 += 1;
var2 += 1;
}
// var1 = 5, var2 = 5
Les comparaisons : Il faut utiliser « === » et « !== » plutôt que « == » et « != » pour la simple que raison que ces derniers font des conversions de type et peuvent donc renvoyer des « faux positifs ».
0 == false // retour true 0 === false // retour false
Eval is evil : L’instruction eval c’est le mal, c’est en quelques sortes le leitmotive de nombreux développeurs Javascript.
La fonction eval accède directement au compilateur JS, outre le fait que c’est très lent et donc pas tip-top question performances, il faut aussi noter que cela peut faciliter le hack de votre code et rend ce dernier dur à débugger.
Notez que si vous utilisez les fonctions setTimeout and setInterval fonctionnent de la même manière si vous leur passez une chaîne en argument, passez donc plutôt une « vraie » fonction.
for in et hasOwnProperty : Il est très commun d’utiliser la boucle For in pour parcourir les propriétés d’un objet, cependant si vous ne filtrez pas ces dernières, celles de la chaîne de prototype seront aussi retournées, c’est inutile et ça alourdit votre script pour rien, heureusement l’instruction hasOwnProperty filtre ces dernières et permet donc d’éviter cela :
var i, monObjet = {...};
for (i in monObjet) {
if (monObjet.hasOwnProperty(i)) {
// Faire quelque chose avec monObjet[i];
}
}
Les fonctions à invocation immédiate : Il est conseillé d’entourer ce « type » de fonction de parenthèses.
(function () {
// Votre code
})();
//On préfèrera cette notation
(function () {
// Votre code
}());
Première lettre en majuscule pour les fonctions « constructeur » : Un constructeur est une fonction qui est amenée à être utilisée avec la déclaration new. Il y a pour convention de les faire commencer par une majuscule.
Douglas Crockford considère les constructeurs comme dangereux et « interdit » donc l’usage de new sur JSLint, c’est une option sur JSHint.
Déclarez TOUTES vos variables en premier : Comme nous l’avions vu dans l’article sur les variables, le scope et le hoisting, il est fortement recommandé de déclarer vos variables en premier dans toutes vos fonctions. Une façon simple de le faire est de se limiter à une déclaration var par fonction comme ci-dessous, c’est une question de style :
function maFunction () {
var var1,
var2,
var3;
//...
}
INDENTEZ VOTRE CODE : Ce n’est pas valable qu’en Javascript, indentez votre code, que ce soit pour vous ou pour les prochains développeurs qui le liront, ça me paraît être une évidence personnellement.
Mode maintenance WordPress
Par Mathias le 12 septembre 2011
Si vous utilisez WordPress, vous avez certainement déjà vu la fameuse page blanche qui apparaît pendant les mises à jour indiquer que votre site est en cours de maintenance, c’est de toute manière préférable à des erreurs php lors de l’écrasement des fichiers.
Sachez que ce procédé est géré très simplement par WordPress qui vérifie la présence d’un fichier .maintenance à la racine de votre blog, s’il le trouve, il en lit le contenu et si le code lui indique que l’heure de la maintenance – la variable $upgrading au format timestamp – est de moins de 10 minutes (time() – 600 donc, suivez un peu ), la page blanche est affichée, sinon le site apparaît normalement.
Si vous utilisez la mise à jour automatique du script, cette page est créée automatiquement et supprimée à la fin du processus, il arrive que cela bugue et que vous deviez la supprimer manuellement sur le FTP.
Si vous faites les mises-à-jour à la main, il faut créer ce fichier, deux options s’offrent à vous, les voici…
Le fichier .maintenance à la racine du blog
La version simple qui enclenche une maintenance infinie (time() – 10 minutes n’est jamais vrai) jusqu’à suppression du fichier sur le FTP :
<?php $upgrading = time(); ?>
La version un peu plus élaborée, qui vous permet d’accéder au site si vous vous êtes identifiés ou souhaitez l’être (elle est aussi « infinie ») :
<?php
function is_user_logged_in() {
$loggedin = false;
foreach ( (array) $_COOKIE as $cookie => $value ) {
if ( stristr($cookie, 'wordpress_logged_in_') )
$loggedin = true;
}
return $loggedin;
}
if ( ! stristr($_SERVER['REQUEST_URI'], '/wp-admin') && ! stristr($_SERVER['REQUEST_URI'], '/wp-login.php') && ! is_user_logged_in() )
$upgrading = time();
?>
Personnaliser l’affichage
Astuce moins connue, il est également possible de personnaliser l’affichage de la page qui s’affiche lors du mode maintenance, il suffit de créer une page maitnenance.php dans le dossier content (généralement wp-content).
Cette page peut contenir le code html que vous souhaitez, il faut cependant lui ajouter quelques petites spécificités :
- Le code php en haut de page vérifie le protocole pour afficher un en-tête (header) correct. Cet en-tête indique qu’il faut revenir un peu plus tard car le site est momentanément indisponible, c’est utile surtout pour le SEO. Le cas échéant, cela indique au crawler de revenir un peu plus tard et cela lui évite donc d’indexer la page et de croire que le site est en vrac.
Le code html qui suit s’affichera à l’écran et est personnalisable à volonté, c’est conseillé de le faire afin de la rendre un peu plus « sexy ».
La dernière ligne (fonction die en php) permet de terminer le script.
<?php
$protocol = $_SERVER["SERVER_PROTOCOL"];
if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol )
$protocol = 'HTTP/1.0';
header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site en cours de maintenance</title>
</head>
<body>
<h1>Votre message de maintenance personnalisé</h1>
</body>
</html>
<?php die(); ?>
Merci à Matt Martz (Sivel.net) qui est la source anglophone de ce post.
PS. Si vous utilisez cette technique, merci de lire la mise en garde pour éviter une erreur toute bête…
Anniversaire Smashing Magazine, eBook gratuit
Par Mathias le 9 septembre 2011
C’est l’anniversaire du Smashing Magazine aujourd’hui et pour fêter cela, le site offre un eBook qui condense une vingtaine des meilleurs articles sur le web design et l’ergonomie qui y ont été publiés, profitez-en ce site est une vraie référence dans ce domaine et de nombreux experts y publient.
Pour les développeurs, ce genre d’article est très utile, ça permet de s’améliorer et d’avoir une vue extérieure sur le graphisme et le point de vue utilisateur… Car il faut le reconnaître on pêche souvent dans ce domaine, moi le premier.
Cet eBook s’adresse aux anglophone, désolé pour les autres.
Gestion des scripts Javascript sous WordPress
Par Mathias le 4 septembre 2011
Maintenant que vous avez optimisé le fichier le fichier wp-config.php de votre blog, nous allons passer à la gestion des scripts Javascript pour votre site sous WordPress.
Pour améliorer la vitesse de chargement des pages de votre blog, il est important de placer vos scripts en bas de page et si possible de les charger à partir de CDN (Content Delivery Network), nous allons donc commencer par ça.
Comment charger vos scripts en bas de page :
Il suffit d’ajouter les six lignes suivantes dans le fichier functions.php de votre thème, elles déplacent tout ce qui concerne la gestion des scripts du header vers le footer :
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
Comment charger jQuery à partir des serveurs de Google
Ça se passe toujours dans le fichier functions.php de votre thème.
// On désactive le script jQuery inclus nativement dans le CMS
wp_deregister_script('jquery');
// On l'active de nouveau en renseignant l'adresse du CDN
// Vous pouvez remplacer 1.6.2 par la version qui vous sied
wp_register_script('jquery', ('https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'), false, '1.6.2', true);
// Si vous préférez travailler avec la version locale lorsque le site n'est pas en ligne (toujours avec notre fameux fichier wp-config)
wp_register_script('jquery', ((_IS_PROD) ? 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' : TEMPLATE_URL . '/js/jquery.min.js'), false, '1.6.2', true);
// On indique a WP que l'on veut que ce script soit chargé à l'affichage
wp_enqueue_script('jquery');
Tant que l’on y est, on va aussi charger jQueryUI…
… Toujours à partir des serveurs de Google, même le thème graphique si vous utilisez un de ceux proposés de base :
// On empile le script, notez bien "array('jquery')" en troisième argument qui indique les scripts présents dans ce tableau doivent chargés d'abord, ici jQuery.
wp_register_script('jqueryui', ((_IS_PROD) ? 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js' : TEMPLATE_URL . '/js/jquery-ui.min.js'), array('jquery'), '1.8.14', true);
// Remplacez smoothness par le nom de votre thème en minuscules : base, sunny...
wp_register_style('jqueryui', (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css), false, '1.8.14');
// On ajoute le style et le script au rendu de la page.
wp_enqueue_style('jqueryui');
wp_enqueue_script('jqueryui');
Si vous souhaitez modifier les scripts uniquement dans la partie publique du site, ce qui est souvent le cas (et fortement recommandé), faites comme suit :
if (!is_admin()) {
// Ma gestion des scripts qui va bien
}
Cette façon de charger les scripts apporte des avantages selon moi :
- Tout est centralisé sur la même page, c’est exportable très facilement d’un thème à l’autre.
- Pas besoin d’éditer les autres fichiers du thème.
Création optimisée d’une node DOM avec jQuery
Par Mathias le 26 août 2011
J’ai découvert récemment une façon condensée et efficace de créer une node avec jQuery, voici donc un petit morceau de code très concis, ça vient en complément des optimisations des sélecteurs et des événements que je vous ai présentées il y a peu. Un snippet vaut mieux que de long discours, je vous laisse apprécier.
Dans notre exemple, on veut créer un lien avec une ID, une classe CSS, un texte en anchor (bien entendu), changer son URL et pendant qu’on y est on va lui attribuer un événement lors du clic.
$(function () {
var a = $("<a />", {
"text": "Mathias",
"href": "http://mathiasphilippe.com/",
"id": "id_lien",
"class": "class_lien",
"click": function () {
alert("j'ai cliqué sur le lien");
return false;
}
}).appendTo(document.body);
});
C’est l’équivalent de :
$(function () {
var a = $("<a />").text("Mathias")
.attr({
"href": "http://mathiasphilippe.com/",
"id": "id_lien",
"class": "class_lien"
})
.bind("click", function () {
alert("j'ai cliqué sur le lien");
return false;
})
.appendTo(document.body);
});
Cette façon de faire est beaucoup plus claire, évite le chaînage et permet même de passer des événements comme vous le voyez avec « click » ci-dessus. Décidément, plus je l’utilise et plus je trouve jQuery vraiment génial, d’autant qu’on en apprend tous les jours avec.
