Tilap.net

Développement web

Tutoriels

Tutoriels pour faire et comprendre en pas à pas, sans prétention.

Yarn en remplacement de npm

Actuellement, Npm est le gestionnaire de paquet le plus populaire dans l’écosystème Javascript. Facebook a publié un nouveau gestionnaire, Yarn. Ce dernier apporte quelques fonctionnalités qui deviennent vite indispensables.

Installation offline

A l’installation d’un paquet, Yarn conserve une copie du paquet original. Il est alors possible de réinstaller ce même paquet, dans la même version, en étant offline.

NPM, local, tarball…

Yarn profite de npm et permet d’en installer n’importe quel paquet. Par exemple

yarn add koa 

Lire la suite »

NodeJS: Trouver les promises non résolues

L’avènement des promises en JS a grandement améliorer lisibilité, interopérabilité et simplicité du code. Néanmoins, à l’utilisation, on se heurte rapidement au problème des promises non résolues et non gérées, qui bloquent le programme.

Avec le code suivant, si doSomething() est rejetée, votre code sera silencieux car à aucun moment vous ne catchez l’erreur. Et pour trouver pourquoi votre code plante, il vous faudra chercher à l’aveugle dans votre code.

doSomething().then((res) => doSomethingElse(res));

Pour éviter cette situation et trouver les promises rejetées que vous auriez oublié de gérer, vous pouvez utiliser l’évènement unhandledRejection de process qui prendra le relai.

process.on('unhandledRejection', (reason) => console.error(`Unhandle promise rejection: ${reason}`));

Tout code qui suivra (et dont une promise rejetée ne sera pas gérée) sera remonté dans votre console. Utile en debug ou dans les cas de crashs incontrollable, ça ne doit par contre pas devenir une solution de logique dans votre application.

Créer un repo Github depuis bash

Si vous créez souvent des repos sur Github, voici une commande utile exécutable depuis votre console (bash).
Si vous utilisez la double authentification sur Github, ça ne fonctionnera peut être pas, mais je serai ravi de savoir comment faire…

Elle permet de :

  • créer un repo du nom de votre choix sur Github. Le repos contiendra uniquement un README avec le nom du repo ;
  • exécuter un git init dans le répertoire courant ;
  • d’ajouter le repo Github créé comme remote origin.

Ainsi, vous pouvez commencer un projet et le mettre sur git en à peine 2 lignes :

githubrepo name-of-the-repo
git add -A
git commit 'Initial commit'

Le script bash en question :

Il vous suffit de l’ajouter à votre .bashrc ou dans votre .bashalias.

Slack et irssi

Slack est formidable, avec une UX/UI bien faite. Et puis certains barbares comme moi se retrouvent parfois sur des ordinateurs sans interface graphique (oui ça existe) ou bien ont déjà le client IRC irssi d’ouvert et utilisé. Depuis peu, Slack permet d’être lu depuis un client IRC, donc IRSSI bien entendu. Une note rapide pour se souvenir donc de comment utiliser Slack avec le client IRC Irssi.

Les infos du gateway IRC pour Slack

Toutes les infos utiles (serveur, login, mot de passe, port) sont sur cette page de config de votre compte Slack. Vous pourrez y récupérer:

  • YOUR_NICKNAME
  • YOUR_IRC_PASSWORD (propre à IRC, pas celui de votre compte Slack)
  • YOUR_TEAM (généralement truc de truc.slack.com)
  • et un port, j’ai utilisé le 6697 dans le script ci-dessous mais plusieurs sont disponible si vous avez des problèmes de pare-feu.

En modifiant le fichier de config

Méthode pour ceux qui savent ce qu’ils font

{
address = "YOUR_TEAM.irc.slack.com";
chatnet = "slack";
port = "6697";
password = "YOUR_IRC_PASSWORD";
use_ssl = "yes";
ssl_verify = "no";
autoconnect = "yes";
}

En le faisant depuis IRSSI

Ca revient au même, mais ça vous évitera les fautes de syntaxes :

/network add -nick YOUR_NICKNAME slack
/server add -auto -ssl -network slack YOUR_TEAM.irc.slack.com 6697 YOUR_IRC_PASSWORD
/save

Intégrer Fontello dans son workflow dev pour gérer facilement ses icones applicatifs

Si vous ne connaissez pas fontello…

Fontello est est générateur de fonticon en ligne. Il permet à travers une interface web de construire un set d’icônes en les choisissant parmi les fonticons open source les plus connues, ou bien en important ses propres SVG.
Il va plus loin, en mettant à disposition de quoi définir le nom de votre font, de préciser pour chaque icône le nom de la classe CSS à utiliser, les codes ASCII de chacun, et de télécharger le tout sous un zip. Un vrai petit bonheur qui simplifie la vie.

Une fois le zip à votre disposition, vous l’intégrez dans votre projet, pointez sur la feuille de style, puis utilisez les classes CSS des fonticones dans votre code. Très facile.

Lire la suite »

Git: hook pre-commit bête et pratique

Une très courte note sur un hook de pré commit rapide, simple.

Dans l’exemple de code ci-dessous très facilement adaptable, il est impossible de commiter si dans votre code source (répertoire src) vous avez des console.log. En principe ils ne sont utilisés que pour du debug (rappel: il y a aussi console.info(), console.error(), et même console.dir… mais veillez quand même à jeter un œil sur la compatibilité de certaines méthodes de console si vous les utilisez dans votre navigateur).

grep -Rq 'console.log' src && echo 'Commit aborted: there are "console.log" in the source code!' && exit 1

C’est bien sûr à mettre dans votre fichier ./git/hooks/pre-commit, de préférence le plus haut (en fonction de ce que vous pouvez avoir d’autre dans votre hook).

ES6: surcharge des classes: propriétés et méthodes statiques

Avec l’avènement de l’ES6, la POO est bien plus évidente qu’auparavant. Et j’en arrive à vouloir utiliser des pattern usuels transposés d’autres langage, comme dans cet exemple où je souhaite ajouter méthodes et propriétés à une classe de façon « dynamique », c’est à dire à postériori et dont les noms vont être définis de façon dynamique.

Lire la suite »

KoaJS – Middleware pour des urls propres

Voici mon premier middleware KoaJS disponible publiquement sur npm: il nettoie les URL en entrées, et au besoin redirige vers les Urls propres.

Pourquoi est-ce important d’avoir des URLS propres ?

Avoir des urls mal formatées avec des caractères illisibles, des slash en double ou plus, des majuscules, des minuscules… est néfaste à plusieurs niveaux. Au delà du simple désagrément visuel, mal formatées, plusieurs urls vous mènent à une même page de contenu.

Exemple:
http://tilap.net/article et http://tilap.net/ArtiCLE mèneront à la même page
http://tilap.net/mon/article et http://tilap.net/mon///article/

Le problème ? D’une part pour votre référencement: une même page avec plusieurs urls, ça s’appelle du duplicate content, et ça vous flingue dans le classement de Google.

D’autre part, lorsque vous partagez une URL sur un compte social (twitter, facebook, …), le décompte de ces urls et de leurs partage se base sur un hash de l’url. Et donc, vous ne pouvez pas suivre correctement vos partages…

Lire la suite »

Slack: Poster des twitts avec un bot depuis un chan

Slack est un parfait lieu d’échange, que ce soit en entreprise (comme dans ma boite Evaneos) ou pour des communautés autonomes (comme celle de Scotch.io ou Frontend FR par exemple).

Tout comme sur les autres réseaux sociaux, on y partage beaucoup de liens, et on a souvent envie de les repartager sur le/les comptes Twitter de la communauté/entreprise. Par exemple, chez Evaneos, on pense à alimenter des comptes twitter de veille aussi bien UX que dev.

Et ainsi naquit le bot

La solution pour éviter de partager les accès à tout le monde et de le faire depuis Slack directement: un petit robot Hubot que vous pouvez vous aussi utiliser.

Lire la suite »

Trouver les packages inutiles dans votre code Node avec Gulp et depcheck

Lorsqu’un projet NodeJS devient un peu conséquent, la liste des dépendances a souvent tendance à s’allonger. Au fil du temps, certains packages ne sont plus utilisés mais ne sont pas toujours supprimés du package.json.

Voici donc une tache gulp très simple, basée sur depcheck, qui vous avertira si des paquets sont inutilisés.

Lire la suite »

Git push hook pour éviter de pusher sur master ou avoir un message de confirmation pour certaines branches

Voici un petit hook github qui s’exécute à chaque fois que vous ferez un git push et qui :
– vous empêchera de faire des push force sur certaines branches ;
– vous empêchera de faire des push sur certaines branches ;
– vous demandera confirmation pour d’autres branches ;
– laissera le comportement par défaut pour les branches non spécifiées.

Ce hook permet par exemple de ne pas pusher sur la branch master (faites des pull requests !) ou bien de vous demander confirmation quand vous pushez sur des branches un peu sensibles.

Installation

Copiez le code ci-après dans .git/hooks/pre-push de votre projet. Rendez le exécutable avec

chmod +x .git/hooks/pre-push

Vous pouvez ensuite modifier les variables :
NOPUSHFORCE_BRANCHES_PATTERN, liste des branches pour lesquelles le push force ne sera plus possible
NOPUSH_BRANCHES_PATTERN, liste des branches pour lesquelles le push ne sera plus possible
CONFIRM_BRANCH_PATTERN, les branches pour lesquelles on vous demandera confirmation.

Le code du Hook

#!/bin/bash
## CONFIG
# Pattern of branch name you won't be allowed to push force
NOPUSHFORCE_BRANCHES_PATTERN="^(dev|release-*|patch-*)"
# Pattern of branch name you won't be allowed to push
NOPUSH_BRANCHES_PATTERN="^(master)"
# Pattern of branch name that will ask to confirm before pushing
CONFIRM_BRANCH_PATTERN="^(master|production)"
## VARS
FORCE_PUSH_PATTERN="force|delete|-f"
CURRENT_BRANCH=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
PUSH_COMMAND=`ps -ocommand= -p $PPID`
## Deny push force
if [[ "$CURRENT_BRANCH" =~ $NOPUSHFORCE_BRANCHES_PATTERN && "$PUSH_COMMAND" =~ $FORCE_PUSH_PATTERN ]]; then
echo "Pre-push hook: push force on branch \"$CURRENT_BRANCH\" is not allowed"
exit 1
fi
## Deny push
if [[ "$CURRENT_BRANCH" =~ $NOPUSH_BRANCHES_PATTERN ]]; then
echo "Pre-push hook: push on branch \"$CURRENT_BRANCH\" is not allowed"
exit 1
fi
## Ask confirmation
if [[ "$CURRENT_BRANCH" =~ $CONFIRM_BRANCH_PATTERN ]]
then
read -p "You're about to push on \"$CURRENT_BRANCH\". Are you really sure? [Y|n] " -n 1 -r < /dev/tty echo if echo $REPLY | grep -E '^[YyOo]$' > /dev/null ; then
exit 0
else
exit 1
fi
fi
exit 0

Le code est aussi disponible sur Gist.

NodeJS en production

Je développe habituellement en PHP mais me suis mis récemment à NodeJS. Et j’ai découvert que la mise en production d’application nodeJS est un peu plus complexe. Mais soyons honnête, là où j’appréhender des difficultés, il s’avère que ça reste très simple.

NodeJS en production : faire persister le process node avec PM2

En phase de développement, lancer une application node consiste simplement à ouvrir un terminal et à lancer une commande de ce style:

node app.js

ou bien pour avoir des reload automatique, avec nodemon

./node_modules/.bin/nodemon server.js

Mais dès que l’on ferme le terminal, l’application s’arrête. La solution de le lancer dans un screen est une première solution, mais au reboot du serveur ou si pour une raison quelconque screen meurt, l’application nodejs s’arrête.

Pour assurer la survie de mon application, j’utilise donc le package PM2 qui va veiller à maintenir mon application en vie et à la relancer au reboot de mon serveur. Pour l’installer, rien de plus simple:

npm install pm2 -g

PM2: utilisation

  • Lancer une application avec PM2:
    pm2 start app.js

  • Arréter une application avec PM2:

    pm2 stop app.js

  • Relancer une application avec PM2:

    pm2 restart app.js

  • Lister toutes les applis qui tournent avec PM2:

    pm2 list app.js

En aspect pratique, la liste des appli gérée par pm2, leur status et les quelques infos indispensables sont bien clairement présentées dans la console.

pm2-start
pm2-start

Rendre l’application disponible sur votre port 80 avec un reverse proxy Apache

L’application tourne à présent, mais est disponible sur le port que vous aurez configuré (du style http://domain.tld:3001). Pour la rendre disponible via Apache, nous allons faire un reverse proxy: tout ce qui arrivera sur un virtualhost donné avec le port 80 sera redirigé vers l’application node.

Activer les modules apache

On va avoir besoin des modules proxy et proxy_http. Ils sont disponibles avec Apache, mais ne sont pas activés par défaut. Donc au besoin:

a2enmod http
a2enmod http_proxy

Déclarer le virtualhost et le reverse proxy

<VirtualHost *:80>
ServerName my-domain.tld
DocumentRoot "/path/to/node/application"
<Directory "/path/to/node/application">
AllowOverride All
Allow from All
</Directory>
ProxyRequests off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
<Location />
ProxyPass http://localhost:3001/
ProxyPassReverse http://localhost:3001/
</Location>
</VirtualHost>

Autres pistes

Il existe des alternatives à pm2 comme forever lui aussi très utilisé et pas plus compliqué que pm2.

J’ai décrit la démarche avec Apache pour des raisons pragmatiques (je le connais bien et c’est ce que j’ai sur la majorité de mes serveurs), mais la même chose est réalisable avec nginx et est à priori plus performant.

Git stash cheatsheet

Git stash permet de mettre de coté des fichiers en cours de modification et de les récupérer en l’état plus tard. Ce « stash » peut être réalisé plusieurs fois et on a donc une « pile » de stash ayant chacun un identifiant. Ca devient vite indispensable quand on a besoin de faire un rebase, un checkout ou un merge.

Récapitulatif des commandes à retenir pour git stash :

Mettre de coté les fichiers en cours de modification

git stash

Lister les stashs :

git stash list

Récupérer les derniers fichiers :

git stash apply

Récupérer les derniers fichiers et supprimer le stash :

git stash pop

Récupérer les fichiers d’un stash en particulier :

git stash apply stash@{0}

Supprimer un stash :

git stash drop stash@{0}

Voir les détails d’un stash :

git stash show stash@{0}

Créer une nouvelle branche à partir d’un stash :

git stash branch stash@{0}

Dans les exemples ci dessus, stash@{0}indique un stash précis de la pile (où 0 peut prendre d’autres valeurs numériques). Utiliser la commande git stash listpour visualiser ces identifiants.

Docker: Cannot start container: Port has already been allocated

En lançant Docker, vous pouvez avoir l’erreur :

Error response from daemon: Cannot start container my_container: port has already been allocated
2015/04/01 09:13:11 Error: failed to start one or more containers

Elle est due au fait que vous avez déjà un autre service utilisant le port que vous souhaitez utiliser avec votre container docker.

Pour résoudre cette erreur, arrêtez le service utilisant ce port et redémarrez votre docker.

Par exemple, si vous avez Apache en concurrence avec Docker sur le port 80:

sudo service apache2 stop
sudo service docker.io restart

Puis relancer votre commande docker run ...

Si votre erreur persiste, creusez en lisant ce ticket github

Liste d’images libre de droit pour vos sites web

En tant que développeur, on a souvent besoin d’images à placer sur des pages web, que ce soit pour des mockups, des projets personnels ou même des clients en manque de media.
On peut en acheter sur des sites de stock-images, mais aussi en trouver bon nombre sur le web en restant dans la légalité grâce aux licence Creative Common qui explicitent clairement les droits d’utilisation liés aux media.

Voici une liste de sites proposant des images sous licence Creative Common CC0/CC BY, et quelques liens qui vous serviront pour trouver d’autres images libres de droits.

Lire la suite »

Télécharger avec wget : les 10 commandes de base à connaitre absolument

Téléchargements basiques avec wget

Télécharger un fichier en local

wget http://remote.com/file.ext 

Télécharger un fichier et le renommer

wget ‐‐output-document=newname.html http://remote.com/file.ext 

Télécharger un fichier dans un répertoire différent

wget ‐‐directory-prefix=another-folder/a-sub-folder http://remote.com/file.ext 

Lire la suite »

Les variables dynamiques avec Less css

La venue des preprocesseurs CSS (SCSS, LESS, etc…) se démocratise, et pourtant leur utilisation courante se limite à :

  • le coté pratique des nested;
  • quelques fonctions de base (sur les couleurs);
  • le calcul de certaines propriétés (addiotion de padding, …);
  • la définition de quelques mixins.

C’est bien dommage, car le pré-processing permet bien plus. Voici un exemple de mise en oeuvre de variables à nom dynamique, très utile lorsque vous construisez des chartes graphiques cohérente et ayant des variantes par exemple.

Lire la suite »

Adaptative design: solutions pour les site web mobiles

Par abus de langage courant, on mélange souvent un site « responsive » à un site « compatibles mobiles » voir « compatible touch devices ». La différence est pourtant majeure, il y a d’ailleurs 2 mots distincts pour les différencier: « Responsive design » et d’ « Adaptative design ».

Si la différence vous échappe, je vous recommande l’excellent article de Viljami Salminen ou sa traduction en français par Stéphanie Walter.

Voici quelques pistes et solutions tirées de mes expériences afin de ne pas se limiter au responsive, mais bien de tendre vers une expérience utilisateur adaptée aux devices mobiles et tactiles.

Je pars du principe que votre site est déjà responsive.

Lire la suite »

Améliorer les clics sur les devices tactiles avec fastclick

Sur les devices tactiles, lorsque vous cliquez sur un lien, vous aurez surement remarqué un lag. En effet, afin de s’assurer que vous avez bien cliqué et que ce n’est pas un début de scroll ou autre interaction, les OS gérant le tactile ajoute une latence de 300ms.

Mais dans la cadre de page web standard, ça apporte généralement une frustration, une impression de latence, c’est désagréable.

Lire la suite »

Utiliser un fichier Google Spreadsheet comme source de données JSON

Les feuilles de calcul Google Drive ont été adoptées par bon nombre d’utilisateurs. Au delà de l’utilisation bureautique, vous pouvez vous en servir comme source de données pour vos projets web.

Ça ne remplace pas un vrai backend, mais a l’avantage d’être connu des utilisateur, rapide à implémenter, simple à utiliser. Pour ma part, je m’en sers assez souvent lors de création de maquette ou pour des petits projets de page n’ayant pas de backend. Adjoint à un cache front, ça fait le travail rapidement et bien.

Lire la suite »

Git: se souvenir du login et mot de passe

Lorsque vous utilisez git sur des remotes distants, vous devez vous authentifier. Le mieux étant de partager votre clé SSH.

Si vous ne pouvez pas le faire, vous pouvez éviter d’avoir à saisir vos login/mot de passe à chaque commande git, en utilisant le credential storage.

Pour activer cette feature, tapez :

git config credential.helper cache

A votre prochaine action nécessitant de s’authentifier, git se souviendra de vos identifiants.Pour qu’il ne s’en souvienne que pour une durée limitée (temps en secondes) :

git config credential.helper 'cache --timeout=3600'

Et si vous souhaitez qu’il oublie le login/mot de passe avant le délai d’expiration, il suffit de tuer le démon avec :

git credential-cache exit

LessCSS: mixins pour les images en retina

Avec l’émergence du retina, il devient vite fastidieux d’écrire son code css en dupliqué pour gérer les cas retina ou non.

Voici un petit helper en LessCss, qui va vous simplifier la tache.

  • Pour les écran normaux, l’image avec l’url passée sera utilisée en image de fond (background-image).
  • Pour les écran en rétina, le fichier alternatif dont le nom finira par @2x sera utilisé.

La condition de détection de hires peut évidemment s’appliquer à d’autres cas, bien que l’image de fond reste la plus courant.

LessCSS: les imports, options css, less et reference

Voici 3 implémentations less assez peu utilisées d’après ce que j’ai l’occasion de voir. Elles apportent pourtant clarté de code, simplifient la factorisation et améliorent les performances du code css généré (moins de code généré, donc moins lourd).

Comme en css, @import permet d’importer/include un autre fichier less. Mais il y a à ça quelques options bien pratiques :

Import: option « less »

@import (less) 'myfile.css';

L’option « less » vous permet de forcer l’interpretation de l’import comme si le fichier distant était en less, même s’il est en css. L’intérêt ? Au lieu de conserver l’import css standard occasionnant une requête http en plus et vous forçant à rendre le fichier css disponible au navigateur, le code du fichier importé sera inclus directement dans votre fichier css final généré à partir de votre less. Bref, gros gain en perspective.

Lire la suite »

Ubuntu: Splitter les fenêtres de son terminal avec Screen

L’utilisation de la ligne de commande au quotidien nécessite rapidement d’avoir plusieurs terminaux ouverts simultannément. Sous des environnement granphiques (gnome, kde, …), on peut ouvrir en parallèle plusieurs fenêtres, utiliser des packages spécifiques commme terminator, ou passer par le package screen.

screen-split
screen-split

Je retien cette dernière solution, par habitude (les autres n’ont pas de plus value me poussant au changement), mais aussi parce que screen se retrouve aisément sur de nombreux autres OS et sur les serveur n’ayant pas d’enironnement X.

Lire la suite »

Sublime Text: phpCs et jsHint pour un code propre

Avec l’édtieur de code Sublime Text, il est possible de rajouter des plugins vérifiant des règles de formattage vous assurant un code propre et cohérent en PHP ou en JS (et autres, non traités ici).

Ainsi, votre éditeur vous préviendra dès que vos règles de style (indentation, camelCase, indicateur de fin de commande, …) ne serons pas appliquées, et vous pourrez les corriger rapidement et ainsi produire un code « propre », au moins sur la syntaxe.
Si c’est pratique à titre individuel, ça devient indispensable sur des projets à plusieurs pour que tout le monde suive les mêmes guidelines.

Lire la suite »

WordPress : feature image automatique pour les vidéos Youtube et Vimeo

Comment afficher les miniatures de vidéos Youtubes et Vimeo directement dans WordPress ?

Cas pratique

Dans le cadre d’un développement rapide pour un site personnel, j’utilise des champs meta dans les posts pour définir les urls de vidéos Youtube ou Vimeo à afficher.
Néanmoins, les rédacteurs utilisant ce WordPress sont obligés d’alimenter les article par une « image à la une » (feature image). Cette tache est fastidieuse sur la plupart des articles contenant des vidéos, puisqu’il s’agit souvent de mettre un screenshot de la vidéo.

Jusqu’à présent les rédacteurs :

  • renseignaient l’url de la vidéo;
  • ouvraient la vidéo sur Youtube ou Vimeo;
  • réalisaient une capture d’écran;
  • uploadaient l’image;
  • l’assignaient en tant qu’image à la une.

Solution tout automatique

Vous trouverez ci dessous le code source d’un hook WordPress simpliste qui

  • vérifie qu’une vidéo à été renseignée dans le champs meta;
  • trouve l’id de la vidéo sur Youtube ou Vimeo;
  • importe une miniature de la vidéo;
  • créé le fichier image WordPress correspondant;
  • l’attache à l’article en tant qu’image.

Lire la suite »

Recharger gulp quand le fichier gulpfile est modifié

Lors de l’utilisation de Gulp, il peut être très intéressant qu’il se recharge automatiquement lorsque son fichier de configuration est modifé.

Pour ceci, rien de plus simple. Ci dessous, une tache gulp à mettre dans votre fichier gulpfile.js.

Lire la suite »

Apache : forcer le slash / à la fin des url

Il y a quelques mois, j’ai du forcer la présence d’un « / » (slash) à la fin de toutes les urls d’un site afin d’en améliorer le SEO.

Pour ce faire, il y a évidemment une partie du coté code pur (refaire tous les liens dans le site par exemple) mais surtout les redirections des pages sans le slash vers les pages avec le slash.

Pour ça, il y a 2 solutions : dans le code, ou via Apache. Cette 2ème solution est beaucoup plus simple et rapide à mettre en oeuvre, et surtout plus performante. Les quelques lignes suivantes dans votre fichier de configuration de votre VirtualHost.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !index.php
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ http://domain.tld/$1/ [L,R=301]

Vous pouvez bien évidemment aussi mettre ce code dans votre fichier .htaccess si vous n’avez pas accès au fichier de conf VirtualHost.

Utiliser tunlr pour accéder aux sites réservés aux habitants US comme netflix, pandora, Hulu et autre

Accéder aux services US comme la radio intelligente Pandora, le lecteur de série Hulu ou Netflix depuis la France est théoriquement impossible puisque l’accès est réservé aux habitants outre atlantique.

Pour y accéder malgré tout, il vous suffit de faire un tunnel passant par une box située sur place. Encore faut il en avoir une ! Et c’est là que tunlr apporte toute sa magie : il vous connecte directement à un relais disponible.

Lire la suite »

Apache url rewrite et url encodée avec urlencode

Voici un cas d’utilisation du mod url rewrite d’Apache assez peu documenté. En effet, je souhaite réécrire une url comportant une portion d’url encodée – dans mon cas généré avec la fonction urlencode de PHP.

La réécriture Apache et l’url encodée ne fonctionnent pas !

Je souhaite réécrire l’url suivante et récupérer la valeur http%3A%2F%2Ftilap.net%2F pour la passer en argument à un script.

http://host.tld/http%3A%2F%2Ftilap.net%2F

La règle de réécriture est simple. Par exemple dans le fichier .htaccess :


# Enable rewrite mod
RewriteEngine on
# Root path
RewriteBase /
# Ignore rules on final file
RewriteRule ^index\.php$ - [L]
# if folder or file does not exists
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# rewrite by sending the url to the main script
RewriteRule ^(.*)$ /index.php?url=$1 [L,QSA]

Malheureusement, ça ne fonctionne pas (erreur interne). Pourtant la règle de réécriture est correcte…

$.browser et jQuery 1.9 : assurer la rétro compatibilité de votre code

A la release de jQuery 1.9, je n’ai pas fait attention mais la propriété $.browser a été supprimée (entre autres choses). C’est bien dommage, car certains de mes plugins en dépendaient fortement. Pour le coup, j’en ai réécrit la plupart. Néanmoins pour certains – par manque d’intérêt et un peu par flemme – j’ai utilisé une solution bien plus rapide : réimplémenter simplement la propriété manquante.

Il vous suffit d’ajouter le fichier javascript jQuery.browser.js (461) juste après jQuery.

Pour tous les autres changements de la version 1.9 de jQuery, rendez vous sur le site officiel.

Git et bash : un raccourci pour feignant

Un petit alias bash à mettre dans votre .bashrc (ou .bash_alias, ou autre) pour avoir un aperçu rapide lorsque vous êtes dans un répertoire git :

alias gith='echo "=== Remote ===" && git remote -v && echo "" && echo "=== Branch ===" && git branch -v && echo "" && echo "=== Latest commits ===" && git log --pretty="%cr (%cn) %s" -n 15 --date=relative'

Ceci affichera un résumé des remotes, branches et 15 derniers logs du répertoire git sur lequel vous êtes.
Ca ne casse pas 3 pattes à un canard, mais c’est toujours bon à utiliser.

Directive .gitignore non prises en charge

Le fichier .gitignore dans un projet Git permet de lister les fichiers à ignorer. Mais s’il n’a pas été ajouté dès le premier commit du projet, ses directives ne seront pas prises en charge par la suite.

Comment faire en sorte que le fichier .gitignore soit pris en charge à postériori ?

Il suffit de vider le cache de votre repository git local, puis d’ajouter à nouveau le contenu de votre projet. Ca tient en 2 lignes de commandes :

git rm --cached .gitignore
git add .gitignore

Au prochain commit, votre fichier .gitignore sera pris en compte ainsi que ses directives.

Git : trouver et lister les fichiers modifiés par un utilisateur

Sous git, on a parfois besoin d’avoir la liste des fichiers modifiés par un utilisateur (perte de mémoire, packaging spécifique, mettre en valeur un contributeur ou une contribution, ou… fliquer pour les plus mauvais).

Voilà qui :

  • liste les commits git d’un auteur (git log) ;
  • récupère la liste des fichiers modifiés (show –oneline –name-only $commit_hash) lors de chacun de ces commits (while read commit_hash) ;
  • Affiche le fichier modifié (tail -n+2) en les ordonnant par nom et de façon unique (| sort | uniq)
git log --pretty="%H" --author="julien" | while read commit_hash; do git show --oneline --name-only $commit_hash | tail -n+2; done | sort | uniq

Il ne vous reste plus qu’à utiliser les alias git pour utiliser facilement cette ligne de commande, quitte à la personnaliser (logs de julien les 24 dernières heures par exemple). Pour l’alias, petit rappel :

git config alias.nomdelalias 'commande-a-executer'

et vous pourrez ensuite utiliser

git nomdelalias

Mettre WordPress en français

Votre WordPress est en anglais et vous souhaitez le mettre en français, c’est très simple.

Il suffit de récupérer les fichiers de traductions en français, de les installer dans votre WordPress, puis d’indiquer à WordPress de prendre en compte ces fichiers en modificant le fichier de configuration.

  • Récupérer les fichiers de langue :
    Il vous suffit de télécharger la version de WordPress correspondant à la votre sur le site WordPress France, de la décompresser, et de récupérer le contenu du répertoire /wp-content/languages/ ;
  • Copiez ces fichiers dans le répertoire /wp-content/languages/ de votre WordPress ;
  • Editez le fichier /wp-config.php de votre WordPress, et remplacez define('WPLANG', ''); par define('WPLANG', 'fr_FR');

C’est tout, c’est simple.

Et pour le multilingue, je vous invite à lire le billet WordPress en plusieurs langues : plugins et checklist.

Git : des logs lisibles, avec arborescence et en couleur

Lire les logs de git avec la commande git log est une action assez systématique lorsque l’on travaille avec ce gestionnaire de versions.

Néanmoins, reconnaissons le, si c’est pratique, il devient vite chiant usant de remonter dans l’historique, et la vue n’est pas très synthétique.

Pour profiter d’une lecture des logs plus rapide, je vous propose la commande suivante bien pratique, que vous pourrez personnaliser à votre bon gré. Elle affiche chaque log sur une seule ligne, avec des couleurs, permettant une lecture beaucoup plus rapide

Lire la suite »

Les typographies et fonts « web safe » pour les sites ayant du caractère

Pour les typographies sur le web, vous pouvez utiliser les typographies que vos visiteurs possèdent sur leur ordinateur, ou bien des polices de caractères que vous embarquez vous même via des services externes comme Google fonts et autre.

L’avantage des typos déjà existantes sur le poste client : aucun chargement additionnel (c’est déjà sur le poste). Les inconvéneits : en fonction de l’OS (windows, linux, mac…), vous ne les aurez pas forcément toutes.

Si néanmoins vous souhaitez faire appel à ces typographies et ne pas avoir recours à des services externes (par exemple pour des sites Intranet coupés du web extérieur, ou simplement pour des questions de rapidité / simplicité, ou bien encore si vous avez réussi à tuer votre designer), voici 6 familles de typographies qui sont considérées « web safe« . C’est à dire que ces typographies pourront être utilisées sans trop de risque et avoir un rendu assez similaire sur la majorité des OS et navigateurs récents.

Je vous les regroupe en 3 familles, pour vous simplifier la tache : sans-serif, serif et monospace.
Chaque famille comporte en dernier recours la typo qui pourra se trouver par défaut sur l’OS en question et qui correspondra à votre besoin.

Lire la suite »

Git : annuler proprement des commits après un push

Avec git, il arrive que l’on veuille annuler des commits faits mais que, malheureusement, on les a déjà propagé avec git push.

Plusieurs méthodes existent, vous trouverez des tas de solutions plus ou moins claires sur Google. Néanmoins, la plus propre reste l’application d’un revert, puis d’un nouveau push. Ceci permet de garder trace de votre annulation, explicitant ainsi aux autres membres du projet ce qui s’est passé (ou à vous même de vous rappeller pourquoi si vous travaillez seul).

Annuler un commit en particulier déjà pushé

Dans un premier temps, vous récupérer l’id du commit à annuler, par exemple en consultant les logs :

git log

Puis, vous annulez le commit en question proprement :

git revert XXX

ou XXX est l’id du commit à annuler.
Puis vous pushez proprement avec

git push

Annuler les N derniers commits déjà pushés

La même méthode est employée, mais vous pouvez utiliser la commande suivante qui annulera par exemple les 5 derniers commits. Il vous restera alors à pusher proprement.

git revert HEAD~5

Ubuntu : supprimer la popup « Problème logiciel détecté »

Si comme moi vous bidouillez énormément votre Ubuntu 12.10 avec des dépôts expérimentaux ou simplement parce que vous en avez marre des popups affichant « Problème logiciel détecté » sans arriver à résoudre les problèmes, vous pouvez choisir de les supprimer, de façon globale ou spécifiquement pour un logiciels en particulier.

La seule vraie chose à savoir est que ces notification son générées par apport, responsable de logguer les crash, de vous en avertir, et potentiellement de les envoyer à qui de droit.

Lire la suite »

Git : les commandes usuelles à connaitre

Git est un outil de gestion de ressources fabuleux, qui détronera un jour ou l’autre les vieux CVS ou SVN (quoique c’est peut être déjà le cas…). En attendant, voici une petite liste des commandes utiles, pour ceux débutant avec ou bien qui, comme moi, on des trous de mémoire régulièrement.

De l’installation à l’utilisation en passant par la configuration, tout l’essentiel sur les commit, push, branchs, tags et autres choses à ne pas oublier.

Lire la suite »

Agréger le contenu de tous les fichiers en bash

Voici une commande bash pratique pour concaténer le contenu de tous les fichiers d’un répertoire en un seul. Il tient en une ligne de commande, donc nul besoin de le créer en script, sauf si vous l’utilisez souvent.

cat $(ls -l | grep ^- | awk '{print $9}') > mynewfile.txt

Tous les contenus des fichiers du répertoire dans lequel est exécuté la commande seront agrégés dans le fichier mynewfile.txt

Lister et supprimer les accès donnés à vos comptes de réseaux sociaux

Lors de l’utilisation d’une apllication web ou sur smartphone, il est devenu courant et bien pratique de se connecter via son compte facebook, Google, linkedin, … Mais avec le temps, on ne se rappelle plus vraiment ce qu’on a donné comme autorisation.

Voici la liste des pages des services les plus courant vous permettant de lister les applications et sites à qui vous avez donné des autorisation et de les modifier.

Pour y accéder, il vous faudra être connecté au dit compte pour lequel vous souhaitez gérer les accès.

Lire la suite »

Des CSS pour trouver les erreurs HTML en toute simplicité

Les CSS, ça sert pour de la mise en forme. Oui, mais ça peut aussi servir pour trouver les marqueurs HTML manquant, les éléments vides, ou le DOM Html déprécié.
Une façon simple pour le développeur d’identifier visuellement et très rapidement là où le code HTML n’est pas correct.

Trouver les élément HTML vides

Ceci affichera vos éléments div, span, li et p vide avec une bordure jaune poitillée.

div:empty, span:empty, li:empty, p:empty{ padding: 20px; border: 5px dotted yellow !important; }

Trouver les éléments sans attribut

Pour un bon référencement et une bonne accessibilité, il faut que vos images aient une balise alt non vide et un titre, tout comme vos liens doivent comporter un title et une destination. Ceci les mettra en évidence :

img[alt=""], a[title=""], img[title=""], a[href=""] { border: 5px solid yellow !important; }

Lire la suite »

13 optimisations du temps de chargement d’une page web à connaitre absolument

Le temps de chargement d’une page web est essentiel aussi bien sur un aspect ergonomique, qu’en terme de référencement.
Pour l’aspect ergonomique, parce que les internautes passent peu de temps sur chaque page web, et qu’au delà de 4 secondes, vous avez perdu 97% de vos visiteurs si la page n’est pas chargée.
Pour ce qui est du référencement, Google prend ce temps de chargement en compte(1) dans son algorithme de calcul depuis 2010 pour l’ordre d’affichage des résultats.

Je vous liste ici les points d’optimisation essentiels que devrait maîtriser tout développeur web. J’occulte volontairement l’optimisation sur la distribution des serveurs par réplication ou l’optimisation de la génération coté serveur propre au langage utilisé.

Lire la suite »

Google Drive sur Ubuntu facilement

Suite au billet détaillant la démarche à suivre pour avoir votre compte Box.com comme répertoire local sur Ubuntu, François m’a suggéré de partager la démarche à suivre pour faire de même avec son compte Google Drive.

Ça tient en quelques lignes, grâce à un paquet prêt à l’emploi hébergé sur LaunchPad.

# Installation de fuse si ce n'est déjà fait
sudo apt-get install fuse
sudo apt-get -f install
# Recupération du paquet
wget https://launchpad.net/~invernizzi/+archive/google-docs-fs/+files/google-docs-fs_1.0~gdrive_all.deb
# installation
sudo dpkg -i google-docs-fs_1.0~gdrive_all.deb
sudo apt-get install -f
# ajout du repertoire local
mkdir REPERTOIRE_CIBLE
#liaison du repertoire a votre compte Google Drive
gmount REPERTOIRE_CIBLE user@gmail.com

Et voilà, entre Google Drive, DropBox et Box.com, vous voilà paré à stocker et héberger dans le cloud gratuitement.

Si le fichier .deb n’est plus disponible sur launchpad.net, vous pouvez le télécharger ici : Google Drive pour Ubuntu

WordPress en plusieurs langues : le kit nécessaire des plugins et checklist du développeur

Avoir un site en plusieurs langues peut s’avérer compliqué, même avec WordPress, aussi bien pour le développeur que pour l’utilisateur final. Comme je l’ai fait à plusieurs reprises, je vous donne ici la liste des plugins qui va bien, et les petites choses à ne pas oublier avant de se lancer.

Les plugins

Il existe de nombreux plugins permettant la gestion multiligue. Certains font la traduction « à la volée » à partir de traducteurs externes, un peu comme le ferait Google Translate. Mais on ne va pas se mentir, les traductions automatiques sont de qualité moindres quand elles ne fournissent pas des contre sens obscurs. Par ailleurs, point de vue référencement (SEO), ce n’est jamais fantastique.
D’autres plugins permettent la saisie des différentes langues. C’est pour moi la meilleure solution pour des sites de qualité.

Pour WordPress, j’utilise le plugin « <strong>qTranslate</strong> », qui présente l’avantage d’avoir de nombreux autres plugins compatibles, et d’être simple à utiliser par les rédacteurs et autres utilisateurs du site. Il a par contre le gros incovénient de modifier la base de données de faço drastique, rendant le « retour arrière » complexe si vous changez d’avis en cours de route. Si vous n’êtes pas sûr de la pérenité du multilingue, passez donc votre chemin…

Les plugins sont donc les suivants :

Lire la suite »

Box.com sur Ubuntu facilement

Aujourd’hui, j’ai reçu un email de Box.com intitulé sur un ton marketo-pipoteur « Exclusive Invitation, Start Using Box Sync Today »
Bon déjà, une invitation exclusive, théoriquement, ça voudrait dire que je suis le seul et l’unique invité. Au pire un rare privilégié. Difficile à croire quand on voit la taille des bannières l’annonçant sur leur site… (soupir de déception) Et puis, une invitation exclusive pour quelque chose que je fais déjà… Ah oui, et en plus je le fais avec mon Linux, alors que cette « invitation exclusive » ne fonctionne qu’avec Mac et Windows… Tout le magie du marketing.

Bref, ci-dessous la note à moi pour mémoire pour monter le compte Box.com en tant que dossier local, sous Linux.

Lire la suite »

LessCSS pour la production avec node.js et npm

LessCSS est un framework simplifiant le travail au niveau CSS, en permettant l’utilisation de variables et fonctions grâce à une compilation javascript.
Très pratique, il fait gagner en lisibilité et en rapidité de développement.

Néanmoins, si pour le développement c’est un réel gain, en production ça l’est beaucoup moins : la feuille de style est interprétée en javascript à chaque affichage de page.

Je vous propose donc ici l’installation et l’utilisation d’un compilateur, permettant une fois vos développements achevés, de compiler vos fichiers less en un css unique, avec en bonus la compression pour un maximum de performances.

Lire la suite »

WordPress : quels services pinger pour augmenter sa visibilité

Pour augmenter un peu plus la visibilité de votre site, notamment votre blog dans le cas présent, il est intéressant de notifier des serveurs externes en les « pingant ».

Cette action de « ping(1) » indique au serveur distant qu’un nouveau contenu est disponible sur votre site. Ainsi, il peut le référencer et le diffuser. Une bonne façon complémentaire d’augmenter la visibilité de votre site.
Cette méthode ne rapporte que peu de visites par rapport au référencement naturel ou bien encore à des campagnes de publicité. Mais elle nécessite néanmoins très peu d’action de votre part sur des blogs réalisés par exemples avec WordPress : il suffit d’un copier coller et… c’est tout :).

Ci-dessous la liste des services à pinguer que j’utilise. Elle n’est pas exhaustive, mais déjà bien complète. Je l’ai constituée au fur et à mesure du temps et je vous invite à l’utiliser.

Lire la suite »

X