Un mur de notes - le hollandais volant

#17924

Ç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/

Sélecteur de couleurs - le hollandais volant

#17905

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/

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

#17904

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 :)

Partager des dépenses de groupe - le hollandais volant

#17723

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/

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

#17696

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/

Quelle couleur est-il ? - le hollandais volant

#17672

[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/

CSS3 / JavaScript (no image) color picker

#17670

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).

Trouver les informations de votre navigateur - le hollandais volant

#16743

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/

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

#16407

É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)