Modernizr : un JavaScript pour utiliser du HTML 5 et du CSS 3 dès maintenant

modernizr

Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).

5 balises HTML peu utilisées

Davantage pour leur sémantique que pour leur pouvoir en SEO, il est intéressant et pratique d’utiliser les balises HTML suivantes. Elles permettent de donner du sens au contenu d’un site, ou plutôt à son code.
Lire la suite

Un JavaScript pour générer du HTML

James Padolsey a réalisé un plugin jQuery pour aisément générer du code HTML : Satisfy that selector. Pratique lorsqu’on veut réaliser un template HTML rapidement. C’est surtout très pratique pour le modifier très rapidement.

Imaginons que je vais créer une liste avec 10 éléments et des liens dedans, je fais :

jQuery('ul li:5 a[innerHTML="link"]').satisfy();

Puis je me dis que je veux 20 éléments et avec un span dans les liens. Au lieu de faire du copier-coller ou du search & replace, j’ai juste à faire :

jQuery('ul li:20 a span[innerHTML="link"]').satisfy();

Un plugin qu’il est pratique! Je vous conseille de vous abonner à son blog car il est très bon.

Le comments-popup.php de WordPress

A force de faire des thèmes WordPress, je commence UN PEU à comprendre comment ça marche. Et là, y a une énigme que j’ai enfin résolue (enfin, j’ai lu la solution chez quelqu’un d’autre).

Dans le thème Kubrick (le thème par défaut de WP, qui se fait un peu vieux d’ailleurs), y a ce fichier : comments-popup.php. Mais que fait-il ? A priori, c’est une popup… des commentaires. Ok. Mais ça apparaît quand ? Comment ? Où est-ce qu’on l’active ?

Comment l’activer ?

J’ai lu la solution chez Playworkplay : le comments popup s’active par un script à mettre dans le <head>. Il est présent dans le thème « classic » d’ailleurs.

<?php //comments_popup_script(); // off by default ?>

Par défaut, il est désactivé. Faut juste virer les deux slash (//) du début.

Il fait quoi au juste ?

Maintenant, en cliquant sur un lien du style « 1 commentaire », au lieu d’aller à l’ancre des commentaires dans la page du post, ça ouvre une popup avec les commentaires.

Je clique sur le lien…

lien-popup-commentaire

… et ça affiche la popup

popup-commentaire

C’est bien ou pas ?

Je dirais NON. D’abord, c’est pas beau. Puis c’est pas du tout pratique pour l’utilisateur. Puis ça sort les commentaires du contexte de l’article. Puis c’est une popup au départ donc déjà…

Pas étonnant que le thème Kubrick ne l’utilise pas et qu’aucun blog WordPress ne l’utilise (si vous en trouvez un, dites-le moi, j’irai pas voir).

Bref, ce post est juste là pour clarifier les choses.

Récupérer sa clé de CD Windows XP avec Ubuntu

Un billet un peu à part pour simplement partager une astuce pour récupérer le CD Key de son installation Windows alors que vous êtes sous Ubuntu.

Comment j’en suis arrivé là ?

Un beau matin, mon Win XP ne démarre plus. J’ai même plus l’écran de chargement Windows. J’ai tenté une réinstall avec un CD de Win XP, rien n’y fait. Heureusement j’ai encore Ubuntu.

Différence ProductID / Product Key

J’ai envie de récupérer la clé de CD de mon Windows XP (officiel, acheté). Mais j’ai perdu mon CD. Et le registre Windows ne contient que l’ID du produit.
A partir de cet ID, il faut utiliser un logiciel spécial pour retrouver la clé du CD : Magical Jelly Bean Keyfinder.

Donc en gros : ProductID -> Magical Jelly Bean Keyfinder -> Clé du CD original

Le seul problème : Magical Jelly Bean ne fonctionne que sous Windows XP… et justement, ce dernier ne marche plus chez moi. Je peux utiliser Wine sous Ubuntu pour utiliser ce programme, mais il me faut le registre Windows de mon install foireuse d’abord…
Lire la suite

Désactiver les notifications mail de Google Buzz

Je vous le dis tout de suite : il n’y a pas d’option actuellement pour avoir Buzz dans GMail sans avoir les notifications mail. Mais il y a une astuce toute bête que j’avais partagée sur mon Buzz.

Filtrer les Buzz entrants

Chaque notification de Buzz arrivant dans la boîte mail obtient d’office 2 étiquettes :

  • is:buzz
  • label:buzz (vous noterez d’ailleurs qu’il n’est plus possible de créer un label « Buzz » car étant réservé par GMail)

Il suffit d’utiliser ces étiquettes (l’une ou l’autre) pour sélectionner les mails Buzz et leur faire faire ce que l’on veut.
Lire la suite

Empêcher la redimension des textarea dans Google Chrome

Si vous êtes vous aussi ennuyé de temps à autre par la possibilité dans Google Chrome de redimensionner les textarea à la guise de l’utilisateur (ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface, mais qui, du point de vue du designer, peut amener à des aberrations graphiques), alors voici une astuce en CSS.

Avant

Textarea avec flèche

Après

Textarea sans la flèche

Code CSS

textarea{ resize:none;}

CSS3 Please : un générateur de CSS3

Si vous voulez déjà utiliser des propriétés CSS3, vous devez savoir qu’elles sont implémentées sur plusieurs navigateurs mais avec des dénominations différentes.
Par exemple border-radius (pour obtenir des coins arrondis)  :

  • -moz-border-radius sous Firefox
  • -webkit-border-radius sous Chrome et Safari
  • border-radius sous Opera et le prochain IE9

Etant donné qu’il est assez laborieux de trouver chacune des dénominations pour une seule et même propriété, CSS3 Please vous sera d’une grande aide. Il vous permet d’éditer les valeurs pour chaque propriété CSS3 puis de les copier et les utiliser sur (quasiment) tous les navigateurs, que ce soit :

  • les ombres
  • les dégradés
  • les fonds semi transparents en RGBA
  • la rotation
  • les arrondis
  • @font-face (pour inclure la police qu’on veut)

Quelques-unes de ces propriétés marchent même sous IE6 et IE7!

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript

Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit.

Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?

Screenshot formulaire CSS3
Lire la suite

L’URL Shortener de Google génère des codes QR

Vous connaissez les codes QR ? Ces code-barres en 2D très utilisés dans le domaine du mobile.
Et vous savez que Google a son propre URL shortener ? Par exemple, pour mon article sur le formulaire CSS3, Google a généré l’URL http://goo.gl/fb/HioT
Si vous ajoutez .qr à la fin, vous obtenez son code QR!

Via Matt Cutts

Introduction à WordPress 3 : custom post type et custom taxonomy

J’ai écrit un tutoriel complet pour réaliser un thème WordPress de A à Z.
Il est plus récent et parle aussi des Custom Post Type et Custom Taxonomy. Du coup, je vous invite à aller le lire.

WordPress vient d’annoncer une Release Candidate pour la version 3. J’ai pour ma part installé et mis en prod la version Beta 2 qui, ma foi, est très stable. Si vous comptez l’installer, allez-y! Les mises à jour se font comme les WP actuellement, c’est à dire automatiquement. Et le système de template pour les thèmes est identique donc vos thèmes marcheront sans souci! Le seul souci est qu’il n’y a pas de version française encore mais bon, c’est uniquement pour l’admin qui est vraiment très simple en anglais.

Nouveautés WordPress 3

Dans les nouveautés, il y a :

  • choisir son login et son mot de passe : au lieu d’avoir « admin » et un mot de passe généré automatiquement, on peut les choisir soi-même.
  • un nouveau thème par défaut, bourré de nouvelles fonctions et qu’on va customiser dans ce tutoriel
  • custom background : un outil dans l’admin pour pouvoir choisir un fond pour le site. Si vous développez des thèmes vous même, ça vous est inutile.
  • Multi-sites! En fait, WordPress et WordPress µ ont fusionné : il est donc possible avec 1 seule installation WP de mettre en place autant de blogs différents que l’on veut. Par exemple : css.bbxdesign.com pour un blog de CSS, inspiration.bbxdesign.com pour un blog d’inspiration etc.
  • Custom Post Types
  • Custom Taxonomies

Je vais développer ces 2 derniers points car ils sont les plus intéressants.
Lire la suite

Script Photoshop : calques vers JPG Web

Vous connaissez sans doute l’excellent outil Photoshop pour « Exporter les calques dans les fichiers » : chaque calque est exporté individuellement et son nom est celui du fichier exporté.

Le seul souci : ce sont des JPG « normaux », c’est à dire non optimisés pour le Web (Fichier -> Enregistrer pour le Web).

Ce script, en utilisant l’option « JPG SFW », regroupe les deux qualités : l’automatisation du processus d’exportation et la qualité optimale pour le Web. Vous économisez ainsi 90% d’espace : je suis moi-même passé de 3Mo d’images à 320Ko.

Gestion d’inbox GMail

La feature « Multiple inboxes » couplée à un label « 2do » est l’outil parfait pour gérer son Inbox :

  • ma 2nde Inbox (paramétrée pour afficher uniquement les « Label: 2do »)  me montre :
    • les mails auxquels je dois répondre
    • les livraisons en cours
    • les processus administratifs en cours
    • les voyages prévus
  • l’orthographe du label « 2do » et pas « ToDo » ou « A faire » fait qu’il est le premier de ma liste de labels.

Et avec les raccourcis claviers, ajouter un mail à cette Inbox nécessite uniquement de taper « L » puis « 2 » et « Entrée ».

Colonnes, marges et nth-child en CSS 3

Mail d’une amie :

J’ai une colle pour toi :

1 – 4 colonnes de 240px => largeur totale 960px
2 – je rajoute un margin-right de 5px et soustrais 5px de la largeur de la colonne => largeur totale 960px
Et pourtant dans le 2ème cas, visuellement la largeur totale est inférieure à 960px.
How is it possible ?

Elle n’était vraisemblablement pas bien réveillée parce qu’elle connaissait la réponse, mais je vais développer la méthode ici pour ceux qui auraient des soucis.

Lire la suite

Responsive Design Testing

Outil tout simple mais extrêmement pratique pour tester votre web design sous plusieurs largeurs d’écrans.

D’ailleurs, si vous voulez avoir la même chose mais en local, voici le simple responsive design test page.

Un bookmarklet pour tester un responsive web design

Un autre outil très rapide pour tester si un site web est responsive ou pas.

Free mobile : activer les données cellulaires pour la 3G et les MMS

Si vous êtes passés chez Free mais que vos données cellulaires ne sont pas activées, vous ne pourrez pas aller sur internet (mais vous pourrez quand même téléphoner et envoyer des SMS). En fait, il faut activer manuellement les données cellulaires, et cette vidéo d’1 min vous explique comment.

Archives WordPress hiérarchisées par date

Beaucoup plus pratique, non ?

Regex backreference dans Notepad++

Si vous aimez le Find & Replace« de Notepad++, et notamment son option regex, voici comment créer un backreference dans le Find et le réutiliser comme replacement text dans le Replace :

Find : ([a-z])<em>
Replace : \1</em>

Là, ça matche tous les <em> précédés d’une lettre (et non d’un espace). Le résultat est ensuite remplacé par la lettre trouvée (sauvegardée entretemps dans une variable) puis par la balise fermante </em>.