#18068

Favicon Kit · get and embed Favicons from any website with this simple API

Classiquement, j’utilise ce service pour obtenir les favicon des sites : www.google.com/s2/favicons?domain=lehollandaisvolant.net/

C’est un service Google, mais si j’utilise mon script qui prend le favicon la première fois et le met en cache local, ce n’est plus un problème.

Par contre, les favicon renvoyés ne font que 16x16. Certes, la spec des favicon est comme ça, mais on peut faire mieux.

Favicon Kit permet justement ça.

Par ailleurs, je sais que les favicon sont normalement situés sous /favicon.ico sur beaucoup de sites, mais c’est loin d’être le cas partout (malheureusement).

https://faviconkit.com/

#17975

Encoder et décoder des données en base64 - le hollandais volant

J’ai refait rapidement mon outil là.
Il n’utilise plus de lib externe, juste les fonctions interne du navigateur.

J’ai aussi combiné l’outil "base64 texte" avec "base64 images".

Sinon, mes récents outils :

Chiffrement de César / Vigenère
Un mur de note (dont j’ai parlé y a pas longtemps)
Post-It (une version améliorée des notes, là aussi PWA compatible, tout offline)
Écran de veille façon Matrix (ça sert à rien, ok, mais c’est joli :p)

Pour ceux qui n’ont pas suivi, j’ai pas mal amélioré cet outil aussi :
détection de navigateur (pas mal d’ajouts)

Et avant j’avais fait ça :
Jeu du tableau périodique (pour les plus geek d’entre nous)

Un outil est à venir et permettra de donner le code XML/UTF-8/Héxa/%code/U-code/bytes-code/base64… d’un caractère unicode.

https://lehollandaisvolant.net/tout/tools/base64/

#17960

SVGOMG - SVGO's Missing GUI

Un optimiseur de SVG.

Il y a beaucoup d’options.
Sur les icônes SVG, la plus importante source de réduction est la précision des chemins. Vous n’avez qu’à essayer dans l’outil : il est absolument inutile d’avoir des précisions à 10⁻⁶ près. Des précisions à 10⁻² ou même 10⁻¹ suffisent largement.

Si votre icône contient 1000 chemins, donc 1000 fois des nombres façon « 10.123456 » avec 6 chiffres après la virgule, alors passer à 10⁻¹ sur la précision permet de réduire de 5×1000 octets, soit 5 ko. Sur une icône de 20 ko, ça se sent et s’est imperceptible (une icône, même en 512x512 sera rarement zoomé 10 fois…).

https://jakearchibald.github.io/svgomg/

#17924

Un mur de notes - le hollandais volant

Ça faisait longtemps que je voulais me faire ça : juste une page géante où on clique pour taper du texte et prendre des notes.

Les données sont stockées dans votre navigateur (stockage HTML5). Ça permet d’avoir des notes privées, mais du coup c’est également lié au navigateur. Ce que vous tapez sur votre PC ne sera pas visible sur votre mobile.

Le plus amusant là aussi, c’est que j’ai moins de 70 lignes de JS suffisent pour faire ça. Haha.

https://lehollandaisvolant.net/tout/tools/notes-wall/

#17905

Sélecteur de couleurs - le hollandais volant

J’ai mis à jour ce sélecteur de couleurs.

Il permet de prendre une couleur sur le nuancier et obtenir les codes, et désormais aussi l’inverse (on entre les valeurs et il se positionne sur le nuancier).

==

À noter que le comportement pour le CMYK peut sembler étrange : par exemple, si on modifie la valeur du M ou du Y en partant de zéro, si on met « 1 », il peut redescendre tout seul à 0.
La couleur est quand-même modifiée et prise en compte : c’est juste que le changement est répercuté sur le K.

Ceci provient du fonctionnement même du CMYK, un format destiné aux imprimantes : si on veut du noir total, on ne va pas bourrer l’image avec du cyan, du magenta et du jaune, mais simplement prendre la cartouche noire.

==

Pour les codeurs, le code source contient les fonctions pour transformer le HSL, le RGB, en HEX, en CYMK, etc.

Le plus difficile est le HSL, car c’est le seul qui fonctionne sur une autre logique que celle de la combinaison de 3 couleurs.

https://lehollandaisvolant.net/tout/tools/color/

#17904

Favicon Generator for all platforms: iOS, Android, PC/Mac...

Un outil web pour générer tous les favicons nécessaire pour iOS, Android, Windows et les navigateurs (tous les apple-touch-icon, etc.) à partir d’une image qu’on lui donne.

Ensuite y a juste à uploader le contenu du package et c’est bon.

==

C’est assez le bordel, toutes ces icônes quand-même : entre W10, Chrome, iOS, Android, les navigateurs normaux, MacOS… ils pourraient se contenter d’un SVG standard. À quoi ils pensent les développeurs ?

Et pourquoi le .ico en 16x16 n’est pas encore remplacé par un SVG chez tout le monde ? C’est ça qui devrait être le nouveau standard…

M’enfin, cet outil est pratique :)

https://realfavicongenerator.net/

#17723

Partager des dépenses de groupe - le hollandais volant

Un autre petit outil.

Si vous êtes en groupe, que chacun paye des frais différents, et si vous souhaitez rééquilibrer tout ça, ce genre d’outil est là pour ça.

Mon outil fonctionne mathématiquement, mais il n’est pas totalement optimisé.
Par exemple, dans certains cas il propose une solution de partage des frais avec un total de 4 transactions où 3 pourraient suffire. Ce n’est pas gênant, tout le monde retombe sur ses pattes quoi qu’il en soit.

Si j’avais voulu optimiser pour un nombre de transactions minimal, il m’aurait fallu ajouter une boucle relativement lourde (mathématiquement et programmatiquement), donc j’ai pas fait.

Mais pour 3 ou 4 personnes qui se partagent des frais, ça marche nickel. C’est avec beaucoup de personnes que le script n’est plus optimal.

(par contre, les autres outils en ligne du style (que j’ai testé en tout cas) ne sont pas optimisés non plus :p
On me signale Tricount, qui dans sa FAQ écrit « Tricount […] propose une solution pour équilibrer en minimisant le nombre de remboursements. »)

https://lehollandaisvolant.net/tout/tools/pay-bill/

#17696

Où en sommes nous dans l’année ? - le hollandais volant

Une page qui affiche le pourcentage d’accomplissement de l’année courante, du mois courant, de la journée courante, de l’heure et de la minute.
Parce que j’aime mélanger prog, art, couleurs et aussi le temps qui passe :D

Oui, ceci utilise mon astuce de l’angle en CSS d’hier.

Ceci utilise de façon importante les CSS3 : les --variables, les calc(), les gradients, les ombres, les ::before et les ::after.
En HTML, j’utilise l’attribut data-ma-variable="". En JS, je modifie le HTML et le CSS.

Dans l’ensemble, tout est mélangé : le JS modifie l’attribut sur un élément HTML, le CSS récupère la valeur de cet attribut et le place dans le ::after, à l’écran. Par ailleurs, JS modifie la valeur de la --variable CSS, qui est ensuite appliquée à une propriété CSS sur un élément, ou sur le ::before d’un élément. C’est juste beau comment tout ça interagit dans tous les sens. On est loin du HTML4 et du CSS2 statique.

Et pourtant… le support navigateur de tout ça n’a jamais été aussi bon : cette page, sans faire d’ajustages particuliers, fonctionne aussi bien dans Chrome (chromium, vivaldi…) que dans Firefox, aussi bien sur desktop que mobile. Edge s’en sort sur les barres, mais pas sur le truc circulaire :/

https://lehollandaisvolant.net/tout/tools/progression-calendar/

#17672

Quelle couleur est-il ? - le hollandais volant

[enhanced]

J’ai mis à jour ce gadget.
La page originale mettait directement le HH, MM, SS dans le RVB. Le problème que j’avais déjà noté, c’est que les secondes ne vont que de 0 à 60, et les couleurs de 0 à 255. On restait donc toujours en bas de l’échelle et les couleurs étaient assez sombres. J’avais déjà étendu l’échelle des couleurs. Sur la nouvelle page, ça correspond à la ligne « RGB »

J’ai aussi ajouté deux option :
HSL, où on utilise ce mode de couleur là. Là aussi, c’est sur des échelles étendues.
Ce qui varie le plus ce sont bien-sûr les secondes. Ici, c’est donc la luminosité : chaque minute, on va du noir total au blanc total, en passant par la couleur définie par l’heure avec la saturation (niveau de gris) correspondant aux minutes.

HSL plus coloré : avec HSL, le « H » correspond à un angle (0-360) où chaque angle est une teinte. Dans ce mode, j’ai mis les secondes sur la teinte. Chaque minute, la page balaye toute les teintes. C’est beaucoup plus coloré et en plus, il n’y a plus de brusque changement quand les secondes passent de 59 à 00.
Enfin, pour rester avec des couleurs vives, j’ai restreint l’échelle de la saturation entre 66% et 100% (les couleurs sont donc toujours assez vives) et de la luminosité entre 25% et 75% (ici aussi, donc, on reste sur des couleurs vives : 0%, c’est trop sombre et 100% trop lumineux).

Enjoy :)

Perso j’adore ce truc.
C’est un parfait écran de veille (j’ai ajouté un bouton "plein écran").

Oh et pour les amateurs : j’ai découvert quelques trucs sympa en JS/CSS. Tout est dans le code source, mais un des trucs c’est que même si on affecte une couleur CSS3 en hsl(), le navigateur le convertit automatiquement en rgb(). Du coup, plutôt que de convertir de l’un à l’autre avec des formules de math, il suffit de parser le .computedStyle :D.

https://lehollandaisvolant.net/tout/tools/color-second/

#17670

CSS3 / JavaScript (no image) color picker

En moins de 150 lignes de JS, du CSS, mais aucune image, pour un total de 10 kio.

Mon précédent "color-picker" comptait 5 fichiers JS et 28 images (193 kio).

Certes le truc actuel fait un peu moins (il ne marche que dans un sens) mais ajouter l’autre sens ne prendra pas beaucoup de code en plus.

En plus ceci adaptable à tous les écrans (mais peut-être pas tous les navigateurs, car il utilise pas mal de CSS3 et de JS).

https://codepen.io/lehollandaisvolant/pen/oMmPbb

#16743

Trouver les informations de votre navigateur - le hollandais volant

J’ai amélioré cet outil aussi.

J’ai supprimé la détection de niveau de batterie (dépréciée) et ajouté la détection d’informations GPU (infos leakées avec l’API WebGL).
J’ai aussi ajouté un moyen de détecter adblock (pas de panique si votre adblock s’affole : il y a juste un test sur la chargement d’un fichier /js/ads.js bidon et un autre test sur l’apparence d’un block avec des classes spécifiques aux pubs).

Notez qu’en mettant toutes ces informations (IP, UA, hardware, codecs, plugins…) bout à bout et en faisant un hash de tout ça, on obtient une signature pratiquement unique pour chaque navigateur. Même sans cookies, même sans tracking manifeste, n’importe quel site web peut arriver à nous repérer de façon pratiquement unique. Bonne journée :).

https://lehollandaisvolant.net/tout/tools/browser/

#16407

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

Éditer des polices (ajouter, modifier, supprimer des caractères).

C’est utile quand on fait des webfonts avec des icônes.
Il suffit d’importer les PNG ou SVG, de choisir celles qu’on veut dans notre fichier de police et il va pondre les fichiers de polices : Woff, Woff2, SVG, etc.

De façon générale, quand vous faites une webfont, je conseille de n’inclure que les icônes dont vous avez besoin.

Par exemple pour les icônes du material design de Google, il y en a des milliers. Tous les inclure ferait une police bien trop lourde à charger.

(ah et l’avantage des polices web sur les PNG par exemple, c’est la gestion des couleurs et des tailles : on peut afficher une icône et lui ajouter couleur, taille, ombre… en CSS comme on ferait avec du texte normal. C’est donc très maléable, et aujourd’hui c’est aussi bien largement supporté dans les navigateurs)

https://icomoon.io/app/#/projects

#16375

Google Earth

Google Earth dans le navigateur.

Mais ça ne marche que dans Chrome, bien-sûr (ce qui n’est donc pas plus intéressant qu’une application dédiée)…

https://earth.google.com/web/