Styled-Components è una delle librerie più utilizzate per la realizzazione di CSS-in-JS nel mondo React e da poco ha annunciato che non verranno rilasciati nuovi aggiornamenti e funzionalità, ma la libreria entrerà in modalità di manutenzione.

Puoi leggere la notizia qui

La principale causa è dovuta alla nuova direzione di React nell'uso di Server Components (RSC), così da rendere la Context API non più utilizzabile come prima e rendendo più difficile mantenere styled-components che ne fa largo uso per la gestione dei temi e di stili dinamici.

La seconda motivazione è dovuta al grande utilizzo di Tailwind CSS e CSS Modules che stanno sempre più guadagnando popolarità.

È curioso vedere librerie come @emotion/react che nel tempo si è sempre più diffusa, sicuramente grazie anche a Material UI che l'hanno implementata in sostituzione a styled-components. In tutto ciò, è probabile che la libreria Base UI di MUI, una libreria di componenti React priva di stile predefinito, acquisisca sempre più popolarità.

Le Container Queries sono state introdotte da circa tre anni, ma sorprendentemente molti sviluppatori continuano a utilizzare i vecchi approcci basati sulle media query, spesso ancora lavorando con i pixel come breakpoint!💥

Eppure, le container queries rappresentano una vera e propria "manna dal cielo", semplificando l'applicazione di stili CSS in base alle dimensioni del contenitore invece che della viewport.

Le media query rimangono uno strumento prezioso quando si tratta di definire stili per proprietà globali, come la dimensione della viewport o per la gestione del tema. Tuttavia, quando vogliamo che il design si adatti alla dimensione di un elemento specifico, la soluzione più elegante e flessibile è rappresentata dalle container queries.

Nel mio esempio, ho configurato la classe .wrapper come contenitore principale con l'istruzione container-type: inline-size e ho utilizzato la regola CSS @container (min-width: 12rem) per i suoi elementi figli. In questo modo, quando la sidebar viene utilizzata modifica le dimensioni del contenitore padre e il layout dei figli cambia.

Questa impostazione, permette ai componenti di adattarsi dinamicamente ai cambiamenti del contenitore padre, offrendo una maggiore flessibilità rispetto alle classiche media query che sarebbe necessario cambiare viewport.

<Slider label="Larghezza del contenitore padre"
    className={styles["wrapper"]}>
    <div className={styles["container"]}>
        <div className={styles["button"]}>
            <Google className={styles["icon"]} aria-hidden="true" />
            <span className={styles["text"]}>Google</span>
        </div>
        <div className={styles["button"]}>
            <Angular className={styles["icon"]} aria-hidden="true" />
            <span className={styles["text"]}>Angular</span>
        </div>
    </div>
</Slider>

.wrapper {
  container-type: inline-size;
 
  .container {
    &:before {
      content: none;
    }
 
    .button {
      .icon {
        color: #d1fae5;
        width: 100%;
        height: 100%;
      }
      .text {
        display: none;
      }
    }
    @container (min-width: 12rem) {
      &:before {
        content: "\21E8";
        position: absolute;
      }
      .button {
        display: flex;
        flex-direction: column;
        align-items: center;
 
        .icon {
          border-radius: 0.5rem;
          background: linear-gradient(to top left, #16a34a, #4ade80);
        }
 
        .text {
          font-weight: bold;
        }
      }
    }
  }
}

E a proposito di linguaggi, hai notato che TikTok ha annunciato Lynx? Solamente loro potevano scegliere un "gatto grande" come logo del loro linguaggio di programmazione!😹

Con la funzionalità di React DevTools, puoi monitorare in tempo reale quali componenti vengono renderizzati. Questo ti aiuta a identificare i render inutili e a ottimizzare le prestazioni della tua applicazione.

Vi basta aprire il tab "Components" nell'Inspector, andare nelle impostazioni del tab "General" e attivare "Highlight updates when components render".

In questo modo, ogni volta che un componente viene aggiornato e rifatto il rendering, verrà evidenziato automaticamente!

Nel video, puoi vedere un esempio su una pagina di Airbnb, dove vengono evidenziati i componenti che vengono renderizzati quando modifico il numero di ospiti.