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.
Enchanté, Julien Pradet,
Mes valeurs sont la bienveillance et le partage.
Je vous souhaite la bienvenue, Ă vous qui venez visiter mon petit espace sur le web.
Est-ce que vous êtes arrivé dans le coin parce que votre site web est lent ? Alors peut-être que vous serez intéressé par les services autour de la Web Performance que je propose.
Ou bien êtes-vous tombé sur un des articles que j'ai écrit ? En effet, j'aime partager autour du web. Généralement ça tourne autour de la Web Performance, du développement front-end ou de l'organisation d'équipe. Mais je suis une espèce d'agglomérat de plein de choses alors il m'arrive de vagabonder vers d'autres contrées. Par exemple, j'ai pas mal exploré l'Art Génératif récemment ou, si on remonte plus loin, la 3D (sculpture notamment).
Dans tous les cas, je serais heureux d'entendre parler de vous. Alors n'hésitez pas à me contacter, que ce soit via le formulaire, ou sur mes réseaux sociaux : Mastodon, Twitter ou LinkedIn.
Pour découvrir la WebPerf
- Pourquoi et comment accélérer le chargement de vos pages ? (juil. 2023)
Comprendre pourquoi la WebPerf c'est important et découvrir les outils pour démarrer
- Analyser et accélérer le chargement d'une page (juil. 2023)
Apprendre à lire les audits de performance afin d'être capable de comprendre quoi améliorer sur votre site
- Optimiser les images sur le web : checklist des bonnes pratiques (juil. 2023)
Bien comprendre les techniques d'optimisation afin de ne plus servir d'images sous-optimisées
Mes articles préférés
- Mener au changement (juil. 2023)
Un retour d'expérience sur comment apporter du changement au sein d'une équipe étape par étape
- Comment faire un header sticky animé et performant ? (sept. 2023)
Un condensé d'astuces front-end pour faire des animations front au quotidien
- Des animations performantes (fev. 2017)
Plonger dans le fonctionnement des navigateurs pour en tirer des animations Ă 60fps
Tous les articles
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.
Poser des questions
En ce moment, je me pose beaucoup de questions sur comment fluidifier les Ă©changes au sein d'une Ă©quipe. Cela passe principalement par la communication et le premier sujet que j'ai eu envie de creuser sont les questions : comment bien les poser ?
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.
Aligner des éléments avec CSS Grid et display: contents
Dans vos maquettes, les éléments sont parfaitement alignés. Mais une fois les vrais contenus présents, rien ne va. Voyons, en attendant l'arrivée des subgrid, comment régler ce problème.
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 ?
Mener au changement
Quand on débarque dans une entreprise, pas facile de se faire sa place ou de promouvoir les changements qu'on aimerait mettre en place. Je vous raconte comment ça s'est passé pour moi en rejoignant une scale-up.
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.
SudWeb 2018
J'ai trouvé ça cool. Voilà un petit retour d'expérience pour vous montrer un peu comment j'ai vécu tout ça.
PWA : Intercepter les requĂŞtes HTTP et les mettre en cache
Après avoir installé notre Service Worker, il est temps de lui faire faire des choses. Nous verrons comment utiliser l'interception de requêtes et la Cache API afin d'améliorer l'expérience de nos utilisateurs⋅rices.
PWA : Déclarer un Service Worker et gérer son cycle de vie
Après avoir expliqué ce qu'était une PWA et un Service Worker, attaquons nous à l'implémentation de ce dernier. J'y présenterai les bonnes pratiques que j'aurai bien aimé connaître avant de m'y mettre.
PWA : Rendre un site web disponible grâce aux Services Workers
Les Progressives Web Apps (PWA) est une des actualités du web qui a le plus de hype en ce moment. En quoi ça consiste, et comment le mettre en place ?
Placer dynamiquement du SVG
J'aime bien faire des choses en SVG. Mais je n'aime pas placer mes éléments. Alors il faut bien trouver des solutions pour que du code le fasse à ma place.
Introduction Ă RxJS
Le but de cet article est d'apprendre à utiliser RxJS en comprenant comment ça marche et en utilisant le minimum d'outils.
ContrĂ´ler ou ne pas contrĂ´ler ses formulaires React ?
Si vous gérez vous même vos formulaires, est-ce que ça vaut vraiment le coup de stocker les valeurs dans un composant ?
Alors, ce temps partiel ?
Cela fait maintenant 3 mois que je suis passé à temps partiel et que j'ai ouvert ce blog. Conclusion ?
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.
React Router V4
La librairie la moins concurrencée de l'écosystème React se refond. Cette fois elle embrasse totalement l'esprit React. Pourquoi c'est cool ?
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.
Les contextes sans les problèmes en React - Partie 2
Nous avons vu dans le post de la semaine dernière que les contextes pouvaient poser des problèmes de mise à jour des composants. Comment peut-on les contourner ?
Les contextes sans les problèmes en React
Un des inconvenients de React est le passage d'informations d'un composant à un autre. Une des solutions est d'utiliser les contextes. Mais il peut y avoir des problèmes. Lesquels et comment les éviter ?
Changement de rythme
Aujourd'hui est le premier jour de mon temps partiel. Ca ne fait que 2 ans que je suis dans la vie active et pourtant j'ai fait le choix de travailler moins. Pourquoi ?
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 :)