jQuery image zoom effect

Image jQuery — Cet effet réalisé avec quelques lignes de jQuery (et un soupçon de CSS) applique un léger effet de zoom sur une image tout en affichant sa description au survol de la souris sur le conteneur. Voir la démonstration.

Emuler la propriété max-width pour IE6

maxWidthFixForIE6.js — Les expressions Javascript de Microsoft sont énormément utilisée pour pallier l’absence de support de telle ou telle fonctionnalité par pour IE6 en particulier ou Internet Explorer en général alors que leur utilisation grève les performances déjà inquiètantes du dernier de la classe. Il vaut mieux faire appel à du bon vieux Javascript !

window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
    var container = document.getElementById("container");
    container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}

Grid Design — Quelques notes sur l’intérêt des grilles de mise en page

La popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dans Framework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs détracteurs de jeter le bébé avec l’eau du bain. Le problème vient sans doute du terme grille lui-même. Peu gratifiant, il évoque la prison, la clôture, la répétition, l’uniformité… Bref, tout le contraire des aspirations du créatif qui refuse de brider sa créativité sur l’autel d’une vision mécaniste du processus créatif.

SimpleJS — la petite librairie Javascript qui va bien

SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevre propose de faciliter l’utilisation d’Ajax. SimpleJS ne saurait être comparée avec Prototype ou jQuery. Mais ce n’est pas grave : aujourd’hui nous somme à la recherche de solutions simples, légères et efficaces, qui vont à l’essentiel : $ajaxload() $ajaxreplace(), $opacity(), $shiftOpacity(),  $pulsate(),  $highlight(),  $textColor(),  $morphColor(),  $toggle(),  $blindup(), $blinddown(). Sans oublier les plugins simpleslish.js (Slideshow, 1.6k) et simpleacco.js (effet accordéon, 1k) !

Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière, Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML.

jTextTranslate — Traduction de votre site en 87 langues

jTextTranslate est un plugin jQuery qui utilise l’API  Ajax Language de Google pour offrir une palanquée de langues vers lesquelles vos visiteurs pourront traduire vos textes. L’appel est des plus simples : il suffit de lier la fonction  à l’élément HTML de votre choix. Par exemple, utilisez $(.entry).translate() pour permettre la traduction de vos billets WordPress. Le script ajoute un lien qui lance une fenêtre lightbox pour le choix des langues et la traduction elle-même. Via La Ferme du Web.

Nouvelle proposition de logo pour le HTML-FP

J’ai présenté en novembre dernier deux versions d’un logo qui n’ont pas fait l’unanimité. Pour me rattraper, j’ai remis cent fois l’ouvrage sur le métier (oui, j’en rajoute un peu) pour sortir une troisième version et prendre en compte les remarques et les suggestions. J’ai travaillé vite (une petite heure) pour un résultat qui devrait être plus lisible tout en restant ludique et coloré. Cette proposition existe en deux parfums : une version brute d’Illustrator (vectorielle, lisse, etc.) et une version plus organique travaillée dans Photoshop à coup de filtres Textures et Grains.

cssQuery — accédez au DOM

cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3. Alternative à jQuery et autres frameworks Javascript pour accéder aux éléments constitutifs du DOM quelque soit le navigateur pour environ 7 KB !