Le Hollandais Volant

#CSS : variables CSS et !important

Voici une magnifique subtilité du CSS, mais parfaitement logique quand-même :

Que se passe-t-il si on met !important dans une variable ?

Voyons ça :

div {
  --color: red !important;
  color: var(--color);
  color: yellow;
}

À votre avis ça donne quoi ça en CSS ? Le point litigieux, c’est bien-sûr la présence du !important
Sauf qu’il est à savoir que le !important n’est pas sur une déclaration de propriété, mais sur une déclaration de variable CSS.

Or, une variable ne peut contenir qu’une valeur. La valeur contenue dans --color est donc red. Il faut savoir que le !important ne fait pas partie de la valeur : il s’agit d’un élément de langage qui permet de jouer sur la spécificité, comme un drapeau (un flag).

Résultat : la couleur finale du texte sera décidée par le vainqueur des deux déclarations de color juste en dessous. Comme celle-ci ont la même spécificité, c’est la dernière qui gagne.

Conclusion : le texte est en jaune.

!important n’est pas sans effet !

Maintenant, utiliser un !important dans les variables CSS n’est pas sans effet pour autant.
Regardons :

div {
  --color: red !important;
  --color: blue;
  color: var(--color);
}

Ici, aucune ambiguïté sur la déclaration de la couleur, puisqu’il n’y en a qu’une seule : color prendra la valeur contenue dans la variable --color. Oui mais laquelle ?

Réponse : celle dont la déclaration a la spécificité la plus grande ! Autrement dit, la première.
Conclusion : ça donnera du rouge.

Il convient donc de distinguer deux cas de figure :

div {
  --color: red !important;
  color: var(--color);
  color: blue;
}
div {
  --color: red;
  color: var(--color) !important;
  color: blue;
}

Dans le premier cas, les deux déclarations de couleur ont la même spécificité. C’est donc la dernière qui gagne : le texte sera bleu.
Dans le second cas, c’est la première déclaration qui a la plus grande spécificité (à cause du !important).

Peu importe qu’elle ait une variable ou non, c’est elle qui gagne : cela donnera du rouge.

Le conflit ? Quel conflit ?

Dans sa conclusion, l’article dit qu’il y a deux niveaux de « scope » (traduction ?) sur lesquelles sont appliqués le !important. Une sur les variables, et une sur les propriétés. Je ne suis pas d’accord avec ça : pour moi il n’y a en a qu’une seule. En revanche, il a deux déclarations différentes à considérer : une sur une variable, et une sur une propriété.
Maintenant, dans les deux cas, on peut ajouter un !important si l’on veut. Et comme ce sont deux choses différentes, elles n’entreront pas en conflit.

Appliquer deux !important à deux propriétés différentes n’est pas un problème :

div {
  font-weight: bold !important;
  color: red !important;
}

Ces deux choses n’entrent pas en conflit.
Par conséquent, les deux choses suivantes non plus :

div {
  --color: bleu !important;
  color: red !important;
}

Notez que ci-dessus, la variable --color est déclarée, mais jamais utilisée, donc aucun conflit à l’horizon.

Dans ce qui suit, toujours aucun conflit :

div {
  --color: bleu !important;
  color: var(--color) !important;
}

Tout est clair : la variable reçoit du bleu. La couleur reçoit la variable. Donc la couleur finale est bleue.

Et même s’il y avait plusieurs déclarations de la variable, celle qui gagne est celle de la plus grande spécificité. Ensuite, c’est la déclaration de la couleur avec la plus grande spécificité qui gagne. Ainsi l’exemple suivant donnera du rouge :

div {
  --color: red !important;
  --color: blue;
  color: var(--color) !important;
  color: green;
}

Parmi les variables, c’est le rouge qui gagne sur le bleu.
Parmi les propriétés, c’est celui avec le var() qui gagne sur celui avec le vert. Or la variable contient du rouge. Donc le texte sera rouge.

Applications à un contexte plus large

Tout ceci est évidemment à mettre dans un contexte plus global avec des déclarations sur des sélecteurs de spécificité différente.

div {
  --color: blue !important;
  color: var(--color);
}

div#foo {
  --color: orange;
  color: var(--color);
}

Ici ça sera… Bleu !

Regardons la couleur pour commencer. La couleur reçoit ce que contient la variable. Aucune ambiguïté. Et la règle qui s’applique est celle dans le second bloc. Pourquoi ? Parce que le sélecteur y est plus spécifique.

Maintenant que contient cette variable ? Cette variable est celle qui est la plus spécifique. Donc celle avec le !important. Donc le bleu.

En effet, même s’il y a un #id sur le sélecteur du second bloc, la variable --color ne contient pas de l’orange, mais du rouge : le !important sur une propriété est plus spécifique que la même propriété placée sur un ID (Spécificité de 1-0-0-0-1 au lieu de 0-1-0-0-1).

Par contre, il en est différent si le !important sous le deuxième bloc avait été sur la variable au lieu de la propriété :

div {
  --color: blue;
  color: var(--color)!important;
}

div#foo {
  --color: orange;
  color: var(--color);
}

Dans ce cas, la variable qui s’applique est l’orange dans le second bloc (car cette variable est plus spécifique à cause de l’ID dans le sélecteur). Le texte est donc orange.

Notons de façon anecdotique que la propriété qui s’applique est bien celle du premier bloc (car cette propriété a un !important).

Le vocabulaire est important : la propriété et la variable sont deux déclarations différentes. Elles ont chacune leur spécificité (au sens de « priorité CSS »).

Si je ne conserve que les éléments qui s’appliquent réellement, ça donne ceci :

div {

  color: var(--color) !important;
}

div#foo {
  --color: orange !important;

}

La couleur reçoit une variable, comme indiqué dans le premier bloc. Mais cette variable a une valeur assignée dans le second bloc seulement.

Ça vous semble casse gueule ? Attendez la suite.

Cas des sélecteurs enfants

Jusqu’à maintenant, même si on utilise deux sélecteurs différents, ils ciblent le même élément HTML.
Poursuivons les complications par quelques exemples pour montrer ce qui se passe avec avec des sélecteurs enfants.

Voyons :

div {
  --color: red !important;
  color: var(--color) !important;
}

div a {
  --color: orange;
  color: black;
}

La question : quelle est la couleur du lien ?
Réponse : noire.

Noire ? Oui, noire. La déclaration tout à la fin.

En effet, le premier bloc a beau avoir des !important sur toutes les propriétés, ils s’appliquent au div, tout comme leur spécificité.
Or, la spécificité n’est héritée que si la valeur sur laquelle elle s’applique est également héritée. En réalité, seule la propriété la plus spécifique est alors héritée (et la spécificité devient inutile).

Ainsi, pour savoir ce qui s’applique à notre a, on regarde le code destiné au a. C’est alors lui qui s’appliquera, s’il y en a. Et le a possède une déclaration de couleur : color: black;.
L’hérédité ne s’applique donc plus : on applique le color: black;, point barre.

L’hérédité ne s’applique qu’en l’absence de déclaration.

Ainsi, si on avait mis :

div {
  --color: red !important;
  color: var(--color) !important;
}
div a {
  --color: orange;
}

Alors, le texte serait rouge. La couleur du a serait héritée du div, et contiendra var(--color), qui, dans le contexte du div (le contexte hérité, donc), est rouge.

Pas orange ?

Non : l’orange est du contexte de a. Or la propriété de couleur est héritée du contexte de div, et là, dans son contexte, c’est bien du rouge que contient la variable. Ce qui est héritée, c’est la propriété et sa valeur.

On aurait même pu mettre un !important dans le second bloc, cela ne changera rien :

div {
  --color: red !important;
  color: var(--color) !important;
}
div a {
  --color: orange!important;
}

Cela rester rouge, pour la même raison : la couleur est héritée, même si elle provient d’une variable.

Si l’on voulait du orange, on doit ajouter un color: var(--color) dans le second bloc. Comme ça, la couleur du a est déclarée et non-héritée. Mais il faut bien conserver la déclaration de la variable dans le a, sinon la variable n’est plus déclarée et elle hérite.

Il faut retenir que la variable s’applique sur les propriétés du même contexte. Le parent transmet une propriété ? D’accord, mais sa valeur est également transmise, même si c’est une variable.

Par contre, dans le code suivant, la variable est bien héritée :

div {
  --color: red !important;
}
div a {
  color: var(--color);
}

Le a sera rouge. Ici, l’on ne déclare pas la variable --color dans le a. Elle est donc héritée. Or son parent lui dit que la variable contient du rouge. Donc le texte est en rouge.

Et avec des variables partagées sur plusieurs propriétés ?

La blague n’est pas terminée !
On arrive ici à quelque chose de très drôle : quid des variables appliquées à plusieurs propriétés, l’une déclarée et l’autre héritée ?

div {
  --color: white;
  color: var(--color);
}
div a {
  --color: black;
  background-color: var(--color);
}

Ça va donner quoi ?
Ici le texte dans le a sera bien en blanc sur fond noir !

Décomposons :

  • La couleur du texte : la couleur n’est pas déclarée sur le a. Elle est donc héritée. Et l’héritage contient du blanc : c’est donc du blanc.
  • Le couleur du fond : le fond est déclaré sur le a. Le fond contient var(--color). Et --color, dans ce contexte, contient du noir. Le fond est donc noir.

Si l’on n’avait pas déclaré le --color: black;, alors la variable aurait été héritée, et on aurait eu du blanc sur fond blanc. Mais comme on l’a redéfini dans le contexte du a, elle prend une nouvelle valeur… dans son contexte seulement.

Notez que dans ce dernier exemple on n’a mis aucun !important : normal, car la spécificité n’est pas héritée si la propriété sur laquelle elle est appliquée n’est pas elle-même héritée.

On aurait pu en mettre partout dans le premier bloc, on aurait tout de même eu du blanc sur du noir.

Conclusion

Pour moi tout est logique, même si c’est parfois compliqué.
Il faut retenir :

  • !important s’applique à la déclaration de la variable. Mais elle n’est pas dans la valeur assignée à la variable.
  • une variable CSS peut être déclarée plusieurs fois. Tout comme on peut déclarer plusieurs fois une couleur. Dans ces conditions, c’est la déclaration la plus spécifique qui est retenue. Si toutes ont la même spécificité, la dernière est retenue. C’est du CSS de base.
  • concernant l’hérédité, rien n’est nouveau là non plus : les valeurs, même avec un !important ne sont transmis aux éléments enfants que si ces derniers ne les redéclarent pas. Ça vaut pour les variables comme pour les propriétés CSS.

Bref, c’est compliqué, un peu curieux, parfois casse-gueule, mais rien de nouveau.

Et rien de différent d’autre langages de prog non plus : les variables ont leur contexte et peuvent être redéfinies dans des boucles imbriquées d’où elles ne sortent pas (pensez au let en JS par exemple : deux variables redéclarées avec le même nom auront leur propre contexte :

let a = "bar";

function newScope() {
    let a = "foo";
    console.log(a); // "foo"
}

console.log(a); // "bar"

Ah et : ici on ne parle que de la propriété color. Je vous laisse imaginer ce que ça donne si l’on utilise des variables dans display, flex ou position, le tout assaisonnée de sélecteurs comme a ~ a et de pseudo-classes :not() ou :placeholder-shown. Ça promet, non ?

Ma gestion améliorée de cache statique PHP/Apache

Programmation.
Ceci est une implémentation de l’idée que j’avais postée ici et qui concernait une gestion de cache basée sur le .htaccess et les erreur 404.

Le modèle habituel d’un cache statique PHP

Habituellement, pour gérer les caches de fichiers statique, on envoie une requête sur un fichier PHP qui va s’occuper de récupérer une ressource statique et l’envoyer vers le navigateur :

cache.php

<?php
    readfile($fichier_statique);
?>

Le $fichier_statique contient des données HTML déjà prêtes. Normalement, une fois que la page HTML est envoyée au visiteur, elle est oubliée de la mémoire de l’ordi. Si un autre visiteur fait la même requête, le serveur doit tout refaire.

L’idée d’un cache est de stocker le code HTML que l’on a envoyé au visiteur. Comme ça, si un second visiteur fait la même requête, on lui envoie ce qui se trouve en cache, sans avoir à tout recalculer : c’est beaucoup plus rapide.

Dans mon cas, je le fais avec des images d’avatar de chez Gravatar et avec des favicon que je met en face des sites dans mon lecteur RSS. Je ne fais pas une requête vers ces sites, mais vers mon lecteur RSS. C’est lui qui va faire une requête externe, sauver l’avatar ou la favicon localement, puis l’envoyer au client. La fois d’après, il envoie directement l’icône locale au client, sans faire de requête réseau. On gagne beaucoup en performances globales.

Le problème que je vois ici, c’est que le fichier cache.php est appelé pour chaque requête sur un fichier. C’est plus rapide que recalculer une miniature, mais une instance PHP est tout de même créée, ne serait-ce que pour lancer le readfile(), et éventuellement après quelques calculs rapides pour déterminer quel fichier cache on envoie au navigateur.

On peut s’affranchir de cette requête et de PHP.

Utiiliser .htaccess

On va prendre l’exemple du cache pour les images favicon et gravatar, car c’est ce que j’utilise et c’est ce pourquoi j’ai fait cette méthode.

Avant je faisais une requête vers cache.php?w=favicon&site=example.com
Et j’avais cette arborescence :

cache.php
var/
| - - cache/
      | - - favicon/
            | - - icone1.png
            | - - icone2.png
            | - - ...
      | - - gravatar/
            | - - avatar1.png
            | - - avatar2.png
            | - - ...
      | - - .htaccess

Quand je voulais une icône, je faisais un hit sur cache.php?get=icone1.png, et il m’envoyait l’icone1.png après l’avoir soit téléchargée, soit lue sur le disque.
Pour moi, l’image était située à l’URL cache.php?get=icone1.png, pas ailleurs.

Maintenant je fais autrement.

Je fais mon hit sur /var/cache/favicon/icone1.png. Plus besoin de PHP : si l’image existe, l’icône est envoyée directement.

Mais si le fichier n’existe pas, ça renvoie un 404, non ?

Exactement ! Mais ça, c’est uniquement si le fichier n’est pas là.
La distinction « fichier là / fichier pas là » n’est plus à faire par PHP comme avant : elle est déjà faite par le serveur (Apache, …), et on va s’en servir !

Il est possible d’utiliser une redirection en cas de 404. Dans le fichier .htaccess de notre arborescence, je vais mettre :

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule (.*) ../../cache.php?w=gravatar&q=$1 [L]

L’important ici est le !-f de la première ligne.

Un simple -f signifierait « notre requête est un fichier ». Mais avec le point d’exclamation devant, ça signifie « notre requête n’est pas un fichier », dans le sens « un fichier qui n’est pas, qui n’existe pas ».

Si je demande un fichier qui n’est pas là (donc un 404), cette condition est est satisfait : « le fichier n’est pas ! » et on accède à la ligne suivante, c’est à dire le renvoie vers le script PHP.

Ce n’est pas une redirection 301 ou 302 : le serveur demande uniquement à PHP de s’occuper de la demande au lieu de s’en occuper lui-même par l’envoie d’une erreur 404.

Une fois que PHP a fait son boulot, il sauvegarde le fichier et la renvoie au navigateur : le navigateur ne reçoit jamais de 404 : si le fichier est là, le serveur lui donne. Si le fichier n’est pas là, PHP produit le fichier avant de lui donner également. Le fichier est également sauvegardé pour la prochaine fois.

En plus de ça, la requête est faite directement sur le fichier que l’on veut, pas sur une page à PHP qui devra lire le fichier. On gagne donc en logique aussi.

Pour aller plus loin

Comme je l’ai dit, j’utilise ce système à la fois pour des icônes de site et pour des avatars de commentaires. Il y a donc une distinction à un moment. Les images sont mis en cache dans deux répertoires dédiés :

var/
| - - cache/
      | - - favicon/
      | - - gravatar/
      | - - .htaccess

Aussi, une complication est de ne faire qu’un seul fichier .htaccess.

Pourquoi ? Car je ne veux pas mettre un .htaccess dans chaque dossier et ceci pour une raison simple : quand veux purger le cache (en supprimant le dossier et son contenu), je ne veux pas perdre mon fichier .htaccess.

Avec un seul fichier situé à un niveau plus haut, je supprime les dossier favicon/ et gravatar/ et c’est bon, ils seront recréés par PHP lors de la prochaine requête.

Mon .htaccess doit distinguer quel est le dossier où l’on fait la requête. Je fais ça comme ça :

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} ./gravatar/(.*)$
RewriteRule (.*)gravatar/(.*)$ ../../favatar.php?w=gravatar&q=$2 [L]

Explication ligne par ligne :

RewriteCond %{REQUEST_FILENAME} !-f

↑ Je regarde si le fichier existe. Si oui, le fichier est envoyé au navigateur et ça s’arrête. Autrement on continue.

RewriteCond %{REQUEST_URI} ./favicon/(.*)$

↑ Je regarde sur la requête concerne un fichier dans /favicon

RewriteRule (.*)favicon/(.*)$ ../../favatar.php?w=favicon&q=$2 [L]

↑ Si oui et oui, on renvoie sur favatar.php?w=favicon&q=icone.png, et PHP fera son travail. Le [L] permet de dire qu’il s’agit de la dernière condition et que le traitement du .htaccess s’arrête.

Il reste une ligne à ajouter. En effet, si je fais une requête sur le dossier .favicon/, je ne veux pas que ça renvoie sur PHP. C’est un dossier, pas une image. Et même si je gère cette exception dans PHP pour plus de sécurité, il faut mieux mettre un garde-fou en plus.

Par conséquent, ça nous fait quatre lignes :

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} ./gravatar/(.*)$
RewriteCond %{REQUEST_URI} !./gravatar/$
RewriteRule (.*)gravatar/(.*)$ ../../favatar.php?w=gravatar&q=$2 [L]

La ligne ajoutée, la troisième, dit « si le fichier est autre que le dossier gravatar/, on applique la règle ». Dans le cas contraire, on laisse faire (et on ne renvoie pas vers PHP.

Ceci est bon pour les avatars.
Reste à faire la même chose pour les favicon. Il suffit de dupliquer tout ça :

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} ./gravatar/(.*)$
RewriteCond %{REQUEST_URI} !./gravatar/$
RewriteRule (.*)gravatar/(.*)$ ../../favatar.php?w=gravatar&q=$2 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} ./favicon/(.*)$
RewriteCond %{REQUEST_URI} !./favicon/$
RewriteRule (.*)favicon/(.*)$ ../../favatar.php?w=favicon&q=$2 [L]

Et voilà !

Exemple de fonctionnement

Juste pour résumer ce qui se passe :

Une requête sur ./gravatar/fichier.png sera traité par le premier bloc ci-dessus. Une requête sur ./favicon/fichier.png sera traité par le seconde bloc ci-dessus.

Dans les deux cas, si fichier.png existe, il est envoyé normalement au navigateur. Sinon, il est créé par PHP puis envoyé. Il n’y a pas de 404 envoyé au navigateur.
Si le fichier demandé est invalide, on renvoie une erreur 400 (Bad Request) avec PHP. C’est par exemple le cas si on demande un fichier à Gravatar qui n’est pas un MD5 d’une adresse e-mail, ou si l’on demande un favicon pour une URL qui n’est pas une URL correcte.

Enfin, si je fais une requête sur un autre dossier (./foo/fichier.png par exemple), alors il est ignoré par ce .htaccess et par PHP. Pas de risque donc de faire tourner PHP sur d’autres fichiers que des icônes ou des avatars.

image d’en-tête de Ferenc Almasi

Encore un peu d’optimisation pour les pages Web

Code de programmation.
J’ai déjà fait un article sur Pourquoi mettre le JavaScript à la fin et le CSS au début ?, et je vous invite à le lire.

Les astuces ici sont en plus.

Utiliser preload pour précharger les ressources utiles

Bien que l’on puisse mettre le CSS dans l’entête, il faut se souvenir que dans le CSS, on peut lier d’autres CSS, avec les @import, ou même des polices, des images (avec background-image). Cela peut ralentir l’affichage.

Si les fichiers sont petits, il est préférable de les précharger : le téléchargement en parallèle est alors avantageux sur le téléchargement en série des fichiers.

Pour ça, dans le head de la page HTML, on peut utiliser ça :

<link rel="stylesheet preload" href="style/style.css" as="style" />
<link rel="preload" href="fonts/font.woff2" as="font" type="font/woff2" crossorigin />

Cela permet de précharger les ressources en même temps que la page.

Quelques remarques :

  • pour le CSS, j’ai mis stylesheet et preload. Certains mettent juste preload, puis utilisent JS pour changer le preload en stylesheet quand la page est chargée, avec onload. Perso je vois pas l’intérêt d’utiliser JS pour ça : ça ne fait que retarder le rendu.
  • pour le fichier woff2 (police), j’ai ajouté un crossorigin. Je ne sais pas pourquoi, les navigateurs en ont besoin (à la fois Firefox et Chrome), sinon il préchargent le fichier, le jettent, et le rechargent quand la requête réelle est demandée…
  • on utilise preload et non prefetch. Prefetch sert à précharger des pages sur lequel vos lecteurs vont cliquer, afin de gagner du temps lors de la navigation entre plusieurs pages. Preload sert à charger des ressources pour la page courante.

Ne charger les scripts que quand ils sont utiles

Ensuite, les scripts doivent être mis à la fin (voir mon article lié plus haut).

Sauf que certains scripts dépendent du contenu d’une page.
Par exemple, sur Couleur-Science, les équations dans certains articles utilisent KaTeX (il existe un standard HTML pour afficher des équations (MathML), mais il n’est supporté que par Firefox, donc pour l’instant, on passe par une lib JS).

Certains de mes articles n’ont pas d’équations. Dans ce cas, pourquoi télécharger 150 ko de JS ?
Chez KaTeX, on identifie une équation en le plaçant entre des signes « $ ». Comme ça : « $ equation $ ».

Je fais donc un test : si le contenu de l’article contient un signe $, je charge Katex. Autrement, je ne le charge pas.

Ah et je fais ça seulement quand le reste de la page a fini de charger : rappelez-vous, si vous initiez le chargement d’un script, le rendu de la page se bloque.

Je fais donc ça :

document.addEventListener("DOMContentLoaded", function() {
	var contenuDom = document.getElementById('contenu').textContent;
	if (contenuDom.indexOf('$') !== -1) {

		// only if Katex needed is it added
		var newLink = document.createElement('link');
		newLink.rel = 'stylesheet';
		newLink.type = 'text/css';
		newLink.href = 'katex/katex.min.css';
		document.head.appendChild(newLink);

		var katexRes = document.createElement('script');
		katexRes.src = 'katex/katex.min.js';
		document.head.appendChild(katexRes);

		setTimeout(function() {
			renderMathInElement(
				document.getElementById('contenu'),
				{
					delimiters: [
						{left: "$$", right: "$$", display: true},
						{left: "$", right: "$", display: false},
					]
				}
			);
		}, 1000);
	}
});

Explications :

  • j’attends le chargement de la page.
  • ensuite, je regarde si le #contenu contient un « $ ». Si oui, j’initie le téléchargement du CSS de Katex, puis du Script de Katex.
  • Enfin, j’attends un instant (1 s) et je dis à Katex d’afficher les équations qu’il trouve dans la page.
    Si je mets le renderMathInElement() dans un katexRes.onload(), ça ne marche pas. En effet, onload() se déclenche quand le fichier a fini de télécharger, pas quand il a fini d’être parsé. Il faut que le code dans le fichier soit parsé, pas juste téléchargé.

Pas de base64 pour le SVG inclus dans le CSS

Si l’image est très légère, une requête sera plus longue que le téléchargement, il est alors préférable de l’inclure directement dans la source. Quand on veut mettre des images très légères directement dans le CSS, on les inclut en Base64 : le fichier image se met sous une forme textuelle et on la copie-colle dans le CSS.

Inconvénient : le Base64 pèse 33 % plus lourd.

Si notre image est en SVG, tout ceci est inutile : le SVG est lui-même du texte. On peut dont le placer directement dans le code. Il suffit de dire que le format est du SVG :

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M10.5 15l7.5 7.5 7.5-7.5z' /></svg>");

En prime, le SVG reste lisible. Il faut juste faire attention à correctement échapper les caractères (quotes, doublequotes…).

Pour les polices d’icônes

Concernant les petites images/icônes, j’utilise une police qui contient les glyphes. Les icônes que j’utilise sont les icônes de Google Material Design. Il y en a plus de 1 000 différentes.

Si vous n’utilisez que 10 icônes, il ne sert à rien de toutes les intégrer. Dans ce cas, on peut n’intégrer que les polices nécessaires.

Pour cela, j’utilise personnellement Icomoon, un outil en ligne. On peut lui donner ses propres SVG (ceux de Google Material par exemple) et produire une police en .woff ou un autre format.
Seul problème : il ne produit pas de .woff2 (dont la taille de fichier est moitié moindre). Il faudra donc utiliser un autre convertisseur pour transformer le .woff en .woff2.

Là aussi, si nécessaire, utilisez un préload pour ce fichier, ou bien incluez le directement dans le CSS en Base64.

Enfin, n’oubliez pas qu’il faut peut-être autoriser la mise en cache avec .htaccess (les formats .woff et .woff2 ne sont pas forcément pris en charge nativement dans ce fichier) :

<IfModule mod_expires.c>
  AddType application/x-font-woff .woff
  AddType application/x-font-woff2 .woff2
  ExpiresActive On
  ExpiresDefault "access plus 1800 seconds"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-woff2 "access plus 1 year"
</IfModule>

D’autres liens

J’espère que les quelques astuces ci-dessus seront utiles.
Ci-dessous, quelques autres astuces accumulées depuis les années :

Enfin, pour des astuces plus générales :

  • pensez à utiliser break/continue
  • rappelez-vous : ce qui compte, c’est la vitesse perçue ; dans cet exemple du lecteur RSS, il est inutile que tous les flux soient téléchargés immédiatement. L’internaute ne lira qu’après 1 ou 2 secondes, le temps qu’il choisisse quoi lire. Récupérez donc d’abord les titres des articles, puis, pendant qu’il choisit les titres qu’il va lire, on télécharge le contenu des posts. C’est comme quand vous êtes au restaurant : le cuistot ne prépare pas tous les plats en avance, mais commence par proposer le menu et proposer à boire. Comme ça, pendant que les gens boivent, il prépare le plat.
  • utilisez les JPEG progressifs
  • pour le JSON, utilisez type="application/json". Ça sera *beaucoup* plus rapide à parser
  • et voyez tout ça

Passer en HTTP2

Enfin, et c’est probablement le plus gros gain que vous aurez, mais il faut que ça soit mis en place au niveau du serveur (ce qui peut ne pas dépendre de vous) : passez en HTTP2.

Voir ces liens : 1 , 2 , 3 , 4 .

(merci Thibault pour celui-ci)

Résultat

Résultat satisfaisant (pour ce que ça vaut, mais ça donne une idée) :

Score PageSpeed Insight Google.
Donc non, il n’est pas nécessaire d’avoir un design ultra-flat tout blanc et noir si l’on veut qu’elles soient rapides.

image d’en-tête de Lucas Bravo

Installer une dashcam dans sa voiture

Position finale de la dashcam dans la voiture.
Ici un petit tuto sur l’installation d’une dashcam « en dur » dans sa voiture, avec branchement directement dans la boîte à fusibles et quelques astuces diverses en plus.

Mon matériel :

  • ma voiture : (Hyundai Ioniq Plug-in)
  • Dashcam : Thinkware F770 (site officiel ; lien Amazon)
  • Câbles de branchement "hardwire" (lien Amazon)
  • (facultatif) Carte micro-SD UHC1 (lien Amazon)
  • (facultatif) Filtre polarisant pour éliminer les reflets du tableau de bord dans la vitre et sur la vidéo (lien Amazon — filtre polarisant pour drône DJI : le filtre seul, en verre, se colle très bien sur la dashcam).

Il y a une carte micro-SD de 16 Go fournie avec cette caméra, et qui suffit pour enregistrer environ 2 h de vidéo full-HD.

Si vous souhaitez pouvoir enregistrer davantage, prenez une carte plus grande. La carte doit être certifiée UHC-1, sinon votre dashcam ne la reconnaîtra pas. Pour info : une carte micro-SD de 64 Go certifiée UHC-1 coûte environ 10 € en ligne, en 2021.

Si possible, privilégiez en plus une carte avec une bonne capacité d’écriture / réécriture (les cartes « endurance » sont précisément faites pour ce genre d’usage, par exemple chez Samsung ou chez Sandisk).
À ces niveaux d’enregistrement en continu, la carte mémoire constitue un consommable, et une bonne carte vous évitera de devoir en changer tous les 4 matins.

La dashcam F770

Je ne suis pas spécialiste en dashcam, mais j’ai trouvé cette référence dans une vidéo où ils montrent comment l’installer dans une Ioniq, donc ma voiture. J’ai décidé de faire pareil.

En voici quelques caractéristiques rapides :

  • prix : 169 €.
  • image : full-HD
  • format des vidéos : MP4
  • support de stockage : micro-SD
  • on peut y brancher un add-on pour ajouter une caméra arrière et ainsi filmer l’avant et l’arrière de la voiture.

Un truc cool : la dashcam peut envoyer le flux vidéo sur le téléphone via du Wifi (il devient un hotspot wifi sur lequel se connecte le téléphone). On peut alors avoir une vision directe de la caméra sur le téléphone, ce qui est très pratique lors de la mise en place et vérifier le centrage. C’est aussi pratique pour mettre en place le filtre polarisant : il doit être orienté correctement pour filtrer les reflets.
L’application permet aussi de récupérer la vidéo sans PC et sans débrancher la carte-SD.

À noter que les vidéos sont coupés en blocs d’une minute qui pèsent chacun environ 80 Mo (soit environ 4,8 Go par heure)

Si l’on n’utilise pas le Wifi, on peut toujours lire les vidéos depuis un PC en retirant la carte micro-SD : l’adaptateur μSD→SD et μSD→USB sont fournis avec. Les vidéos sont directement accessibles sur la carte sans besoin de lecteur spécifique.

Hardwire ou prise allume-cigare ?

De façon générale, il y a deux façons de brancher une dashcam dans une voiture.

La première consiste à brancher la dashcam sur la prise allume-cigare de la voiture.
C’est de loin ce qu’il y a de plus simple : on branche et ça marche.

Attention : normalement, l’allume cigare d’une voiture n’est pas alimenté quand le contact est coupé. C’est très important, sinon la caméra ou tout autre accessoire viderait votre batterie en une nuit et vous ne pourrez plus démarrer le lendemain. Sur certaines voitures, l’allume-cigare pourrait rester allumé ! Il faut s’en assurer avant de laisser la dashcam branché. Faites bien attention !

Cette façon d’installer la caméra laisse cependant apparaître sa prise et une partie du câblage. Pour ceux qui veulent un montage plus propre et discret, on peut utiliser ce qu’on appelle le « hardwire » (« câblage en dur »). C’est la seconde façon de faire.

Avec le hardwire, on branche la caméra directement dans le circuit de la voiture (en passant par la boîte à fusible). Cela demande un peu de bricolage, mais le résultat est nettement plus propre : tous les câbles sont cachés et la dashcam fait alors partie intégrante de la voiture (sans avoir l’air d’un accessoire ajouté après).
Il s’allume directement avec la voiture et s’éteint quand on coupe le contact.

Principe du hardwire

Chaque élément de la voiture (rétroviseur électrique, fenêtres, clignotants, sièges électriques, prises USB…) a son fusible dédié dans la boîte à fusible.

Bien-sûr, par défaut il n’y a pas de prise pour dashcam, mais on peut en créer une : pour ça, on va utiliser un dédoubleur de fusible pour pouvoir brancher un élément en plus dans le boitier. Ainsi, une prise du boitier aura le fusible qu’il avait déjà (par exemple : les vitres électriques) et un autre fusible pour brancher un accessoire tiers, c’est-à-dire votre dashcam.

Le dédoubleur, c’est le petit kit hardwire listé plus haut.

Avec ce système on n’a rien modifié dans la voiture. Pour tout annuler, il suffira de virer le kit et de remettre le fusible original à sa place.

Côté technique

Premièrement, il faut savoir que toutes les voitures n’ont pas les mêmes formats de fusibles. Il faut donc un kit hardwire spécifique. Pour la Hyundai Ioniq, il faut le kit micro-2.
Si vous achetez un kit, regardez bien celui qu’il vous faut.

Ensuite dans une voiture, il y a deux circuits électriques principaux :

  • le circuit alimenté en permanence (qui comprend typiquement les accessoires comme l’alarme, les feux de détresse, le système de verrouillage à distance…)
  • le circuit qui n’est alimenté que lorsque le contact est mis (qui comprend tout le reste : vitres électriques, radio, direction assistée, éclairage extérieur, système d’infodivertissement).

La dashcam doit être branchée sur le second circuit : celui qui n’est sous tension que quand la voiture est allumée (sinon il va rester brancher tout le temps et vider votre batterie en quelques heures).

Note : La dashcam F770 version Royaume-Uni vient directement avec le kit hardwire et sur deux fils : il a le mode normal quand on roule et un mode « parking » basse consommation (qui prend dix image par minute, par exemple) quand la voiture est éteinte. La caméra intègre une sécurité qui détecte la tension de la batterie et se coupe par sécurité quand elle est trop basse.
Cela permet d’avoir un enregistrement H24, voiture éteinte.

La dashcam F770 vendue sur le marché européen est capable de tout ça aussi (je suppose), mais le kit de connexion fourni avec ne le permet pas : le packaging UE ne contient que le connecteur prise allume-cigare (et ne peut donc as se brancher en mode parking).

Cela n’empêche pas de la brancher sur le boîtier à fusibles, mais pour ça il faudra sectionner le câble allume-cigare (avec une pince, donc, et irréversiblement)
À noter que dans mon cas, c’est le vendeur lui-même qui m’a conseillé de faire ainsi.

Bref, il vous faudra faire un choix :

  • soit la brancher sur l’allume cigare (et dans ce cas il suffit d’acheter la dashcam ; recommandé si vous n’avez pas envie de risquer quoi que ce soit, ou pour tester avant).
  • soit la relier à la boîte à fusibles et dans ce cas il faudra en plus prévoir un kit « hardwire » avec des dédoubleurs de fusibles (5-10 €) en s’assurant d’avoir le bon format de fusibles en plus de tout ça (ce kit peut être installé dans un second temps).

Ce qui suit est l’explication pour le hardwire, car c’est ce que j’ai fait.

Le branchement en dur de la dashcam

Quel fusible retirer pour le installer le kit ?

Sur la Ioniq, le boîtier à fusible se trouve à gauche sous le volant. Il y a une trappe qui s’enlève.

Vous voyez alors tous les fusibles avec des numéros 5, 10, 15, 25… écrit dessus : ce sont les courants maximums que permet ce fusible. Pour la dashcam, un fusible de 5 suffit, mais ce n’est pas tout.

Comme j’ai dit, il y a deux circuits sur une voiture :

  • une alimentée 24/7
  • une alimentée seulement après avoir mis le contact

Il faut mettre la dashcam sur le second. Vous pouvez utiliser le schéma de câblage dans le manuel de la voiture ou alors et détecter les accessoires non fonctionnels quand le contact est coupé : typiquement, vitres électriques, radio, éclairage intérieur.
Pour en être sûr, il faut utiliser un voltmètre et vérifier quel fusible se trouve effectivement hors tension quand le contact est coupé.

Les fusibles ont un petit point métallique sur le dessus, qui permet de les tester. Avec le voltmètre, on va mettre la borne rouge sur le fusible et la borne noire sur la masse de la voiture : c’est-à-dire la carcasse ou n’importe quel écrou non peint pas trop loin. Sur la Ioniq, il y en a une dans le boîtier à fusible.

Intérieur de la boîte à fusibles.
En s’aidant du schéma orange sur la trappe du boîtier à fusible, repérez celui des vitres électriques par exemple :

  • Contact coupé, la lecture doit être de 0 V.
  • Contact mis, la lecture doit donner 12 V.

Pour comparer, essayez avec d’autres fusibles : certains afficheront toujours 12 V, même après avoir coupé le contact.

Il faut choisir un fusible : on peut utiliser celui que l’on veut qui réponde au critère ci-dessus. Perso j’ai utilisé celui d’un accessoire non essentiel (et que je n’ai pas) : le volant chauffant.

Dans tous les cas, évitez ceux des airbags ou de l’alarme. Si la dashcam pompe un peu trop de courant, cela peut influer sur leur déclenchement, ce qui serait dangereux.

Une fois que vous avez choisi un fusible, notez-le et repérez-le. Cela nous servira pour après.

Installation de la dashcam

Traditionnellement, on place la dashcam derrière le miroir central. Dans la Ioniq, il y a déjà la caméra de reconnaissance des panneaux et le détecteur d’humidité pour l’auto-désembuage.

Il reste de la place pour la dashcam du côté du conducteur. Prévoyez alors 2 cm de plus à droite pour pouvoir retirer la dashcam de son socle (la dashcam se clip sur son socle par la droite).

À ce stade, il est pratique de mettre le contact, brancher la dashcam sur l’allume-cigare et allumer la dashcam. Connectez-vous au Wifi de la cam avec votre téléphone et utilisez l’application Thinkware et affichez directement le flux vidéo. Vous pourrez alors juger du bon centrage et de la bonne orientation et inclinaison de l’image.

Quand vous êtes sûrs de votre positionnement, et que vous avez vérifié que vous pourrez toujours la retirer du socle, ôtez le film protecteur 3M pour permettre de coller la dashcam sur la vitre.

Je recommande de faire ça par temps chaud et ensoleillé : la colle 3M prend beaucoup mieux lorsqu’il fait chaud et il ne risquera pas de tomber en pleine conduite. Rassurez-vous, ça tient très bien : ça fait 3 mois que je l’ai mis, et elle n’est jamais tombée (encore heureux).

La dashcam collée, il faut maintenant masquer le câble. Dans la vidéo, le monteur a l’ingénieuse idée d’enrouler du ruban adhésif à l’envers (collant vers l’extérieur) autour du câble, et de pousser le câble sous la mousse du plafonnier. Ça marche très bien et ça ne bougera pas. Perso j’ai fait ça par endroit, pas sur tout le câble.

Débranchez la dashcam de l’allume-cigare mais laissez la cam elle-même fixée. En partant de la dashcam à côté du rétroviseur centrale, on va passer le câble sur la gauche, jusqu’à la portière puis descendre en passant derrière le joint en caoutchouc de la portière, et enfin quand on y sera, on passera dans le compartiment à fusibles.

Enfin, passez le connecteur dans la boîte à fusible :

Cacher le câble de la dashcam.

  1. remontez le câble jusqu’au plafonnier
  2. passez le câble sous le plafonnier, jusqu’à la gauche. Arrivé au bout, passez le câble sous le plastique ; attention à l’airbag qui se trouve à cet endroit (n’y allez pas au couteau)
  3. Descendez le câble, caché par le joint de porte (côté intérieur)
  4. passez le câble par derrière dans la boîte à fusible.

(voir en grand)

Installation du kit hardwire

Maintenant que l’on sait où brancher la dashcam et que la câble (avec sa prise cigare) se trouve dans le compartiment à fusibles, on va devoir commencer la partie électrique.

Il faut retirer le fusible que vous avez repéré. Le kit vient avec une pince spéciale pour ça, sinon vous en avez une dans le second boîtier fusible qui se trouve sous le capot (dans le cas de la Ioniq).

Retirez un fusible, insérez ce fusible dans le kit. Ensuite, ajoutez un fusible pour la dashcam (venu avec le kit) :

Branchement du hardwire kit.

Enfin, branchez le kit dans l’emplacement libéré de la boîte à fusible.

C’est bon pour le kit.

Branchement de la dashcam

Schéma de câblage de la dashcam.
« Le fil vert sur le bouton vert, le fil rouge… »

Il faut alors sectionner le connecteur allume-cigare. Perso, j’ai coupé juste sous le connecteur, ne coupant pas trop de fil (si jamais je change de voiture, ça permettra de récupérer la cam et de ne pas manquer de fil).

Dénudez alors les câbles noirs (sur 5~10 cm) puis dénudez les deux petits fils (blanc et jaune sur la mienne) sur 2~3 cm.

Le fil jaune est à connecte au fil du kit hardwire. Au besoin, et avant de souder/nouer les deux fils, passez les fils dans un bout de gaine thermorétractable. Nouez ensuite les fils, glissez la gaine thermo sur la jonction et passez un peu de chaleur dessus pour serrer et fixer la gaine isolante. Branchez enfin le kit hardwire dans son emplacement fusible.

Et le fil blanc ?
C’est la masse : il faut le mettre sur la carcasse de la voiture. Dans la Ioniq, il y a un écrou pas loin : on peut enrouler le fil autour, tel quel, puis utiliser un boulon pour le fixer (le tout sans défaire quoi que ce soit de la voiture).

Il ne reste plus qu’à ranger un peu le fil de la dashcam dans la boîte à fusible (pour éviter que ça ne traîne partout) et à remettre le cache.

Démarrez la voiture et normalement la dashcam s’allume (on peut voir la petite LED du GPS qui s’allume).
Coupez le contact et la caméra s’éteint.

Fini !

Notes à l’utilisation

Si vous avez une vieille carte SD qui traîne chez vous, et que vous la mettez dans la dashcam, vous pouvez l’entendre dire qu’il y a une erreur avec la carte. Souvent au démarrage, mais parfois en pleine conduite.
Dans ce cas, la caméra reboot toute seule. C’est sûrement une section de la mémoire qui ne fonctionne plus, ou alors que la carte n’est pas (ou pas pleinement) compatible. Pour rappel : il faut une carte UHC-1 minimum, capable d’enregistrer de la vidéo HD à la volée.

Si ça se produit trop souvent, remplacez la carte SD par une neuve. Comme j’ai dit, pour ces applications intensives, les cartes mémoire sont des consommables. Il en existe qui sont adaptés à l’enregistrement continu, et qui devraient fonctionner plus longtemps (voir lien au début de l’article).

Parfois la dashcam émet une petite musique de quelques notes, parfois à l’allumage, parfois quelques minutes après le début de la conduite. Je ne sais pas du tout ce que c’est. En règle général par contre, la caméra se fait parfaitement oublier.

De temps en temps, la dashcam dit qu’il faut formater régulièrement la carte. Si les vidéos qui sont dessus ne vous importent pas, appuyez alors sur le bouton « format » de la caméra. La voix dira quand c’est bon.

Intérêt de la dashcam, assurances et législation

La dashcam est une caméra embarquée. Elle filme toute votre conduite, en particulier un accident qui pourrait survenir. Elle peut aussi enregistrer votre vitesse. Certains modèles envoient également tout ça directement dans « le cloud » (ce n’est pas le cas de la F770).

Cela permet donc d’analyser votre conduite, de filmer vos road-trips, ou un « événement » qui surviendrait sur la route. Mais surtout, l’intérêt est de filmer un accident et de fournir l’enregistrement à votre assureur, aux autorités ou au tribunal. Rien ne dit que ça soit accepté comme une preuve, mais ça peut faire pencher la balance et au moins prouver votre « bonne foi ».

Certains assureurs proposent (ou proposaient) des ristournes pour l’usage de dashcam. Pas forcément parce que cela constitue une preuve en cas de sinistre, mais aussi parce que les conducteurs, se sachant filmés, ont tendance à conduire de façon plus respectueuse du Code de la route, et seraient alors moins susceptibles de provoquer un sinistre responsable. Renseignez-vous auprès de votre assurance, et surtout voyez si ça vaut le coup pour vous (en combien de temps le coût de la caméra est rentabilité par la ristourne éventuelle) !

Pour info, certains pays (Russie) les rendent obligatoires. Certains pays (comme le Portugal, l’Autriche ou le Luxembourg) en interdisent l’utilisation pour des problèmes de confidentialité.

Les autres pays, comme la France, restent dans le flou. Et dans le flou juridique.

La loi ne dit rien sur les caméras embarquées, si ce n’est qu’en cas de diffusion, la vidéo doit être anonymisée : les visages et les plaques doivent être floutées.
Il doit également être indiqué (sur la voiture) que celle-ci enregistre tout. La dashcam F770 vient d’ailleurs avec un autocollant destiné à cet effet.

Pour le reste, même si le Cerfa-13806-3 existe pour déclarer la mise en place d’un système de vidéo surveillance protection, il n’est pas sûr que ça soit nécessaire pour une caméra embarquée et mobile : la déclaration est liée à un lieu, et on ne peut pas faire une déclaration pour chaque ville que l’on traverse…

La loi ne suit donc pas les usages actuellement. Ceci étant dit, je suis pas avocat.

Quelques liens :

Retour sur un cas de piratage de Webmail

Photo d’une clé avec un logo de pirates.
Très récemment, j’ai été appelé à la rescousse pour un cas de « piratage » d’une webmail Orange.

La personne avait été appelée par sa banquière qui voulait savoir si sa demande par e-mail d’un virement de plusieurs milliers d’euros était bien légitime (ça ne l’était pas). Finalement, de ce côté-là, aucun dommage. Mais ça s’est joué à la vigilance de la banquière en personne. Pour le coup, bravo (et merci).

Dans la webmail d’Orange, on pouvait voir l’historique des connexions en provenance de France (connexions légitimes) mais aussi du Mali et d’Inde (totalement anormal). Par ailleurs, les contacts de la personne dont le compte a été piraté ont pour certains reçus un e-mail chelou de la part du pirate se faisant passer pour elle (je l’ai reçu également).

Voilà pour ce qui s’est passé.

Ce que j’ai fait

Premièrement : faire changer les mots de passe.
La personne avait déjà commencé : c’est très bien.

Les Webmails autorisent (généralement) le transfert des e-mail vers d’autres comptes, de façon automatique. Il a donc été vérifié que le pirate n’avait pas mis en place de redirection vers une adresse à lui. Ça n’était pas le cas, mais un compte « lié » d’un autre compte Orange a été trouvé. Ne sachant pas ce que c’était, il a été supprimé.

Et pas seulement sur la webmail : mais partout. Tous les comptes en ligne. Le pirate a eu accès à ses e-mails, il a pu voir quels sites on utilise. Il aurait pu utiliser cette webmail pour faire un changement de mot de passe partout.

Facebook, Amazon, Google, Apple/iCloud, mais aussi le site de son assurance, les impôts, l’Urssaf, le site de la sécurité sociale ainsi que tous les sites plus ou moins habituels.

Ceci fait, le pirate perd son accès au compte e-mail. Bien.

Que faire de plus ?

Activer la 2FA partout où c’est possible. Avec la 2FA (authentification à deux facteurs), on reçoit un SMS avec un code à usage unique lorsqu’on cherche à se connecter. Si ça avait été activé sur la Webmail d’Orange, la personne aurait reçu un SMS avec un code, et le pirate ne l’ayant pas reçu n’aurait pas pu se connecter. En plus, cela aurait alerté la victime que quelqu’un aurait demandé un changement de mot de passe.

Malheureusement, et là je dis honte à Orange, la 2FA n’est pas possible sur la webmail d’Orange si l’on n’est pas également client mobile chez Orange ou Sosh, ce qui n’est pas le cas ici (la webmail vient avec l’abonnement fixe, pas mobile).

Pour info, la webmail Orange n’est pas seule : chez Free c’est pas mieux a priori, Bouygues non plus. Quant à SFR, ils facturent cette option.
Bref, du n’importe quoi chez nos FAI français.

Comment tout ça est arrivé ?

Deux causes :

  • l’usage du même mot de passe partout (avoué par la victime)
  • le piratage d’une base de donnée chez qui on avait un compte (avec l’e-mail de la webmail et le mot de passe identique).

Comment on l’a vu ?

L’adresse e-mail apparaît dans les bases de données piratées.
Des services en lignes permettent de vérifier ça, comme ceux-là :

Voilà.

Donc c’est un site tiers qui s’est fait pirater : la base de données des e-mails + mots de passe s’est retrouvée dans la nature et un pirate a récupéré ça.
Ensuite, il a essayé une des adresses (celle de la victime) et a utilisé le mot de passe du site piraté, en espérant que la victime utilise la même partout : c’était le cas, bingo.

Ensuite, le pirate entre sur la webmail, fouille tous les mails à la recherche d’informations, comme les correspondances avec sa banque, des numéros de comptes, des noms de famille… Puis à utiliser la webmail pour écrire à la banque de faire un virement. Encore une fois : ici la banquière a eu la présence d’esprit de demander confirmation par téléphone à la victime. C’est ce qui a sauvé les meubles.

Comment faire pour ne pas que ces choses arrivent ?

Choses très simple à mettre en place :

  • ne pas utiliser le même mot de passe partout
  • changer de mots de passe régulièrement, ou en cas de doute sur une intrusion.
  • utiliser la 2FA (authentification à deux facteurs) partout où c’est possible.

Il faut mieux un SMS avec un code chiant à entrer à chaque connexion qu’un piratage.

Et dans le cas de la banque :

  • toujours faire ses demandes via la « messagerie sécurisée » de votre banque, ou par téléphone, ou au guichet pour les gros montants.

D’ailleurs, tout comme votre banque vous dit régulièrement qu’ils ne font rien passer par e-mail, mais toujours par courrier, vous pouvez très bien leur dire aussi que vous ne passerez jamais par e-mail et viendrez toujours passer par le guichet (pour ceux qui font ça).
Les banques ajoutent alors cette information à votre dossier et ils sauront qu’un virement inopiné sera forcément frauduleux (et soit l’annuleront, soit vous appelleront).

Ceci est aussi utile quand vous avez un gros virement à faire : prévenez votre banque, ça évitera qu’ils fassent obstacle en pensant à un virement frauduleux (je l’ai fait quand j’ai acheté une voiture, par exemple).

Choses plus avancées à mettre en place :

  • utiliser une adresse mail personnelle (pour parler avec les gens)
  • et utiliser une adresse mail pour les inscriptions sur les sites (comme ça le piratage de la seconde n’expose que vous, pas vos correspondants, ce qui empêche au pirate d’avoir l’e-mail de la banque)

Choses à considérer dans l’idéal

  • utiliser une webmail sécurisée (proposant la 2FA)
  • ne pas utiliser celle de votre FAI (en général, car le jour où vous changez d’opérateur, vous perdez tout…).

Toutes considérations de vie privée et de l’hégémonie des GAFAM mis à part : préférez une GMail qu’une webmail de votre FAI. Idéalement, achetez-vous un nom de domaine chez un régistrar (comme Gandi ou OVH) : ils viennent avec une webmail suffisamment large pour n’importe quel usage perso. En plus d’avoir une adresse e-mail bien à vous, ça permet de ne plus dépendre de votre opérateur téléphonique, qui peut changer si vous changez de prestataire.
Et un nom de domaine peut se transférer d’un régistrar à un autre : il est à vous, donc si vous l’achetez chez l’un mais que vous voulez changer, transférez-le chez un autre régistrar. Ceci n’est pas possible avec une adresse chez Orange, SFR, Free…

Changez de temps en temps d’adresse e-mail pour les sites web. Rappelez-vous : si vous utilisez une adresse pour la correspondance et une pour les inscriptions, c’est celle pour les inscriptions sur les sites qu’il faut changer de temps en temps.

Des choses au niveau des sites web

Ici, vous n’y pouvez rien : vous n’êtes pas responsables si un site web se fait pirater. Du coup, ceci s’adresse aux éditeurs de services web : ne stockez pas les mots de passe en clair, bordel ! Un jour vous vous ferez pirater, et si vous les stockez en clair, tous vos clients seront victimes de ce genre de brèche, par votre faute.

Et n’utilisez pas un hashage MD5. Ce n’est plus sûr non plus.
Utilisez au moins du SHA256, voire SHA512, et avec un salt. Il existe des fonctions intégrées aux langages de programmation (comme PHP) pour utiliser tout ça d’un coup. N’utilisez pas des fonctions « maison » qui vous semblent meilleurs que ceux codés par les experts qui font les langages. Ça ne l’est probablement pas.

Pour terminer

Pour finir : la victime de cette mésaventure s’est promise qu’on ne l’y reprendra plus à utiliser le même mot de passe partout. Tant mieux.

Il faut maintenant aussi penser à surveiller l’activité du compte (une connexion depuis le Mali n’est pas normale dans notre cas), et, en cas de doute, changer immédiatement de mot de passe. Idéalement, il faudrait changer de mot de passe régulièrement, mais attention à ne pas tomber dans la simplicité et changer pour des mots de passes plus simples pour compenser les changements fréquents.

Le « régulièrement » va dépendre : rous les ans, tous les 6 mois, tous les mois… il en va du niveau de paranoïa de chacun et de l’importance du compte en question.
Perso, je pense que changer son mot de passe une fois tous les ans est un minimum, au moins pour ses comptes critiques (banque, etc.).

Donc vous savez ce qui vous reste à faire : allez vérifier vos comptes en ligne (Gmail, Facebook…) et vérifiez l’historique de connexion, et changez vos mots de passe en cas de doute ou d’activité suspecte.

Attention : si vous changez votre mot de passe e-mail sur votre ordinateur, vous devrez le mettre à jour sur votre téléphone également, et partout où vous êtes connectés.

image d’en-teête de Jacob Rosen

Pourquoi les communes devraient installer des bornes pour voitures électriques

Deux Ioniq
Ça y est, je commence à regarder la présence de bornes de recharge pour savoir où je vais aller.

Même si je ne suis pas à quelques dizaines de kilomètres près, mais pouvoir recharger sa voiture pendant qu’on se balade à pied, qu’on boit un verre, qu’on fait ses courses, qu’on mange, qu’on dort à l’hôtel a quelque chose de satisfaisant.

Les bornes payantes avec tarification à la minute ne sont pas attractives pour une PHEV (qui chargent lentement et donc longtemps), mais le restent pour les EV. Vu que j’ai une PHEV, je reste donc uniquement sur les bornes gratuites quand il y en a.

Quoi qu’il en soit, je ne pense pas être le seul.

Et tant que les bornes sont rares, c’est un point d’intérêt pour ceux qui roulent en électrique. C’est aussi toujours une bonne surprise quand il y a une borne là où on va alors qu’on ne le savait pas, d’autant plus quand elle est gratuite.

Les aires d’autoroute ont désormais souvent des points de charge rapide, mais dès qu’on en sort, particulièrement à la campagne, c’est moins courant : il faut les chercher. Heureusement qu’il y a des applications comme ChargeMap, ou Alizée pour nous aider avec ça.

Y a 15 jours, j’en ai fait l’expérience : il restait un peu de temps et je voulais me balader, donc j’ai regardé les villages et activités alentour. Et j’ai donc choisi d’aller au seul village avec une station de charge, (qui était gratuite) pour aller voir.
Samedi dernier, je suis resté un peu plus longtemps dans un autre village, juste pour finir la charge et on a bu un verre.

Peut-être vous voyez où je veux en venir : installez une borne, et les gens viendront, et les gens dépenseront.

Le village où j’étais indiquait être excédentaire énergétique (c’est écrit sur la borne, avec un message du prestataire du service, etc.) : a priori donc, j’ai chargé ma voiture sur de l’énergie qui serait autrement parti « à la poubelle » ou dans du pompage hydraulique (et donc utilisé de façon moins efficiente).

Si je ne l’avais pas fait, j’aurais probablement brûlé un peu d’essence pour rentrer, ou j’aurais chargé ma voiture ailleurs, ni gratuitement, ni sur du courant excédentaire.

Un autre point, et ce n’est pas un mystère : les voitures électriques sont encore chères. Proposer un point de charge, c’est donc potentiellement attirer des personnes qui ont des moyens de dépenser. Y compris des touristes. Et un touriste qui vient dans un village il repart généralement avec des souvenirs, après un restau ou une nuit à l’hôtel du coin, bref, quelqu’un qui y injecte du pognon.

Sur les bornes de proximité, la recharge prend facilement une heure ou deux, c’est donc l’occasion de passer à table entre-temps.
Je sais que les points de charge coûtent cher (on parle de 3 000 à 6 000 € pour une borne de deux places), mais si ça s’amortit parce que ça attire du monde, pourquoi pas. Comme j’ai dit plus haut : ça attire une clientèle capable de dépenser.

D’un point de vue technique, une borne de 22 kW suffit pour la charger complètement une voiture de 50 kWh (soit une EV moyenne) en 2 heures, soit le temps d’un restau. Installez ça sur le parking du village, et on peut être sûr que celui qui passe pour charger viendra boire un verre ou casser la croûte sur place.

Dans le cas d’un hôtel, une borne 11 kWh ou 7 kWh suffiront amplement si le client y passe sa nuit. Ça rechargera la voiture tranquillement pendant qu’il dort. Et même sans ça, une prise murale renforcée (32 A) suffirait si le client a son chargeur avec lui (c’est le cas généralement).

Pour info, une borne 7 kW, c’est du 32 ampère monophasé (donc une ligne similaire à une ligne de camping « prise bleue », ou P17).
Le 11 kW, c’est du 16 A triphasé. Enfin, le 22 kW, c’est du 32 A triphasé : ça reste accessible techniquement, il faut juste le demander à EDF.

En tout cas, ce n’est pas du 50, 150 ou 300 kW qui demandent effectivement des installations (postes de transformation) très coûteuses, et qui ne sont utiles que pour les charges rapides, donc réservées pour les aires d’autoroute ou les stations EV à grand volume.

À titre d’exemple, Tesla est le seul constructeur qui possède son propre réseau de charge. C’est ce qui fait sa force devant tous les autres constructeurs (ces derniers ayant refusé de s’allier avec lui). Et peut-être remarquerez-vous qu’une grande partie des points de charge Tesla sont situés dans ces cours d’hôtels : ce n’est pas un hasard !
Tesla a créé des partenariats avec ces chaînes d’hôtels. Les conducteurs vont là-bas, boivent un café à la cafétéria de l’hôtel et après 20-40 minutes, la voiture est chargée et c’est bon.

Donc oui : si vous êtes Maire ou conseiller municipal en zone rural, et si votre village a un café, un restau ou 2-3 petits coins à visiter dans la ville, et si la question est sur la table : n’hésitez pas ! La borne sera rapidement visible dans les applications mobiles et on y voit aussi s’il y a des commodités (restos, etc.) à proximité.

Peut-être que je ne suis pas l’utilisateur moyen d’une EV, mais je ne suis sûrement pas le seul à aller à des endroits selon la possibilité d’y charger la voiture : entre deux villages inconnus à visiter, j’aurais bien plus tendance à aller explorer celui qui possède une borne pour EV…

Quelques astuces .htaccess

J’avais déjà fait un article sur ça il y a longtemps, mais là aussi il semble qu’elle ne soit plus au goût du jour.

Après moult tests et quelques surprises, je mets ici quelques snippets de code, pour mémo, surtout pour moi.

Notes :

  • Dans ce qui suit, si vous voyez un example.com, il faut remplacer ça par votre site à vous ;
  • Ceci est adapté à mon site, mes préférences en termes d’URL.
  • Vérifiez que votre serveur supporte les redirections et le fichier .htaccess.

Notes 2 :
Selon votre fichier et les règles qui s’y trouvent déjà, il peut être nécessaire d’y ajouter (une fois) les instructions suivantes :

RewriteEngine on
RewriteBase /

Je ne les fais pas figurer partout ci-dessous.

Forcer la redirection HTTPS

Les navigateurs le font tout seuls parfois, mais il vaut mieux l’ajouter :

## Force HTTPS
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301]

Supprimer le « www », au début du nom du site

Certains préfèrent le conserver, d’autres non. Dans tous les cas, il est préférable d’avoir un choix et de forcer la redirection de l’une des URL vers l’autre. C’est plus propre et c’est aussi mieux pour le référencement d’avoir une seule URL pour chaque ressource :

## Removes www.
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ https://%1%{REQUEST_URI} [R=301]

Supprimer les slashes redondants

J’ai mis du temps à trouver un code qui fonctionne quelle que soit la position des doubles-slashs. Généralement les forums en proposaient plusieurs selon que le slash soit au début, à la fin ou au milieu de l’URL.

## Removes multiple consecutive slashes anywhere in URL
RewriteCond %{THE_REQUEST} \s[^?]*//
RewriteRule ^.*$ /$0 [R=301,NE]

Maintenant, les urls suivantes :

  • exemple.com///dossier/fichier ;
  • exemple.com/dossier///fichier ;
  • exemple.com/dossier/// ;
  • exemple.com////dossier///fichier

Sont toutes réécrites en :

  • exemple.com/dossier/fichier

ÉDIT : les slashes multiples doivent être remplacées uniquement dans l’arborescence. S’il y a « ?paramètre=foo///bar », cela peut être légitime et ne n’est pas notre problème : ils doivent rester. C’est pour ça qu’on ne cible que les slashes multiples entre le premier espace dans %{THE REQUEST} et le premier « ? » dans l’URL.

Supprimer le code derrière le chemin d’un script

## Rewrite ^*.php/*$ to *.php$ (removes anything after a "*.php/")
RewriteCond %{REQUEST_URI} ^(.*)\.php/(.*)$
RewriteRule . %1.php [R=301]

Celui-là est plus compliqué.
Quand on appelle un fichier fichier.php, on en exécute le contenu. Si l’on l’appelle avec un paramètre fichier.php?parametre, c’est toujours le même fichier qui est exécuté, mais maintenant l’exécution tient compte de la valeur du paramètre.

Dans le cas suivant par contre, il y a possibilité de problèmes : fichier.php/.
Le fichier est appelé (et donc exécuté), mais il est traité comme un dossier (car il est suivi d’un slash et non d’un point d’interrogation), et avec lui la notion de profondeur de l’arborescence, etc.
C’est un problème assez sévère et je préfère l’éviter.

J’y vais donc assez lourdement : quand je vois un fichier .php qui est directement suivi d’un slash, on vire tout ce qui suit le slash, incluant ce dernier.

Les urls suivantes :

  • exemple.com/fichier.php ;
  • exemple.com/fichier.php/ ;
  • exemple.com/fichier.php/blabla/autreblabla ;

Sont toutes réécrites en :

  • exemple.com/fichier.php

Notez que ça ne visera que le script exécuté. Rien n’empêche en effet d’avoir la chaîne « .php » suivi d’un slash dans un paramètre d’un autre fichier php (celui exécuté).
Cette URL ne sera pas modifiée, par exemple : exemple.com/fichier.php?parametre=fichier.php/bla/bla

Supprimer le « index.php » à la fin des URL

## Rewrites "/index.php" to "/"
RewriteCond %{REQUEST_URI} ^(.*)/index\.php$ [NC]
RewriteRule . %1/ [R=301,L]

Quand on affiche un dossier sur un site, comme example.com/folder/, le « index.php » ou « index.html » qu’il contient est implicitement affiché. C’est la page par défaut. Le demander de façon explicite est donc généralement inutile.

Afin d’éviter d’avoir des URL redondantes, je préfère ne conserver que les URL sans le « index.php ». Les éventuels paramètres, eux, sont maintenus.

Pour résumer

Avec tout ça, toutes les URL suivantes :

  • http://lehollandaisvolant.net/tuto/ (https)
  • http://www.lehollandaisvolant.net/tuto/ (https ; www)
  • https://lehollandaisvolant.net/tuto/ (url OK)
  • https://lehollandaisvolant.net//tuto/ (double slash après le TLD)
  • https://lehollandaisvolant.net/tuto/// (double slash à la fin)
  • https://lehollandaisvolant.net/tuto/index.php (index.php)
  • https://lehollandaisvolant.net/tuto/index.php/ (index.php + slash)
  • https://lehollandaisvolant.net/tuto/index.php/folder/ (index.php + slash + faux-dossier)
  • http://www.lehollandaisvolant.net//////tuto/index.php//dossier/sousdossier/foo/ (tout ce qui précède)

Renvoient toutes sur :

  • https://lehollandaisvolant.net/tuto/

Petite note sur les cascades de fichers .htaccess

On peut mettre un fichier .htaccess dans chaque dossier et leurs sous-dossiers si l’on veut, et les directives seront appliquées à tous les fichiers inclus dans le dossier, y compris leurs sous-dossiers.

Par contre, mettre un RewriteEngine on dans un des sous-dossiers pourra avoir pour effet d’annuler les directives des fichiers situées dans les dossiers parents. C’était le cas chez moi récement, même si je n’ai pas souvenir d’un tel comportement lors de la mise en place de ces fichiers.
Il est possible que ça vienne de la configuration du serveur.

Vivaldi : placer la barre de marque-pages verticalement (méthode 2021)

Il y a quelques années, j’avais fait un article pour expliquer comment mettre la barre de signets verticalement dans Vivaldi. Cette méthode n’est plus d’actualité et était de toute façon remise à zéro lors des mises à jour du navigateur.

La nouvelle méthode est elle persistante, et même si elle semble similaire, elle utilise des options qui n’étaient pas là dans Vivaldi avant.

Activer les modifs CSS de l’interface

Pour commencer, il faut activer 2-3 trucs dans les options du navigateur, y compris des options expérimentales.

Premièrement, activez les mods CSS. Pour ça, allez sur l’adresse vivaldi://experiments/ puis cochez la case « Allow for using CSS modifications ». Relancez le navigateur.

Rendez-vous ensuite dans les paramètres, et cherchez « CSS ». Vous devez alors voir apparaître une option qui permet de spécifier un dossier :

Paramètre de CSS de Vivaldi
Mettez-y un dossier de votre choix. Je vous conseille de choisir un sous dossier nommé « userChrome » dans le dossier de profil de Vivaldi. Sous GNU/Linux, le dossier de profil se trouve dans ~/.config/vivaldi/.

Ce dossier « userChrome » va contenir des fichiers CSS contenant le code CSS correspondant aux modifs de l’interface du navigateur.

Activer la barre de signets

Ensuite, dans les paramètres, toujours, assurez-vous que la barre de signets soit en haut, que les signets soient affichés sous formes d’icônes seulement :

Afficher les signets sous forme d’icônes.

Utiliser du CSS pour mettre cette barre verticalement sur la droite

Ce que mon code CSS va faire maintenant, c’est :

  • pivoter la barre 90° dans le sens horaire (la barre se trouve alors à gauche et les icônes sur le côté)
  • déplacer cette barre (sur la gauche) vers l’autre côté, à droite
  • faire pivoter les icônes de −90° pour les remettre dans le bon sens.
  • faire en sorte que la barre n’empiète pas sur la fenêtre principale du navigateur (la partie où s’affichent les pages)

Le code en question :

/* Bookmarkbar : turning it on the side, placing it on the right */
#app #browser #main .bookmark-bar {
	transform: rotate(90deg) scale(1, 1)!important;
	transform-origin: 0% 0%!important;
	position: relative!important;
	left: 100%;
	height: 34px;
}

/* flip back the individual icons */
#app #browser #main .bookmark-bar button {
	transform: rotate(-90deg)!important;
}

/* gives margins to the main frame */
#app #browser #main .inner {
	margin-right: 35px!important; /* gives place to the new bars position */
	margin-top: -35px!important; /* claims the place from its old position */
}

Ce code est à placer dans un fichier CSS dans le dossier créé précédemment. Donnez-lui le nom que vous voulez ; par exemple « vertical-bookmarks.css ».

Enregistrez ce fichier, puis redémarrez Vivaldi, et la barre devrait être vertical, à droite :

Vivaldi avec la barre de signets à droite.

Quelques notes

Ceci est testé avec Vivaldi 3.7.2218.58 (Stable channel) (64 bits) sous Linux Mint 20.
Le code CSS utilisé est le même que celui de mon astuce d’il y a quelques années.

Vivaldi le dit bien : l’option pour le CSS peut, un jour, être modifié ou retiré. Dans ce cas, ce mod ne fonctionnera plus : la barre de signets sera alors de nouveau en haut, horizontalement. Ça ne sera pas grave (aucune perte de données), mais il faudra alors trouver autre chose.

À l’époque d’Opera, il était possible de mettre la barre de signets verticalement d’une simple option dans les réglages. On peut espérer que cette option revienne un jour dans Vivaldi. En attendant, ce bricolage permet de dépanner.

Toute l’interface de Vivaldi est accessible en CSS. Pour en explorer les éléments, il faut lancer Vivaldi dans un mode spécial, avec la commande vivaldi --debug-packed-apps --silent-debugger-extension-api, et ensuite utiliser les outils de développeurs pour l’explorer et moder ça.

Liste des fichiers à avoir sur son site

En plus des traditionnels « favicon.png » ou « robots.txt », qu’on doit mettre à la racine de son site, il y a une ribambelle d’autres fichiers qu’il est possible (parfois recommandés, même) d’avoir sur son site.

En voici une petite liste.

Commençons par les fichiers très connus et très utilisés. Vous trouverez beaucoup de ressources à leur propos.

La favicon

Pour que votre site affiche une icône sur toutes les pages, le minimum est de mettre un fichier favicon à la racine de votre site :

/favicon.ico

Le format est spécifique, mais généralement, utiliser un fichier BMP renommé en .ICO fonctionne très bien. La favicon est traditionnellement carrée et de taille 16x16, 32x32 ou 48x48.
Une seule favicon à la racine de votre site suffit pour toutes les pages de votre site, quelque soit leur arborescence (sous-dossiers, etc.). Les navigateurs viendront automatiquement la chercher.

Vous avez la possibilité (en plus du fichier favicon.ico à la racine du site) de spécifier une autre icône dans le code source HTML, grâce à une balise <meta>. Dans ce cas, le format de fichier peut être PNG, SVG ou ce que vous voulez.

De plus, vous pouvez aussi pointer le chemin vers un autre chemin, comme un dossier spécial pour toutes les autres icônes.

Les autres icônes

Chrome, Safari, Edge, Windows 10, Android ou Mac OS peuvent parfois avoir besoin d’une icône spécifique.

Voici quelques exemples :

  • Android utilise une icône dédiée quand on met un lien vers un site sur l’écran principal.
  • Idem pour iOS.
  • Edge utilise une icône spécifique pour quand le site est épinglé.
  • Safari sur Mac OS utilise une icône spéciale dans les onglets épinglés aussi.
  • Windows 10 a aussi son format d’image pour quand votre site apparaît dans le menu démarrer.

Il y en a tout un tas, et à chaque fois les formats et les dimensions varient (il n’y a pas encore de standard bien défini pour ça).

Chrome et Windows 10 utilisent aussi des fichiers .manifest en XML pour avoir d’autres informations sur le raccourcis que vous cherchez à faire : nom du raccourcis, couleur principale, quel application doit l’ouvrir, etc.

Créer toutes es icônes à la main est fastidieux. Aussi, le mieux est d’utiliser le site Real Favicon Generator pour cela. Vous lui donnez une seule icône (en PNG ou SVG) et il va vous donner un ZIP avec tous les fichiers. C’est très pratique.

robots.txt

Pour les moteurs de recherche, il faut spécifier un fichier destinés aux ordinateurs robots qui analyse les pages web du monde entier. Ce fichier permet de dire aux moteurs de recherche si oui ou non vous voulez apparaître dans les résultats de recherche. Et si oui, sous quels conditions, quels fichiers, etc.

C’est un petit fichier texte à placer à la racine du site également :

/robots.txt

La syntaxe est décrite ici : robots-txt.com.

Sachez seulement que même si les moteurs de recherche prennent généralement en compte ce fichier, rien ne les y oblige. Je vous conseille donc, si vous ne voulez absolument pas que vos fichiers ne se retrouvent en ligne, de ne pas les publier ou bien d’en protéger l’accès. C’est à vous, le détenteur d’un site, de faire en sorte que vos fichiers soient protégés.

/humans.txt

Si robots.txt est destiné aux robots, le fichier humans.txt est destiné aux… humains !
Rares sont les sites qui le mettent, mais il permet de donner un peu d’information supplémentaire sur le site ou l’auteur.

Là aussi, c’est à la racine qu’il faut le mettre :

/humans.txt

Il n’y a pas vraiment de syntaxe standard : le fichier humans.txt est fait pour des humains et par des humains.

Une idée de syntaxe est proposé sur le site humanstxt.org, mais vous pouvez y mettre tout ce que vous jugerez utile à transmettre aux visiteurs curieux sur votre site.

Mes site disposent de ce fichier aussi. N’hésitez pas à y jeter un œil.

Un sitemap

Ce fichier est une carte de votre site : il contient les différents liens des pages de votre site. À nouveau, il est à la racine de votre site site :

/sitemap.xml

L’idée est là aussi que les moteurs de recherche découvrent ce fichier et voient toutes les pages de votre site d’un seul coup.

Google ou Bing proposent des outils pour leur soumettre vos sitemap (DDG et Qwant n’ont pas d’outils dédiés) : ça leur permet d’enregistrer votre site dans leurs indexes et de savoir par où commencer.

La syntaxe est spécifique et bien décrite sur Wikipedia.

Un fichier manifeste

/manifest.xml

Il n’est pas obligé de le mettre à la racine du site, car il est lié dans une balise méta dans la page, vous pouvez donc le mettre où vous voulez tant que vous liez son chemin dans la balise méta.

Il s’agit d’un fichier qui contient quelques informations supplémentaires pour le navigateur, en particulier mobile : quand vous faites un raccourcis sur votre bureau Android, ce fichier peut être appelé. Par exemple, il permet d’afficher le site avec ou sans la barre de tâches Android, ou même avec ou sans les boutons du navigateur, avec ou sans une icône spécifique, faisant apparaître votre page web comme une application native.

C’est le début de l’intégration d’une application-web progressive (PWA). Ici l’app aura toujours besoin d’une connexion internet pour fonctionner, mais l’affichage se fera en (quasi-)plein-écran sur mobile, sans la barre d’adresse et l’interface du navigateur.

Voir là : Progressive Web App (PWA) — Le fichier Web App Manifest

Un fichier openSearch.xml

Idem : vous pouvez le mettre où vous voulez tant que vous liez son chemin dans la balise méta.

Vous avez déjà vu un site qui propose d’installer un moteur de recherche ? Et ben vous pouvez faire ça également. Notez que cette implémentation est passive : c’est le navigateur qui proposera d’installer le moteur de recherche lorsqu’il le détecte sur votre site, un peu comme quand un site propose un flux RSS et que votre navigateur vous en propose l’abonnement via l’affichage d’une petite icône.

Cela peut être un petit plus pour votre site et c’est très simple à mettre en plus : une simple balise meta et un tout petit fichier XML statique à la base du site. C’est tout. Cela suffit pour que votre site propose un moteur de recherche :

/opensearch.xml

Les explications se trouvent sur Alsacréations. Essayez de regarder dans les options de mon site, par exemple :).

À noter que ceci ne fonctionne que si votre site est doté d’une fonction de recherche (ce que font les moteurs de blog, généralement). On pourrait l’adapter pour qu’il renvoie sur un moteur de recherche existant comme Google ou DDG, avec le paramètre « site: » dans la requête.

Une page security.txt

Il s’agit d’une page indiquant à quelqu’un qui découvre une faille dans votre site comment vous en faire part.
En pratique, il faut utiliser le répertoire .well-known et y mettre le fichier :

/.well-known/security.txt

La syntaxe est décrite sur le site dédié de l’initiative : securitytxt.org.

/ads.txt

Pour les sites qui diffusent de la publicité, il peut être nécessaire de spécifier quels annonceurs sont vos partenaires. Il y a un fichier pour ça : /ads.txt. Il s’agit simplement de la liste des annonceurs présents sur votre site et ce qu’ils y font (vente directe, annonces, etc.). Le standard a été établi pour des questions de sécurité et de lutte contre la fraude dans le domaine de la publicité en ligne.

En soit, le visiteur lambda s’en fiche, mais les annonceurs disposent d’outils pour analyser le fichier /ads.txt :

/ads.txt

La syntaxe et le projet sont décrites là : IAB Tech Labads.txt Specification Version 1.0.2.

Pour ma part, mes sites ne diffusent pas de publicité via des annonceurs. Seuls quelques liens sur mes blogs sont effectivement des liens affiliés (Amazon, ou eBay, ainsi que le lien vers mon hébergeur, dans le pied de page), mais cela reste de simples liens qui n’ont aucune possibilité d’afficher quoi que ce soit ici.

Mon fichier /ads.txt est donc vide.

Des fichiers que je recommande

Ces fichiers là ne sont pas forcément standard, néanmoins je conseille de les avoir.

Votre clé Publique GPG

Pour ceux qui utilisent GPG pour chiffrer les e-mails, vous devriez mettre votre clé Publique GPG sur votre site, en particulier si vous utilisez une adresse e-mail sur votre propre domaine.
Je propose l’un des deux formats suivants :

/pubkey.txt
/pubkey.asc

Je propose de le mettre à la racine du site car c’est là qu’un utilisateur peut commencer à chercher et surtout de le mettre dans un format texte, en ascii.

Vous pouvez également utiliser le fichier humans.txt pour y spécifier votre fichier GPG (c’est ce que je fais personnellement).

Des pages courantes

Selon moi, certaines pages devraient se retrouver sur tous les sites personnels : une page « à propos » par exemple, ou une page de contact.
Dans ce cas, vous pouvez configurer votre serveur pour qu’il affiche des pages sur les chemins /contact ou /about

Les fichiers d’erreurs

Quand vos visiteurs tentent d’accéder à une page qui n’existe pas, le site renvoie une erreur : 404 Not Found. Si la page demandée produit une erreur au niveau du serveur, c’est l’erreur 500 Internal Server Error
Il y a toute une liste d’erreurs comme ça. Les serveurs sont configurés pour afficher une page relativement épurée en cas d’erreurs, mais il est possible de la personnaliser.

Ainsi, si un visiteur cherche un fichier inexistant, vous pouvez afficher une page à vous avec un message personnalisé et un lien de retour vers la page d’accueil.

Rien n’est obligatoire ici, mais c’est toujours sympa d’avoir un site personnalisé jusqu’au bout. Mon site, par exemple, dispose d’une page personnalisée pour l’erreur 404.

Il y a juste une chose à avoir en tête : en cas d’erreur, le serveur ne fonctionne plus normalement. Il faut donc faire une page HTML simple et tout mettre dans cette page (y compris les images, les scripts…), si possible en Base64 : comme ça, le serveur (en erreur) n’a que le fichier d’erreur à envoyer et pas de requêtes supplémentaire, qui pourraient produire des erreurs supplémentaires et possiblement tout planter (voir ici pour convertir en Base64).

Pour conclure

En fait, l’idée derrière ce genre de petits fichiers est d’être trouvables facilement, d’avoir un chemin d’accès identique sur tous les sites, et de contenir des informations utiles.

Avoir un nom identique sur tous les sites, par exemple « /humans.txt », permet à quelqu’un de commencer à chercher même s’il ne sait pas que le fichier est là. Il cherche, mais si le fichier est là, il trouve, c’est tout bénéfique. Un peu comme une page « à propos », ou une page de contact.

La magie des adaptateurs USB… et d’en avoir des cartons pleins !

J’ai une manie qui est que j’ai du mal à jeter les vieilles choses.

La raison que je m’invoque à chaque fois : « ça peut servir », ou « au cas où ».

Du coup, mes tiroirs sont remplis de bric-à-brac en tout genre, et mes placards remplis de cartons plein de trésors. On pourrait dire que c’est le bordel. Mais je sais exactement ce que j’ai et [pas toujours très] exactement où tout se trouve.

En particulier, j’ai un espace de rangement où je range mes trucs informatiques : des câbles, des vieux CD d’installation, des centaines d’adaptateurs USB en tout genre, des vieux claviers, des disquettes, des pièces de PC qu’ils ne fabriquent plus depuis 15 ans… Bref, de tout.

Eh ben ça m’a servi, pour une fois !

Mon téléphone actuel (BQ Aquaris X2), je l’ai depuis 2018 : c’est un téléphone incroyable, hyper-fluide et sous Android One. Même après bientôt 3 ans, il est d’une fluidité comme au premier jour. En plus il y a des options sympa et ne manque de rien. Malheureusement, BQ, le fabriquant, n’existe plus. Ils ne font plus de téléphones. Ce téléphone est désormais introuvable neuf.

Pourquoi ça m’emmerde ? Parce que je suis maladroit.

Malgré ses qualités, la batterie du téléphone n’a pas trop survécu à son âge et aux canicules qu’il a traversé deux étés de suite. J’ai perdu environ 60 % de l’autonomie initiale. J’ai donc voulu changer la batterie.

Les batteries inamovibles, c’est la merde. En la retirant, malgré ma délicatesse, j’ai endommagé le connecteur de l’écran tactile. Tout fonctionnait encore, sauf le tactile. Du coup je ne pouvais rien faire, sinon l’allumer et l’éteindre. Je me suis senti con.

Heureusement, mon téléphone sauvegarde les fichiers téléchargés, les photos et les captures d’écran sur mon NAS tous les soirs : je n’ai rien perdu de ce côté-là.
Par contre, mes vieux SMS et certains fichiers de config, ne sont pas sauvegardés et étaient encore dessus.

Du coup comment faire ?

Les téléphones récents peuvent accueillir un clavier ou une souris. En bluetooth par exemple. Mais sans tactile, impossible d’activer le bluetooth.

Sur mon PC j’ai un clavier et une souris sans fil : ils utilisent un petit récepteur sans fil USB et la souris se connecte sur ça.

Sauf que mon téléphone a une prise USB-C. Meh.

Ah et je me suis souvenu, qu’un jour en 2015, j’avais reçu un petit gadget (avec un autre téléphone, un Elephone P5000) qui se branchait en Micro-USB dans le téléphone et dans lequel je pouvais mettre une clé USB normale. C’est donc un connecteur Micro-USB-Mâle_USB-Normal-Femelle (adaptateur « OTG »).

Un adaptateur OTG.

Ce truc était censé permettre le partage d’énergie : le P5000 avait une batterie de 5 000 mAh qui lui permettait de tenir 5 jours, ou de charger un autre téléphone. Le connecteur ne m’a jamais servi.

En plus de ça, je dispose aussi de connecteurs Micro-USB_USB-C, pour charger mon téléphone récent avec les chargeurs anciens.

Du coup je me suis dit, je vais essayer : connecteur OTG –> adaptateur USB-C/Micro-USB –> Connecteur sans fil pour la souris. Je n’avais guère d’espoir, et pourtant…

… Ça marche !

Happy face meme.
Et on peut piloter le téléphone avec une souris : le pointeur apparait. Un clic c’est un « touch » et pour les gestes tactiles comme le glissement, on fait comme un drag-n-drop. Tout à fait intuitif.

J’étais sur le cul, mais ça m’a servi de récupérer mes SMS, d’exporter les fichiers de config de quelques logiciels (Nova, K9-Mail…) pour les réimporter sur un autre téléphone.
Ouais, je suis un vieux grincheux : j’aime pas le changement et j’aime retrouver mes marques. C’est aussi pour ça que je déteste changer mes appareils. Je passe du temps à choisir très méticuleusement mes outils, ce n’est donc pas pour changer tous les 6 mois. D’ailleurs, dans le cas contraire je n’aurais pas cherché à changer la batterie de mon téléphone, j’aurais changé de téléphone.


Bref, maintenant tout est résolu ou presque, c’est l’heure des leçons :

Premièrement, faites gaffe quand vous démontez vos trucs. Ne tirez pas sur tout, allez-y doucement. Et si vous ne voyez pas ce que vous faites, n’y insérez pas une lame (même en plastique) : il y a peut-être un connecteur fragile en dessous… Ah et regardez les tutos de réparation sur Youtube. Rien n’est trop simple. On ne fait la connerie qu’une seule fois.

Deuxièmement, je suis content d’une chose : je respecte les plannings de mes sauvegardes. Tout est intégralement sauvegardé chaque soir quand je rentre chez moi et passe en Wifi. Je vais mettre en place la même chose pour mes SMS : ça va devenir nécessaire. Mais ce qui est sauvegardé a très bien fonctionné. J’en suis content : mes fichiers sont en lieu sûr. J’espère que c’est le cas aussi pour vous.

Troisièmement, ne jetez pas vos câbles, adaptateurs, pièces de rechanges, boîtes… Tout peut toujours servir.

Quatrièmement, essayez les branchements improbables. Ça ne m’a rien coûté de brancher 3 adaptateurs à la suite et franchement mes espoirs que ça marche étaient faibles. Mais ça a marché. Certains adaptateurs ne laissent passer que la charge et pas les données, mais d’autres, comme ici, permettent à tout de fonctionner. C’est cool.

Attention à vos codes et numéros !

Hier mon livreur a laissé un avis de passage (non pour l’instant pas de désagrément, ça va venir, je ne m’en fais pas).

En voici une photo partielle :

Photo d’un avis de passage.
Évidemment, je m’empresse de vouloir programmer une nouvelle livraison sur leur site. Là on me demande le numéro du colis.

Et là je me suis fait avoir. J’ai tapé :

PAO 057 25

Qu’est-ce qui va pas ? Ben en fait, ce n’est pas un « O » (lettre O capitale), mais le chiffre zéro (0).

C’est tout con comme problème, mais c’en est un. Et autant j’ai l’habitude de jongler entre les O, Q, o, 0 ou encore les l, I, i, 1, | (lettres L minuscule ou i majuscule, ou le chiffre un, la barre verticale, etc.) et on s’y fait quand c’est sur un écran et dans une police d’écriture donnée, autant quand c’est écrit à la main, c’est tout de suite moins fun.

Dans ce cas présent, j’ai autant de tentatives que je veux : je m’en fous. Mais imaginez si vous avez remplis 3 pages de formulaires sur le site des impôts et qu’on vous demande de taper un captcha ou un code qui contient ce genre de caractères… et que — bien-sûr — si vous vous trompez, tout le formulaire est perdu… C’est moins fun.

Pour le présent code, j’ai deux idées de solution à proposer :

  • soit on vire tous les caractères susceptibles de poser problèmes (c’est ce qu’ils font sur les plaques d’immatriculation : les O, 0, E, 1 sont supprimés) ;
  • soit on les regroupe de façon plus intelligente : au lieu de « PA0 / 057 / 25 », on fera « PA / 0057 / 25 » (là aussi, les plaques d’immatriculation font ça : pas de doutes, quand il s’agit de flasher les contrevenants, ils pensent à tout :-D).

D’ailleurs, ce soir je tombe sur un autre problème, dans les captchas justement. Voici mon test anti-robot :

Capture d’écran d’un captcha ambigu.
Étant bête et méchant, je rentre « j ». Il s’agit de la troisième lettre du mot (si on peut appeler ça un mot) après le S et le V.
Résultat ? Faux bien-sûr : le résultat attendu était le « v ».

Car au fond, ce qu’il voulait dire, c’est mettre le troisième caractère et la chaîne et non pas la troisième lettre en excluant les chiffres !

Même chose : un peu de rigueur, des tests en situation réelle et quelques retours d’utilisateurs lors de la phase de débogage auraient pu éviter ce genre de soucis. Ce captcha fonctionne très bien sur le plan technique, mais pour l’utilisateur, ce n’est pas forcément clair et cela pose problème.

Contourner les paywall + astuce pour vos scripts

Du code javascript sur une capture d’écran.
De plus en plus de sites sont en AJAX même pour les pages les plus simples. Comprendre : la page envoyée par le serveur au navigateur est vide, et ne contient qu’un script. C’est le script qui va récupérer — dans un second temps — les données de l’article : titre, contenu, date… Ceci ne va pas s’arranger dans l’avenir car c’est comme ça que sont faites les applicables web (PWA).

Sauf que cela pose un problème technique dans certains cas. Pour ma part, dans le cas où je partage un lien sur mon site. Je le fais par un raccourci dans la barre d’adresse. Mon serveur récupère alors la page dont l’URL se trouve dans la barre d’adresse… sauf qu’il n’interprète pas les scripts, lui.
Du coup, il détecte un titre absent, ou vide et ne me préremplit pas le champ du titre. Je suis obligé de le faire moi-même à la main.

C’est le cas par exemple de Twitter. Cherchez dans le code source(Ctrl+U) sur une page d’un tweet seul la balise « title » : elle est vide ou absente. Pourtant la page affiche un titre : c’est qu’il a été ajouté dynamiquement par un script.

Comment contourner ça ?

Ben dites à votre serveur de s’identifier comme Google Bot.

Les sites et blogs veulent que Google détecte leur site y compris le titre. Donc s’ils voient un « Google Bot », ils lui envoient une page simplifiée, sans script à la con.

Si vous utilisez Wget ou cURL, ajoutez une option pour spécifier l’user-agent utilisé et mettez ça :

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)


C’est ce que je fais désormais dans mon lecteur RSS et donc mon outil pour partager des liens et parser les pages HTML. Pour le moment ça n’a jamais aussi bien marché.

En plus de ça, certains sites tronquent leurs articles pour vous forcer à vous abonner pour lire la suite (paywall). Par contre, ces mêmes sites distribuent l’intégralité de l’article au Google Bot.

Donc si vous vous dites à votre navigateur de s’identifier comme Google Bot, vous pouvez avoir accès à l’article entier. Sur une page simplifiée, plus légère, sans pub, ni scripts.


Outre l’astuce d’accéder à un contenu, c’est quand-même absolument grandiose d’en être arrivé là.

D’un côté une partie des sites mettent des captchas partout pour savoir si vous êtes bien un humain et avoir accès aux fonctionnalités, de l’autre, les pages qu’ils servent aux robots indexeurs sont 100 fois mieux que celles servies aux humains.

Ça montre une chose : ces sites-là n’en ont rien à foutre de leurs visiteurs. Ils vendent de l’espace publicitaire, et attirent les visiteurs dont ils pourrissent la navigation tant qu’ils n’ont pas payé (en euros, en données personnelles, avec leur âme ou en sacrifiant un chaton) avec un titre putaclic qui devra remonter convenablement dans les moteurs de recherche. C’est ça leur business. En attendant, ce sont bien les internautes qui sont emmerdés, ou dans mon cas, les codeurs qui veulent récupérer le titre d’un tweet dans un script.



Mise à jour : J’avais déjà écrit tout ce qui se trouve ci-dessus quand Seb poste ça : https://sebsauvage.net/links/?Dj7B4Q
C’est un cas pratique de ce qui est exposé ci-dessus : certaines [toutes petites] entreprises (restau, typiquement) passent exclusivement par FB pour publier leurs tarifs, prestations, horaires ou coordonnées. Google peut accéder à tout ça (d’où les horaires affichés directement dans les résultats de recherche), mais pas l’internaute qui doit s’inscrire et vendre son âme pour les voir et voir le reste des informations.


image d’en-tête de Luca Bravo

Quelques idées reçues à propos de la conduite électrique

Je possède une Hyundai Ioniq PHEV, donc une voiture hybride rechargeable. Ce n’est pas une électrique pure. Je fais néanmoins tous mes trajets quotidiens en 100 % électrique (travail, courses, etc.).

Je discute aussi un peu autour de moi à propos de la conduite électrique, ses avantages, ses inconvénients, ses particularités. Je note qu’il y a pas mal d’idées reçues et d’idées fausses autour des voitures électriques (EV) et de la conduite électrique.

Je ne me décris pas comme un expert en EV, mais j’ai quand-même constaté quelques astuces et phénomènes et je vais essayer de partager tout ça ici.

Notez : ces astuces / idées reçues s’appliquent à la conduite électrique (sur les PHEV et les EV). La conduite en Hybride (thermique + électrique) est encore différente et il y aura là également des choses techniques très intéressantes à dire ainsi que des astuces pour consommer moins !

Enfin, ma voiture étant une PHEV et non pas une EV, certaines remarques peuvent être biaisées, notamment sur le fait qu’une batterie vide n’est pas un problème pour moi (j’ai encore le moteur thermique derrière) ou encore que la charge soit si lente (elle n’est accélérée que sur les EV).

Idée fausse 1 : « la voiture recharge en roulant »

Alors non : quand on roule en électrique, la batterie ne se recharge pas.
La batterie se recharge seulement quand l’inertie de la voiture suffit à maintenir son allure (en descente, donc) et quand on freine (freinage régénératif).

Quand vous appuyez sur le champignon, la batterie ne se rechargera pas. Au contraire, et c’est normal.

En effet, ce n’est pas le but : le but d’une EV c’est d’utiliser l’électricité pour se déplacer, donc de faire tourner les roues avec l’énergie d’une batterie. Pas de recharger la batterie. La recharge, elle se fait sur une borne ou une prise chez vous.

Ce qui arrive en revanche, c’est que l’énergie cinétique de votre voiture (votre vitesse) est réinjectée dans la batterie lorsque vous freinez pour vous arrêter. En freinant, vous voulez délibérément réduire votre énergie cinétique. Dans une voiture normal, cette énergie est envoyée dans les freins et perdue ; dans une électrique ou une hybride, cette énergie est réinjectée dans la batterie pour être réutilisée.

Dans une EV, grâce au moteur électrique qui fonctionne aussi bien en dynamo, vous récupérez quelques kilowatts. En descente aussi : au lieu de freiner avec les freins, vous utilisez votre frein moteur régénératif : les roues font tourner le moteur en mode dynamo et vous ralentissez tout en réinjectant l’énergie dans la batterie.

Une chose est sûr, si votre batterie indique 100 km d’autonomie, vous n’en ferez pas 200 en disant « de toute façon la batterie va se recharger en roulant ».
Ça semble évident, mais j’ai déjà entendu la remarque.

Idée reçue 2 : « il faut absolument freiner, comme ça la batterie se recharge ! »

Non.
Il ne sert à rien de monter à 100 km/h puis de laisser la voiture ralentir en espérant recharger la batterie. Cela ne marchera pas.

Ce que vous consommez en courant pour monter à 100 km/h sera toujours supérieur à ce que vous récupérerez lors de la décélération.

Tout simplement car à chaque transformation d’énergie, il y a des pertes. Ainsi, quand on convertit de l’électricité en vitesse, on perd 10 %. Et si l’on cherche à transformer cette vitesse en électricité via la récupération, on perd de nouveau 10 % (juste pour info, pour ceux qui se diraient « les EV c’est nul, y a des pertes » : dans une thermique, les pertes énergétiques constituent 60 à 80 %, hein).

Donc sur tout le cycle électricité → vitesse → électricité, on n’a récupéré que 80 %. En vrai, d’ailleurs, on perd nettement plus lors de régénération, mais je ne rentre pas dans les détails.

Retenez simplement que si vous voulez aller loin, il est inutile de chercher à aller dans la zone « régénération » à tout prix. Au contraire : si vous régénérez, vous ralentirez, et si vous ralentissez, ben ça ne sert à rien car une voiture ne sert pas à ça. C’est contre-productif.
Le but c’est de faire un max de kilomètres avec une charge : si vous ralentissez, vous n’augmenterez pas les kilomètres aussi vite, ni aussi efficacement que si vous maintenez votre allure en laissant l’énergie fluer toujours des batteries vers les roues.

Le freinage régénératif est juste un bonus qui permet de récupérer de l’énergie qui serait autrement perdue.
Cela est utile dans les grandes descentes en montagne (où l’on récupère plusieurs dizaines de kilomètres d’autonomie en descendant un col de 1000 mètres par exemple), mais ça n’est pas en montant une montagne puis en descendant qu’on recharge une EV. Une hybride simple, oui, mais pas une EV : les deux sont différents.

Idée reçue 3 : « L’autonomie est plus grande en ville que sur l’autoroute ! »

Ceci est vrai.

Contrairement à une voiture thermique, la voiture électrique aura une autonomie la plus grande à basse vitesse, tout simplement, car l’efficience du moteur électrique ne dépend pas de la vitesse (contrairement au thermique).
Il ne subsiste alors que les frottements de l’air et de la route, qui eux sont beaucoup élevés à haute vitesse. Une thermique a un rendement désastreux à faible vitesse, mais pas une électrique.

C’est pour cette raison qu’il existe autant de petites voitures électriques citadines : Citroën C0, Peugeot Ion, Renault Twizzy, etc. : ces voitures ont une petite batterie pensée pour le quotidien et en ville et s’en sortent très bien. La Poste utilise une importante flotte de véhicules électriques car les tout petits trajets entrecoupées d’arrêts sont le top pour un moteur électrique, mais un enfer pour une thermique.

Beaucoup mieux qu’une grosse voiture Diesel, où les trajets courts et lents sont juste une catastrophe écologique et économique : les moteurs thermiques sont à leur plus économique rapporté au kilomètre à vitesse raisonnable (80-110 km/h), mais en dehors, même en dessous, ils consomment davantage au 100 km.

Bien-sûr, il existe aussi des EV avec des grosses batteries pour faire de la route : Tesla, Zoe, Ioniq, e-Golf, etc. : ces voitures font 300 à 500 bornes. Mais là aussi, le débat n’est pas là.

Idée reçue 4 : « on regarde constamment sa jauge ! »

Alors oui, au début, on surveille ça jauge. En tout cas, perso je l’ai fait : c’était ma première voiture électrifiée. Ceci dit, avec ma thermique avant, je regardais aussi la jauge de gazole, bien-que ça descendait nettement moins vite.

Mais une fois qu’on a pris l’habitude, et qu’on visualise ce qu’une recharge complète peut faire, on ne regarde plus. Je sais que j’arriverais à destination quoi qu’il arrive, donc on s’en fiche ! Je ne découvre plus la capacité de la batterie, désormais, tout comme je ne découvre plus la capacité d’un réservoir d’essence.

Si vous avez 200 km d’autonomie, que ce soit en électrique ou en essence, et qu’il vous reste 300 km à faire, vous savez que vous aurez à vous arrêter. Mais si c’est juste un trajet de 100 km, alors il n’y a aucun problème.

Après on va me dire qu’avec qu’une PHEV, c’est de la triche : si la batterie est vide, j’ai encore 1 000 km d’autonomie en essence. Mais quand-même : je pense que les conducteurs d’EV purs le diront : au début, ouais on surveille un peu, mais après, quand on connaît la voiture, non.

En fait, sur une EV, il convient de charger dès qu’on peut le faire. Pas forcément quand la batterie est vide.
Quand on a une thermique, on fait le plein une fois par mois quand y a plus d’essence et c’est reparti. On ne retournera à la pompe que le mois suivant.

Quand on a une électrique, on recharge quand on peut, c’est-à-dire tous les soirs en rentrant chez soi, typiquement.

Du coup, l’autonomie de 300 km, on n’en voit jamais le bout : le plein est fait tous les matins sans s’en rendre compte. Ce n’est donc pas parce que vous faites 500 km par semaine (5 × 100 km) que vous aurez du mal à rouler avec une électrique qui a 300 km d’autonomie : au contraire, c’est largement assez !

Sur une électrique, on recharge quand on fait ses courses, quand on est au Mc Do, ou dans n’importe quel parking équipé. Brancher un câble, ça prend 30 secondes (10 secondes quand la borne dispose elle-même déjà d’un câble). Donc la jauge remonte souvent et la batterie n’est jamais vide.

Les 300 km d’autonomie ne sont alors limitants que lors d’un trajet fait d’une seule traite plus long que ça.

Idée reçue 5 : « les bornes sont toujours en panne ! »

Alors là, oui.

Je n’ai qu’une PHEV, donc je m’en fiche un peu, mais je cherche quand-même à voir comment ça se passe et où sont les bornes, à quoi elles ressemblent, leurs différences…

Et pour le coup, je dois bien dire que les bornes ne sont pas assez nombreuses (2 prises pour un parking d’hypermarché, par exemple), donc souvent occupées… et souvent en panne.
Il m’est déjà arrivé de faire 150 km en traversant des tas de villages et à chaque fois, les bornes étaient en panne. Ceci serait impensable pour des stations essences, mais semble la norme ici. Selon les endroits, en trouver une qui marche relève de l’exploit.

Et quand je parle d’une borne en panne, c’est soit une borne qui affiche une erreur, soit une borne totalement éteinte et impossible à allumer.
Je ne parle même pas du lancement de la charge : erreur de paiement, type d’abonnement, mauvais câble/prise, place occupée par un 4x4….

Il y a des applications, comme l’indispensable Chargemap, qui recensent les bornes et permettent de dire en direct si elles marchent ou non. C’est cool et collaboratif, mais ça ne suffit pas pour combler un réseau de charge défaillant.

Pour le reste, une EV sera bien pour les trajets de tous les jours (la preuve : même avec ma PHEV et mes 60 km d’autonomie je fais tout en électrique), mais dès que vous voulez allez plus loin, il faut encore prévoir son trajet et prier pour ne pas tomber sur une borne en panne ou occupée.

À mes yeux, à ce jour, il n’y a que Tesla qui a ce qu’il faut : les stations sont correctement implantées, la recharge est rapide et les stations sont grandes (6 à 10 places) et donc rarement occupées à 100 %. Mais une Tesla, c’est cher. Comme je l’ai déjà dit, c’est pour ça que je suis sur une PHEV. Les EV autres que Tesla sont une blague à cause du réseau de charge, et je fais régulièrement des trajets de 300+ km, d’où mon problème.

Idée fausse 6 : « la conduite électrique, c’est mou ! »

Non.
C’est tout simplement faux.

La plupart des voitures ont un mode « éco » qui limite le couple moteur et réduit ainsi la consommation. Mais ils ont aussi un mode « normal » ou un mode « sport », où l’ordinateur de bord débride tout ce que la batterie et le moteur peuvent donner, et là le moindre coup d’accélérateur et on a l’impression de décoller.

Même avec une « petite » voiture électrique (Zoé par exemple), les démarrages sont de très loin plus puissants que n’importe quelle voiture thermique (hormis bien-sûr des sportives et les supercars, bien que les Tesla accélèrent plus vite entre 0 et 100 que la grande majorité d’être elles).

Ah et c’est silencieux en plus de ça et l’entretien se limite au lave-glace, quel confort !

Idée reçue 7 : « les voitures électriques ont toutes des looks de soucoupes volantes ! »

Alors la plupart des EV ont des looks atypiques, autant dehors que dedans, c’est vrai.

La raison est probablement parce que ces voitures sont différentes, à la fois sur leur philosophie, leur façon qu’elles se conduisent… et leur conception.

Les constructeurs peuvent briser le moule vieux d’un siècle pour s’aventurer sur des designs innovants et différents.

Les voitures électriques ont ainsi 5 vraies places (la place centrale à l’arrière n’est plus gênée par le passage du pot d’échappement par terre), beaucoup d’espace de rangement (pas de boîte de vitesse volumineuse, un coffre à l’avant et à l’arrière, et la grande souplesse dans la gestion du ou des moteurs autorise une intégration beaucoup plus poussée de l’électronique de bord.

D’où leur côté futuriste par rapport à une voiture thermique de gamme normale.

Ceci dit, il existe aussi des voitures électriques qui ressemblent à une voiture traditionnelle : suffit de voir la Hyundai Ioniq, celle que j’ai (en PHEV). Certes le look est atypique à lui-seul, mais l’intérieur ne ressemble pas à un cockpit de navette spatiale, bien au contraire.
Et comme Hyundai a fait un châssis commun pour la HEV, la PHEV et l’EV, la version électrique pure a le même look, globalement.

Ces voitures étant également plus chères à construire, le client doit en avoir pour son argent, et le constructeur est « obligé » d’en faire une voiture plus haut de gamme, avec beaucoup d’options à la pointe ou à la mode.

Car oui, il faut le dire : des voitures électriques d’entrée de gamme (10 à 15 000 €) et avec une autonomie acceptable (> 300 km) n’existent pas encore.

Idée reçue 8 : « l’autonomie annoncée n’est jamais atteinte ! »

Alors oui, les autonomies, sont toujours mieux dans les publicités qu’en vrai. Il en va de même pour les consommations en carburant des voitures thermiques.
Les autonomies « constructeurs » sont aussi calculées sur des cycles de conduits bien précis (cycles normalisé « WLTP »). Ces cycles permettent au mieux de comparer un véhicule à un autre, mais ne sont pas représentatifs de la vie normale, encore moins à votre conduite à vous, qui diffère de la mienne ou de celle n’importe qui.

Si la pub dit 4 L/100 km, en vrai vous serez au moins à 5 L/100 km. C’est pour ça qu’il est essentiel d’essayer une voiture avant d’acheter.

De plus, les autonomies qui s’affichent dans votre voiture tiennent compte de votre façon de conduire et des conditions de conduite (température, météo etc).

On note cependant quelques constantes, comme le chauffage.

Une voiture thermique propose un chauffage issue des pertes thermiques du moteur. Le chauffage n’augmente donc pas la consommation.
Dans une électrique, les pertes thermiques sont minimes. Le chauffage se fait donc par des résistances chauffantes, reliées à la batterie. Si l’on met le chauffage, l’autonomie diminue car on tire de l’énergie dans la batterie.

Cette diminution est d’environ 10 à 20 % selon les voitures (plus le trajet est long, plus on s’approche des 10 %). En revanche, le chauffage et le désembuage sur une électrique prend 10 secondes : pas besoin d’attendre que le moteur chauffe. C’est l’avantage.

Autre point : les pneus.
C’est par les pneus que le moteur transmet sa puissance à la route et force l’avancée de la voiture.
Par conséquent, le choix des pneus influe beaucoup sur l’autonomie et la consommation. Les pneus été, à la gomme plus dure et avec une résistance au roulement plus faible permettent des économies d’énergie, alors que les pneus hiver, plus tendres, provoquent davantage de pertes élastiques et forcent une consommation plus importante. Là aussi, cela peut aller jusqu’à 10 % d’autonomie en moins en hiver. Ceci est valable pour toutes les voitures, EV ou non.

Aussi : la météo
Si vous avez les essuie glace, les phares, le désembuage allumés… la batterie 12 V se vide et c’est la batterie de propulsion qui la recharge. De plus, un moteur électrique consomme d’autant plus que la charge sur le moteur est importante (alors qu’un moteur thermique, c’est l’inverse, et c’est la vitesse de rotation qui influe le plus). Un véhicule électrique est donc beaucoup plus sensible au vent, y compris latéral. D’un autre côté, un vent arrière sera un net avantage sur la consommation, plus nette que sur une thermique.

De plus : votre conduite
La conduite électrique est différente d’une thermique, ou d’une hybride. Je reparlerais de la conduite hybride dans un autre article, mais sur une thermique, la conduite la plus efficiente est atteinte quand le moteur tourne lentement et à forte charge. C’est à dire qu’il faut éviter de monter dans les tours et d’y rester, et passer au rapport de vitesse plutôt tôt que tard.
Aussi, une voiture électrique se recharge lorsque vous freinez : à l’approche d’un STOP ou d’un rond point, d’un feu, relâchez l’accélérateur et laissez la voiture glisser sur son élan, puis utilisez le freinage régénératif (dans la Ioniq, ça passe par les palettes au volant). Si vous maintenez votre allure et que vous freinez des plaquettes sur les 5 derniers mètres (conduite sportive), vous consommez davantage à cause de l’allure maintenue, mais en plus vous ne récupérez pas l’énergie au freinage comme la voiture peut le faire… et vous usez vos plaquettes inutilement : utiliser massivement le freinage régénératif permet d’économiser les plaquettes en plus de toutes les économies précédentes.


Il est évident que tout ça ne doit pas être une prise de tête constante.

Mais je peux vous assurer, et ça vaut même sur une thermique, qu’une conduite légère permet de consommer moins et d’économiser beaucoup. Une petite essence consomme 4,4 L/100 km en ville+campagne+autoroute si l’on s’y prend bien (et sans se trainer !).

De même, une électrique pourra tenir ses promesses si on apprend à l’utiliser en gardant en tête son fonctionnement différent d’une voiture thermique.

Enfin, spécifiquement pour la Hyundai Ioniq…

Les autonomies annoncées pour la Ioniq se tiennent dans les conditions idéales (pas de chauffage, beau temps, pneus été) et à vitesse légale. Je fais 60 km avec une charge pour 62 annoncés. C’est totalement correct.

Les autonomies affichées sur le tableau de bord semblent, elles, très justes et fiables. C’est une remarque qui revient très souvent chez Kia-Hyundai (Ioniq, Kona, Soul…).

Donc globalement, si la voiture vous indique 20 km, vous tiendrez ces 20 km sur le plat (car c’est sûr que si les 20 derniers km jusqu’à chez vous se font avec une pente à 10 %, les choses sont différentes, bien que l’ordinateur de bord connaît la topographie du terrain et en tient compte si vous utilisez la navigation assistée).

Quoi retenir ?

Si je dois résumer ce que la conduite en EV implique, je dirais :

  • rechargez quand vous pouvez, tous les soirs typiquement : vous ne verez pas le bout de la batterie et vous pourrez faire 1 000 km sans consommer une goutte d’essence.
  • au quotidien roulez en écoconduite ou conduite normal, pas sportive
  • en hiver, les pneus et le chauffage influent fortement (10-20 %) sur l’autonomie.

Ces deux derniers points sont valables également pour les voitures thermiques. Mais vu qu’une thermique fait plutôt 600 à 1000 bornes avec un plein, l’autonomie n’est pas réellement un argument de vente, d’autant plus que les stations services sont plus nombreuses que les stations de charge.

Ça va changer, je l’espère, en attendant faut faire avec.

Fr-OSS sous Windows sans installer quoi que ce soit

Photo d’un clavier.
Il y a quelques jours je postais une note pour dire que c’était la galère pour écrire français sous Windows.

En fait, non, c’est possible et c’est aussi simple qu’installer un petit programme qui va modifier la disposition du clavier et en faire un clavier Fr-OSS (programme fourni par Microsoft, mais qui n’est pas installé par défaut malheureusement).

Sauf qu’installer un programme n’est pas toujours possible, en particulier dans un environnement où l’on ne peut pas installer tous les programmes que l’on souhaite (par exemple au travail).

Roland (un lecteur) me signale l’existence du programme Portable Keyboard Layout.
C’est un vieux truc (ça date de 2009), mais ça marche encore.

Il n’y a pas besoin d’installer quoi que ce soit, juste de pouvoir exécuter (pas besoin non plus des droits admin) un petit .exe qui va mettre une icône dans la zone de notification.

En ligne, j’ai trouvé les dispositions Colemak et Bépo, mais évidemment pas Fr-OSS.

Du coup je l’ai créé et la voici :

  • fr-oss.zip (sha1 : 57af9a18dd92cbc9b4faf2ca8f24e062fa170dbf)

Il suffit de dézipper le fichier, de mettre ça où vous voulez et de lancer l’exécutable pkl.exe qu’il y a dedans (et si besoin ajouter ce .exe à la liste des programmes lancés au démarrage).

C’est tout. L’icône apparaît dans la zone de notification.
Un clic dessus et il se désactive, un nouveau clic dessus et il se réactive.

Pour ma modif, j’ai seulement modifié manuellement le fichier layout.ini et j’ai viré tout le reste. Je n’ai pas fait les images pour aider à afficher la disposition du clavier.

Avec ceci, au moins, vous pouvez taper des Æ, É, À, Ç, «», et ’. Comme sur un clavier Fr-OSS disponible sous Linux, sous le nom « français — alternative ».

La seule différence avec le Fr-OSS sous Linux, ce sont les touches mortes : dans cette version, bien qu’ayant respecté leur position, je l’ai considérablement étendu en reprenant la liste des touches mortes du Bépo (on peut donc taper à peu près n’importe quel diacritique de l’alphabet latin, et il y en a un paquet).


Il subsiste quelques bugs.

Ainsi, si vous activez le verrouillage majuscule (avec CapsLock), les lettres seront en majuscule, mais les lettres sur la ligne numérique (éàçè) resteront en minuscule. Sous le Fr-OSS, en tout cas sous Linux, ces lettres sont en majuscules quand le verrouillage majuscule est activé.
Sous Azerty normal, cela affiche les chiffres (comme avec Shift).

Mon implémentation de Fr-OSS est fait à l’arrache, mais je n’ai pas les compétences pour faire mieux, ni le temps. J’utilise ça seulement au travail. Si vous avez un accès admin à votre ordi, utilisez l’astuce d’Éric Bugnet.

Image d’en-tête de Sergi Kabrera

Achat d’une voiture hybride rechargeable [1] : c’est quoi et pourquoi ?

La Ioniq.
Avant toute chose, vu qu’il faut le dire car sinon on se fait incendier (vive le web en 2020) : non, ce n’est pas un article sponsorisé. Oui je présente un marque, un modèle, mais c’est pas pour ça que la marque m’a payé. Voilà maintenant on peut commencer.

Cet article fait partie d’une série d’articles sur un retour d’expérience de l’achat d’une voiture hybride rechargeable, à savoir la Hyundai Ioniq plug-in.

Chaque article relate un des aspects de mon achat :


TL;DR :

  • une hybride rechargeable (PHEV) c’est une voiture avec lequel on peut aller au travail en mode électrique (pas cher, silencieux, top confort, recharge à la maison) et tout de même partir en vacances à 1 000 km sans s’arrêter ;
  • ça me semble un bon compromis entre l’électrique et l’hybride, peut-être parce qu’il combine les avantages des deux (sans déconner ?) ;

Hybride ? Hybride rechargeable ? Électrique ?

Dans une voiture thermique, c’est du carburant fossile qui alimente le moteur. C’est un système qui a fait ses preuves, mais qui n’est pas sans défauts, en particulier la pollution au CO2 et l’entretien de la mécanique.

Dans une voiture électrique, c’est une batterie qui alimente un moteur électrique. Leur avantage sont la conduite à la fois très douces et très souples, mais ayant également des performances (accélérations, tenue de route) dignes d’une voiture de course, y compris avec les voitures électriques les plus basiques.
L’absence de mécanique (pas de bloc moteur, de boîte de vitesse, distribution…) réduit l’entretien au remplissage du lave-vitre : le freinage étant régénératif la plupart du temps, les plaquettes de frein durent une éternité et il n’y a aucun fluide dont il faut faire les niveaux tous les mois (il reste le liquide de freinage, mais c’est pas à vous d’y toucher).

Seuls problèmes : le réseau de charge (Tesla mis à part) est pourri et les voitures sont encore chères. La question de la pollution globale de la voiture n’est pas un problème mais une solution face au thermique. Je n’en parlerai pas là (c’est déjà fait ici).

Dans une voiture hybride, on a un moteur thermique et un petit moteur électrique. Il y a aussi une batterie, qui ne peut pas être rechargée sur une borne ou à la maison. Vous n’aurez toujours qu’à faire le plein comme une voiture thermique classique.
Cette technologie part du constat que la conduite avec un véhicule thermique est terriblement inefficiente : un moteur thermique est à son maximum d’efficience pour une vitesse de rotation donnée. Si l’on est en sous-régime, comme en sur-régime, on brûle de l’essence de façon inutile. Or, quand on roule, hormis si l’on fait 1 000 km d’autoroute à la même vitesse, on passe son temps à changer de vitesse et donc à faire varier le régime moteur et donc à perdre de l’énergie.

Le but de l’hybride, c’est de compenser très exactement ce point. Le moteur thermique tourne toujours à son régime le plus efficace : si l’on roule trop lentement, plutôt que de tourner en sous-régime, le moteur va rester à son régime normal. Il va donc produire davantage de couple moteur que nécessaire. Cet excédant d’énergie va être placé dans la batterie. Si maintenant on roule trop vite, plutôt que de faire tourner le moteur en sur-régime, le moteur va toujours rester à son régime normal, et c’est le moteur électrique qui va combler le manque d’énergie.

De plus, lors des phases de freinage et de décélération, plutôt que d’user les plaquettes de frein, les roues vont dissiper leur énergie dans le moteur électrique, qui agit alors comme une génératrice et cette énergie va être stockée dans la batterie. Cette énergie permettra d’accélérer juste après : on récupère donc de l’énergie qui serait autrement perdue avec une voiture normale. Généralement, une voiture hybride consomme 15~20 % de carburant en moins qu’une voiture thermique équivalente, juste en jouant sur ces principes d’efficience maximale.

Une voiture hybride rechargeable, cela reste une hybride : il y a donc toujours un moteur essence et un moteur électrique. Cependant, la batterie est beaucoup plus conséquente et le moteur un peu plus puissant (la Hyundai Ioniq existe à la fois en hybride et en hybride rechargeable : la première a un moteur de 45 CV, le second de 60 CV ; la batterie passe elle de 1,5 kWh à 8,9 kWh – là où la version électrique pure de la Ioniq a une batterie de 39 kWh, et les Tesla ont des batteries autour de 50-100 kWh et un moteur de 400~500 CV).

Le principe de l’hybride rechargeable ? Avoir une hybride avec une vraie autonomie et un vrai mode électrique. De 3~4 km électrique sur une hybride à basse vitesse, on passe à 50~60 km et jusqu’à 130 km/h avec une hybride rechargeable. Dans tous les cas, si l’on enfonce l’accélérateur pour grimper une grosse côte, pour rouler vite ou pour accélérer, si le moteur électrique ne suffit pas, le moteur thermique vient l’assister.

L’avantage de l’hybride rechargeable ? C’est que si il n’y a pas de borne de recharge dans le coin (ce qui — hors Tesla encore une fois — sera probablement le cas chez vous, en tout cas en 2020), vous passez sur le moteur thermique en attendant de pouvoir charger où vous pouvez. L’avantage sur le thermique simple, c’est que vous pouvez faire vos trajets quotidiens sans brûler de l’essence et profiter du mode électrique et en rechargeant chez vous, possiblement en heures creuses.

Pourquoi une hybride rechargeable ?

Je m’intéresse pas mal aux voitures électriques : leur simplicité, leur technologie, leur avenir, bref, j’aime. Il y a de bon véhicules électriques sur le marché, pour divers usages. Mais le problème systématique, c’est le réseau de recharge : c’est globalement de la merde :

  • la moitié du temps la borne est inaccessible, car en panne ou occupée par un kéké en diesel ;
  • les bornes sont beaucoup plus chers que la charge chez soi (les récents changements de tarif chez Ionity, le leader en Europe, sont à mourir de rire : à kilométrage égal, ça coûte le double de l’essence pour charger une électrique en charge rapide, et jusqu’à 5 fois plus cher que l’essence pour recharger une hybride rechargeable en charge lente) ;
  • les bornes ne se valent pas toutes : sans même parler de la vitesse de la charge, il y a plusieurs connecteurs différents, selon les marques de voitures, les pays, les années…
  • il y a une pléthore de réseaux de charges différents, avec une carte d'abonnement pour chacune d’elles, sans compter les cartes spécifiques à un département, une région.

Les voitures sont peut-être excellentes, mais à part charger chez soi, c’est soit pas intéressant financièrement, soit un gros casse-tête. Et en ce qui me concerne, je compte bien rouler un peu plus loin que 100 km autour de chez moi.

Si Tesla a un réseau adapté, pratique, fonctionnel, étendu, pas cher et performant (c’est tout ?), ce n’est pas le cas ailleurs. Il est à noter que Tesla a proposé aux autres constructeurs de s’allier à son système, mais ces derniers ont refusés. Tout le bordel précité est donc un choix consenti par les constructeurs qui ont préféré bricoler des trucs dans leur coin (et d’en faire leur gagne pain principal, vu les tarifs).

Bref, n’ayant pas les moyens actuellement de me payer une Tesla (je l’aurais fait sans hésiter, autrement) et ne souhaitant pas non plus galérer dès que je fais plus de 250 km avec une électrique non-Tesla (trajets qu'il m'arrive de faire de temps en temps) et n’ayant pas envie d’avoir une voiture pour aller au travail et une autre pour voyager, j’ai fait le choix d’une hybride rechargeable pour être tranquille.

J’étais parti pour me trouver une hybride, au départ, mais j’ai découvert le principe des hybrides rechargeables en cours de route, et je me suis immédiatement dit que c’est ce que je voulais. D’où ce choix. Ça me semble être le compromis idéal entre une électrique confortable et une thermique pour faire 1000 bornes tranquilles sans payer 60 k€ pour une Tesla.

Avec ça, je peux :

  • aller au travail et revenir sans brûler d’essence (j’habite à 18 km de mon travail)
  • rouler en électrique 80 % du temps que je roule, donc dans un silence royal et très apprécié, et avec une douceur de conduite sans égal ;
  • faire le plein (d’électricité) chez moi pour trois fois moins cher que ce que me coûterait le même plein d’essence (pour info, au jour où j’écris ceci, j’ai roulé ~3 000 km avec avec une moyenne de 1,6 L au 100 : cela représente 1 plein d’essence pour le total).
  • et d’avoir la tranquillité d’esprit de pouvoir aller aux P-B voir la famille à 1 200 km de chez moi sans me faire chier à tomber sur des bornes non-compatibles, trop lentes ou en panne.

Inconvénient mineur :

  • le réseau de recharge est compatible avec ces voitures, mais n’étant pas une électrique « pure », la recharge est lente (7 kW). Vu que les bornes facturent désormais à la minute, cela n’a rien d’intéressant financièrement, bien au contraire.
  • certains supermarchés proposent des recharges pour leur client le temps de faire les courses. C’est top, ça permet de gagner quelques km gratuitement, mais 1) ce n’est pas gratuit (généralement c’est un réseau de charge qui possède/exploite la borne et facture un « droit d’accès à l’acte », qui, même si c’est 0,35 € ou 0,70 € à l’acte, revient plus cher que recharger chez soi ou que l’essence) et 2) je n’ai pas le câble de recharge car il n'est pas fourni avec la voiture. Et je ne parle pas du tracas de traverser 15 fois le supermarché et le parking pour récupérer un code à l'accueil, leur demander l'accès à la borne (et au passage passer pour un extra-terrestre qui roule en électrique auprès du personnel du supermarché da ma cambrousse : « recharger une voiture ? wtf ?! T’es en panne ? ».

Car oui : si le constructeur de la bagnole livre le câble de recharge pour charger à la maison, le câble de recharge sur borne est en option (300 €). Et encore une fois, hormis Tesla, les bornes n’ont pas toujours leur câble et c’est à toi d’apporter le tiens.

Mais bon, hormis les charges gratuites chez Ikea ou Lidl, je ne comptes pas forcément charger en dehors de chez moi. Ce n’est donc pas trop problématique pour moi (ça aurait été différent si j’avais pris la électrique pure).

Et le bonus écologique, prime à la conversion ?

Les hybrides rechargeables sont encore assez chères, il faut donc gagner un certain salaire ou être très économe et mettre de côté pour pouvoir en acquérir une.

Du coup, je ne peux que me demander quels profils peuvent bien s'acheter un véhicule à la fois éligible (électrique / hybride-rechargeable, donc cher) tout en étant assez modeste pour ne pas être exclu du plan (la limite est à 13 k€/an, donc moins que le SMIC pour une personne seule), mais suffisamment riche quand-même pour que la banque accorde un prêt ou pour pouvoir mettre 35 k€ sur la table ?

Dans mon cas, cependant, toutes conditions confondues, je n'ai rien touché du tout en remise (sauf la remise constructeur sur le prix catalogue qui est une remise qui a toujours été là pour tout le monde, donc bon, ça compte pas).

Ni le bonus écologique (réservé aux véhicules totalement électriques ou hydrogène — à la date d’achat en tout cas) ni la prime à la conversion : mon vieux diesel de 2004 qui tombait en miettes et qui fumait des nuages incroyables de fumée ne polluait pas assez était soi-disant trop récent pour bénéficier d’un bonus quelconque.
Ni même la reprise de la Clio par le constructeur car la voiture n’était pas en ma possession depuis les 6 mois exigé par le constructeur (et non-négociable apparemment).

Et... avec ma chance j'ai acheté ma voiture quelques mois avant le plan de relance du secteur automobile annoncé par Macaron après le premier confinement de 2020 et qui aurait fait rentrer les PHEV dans les véhicules éligibles au bonus écologique dès juin 2020.

Il faut croire que mes 8 k€ gagnés en 2019 (et 18 339 € en 2018) font de moi un riche.

À ce sujet, si j’avais bossé moins comme un âne à faire davantage que ce qui était demandé (et me serais contenté de me tourner tout simplement les pouces une fois mon travail fait, comme tout le monde), je n’aurais pas eu ces 455 € de primes (étalées irrégulièrement dans l’année) et je serais rentré dans le barème de 18 k€ pour avoir droit à 2 k€ de bonus deux ans après. Comme quoi, rien branler ça paye vraiment, ne laissez personne dire le contraire :D !

Je ne vais pas m’en plaindre plus que ça, mais ça fait quand-même rire jaune, on va dire.


Dans le prochain article, je parlerai du modèle hybride rechargeable que j’ai choisi : la Hyundai Ioniq Plug-in.


Je m’efforce de parler de « voiture hybride », « voiture hybride rechargeable », « voiture électrique ». Sachez qu’il existe des acronymes pour tout ça : HEV (« hybrid electric vehicle ») pour l’hybride, PHEV (« plug-in hybrid electric vehicle ») pour l’hybride rechargeable et EV (« electric vehicle ») pour une voiture électrique. Si vous les rencontrez dans vos recherches, ça peut aider.

J’en mets un autre, parce qu’on le rencontre sur les forums : ICE, pour « internal combustion engine », désignant le moteur thermique (moteur à combustion interne) sur une hybride ou une hybride rechargeable.

Ainsi que le terme « T2T2 », ou « Type-2-Type-2 », qui désigne tout simplement le câble de recharge pour bornes pour certaines voitures électriques (ce connecteur est une norme européenne désormais). Il y a aussi le « Type-2-prise domestique », qui permet de brancher la voiture à une prise de chez vous.

Tesla peut utilise le T2T2 aussi, mais les superchargeurs utilisent la prise Combo-CCS, qui est une charge rapide en courant continu.