javascript
J’éprouve une certaine attirance pour le Javascript. Il est à la fois souple et très puissant, permettant désormais des effets d’animations et des chargements dynamiques de contenu rendant l’expérience utilisateur plus riche sans pour autant alourdir le comportement du navigateur.
Découvrez ici mes astuces et codes liés au Javascript.
Résoudre le bug Google Maps vs IE7
IE7 (bouh !) n’est pas un navigateur de compet’, c’est comme ça, c’est dans ses gènes. Malheureusement, il n’en reste pas moins le navigateur le plus utilisé par le grand public (nous, les geeks/nerds, bref l’élite … on tourne avec Firefox, Opera, Chrome ou Lynx pour les plus hardcore ^^)
Donc, IE7 (bouh !) est très utilisé. J’ai été contacté par un client la semaine dernière qui avait un bug avec une carte Google Maps qu’il avait intégré dans de nombreuses pages de son site : Sa carte ne s’affichait pas correctement sous IE7 (bouh !), en effet, celle-ci présentait un affreux carré gris sur toute la moitié droite.
J’ai d’abord pensé à un problème de HTML mal formé (pas standard…), mais même en le rendant plus propre ça ne changeait rien…
Ensuite, j’ai pensé à un problème de gestion des ressources mémoires par IE7, mais même pas. La mémoire était bien libérée à chaque fermeture/changement de page.
Puis, en fouillant sur le net, je suis tombé sur THE SOLUTION ! En fait, lorsque vous souhaitez afficher une carte Google Maps, vous définissez un cadre (<div …>) auquel vous donnez une taille (en css : height et width …) Ensuite, vous « lancez » l’affichage de la carte en créant un nouvel objet (GMaps() auquel vous précisez le cadre à utiliser) . Ça marche, pour quasi-tous les navigateurs.
Malheureusement, IE7 n’est pas très fort (les standards, toussa …), et n’est même pas capable d’aller relire les dimensions du cadre pour y coller la carte… Donc, il faut « forcer » cette taille lors de la création de l’objet GMaps en lui donnant un paramètre supplémentaire qui est un objet de type GSize()….
Voici donc la syntaxe finale, c’est cadeau, ça me fait plaisir :
var maCarte = new GMaps(« #monDiv »,new GSize(800,600));
Un captcha bien sympatique sous jQuery
Web Design Beach propose un nouveau type de captcha. Ce captcha se veut plus simple et visuellement plus agréable.
La nouveauté, par rapports aux habituels réside dans la présentation. Il suffit en effet de glisser-déposer une image dans un panier pot une autre image.
Le gros avantage de ce type de sécurité est sa simplicité, puisque habituellement on doit déchiffrer des textes déformés dans tous les sens, reconnaitre une couleur ou encore faire des maths ^^
J’ai trouvé le principe de Drag n’ Drop assez sympa, malheureusement, le côté sécurité est à revoir puisque le code de vérification du captcha est simplement le numéro de l’image, il est donc assez facile pour un bot de passer outre. Je pense qu’une vérification de la clé du côté serveur pourrait remédier à cela.
Source : WebAppers
Firefox 3.1 gèrera le JSON en natif
J’ai un peu de retard pour le coup, mais l’équipe de Mozilla a annoncé que Firefox 3.1 gèrera le JSON en natif.
Parmi les avantages, on retrouve :
- une rapidité accru par rapports aux différentes librairies présentes sur le marché (jQuery, Mootools, etc …)
- une meilleure sécurité, puisque l’exécution d’un vil code sera quasi impossible.
Manuel jQuery en Français
Jarodxxx vient d’ouvrir officiellement son manuel jQuery Français.
Ce site était au départ un mémo perso pour le développeur. Il a décidé de l’agrémenter avant de le partager avec le reste des utilisateurs francophones de la librairie javascript.
C’est du bon, du très bon. Je pense que je vais en faire un usage assez intensif et m’excuse par avance auprès de Jarod pour les surcoûts en bande passante ^^
Mise à jour de jQuery (1.3.1)
Le premier correctif pour jQuery 1.3 est déjà disponible.
Cette version 1.3.1 n’apporte aucune amélioration, mais corrige quelques bugs. La liste des bugs corrigés n’est pas énorme, mais la plupart d’entre eux concernaient l’intégration du sélecteur Sizzle.
En dehors de ça, quelques autres corrections mineures de compatibilité avec certains navigateurs.
Vous trouverez plus d’infos sur le bug tracker de jQuery.
Minify, réduisez et réunissez vos fichiers CSS et Javascript
Ah les jolis sites, avec leurs feuilles de styles, leurs animations en Javascript et leurs morceaux d’AJAX dedans !
C’est joli, c’est très « 2.0 et cie », mais ça fait encore plus de lignes de code, encore plus de fichiers et donc encore plus de bande passante.
Les sites s’allourdissent (sans parler des pubs, du flash, etc …). Bref ! C’est la crise, faut alléger tout ça ! (oui, je sais que la crise n’a rien à voir, mais c’est dans l’ère du temps 
).
Je vais parler aujourd’hui d’un petit bout de php qui ne fera de mal à personne : Minify. › Lire la suite
Sortie de JQuery 1.3
jQuery, la librairie javascript la plus populaire à l’heure actuelle vient de fêter son troisième anniversaire.
Pour fêter cet évènement, les développeurs ont publiée la version 1.3 finale (la béta était déjà disponible auparavant).
Cette nouvelle version apporte sont lot d’amélioration, dont une qui a fait pas mal parler, l’intégration de Sizzle.
Sizzle est le sélecteur DOM à la mode. Son principal atout est d’être plus rapide que les autres (entre 2 et 40x selon les librairies et les navigateurs).
- La création d’éléments DOM à la volée (par un simple $(‘<div />’); par exemple …).
- Une amélioration de la vitesse d’exécution des effets.
- Meilleure gestion des évènements.
Bref, beaucoup d’améliorations, je ne vais pas toutes les citer elles sont notées dans la release note ^^
Auparavant, je travaillais surtout avec Mootools et Prototype (+ Scriptaculous), mais désormais je vais m’atteler à utiliser jQuery car cette librairie présente de nombreux avantages.
Pour moi, les principaux atouts sont :
- La taille de la communauté d’utilisateurs, même si mootools et prototype ne sont pas en reste, jQuery reste la librairie javascript la plus utilisée au monde.
- Les plugins. La communauté étant assez importante et la librairie ayant maintenant 3 ans, de nombreux plugins sont mis à disposition des utilisateurs (expérimentés ou non). Ces plugins permettent d’animer et de dynamiser facilement certains éléments de page (rendre les tableaux « triables », animer une galerie photo ou encore mettre un peu d’ajax dans les formulaires …)
Portage de cron en Javascript
Cron est une fonction essentielle des systèmes Unix qui permet de programmer le lancement d’un logiciel dans le temps et de manière périodique. (ex : lancer une sauvegarde MySQL tous les matins à 4h …)
En ce début 2009, Andrés Nieto (du blog anieto2k.com [es]) nous propose un portage de cron en javascript.
Son script permet donc de lancer vos fonctions javascript à un moment précis.
Dans son article de présentation, il en fait la démonstration avec un message alert() s’affichant tous les jours à 17h35.
Cet exemple ne montre pas une réelle utilité, mais ce jsCron pourrait servir à recharger une partie de page toutes les minutes (news de votre site, chat en ajax, messages twitter …) .
Il est vrai que l’utilité est moindre quand on voit que les librairies Js actuelles offrent toutes la possibilité de lancer du code périodiquement, mais je ne peux que saluer ce portage.
Via : LifeHacker
Champ de saisie de date (Javascript inside)
Voici une classe héritée de l’ ajax.InPlaceEditor incluse dans Scriptaculous. › Lire la suite
Raccourcis clavier à la « Google Reader » (Javascript inside)
Voici un petit bout de code en javascript permettant de créer un système de raccourcis clavier à la « Google Reader ».
Attention, ce script nécessite la librairie Prototype.js pour sa gestion des évênements.
var raccourci; //genre de flag pour dire si le raccourci est prêt ou pas
var mesURL=new Array(); //mes URLS
mesURL["F"]="http://www.google.fr"; //raccourci "F"
mesURL["I"]="http://www.google.com"; //raccourci "I"
mesURL["D"]="http://www.google.de"; //raccourci "D"
function onRaccourciClavier(e)
{
if(e.element().tagName !="INPUT" && e.element().tagName !="SELECT") //check si on est pas dans un input ou selectbox
{
if(String.fromCharCode(e.keyCode)=="G" && raccourci!="G") raccourci="G";
else
{
var monURL = mesURL[String.fromCharCode(e.keyCode)];
if(raccourci=="G" && monURL) window.location=monURL;
raccourci="";
}
}
}
Event.observe(window,'keyup', onRaccourciClavier);
Ce snippet fonctionne comme les raccourcis « menu » de Google Reader. C’est à dire qu’il réagit à une suite de 2 touches, dont la première est le G.
Par exemple, la combinaison GF ouvrira Google en Français….
Ce code prends également en compte le fait qu’un champ de saisie de texte soit sélectionné ou pas.
Code préparé en quelques minutes sur une idée de Pickupjojo