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/

cursor - CSS : Feuilles de style en cascade | MDN

#17671

Un truc tout bête qui aide beaucoup dans l’UI et l’UX : les curseurs en CSS.

Plutôt que d’ajouter un spinner en JS ou un GIF qui prend lui-même pas mal de ressources, pour dire « attendez ça charge », mettez plutôt un "cursor: progress" sur la page.

Plutôt que mettre un popup « déplacez le curseur de gauche à droite », ajoutez un simple "cursor: col-resize" ou "cursor: ew-resize".

https://developer.mozilla.org/fr/docs/Web/CSS/cursor

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

Why You Shouldn't Use A Web Framework - DEV Community 👩‍💻👨‍💻

#17630

It's easier for beginners to use a framework

Sure, if you're a Sith.

Déjà que JS lui même vient, de base dans les navigateurs, avec une panoplie énorme de fonctionnalités, donc les 3/4 ne seront jamais utilisés dans quelque programme que ce soit, alors ajoute une sur-couche pour reformuler toutes ces fonctions de façon différente, à quoi bon ?

https://dev.to/gypsydave5/why-you-shouldnt-use-a-web-framework-3g24

Note : selecteur d’attribut CSS et ::after/::before

#17431

J’en ai peut-être déjà parlé, mais je trouve qu’on n’exploite pas assez certaines perles en CSS.

Par exemple, dans mon lecteur RSS en JS, quand j’ouvre un post, il est marqué comme lu automatiquement.
Dans ma liste de flux, chaque flux est suivi par un bouton qui affiche le nombre d’éléments non lus pour ce site. Chaque flux, dans une liste <li> a un attribut « data-nb-unread » qui contient donc le nombre de posts non lus.
Quand un flux est ouvert, le JS décrémente ce nombre et c’est comme ça qu’un flux est marqué comme lu (il n’y a pas de boucle qui recompte à chaque fois le nombre de posts : le gain de perfs est énorme).

Pour afficher le bouton, plutôt d’ajouter un <span> qui contient le nombre, qu’il faut donc également décrémenter, j’utilise désormais ça :

li[data-nbunread]::after {
    content: attr[data-nb-unread];
}

Ce que ce CSS fait, c’est ajouter un ::after sur chaque <li> (donc pour chaque site) et y placer le contenu de l’attribut « data-nb-unread » du même <li>. Très pratique : le ::after est directement mis à jour par le navigateur quand l’attribut changer.

On peut faire mieux.

Par soucis de clarté, je n’affiche le nombre de flux QUE sur les lignes où ce nombre est différent de 0. Les flux qui n’ont pas de posts non-lus n’ont donc pas de bouton avec « 0 ».

Le code devient :

li:not([data-nb-unread="0"])::after {
	content: '('attr(data-nbrun)')';
}

Ça permet donc d’afficher le bouton sur tous les flux où l’attribut « data-nb-unread » n’est pas égal à 0.

Le sélecteur d’attribut est très puissant et fonctionne un peu comme les regex.
Par exemple, si un lien est en anglais, il peut posséder un attribut « lang » :

<a href="//site.com/page_en_allemand.html" lang="de-de">lien</a>

En CSS, on peut ajouter un petit drapeau allemand :

li:[lang="^=de"])::after {
    content: "";
    background: src(drapeau/allemagne.jpg) no-repeat;
}

Ici le « ^= » signifie « qui débute par … », mais il y en a d’autres (que l’ont peut tous combiner avec le :not() si l’on souhaite.

https://developer.mozilla.org/fr/docs/Web/CSS/attr
https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut

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

What’s wrong with CSS-in-JS? | Brad Frost

#17373

J'ai jamais été fan du full-CSS-in-JS, et je rejoins ce que disait Daniel Glazman ici : les arguments généralement invoqués pour dire "non au CSS" ne tiennent juste pas debout et tendent même plutôt à démontrer que CSS a de bon nombre de points communs avec des langages de programmation !

Le mieux quand on vient se greffer sur un projet déjà existant c'est évidement de respecter la structure de l'existant, mais s'il est nécessaire de tout recommencer ou de créer un truc nouveau, je préfère utiliser les différentes techno pour ce qu'elles ont été prévues :

- HTML pour le code source de la page et le contenu
- CSS pour la décoration
- JS pour l'interaction et l'interface .

On peut utiliser JS pour modifier le CSS ou le HTML, mais généralement c'est à éviter.
Quand il faut modifier ce qui s'affiche à l'écran, je ne touche pas aux éléments HTML : je fais switcher des classes et je laisse le CSS faire le reste.

Ça me semble être la solution la plus propre : sans CSS le HTML s'affiche et le contenu est visible, et sans JS aussi, donc le contenu reste accessible. Ce n'est pas toujours la solution la plus légère par contre...

CSS Variables

#17299

Une intro simple pour les variables CSS.

J’aime particulièrement l’idée tout en bas avec les media-queries.

https://flaviocopes.com/css-variables/

Third party CSS is not safe - JakeArchibald.com

#17274

Maieuh…

Il est possible de faire un keylogger en CSS…

L’article, globalement, suggère (à juste titre) que si on utilise des scripts externes, ça revient à donner les clés de son site à quelqu’un d’autre (celui qui gère ledit script : JS peut tout faire sur la page, en fait, y compris remplir des champs, modifier des formulaires, faire des requêtes…).

Utiliser des styles externes semble moins risqué, mais il reste tout de même possible de faire beaucoup de choses… Le keylogger est juste un exemple.

La conclusion à tirer est qu’il faut tout héberger chez soi. Et surtout, comme d’hab, faire attention à ce qu’on récupère : un fichier CSS téléchargé puis hébergé sur son site peut très bien lui-même faire des includes() ailleurs, y compris sur des images, des svg…

https://jakearchibald.com/2018/third-party-css-is-not-safe/