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)

Google Earth

#16375

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

Supprimer le canal alpha d’une image - le hollandais volant

#16199

Juste un petit outil : donnez un PNG+alpha, cliquez et vous avez un fond blanc.

Oui c’est très con, mais quand on est sur un téléphone avec une image en noir sur fond alpha et que l’application pour voir les images remplace l’alpha par du noir, ben on ne peut plus rien lire du tout.

Du coup j’ai pondu ça. Ça marche en JS avec canvas, donc dans le navigateur.

(Et non je n’ai pas non plus envie de me retrouver avec photoshop sur mon téléphone, donc ce genre d’outils primitifs me va très bien.)

HTTP vs HTTPS — Test them both yourself

#15776

Une page censée mettre en lumière le fait que HTTPS est beaucoup plus rapide que HTTP.
Ça marche surtout la première fois (après y a le cache navigateur, j’imagine), d’un facteur 10x environ. Mais je ne m’explique pas comment ça se fait.

ÉDIT : ça vient sûrement de leur HTTPS qui est en HTTP2. Voir ça : https://www.tunetheweb.com/performance-test/ qui montre les trois.