Dev front

Dev front

How to make your images in Markdown on GitHub adjust for dark mode and light mode

Cet article explique comment rendre les images dans les fichiers Markdown de GitHub adaptables aux modes clair et sombre. En utilisant la balise <picture>, les développeurs peuvent définir différentes sources d'images selon le thème choisi par l'utilisateur. Cela permet d'assurer que les visuels s'intègrent bien dans l'environnement choisi, offrant ainsi une présentation plus soignée des projets. L'article inclut également un exemple pratique pour illustrer l'utilisation de cette fonctionnalité.

github.blog

markdowngithub
Dev front

Give a SPA Feel to Your Static Website with Hotwire's Turbo

L'article présente Turbo, une bibliothèque JavaScript partie de la solution Hotwire, qui permet de donner une sensation d'application monopage à un site web statique sans nécessiter l'écriture de code JavaScript. Après des tests sur la documentation de React Admin, il a été souligné que Turbo facilite la gestion de la navigation, la préservation de l'historique du navigateur, la mise en cache des pages visitées et l'optimisation des mises à jour de contenu dans le DOM. Bien que Turbo offre des fonctionnalités intéressantes comme la morphologie de contenu et les Turbo Frames, certains défis demeurent lors de son intégration dans des projets existants.

marmelab.com

javascripthotwireturbo
Dev front

A flowing WebGL gradient, deconstructed

Cet article explique comment créer un effet de gradient fluide en utilisant WebGL. Il aborde la rédaction de shaders, l'interpolation, le mappage de couleurs et le bruit de gradient. L'auteur guide étape par étape, sans nécessiter de connaissances préalables, pour construire un modèle mental et reproduire l'effet à partir de zéro, avec des explications visuelles et interactives. Des fonctions de mélange de couleurs et d'oscillation sont également présentées pour ajouter du mouvement au gradient, en soulignant l'importance de l'utilisation du GPU pour le rendu efficace grâce à la parallélisation.

alexharri.com

glslwebgl
Dev front

Concevoir une barre de recherche accessible en React et HTML

L'article traite de la conception d'une barre de recherche accessible, en mettant l'accent sur l'accessibilité pour les utilisateurs rencontrant des difficultés. Il souligne les défis posés par le design minimaliste, les erreurs fréquentes à éviter, et propose des bonnes pratiques pour créer une barre de recherche qui respecte les exigences d'accessibilité. Des exemples d'implémentations en HTML et React sont présentés, indiquant comment allier esthétique et accessibilité.

blog.eleven-labs.com

accessibilitéreacthtml
Dev front

Mastering CSS Container Queries for Adaptive Layouts

L'article présente les requêtes de conteneurs CSS, une nouveauté dans le design adaptatif qui permet aux composants de s'ajuster en fonction de la taille de leur conteneur parent, plutôt que de simplement réagir à la taille de l'écran. Grâce à cette fonctionnalité, les développeurs peuvent créer des mises en page flexibles et réutilisables. L'article décrit comment utiliser les requêtes de conteneur, nommer les conteneurs pour des mises en page complexes, et introduit de nouvelles unités qui simplifient la création de designs contextuels. Des informations sur la prise en charge par les navigateurs et une ressource supplémentaire pour approfondir le sujet sont également fournies.

theosoti.com

csshtmlresponsive design
Dev front

Level Up React: Mastering useReducer for structured state management | 56kode - Web Development Blog on React & TypeScript

Cet article fait partie de la série "Level Up React" et explique comment gérer des états complexes dans une application React à l'aide du hook useReducer. Celui-ci permet d'organiser la logique de gestion des états en centralisant les mises à jour dans une fonction pure appelée "réducteur", ce qui facilite la compréhension, le test et la maintenance du code. L'article aborde les avantages de cette méthode par rapport à useState, en particulier dans les scénarios où la logique métier est complexe et interdépendante, et fournit des bonnes pratiques pour son utilisation, notamment avec TypeScript et en association avec useContext pour une gestion d'état globale.

www.56kode.com

typescriptreactusereducer
Dev front

Do I Need To Use Client-Side-Rendering or Server-Side-Rendering?

Cet article traite du dilemme entre le rendu côté client (CSR) et le rendu côté serveur (SSR) dans le développement d'applications web. Il explique quand utiliser chacun, en se basant sur des exemples concrets et des règles simples. Par exemple, le SSR est recommandé pour les pages où le SEO est crucial, car il permet de récupérer le contenu avant le chargement de la page, tandis que le CSR est utilisé pour gérer les actions utilisateur après le chargement. Des snippets de code sont fournis pour illustrer ces concepts.

medium.com

ssrcsr
Dev front

Anime.js | JavaScript Animation Engine

Anime.js est une bibliothèque JavaScript rapide et polyvalente dédiée à l'animation sur le web. Elle propose une API intuitive permettant d'animer facilement divers éléments, avec des fonctionnalités avancées telles que le morphing de formes, le dessin de lignes et la synchronisation des animations à l'aide d'un observateur de défilement. L'API offre également des méthodes pour gérer les animations réactives et des options pour minimiser la taille du bundle en important uniquement les parties nécessaires.

animejs.com

javascriptapisvg
Dev front

Experimenting with React View Transitions | Frontend at Scale

Cet article explore la nouvelle API de transitions de vue de React, qui permet de créer des animations fluides entre différentes vues d'une application web. L'auteur partage ses expériences avec cette API expérimentale, détaillant son intégration dans React et ses avantages, notamment la simplification du déclenchement automatique des transitions et une gestion optimale des noms de transition, améliorant ainsi la performance et l'expérience utilisateur lors de la navigation.

frontendatscale.com

view transition apijavascriptreact