Il n’y a rien de plus horripilant que d’attendre que des publicités chargent pour accéder au contenu d’un article. C’est malheureusement une situation que l’on rencontre fréquemment. La faute en incombe au fonctionnement des blocs AdSense des publicitaires.

En effet, ils nécessitent que nous insérerions le code correspondant à un bloc à l’endroit où il sera affiché. Cela pour deux raisons notamment :

1. Des variables globales identifiants l’annonce sont déclarées.
2. Le script qui va charger l’annonce est immédiatement exécuté et fait appel à des actions d’écriture dans le flux via write.

Le deuxième point oblige le navigateur à traiter le code de l’adsense dès qu’il le rencontre puisque ce dernier n’utilise pas de gestionnaire de chargement. En plus d’écrire dans le flux courant, le système du publicitaire va charger des éléments extérieurs. Pour peu que la latence des réponses soit élevée, l’impression de ralentissement du chargement de la page augmente.

S’est ainsi que si un article est précédé d’un encart publicitaire, l’utilisateur devra patiemment attendre le chargement de ce dernier avant de pouvoir accéder au contenu désiré.
L’expérience utilisateur s’en trouve dégradée.

En finir avec les ralentissements de chargement des pages

Vous l’aurez peut-être remarqué, mais sur piouPiouM’s dev, le chargement des blocs publicitaires est comme temporisé, ne gênant ainsi en rien la navigation sur le site.
Voyons dans la suite du billet comment y parvenir, en prenant pour exemple le service Google Adsense.

Intégration dans une maquette

On commence par définir les emplacements des encarts publicitaires. Cela vous permet ainsi d’intégrer les annonces dans vos maquettes HTML, tout en vous assurant que cette apparence sera conservée pour les utilisateurs n’ayant pas JavaScript d’activé, ou qui bloquent les annonces publicitaires.
Je prend ici le parti d’annoncer la couleur, en précisant la mention Publicité.

1
2
3

<div id="ads-[ads_id]" class="ads [ads_format]">
    Publicité
</div>

En sommes, il s’agit d’un simple élément <div> ayant pour attributs :

• un identifiant [ads_id] : un identifiant unique qui va servir de point d’ancrage au contenu de l’adsense. Vous pouvez par exemple, dans le cas de Google Adsense, utiliser le nom du critère personnalisé en notation CamelCase.
• une classe ads : le style des encarts de pub lorsque celles-ci sont en attente de chargement.
• une classe [ads_format] : le format de l’encart publicitaire. Par exemple, square250 pour une annonce de 250px de côtés ou encore banner468 pour une bannière au format 468 x 60.

Appliquez les styles CSS qui suivent.

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

/* @group Tools */
 
.hide {
  display: none;
}
 
/* @end   Tools */
/* @group Adsense */
 
.ads {
  background-color: #F4F4F4;
  color: #666666;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}
.square250 {
  height: 250px;
  line-height: 250px;
  width: 250px;
}
.banner468 {
  height: 60px;
  line-height: 60px;
  width: 468px;
}
 
/* @end   Adsense */

Insertion du code de l’annonceur

Insérez en fin de page les différents codes donnés par votre annonceur (ici, Google Adsense).

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

<div class="hide">
    <!-- Ads -->
    <div id="adsref-[ads_id]">
        <script type="text/javascript">
google_ad_client = "pub-[client_id]";
google_ad_slot   = "[slot_id]";
google_ad_width  = 250;
google_ad_height = 250;
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
</div>

Chaque annonce est incluse dans un élément ayant pour identifiant adsref-[ads_id] (voir Intégration de la maquette) qui fait le lien avec l’emplacement final de la publicité.

Le tout étant masqué à l’aide d’un div.hide. Il serait en effet désagréable d’afficher les annonces publicitaires en bas de page, même si ce n’est que pour une poignée de [micro]secondes.

Un Adsense Loader avec jQuery

Il ne reste plus qu’à déplacer à l’aide de JavaScript les blocs AdSense aux endroits souhaités. Avec jQuery cela donne :

1
2
3
4
5
6
7

$(function() {
    var $ads;
    $('div[id^="adsref-"]').each(function() {          // pour chaque bloc d'annonce #adsref-[ads_id]
        $ads = $('#ads-' + this.id.substr(7)).empty(); // supprimer de #ads-[ads_id] tout éventuel contenu
        $('ins:first', this).appendTo($ads);           // déplacer l'annonce dans #ads-[ads_id]
    });
});

Bien évidemment, et comme vous êtes sensible aux bonnes pratiques liées à la performance web, vous insérerez naturellement ce code en fin de page

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
• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA
• WordPress : autoriser l’upload de fichiers au format non-supporté

WordPress ne supporte en upload qu’une liste exhaustive de formats de fichiers. Si comme moi vous souhaitez uploader¹ des fichiers issus de TextMate, comme les .tmCommand et autres .tmSnippet, ajoutez le code qui suit 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

<?php
// Add the new filter
add_filter('upload_mimes', 'addUploadMimes');
 
/**
 * Adds new supported media types for upload.
 *
 * @see wp_check_filetype() or get_allowed_mime_types()
 * @param array $mimes Array of mime types keyed by the file extension regex corresponding to those types.
 * @return array
 */
function addUploadMimes($mimes)
{
	$mimes = array_merge($mimes, array(
		'tmbundle|tmCommand|tmDragCommand|tmSnippet|tmLanguage|tmPreferences' => 'application/octet-stream'
	));
 
	return $mimes;
}
?>

Indiquez en clé les nouvelles extensions de fichier (séparées par des pipes) et en valeur le type mime associé.

Continuez votre lecture sur des sujets similaires

• WordPress : récupération avancée des images d’un article
• WordPress : lister les images d’un article sur une page media
• Optimiser le chargement des AdSense
• Rotation des logs Apache
• WordPress jQuery UI Effects

Effectuer une rotation de ses logs Apache chaque semaine à l’aide de rotatelogs :

CustomLog "|/usr/sbin/rotatelogs /var/log/www/mondomaine.tld/mondomaine.tld-access_log 604800" "combined"

Notez le pipe au début d’argument qui permet la redirection du logfile vers rotatelogs.
Merci à patpro pour l’astuce.

Continuez votre lecture sur des sujets similaires

• PHP : installer APC sous Mac OS X Leopard
• Optimiser le chargement des AdSense
• WordPress : autoriser l’upload de fichiers au format non-supporté
• Git : des alias pour aller plus vite
• Git : 10 commandes utiles

Les alias sont des raccourcis vers des commandes de Git. Fini les répétitions et autres saisies de commandes rébarbatives ! Pour ajouter de nouveaux alias, créez ou éditez la section [alias] de l’un des fichiers qui suivent (voir les exemples du billet pour avoir une information sur la syntaxe) :

• ~/.gitconfig pour en bénéficier dans tous vos dépôts.
• .git/config d’un projet pour restreindre son accès à cet unique projet.

Il est également possible de recourir à la commande git config :

$ git config --global alias.st 'status'

Ici, la commande git st devient un alias de git status.

Note : supprimer le flag --global va ajouter l’alias dans le scope du projet courant.

Table des matières

1. Mes alias
2. Des raccourcis pour les utilisateurs de SVN
3. Annuler le dernier commit
4. Éditer le dernier commit
5. Faire le point rapidement
6. Afficher un historique condensé des commits
7. Afficher les changements réalisés depuis le dernier pull
8. Ajouter rapidement des fichiers à commiter
9. Ouvrir dans TextMate les fichiers non commités

Mes alias

Voici les alias que j’utilise dans le scope global, en provenance donc de mon fichier ~/.gitconfig :

[alias]
    amend = commit --amend
    st = status
    who = shortlog -sne
    oneline = log --pretty=oneline --abbrev-commit --graph
    changes = diff --name-status
    dic = diff --cached
    diffstat = diff --stat
    svnpull = svn rebase
    svnpush = svn dcommit
    lc = !git oneline ORIG_HEAD.. --stat --no-merges
    addm = !git-ls-files -m -z | xargs -0 git-add && git status
    addu = !git-ls-files -o --exclude-standard -z | xargs -0 git-add && git status
    rmm = !git ls-files -d -z | xargs -0 git-rm && git status
    mate = !git-ls-files -m -z | xargs -0 mate
    mateall = !git-ls-files -m -o --exclude-standard -z | xargs -0 mate

Des raccourcis pour les utilisateurs de SVN

[alias]
    st = status
    df = diff
    co = checkout
    ci = commit
    br = branch
    svnpull = svn rebase
    svnpush = svn dcommit

Attention : la commande git checkout n’a pas la même utilité dans Git que dans Subversion !

Annuler le dernier commit

Le flag --soft va conserver les modifications dans le répertoire de travail.

[alias]
    undo = git reset --soft HEAD^

Important : nous travaillons ici en local. Il est malvenu d’annuler un commit sur le dépôt distant (désynchro, arbre cassé, etc). On assume ses erreurs

Éditer le dernier commit

[alias]
    amend = commit --amend

Faire le point rapidement

[alias]
    changes = diff --name-status
    dic = diff --cached
    diffstat = diff --stat

Afficher un historique condensé des commits

[alias]
    oneline = log --pretty=oneline --abbrev-commit --graph

Afficher les changements réalisés depuis le dernier pull

[alias]
    lc = !git oneline ORIG_HEAD.. --stat --no-merges

Ajouter rapidement des fichiers à commiter

Les alias qui suivent vont lister les fichiers d’un certain type pour les ajouter à l’index avant commit. J’affiche ensuite l’état du projet pour valider qu’aucune erreur ne s’est produite.

On peut donc chaîner les commandes à condition de préfixer l’alias par un point d’exclamation !.

[alias]
    addm = !git-ls-files -m -z | xargs -0 git-add && git status                     # ajouter les fichiers modifiés.
    addu = !git-ls-files -o --exclude-standard -z | xargs -0 git-add && git status  # ajouter les fichiers inconnus.
    rmm  = !git ls-files -d -z | xargs -0 git-rm && git status                      # supprimer les fichiers marqués
                                                                                    # comme effacés.

Ouvrir dans TextMate les fichiers non commités

Pratique pour reprendre son travail là où l’avait arrêté (poke Jérémy Lecour), git mate permet d’ouvrir dans mon éditeur de code préféré les fichiers modifiés depuis le dernier commit.
L’alias git mateall tiendra compte des fichiers inconnus de l’index du projet.

[alias]
    mate = !git-ls-files -m -z | xargs -0 mate
    mateall = !git-ls-files -m -o --exclude-standard -z | xargs -0 mate

Continuez votre lecture sur des sujets similaires

• Git : 10 commandes utiles
• Optimiser le chargement des AdSense
• WordPress : autoriser l’upload de fichiers au format non-supporté
• Git ignore pour un projet Flex Builder
• Rotation des logs Apache

Cela fait plus d’un an et demi que j’utilise Git dans mes environnements de travail personnel et professionnel. Jamais je ne l’échangerai contre SVN ! Oups, je m’égare

Git c’est bien, mais encore faut-il retenir son nombre croissant de commandes pour l’utiliser au mieux. Ce billet va être le premier d’une série qui va m’aider à mettre sur “papier” les commandes qui me sont le plus utiles.

Liste des commandes utiles

1. Éditer le commentaire du dernier commit
2. Supprimer une branche distante
3. Supprimer un tag du repository distant
4. Compter le nombre de commits par utilisateur
5. Commiter sous une autre identité
6. Antidater un commit
7. Abandonner le suivi de fichiers
8. Copier les fichiers inconnus de Git en dehors du répertoire de travail
9. Supprimer les fichiers inconnus de Git
10. Exporter son projet dans une archive ZIP ou TAR.GZ

Éditer le commentaire du dernier commit

Une commande qui se passe d’explications.

$ git commit --amend -m "Le nouveau commentaire."

Edit :
Comme le précise Jérémy dans les commentaires, cette commande n’est à utiliser que sur un commit qui n’a pas été diffusé sur un autre repository. Autrement, cela casserait l’historique et des divergences peuvent apparaître.

Supprimer une branche distante

Effacer une branche du dépôt distant s’effectue de la même manière que si vous la publiez à l’aide de la commande git push, mais en précédant le nom de la branche d’un double point.

$ git push origin :ma_branche

Supprimer un tag du repository distant

La commande git push --tags ne pousse pas les tags supprimés localement. Afin de supprimer un tag sur le serveur distant, il faut reprendre la syntaxe de suppression d’une branche :

$ git push origin :my_tag

Il est également possible d’utiliser la commande git tag et son flag -d :

$ git tag -d my_tag

Compter le nombre de commits par utilisateur

Avec git shortlog et ses flags -n et -s on obtient la sortie suivante pour le dépôt du framework PHP Pluf :

git shortlog -sn
   163  Loic d'Anterroches
     4  Jürgen Hörmann
     2  Mehdi Kabab
     1  Baptiste Durand-Bret
     1  Jakub Vitak

Ajoutez l’option -e pour afficher les adresses e-mails.

Commiter sous une autre identité

Un contributeur vous a envoyé un patch et vous souhaitez lui attribuer le commit¹ ? Le flag --author est là pour ça :

$ git commit --author "Prénom Nom <email@address.com>"

Antidater un commit

Très pratique pour maintenir à jour son historique de commits, la définition de la variable GIT_AUTHOR_DATE permet de préciser la date et heure du commit.

$ GIT_AUTHOR_DATE="2009-11-26 08:32 +100" git commit -m "Un commit antidaté."

Abandonner le suivi de fichiers

Lors d’une phase de débogage, il est généralement peu utile de suivre les modifications de certains fichiers. La commande git update-index et son flag --assume-unchanged va permettre d’ignorer les changements du ou des fichiers précisés.

$ git update-index --assume-unchanged README.md

Pour revenir à la normale, utilisez le flag --no-assume-unchanged :

$ git update-index --no-assume-unchanged README.md

Copier les fichiers inconnus de Git en dehors du répertoire de travail

Sous Mac OS X² la commande est :

$ git ls-files --others --exclude-standard | cpio -pmd /chemin/de/destination

Retirez l’option --exclude-standard si vous désirez exporter les fichiers ignorés par Git.

Supprimer les fichiers inconnus de Git

Il m’arrive de créer des fichiers qui ne seront finalement pas ajoutés à l’index de ma copie locale. Ces fichiers apparaissent donc inlassablement dans la liste des fichiers untracked. Au lieu de les supprimer manuellement, je charge Git de le faire :

$ git clean -n -d <path>

Ici, la commande git clean ne va rien supprimer. En effet, le flag -n réalise un dry run pour lister les fichiers et répertoires concernés par le nettoyage du répertoire de travail, ou du chemin <path> si ce dernier est précisé.

Si vous souhaitez supprimer uniquement les fichiers et conserver les répertoires vides, enlevez l’option -d.

Ajoutez le flag -x pour inclure les fichiers ignorés par Git (cf. le fichier .gitignore). Pour ne supprimer que les fichiers ignorés, optez pour l’option -X.

Dernière astuce, tant que l’option clean.requireForce n’est pas définie à false dans votre fichier de configuration, Git contraindra git clean à ne fonctionner qu’avec les flags -n et -f. Autrement dit, soit vous réalisez un test dry run, soit vous forcez l’action du nettoyage de votre arbre de travail. Et c’est une bonne chose, personne n’est à l’abri d’une erreur !

Exporter son projet dans une archive ZIP ou TAR.GZ

Si vous souhaitez fournir une archive d’une version précise de votre projet, git archive va pouvoir vous aider. En considérant que la version visée est marquée par le tag 1.0 :

$ git archive --format=zip --prefix=mon_projet-1.0/ -9 1.0 > /chemin/de/destination/mon-projet-1.0.zip

Détail sur les options :

• --format pour spécifier le format de l’archive. git archive --list pour connaître la liste des formats supportés.
• --prefix va préfixer tous les noms de fichiers et dossiers. N’oubliez pas le slash terminal si vous souhaitez regrouper les documents dans un dossier.
• -9 est une option spécifique du format d’exportation ZIP. De 0 à 9, il détermine le niveau de compression.
• 1.0 est le nom du tag. Vous pouvez également exporter des branches, le HEAD et autres tree-ish.
• pour finir on redirige le tout dans un fichier.

Pour exporter les fichiers contenu dans le répertoire d’une branche donnée la commande devient :

$ git archive --format=zip --prefix=mon_projet-dev/ -9 dev:src/ > /chemin/de/destination/mon_projet-dev.zip

Enfin, l’export au format TAR.GZ se fait de la manière suivante :

$ git archive --format=tar --prefix=mon_projet-1.0/ 1.0 | gzip > /chemin/de/destination/mon-projet-1.0.tar.gz

Continuez votre lecture sur des sujets similaires

• Git : des alias pour aller plus vite