Daily Weekly Monthly

Weekly Shaarli

All links of one week in a single page.

Week 52 (December 23, 2024)

HTML inert Attribute | 12 Days of Web

Ajouter l'attribut inert à un élément HTML le rend — lui et tous ses descendants — inopérants. Il devient impossible d'interagir avec eux.

L'article aborde les différences avec les attributs ou les propriétés CSS similaires qu'il ne remplace pas, tels que disabled, visability: hidden, etc.

Par exemple, c'est ce que les modales HTML natives utilisent pour empêcher les interactions avec ce qu'elles recouvrent.

Animating Entry Effects | 12 Days of Web

Exploration des propriétés CSS @starting-style et transition-behavior: allow-discrete pour les animations.

Les valeurs discrètes sont les valeurs non-numeriques telles que block, inline, etc.

go-shiori/shiori: Simple bookmark manager built with Go

Une alternative open source à Pocket, pour gérer votre liste de sites à consulter plus tard.

Create beautiful images of your source code

Un outil qui permet de faire de jolies images de bouts de code, prêtes à partager.

How to Avoid JWT Security Mistakes in Node.js

Quelques points de sécurité important à prendre en considération pour l'usage des JSON Web Tokens (JWT).

Le point principal étant : pensez à systématiquement vérifier la signature d'un token avant d'en consommer le contenu.

Preloading fonts for web performance with link rel=”preload” - HTMHell

Pré-charger les polices de caractère dont on sait à l'avance qu'elles seront utilisées, pour que le navigateur n'attende pas d'avoir chargé le CSS pour les télécharger.

Cette technique permet de limiter les layout shifts provoqués par le remplacement de la police par défaut par la police personnalisée, et d'améliorer le temps de chargement global de la page.

Release v0.14.0 · kalvn/Shaarli-Material

Shaarli Material v0.14.0 est de sortie ! 🎅❄️

Au menu : un gros nettoyage des ressources front-end qui ne sont plus nécessaires et une mise à jour pour les autres.

Elysia 1.2 - You and Me | ElysiaJS

Même si je n'utilise pas Elysia.js du fait que je n'utilise pas (encore ?) Bun, j'aime beaucoup la façon dont cette librairie a été conçue. Tout est très intuitif, et il y a un gros effort effectué pour encourager les bonnes pratiques (input validation, documentation, client type-safe, etc.).

A essayer !

Et si vous préférez attendre une plus grande stabilité/maturité au niveau de l'API, je pense que d'ici quelques mois, 1 an max ce sera bon. Mais la documentation est déjà très instructive à parcourir.

On « frôle le mensonge caractérisé » : attention aux chargeurs USB-C que vous achetez

Choisir des marques connues pour les chargeurs USB haute puissance.

Article source de 01.net

En gros, marques à retenir :

  • Anker
  • Belkin
  • Ugreen
calc-size() and interpolate size | 12 Days of Web

La propriété CSS interpolate-size est un un peu le nouveau box-sizing: border-box; : elle permet de transitioner depuis ou vers un mot clé (auto par exemple) en plus des grandeurs fixes, chose qui a longtemps été impossible avec du pur CSS.

Il suffit de la déclarer à la racine et elle s'applique partout. Mais elle n'est pas activé par défaut pour éviter les régression sur les anciens sites.

Tea Consent (VF) - YouTube

Le consentement expliqué de manière on ne peut plus simple.

Via https://sebsauvage.net/links/?2KUxbg

PSA: Stop using the title attribute as tooltip! - HTMHell

L'usage des popover HTML comme alternative à l'attribut title qui n'est ni accessible ni utilisable sur mobile.

Il y a tout de même encore quelques efforts à faire pour le positionnement et l'interactivité.

Easing Wizard - CSS Easing Editor

Un outil pour faciliter l'usage des fonction CSS d' "easing" (aucune idée de comment traduire ça).

Très bien conçu et très sympa esthétiquement, avec cette petite touche néon :)