Guide ultime des images responsives & retina ready

La « technologie » Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevée pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité, pour ne pas que tout paraisse minuscule, la valeur en pixel de chaque élément est doublée. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width: 100px; fera en réalité 200px. Tout est multiplié par deux.

À de telles résolutions, autant dire que vos images peuvent vite paraître pour le moins pixelisées. Il faut donc penser aux différentes tailles d’écrans, mais aussi aux différentes densités d’écans. Un 22″ HD (1920×1080) n’aura pas besoin de la même qualité d’image qu’un 22″ en 4k (4096×2016). Voyons comment penser nos images pour qu’elles soient éclatantes en toute situation.

(suite…)

Maitriser les conditions en bash

Le scripting bash est souvent déroutant. La syntaxe est parfois assez éloignée de ce à quoi nous sommes habitués dans d’autres langages. C’est d’ailleurs pourquoi beaucoup l’évitent au maximum. Pourtant, tôt ou tard, on a tous besoin d’écrire un petit .sh pour gérer un service ou automatiser un comportement sur un serveur.

Voilà pourquoi un petit rappel du fonctionnement des conditions – base de tout langage de programmation – en bash peut s’avérer salvateur. En route pour bashland !

(suite…)

Les répertoires & points de montages Linux en 2/2

Petit quickie sur les points de montages de Linux et leur utilité. On se retrouve en effet souvent désemparé face aux nombreux répertoires et à leur utilité. Où placer tel binaire, où mettre tel script. Tentons de répondre rapidement à cette question.

(suite…)

Guide ultime de la typographie pour le web

Le web et les polices, ou fontes, c’est une histoire passionnelle. Avant le CSS3 et son @font-face, il n’était pas possible d’embarquer une police sur le web. On devait donc se contenter des polices sytème… Autant dire que le choix était limité, d’autant plus que tous les systèmes n’embarquent pas les mêmes jeux de polices.

Bref, ça, c’était avant. Aujourd’hui, deux questions se posent : quelle(s) police(s) choisir pour une expérience cohérente ? et comment garantir une expérience performante sur tous les devices ?

(suite…)

Synthèse des commandes SFTP en CLI

Je sais bien que la plupart du temps, vous utilisez un client graphique pour ce genre d’activité… surement FileZilla même. Mais pour une raison x ou y – ou tout simplement pour le plaisir de jouer le barbu – il arrive un jour où vous devez vous connectez en SFTP en ligne de commande. Rien de bien complexe rassurez-vous. Voyons rapidement comment s’en sortir.

(suite…)

Tirer toute la puissance d’Ansible avec les rôles

Ansible est absolument génial. Il permet d’automatiser l’installation et la maintenance de machines et d’infrastructures complètes. J’ai déjà consacré un article à la prise en main d’Ansible, nous nous concentrerons ici sur les rôles.

Les rôles représentent une manière d’abstraire les directives includes. C’est en quelque sorte une couche d’abstraction. Grâce aux rôles, il n’est plus utile de préciser les divers includes dans le playbook, ni les paths des fichiers de variables etc. Le playbook n’a qu’à lister les différents rôles à appliquer et le tour est joué !

En outre, depuis les tasks du rôle, l’ensemble des chemins sont relatifs. Inutile donc de préciser l’intégralité du path lors d’un copy, template ou d’une tâche. Le nom du fichier suffit, Ansible s’occupe du reste.

(suite…)

Optimiser les performances de MySQL

Les bases de données SQL et plus particulièrement MySQL restent une des pierres angulaires de l’immense majorité des sites internet. MySQL fonctionne très bien out of the box, cependant, dès que la base se trouve assez sollicitée, on s’aperçoit que les réglages par défaut méritent une petite optimisation. Jetons un œil à tout ça !

(suite…)

Compresser les images dans le navigateur

Uploader une image de profil, vous avez sûrement déjà vécu cette situation. Cette petite image qui ne fera au mieux que 250px * 250px. Mettez vous dans la peau de mamie du cantal, est-ce que vous croyez qu’elle va redimensionner sa petite image avant upload ? Redimensio-quoi ? Ok, notre bon utilisateur qui balance une image de 8000px * 6000px va devoir patienter un bon moment le temps d’envoyer tout ça avant que, enfin, le serveur optimise cette dernière.

Mais pourquoi ne pas faire tout ça directement dans le navigateur ?! On y gagne en tous points. L’utilisateur ne perd pas son temps à uploader xMb pour rien, vous économisez de la puissance serveur, vous ne frustrez pas celui qui sait (mais qui a la flemme d’ouvrir son Photoshop), et puis vous œuvrez pour la planète ! 5 bonnes raisons de faire ça dans le browser. On y va ?

(suite…)

Installer, configurer et sécuriser le serveur ssh

Par définition, un serveur est accédé de manière distante. C’est à dire qu’on doit pouvoir l’administrer sans être physiquement devant. Alors qu’il soit dans un datacenter à l’autre bout du globe ou dans le grenier de la maison, SSH nous permettra de gérer tout ça depuis notre ordinateur de bureau (ou laptop). Si vous louez votre serveur chez un hébergeur, vous l’avez sans doute-reçu avec ssh pré-installé. Cependant, si vous bidouillez au fond de votre garage, il va falloir l’installer vous-même, et qui plus est, il n’est pas inintéressant de peaufiner la config de SSH pour vos propres besoins !

(suite…)

Apache2 : récupérer les IP derrière un reverse proxy

Par défaut, lorsqu’Apache se trouve derrière un reverse proxy, l’adresse source telle qu’il la voit est celle du reverse. Donc 127.0.0.1 ou ::1 si le reverse est en local. Si votre applicatif a besoin de récupérer les ip, c’est l’adresse qu’il verra (exemple $_SERVER['REMOTE_ADDR'] en php… Pas très pratique donc.

Il existe bien entendu des headers spécifiques que les reverses ajoutent (ou peuvent ajouter) pour indiquer l’ip source de la requête. Il faut cependant indiquer à Apache2 de le prendre en compte. Voyons comment faire cela.

(suite…)