#18052

Le Hollandais Volant

Oh et j’ai changé (légèrement) le thème de mon site.

J’utilise une jolie astuce CSS qui permet de faire deux colonnes de blocs de taille variable, avec en prime la possibilité de garder l’ordre des articles (sur Firefox en tout cas).

Normalement, quand on utilise des colonnes, les éléments HTML sont placés dans la première colonne puis dans la seconde. C’est le comportement que vous avez sous Chrome (ou Vivaldi, Opera…).

Firefox permet un petit truc en plus : si on regarde les articles par ordre chronologique, ils sigzaguent !
Vous me direz que c’est simple et qu’il suffit des inline-block… sauf que les inline-block ne permet pas de garder prendre des blocs de taille variable et d’avoir un beau rendu façon « journal ».

Je trouve ça tellement chouette que je vais mettre ça ailleurs aussi.

Je n’utilise pas de float non plus (qui aurait rendu compliqué un design fluide et responsive). Bien-sûr, tout est 100% CSS !

Si vous voyez des bugs sur un navigateur récent, merci de me le signaler :-)

ÉDIT : après quelques remarques :
– j’ai rajouté le nuage de tags. Je ne pensais pas que quelqu’un les utilisais encore…
– j’ai remis les blocs dans l’ordre sur un affichage mobile (un oubli de ma part).
– le layout en double colonne est joli, mais n’est pas pratique sous Chrome, à cause de l’ordre des éléments. Je ne peux pas faire comme dans Firefox à cause d’un bug dans Blink (il est marqué comme résolu mais ça ne l’est pas pour le mode "Column" de flexbox, et ça ne sera jamais corrigé malheureusement : il est en wontfix).
Du coup, soit je passe par un brin de JS pour forcer les deux colonnes (c’est juste un "height" à fixer), soit je repasse en mode colonne unique.

https://lehollandaisvolant.net/

#18048

Note : Astuce CSS

Imaginez vous avez un template avec N posts à la suite. S’il y N articles, vous voulez un style A. S’il y a 1 seul article, par contre, vous voulez un style B.

Le CSS est très simple :

#blog > article {
    width: 500px;
}
#blog > article:first-of-type:last-of-type {
    width: 1000px;
}

L’idée est que si l’article est tout seul, il est à la fois le premier et le dernier !

Par exemple, là, je bosse sur un design où les articles sont mis côté à côté de largeur 500px. Quand un seul article est affiché, je veux en revanche qu’il occupe toute la largeur.

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

#18046

Note

PUTAIN C’EST QUOI CES SITES DE MERDE QUI M’EMPÊCHENT DE SCROLLER COMME JE VEUX AVEC LE CLIC-MOLETTE?

Vous allez me laissez utiliser ma souris et mon clavier oui ???

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

#18043

You need neither PWA nor AMP to make your website load fast @ tonsky.me - Liens en vrac de sebsauvage

+1

La remarque la plus pertinente dans l’histoire c’est quand il dit que la plupart des applications ne sont que des fenêtres web et ne fonctionnent pas sans connexion. Autrement dit, n’importe qui d’offline ne les ouvrirait même pas.

Facebook, Tinder, Tumblr, Twitter… tout ça ne sert à rien sans connexion. Conclusion ? Gardez-ça dans le navigateur.

Et quand bien même ces applications (genre Facebook) enregistraient les derniers posts en local pour les servir en offline… qui donc aurait envie de relire des posts déjà lu ? Les réseaux sociaux comme ça ne sont pas fait pour être lus et relus : ce ne sont pas des ressources utiles qui s’utilisent en offline et que l’on veut archiver.

L’avantage que je vois dans les PWA (et qui m’a poussé à aller voir ça de près) c’est le fait de pouvoir utiliser ça offline. Y compris des choses qui n’ont aucune interaction avec le serveur. Mon site, mon blog, fonctionne très bien dans le navigateur : pas besoin d’un app ni d’un PWA pour ça.
Par contre, mes petits outils, pour certains, si, ça m’est déjà souvent arrivé d’être dans le train, de vouloir noter un truc et de ne pas avoir de connexion.

Les PWA (et les applications en général), ne sont utiles quand s’ils sont entièrement fonctionnels en offline. Autrement c’est pas la peine.
À la limite, les données sont synchronisé avec un serveur, mais l’essentiel doit se passer sur l’appareil. Pas l’inverse !

***

Récemment (hier) j’ai revu tout le CSS de mon site… Au total, j’ai réduit ça de pas moins de 10 %. Le HTML a été réduire aussi (~25%) et le JS est resté stable. Tout ça pour dire que y a d’autres façons d’optimiser les choses.
Pour le CSS, ne factorisez pas. Il faut mieux réutiliser du HTML (et donc le CSS) plutôt qu’appliquer des styles identiques à deux éléments HTML différents. Ça ne vaut pas le coup, c’est impossible à maintenir et c’est un nid à redondances.

https://sebsauvage.net/links/?tIbZtg

#18033

Pure-CSS fix for the fixed-menu / :target problem

Purée… le CSS c’est génial (j’adore ça) mais parfois c’est casse-tête.

Cette astuce par exemple, est très pratique quand on utiliser des menus fixes dans les pages web. Si on utilise des ancres, ça évite que l’ancre sur laquelle on clique soit cachée par le menu fixe (nav-bar).

Ça marche… sauf quand l’élément que l’on ancre est en flexbox. Là ça ne marche pas !

:/

Je n’ai pas de solution pour le moment. Du coup j’ai posté mon premier poste sur StackOverflow : https://stackoverflow.com/q/53674390/5099624 .

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

#18020

[CSS] Note : on se fait trop chier.

Je suis en train de nettoyer mon CSS.

Et j’ai l’impression qu’on se fait bien trop chier (ou alors ce sont les spec qui ont bine changées).

Au bas mot 20 % des règles CSS que j’avais mise sont inutiles. Au mieux elles ne font rien, au pire, ont un comportement au final mauvais.

Il faut cesser de vouloir tout contrôler avec des reset CSS, soit au début, soit sur chaque élément.

Prenez les éléments pour ce qu’ils sont.
Si on utilise trop de reset sur un élément, êtes-vous bien sûr que vous utilisez le bon élément ? Ne prenez pas un H1 si c’est pour virer tous les styles. Ne prenez pas un P si c’est pour en faire un titre.

Pareil, quand on regarde le code source des pages de Google ou autre, il n’y a que des DIV. J’imagine qu’ils savent ce qu’ils font, mais c’est moche. Même les menus comme SELECT sont refait avec des DIV et du JS/CSS. Quelle horreur. Il n’y pas besoin d’aller jusqu’à ça pour avoir un beau design…

Prenez les éléments pour ce qu’ils font.
On critique souvent l’usage des listes : pour les menus, par exemple. Certains disent que les menus doivent être des DIV avec A.
Ok. Maintenant désactivez le CSS et regardez : votre menu ne ressemble plus à rien, si ce n’est qu’une suite de A qui se touchent. Dans ce cas là, une liste aurait été pertinente.

L’absence de CSS n’est pas un cas rare : quand votre page charge sur une connexion de merde, le HTML peut s’afficher avant le CSS. Avoir une liste qui devient ensuite un menu permet de s’y retrouver.

Ces lecteurs d’écran, navigateurs en mode texte, appareils de navigation destinés aux personnes ayant des difficultés pour naviguer dans une page web (handicap, etc.) se réfèrent aux éléments HTML ayant des styles spécifiques. Ça va des formulaires, bien-sûr, aux listes et aux titres.

Ne surchargez pas le HTML
Avez-vous bien besoin de faire un SPAN dans SPAN dans un BUTTON juste pour faire une icône avec une bordure ? Non : juste le BUTTON suffit si on sait manier les pseudo-éléments.

Si les pseudo-éléments ne servent qu’au design, alors ils n’apparaîtront pas dans une navigation sans CSS de toute manière.

Utilisez exclusivement le CSS pour le design.
On est en 2018 et je ne devrais pas avoir à le dire, mais bon… Le CSS est fait pour le design. Le JS c’est pour l’interaction avec la page, ou avec le serveur (Ajax). Pas pour styliser (ou alors il s’agit d’un style qui varie, mais là il n’est pas forcément mal non plus de passer par le DOM et de modifier des classes ou des attributs).

Les tableaux ne sont pas mal
On a longtemps dit que les tableaux HTML était le mal. Ce n’est pas vrai. Ils servent juste à faire des tableaux et pas autre chose. Ne faites pas une collection de SPAN disposés avec un « display: grid » si c’est pour une collections de données…

(…)

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

#17977

ColorClock

Un autre « quelle couleur est-il ? » !

Le design est vraiment sympa.

https://aure_br.frama.io/colorclock/

#17945

🔥 Design Tips

Une bonne liste d’astuces pour le design CSS, à la fois pour rendre les choses plus jolies, mais surtout plus pratiques.

Dans le style, il y a aussi ce blog : https://stephaniewalter.design/blog/ (y a des listes d’astuces façon "en vrac" chaque semaine).

https://twitter.com/i/moments/994601867987619840

#17742

harveybars sur Twitter : "How about this one?.red p { color: red; }.blue p { color: blue; }What color would the paragraphs be?<div class="blue"> <p> first </p> <div class="red"> <p> second </p> </div></div>… https://t.co/QxG5dJRs9j"

Deux quiz CSS.

La première :
https://twitter.com/mxstbr/status/1038073603311448064

La seconde :
https://twitter.com/hrvbrs/status/1038105898848317440

La meilleure chose à faire, c’est de tester. Ça vous donnera la réponse.
Ensuite il faut chercher à comprendre.

(Spoiler Alert)

Réponse : tout est bleu. Dans les deux cas.

https://twitter.com/hrvbrs/status/1038105898848317440

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

#17671

cursor - CSS : Feuilles de style en cascade | MDN

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

#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