Maîtriser les types avancés en TypeScript
TypeScript c'est bien, à condition de pas avoir à dupliquer les types à travers toute la codebase. Voyons les notions qui nous évitent ces problèmes.
Tutoriels
Les tutoriels sont pour moi l'occasion de présenter comment et surtout pourquoi faire les choses. Le contenu y est souvent dense et se concentre sur les bonnes pratiques et les concepts plutôt que sur la technique.
3 Règles d'or en TypeScript
On peut vite se retrouver avec une code base remplie de `any` qui ne vérifie plus grand chose. Quelles bonnes pratiques pour éviter ça ?
Comment utiliser l'API View Transitions ? Du hello world aux cas complexes.
Animer le contenu de son site web, c'est à la fois tellement compliqué et tellement important pour avoir un site quali. A l'aube des View Transitions, ça va peut-être devenir plus simple. Voyons comment ça fonctionne en détail, au delà du hello world.
Utiliser les Scroll Driven Animations en CSS comme indicateur de scroll
Une nouvelle API débarque dans les navigateurs : les Scroll Driven Animations. Plus besoin de JS pour changer le style de vos élements en fonction du scroll. Voyons ça en détail avec un exemple d'indicateur de scroll.
Comment alléger son JavaScript
Quand on parle web performance, dans le web d'aujourd'hui, le plus grand coupable est souvent JavaScript. Voyons ensemble les techniques pour optimiser celui-ci.
Comment faire un header sticky animé et performant ?
A l'aube des Scroll Driven Animations, est-ce la meilleure façon d'animer un header sticky ? Pas forcément. Dans ce tutoriel, je vous explique pourquoi et comment faire autrement.
Comment diagnostiquer et corriger du Cumulative Layout Shift (CLS) ?
On a tous en tĂŞte ces sites qui clignotent dans tous les sens pendant leur chargement. Cet effet se mesure via le Cumulative Layout Shift. Qu'est-ce que c'est exactement ? Comment le diagnostiquer ? Quelles bonnes pratiques avoir en tĂŞte ?
Optimiser le chargement des icones
Quand votre site grossit, le nombre d'icones et leur poids augmente. Ils finissent par impacter vos performances et ralentissent le chargement de vos pages. Comment faire pour limiter l'impact de ceux-ci et faire face Ă un Design System qui grossit ?
Optimiser le chargement des webfonts
Quand on parle de charte graphique, les polices d'écritures arrivent rapidement sur la table. Comment respecter celles-ci tout en gardant un site rapide ? Format, Subsetting, Fallback, j'essaye de vous fournir la recette idéale pour vous en sortir.
Optimiser les images sur le web : checklist des bonnes pratiques
Les images, sûrement une des premières choses qu'on pense à optimiser quand on parle de performance web. On les passe par exemple dans une moulinette pour diminuer leur poids, mais est-ce suffisant ? Dans cet article je liste tout ce qu'il faut savoir quand vous ajoutez une nouvelle image dans votre HTML.
Analyser le comportement réseau pour améliorer FCP et LCP
Le Web Performance commence par bien comprendre le fonctionnement du navigateur. Dans cet article, je vous présente quels outils j'utilise et liste les bonnes pratiques à avoir en tête pour maîtriser votre réseau et accélérer le chargement de vos pages.
Pourquoi et comment améliorer le LCP de vos pages ?
Concentrons nous sur un aspect de la performance web : le Largest Contentful Paint. Pourquoi est-ce important pour vos utilisateurices ? Quels outils utiliser pour l'analyser ?
Comment et pourquoi mocker une API navigateur dans des tests unitaires ?
jsdom est une librairie miracle qui permet d'exécuter des tests comme dans un navigateur, mais sans navigateur. Le problème c'est que tout n'est pas forcément à disposition. Comment mocker des APIs telles que window.matchMedia, IntersectionObserver, etc. ?
Testing Library : Comment l'utiliser avec son propre framework ?
Dans l'article précédent nous avons vu comment Testing Library pouvait améliorer nos tests front-end. Mais nous pouvons l'utiliser quelque soit le framework : démonstration avec du Twig.
Testing Library : Comment rédiger des tests front-end ?
Dans un écosystème front-end aussi fragmenté, Testing Library est un vrai bol d'air : cette librarie nous permet de tester unitairement nos composants quelque soit le framework. Dans cette partie, nous verrons comment ça marche et comment l'adapter à React.
Introduction Ă RxJS
Le but de cet article est d'apprendre à utiliser RxJS en comprenant comment ça marche et en utilisant le minimum d'outils.
Introduction aux animations FLIP
Voici une technique d'animation web pour ne pas (trop) se prendre la tête avec les propriétés `transform` et `opacity`. Mais est-ce vraiment une solution miracle ?
Des animations performantes - Partie 3
Faire des animations, c'est cool. Faire des animations qui ne lag pas, c'est mieux. Troisème partie, axée JavaScript.
Des animations performantes - Partie 2
Faire des animations, c'est cool. Faire des animations qui ne lag pas, c'est mieux. Voici la deuxième des trois techniques dont je vais vous parler.
Des animations performantes - Partie 1
Faire des animations, c'est cool. Faire des animations qui ne lag pas, c'est mieux. Voici la première des trois techniques dont je vais vous parler.
HOC pour Higher Order Component
Plutôt que de vous parler pûrement de React, dans cet article, je vais plutôt essayer de présenter l'essence d'un HOC parce que ça peut aussi vous être utile dans d'autres domaines.
Si vous voulez suivre mes publications, il paraît que j'ai un feed RSS, Mastodon et un Twitter.
Si vous pensez à d'autres méthodes que vous voudriez que je mette en place (pigeon voyageur, avion en papier, etc.), n'hésitez pas à me les proposer :)