Veille Design 🎨

Brandfetch, l’allié de votre branding

Brandfetch est une plateforme qui offre un moteur de recherche pour trouver diverses ressources numériques d'entreprises telles que logos, couleurs, polices et images. Son fonctionnement est simple : il suffit de taper le nom d'une marque ou d'entrer son URL pour obtenir des résultats comprenant des logos en différents formats, des couleurs dominantes et parfois même la police d'écriture du logo.

‍

Veille IA 🤖

La CNIL cadre l’IA

La CNIL travaille sur un ensemble de recommandations concernant la gestion des données personnelles dans le cadre d’une application utilisant de l’IA. L’approche reste globalement la même que pour une application classique (à savoir se limiter aux informations personnelles indispensables, bien scoper, justifier et étudier les risques en cas d’attaque), avec des adaptations à l’IA.

Ce qu'il faut retenir :

1. Définir un objectif (finalité) pour le système d’IA
2. Déterminer vos responsabilités
3. Définir la « base légale » qui vous autorise à traiter des données personnelles
4. Vérifier si vous pouvez réutiliser certaines données personnelles
5. Minimiser les données personnelles que vous utilisez
6. Définir une durée de conservation
7. Réaliser une analyse d’impact sur la protection des données (AIPD)

‍

Veille Développement 💻

La Lutte contre les problèmes d'hydratation avec Next.js

Lorsque l'on parle de développement web avec Next.js, il est essentiel de comprendre les défis liés à l'hydratation. La "Hydratation Mismatch" est un terme qui désigne le moment où React ne parvient pas à comprendre pourquoi un composant rendu sur le serveur est différent lorsqu'il est mis à jour côté client. C'est comme si vous receviez un carré, mais lorsque vous mettez à jour ses propriétés, il se transforme en cercle, alors qu'il aurait dû rester un carré !

Heureusement, même si les problèmes d'hydratation persistent, des solutions commencent à émerger pour aider les développeurs à surmonter ces obstacles en attendant une résolution plus définitive :

• Un article très instructif a été publié pour aider à résoudre les erreurs de différence de rendu entre le serveur et le client. Il offre des conseils précieux pour minimiser les écarts et assurer une expérience utilisateur cohérente.
• Un outil pratique appelé "Hydration Overlay" a également été développé pour différencier visuellement les composants rendus côté serveur de ceux rendus côté client dans le rendu frontal. Cela permet aux développeurs de débbuguer plus facilement et de mieux comprendre les différences entre les deux rendus.
• Enfin, la version Next.js 14.2 a été lancée en octobre dernier, apportant avec elle une gestion améliorée des messages d'erreur liés à l'hydratation. Cette mise à jour offre aux développeurs une meilleure visibilité sur les problèmes potentiels et facilite leur résolution.

‍

Le Retour du Visualiseur 3D de Firefox

Souvenez-vous des jours où Firefox vous permettait d'explorer les pages web en 3D, offrant une vision visuelle des composants. Une fonctionnalité pratique, malheureusement retirée des nouvelles versions.

Mais voici une lueur d'espoir : un outil récent permet de visualiser la structure d'une page HTML en 3D. Pratique pour repérer les problèmes de Z-Index ou comprendre les éléments responsables du défilement horizontal sur mobile.

Et pour l'anecdote, saviez-vous que Firefox offrait cette fonctionnalité nativement jusqu'à la version 46 ?‍

‍
Google Analytics signe la fin de l'ère Universal Analytics

Google a depuis un certain temps encouragé les utilisateurs à migrer vers GA4, mais maintenant c'est officiel : Universal Analytics est enterré.

Pour une meilleure compréhension des analytics, leurs utilisations et comment s'impliquer en tant que développeur, nous vous recommandons cet article.

‍

Comprendre la différence entre une SPA et une application avec des Servers Components/Actions

Pour ceux qui se demandent quelle est la différence entre une Single Page Application (SPA) et une application avec des Server Components/Actions, nous avons trouvé un excellent schéma qui clarifie cette question. Il illustre de manière claire et concise le fonctionnement et le cycle de vie du rendu d'une page, ainsi que les différentes interactions entre les composants du serveur et de l'application.

‍

Vers l'arrivée de React 19 : ce qui est envisagé

La communauté React est en effervescence à l'approche de la sortie potentielle de la version 19. Bien que la date exacte de sortie ne soit pas encore confirmée, il est probable que celle-ci soit annoncée lors de la conférence annuelle de React, prévue mi-mai.

Voici un aperçu des changements envisagés pour React 19 :

• Ajout de Primitives Côté Serveur : L'une des fonctionnalités les plus attendues est l'introduction des server components. Cette nouvelle primitive permettra de rendre des composants directement depuis le backend, offrant ainsi une approche plus directe des données et éliminant le besoin de créer une API externe comme c'est le cas actuellement. Les server actions seront également introduites, facilitant l'envoi de données du frontend vers le backend.
• Simplification pour le SEO : React 19 prendra en charge les balises de métadonnées n'importe où dans les composants, contrairement à la version précédente où seules les balises présentes dans la balise head étaient prises en compte. Cette évolution simplifiera considérablement l'optimisation pour les moteurs de recherche.
• Rendu JSX Plus Rapide : Plusieurs optimisations sont prévues pour accélérer le rendu du JSX, améliorant ainsi les performances globales de React.

Pour rester informé des dernières actualités concernant React 19 et les futures fonctionnalités, suivez de près les annonces officielles de l'équipe React.

‍
Les news en vrac :

• Proposal-Signals : Une proposition pour ajouter les Signals à JavaScript, ce qui pourrait ouvrir de nouvelles possibilités intéressantes 👉 Proposal-Signals
• Diamo : Une librairie pour gérer l'injection de dépendances (DI) qui semble offrir une approche plus simple que Inversify 👉 Diamo ‍
• Colima : Un outil pour optimiser les performances de Docker sur vos machines Mac. COLIMA présente un Docker Engine plus léger et plus optimisé, qui fonctionne de manière efficace 👉COLIMA

‍

À propos de Matters

Matters accompagne les startups et scale-ups à développer des solutions vertueuses pour l'environnement et la société. Nous organisons régulièrement des meetups et des conférences au cours desquelles les intervenants partagent leurs expériences sur des thématiques dédiées. Pour être informé.e de nos prochains événements, inscrivez-vous à notre Newsletter ou suivez-nous sur Linkedin.