{curlybracket} » Tools

todo.sh – powerful command line interface

rike — Wed, 19 Oct 2011 10:37:01 +0000

To work consistently, I have always had todo lists – on paper, in files, on walls.

However, the best tool for me as a person working with a computer most of the time, has always been a simple text file.
Some months ago I discovered the great todo.txt project by Gina Trapani, a developer from Italy.
I have integrated her tool into my version control repository and this is what I want to share here with you today.

Download the latest version of todo.txt and unpack it to a version control repository
chmod +x todo.sh
adapt the todo.cfg file to your needs, adding the path to your current version control repository
add a symlink to todo.sh in /usr/local/bin
add an alias in ~/.bashrc :
alias todo=’/usr/local/bin/todo -d /home/rike/projects/versioncontrol/todo/todo.cfg’

There you go.

Accessible and nice inputs with jQuery

rike — Sun, 18 Sep 2011 21:33:08 +0000

I like to have accessible code while enhancing user experience with jQuery.

Suppose the following markup:

Type your password

I would like to gain space by writing « Type your password » into the text input. However this would create hassle for the user without Javascript: they would need to manually delete my indication.

I could propose this to a user with Javascript, by adding onclick= »this.value= »; » to the input. However, this alters the markup. And also, everytime they click outside of the input, then click again in the input, it will delete the contents which may be annoying.

That is why I came up with this function:

jQuery(document).ready(function() {
    $('.label').each(function(){
        var labelText = $(this).text();
        var correspondingInput = $(this).attr('for');
        $('#'+correspondingInput).attr('value', labelText);
        $('#'+correspondingInput).click(function(){
            if ($(this).attr('value') == labelText) {
                $(this).attr('value', '');
            }
        });
        $(this).hide();
    });
});

Basically, every label of the class « label » will be hidden and its text will be shown in the corresponding text input.
This method only supposes clean markup:

attribute « for » on the label
attribute « id » on the input

Vertically center align content with jQuery

rike — Sun, 31 Jul 2011 19:49:59 +0000

Quick’n'dirty. Vertical center align the #content element using another -parent- element (body, in this example) as a reference with jQuery. <script type="text/javascript"> jQuery(document).ready(function() { centerElm('#content', 'body'); }) function centerElm(elm, elmParent) { var elmHeight = $(elmParent).height(); var elmHeightInner = $(elm).innerHeight(); var … Continue reading →

E-mail spam protection with jQuery

rike — Fri, 08 Jul 2011 15:38:25 +0000

To protect e-mails from spam robots I recommend using this technique, which will only reveal the e-mail adress for users with Javascript enabled, which is typically not the case of robots searching for e-mail adresses.

Of course. you have to include the jQuery library in your section to make this work.

Then you can write emails like this and they will be automatically replaced by Javascript :

#" class="mail" rel="example#/#example.com" title="Please enable Javascript to get the contact adress.">Contact

You may use any suite of caracters for « #/# », except $ or +, just replace them in the script AND the markup.

Alert users to update their browser via jQuery

rike — Fri, 08 Jul 2011 15:27:24 +0000

Sometimes I am too lazy, too busy, not well paid enough or just not willing to make a website work in old and deprecated browsers like IE6.

However, I’d like the users to know that they could have a better experience of my sites if they’d just upgrade their browser to a newer version or to another one, more up-to-date.

That is why I like to use jQuery to tell them :

Of course you have to first include the latest jQuery library to the section of your site.

The CSS to place the message at the beginning of the page:

#oldbrowser {
   position: absolute;
   top: 1em;
   left: 1em;
}
.alert {
  color: red;
}

Adding Vimeo videos to WordPress via extra fields

rike — Wed, 13 Apr 2011 19:57:43 +0000

I wanted an easy solution for people to add videos from Vimeo to their WordPress articles (without having to add them to the editor for several reasons) and I came up with the following:

a function to be added to the teme
a piece of code to add to one or more templates(s) of the theme
an extra field to fill in for each post or page by the editor of the website

The function

Add this to functions.php in your theme. It is based on the vimeo shortcode plugin for WordPress.

function insert_vimeo($clip_id) {
   $width = '640';
   $height = '360';
   if (empty($clip_id) || !is_numeric($clip_id)) return '';
   if ($height && !$width) $width = intval($height * 16 / 9);
   if (!$height && $width) $height = intval($width * 9 / 16);
   return "";
}

The piece of code for your template :

Put this in single.php or page.php, within the loop.

ID, 'vimeo', true) ) :
    $vimeo = get_post_meta($post->ID, 'vimeo', true);
    echo (insert_vimeo($vimeo));
endif;
?>

Now you just have to add an extra field called « vimeo » to your posts or pages and add as a value the ID of the clip, that means the numbers in the URL. If, for example, you want to add the video at http://vimeo.com/20732587 you would add 20732587 to the value of your field.

Automatically generate a RSS feed from static pages with PHP

rike — Thu, 30 Sep 2010 17:51:23 +0000

This may sound a stupid thing to do, however, there are websites out there in plain and badly formatted HTML out there that need RSS feeds.

See the script in action here : http://airdeparis.com/rss.php

Here I am considering that we update some files every now and then and we want those updates to appear in a dynamic RSS feed. In order to do so save the following code as a file called « rss.php », edit it to suit your needs and then upload it to your site. You may access the file like this : http://example.com/rss.php.

How does it work?

We declare the files we want to have in our PHP file in an array. We will use the last modification time of each of these files, filter out the and contents and then create the feed.</p> <p>(By the way, if you want this to work on PHP4 you will have to replace the <em>html_entity_decode</em> function otherwise it will not function.<em>)<br /> </em></p> <p><span id="more-1555"></span></p> <h3>The code</h3> <pre><?php /************************************************************************************* WTFPL, copyright 2010 curlybracket.net html strip function from http://nadeausoftware.com/articles/2007/09/php_tip_how_strip_html_tags_web_page **************************************************************************************/ ////////////////////////////////////////////////////////////////////////////////////// // adjust to your needs $sitename = "My example site"; $siteurl = "http://example.com/"; $sitedescription = "On example.com we talk a lot about examples."; $files = array("firstpage.htm", "second.html", "directory/lol.html"); $lang = "en"; ////////////////////////////////////////////////////////////////////////////////////// $now = date("D, d M Y H:i:s O"); $rss = readfiles($files); ////////////////////////////////////////////////////////////////////////////////////// // RSS output header("Content-Type: application/rss+xml"); echo '<?xml version="1.0" encoding="UTF-8"?>'."\n"; ?> <rss version="2.0"> <channel> <title><?php echo $sitename; ?> '.$item['title'].' '.$siteurl.$item['file'].' '.$item['lastmod'].' '.$item['description'].' '.$siteurl.$item['file'].' \n'; } } ?> ////////////////////////////////////////////////////////////////////////////////////// function readfiles($files) { $i = 0; foreach($files as $file) { if(file_exists($file) && is_readable($file)) { //which file, for link construction $rss[$i]['file'] = $file; // find the page last modification time $rss[$i]['lastmod'] = date("D, d M Y H:i O", filemtime($file)); // find the page title from the atrribute $file_contents = file_get_contents($file); $start = strpos($file_contents, '<title>'); $end = strpos($file_contents, ''); if ($start !== false) { $start = $start + 7; //href=" = 6 chars if ($end !== false) { $end = $end - $start; //length of string } $rss[$i]['title'] = substr($file_contents, $start, $end); } else { $rss[$i]['title'] = $sitename; } // get file description from file content // Get the file's character encoding from a tag preg_match('@]*?>.*?@siu', '@]*?>.*?@siu', '@]*?.*?@siu', '@]*?.*?@siu', '@]*?.*?@siu', '@]*?.*?@siu', '@]*?.*?@siu', '@]*?.*?@siu', '@]*?.*?@siu', // Add line breaks before and after blocks '@

@font-face – doing it right

rike — Sun, 19 Sep 2010 19:20:01 +0000

Tous les graphistes avec lesquels j’ai travaillé sur des sites web durant ces dernières années ont insisté pour utiliser des polices de caractères spécifiques. Des polices autres que Arial, Helvetica, Verdana, Times New Roman etc. qui sont les polices installées par défaut sur les ordinateurs des personnes qui accèdent à une page web (voir aussi : safe list du typetester et la page Wikipedia Core Fonts For The Web).
(Souvent d’ailleurs, c’est parce qu’on peut utiliser des polices de caractère spécifiques que certains graphistes préfèrent faire des sites avec Macromedia Adobe Flash…)

Utilisation de polices standard en CSS

La spécification CSS1 permettait déjà de désigner une police de caractère à utiliser, sa taille, la graisse, le style. De plus, il est conseillé d’utiliser un fallback. En CSS, cela ressemble à quelque chose comme ça :

body {
    font-family: Arial, sans-serif;
    font-size: 1em;
}

A l’ancienne

Jusqu’à il n’y a pas si longtemps, vouloir utiliser des polices de caractère spécifiques impliquait de désigner des zones importantes, comme des menus ou des titres (pour ne pas alourdir trop les pages), et d’y implémenter des images statiques que le ou la graphiste devait préparer auparavant à l’aide d’un logiciel de traitement d’image. (Ces images devaient avoir la bonne taille, de préférence un fond transparent (PNG24) – ce qui posait problème à son tour dans le navigateur alors le plus répandu : IE6..)
Cette méthode devient assez vite pénible, par exemple, quand on a plus que 3 langues différentes – et donc autant d’images différentes – à gérer. Ou encore dès lors qu’on veut modifier un mot…

Cufón

Ensuite on découvre cufón, une méthode qui transforme, à la volée, le texte en images, au moyen de javascript. L’avantage : ça marche dans tous les navigateurs web. Les désavantages : cela fonctionne assez bien sur des polices de caractère de grande taille, mais le texte de petite taille «bave». Mais le plus lourd c’est qu’il devient impossible de copier-coller du texte (sans afficher le code source de la page).
Puis, la méthode cufón pose une question importante : celui de la licence de la police de caractère. Pour générer le code qui remplacera par la suite les textes d’un site à la volée, il faut d’abord uploader un fichier (au format TTF, OTF ou PFB) sur le site de cufón. Or, la plupart des polices a une licence qui ne permet pas le embedding sur un site web, même si, avec cette méthode, on ne met pas directement à disposition le fichier de police lui-même. A ce sujet le générateur cufón met en garde :

See Fonts and the Law at fontembedding.com for more information. Fonts produced by the following foundries/vendors/creators are known to be safe: Adobe Systems. The following are known to require separate or extended licenses for Web Embedding: Berthold (separate), FontFont (separate), Fontsmith (separate), Hoefler & Frere-Jones (separate), ITC (separate), Linotype (extended).

En gros, quand vous achetez une police de caractère (des vendeurs nommés ci-dessus par exemple), vous adhérez aux conditions de vente qui définissent par exemple le nombre d’ordinateurs sur lesquels vous avez le droit d’installer la police, et ce que vous avez le droit de faire avec (regarder, créer et imprimer des documents, par exemple). Et pour pouvoir utiliser leurs polices sur le web, il faut souvent acheter une licence supplémentaire. Et encore, il convient de bien lire les CGV. Dans tous les cas, vous n’avez pas le droit de redistribuer le fichier de police lui-même. Si on veut utiliser cufón, on doit alors s’assurer d’avoir la bonne licence en main, ou alors utiliser une police de caractère libre.

@font-face

Comme dit plus haut, cufón ne m’a pas convaincu – surtout pour des raisons pratiques et visuelles. Un jour, un de mes collaborateurs graphistes m’a averti de la méthode @font-face (probablement dans le but de voir se réaliser ses rêves les plus farfelus en matière de polices de caractères sur le web, hin hin).
Cette méthode fonctionne dans la plupart des navigateurs récents qui ont implémenté la spécification CSS3 (@font-face avait été introduit en CSS2, puis retiré en CSS2.1). Elle consiste à mettre à disposition un fichier de police sur le serveur et de spécifier, dans la feuille de style, l’utilisation de ce fichier. Cela marche très bien, le rendu des caractères est propre, suivant la police utilisée.

En CSS cela ressemblerait, au plus simple, à quelque chose comme ça :

@font-face {
    font-family: Molengo;
    src: url(fonts/Molengo.otf) format("opentype");
}
body {
    font-family: Molengo, sans-serif;
    font-size: 1em;
}

Cependant, cette méthode pose deux problèmes.
Le premier problème est celui du format : Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+ et Google Chrome 4.0+supportent les formats TrueType (TTF) and OpenType (TTF/OTF). Internet Explorer requiert cependant le format EOT, un format qui vise spécifiquement le web et qui utilise des techniques de DRM pour en empêcher la copie illégale. Quand on a une police au format TTF, il faut donc d’abord la convertir au format EOT, pour qu’elle soit lisible aussi dans IE (possible avec cet outil).
(iPhone et iPad pour leur part utilisent des polices au format SVG, la conversion vers SVG est possible avec Batik.)
Il y a, depuis peu, un nouveau format de police, spécifiquement déstiné au web : le WOFF (web open font format). Ce format est supporté par Mozilla Firefox 3.6+, Opera, Google Chrome 5+ et le sera aussi par IE9. Ce format est donc le seul à être supporté par tous les navigateurs importants (à l’exception des navigateurs d’Apple – sans surprise). L’avantage du WOFF est que les fichiers sont beaucoup plus légers que les fichier TTF ou OTF. (Pour convertir un fichier TTF ou OTF vers WOFF on peut utiliser sfnt2woff ou le générateur de Fontsquirrel.)

Le deuxième problème est celui de la licence : si on met à disposition un fichier sur un serveur, chaque visiteur peut y accéder et le télécharger (le navigateur se charge par ailleurs de télécharger le fichier de police dans le cache obligatoirement). On devient alors distributeur de ce fichier. Tout comme cufón, la méthode @font-face pose donc le problème de la licence. Et la plupart des polices commercialisées ne permettent pas la redistribution du fichier.
Mais il y a des solutions à ce problème :

Utiliser des polices libres. En ce qui me concerne, je n’ai aucune envie de me prendre la tête avec des licences propriétaires et je résoud ce conflit en utilisant des polices libres, c’est-à dire des polices qui sont distribuées sous licence GPL, SIL-OFL, CC ou similaires.
Encoder les polices en base64 afin de les inclure directement dans la CSS. On se débarasse ainsi des fichiers qui trainent sur le serveur (méthode pratiqué ainsi par Typekit et possible aussi avec le générateur de kit @font-face de Fontsquirrel).
Le générateur de kit @font-face de Fontsquirrel propose aussi une restriction d’adresse IP et l’option webOnly qui rend les polices ininstallables sur un ordinateur.

Assez parlé.

Trouver des polices pour le web

Il y a quelques services qui se sont spécialisés à la mise à disposition de polices de caractères pour le web (notamment) :

Fontsquirrel (mon favori absolu) met à disposition des polices libres sous forme de kit qu’on peut facilement intégrer dans un site web. Le kit contient la police au format TFF, OTF ou WOFF ainsi qu’a format EOT et SVG, puis la feuille de style toute faite à simplement inclure. (Il ne faut pas oublier d’appliquer la/les font-family dans sa propre feuille de style aux éléments concernés.)
Google webfonts Google aussi propose une sélection de polices libres. Le choix est très réstreint, mais c’est extrèmement simple à appliquer. Il suffit d’inclure une ligne qui appelle une feuille de style sur les serveurs de Google dans le de votre page HTML, puis d’appliquer le nom de la font-family sur les éléments concernés dans se propre feuille de style.
Typekit est un système qui propose une solution toute faite contre un forfait annuel (tester est gratuit). En contrepartie, l’entreprise se charge de payer les licences des polices propriétaires proposées. Ici, il y a un très grand choix. Ils mettent à disposition une interface pour tester, puis génèrent du code CSS et JS. Ensuite, il suffit d’inclure un bout de code sur le site concerné. Une solution très facile d’accès.
Sur Openfontlibrary et Dafont on peut trouver des polices de caractères libres. (Sur Dafont, utiliser les options de recherche avancés pour trier par licence.)

La CSS

Pour finir, voici une feuille de style un peu plus détaillée :

@font-face {
    font-family: Molengo;
    src: url('fonts/Molengo.eot');
    src: local("☺"),
    url('fonts/molengo.woff') format('woff'),
    url('fonts/molengo.otf') format('opentype'),
    url('fonts/molengo.svg#filename') format('svg');
}
body {
     font-family: Molengo, sans-serif;
     font-size: 1em;
}

Explication du code ci-dessus :

Le fichier eot est chargé en premier (pour diverses raisons)
ensuite on propose le fichier le plus adapté et le plus léger : WOFF
si le navigateur n’accepte pas le WOFF, on passe sur OTF (ou TTF)
si on est sur un iPhone ou iPad on passe sur le fichier SVG. le filename est un ID spécifié à la conversion vers SVG et doit être remplacé
local & smiley empêchent d’utiliser une police installée (voir explications)

Plus d’infos ailleurs

Des articles en anglais :

@font-face step by step guide
Wikipedia : web typography
SVG fonts on the iPad (mobile Safari)
A list apart : On web typography
Ascender study on web fonts
D’autres méthodes pour utiliser une police de caractère spécifique se trouvent en bas de cette page.

Protéger une install WordPress par mot de passe tout en ayant une page de garde accessible

rike — Sat, 18 Sep 2010 10:52:53 +0000

Avoir une page de garde accessible pour le monde entier pendant qu’on travaille encore sur un site WordPress installé au même endroit c’est possible :

ajouter un fichier index.html à la racine du site (la page de garde)
ajouter un fichier .htpasswd créé auparavant
ajouter un fichier .htaccess (ou compléter celui de WordPress) avec les lignes suivantes :



   AuthName "Demande de mot de passe"
   AuthUserFile /the/path/to/.htpasswd
   AuthType basic
   Require valid-user


   Order allow,deny
   allow from all

Cela permet d’accéder au fichier index.html à tout le monde (allow from all), tandis que pour accéder à un fichier .php (et donc à WordPress) il faut entrer un nom et un mot de passe (spécifié dans le fichier .htpasswd).
Le chemin vers le fichier .htpasswd doit être absolu. Pour le trouver , on peut utiliser phpinfo().

Seul souci : on ne peut plus correctement voir la page d’accueil du site. Pour cela, il faut entrer à la main dans la barre d’adresse du navigateur : http://example.com/index.php?preview=true

Extensions utiles pour WordPress

rike — Tue, 07 Sep 2010 14:37:29 +0000

Voici, pour mémoire, une liste non exhaustive d’extensions utiles pour WordPress.

Performance

WP minify compresse les feuilles de style et les scripts
WP Super Cache sert des fichiers statiques au format html au lieu de recalculer toutes les pages à chaque requête
wp avoid slow ajoute expires headers et entity tags
gzip enable compression au niveau serveur, sert la page au format gzip, utilise mod_deflate
jquery lightbox puisque sur la plupart des sites j’utilise déjà jQuery, il est plus léger d’utiliser une extension lightbox basé sur cette librairie plutôt que l’original qui est basé sur prototype.

Maintenance

WP DB backup pour faire une sauvegarde de la base de données, manuellement ou automatiquement toutes les semaines (aussi par e-mail)

Securité

Chap Secure Login s’authemtifier sur un site WordPress sans HTTPS peut engendrer que des tiers enregistrent ou lisent votre mot de passe. Cette extension sécurise un minimum la transmission du mot de passe, en le chiffrant (MD5). Seul inconvénient : dépend de l’activation de javascript.
Secure WordPress enlève notamment l’information de la version de WP du

Référencement

Google XML sitemaps génère un plan du site pour faciliter la tâche aux moteurs de recherche
Basic SEO optimise titres & metadonnées (au cas où le thème ne fait pas déjà)

Statistiques des visites

WassUp permet d’avoir des statistiques d’accès au site, en temps réel, avec graphes etc. Surtout utile quand on n’a pas accès aux logs d’Apache. Inconvénient : fait grandir la base de données, suivant le nombre de visites plus ou moins rapidement.