5 tendenze front-end da seguire nel 2021

Ci sono un sacco di articoli "Tendenze del design da seguire" che fluttuano nel web. Ne abbiamo anche messo uno in Hot Web Design Trends da seguire nel 2021. L'attenzione su questi 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 anche se sembra irrilevante, ovviamente, è molto importante. Codice pulito, approcci ottimizzati e nuove tecniche sono ciò che consente agli sviluppatori di presentare splendidi progetti in 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 e ad alcune intuizioni e idee per i designer, abbiamo compilato questo elenco di "Tendenze front-end da seguire nel 2021".

1. Proprietà personalizzate CSS

Questo è qualcosa che gli sviluppatori desiderano da anni, anche se le proprietà CSS personalizzate (o anche note come variabili CSS) esistono 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ù alti tassi di adozione sin dal suo inizio.

Perché è bello?

Le proprietà personalizzate sono infatti variabili nei CSS. Potresti dire "Ma abbiamo 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.

Le proprietà personalizzate sono ben supportate ovunque tranne che per Internet Explorer

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

Un trucco per usarli è per il tema personalizzato. È possibile definire i valori HSL tramite variabili e quindi consentire agli utenti di modificare la tonalità tramite uno slider sul frontend. Collega il valore dello slider alla variabile CSS con JS e BAM con la funzionalità "Imposta il tuo schema di colori".

2. Caratteri variabili

I caratteri variabili, proprio come le proprietà personalizzate CSS, esistono da un po ', ma non sono ancora ampiamente utilizzati. Uno dei motivi sarebbe 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 carattere e applicare le modifiche ad esso.

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

Fonte: introduzione ai caratteri variabili sul Web

Perché è bello?

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

I progettisti di caratteri ne sono ben consapevoli e spesso forniscono proprietà intermedie. Li etichettano con numeri come 100 (leggero) o 900 (molto spesso) e qualsiasi cosa tra 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 notevolmente ai tempi di caricamento . Sia in termini di larghezza di banda che di rendering sullo schermo. Una richiesta piuttosto standard potrebbe essere simile 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 andare oltre i 500kb. Con un carattere variabile, hai solo bisogno di un carattere e ricevi tutte le altre variazioni. Una richiesta.

Puoi leggere ulteriori informazioni sui caratteri variabili: Introduzione ai caratteri variabili sul web.

3. Più JavaScript!

Questo è un titolo strabiliante, 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 oggigiorno non puoi nemmeno aprire un sito web se non hai JS abilitato" o "grazie caricamento di dispositivi di scorrimento e annunci da 5 MB per la pagina Informazioni ".

Ma non importa quanti lati positivi e negativi abbia, il suo utilizzo cresce. Quindi, quale tecnologia / approccio / strumentazione basata su JS dovrebbe avere una tendenza maggiore?

• React / Vue come copertura per CMS come WordPress (headless)
• WebGL (Three.js) Grafica 3D, simulazioni, 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 approfondirlo: solo con JS, puoi tecnicamente costruire quasi tutti i progetti di dimensioni che desideri. Con solo JS, puoi creare un frontend reattivo, collegarlo ad alcuni archivi di dati, utilizzare le API del browser per la migliore esperienza utente e distribuire il tuo progetto dal vivo. Qualsiasi regolazione delle impostazioni può essere eseguita facilmente nella configurazione.

4. Styling basato sull'utilità

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

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

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

Homepage di Tailwind

Alcuni potrebbero obiettare che si tratta praticamente di "scrivere CSS in HTML" in cui non è possibile modificare un componente da CSS e aggiornarlo ovunque. Tecnicamente, questo è vero, ma quando i componenti sono file JS in un Reagire / Vue app per esempio, allora si aggiornano in un unico luogo.

Forse uno degli svantaggi è 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 proverai davvero .

5. Nuove funzionalità CSS

L'utilizzo di nuove funzionalità CSS può essere una tendenza in sé. Sebbene non sia una modifica a una funzionalità o approccio specifico, sfida il modo in cui abbiamo programmato finora. I pro? Risolve molti problemi. Il cattivo? Retrocompatibilità.

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

CSS Shadow Parts come un'altra funzionalità imminente

Le proprietà CSS personalizzate sono una di queste funzionalità, ma avendo circa 5 anni (e abbastanza importanti) ha una propria sezione.

Modalità di scrittura

Sebbene non siano utilizzate 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 margin-left in margin-right per RTL.

Sottogriglia CSS

Avevamo la flessibilità, poi le griglie. Ora, abbiamo griglie all'interno di griglie . Le griglie secondarie sono qualcosa che gli sviluppatori si aspettavano di 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: Flexbox gaps (in quanto fa parte anche delle griglie). Fa quello che dice. Purtroppo, non è ancora ben supportato.

:is

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

 / * Seleziona qualsiasi paragrafo all'interno di un'intestazione, main
o un piè di pagina su cui si passa il mouse
: is (header, main, footer) p: hover {
colore rosso;
cursore: puntatore;
}

 / * Quanto sopra è equivalente al seguente * /
intestazione p: hover,
main p: hover,
footer p: hover {
colore rosso;
cursore: puntatore;
}