#19963

[astuce] Firefox et le about:newtab en sombre

Dans firefox, le thème par défaut est celui qui s’adapte le mieux au thème GTK du système (sous Linux Mint Mate).

Le thème sombre du système se répercute bien sur les onglets et le chrome, mais pas la page d’un onglet vierge, qui est alors clair.
Je pourrais utiliser le thème sombre de Firefox, mais comme j’ai dit, ce dernier n’est pas intégré correctement avec le thème GTK.

Ici, une astuce qui prend le CSS du nouvel onglet du thème Firefox sombre pour l’utiliser dans le thème Firefox par défaut.

Dans le dossier .profile de Firefox, allez dans le dossier chrome, et faites-y un fichier userContent.css.

Copiez-y ceci :

@-moz-document url(about:newtab) {
	body {
		--newtab-background-color: rgba(42, 42, 46, 1)!important;
		--newtab-text-primary-color: rgba(249, 249, 250, 1)!important;
		--newtab-border-primary-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-border-secondary-color: rgba(249, 249, 250, 0.1)!important;
		--newtab-button-primary-color: #0060DF!important;
		--newtab-button-secondary-color: #38383D!important;
		--newtab-element-active-color: rgba(249, 249, 250, 0.2)!important;
		--newtab-element-hover-color: rgba(249, 249, 250, 0.1)!important;
		--newtab-icon-primary-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4)!important;
		--newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4)!important;
		--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2)!important;
		--newtab-inner-box-shadow-color-nte: rgba(21, 20, 26, 0.5)!important;
		--newtab-tile-shadow-secondary: rgba(21, 20, 26, 0.75)!important;
		--newtab-link-primary-color: #45A1FF!important;
		--newtab-link-secondary-color: #50BCB6!important;
		--newtab-text-conditional-color: #F9F9FA!important;
		--newtab-text-secondary-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-textbox-background-color: #38383D!important;
		--newtab-textbox-border: rgba(249, 249, 250, 0.2)!important;
		--newtab-textbox-focus-color: #45A1FF!important;
		--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3)!important;
		--newtab-background-button-color: rgba(80, 80, 80, 0.5)!important;
		--newtab-background-button-text-color: #CDCDD4!important;
		--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5)!important;
		--newtab-background-button-active-color: rgba(173, 173, 173, 0.5)!important;
		--newtab-feed-button-background: #38383D!important;
		--newtab-feed-button-text: #F9F9FA!important;
		--newtab-feed-button-background-faded: rgba(56, 56, 61, 0.6)!important;
		--newtab-feed-button-text-faded: rgba(249, 249, 250, 0)!important;
		--newtab-feed-button-spinner: #D7D7DB!important;
		--newtab-contextmenu-background-color: #4A4A4F!important;
		--newtab-contextmenu-button-color: #2A2A2E!important;
		--newtab-modal-color: #2A2A2E!important;
		--newtab-overlay-color: rgba(12, 12, 13, 0.8)!important;
		--newtab-section-header-text-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-section-active-contextmenu-color: #FFF!important;
		--newtab-search-border-color: rgba(249, 249, 250, 0.2)!important;
		--newtab-search-dropdown-color: #38383D!important;
		--newtab-search-dropdown-header-color: #4A4A4F!important;
		--newtab-search-header-background-color: rgba(42, 42, 46, 0.95)!important;
		--newtab-search-icon-color: rgba(249, 249, 250, 0.6)!important;
		--newtab-search-wordmark-color: #FFF!important;
		--newtab-topsites-background-color: #38383D!important;
		--newtab-topsites-icon-shadow: none!important;
		--newtab-topsites-label-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1)!important;
		--newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1)!important;
		--newtab-card-active-outline-color: #4A4A4F!important;
		--newtab-card-background-color: #38383D!important;
		--newtab-card-hairline-color: rgba(249, 249, 250, 0.1)!important;
		--newtab-card-placeholder-color: #4A4A4F!important;
		--newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2)!important;
		--newtab-snippets-background-color: #38383D!important;
		--newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1)!important;
		--newtab-background-primary-text-color: #CDCDD4!important;
		--newtab-focus-outline: rgba(80, 145, 241, 0.5)!important;
		--newtab-focus-border: #B5D3FF!important;
		--newtab-focus-border-selected: #B5D3FF!important;
		--newtab-primary-action-background: #4484E2!important;
		--newtab-primary-action-background-off: #6A6A6F!important;
		--newtab-seperator-line-color: #53515F!important;
		--customize-menu-primary-text-color: #E0E0E6!important;
		--customize-menu-check-fill: #E0E0E6!important;
		--customize-menu-background: #38383D!important;
		--customize-menu-secondary-action-background: #515156!important;
		--customize-menu-secondary-action-background-hover: #606065!important;
		--customize-menu-secondary-action-background-active: #6F6F74!important;
		--customize-menu-seperator-line-color: #53515F!important;
		--customize-menu-first-shadow: rgba(21, 20, 26, 0.5)!important;
		--customize-menu-second-shadow: rgba(21, 20, 26, 0.75)!important;
		--customize-menu-primary-action-text: #E0E0E6!important;
		--customize-menu-line-color: #B9B7CC!important;
		--newtab-search-first-shadow: rgba(21, 20, 26, 0.5)!important;
		--newtab-search-second-shadow: rgba(21, 20, 26, 0.75)!important;
		--newtab-search-text-color: #B1B1BD!important;
		--newtab-card-first-shadow: rgba(21, 20, 26, 0.5)!important;
		--newtab-card-second-shadow: rgba(21, 20, 26, 0.75)!important;
		--newtab-wordmark-color: #FFF!important;
	}

}

Enregistrez le fichier.
Fermez l’éditeur.

Maintenant, dans Firefox, allez dans about:config et créez une clé toolkit.legacyUserProfileCustomizations.stylesheets de type boolean et mettez-là à true.

Relancez Firefox.

Voilà.

Maintenant ça ressemble à ça :
https://lehollandaisvolant.net/img/7a/screenshot-firefox.png

Alors qu’avec le thème sombre de Firefox, on avait la barre sous les onglets qui n’étais pas pareil que la barre de titre (aux couleurs du système) et avec le thème par défaut (comme là), la barre des onglets était bonne, mais la page newtab était claire.

D’ailleurs là, le fond de la page newtab n’est pas exactement la même couleur que celle de la barre de titre.

ÉDIT : pour ceux qui se demandent, je suis en train de faire un thème sombre pour mes sites.
Je commence actuellement par mes petits outils en ligne (c’est pas encore en ligne). Après je ferais le blog, puis peut-être CS (le site est déjà relativement sombre).

https://lehollandaisvolant.net/?mode=links&id=20210407183042

#19928

How to Improve CSS Performance | Calibre

Quelques astuces pour les performantes d’une page web lié aux CSS.

En gros : mettez le CSS au début du code (le CSS ne bloque pas le reste du rendu) et le JS à la fin (le JS est bloquant, donc faut pas bloquer le chargement dès le début) ; c’est pas nouveau comme pratique.

Et apprenez comment fonctionne un navigateur : https://www.dailymotion.com/video/xp69td

C’est intéressant et ça vous donnera moult pistes pour faire des pages plus rapides.

https://calibreapp.com/blog/css-performance

#19904

Il réduit les temps de chargement de GTA Online : Rockstar le remercie et prépare un update | Les Joies du Code - Humour de développeurs : gifs, memes, blagues

C’est cool de la part de Rockstar !
J’imagine que Nintendo, Sony ou d’autres studios un peu cons l’aurait attaqué en justice pour avoir décompilé leur binaires…

~

Sinon, d’un point de vu technique, ça semble être le problème similaire à ça :

for (var i = 0 ; i < tableau.length() ; i++) {
  // code ici
}

Pour les non-programmeurs : la boucle for permet d’itérer sur un tableau (qui est un ensemble de N variables à la suite). Chaque variable du tableau est repéré par son indice i.
Avec for, on commence par mettre i à 0 (pour la zéroième case, donc la première en fait). Ensuite, on vérifie que i est plus petit que la taille du tableau : si le tableau fait 10 cases, on doit pas chercher la case n°11 ou 12, mais s’arrêter à 10. Enfin, à chaque tour de la boucle for, on incrémente i : au second tour, on regarde la case 2, puis la case 3, et ainsi de suite.

Le problème ici ? c’est qu’à chaque tour de boucle, il effectue le calcul « i < tableau.length() », c’est à dire qu’il regarde le tableau, calcule la longueur, et voit si l’itérateur i est bien en dessous.

Si vous ne programmez pas, vous ne pouvez pas voir le problème, mais en vrai, calculer la longueur d’un tableau prend du temps. Et ici, ce calcul est fait à chaque bouclage.

La solution ? Calculer la longueur du tableau une fois, et mettre le résultat dans une variable :

var longueur = tableau.length();
for (var i = 0 ; i < longueur ; i++) {
  // code ici
}

Ou mieux, en JS comme en PHP, on peut faire ça, pour garder ça sur une ligne :

for (var i = 0, longueur = tableau.length() ; i < longueur ; i++) {
  // code ici
}

Notons qu’ici, on rajoute quelques octets de code, on rajoute une variable intermédiaire, mais on gagne énormément en vitesse : la longueur du tableau est calculée une seule fois au début.

En vrai, ceci est une de ces petites astuces à la con qui peut TOUT changer dans un code, et elle est applicable à tous les langages de programmation (à noter qu’on aurait pu utiliser également la boucle while).

Bref, ce genre de détails de code m’a déjà permis de gagner énormément de temps dans mes scripts.

~

Un autre exemple ? En JS, en manipulant le DOM : ajouter un élément HTML dans le DOM prend du temps : il y a l’ajout lui-même, le reflow (calcul de sa position sur l’écran et décallage des éléments déjà à l’écran), le repaint (son affichage effectif sur l’écran), etc.
Si l’on a une boucle for() qui ajoute itérativement plusieurs éléments, ne les ajoutez pas à chaque bouclage !

Faites plutôt un HTMLFragment, auquel vous ajoutez les éléments. Une fois la boucle for() terminée, vous ajoutez le HTMLFragment à la page. Au lieu d’avoir un calcul du reflow/repaint de la page pour chaque élément, on ne l’a qu’une seule fois.

Et ne vous dîtes pas « mais de toute façon je n’ajoute que 5 éléments ». Non : un jour vous vererz, votre boucle sera plus grande, de 1000 à 10000 éléments par exemple. Et là cela prendre un temps de malade et vous ne saurez pas d’où ça vient.

L’optimisation commence très bas et très tôt dans le code source.

~

Dernier exemple : mon blog utilisait autrefois un moteur de blog où chaque article, chaque commentaire était un fichier texte, dans un dossier correspondant au mois en cours. Un peu comme PluXML.
C’était assez lent, mais j’ai réussis à améliorer d’un coup la vitesse. Comment ? En partant du simple constat qu’un commentaire ne pouvait toujours qu’être posté après l’article qu’il commente.

Il était donc inutile de parser les commentaires de janvier-2010 pour un article datant de février-2010. Et vu que la page principale du blog n’affichait toujours que les derniers articles, cette page s’affichait toujours très vite.

Bon, depuis j’ai basculé mon blog sur du SQLite, bien plus rapide et plus adapté : on peut trier immédiatement les commentaires associés à un article. Les bases de données sont optimisés pour ce genre de tri, ce qui n’est pas le cas de PHP.

https://lesjoiesducode.fr/reduit-temps-chargement-jeu-gta-online-rockstar-games-update

#19626

Note : raccourcis menu démarrer Windows

Le menu démarrer Windows 10 permet de faire des recherches sur son ordi et même en ligne. Depuis W7 c’est un outil central.

Sous W10, on peut taper un truc dans le menu démarrer et sélectionner (en haut) où l’on souhaite chercher : applications, documents, en ligne, paramètres…

Sachez qu’il existe un raccourcis pour ça :

Pour chercher "firefox" dans les documents ou leur contenus :

doc: firefox

Pour chercher "firefox" dans les logiciels :

app: firefox

Dans les paramètres :

settings: firefox

Sur le web :

web: firefox

Dans les images :

photos: firefox
images: firefox

Dans la musique :

music: firefox

Dans les vidéos :

videos: firefox

Dans les dossiers :

folders: firefox

Y’en a peut-être d’autres. Petite astuce qui permet de gagner un peu de temps.

Sous Linux Mint, je suis toujours utilisateur de Synapse pour faire ça. On tape, et on utilise les touches ← et → ou "tabulation" pour passer d’une catégorie à une autre.

https://lehollandaisvolant.net/?mode=links&id=20201015092653

#19620

How do I install G'MIC on Gimp 2.10.8 portable? • GIMP Chat

Installer le plugin G'MIC pour Gimp Portable 2.10 sous Windows.

Récupérer Gmic (Zip) dans la bonne version pour la bonne plateforme : https://www.fosshub.com/GMIC.html
Copier le dossier dézippé dans le dossier de GimpPortable :

GIMPPortable\Data\.gimp\plug-ins

S'il n’y a pas de dossier "plug-ins", crééz-le. Attention, c’est bien « plug-ins » avec un tiret, pas « plugins ». Et ça marche.

http://gimpchat.com/viewtopic.php?f=28&t=17288&start=0

#19531

Checklist Linux Mint 20 Ulyana - le hollandais volant

Ça y est, je suis passé à Linux Mint 20 :)

Le plus long était le téléchargement de l’ISO et des programmes.
Ici, ma checklist.

Je suis content : depuis quelques versions, je retire davantage d’éléments de cette liste que je n’en ajoute. C’est parce que le bureau Mate mûrit beaucoup et qu’il y a moins en moins besoin de tweaker dans tous les sens pour faire fonctionner un truc.

Par exemple, pour les touchpad, dans LM18, il fallait modifier les fichier Xorg/Wayland pour avoir un défilement naturel à deux doigts (comme sur Mac OS). Maintenant, c’est graphiquement dans l’outil des options de la souris.

Il est toujours pratique de conserver les anciennes pages avec ces vieilles modifs : c’est pour ça qu’elles n’ont pas disparues : elles sont liées au début de la page :-)

ÉDIT : Oh et je crois que c’est Seb qui avait posé la question il n’y a pas longtemps sur « comment nommer son PC » (ceci était une grande question des geek). En ce qui me concerne, c’est plutôt sur le nom du compte que je joue. Je prends des lunes des planètes du système solaire. Avant c’était Charon. Maintenant j’ai pris Mimas. Pas vraiment de raison : c’est juste court et facile à écrire, et ça sonne bien.

https://lehollandaisvolant.net/linux/checklist/

#19394

The first two statements of your BASH script should be…

Mh… je ne connaissais pas cette astuce.

Juste après le « shebang », mettre ça sur la ligne d’après :

set -euo pipefail
“set -e” which ensures that your script stops on first command failure.
“set -u” which ensures that your script exits on the first unset variable encountered.
“set -o pipefail” which ensures that if any command in a set of piped commands failed, the overall exit status is the status of the failed command.
https://ashishb.net/all/the-first-two-statements-of-your-bash-script-should-be/

#19383

Note : QNAP, Qsync et TLS 1.0

Pour ceux qui administrent un NAS Qnap et utilisent QSync pour la synchronisation du PC…

Si depuis peu vous avez une impossibilité de vous connecter avec Qsync client depuis Windows 7, c’est parce que le Nas n’accepte désormais plus que les certificats TLS 1.2+.

… et Windows 7 n’a pas ça (visiblement) : il est arrêté à 1.0 (en tout cas la lib qu'utilise Qsync sous W7).

Pour continuer, allez dans l’interface admin du Nas, paramètres généraux, puis en face de « compatibilité de la version TLS », changez le 1.2 en 1.0.

Ça résout le problème.

Je viens de passer 2 heures à chercher >_<

(PS : n’utilisez pas W7 si vous pouvez l’éviter. Passez à W10 minimum : hormis que c’est un système aussi sérieux qu’un jouet Vtech version dora l’Exploratrice, c’est assez stable et toujours mieux que W7).

https://lehollandaisvolant.net/?mode=links&id=20200409191819

#19376

Quelques expériences de chimie à faire chez vous - Couleur-Science

C’est un ancien article mais j’ai rajouté quelques trucs.

Et pour ceux qu’aiment pas la chimie, j’ai aussi un récent article pour observer les planètes la nuit : en ce moment, Jupiter, Mars et Saturne sont alignées au sud-est le matin (entre 6h et 7h). Jupiter est nettement visible. Les deux autres un peu moins, mais Mars, au milieu des deux autres, sera rouge.

Pour ceux qui préfèrent la météo, j’ai un article pour apprendre à fabriquer des cloches de Franklin, pour détecter l’approche d’un orage : https://couleur-science.eu/?d=b1832b--detecter-les-orages-avec-les-cloches-de-franklin

Et enfin pour les matheux qui aiment la géométrie et les dessins à la règle et au compas, je vous apprends ici comment réaliser un pentagone (ou pentagramme) régulier, chose bien moins triviale que ça en a l’air : https://couleur-science.eu/?d=e866c5--comment-tracer-un-pentagramme-a-la-regle-et-au-compas

https://couleur-science.eu/?d=085967--quelques-experiences-de-chimie-a-faire-chez-vous

#19270

Best legal advice ever - 9GAG

C’est 9gag, ok, mais leur conseil vaut de l’or.

TL;DW : Aux questions des flics : FERMEZ-LAAAA.

(et leur exemple est parlant aussi)

https://9gag.com/gag/am5nQV2

#19245

CSP Header Inspector and Validator

Dans la même veine que le lien précédent…

Les en-têtes CSP (content security policy : https://developer.mozilla.org/fr/docs/Web/HTTP/CSP ) permettent de spécifier quels contenus peuvent s’afficher/s’éxécuter dans votre machine.

Pour vulgariser à l’extrême (ne faites pas ça), ça permettrait à n’importe qui de poster du JS ou du CSS valide dans vos pages (par exemple dans un commentaire) et ce dernier sera bloqué si les en-têtes interdisent le JS inline, ou le CSS inline.
(faut pas le faire car tous les navigateurs ne supportent pas et il faut partir du principe que le navigateur du visiteur (voire le vôtre) n’a pas forcément ça d’activé).

Si j’ajoute cette en-tête CSP à une page :

default-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-inline'; form-action 'self';

Cela autorisera par liste blanche :
– le contenu peu importe son type (default-src) en provenance de votre domaine ('self') seulement
– les images (img-src) en provenance de votre domaine (self), des liens data-uri (data:)
– les scripts (script-src) en provenance de votre domaine (self), ainsi que les script inline (unsafe-inline)
– les POST de formulaires (form-action) en provenance de votre domaine (self)

Tout le reste sera inutile, bloqué.

Avec ces règles, si vous mettez une image "src=https://example.com", alors l’image ne chargera pas : bloqué par les règles CSP : seule une image sur votre site, et une image avec data-uri peuvent s’afficher.

Dans les outils de dév de Firefox, vous verrez afficher une alerte relative à CSP.

Le lien que je donne ici permet de tester vos règles CSP (copiez-y mon code ci-dessus, pour tester). Il décortique également tout ça pour y voir clair.

Enfin, si vous utilisez Apache, voilà comment on ajoute une entête dans un .htaccess :

# Extra Security Headers
<IfModule mod_headers.c>
	Header set Content-Security-Policy "<regle csp>" 
</IfModule>

Remplacez <regle csp> par votre règle, virez les « <> », mais laissez les quotes.

Comme ça :

# Extra Security Headers
<IfModule mod_headers.c>
	Header set X-Content-Type-Options nosniff
	Header set Content-Security-Policy "default-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-inline'; form-action 'self';"
</IfModule>
https://cspvalidator.org/

#19240

HTTP Forever

Gosh, merci !

If you connect to a WiFi hotspot whilst out and about, sometimes you have to login or accept Terms and Conditions. To do that the 'captive portal' has to intercept one of your requests and inject the login page for the WiFi. This usually results in a big, red warning from your browser which you should never click through! Instead, open a new tab in your browser and come here!

Sur certains portails captifs Wifi, quand on veut afficher une page web alors qu’on n’est pas encore connecté, si ladite page web est en HTTPS, alors le navigateur affiche, à juste titre, une erreur, car le portail captif intercepte la requête.

Je ne sais pas trop comment les portails captifs veulent faire pour continuer de fonctionner, mais cet "hack" fonctionne bien.

Les smartphones affichent généralement directement une page de connexion (l’OS fait un hit sur une page et regarde la redirection, j’imagine), mais sur PC c’est pas toujours le cas.

Pour se connecter, il faut alors utiliser un site en HTTP simple. Ce site là est, et restera toujours, en HTTP.

ÉDIT : il y a aussi http://neverssl.com (via)

http://httpforever.com/

#19172

Plank in Launchpad

Juste pour dire que depuis quelques temps maintenant j’utilise Plank sur mon Linux Mint Mate.

Mate, comme Gnome 2 à l’époque, vient traditionnellement avec deux barres de bureau : celle en haut avec le menu, la date et la barre des tâches, et celle en bas avec la corbeille, la liste des programmes ouverts et les bureaux virtuels.

Planck permet de remplacer la liste des icônes ouvertes, et donc la barre du bas, un peu totalement comme sur Mac OS.

L’avantage de celui-ci par rapport à d’autres c’est qu’il est léger et que son mode de masquage automatique « intelligent » n’est pas totalement con.
Dans ce mode, il ne se masque que si la fenêtre active empiète sur son espace d’affichage. Si on active une autre fenêtre plus petite, il réapparaît. Une fenêtre maximisée prend également la totalité de l’écran et ne réserve pas de la place en bas.

Seul défaut que je lui vois : il regroupe les fenêtres similaires (deux Firefox par exemple) mais y a pas possibilité de déminimiser juste celle que l’on veut.
Concernant le fait d’en ouvrir plein : le premier clic ouvre le programme, mais les suivantes minimisent/déminimisent celui qui est ouvert (comme sur Windows en fait). Si on veut ouvrir une seconde instance d’un programme, il faut faire Ctrl+Clic (sous Windows : Shift+Clic) — je viens de le découvrir.

Quoi qu’il en soit, pour lanceur, j’utilise en même temps Synapse (un remplaçant du vieux Gnome-Do).

https://launchpad.net/plank