Sortie de Blogotext 3.0

Je viens de mettre en ligne la dernière version majeure de Blogotext. Elle est disponible sur sa page habituelle.

Blogotext 3.0 screenshot
La charte graphique de Blogotext 3 est complètement refondue pour un style Google Material.
C’est le design utilisé par Google dans ses applications Android, mais aussi dans Android lui-même et la plupart de ses sites web.

D’autres captures d’écran de Blogotext 3 sont visibles ici.

Si j’ai choisit ce thème, c’est que je le trouve particulièrement pratique et joli, à la fois sur un mobile et sur ordinateur.
J’ai respecté au mieux les recommandations de Google pour ce thème, tout en l’adaptant pour convenir à Blogotext (tous les cas n’étant pas étudiés dans les recommandations).

Bien que les spécifications du Material Design soient faites par Google, Blogotext ne contacte à aucun moment leurs serveurs et tous les fichiers sont dans l’archive (polices, icônes…).

Ce n’est pas la seule nouveauté, bien-sûr : j’ai corrigé un grand nombre de bogues, un peu partout et j’ai refondu partiellement la gestion des fichiers & images ainsi que le lecteur RSS.

Concernant la compatibilité CSS, Blogotext 3 est compatible avec Firefox, Chrome, Opera 15+, Vivaldi. Microsoft Edge / IE11 sont compatibles hormis le glisser-déposer des fichiers. Les versions mobiles de Chrome, Opera et Firefox fonctionnent également sans soucis avec un thème entièrement responsive.
Au niveau du serveur, il faut toujours PHP 5.3 minimum ainsi que quelques bibliothèques particulières (listées ici).

Les anciens thèmes pour Blogotext devraient fonctionner sans problèmes. Consultez tout de même la note de version si vous mettez à jour depuis une version 2.x.

Pourquoi mettre le JavaScript à la fin et le CSS au début ?

Dans la création de pages web, on lit souvent qu’il faut mettre les fichiers CSS dans head, au début du document HTML et qu’il faut mettre le JavaScript à la fin. Bien rarement par contre il est dit pourquoi.

disposition en 3D des éléments d’une page web
Schématisation en 3D des éléments d’une page web.


Lors du processus d’affichage d’une page web, la première phase consiste au téléchargement de la page web : le document HTML ainsi que les images, mais aussi les feuilles CSS de styles et les scripts JS liés.

Le contenu HTML, c’est ce qu’on voit : le texte, les images, les champs de recherche, etc.
Les styles CSS, c’est comment le HTML sera vu : disposition, couleurs polices et taille du texte, couleur du fond de la page.

Le CSS et le HTML sont donc nécessaires à l’affichage de la page web et donc au visiteur qui souhaite lire votre site.
Les scripts JS, en revanche, ce sont des instructions destinées au navigateur, pas à l’internaute. Le navigateur les traite en tâche de fond et l’utilisateur de voit pas de différence s’ils sont là où pas (normalement).

Le problème, c’est la capacité du JS de modifier le HTML et le CSS. Du coup, le navigateur qui reçoit une page HTML+CSS n’aura en réalité la totalité de la page web qu’une fois qu’il aura terminé d’exécuter les scripts JS. Avant cela, il ne peut (presque) rien faire : il va bien commencer à afficher les différents éléments de la page (menu, titres, liens…) mais si le JS supprime le menu entre temps, il devra tout recommencer.

La solution du navigateur pour le problème du JS ?

Commencer d’effectuer le rendu (l’affichage) de la page et mettre ce rendu en pause quand il détecte un script JS : à ce moment là, il doit télécharger tout le script JS et l’exécuter entièrement (ce qui a des chances de modifier le HTML et le CSS, souvenez-vous) avant de reprendre de rendu (et au besoin le recommencer, si le JS a beaucoup modifié le HTML ou le CSS).
Le fait pour le navigateur d’avoir à se mettre en pause lorsqu’il rencontre un script, nous fait dire que le JS est bloquant.

Le CSS, le HTML et même les images sont non-bloquant : le navigateur peut continuer à décoder la page web même quand il est encore en train de télécharger du CSS, par exemple. Il peut donc télécharger du CSS en parallèle avec le HTML. Une fois qu’il a tout le CSS, il commence le rendu tel qu’il est décrit par le CSS. Le décodage du HTML, lui, se poursuit durant tout ce temps.

Un document HTML simple, sans CSS ni JS, s’affiche quand même : c’est le rendu par défaut d’une page web : le fond est blanc, le texte est noir et tous les éléments sont à la suite les uns des autres. Bref, c’est moche, mais ça reste lisible.

mon site sans CSS
Mon site tel qu’il s’affiche sans les styles CSS.


Le navigateur, quand il reçoit le document HTML, commence par effectuer le rendu par défaut. Lorsqu’il reçoit le CSS, ce rendu par défaut continu (de façon à ce que la page soit lisible — même si c’est moche). Le rendu par défaut est stoppé quand tout le CSS est arrivé : à ce moment là, c’est le rendu tel qu’il est décrit dans le CSS qui est appliqué : les couleurs, les fonds, les bordures, les ombres… tout ça est alors affiché. Le traitement du CSS ne bloque pas le téléchargement du reste du contenu de la page.


Pour l’instant je n’ai pas vraiment répondu à la question « pourquoi mettre le JS à la fin et le CSS au début ? », mais j’y viens.

On sait que l’affichage des données (texte, images…) dans la page web commence dès que le HTML est en train d’être téléchargé : ceci permet à l’internaute d’accéder à l’information contenue dans la page le plus rapidement possible, même si le CSS et le JS ne sont pas encore arrivés. Une fois que tout le CSS est obtenu, l’information est alors restructurée, organisée sur la page et coloriée.
Lorsque le navigateur reçoit un script JS, l’affichage est mis en pause : le JS doit finir de s’exécuter avant que l’affichage puisse continuer.

L’intérêt de placer le CSS en haut et le JS en bas se trouve à ce niveau.

Si on met le CSS en haut, c’est pour que l’affichage « colorié » se fasse le plus vite possible : pour que la page web soit « jolie » et « organisée » tout de suite, avant que l’utilisateur ne puisse se trouver face à une page web dans son rendu par défaut. Cela tombe d’ailleurs bien : le téléchargement du CSS n’est pas bloquant : l’information dans la page web continue d’arriver pendant ce temps : l’affichage de la page web n’est pas ralentie par le CSS. C’est juste mieux de l’avoir avant, pour que l’affichage se fasse directement comme la page doit être, sans à avoir un rendu par défaut entre-temps.

Parallèlement si on met le JS en bas du document, toute l’information contenue dans la page web sera déjà affichée (car déjà téléchargée et déjà rendue à l’écran). Au moment où le navigateur rencontre le JS, l’écran ne sera pas tout vide ni tout blanc : l’internaute pourra commencer à lire la page web pendant que le navigateur traite le script JS et effectue les derniers changements.

Si on mettait le JS tout en haut, la page n’aurait encore aucune donnée que l’affichage et le téléchargement seraient déjà bloqués : l’internaute n’aurait alors qu’une simple page blanche et rien à lire. Si le script est gros, cela peur prendre plusieurs secondes. Si ça ne semble pas long dit comme ça, croyez-moi, ça l’est : si toutes les pages web mettaient 2 secondes de plus pour s’afficher, vous le verriez très rapidement. Placer le JS en haut n’est donc pas génial, car il oblige le navigateur à tout mettre en pause et l’internaute à attendre devant une page vide.
Mettre le CSS en bas de la page n’est pas avantageux non plus : le CSS n’est pas bloquant. Il peut être téléchargé en parallèle avec le reste. Si on le met en bas de la page, il sera téléchargé en dernier et tout seul, donc sans tirer profit de la possibilité de télécharger deux choses en même temps. De plus, tout le document HTML sera déjà là mais affiché avec le rendu par défaut du navigateur, donc tout moche. Si l’internaute a déjà commencé à lire, il verrait alors la page se modifier sous ses yeux à l’instant même où tout le CSS aura fini de télécharger et que le rendu se fasse.

Il convient donc naturellement de mettre le CSS le plus tôt possible dans la page (dans le head) pour tirer profit du téléchargement en parallèle du CSS avec d’autres ressources et pour que le rendu se fasse directement de façon voulue ; et il faut placer le JS en bas du document pour que quand le navigateur le trouve, tout le reste de la page soit déjà affiché à l’écran et que l’internaute puisse commencer à lire votre page pendant le traitement du script JS par le navigateur en tâche de fond.


Quelques liens :


On va l’avoir, notre redevance TV sur les téléphones

photo d’un téléviseur posé sur le trottoir C’est de nouveau en débat : faut-il étendre la redevance TV aux ordinateurs/consoles/tablettes/smartphones ?

Je ne comprends toujours pas en quoi utiliser mon téléphone ou mon ordinateur justifie que je donne de l’argent pour France 3. Ça n’a aucun sens.
Est-ce qu’un éleveur d’oies touche de l’argent grâce à un impôt sur les perceuses ? Non. Alors qu’ils aillent se faire foutre avec leur « extension de la redevance ». Internet n’est pas la télé.

S’ils veulent faire payer ça, soit ils mettent un abonnement équivalent à la redevance sur un sorte de Netflix pour les chaînes publique (la télé en somme, où payent ceux qui veulent, donc comme maintenant), soit qu’ils incluent un impôt pour tous les foyers, sans dire que c’est spécifiquement pour l’audiovisuel public.
Après tout, y a pas non plus de « redevance éclairage public » ou « redevance espaces verts », pour lesquelles ont serait exonéré si on ne sortait jamais la nuit où si on n’entraient jamais dans un parc.

Mais mettre un impôt sur les ordis pour financer la télé, c’est juste débile.

image de Bonnaf


[CSS] Quelques possibilités apportées par le modèle « flexbox »

Ça fait des années que je fais du CSS. Je suis un grand adepte du full-CSS et de l’usage des dernières technologies CSS. L’une d’elle c’est le modèle d’affichage de boîtes flexibles : FlexBox.
Ce concept en CSS existe depuis plusieurs années mais les spécifications n’ont pas cessées de changer (il y a au moins 3 spécifications différentes… par navigateur) mais il peut actuellement être considéré comme stable : les navigateurs à jour actuellement implémentent tous la même spécification.

Si je vous en parle en particulier c’est que plus je l’utilise, plus elle me facilite la vie.

Vous désirez centrer un élément ? L’étirer ? Changer l’ordre de plusieurs éléments ? Orienter des menus ? Faire des colonnes égales ? Le tout sans vous faire casser la tête ?
FlexBox est fait pour ça, et c’est relativement simple.

Flexbox fonctionne un peu sur le même principe que le duo ul/li ou le trio table/table-row/table-cell, à savoir une relation bloc-parent/blocs-enfants : il y a ainsi un parent en « display: flex » et c’est avec les blocs enfants qu’on bricole. Si vous avez compris tout ça, vous avez compris 80% de flexbox.

Ici je vous propose quelques exemples de ce que permet FlexBox.
En revanche, cet article n’est pas un tuto qui vous apprend tout ce qu’il faut savoir. Il s’agit plus d’un mémo illustré de code et de démos pour accomplir de choses précises qu’on avait l’habitude de faire autrement. Pour des tutos ou cours complets, j’ai mis quelques liens en bas de l’article.


Centrer

Centrer un élément horizontalement en simple CSS est très simple. Centrer verticalement relève d’avantage du casse-tête : il faut jongler avec line-height, position, display, margin et parfois du JavaScript
Avec flex, c’est plus simple :

En prenant le premier code HTML ci-dessus, pour centrer un bloc dans l’autre sur les deux axes :

#parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

#enfant {
}



Ici :
  • justify-content permet de placer les éléments sur l’axe principal (horizontal, par défaut) : soit au début, soit espacés, soit à la fin, soit centré comme ici.
  • align-items permet de placer les éléments sur l’axe secondaire (vertical, par défaut) de la même façon que justify-content.

Bien-sûr, les éléments sont centrés même si on ajoute des marges, des bordures ou des tailles en %.
Par contre, si vous voulez centrer une image ou une vidéo, ces dernières ayant une dimension et une proportion propre (contrairement à du texte), je conseille cette méthode (flexbox ne sera pas adapté, car une image n’est pas flexible si elle doit conserver ses proportions).


Colonnes de même hauteur

Un autre problème ancestral en CSS, c’est celui des colonnes de même hauteur. Avant il fallait des images ou des tableaux (et si utiliser les tableaux était un crime, « display: table-cell; » reste un délit).

Ici, le code est simple à comprendre également : on va utiliser un #parent et deux .enfants.
Sur les enfants, le premier est de taille fixe et le second prend tout le reste de l’espace disponible horizontalement.
Enfin, on dit que les enfants doivent occuper toute la place sur l’axe vertical.

#parent {
	display: flex;
	align-items: stretch;
}

.enfant:first-child {
	flex: 0 0 200px;
}

.enfant:last-child {
	flex: 1 1 auto;
}



  • Le align-items:stretch sur le parent signifie que les éléments sont étirés sur l’axe vertical, donc les deux seront de la taille de l’élément le plus grand (le principe des colonnes de même hauteur).
  • flex: 0 0 200px sur le premier enfant : il y a 3 valeurs pour flex. Les deux premières sont pour la flexibilité : 0 pour la flexibilité en rétrécissement et 0 pour la flexibilité en agrandissement et une largeur initiale de 200px. Pas de flexibilité signifie donc que la colonne est de largeur fixe.
  • flex: 1 1 auto du second (et dernier) enfant : il est donc entièrement flexible (en rétrécissement comme en agrandissement) et il n’a pas de largeur précise.

Vous pouvez ainsi faire plus de 2 colonnes aussi : une centrale large avec deux petites sur chaque côté, comme dans cet exemple.

Ayez en tête par contre que si vous utilisez des blocs flexibles, les autres types de positionnement (display, float…) ne marchent plus : c’est l’affichage en mode « flex » qui prend le dessus. Aussi, si vous déclarez une largeur de base avec flex: 1 1 200px par exemple, alors la propriété width ne donnera pas non plus le comportement attendu.

L’avantage de cette méthode sur une colonne flottante, c’est que le bloc flottant pouvait passer au dessus du reste de la page.

Étirer

Flex, vous commencez à le voir, permet non seulement de jouer sur le placement et l’étirement vertical, mais aussi l’étirement horizontal. À l’image de ce que float permet, vous pouvez ici placer un élément sur un côté ou l’autre, mais tout en le conservant dans le flux de la page.

C’est ce qui est utilisé dans mon astuce pour placer les icônes à côté des formulaires : l’icône est de largeur fixe et le champ du formulaire est flexible et peut s’agrandir librement, tout en restant bien à côté de l’icône. Flexbox apporte, en plus des flottants, tous les avantages du centrage et de l’étirement.

C’est ici la propriété flex: 1; appliqué sur le bloc à étirer qui se charge de faire tout ça.
Cette idée peut être utilisée sur les champs de formulaire, donc, mais aussi sur les titres-icônes, les menus et tout ce que vous voulez en fait.


Mélanger

Une des avancées importantes apportée par flexbox, c’est que l’on peut déplacer des blocs au sein de la page sans avoir à toucher au code HTML.
Si le code HTML contient trois éléments enfants dans un ordre précis (A, B, C), on peut les ordonner autrement : A, C, B, ou B, A, C par exemple :

.enfant {
	flex: 1;
}
#enfant-A {
	order: 3;
}
#enfant-B {
	order: 1;
}
#enfant-C {
	order: 2;
}

Ici, les éléments sont tous flexibles et on a modifié leur ordre d’affichage : si dans le code HTML l’ordre est A, B, C, à l’affichage flexbox changera ça en B, C, A :



Bien-sûr, vous pouvez combiner l’ordre des éléments avec toutes les autres fonctionnalités de flexbox.


Orienter

Une autre innovation est la possibilité d’orienter les éléments avec une simple propriété : si on a une collection d’éléments enfant, on peut les placer sur une ligne ou sur une colonne :

Pour mettre en ligne (par défaut) :
#parent {
	flex-direction: row;
}

Et en colonne :
#parent {
	flex-direction: column;
}



Là aussi, il peut être intéressant de mélanger l’orientation avec les autres propriétés de flexbox.

Notez qu’au dessus j’ai parlé d’axe « principal » et « secondaire ». Le flex-direction permet d’inverser les deux axes en fait. Par défaut, l’axe principal est horizontal (les éléments sont placés sur une ligne) et l’axe secondaire est vertical (les éléments occupent une section de la ligne, mais peuvent être en haut, au centre ou en bas de leur sections respectives).


Aérer

Encore un effet attendu de flexbox : pouvoir disperser des éléments sur une ligne, en distribuant l’espace vide entre chaque élément. Ceci est particulièrement pratique pour les menus : avec ce code, inutile de diviser la largeur de l’écran par 5 et donner à chaque élément 1/5 de la largeur (et vous embêter avec les marges et les bordures) : flexbox peut distribuer les éléments sur toute la ligne de façon fluide.

#parent {
	justify-content: space-between;
}

Les éléments aux extrémités restent à chaque bout et les autres éléments sont espacés sur toute la ligne :




Ressources


Pour des choses plus évoluées encore, sachez que vous pouvez faire des blocs flexibles et imbriqués : un élément enfant flexible peut lui-même être en display:flex et avoir des enfants flexibles eux aussi, comme sur cette démo, avec leur propre orientation et effets.

[CSS] Arrêtez d’utiliser float n’importe comment

Je viens de me retrouver sur cet article qui montre comment faire des colonnes avec float et de palier au problème du clear:both sans toucher au HTML. La solution retenue — quoiqu’invalide CSS — est élégante… si on retourne en 2009 !

Car pourquoi utiliser des flottants ?

Utilisez Flexbox plutôt !

Non seulement vous n’aurez pas besoin de hack comme ça, mais en plus vous aurez la possibilité de faire des colonnes de la même hauteur.

Je n’ai rien contre float, mais son but est de faire sortir un élément de la structure de la page et de le faire flotter au dessus. À quoi ça sert d’utiliser float si on lui dit, avec clear, de se remettre dans la page ?
Autant ne pas utiliser float et choisir quelque chose de plus adapté, comme flexbox : c’est largement supporté.

Voyez le résultat ici : demo.
Et pour vous amuser, voilà un Flexbox playground, ainsi qu’un tutoriel en Français.

Je vous ferai aussi un article, bientôt, pour donner des exemples de choses possibles avec Flexbox.

(cet article est le deuxième dans la série « arrêtez d’utiliser les flottants alors qu’il y a mieux »)

Vous êtes ridicules avec vos marques !

are-you-fucking-kidding-me Bon ça y est…

Tout le monde est au courant ? Google change de nom : l’entreprise mère devient « Alphabet ». Le nom Google restera quant à lui uniquement là pour le moteur de recherche, et quelques autres trucs proches (Chrome, Android, Gmail…). Tout les autres activités de l’entreprise sont séparées du nom de « Google » : les labos de recherche (Google X), les voitures autonomes (Google Cars), le Fai (Google fiber)…

Même pas quelques heures que l’annonce fait le tour du monde, et déjà les premiers délires ubuesques arrivent : voilà que BMW s’inquiète : en effet, la marque de voitures a elle aussi une filiale nommée « Alphabet ».

Dites, les gars, et si vous arrêtiez de prendre comme nom de marque des mots du dictionnaire aussi ? Ouais, je parle à vous, là : Alphabet, Orange, Apple, Free, Blackberry, et j’en passe.
Ça serait pas plus simple pour tout le monde d’inventer un mot nouveau pour votre boîte ?

Je vais faire une marque moi aussi : « Bonjour », et demander des royalties à chaque fois qu’on le prononce. Ça vous va ?
Ah merde, « Bonjour » est déjà un truc propriétaire de Pomme (Apple), pour un service de mise à jour d’iTunes. Le mot « Hello » alors ? Ah non, c’est réservé par les biscuits Lu.

Bandes de brigands, sérieux.

Mon top de musique métal

black sails at midnight cover En plus de la musique de jeux vidéos, films ou autres musique « épique » et la K-Pop/J-Pop, j’écoute aussi du métal — du folk métal — et selon certains (coucou Thierry) je serais le seul à écouter aussi bien SNSD que Ensiferum :D.

Pour la musique épique et la K-Pop :

Concernant le métal, j’écoute uniquement du « folk métal » et quelques dérivés ou genres mélodiquement proches (power métal, pirate métal, viking métal…). Tout ce qui est death ou black métal, je n’écoute pas du tout. Pas que je suis contre ou quoi, c’est juste que j’aime pas. C’est pourquoi la liste qui suit ne contient aussi qu’une petite liste de groupes (tous des groupes du nord de l’Europe) mais contrairement à mes deux autres tops de musique, j’écoute beaucoup de chansons de chaque groupe.

Je ne suis pas spécialement fermé à écouter un autre groupe (si vous en avez, faites péter), mais les quelques groupes ici sont ceux qui j’aime beaucoup et je n’écoute qu’eux (il y a certains groupes où je n’ai pas vraiment accroché).

En plus des airs musicaux, j’aime aussi énormément les textes qui racontent des aventures fantastiques avec des trolls, des chevaliers, des vaisseaux de pirate ou des dragons (encore faut-il que les paroles soient dans une langue que je comprenne, ce qui n’est pas systématique quand les groupes sont finlandais ou féroéens).
Une dernière chose que j’aime dans ce style de musique (plus que les autres styles de musique), ce sont les pochettes d’album qui sont de véritables œuvres d’art (voir lien en bas de l’article).

Voici donc mon top :

Alestorm (groupe écossais de pirate métal)

Heavy Metal Pirates, de l’album Leviathan
‎‎Weiber Und Wein, de l’album Leviathan
‎Wolves Of The Sea, de l’album Leviathan
‎1741 (The Battle of Cartagena), de l’album Sunset on the Golden Age
‎Sunset on the Golden Age, de l’album ‎Sunset on the Golden Age
‎Magnetic North, de l’album ‎Sunset on the Golden Age
Flower of Scotland, de l’album Captain Morgan’s Revenge
‎Nancy the Tavern Wench, de l’album Captain Morgan’s Revenge
Captain Morgan's Revenge, de l’album Captain Morgan’s Revenge
‎Chronicles of Vengeance, de l’album Black Sails At Midnight
Pirate Song, de l’album Black Sails At Midnight
To the End of Our Days, de l’album Black Sails At Midnight
Keelhauled, de l’album Black Sails At Midnight
You Are A Pirate, de l’album Back Through Time
I Am A Cider Drinker, de l’album Back Through Time
‎Scraping The Barrel, de l’album Back Through Time
Back Through Time, de l’album Back Through Time


Dragonforce (groupe britannique de power metal)

Where Dargons Rule, de l’album Valley Of The Damned
Starfire, de l’album Valley Of The Damned
Evening Star, de l’album Valley Of The Damned
Black Winter Night, de l’album Valley Of The Damned
Inside the Winter Storm, de l’album Ultra Beatdown
The Fire Still Burns, de l’album Ultra Beatdown
Heart Of The Storm, de l’album The Power Within
Seasons, de l’album The Power Within
Cry Thunder, de l’album The Power Within
Last Man Stands, de l’album The Power Within
Dawn Over a New World, de l’album Sonic Firestorm
Cry Of The Brave, de l’album Sonic Firestorm
Soldiers Of The Wasteland, de l’album Sonic Firestorm
You're Not Alone, de l’album Maximum Overload
Ring of Fire, de l’album Maximum Overload
Chemical Interference, de l’album Maximum Overload
Fight To Be Free, de l’album Maximum Overload
Through The Fire And Flames, de l’album Inhuman Rampage


Ensiferum (groupe finlandais de viking métal)

‎Tale Of Revenge, de l’album Iron
Deathbringer From The Sky, de l’album Victory Song
Abandoned, de l’album Ensiferum
Pohjola, de l’album Unsung Heroes
Lady In Black, de l’album Victory Song
Raised By The Sword, de l’album Victory Song
Wanderer, de l’album Victory Song
Neito Pohjolan, de l’album One Man Army
Cry For The Earth Bounds, de l’album One Man Army
Heathen Horde, de l’album One Man Army
March of War, de l’album One Man Army
The Longest Journey, de l’album From Afar
Token of Time, de l’album Ensiferum
Finnish Medley, de l’album Dragonheads


Heidevolk (groupe néerlandais de folk metal)

Vulgaris Magistralis, de l’album De Strijdlust is Geboren
Het Bier Zal Weer Vloeien, de l’album De Strijdlust is Geboren
Deemstering, de l’album Uit Oude Grond
Een Nieuw Begin, de l’album Batavia
Wapenbroeders, de l’album Batavia


manala cover Korpiklaani (groupe finlandais de folk métal)

Gods On Fire, de l’album Korven Kunigas
Dolorous, de l’album Manala
Surma, de l’album Ukon Wacka
Vaarinpolkka, de l’album Ukon Wacka
Koivu Ja Tähti, de l’album Ukon Wacka
Tequila, de l’album Ukon Wacka
Päät Pois Tai Hirteen, de l’album Ukon Wacka
Jouni Jouni, de l’album Noita
Ieva's Polka, de l’album Manala
Soil of the Corpse, de l’album Manala
Honor, de l’album Manala
Ruumiinmultaa, de l’album Manala
Rauta, de l’album Manala
Suden Joiku, de l’album Korven Kunigas
Metsämies, de l’album Korven Kunigas
Vesaisen Sota, de l’album Karkelo
Koennin Kuokkamies, de l’album Karkelo
Juodaan Viinaa, de l’album Karkelo
Vodka, de l’album Karkelo


Týr (groupe féroïen de folk métal)

The Lay Of Our Love, de l’album Valkyria
The Lay of Thrym, de l’album The Lay of Thrym
Turið Torkilsdóttir, de l’album By the Light of the Northern Star
Dreams, de l’album Eric The Red
Northern Gate, de l’album By the Light of the Northern Star
The Wild Rover, de l’album Eric The Red
Evening Star, de l’album The Lay of Thrym
Valkyrja, de l’album Land
By the Light of the Northern Star, de l’album By the Light of the Northern Star
Into the Storm, de l’album By the Light of the Northern Star


Ultra Vomit (groupe français de heavy metal parodique)
(La mention de ce groupe ici est d’avantage anecdotique, mais j’aime bien quand même)

ÉDIT : j’ai oublié la seule chanson d’Avenged Sevenfold (groupe américain de heavy métal) que j’écoute. C’est sûrement la seule chanson calme du groupe, mais j’aime beaucoup justement :
Dear God


Pour les pochettes d’album, j’ai une petite collection ici : http://lehollandaisvolant.net/tout/folio/?fol=metal+covers

Flash, tu fais vraiment chier

Ça fait 3 semaines que je me bats avec un problème de merde sous Firefox. En JS, je fais du Drag-n-drop, pour l’upload d’images.

Mon script fait en sorte que quand je glisse un fichier sur le navigateur, un bloc prend toute la largeur de la page pour réceptionner les fichiers. Jusque là, ça va : ça marche, tout va bien. En fait, tout le drag-n-drop fonctionne parfaitement.

Sauf parfois.
Parfois j’ai un comportement étrange. Parfois « ça veut pas ».

En temps normal, quand je glisse les fichiers sur la page web, j’ai l’icône de la petite main avec la flèche :
arrow hand cursor
Mais parfois, en plein milieu de la page, le pointeur change : c’est juste la petite main. Sans la flèche : signifiant que que le "drop" est impossible :
hand cursor
Il semble ainsi y avoir un sorte de « zone morte » en plein milieu de la page où mon drag-n-drop ne marche pas.
La zone morte est invisible. Je ne peux la mettre en évidence qu’en déplaçant le curseur lors du glissement des fichiers et trouver environ les limites de la « zone morte ».

J’ai utilisé des tas de garde-fou en JS pour savoir ce qui se passe : rien de concluant.
JS voit bien que le glissement (drag) s’arrête quelque part sur la page (et agit en conséquences), mais il ne sait pas me dire ce qui se passe réellement : ni afficher l’ID d’un éventuel bloc « mort » sur l’écran, ni mettre ce bloc en évidence…

En fait j’ai fini par trouver d’où ça vient.

Vous voulez savoir ? Vraiment ?

C’est ce connard de Flash de merde à con de mes deux.

La « zone morte » correspond exactement à l’emplacement d’un lecteur Flash… sur un autre putain d’onglet !
Oui, Flash obstrue une zone du navigateur sur TOUS les onglets, même s’il est utilisé dans un seul onglet.

Quand je ferme l’onglet avec flash (Youtube en l’occurrence), je n’ai pas de problèmes.
Je ne sais pas si le coupable est Flash ou Firefox, mais là, Flash c’est terminé. Raz le bol de ces conneries récurrentes avec ce plugin de merde.


Bref.
Il y a une chose à retenir en programmation. Des bugs, vous aurez forcément : aucun script ne fonctionne du premier coup. Parfois les bugs seront plus coriaces que d’autres, et souvent, très souvent le problème vient de là où on ne l’attends absolument pas.
Ceci en est un exemple : l’événement de glissement de fichiers sur une page web, dans Firefox, ne fonctionne pas si Flash fonctionne, même sur un autre onglet.

[CSS] Astuce simple pour des icônes nettes sur les mobile

(oui encore une astuce CSS, je suis en plein dedans, c’est pour ça :p)

Quand vous faites un bouton avec une icône, dans mon cas de 48px de côté, il s’affichera très bien sur l’ordi :
icônes sur l’ordinateur
Sur mobile en revanche, l’image sera toute pixelisée et moche :
icônes sur le téléphone (ne vous fiez pas à la taille des captures d’écran : la première est zoomée 3 fois et la seconde seulement 2 fois ; sans interpolation dans les deux pas. C’est la pixellisation qu’il faut regarder).

Pourquoi ? Parce qu’un écran de mobile en full-HD mesure 12 cm, alors qu’un écran full-HD d’ordi mesure 40 cm : la densité de pixels (pixel-ratio) est plus grande sur mobile.

Pour contrer ça, les navigateurs mobiles doublent les pixels : un pixel sur l’ordinateur correspond à 4 pixels sur mobile afin de respecter les tailles d’affichage.
Si cela concerne une image, l’image de 48px est étirée sur le double : 96px, et on se retrouve avec un effet de pixellisation désagréable.

CSS et JS offrent des solutions pour détecter le pixel-ratio et fournir une image plus détaillée pour les écrans les plus denses.
On trouve des articles sur ça avec du code et des exemples :

Mais je trouve ça vachement lourd. Il y a en effet beaucoup plus simple : utiliser une image avec une grande résolution et la rétrécir sur les écrans les moins denses.
Le résultat visuel est sans appel :

icônes améliorées sur mobile et ordinateur
Dans les deux cas, j’ai fait deux boutons : celui du haut avec une image de 48px affichée dans un bouton de 48px, et celui du bas est une image de 96px affichée dans un bouton de 48px et dont la taille est rapportée à 48px.

À gauche c’est sur mon ordinateur : on ne voit pas de différences entre les deux. À droite, c’est sur mobile : la différence est très visible : une icône de 96px réduite à 48px est bien plus nette !

Le code CSS est très simple et elle tient en un seul mot : background-size.


#bouton-48 {
    width: 48px;
    height: 48px;
    background: url(icon96.png) no-repeat 
    background-position: 0px 0px;
    background-size: 48px 48px;
}

L’image mesure bien 96 pixels de côté, mais elle est réduite à la taille de l’icône, donc ici d’un facteur 2.

La démonstration en temps réel est disponible sur cette page : affichez la sur l’ordi, puis sur mobile et vous verrez.

Avec la méthode des portes coulissantes, si vous savez disons deux icônes de 96px côté à côte, votre image fait 192px de large sur 96px de haut. Vous devrez donc utiliser ceci :
    background-size: 96px 48px;

Les valeurs dans le background-position ne sont pas à modifier.

Notez qu’il y a un seul inconvénient à ceci : l’image de fond est plus grande, donc aussi plus lourde.
Je pense que ça vaut le coup quand même : si la gestion du cache est correcte, l’image restera dans le cache du navigateur.
De plus, si vous utilisez des images multi-icônes avec la méthode des portes coulissantes, le poids de l’image ne sera pas excessif non plus.

Enfin, vous pouvez utiliser SVG, mais je pense que ça ne vaut pas le coup en terme de poids des images si petites.

Encore quelques tweaks pour Firefox

firefox logo Pour les utilisateurs de Firefox, voici quelques idées qui peuvent le rendre plus pratiques. Il y en a un peu pour tous les goûts.

Les extensions

Mes extensions du moment sont, pour la vie privée et la sécurité :
  • Web of trust : pour un web plus sûr et vous avertir des sites dangereux ;
  • µBlock Origin : pour un web sans pub, plus rapide et plus sûr. (Tous les autres sont passés du côté obscure et sans un bloqueur, la navigation est juste impossible) ;
  • Click to Play per-element : permet de rendre les éléments Flash silencieuses jusqu’à ce qu’on les active par un clic. Ça empêche certaines pub, les onglets bruyants et ça allège la navigation de façon générale.

Pour les fonctionnalités supplémentaires :
  • Flash Video Downloader : télécharger des vidéos flash (Youtube). L’un des rares qui fonctionne assez bien.
  • Textarea Cache : qui enregistre ce qu’on tape dans les formulaires pour éviter de perdre ce qu’on tape en cas de session expirée. Il est beaucoup plus léger que Lazarus car son interface est plus sobre et surtout parce qu’il peut supprimer les vieilles données à chaque session ;
  • Greasemonkey : pour modifier tout et n’importe quoi dans les sites web (voir plus bas pour quelques uns de mes scripts).
  • Stylish : le Greasemonkey du CSS. On pourrait s’en passer et n’utiliser que Greasemonkey, mais ce module est bien plus rapide. Si vous utilisez Twitter, vous pouvez essayer mon tweak-twitter.

Pour l’interface :
  • Vertical Toolbar : pour avoir la barre de favoris sur le côté et gagner de la place en hauteur, ma précédente astuce ne marche plus depuis un moment ;
  • Tab Wheel Scroll : pour passer d’un onglet à un autre avec la molette de la souris (comme dans Chrome) ;
  • GNotifier : si vous êtes sous Linux, permet à Firefox d’utiliser le système de notification du système comme le joli Notify OSD d’Ubuntu, par exemple pour les téléchargement qui se terminent.

Dans About:config


  • ui.SpellCheckerUnderlineStyle : mettez-le à 3 pour que les mots mal orthographiés soient soulignés en rouge d’un trait plutôt qu’une vague. La lisibilité n’en est que meilleure ;
  • accessibility.tabfocus : mettez-le là aussi à 3 (au lieu de 7) pour que seuls les champs de saisie soient concernés par la touche de tabulation. Le « 7 » permet d’activer les liens en plus des champs de saisie ;
  • security.dialog_enable_delay : supprime le délaie de trois secondes lors de l’installation d’un module ou d’un téléchargement ;
  • browser.urlbar.trimURLs : passez-le à false avec un double clic pour que Firefox cesse de masquer des parties de l’URL ;
  • media.peerconnection.enabled : mettez à false pour désactiver WebRTC et du même coup la faille qui montre votre vraie IP même derrière un proxy (source).
  • layout.css.filters.enabled : activez ça pour avoir accès aux Filtres CSS3. Ce n’est pas activé par défaut, et ça permet d’utiliser cet outil.
  • places.history.expiration.max_pages : mettez un nombre entier ici pour limiter le nombre de pages dans l’historique de Firefox. Perso j’ai mis 4000. La clé places.history.expiration.transient_current_max_pages doit également être changée (mais elle est liée à la précédente).
  • browser.pocket.enabled : mettez à false pour désactiver Pocket dans Firefox 38+.
  • j’active tout ce qui est sur cette page pour profiter du HTML5 en fullHD sur Youtube (attention : ça active les DRM-html5 et les codecs proprio).
  • xpinstall.signatures.required : à mettre à false pour autoriser l’installation de modules complémentaires non signés.
  • network.http.speculative-parallel-limit : à mettre à 0 pour que Firefox ne fasse pas des requêtes simplement lorsqu’on passe la souris au dessus d’un lien.


Des moteurs de recherche personnalisés


C’est sûrement la truc le plus pratique disponible dans tous les navigateurs. Ce sont les « !bang » directement dans le champ de l’URL (sans passer par DDG ou Google). N’importe quel champ de recherche peut être lié à un raccourcis « !bang ».

Personnellement j’ai ainsi Wikipédia (w), Youtube (y), Google (g), Google Image (i), Google Image recherche par URL (ii), Flickr Recherche d’images en CC (fcc)…

Il suffit de faire un clic droit dans un champ de recherche et faire « ajouter un mot clé pour cette recherche ». Ajoutez ainsi un mot clé en face du champ « mot clé », par exemple « w » pour le champ de recherche de Wikipédia et il vous suffira ensuite de taper « w le hollandais volant » pour afficher la page Wikipédia sur le Hollandais Volant.


Sur l’interface


Pour l’interface, j’ai déjà la barre personnelle affichée verticalement sur le côté, mais j’ai aussi supprimé le champ de recherche (la barre d’URL remplissant cette fonction).
Mes icônes d’extensions sont aussi sur la barre des personnel.

Avec l’extension ClassicThemeRestorer je peux modifier beaucoup plus de choses dans Firefox. Je remet ainsi l’icône de rafraîchissement de la page à gauche de la barre d’adresse.

Scripts GreaseMonkey


GreaseMonkey permet de faire des scripts pour modifier des pages à la volée.
J’ai ainsi quelques scripts pour supprimer systématiquement les paramètres de tracking « UTM_* » dans les URL, ou pour réactiver les suggestions et le redimensionnement des champs de saisie.

J’ai aussi un script pour Youtube, me permettant d’avoir des URL Youtube propres (sans les « featured » ou « source »), ce qui est pratique pour les partager, voir là.

Pour Wikipédia, je lis principalement les pages en Français et en Anglais. Voici un script qui va mettre en rouge les liens sur la gauche de la page (celle pour voir un article dans les autres langues). Ça permet de gagner du temps quand on cherche à trouve le lien « English » dans la liste des 200 langues disponibles.


UserChrome.css


C’est le fichier dans le dossier ~/.mozilla/firefox/<le dossier du profile>/chrome/userChrome.css.

Ce fichier CSS permet de modifier l’interface de Firefox, en CSS. À une époque je l’utilisais énormément, mais avec les changements tout le temps depuis la version 3.5, je n’ai jamais tout mis à jour.
Le code suivant fonctionne cependant toujours très bien et il permet de diminuer la largeur des onglets et des onglets quand ils sont épinglés. Plus de place de gagné permet d’épingler plus d’onglets :

.tabbrowser-tab[fadein]:not([pinned]) {
	min-width: 20px !important;
	max-width: 180px !important;
}

.tabbrowser-tab[pinned] {
	width: 24px!important;
	min-width: 20px !important;
	max-width: 24px !important;
}

Et vu que j’utilise l’add-on Vertical Bookmarks, avec la barre de favoris sur le côté droit de l’écran, je réduis là aussi la taille des favoris à leurs favicon :

#personal-bookmarks {
	width: 24px;
}

Quelques raccourcis clavier utiles


Les raccourcis clavier que j’utilise le plus souvent sont :

  • CtrlShiftI : ouvre les options de développement ;
  • CtrlShiftM : toujours pour le dév, ouvre l’outil de redimensionnement des pages ;
  • CtrlL : place le curseur dans la barre d’adresse ;
  • CtrlT : ouvre un nouvel onglet ;
  • CtrlW : ferme l’onglet en cours ;
  • Tab : permet de passer au champ suivant dans un formulaire ;
  • CtrlTab : permet de passer d’un onglet à l’autre (ajoutez Shift à la combinaison pour aller dans l’autre sens)