5 tendenze di front-end da seguire nel 2022

Ci sono un sacco di articoli "Tendenze di design da seguire" che circolano sul web. Ne abbiamo anche inserito uno in Hot Web Design Trends da seguire nel 2022. L'attenzione su tali articoli è molto comprensibile: il design stesso è ciò che vedono sia un cliente che un visitatore. Il codice alla base, tuttavia, è per lo più irrilevante per la maggior parte degli utenti.

Ma mentre sembra irrilevante, ovviamente, è molto importante. Codice pulito, approcci ottimizzati e nuove tecniche sono ciò che consente agli sviluppatori di presentare splendidi progetti in un modo scalabile. Le prestazioni sono ciò che vogliono gli utenti, la scalabilità è ciò che vuole il cliente.

Quindi, per dare un po' di rispetto a tutti gli sviluppatori front-end, nonché alcune intuizioni e idee ai designer, abbiamo compilato questo elenco di "Tendenze del front-end da seguire nel 2022".

1. Proprietà personalizzate CSS

Questo è qualcosa che gli sviluppatori desideravano da anni anche se le proprietà CSS personalizzate (o anche conosciute come variabili CSS) sono in circolazione da un po' di tempo. Ad esempio, il modulo W3C di livello 1 è del 2015. Ma come con qualsiasi nuova tecnologia, ci vuole un po' per ottenere trazione. E crediamo che nel 2021 vedremo alcuni dei più grandi tassi di adozione dal suo inizio.

Perché è bello?

Le proprietà personalizzate sono, infatti, variabili nei CSS. Potresti dire "Ma abbiamo delle variabili in Sass, vero?" Sì, lo facciamo! Ma quando compili Sass in CSS, ottieni, beh, CSS. E non ci sono variabili. Non è più possibile modificare il valore di quella variabile. $primary: red è solo rosso.

Tuttavia, con le proprietà personalizzate, hai --primary: red . E poi puoi ridefinire --primary in blu per esempio. Direttamente nel browser, non è necessaria alcuna compilazione. Per saperne di più su questi trucchi CSS, dai un'occhiata a questo articolo: Qual è la differenza tra le variabili CSS e le variabili del preprocessore?

Un bel trucco per usarli è per i temi personalizzati. Puoi definire i valori HSL tramite variabili e quindi consentire agli utenti di modificare la tonalità tramite un dispositivo di scorrimento sul frontend. Collega il valore del cursore alla variabile CSS con JS e BAM con la funzionalità "Imposta la tua combinazione di colori".

2. Caratteri variabili

I caratteri variabili, proprio come le proprietà personalizzate CSS, sono in circolazione da un po', ma non sono ancora ampiamente utilizzati. Uno dei motivi potrebbe essere il tempo necessario per diventare più popolari, il numero di tutorial/guide e tecniche per essere adottati dagli sviluppatori, nonché i caratteri stessi necessari. Non puoi semplicemente scegliere un font e applicarvi le modifiche.

Uno dei siti Web di riferimento che puoi utilizzare per navigare e sperimentare è Variable Fonts. Serve anche come una buona dimostrazione nel caso in cui ascolti questo termine per la prima volta. I caratteri variabili ti consentono di utilizzare un singolo file e applicare proprietà come "font-weight" o "font-style" con il controllo completo sulla quantità di spessore o inclinazione...

Fonte

Perché è bello?

Bene, è chiaro che offre a noi, agli sviluppatori (e ai designer), una libertà quasi infinita sull'aspetto di un font. Hai mai pensato che "font-weight: bold" sia un po' troppo, ma "normal" è troppo sottile e non hai niente in mezzo?

I progettisti di font ne sono ben consapevoli e spesso forniscono proprietà intermedie. Li etichettano con numeri come 100 (leggero) o 900 (molto spesso) e qualsiasi cosa nel mezzo come 300, 400, 600, 700, ecc. Ma forse hai bisogno di 750 E non è disponibile? Ora, con i caratteri variabili, lo fai!

C'è un altro enorme vantaggio per i caratteri variabili. Come probabilmente saprai, i caratteri contribuiscono in larga misura ai tempi di caricamento . Sia in termini di larghezza di banda che di rendering su schermo. Una richiesta piuttosto standard potrebbe assomigliare a questa:

• headings-font-normal.woff2
• headings-font-bold.woff2
• body-normal.woff2
• body-italic.woff2
• body-bold.woff2

Con tutta quella bontà, puoi facilmente superare i 500kb. Con un font variabile, hai solo bisogno di un font e ricevi tutte le altre varianti. Una richiesta.

Puoi leggere ulteriormente i caratteri variabili: Introduzione ai caratteri variabili sul web.

3. Più JavaScript!

Questo è un titolo “straordinario”, ma è vero! Gli sviluppatori front-end non sono solo "sviluppatori JS", ma anche solo sviluppatori "CSS/HTML". E questa rubrica è per loro.

JavaScript non è solo una tendenza, anche se a seconda di chi chiedi, potrebbero verificarsi conversazioni molto accese con commenti come "Sì, e al giorno d'oggi non puoi nemmeno aprire un sito Web se non hai abilitato JS" o "grazie per caricamento di slider e annunci da 5 MB per la tua pagina Informazioni”.

Ma non importa quanti lati positivi e negativi abbia, il suo utilizzo cresce. Quindi, quale tecnologia/approccio/strumento basato su JS dovrebbe essere più di tendenza?

• React/Vue come copertura per CMS come WordPress (senza testa).
• WebGL (Three.js) Grafica 3D, simulazioni e interattività.
• Contenuti VR e AR.
• Flussi di lavoro di compilazione più ottimizzati (webpack, gulp).
• API del browser per un maggiore controllo/funzionalità.

E per aggiungere un altro ottimo motivo per approfondire: con solo JS, puoi tecnicamente costruire quasi tutti i progetti di dimensioni che desideri. Con solo JS, puoi creare un frontend reattivo, collegarlo a un archivio dati, utilizzare le API del browser per la migliore esperienza utente e distribuire il tuo progetto in tempo reale. Eventuali modifiche alle impostazioni possono essere eseguite facilmente nella configurazione.

4. Stile basato sull'utilità

Lo stile basato sull'utilità si concentra sull'applicazione degli stili attraverso classi predefinite. Questo è ciò che generalmente significa lo stile di una pagina web. Tuttavia, qui è un po' diverso dall'approccio standard. Vedi, non stilizzi una .card con ombra, sfondo, ecc. Stili un elemento HTML con .shadow e .bg-light e .br-5 (come border-radius).

È un approccio che funziona straordinariamente bene per gli sviluppatori JS che hanno solo bisogno di produrre rapidamente qualcosa e non sono preoccupati per il CSS.

Non è affatto una novità, ma la popolarità di Tailwind ha indotto gli sviluppatori a riconsiderare l'approccio.

Fonte

Alcuni potrebbero obiettare che è praticamente "scrivere CSS in HTML" in cui non puoi davvero cambiare un componente da CSS e averlo aggiornato ovunque. Tecnicamente, questo è vero, ma quando i tuoi componenti sono file JS in un'app React/Vue, ad esempio, li aggiorni in un unico posto.

Forse uno degli aspetti negativi è che devi imparare un altro framework. Non è solo CSS, devi memorizzare le proprietà poiché alcuni elementi potrebbero assomigliare a questo:

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

Anche se ci saranno sempre persone che lo amano (e lo odiano), è un'ottima soluzione a molti problemi. Inoltre, non saprai mai se funziona per te finché non lo provi davvero.

5. Nuove funzionalità CSS

L'utilizzo delle nuove funzionalità CSS può essere di per sé una tendenza tecnologica di front-end. Anche se non è una modifica a una caratteristica o un approccio specifico, mette in discussione il modo in cui abbiamo codificato finora. I pro? Risolve molti problemi. Il cattivo? Retrocompatibilità.

Ma grazie ai progressi dei fornitori di browser nell'ultimo anno o due (guardando a te, Microsoft), la maggior parte degli utenti in tutto il mondo può accedere al Web in modo più efficiente che mai.

Fonte

Le proprietà CSS personalizzate sono una di queste caratteristiche, ma avendo circa 6 anni (e piuttosto importanti), ha una sua sezione.

Modalità di scrittura

Sebbene non venga utilizzato troppo spesso, poiché molti sviluppatori raramente hanno bisogno di supportare le lingue da destra a sinistra, esistono modalità di scrittura. Sono un must per dashboard/framework e siti multilingue. Grazie al maggiore supporto delle proprietà di scrittura direzionale come margin-inline-start, ad esempio, non è necessario sovrascrivere da margine sinistro a margine destro per RTL.

Sottogriglia CSS

Avevamo flex, poi avevamo le griglie. Ora abbiamo le griglie all'interno delle griglie . Le sottogriglie sono qualcosa che gli sviluppatori dovrebbero essere disponibili immediatamente quando Grid è stato supportato per la prima volta. Bene, ora ce l'abbiamo ed è bello e utile come sembra. Menzione d'onore: lacune Flexbox (poiché anche fa parte delle griglie). Fa quello che dice.

:is

Un selettore abbreviato che è meglio spiegato con uno snippet di codice che abbiamo preso da MDN:

 /* Seleziona qualsiasi paragrafo all'interno di un'intestazione, principale
o elemento del piè di pagina che viene posizionato al passaggio del mouse */
:is(intestazione, principale, piè di pagina) p:hover {
colore rosso;
cursore: puntatore;
}

 /* Quanto sopra equivale a quanto segue */
intestazione p: passa il mouse,
p principale: passa il mouse,
piè di pagina p: passa il mouse {
colore rosso;
cursore: puntatore;
}

Avvolgendo

Molto è cambiato con le tendenze del front-end nel corso degli anni e i miglioramenti continueranno ad arrivare. Se desideri un sito Web che ti dia le conversioni e le entrate che desideri, dovresti iniziare a lavorare sulla tua codifica front-end non appena ora. I tuoi clienti dovrebbero essere in grado di utilizzare la tua pagina web con facilità in modo da essere incoraggiati a interagire con la tua attività.

Prova a implementare le tendenze del front-end che abbiamo menzionato sopra e facci sapere in che modo ha aiutato la tua attività a crescere.