La vigie du numérique #024


Dans cette veille collaborative, on prend de la hauteur et on vous partage tous les mois les inspirations de notre équipe, les pistes de réflexions, les idées nouvelles, mais aussi nos trucs et astuces sur l’UX, l’UI et le développement web.


Ressource

UX Research Tools Map

Un guide illustré et interactif sur le monde, en constante évolution, des logiciels de recherche UX. Les outils sur la carte ont été inclus pour leur pertinence pour la recherche UX et leur popularité selon les données des rapports 2023 State of User Research and AI in UX Research, qui contiennent ensemble les informations de plus de 2 000 chercheurs. On apprécie également l’identité graphique.


Ressource

Color Fuse AI

Une IA qui peut aider dans le choix des palettes de couleurs.


Site Internet

EDESIGN INTERACTIVE

Parce qu’on trouve ce site super joli avec une navigation plus qu’agréable.


Ressource

Marbla

Une magnifique font variable avec la possibilité de tester en direct les différentes variantes.


Dataviz

Topographie humaine par Perrin Remonté

Une carte ou les villes deviennent des montagnes et les campagnes deviennent des mers et océans. Une vision originale et surpenante !


Ressource

Pack Textures

Un pack de textures gratuit, toujours pratique à ajouter à sa bibliothèque 😉


Expérience web

Foney Fonts

Un jeu pour s’entrainer à bien connaître ses fonts 😉 Plutôt amusant.


Direction artistique

Startify

Une direction artistique, simple et épurée par Startify.


Dev Tips du mois

Fonction useTransition

La fonction useTransition est une fonctionnalité de React permettant de gérer les transitions d’éléments d’un composant.

Par défaut, toutes les mises à jour de l’état sont considérées comme urgentes (de haute priorité) en React. De plus, comme les deux changements d’état se produisent presque simultanément, React les regroupera et les mettra à jour ensemble. C’est une bonne stratégie car le composant se réaffiche à chaque mise à jour de l’état. Cependant trop de réaffichages peuvent détériorer l’expérience de l’application.

Dans l’exemple qui suit, le premier changement d’état mettra peu de temps à mettre à jour la valeur de la zone de texte de recherche. Le deuxième peut prendre plus de temps à filtrer une énorme liste d’utilisateurs. Ici, la fonction useTransition nous permet de ne pas définir ce changement d’état comme prioritaire et d’attendre la fin de son exécution avant rerendre le composant.

import React, { useState, useTransition } from 'react';

export default function App({ users }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [filtered, setFiltered] = useState(users);
  const [isPending, startTransition] = useTransition();

  const handleChange = ({ target: { value } }) => {
    setSearchTerm(value);
    startTransition(() => {
      setFiltered(users.filter((item) => item.name.includes(value)));
    });
  };

  return (
    <div className="container">

      <div>
        {
          isPending ? (
            <div>Loading...</div>
          ) : (
            <p>
              {
                 users.length !== filtered.length 
                 ? `${filtered.length} matches` 
                 : null
              } 
            </p>
          )
        }
      </div>

      <input 
        onChange={handleChange} 
        value={searchTerm} 
        type="text"
        placeholder="Type a name" />

      {
        isPending ? (
          <div>Loading...</div>
        ) : (
          <div className="cards">
            {filtered.map((user) => (
              <div class="card">
                <div className="profile">
                  <img 
                    src={user.avatar} 
                    alt="Avatar" />
                </div>
                <div className="body">
                  <strong>{user.name}</strong>
                </div>
              </div>
            ))}
          </div>
        )}
    </div>
  );
}Langage du code : JavaScript (javascript)