Parce que j’en avais ma claque de chercher le texte des licences à ajouter en en-tête de mes sources¹, voici un bundle TextMate pour palier à cette répétitive perte de temps.

Table des matières

1. Installation
2. Utilisation du bundle
3. Personnaliser le sélecteur des licences
4. Corriger le formatage de la licence
5. Licences supportées
6. Développement

Installation

Depuis les sources, avec Git

cd ~/Library/Application\ Support/TextMate/Bundles
git clone git://github.com/piouPiouM/license-helper.tmbundle.git "License Helper.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

Depuis les sources, sans Git

cd ~/Library/Application\ Support/TextMate/Bundles
wget http://github.com/piouPiouM/license-helper.tmbundle/tarball/master
tar zxf license-helper.tmbundle.tar.gz
rm license-helper.tmbundle.tar.gz
mv license-helper.tmbundle "License Helper.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

Téléchargement direct

Après récupération, décompressez l’archive, renommez le dossier en License Helper.tmbundle. Acceptez le changement d’extension. Il ne reste plus qu’à installer le bundle d’un double-clic sur le fichier.

Utilisation du bundle

Utilisez le lanceur license⇥ pour sélectionner une licence via la boîte de dialogue qui s’affiche.

Choix d’une licence – License Helper Textmate Bundle

Un bloc de licence est inséré en tant que Snippet. Utilisez la touche de tabulation pour vous déplacez sur les différents placeholders.

Liste des variables d’environnement utilisées

Déclarez dans votre projet les variables d’environnement qui suivent pour auto-compléter les blocs de licence à insérer :

• TM_PROJECT_YEAR. L’année de production. Par défaut : l’année courante.
• TM_PROJECT_COPYRIGHT_HOLDERS ou TM_AUTHOR ou TM_ORGANIZATION_NAME. Les détenteurs du copyright.
• TM_ORGANIZATION_EMAIL. Adresse mail de l’organisation détentrice du copyright.
• TM_PROJECT_DESCRIPTION. Description brève du projet.

Notez que les variables sont utilisées en fonction de la licence choisie et qu’il n’est pas nécessaire de toutes les renseigner si vous n’en avez pas l’usage.

Vous pouvez fixer la licence de votre projet en ajoutant la variable d’environnement de projet TM_PROJECT_LICENSE. Ainsi, vous n’aurez plus à la sélectionner.

Personnaliser le sélecteur des licences

La commande accessible depuis le menu License Helper → Edit licenses order lance l’édition du fichier de configuration du bundle.
Modifiez l’ordre des licences déclarées selon vos préférences d’apparition dans le sélecteur de licences.

Corriger le formatage de la licence

Il est possible qu’avec certains langages, le rendu des blocs de licences ne corresponde pas à vos attentes. Si tel est le cas, définissez votre propre format :

1. Bundles → Bundle Editor
2. Dans l’entrée License Helper, créez une nouvelle Preference et donnez-lui le nom du langage.
3. Remplissez le champ Scope Selector avec le scope approprié – i.e. source.java pour les sources java.
4. Définissez les shellVariables TM_LICENSE_HELPER_HEADER (début du bloc de commentaire) et TM_LICENSE_HELPER_FOOTER (fin du bloc de commentaire), comme suit :

{  shellVariables = (
        {   name = 'TM_LICENSE_HELPER_HEADER';
            value = '/*';
        },
        {   name = 'TM_LICENSE_HELPER_FOOTER';
            value = '*/';
        },
    );
}

Note : chacune des lignes de la licence peut être préfixée de la variable TM_LICENSE_HELPER_LINE.

Licences supportées

La liste des licences prises en charge par le plugin n’est pas figée. N’hésitez pas à me soumettre celles qui vous font défaut.

• Affero GNU Public License 3.0
• Apache license 2.0
• CeCILL license
• Do What The Fuck You Want To Public License
• GNU General Public License version 2
• GNU General Public License version 3
• GNU Lesser General Public License version 3
• MIT license
• New and Simplified BSD licenses
• Original BSD license
• PostgreSQL license

Développement

Distribué sous license MIT, le code source du bundle est accessible sur GitHub.

Une suggestion, une amélioration, une critique ou un bug à me soumettre ? Ça se passe du côté du bugtracker associé.

Continuez votre lecture sur des sujets similaires

• TextMate : commande « Export words »
• TextMate : convertir une couleur hexadécimale en notation RGBA
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript
• PHP : convertir un DATETIME en un timestamp UNIX

CSS supporte divers formats de description des couleurs, le plus utilisé étant la notation héxadécimale #RRGGBB. L’introduction du support des couleurs RGBA par CSS 3 a été l’occasion pour certains de découvrir les notations rgba(255, 255, 255, 1) et sa version sans gestion de l’opacité rgb(255, 255, 255).

Il faut avouer que si nous disposons d’une palette d’outils d’aide à la saisie de couleurs en notation hexadécimale, il en est rien pour insérer une couleur au format rgb[a], et cela peut agacer. Mais c’était sans compter sur TextMate !

Convertir une couleur héxadécimale en notation RGBA

La commande TextMate Convert Hex to RGB(A) color va vous permettre de convertir via le raccourci clavier ⌘⇧X une couleur héxadécimale en son équivalent RGB(A).

Installation

Après avoir téléchargé le fichier qui suit, installez la commande d’un simple double-clique.

La nouvelle commande est maintenant disponible dans le bundle Source.

Pourquoi l’installer dans le bundle Source au lieu du bundle CSS ? Parce qu’elle peut être utile dans d’autre languages, comme JavaScript et sera ainsi disponible à tout moment, qu’importe le bundle actif.

Usage

Simple d’utilisation, positionnez-vous sur une couleur et activez la commande pour obtenir son équivalent en notation RGB :

#6633ff => rgb(102, 51, 255)
#63F    => rgb(102, 51, 255)

Ajoutez à une couleur héxadécimale la composante d’opacité pour remplacer la couleur par sa forme RGBA :

#6633FF80 => rgba(102, 51, 255, .50)
#63FA     => rgba(102, 51, 255, .67)
#63F0     => rgba(102, 51, 255, 0)

Vous pouvez également sélectionner une couleur (avec le sharp # initial) et lancer la convertion. Cela se révèle être particulièrement utile avec une sélection en colonne.

Code source

Voici le code ruby¹ utilisé au sein de la commande.

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA
• Bundle License Helper pour TextMate
• TextMate : commande « Export words »
• PHP : convertir un DATETIME en un timestamp UNIX

La fin d’année approche à grands pas et voici que la la neige tombe sur les sites. Ces effets JavaScript, à l’esthétique discutable, entravent la navigation sur les pages mais surtout consomment un maximum de cycles CPU.

Supprimer les effets Snow Storm

On en a gros !

Je sais, moi aussi je ne les supporte plus >_<

C’est pourquoi j’ai écrit deux scripts destinés aux utilisateurs de l’extension Greasemonkey :

• SnowStorm Killer qui inhibe l’action de SnowStorm¹.
• jSnow Killer qui supprime l’effet du plugin jQuery jSnow.

Ils ciblent les 2 effets que je rencontre le plus souvent.

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA
• WordPress jQuery UI Effects
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript

De nombreux thèmes WordPress proposent, via un champ personnalisé, une gestion des miniatures à afficher sur la page d’accueil. Mais pourquoi contraindre ses rédacteurs à cette manipulation, qui, il faut le dire, est relativement lourde,surtout pour le néophyte¹. Le plus simple serait de recourir dans son thème à une fonction qui automatiserait la recherche de l’image à afficher en tant que thumbnail.

Évidemment, nous pouvons trouver au détour du web des fonctions au code douteux² qui vont se contenter de chercher la première image dans le contenu du billet.

Pourquoi ne pas étendre (et améliorer tant que nous y sommes =) ce type de fonction afin d’obtenir un outil de recherche d’images au sein d’un billet ? C’est ce que je vous propose ici.

Table des matières

1. Code source
2. Fonctionnement
3. Exemples d’utilisation
4. Liste des paramètres
5. Historique des versions et changelog

Code source

Copiez le code qui suit dans le fichier functions.php de votre thème.

Fonctionnement

Petit retour sur ce code non commenté³, car, à la lecture aisée.

Recherche des images

La fonction get_post_images va effectuer une recherche d’image(s) dans les images jointes au billet cible si l’ordre de tri est différent à natural. En effet, cette option oblige à parser le contenu dans le sens de lecture de l’article, qui peut différer de l’ordre d’ajout des images dans sa bibliothèque de médias.
Notez que la recherche non naturelle prend directement en compte les ordres de tri.

Si la recherche échoue (ou si l’ordre de tri est défini à natural), le contenu du post est analysé. Seront considérées les images comportants une classe wp-image-(\d+). Si la recherche s’avère fructueuse, le tri est appliqué.

Finalement, get_post_images retournera le résultat de la recherche au format spécifié via le paramètre output. En cas d’échec, le booléen false est retourné.

Quid de la présentation ?

Le formatage et l’affichage des données est laissé à la discrétion du développeur. La présentation pourra ainsi évoluer indépendamment de la fonction.

Exemples d’utilisation

Récupérer les images triées par date (défaut)

Nous supposons ici que l’action se déroule dans la boucle puisque qu’aucun identifiant d’article n’a été fourni. Autrement, la valeur de retour sera FALSE.

<?php get_post_images(); ?>

Liste des images triées par date inverse

<?php get_post_images('order=DESC'); ?>

Liste des images triées par ordre d’arrivée dans le billet

<?php get_post_images('orderby=natural'); ?>

Récupération de la première image

<?php get_post_images('number=1'); ?>

Récupération de la première image (par contenu, forcé)

<?php get_post_images('number=1&orderby=natural'); ?>

Afficher la miniature de la première image d’un article

La fonction first_thumbnail qui suit affichera au format thumbnail la première image du billet ayant pour identifiant $post_id. Si ce dernier est omit, l’identifiant du billet en cours d’itération depuis la boucle sera utilisé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**
 * Display thumb of the first image from a post.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @param  array $post_id Optional. Post ID.
 * @return bool False on failure.
 */
function first_thumbnail($post_id = null)
{
    $img = get_post_images("post_id=$post_id&number=1");
    if (false !== $img)
    {
        echo wp_get_attachment_link($img[0]->ID, 'thumbnail');
    }
    else
    {
        return false;
    }
}

Générer une miniature de la première image d’un article avec timthumb

La même fonction mais qui fait appel à timthumb pour générer une miniature aux dimensions arbitraires.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/**
 * Display a dynamic thumbnail of the first image from a post.
 *
 * The defaults are as follows:
 *     'post_id' - Default is null. Post ID.
 *     'h' - Default is null. Thumbnail height.
 *     'w' - Default is null. Thumbnail width.
 *     'q' - Default is null. Thumbnail quality.
 *     'zc' - Default is null. Zoom crop used for generates the thumbnail.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @link http://code.google.com/p/timthumb/ Timthumb
 *
 * @param  array $args Optional. Overrides defaults.
 * @return bool False on failure.
 */
function first_thumbnail($args = array())
{
    $defaults = array(
        'post_id' => null,
        'h'  => null,
        'q'  => null,
        'w'  => null,
        'zc' => null,
    );
    $args    = wp_parse_args($args, $defaults);
    $post_id = $args['post_id'];
    $img     = get_post_images("post_id=$post_id&number=1");
    unset($args['post_id']);
 
    if (false !== $img)
    {
        $img = $img[0];
 
        if (null === $post_id)
        {
            if (in_the_loop())
            {
                global $post;
                $post_id = $post->ID;
            }
            else
            {
                if (isset($img->post_parent))
                {
                    $post_id = $img->post_parent;
                }
                else
                {
                    return false;
                }
            }
        }
        $query     = http_build_query($args, '', '&amp;');
        $thumbnail = sprintf('<img src="%s?src=%s%s" rel="attachment"%s%s/>',
            get_bloginfo('template_url', 'display') . '/timthumb.php', // customize timthumb url
            $img->guid,
            ($query) ? '&amp;' . $query : '',
            (isset($args['w'])) ? " width=\"{$args['w']}\"" : '',
            (isset($args['h'])) ? " height=\"{$args['h']}\"" : ''
        );
 
        printf('<a href="%s" title="%s">%s</a>',
            get_permalink($post_id),
            esc_attr(get_the_title($post_id)),
            $thumbnail
        );
    }
    else
    {
        return false;
    }
}

Ainsi, pour afficher une miniature de 260x120 pixels de la première image de l’article courant nous utiliserons :

<?php first_thumbnail('w=260&h=120'); ?>

Liste des paramètres

Voici la liste des paramètres acceptés par l’argument $args de la fonction get_post_images :

number
(integer) (optionnel) Le nombre maximal d’images à retourner. Par défaut à -1, retourne toutes les images.

order
(string) (optionnel) Ordre de tri. Les valeurs valides sont :

• 'ASC' - Croissant (du plus petit au plus grand). (Par défaut)
• 'DESC' - Décroissant (du plus grand au plus petit).

orderby
(string) (optionnel) Ordonner les images par l’une des valeurs qui suivent :

• 'date' - Trier selon la date de création. (Par Défaut)
• 'post_id' - Trier numériquement par l’ID des articles.
• 'natural' - Trier selon l’affichage des images dans le contenu de l’article.

output
(string) (optionnel) Le format de sortie.

• OBJECT - Retourne un tableau d’objets instances de la classe stdClass. (Par défaut)
• ARRAY_A - Retourne un tableau associatif (nom des champs => valeurs).
• ARRAY_N - Retourne un tableau indexé numériquement de la valeur des champs.

post_id
(integer) (optionnel) L’identifiant de l’article à analyser. Par défaut à NULL, utilise celui du billet courant dans la boucle.

preserve_keys
(boolean) (optionnel) Préserver les clés retournées par l’API de WordPress, c.-à-d les identifiants des images. Par défaut à FALSE, le tableau résultat est indexé numériquement à partir de 0.

Historique des versions et changelog

1.0.0

• Version initiale.

Continuez votre lecture sur des sujets similaires

• WordPress : autoriser l’upload de fichiers au format non-supporté
• WordPress : lister les images d’un article sur une page media
• WordPress jQuery UI Effects
• Convertir une icône ICNS en une image PNG
• Correctif pour la faille WordPress de réinitialisation de mot de passe

Julien a présenté ce 25 août 2009 une fonction d’affichage des miniatures liées à un même article pour WordPress. Bien que fonctionnelle, elle ne se révèle pas être des plus pratique.

Note :
J’écris ici même parce qu’en fin de billet je colle une fonction qui ferait un peu pavé dans les commentaires de l’article de Julien. Je ne fais également plus confiance aux services de pasties en ligne, ayant perdu trop d’extraits de code…

Comme le relève OncleTom, la présentation et la logique sont mélangées.
La fonction wallthumb dispose d’un argument $id qui est finalement inutile. Il sert simplement à tester la vignette courante, mais, comme la fonction est à appeler sur la page d’un media, l’élément courant est obligatoirement le media affiché.
Enfin, les arguments de présentation cassent avec la logique introduite par WordPress. Dans son API, ce dernier fait généralement appel à un unique argument¹, passé sous la forme d’un tableau ou d’une chaîne de caractères.

Ci-dessous, une fonction de remplacement à ajouter dans le fichier functions.php de votre thème.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

<?php
/**
 * Retrieve the list of images attached to the same post that the current attachment.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @link http://www.webinventif.fr/wordpress-afficher-toutes-miniatures-liees-article-pages-media/ Inspiration
 *
 * @param  string $output Optional. Constant for return type, either OBJECT (default), ARRAY_A, ARRAY_N.
 * @return array|bool False on failure
 **/
function get_other_attachments($output = OBJECT)
{
    global $post;
    if (!is_attachment() || false === (bool) $post->post_parent)
        return false;
 
    $attachments = get_children(array(
        'post_type'      => 'attachment',
        'post_mime_type' => 'image',
        'post_status'    => 'inherit',
        'post_parent'    => $post->post_parent
    ), $output);
 
    return $attachments;
}
 
/**
 * Display the HTML list of images attached to the same post that the current attachment.
 *
 * Only works on an attachment page.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @link http://www.webinventif.fr/wordpress-afficher-toutes-miniatures-liees-article-pages-media/ Inspiration
 *
 * @param  string|array $args Optional. User defined arguments for replacing the defaults.
 * @return bool False on failure.
 */
function wallthumb($args = array())
{
    global $post;
    $attachments = get_other_attachments();
    if (!$attachments)
        return false;
 
    $defaults = array(
        'id'            => 'gallery-%d',
        'current_class' => 'current',
        'thumb_class'   => 'gallerythumb',
        'before_thumb'  => '<li class="%s">',
        'after_thumb'   => '</li>',
        'before_list'   => '<ul id="%s">',
        'after_list'    => '</ul>',
    );
    $args        = wp_parse_args($args, $defaults);
    $current_id  = $post->ID;
    $thumb_class = trim($args['thumb_class']);
 
    static $i = 0;
    $stack = array(sprintf($args['before_list'], sprintf($args['id'], ++$i)));
    foreach ($attachments as $attachment)
    {
        if ($current_id != $attachment->ID)
        {
            $buf = sprintf($args['before_thumb'], $thumb_class);
        }
        else
        {
            $buf = sprintf($args['before_thumb'], trim($thumb_class . ' ' . $args['current_class']));
        }
        $buf .= sprintf('<a href="%s" title="%s" rel="attachment">%s</a>',
            get_attachment_link($attachment->ID),
            esc_attr(get_the_title($attachment->ID)),
            wp_get_attachment_image($attachment->ID, 'thumbnail')
        );
        $buf .= $args['after_thumb'];
        $stack[] = $buf;
    }
    echo implode("\n\t", $stack) . "\n{$args['after_list']}";
}

Continuez votre lecture sur des sujets similaires

• WordPress : autoriser l’upload de fichiers au format non-supporté
• WordPress : récupération avancée des images d’un article
• WordPress jQuery UI Effects
• Correctif pour la faille WordPress de réinitialisation de mot de passe
• WordPress et SmartyPants : des légendes qui disparaissent

Une faille a été récemment découverte dans WordPress. Elle permet à quiconque de forcer la réinitialisation de mot de passe du compte admin (compte par défaut de WordPress).

Diverses “solutions” ont été apportées notamment par Korben ou encore par l’équipe de développement de l’outil de blogging.

Cependant ces correctifs sont crades : ils nous obligent à directement modifier le fichier wp-login.php de WordPress. Vous allez me dire que cela n’est pas gravisime compte tenu du fait qu’une mise à jour de WordPress sortira sous peu. Certes. Mais je déteste agir directement sur les sources de l’outil si ce dernier m’offre des points d’entrées pour arriver à mes fins depuis l’extérieur.

Ainsi, il vous suffit d’ajouter ce morceau de code dans le fichier functions.php de votre thème pour fixer le trou de sécurité.

1
2
3
4
5
6
7
8
9
10
11
12

function fixes_reset_password_security()
{
    global $wp_version;
 
    if (version_compare($wp_version, '2.8.3', '<=') &&
        false !== strpos(basename($_SERVER['SCRIPT_FILENAME']), 'wp-login.php') &&
        isset($_GET['key']) && is_array($_GET['key'])) 
    {
        unset($_GET['key']);
    }
}
add_action('init', 'fixes_reset_password_security', 1);

Continuez votre lecture sur des sujets similaires

• WordPress et SmartyPants : des légendes qui disparaissent
• Shortcode WordPress : intégrer un flux RSS
• WordPress : autoriser l’upload de fichiers au format non-supporté
• WordPress jQuery UI Effects
• WordPress : récupération avancée des images d’un article

Si comme moi vous utilisez Typographer, extension de SmartyPants¹, en tant que plugin WordPress vous l’aurez certainement relevé : son activation entraîne la disparition des légendes pour les images.

Pour corriger cet effet de bord, éditez le fichier smartypants.php² pour y remplacer la priorité d’application des filtres the_content et the_excerpt (originellement à 10) :

137
138

add_filter('the_content', 'SmartyPants', 11);
add_filter('the_excerpt', 'SmartyPants', 11);

Le plugin SmartyPants Typographer³ entre ainsi en action après le traitement du shortcode caption.

Le bug et son correctif ont été reportés auprès de Michel Fortin.

Mise à jour du 09/08/2009
Le correctif sera appliqué dans la prochaine version de SmartyPants (et son extension Typographer).

Continuez votre lecture sur des sujets similaires

• Shortcode WordPress : intégrer un flux RSS
• Correctif pour la faille WordPress de réinitialisation de mot de passe
• WordPress : autoriser l’upload de fichiers au format non-supporté
• WordPress jQuery UI Effects
• WordPress : récupération avancée des images d’un article

C’est en consultant mes statistiques de fréquentation que je me suis aperçu que des accès se faisaient sur des pages virtuelles comme http://pioupioum.fr/index.html ou encore http://pioupioum.fr/contact/index.html. Malheureusement, WordPress retournait un code HTTP 404 ; les pages étaient introuvables.

Utilisant la structure de permaliens /%category%/%postname%.html, un accès à la page index.html contraint WordPress à rechercher un article ayant pour slug (identifiant) index. Bien évidemment je n’en ai pas.

Je corrige ce comportement en complétant les règles de réécriture d’URLs de WordPress avec les lignes 6 à 8 de cet extrait de mon fichier .htaccess :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# BEGIN WordPress
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
 
    # Eviter l'erreur 404 sur les pages index.html
    RewriteCond %{THE_REQUEST} ^.*/index.html
    RewriteRule ^(.*)index.html /$1 [R=301,L]
 
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>
# END WordPress

En clair, dès qu’un utilisateur cherchera à atteindre une page index.html Apache le redirigera vers son niveau hiérarchique parent.

Continuez votre lecture sur des sujets similaires

• WordPress : autoriser l’upload de fichiers au format non-supporté
• WordPress jQuery UI Effects
• WordPress : récupération avancée des images d’un article
• WordPress : lister les images d’un article sur une page media
• Correctif pour la faille WordPress de réinitialisation de mot de passe

La propriété CSS content qui s’utilise de concert avec les sélecteurs :before ou :after, sert essentiellement pour enrichir¹ le rendu d’un contenu HTML existant. Pratique, ajouter un petit en rythme après le texte « j’aime coder » ne pose aucun problème. Cependant, si nous sommes amenés à insérer des caractères non-ASCII ça se complique.

Chercher la représentation Unicode d’un caractère

La représentation Unicode d’un caractère peut se trouver de plusieurs manières :

• en perdant son temps dans la table des caractères Unicode ;
• en s’aidant d’une extension Firefox sic ;
• via la palette des caractères de Mac OS X, en survolant le caractère à insérer. Son code Unicode s’affiche alors dans l’infobulle.

Affichage de la représentation Unicode d’un caractère.

Dans notre feuille de styles, nous insérons le nombre héxadécimal récupéré préfixé du caractère d’échappement \, sans oublier de supprimer toute pollution comme 0x0. Nous obtiendrons ainsi :

• ♫ : \266b
• ⌘ : \2318

Ce qui se traduit dans une CSS par :

a:after {
  content:"\266b";
}

Nous arrivons à nos fins, mais ne pourrait-on pas accélérer le processus ?

Un coup de TextMate

Rien de plus simple avec TextMate. Téléchargez et décompressez l’archive qui suit². Double-cliquez sur le fichier tmCommand pour l’installer.

La nouvelle commande Convert Selection to Unicode est maintenant disponible dans le bundle CSS et s’active par le raccourci clavier ⌃⇧X sur tout caractère ou texte sélectionné.

Une astuce pour la route

L’espace insécable (entité caractère  ) s’insère au clavier via le raccourci clavier ⌥ + Espace et a pour représentation Unicode \A0.

Ressources

• Blog & Blues : Feuilles de style, jeux et codage de caractères.
• nanoum blog : before et after

Continuez votre lecture sur des sujets similaires

• Bundle License Helper pour TextMate
• TextMate : commande « Export words »
• PHP : installer APC sous Mac OS X Leopard
• TextMate : convertir une couleur hexadécimale en notation RGBA
• Convertir une icône ICNS en une image PNG

La lecture en streaming de longues vidéos sur Dailymotion ne me convient pas : crash de Firefox inopinés, pas de contrôle de lecture à distance, etc… Le bookmarklet qui suit m’offre plus de liberté en me permettant de visionner les vidéos dans le lecteur de mon choix.

De nouveaux liens de téléchargement.

Mise en place

Glissez-déposez simplement le lien ci-dessous dans les favoris de votre navigateur, dans votre barre personnelle par exemple.

Utilisation

Rendez-vous sur une page vidéo de Dailymotion et attendez le début de son chargement.¹ Cliquez sur le favori fraîchement créé. De nouveaux liens apparaissent sous la vidéo.

Cliquez droit sur le lien du format vidéo désiré puis sélectionnez l’entrée de menu Enregistrez le lien sous… pour lancer le téléchargement.

Changelog

Version 1.0.2

• Fixed issue 5, Not on a video of the dailymotion website.
  Important : Vous devez mettre à jour votre bookmarklet (cf. procédure d’installation).

Version 1.0.1

• Fixed format detection. Dailymotion now uses absolute paths.

Version 1.0.0

• Initial release.

Code source

Les sources sont disponibles sur ma forge InDefero.

Continuez votre lecture sur des sujets similaires

• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript
• Optimiser le chargement des AdSense
• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA