5 tendințe front-end de urmat în 2021

Există o mulțime de articole „Tendințe de proiectare de urmat” care plutesc pe web. De asemenea, ne-am pus accentul pe unul din Hot Web Design Trends de urmat în 2021. Accentul pe astfel de articole este foarte ușor de înțeles - designul în sine este ceea ce văd atât clientul, cât și vizitatorul. Totuși, codul din spatele acestuia este irelevant pentru majoritatea utilizatorilor.

Dar, deși pare irelevant, desigur, este foarte important. Codul curat, abordările optimizate și noile tehnici sunt cele care permit dezvoltatorilor să prezinte modele frumoase într-un mod care să poată fi scalat. Performanța este ceea ce își doresc utilizatorii, scalabilitatea este ceea ce dorește clientul.

Deci, pentru a oferi un respect cuvenit tuturor dezvoltatorilor front-end, precum și câteva idei și idei pentru designeri, am compilat această listă cu „Front-End Trends to Follow in 2021”.

1. Proprietăți personalizate CSS

Acest lucru este ceva ce dezvoltatorii și-au dorit de ani de zile, chiar dacă proprietățile CSS Custom (sau cunoscute și sub numele de Variabile CSS) există de ceva vreme. De exemplu, modulul W3C Nivelul 1 este din 2015. Dar, ca și în cazul oricărei tehnologii noi, durează ceva timp pentru a obține tracțiune. Și credem că, în 2021, vom vedea unele dintre cele mai mari rate de adopție de la înființare.

De ce este cool?

Proprietățile personalizate sunt de fapt variabile în CSS. Ați putea spune „Dar avem variabile în Sass, nu-i așa?” Da facem! Dar când compilezi Sass în CSS, primești, bine, CSS. Și nu există variabile. Nu mai puteți schimba valoarea acelei variabile. $primary: red este doar roșu.

Proprietățile personalizate sunt bine acceptate peste tot, cu excepția Internet Explorer

Cu toate acestea, cu proprietăți personalizate, aveți --primary: red . Și apoi puteți redefini - --primary spre albastru, de exemplu. Direct în browser, nu este necesară compilarea. Pentru a afla mai multe despre aceste trucuri CSS Care este diferența dintre variabilele CSS și variabilele preprocesatorului?

Un hack elegant pentru a le utiliza este pentru tematizarea personalizată. Puteți defini valorile HSL prin variabile și apoi permiteți utilizatorilor să schimbe nuanța printr-un glisor de pe frontend. Conectați valoarea glisorului la variabila CSS cu JS și BAM cu funcționalitatea „Setați schema de culori”.

2. Fonturi variabile

Fonturi variabile, la fel ca proprietățile personalizate CSS, există de ceva vreme, dar încă nu sunt utilizate pe scară largă. Un motiv ar fi timpul de care au nevoie pentru a deveni mai populari, numărul de tutoriale / ghiduri și tehnici pentru a fi adoptate de dezvoltatori, precum și fonturile în sine necesare. Nu puteți alege orice font și să-i aplicați modificări.

Unul dintre site-urile accesibile pe care le puteți utiliza pentru a naviga și a experimenta este Fonturi variabile. De asemenea, servește ca o demonstrație bună în cazul în care auziți acest termen pentru prima dată. Fonturile variabile vă permit să utilizați un singur fișier și să aplicați proprietăți precum "font-weight" sau "font-style" cu control complet asupra cantității de grosime sau înclinare ...

Sursă: Introducere în fonturi variabile de pe web

De ce este cool?

Ei bine, este clar că ne oferă, dezvoltatorilor (și designerilor), o libertate aproape infinită în ceea ce privește aspectul unui font. V-ați gândit vreodată că "font-weight: bold" este puțin prea mult, dar „normal” este prea subțire și nu aveți nimic între ele?

Designerii de fonturi sunt foarte conștienți de acest lucru și oferă adesea proprietăți de mijloc. Le etichetează cu numere precum 100 (ușor) sau 900 (foarte gros) și orice altceva între ele, cum ar fi 300, 400, 600, 700 etc. Dar poate ai nevoie de 750 Și nu este disponibil? Acum, cu fonturi variabile, da!

Există un alt beneficiu imens pentru fonturile variabile. Așa cum probabil știți bine, fonturile sunt mari contribuabili la încărcarea timpilor . Atât în ​​ceea ce privește lățimea de bandă, cât și redarea pe ecran. O cerere destul de standard ar putea arăta astfel:

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

Cu toată acea bunătate, puteți trece cu ușurință peste 500kb. Cu un font variabil, aveți nevoie doar de un font și primiți toate celelalte variante. O cerere.

Puteți citi în continuare pe Fonturi variabile: Introducere în fonturi variabile de pe web.

3. Mai mult JavaScript!

Acesta este un titlu „cu ochii”, dar este adevărat! Dezvoltatorii front-end nu sunt doar „dezvoltatori JS”, ​​ci și dezvoltatori „CSS / HTML”. Și această rubrică este pentru ei.

JavaScript nu este doar o tendință, deși, în funcție de cine întrebați, pot apărea conversații foarte aprinse cu comentarii precum „Da, și în zilele noastre, nici măcar nu puteți deschide un site web dacă nu aveți JS activat” sau „haks se încarcă glisante și anunțuri de 5 MB pentru pagina dvs. Despre ”.

Dar, indiferent de câte părți pozitive și negative are, utilizarea sa crește. Deci, ce tehnologie / abordare / instrumente bazate pe JS ar trebui să tendință mai mult?

• React / Vue ca front pentru CMS-uri precum WordPress (fără cap)
• WebGL (Three.js) Grafică 3D, simulări, interactivitate
• Conținut VR și AR
• Fluxuri de lucru de construcție mai optimizate (webpack, gulp)
• API-uri pentru browser pentru mai mult control / funcționalitate

Și pentru a adăuga un alt motiv excelent pentru a vă scufunda mai adânc în el - cu doar JS, puteți construi din punct de vedere tehnic aproape orice dimensiune doriți. Cu doar JS, puteți face un frontend reactiv, îl puteți conecta la unele stocări de date, puteți utiliza API-urile browserului pentru cea mai bună experiență de utilizator și puteți implementa proiectul dvs. în direct. Orice ajustare a setărilor poate fi făcută cu ușurință în configurare.

4. Styling bazat pe utilități

Stilul bazat pe utilități se concentrează pe aplicarea stilurilor prin clase predefinite. Asta înseamnă în general stilul unei pagini web. Cu toate acestea, aici este puțin diferit de abordarea standard. Vedeți, nu .card o .card cu umbră, fundal etc. .shadow un element HTML cu .shadow și .bg-light și .br-5 (cum ar fi border-radius).

Este o abordare care funcționează uimitor de bine pentru dezvoltatorii JS care trebuie doar să producă ceva rapid și nu sunt îngrijorați de CSS.

Acest lucru nu este deloc nou, dar popularitatea Tailwind a făcut ca dezvoltatorii să reconsidere abordarea.

Pagina de pornire Tailwind

Unii ar putea susține că este destul de mult „scrierea CSS în HTML” în care nu puteți schimba cu adevărat o componentă din CSS și să o actualizați peste tot. Punct de vedere tehnic, acest lucru este adevărat, dar atunci când componentele sunt fișiere JS într - un React / app Vue de exemplu, atunci le actualizați într - un singur loc.

Poate că una dintre dezavantaje este că trebuie să înveți un alt cadru. Nu este ca și cum ar fi doar CSS, trebuie să memorați proprietățile, deoarece unele elemente ar putea arăta astfel:

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

Deși vor exista întotdeauna oameni care îl iubesc (și îl urăsc), este o soluție excelentă pentru multe probleme. De asemenea, nu vei ști niciodată dacă funcționează pentru tine până nu o încerci cu adevărat .

5. Noi caracteristici CSS

Utilizarea noilor caracteristici CSS poate fi o tendință în sine. Deși nu este o schimbare la o anumită caracteristică sau abordare, aceasta provoacă modul în care am codat până acum. Profesionistii? Rezolvă multe probleme. Răul? Compatibilitate inversă.

Dar, datorită progresului vânzătorilor de browser-uri în ultimul an sau doi (privindu-vă, Microsoft), majoritatea utilizatorilor din întreaga lume pot accesa webul mai eficient decât oricând.

CSS Shadow Parts ca o altă caracteristică viitoare

Proprietățile personalizate CSS sunt una dintre aceste caracteristici, dar având aproximativ 5 ani (și destul de importantă) are propria secțiune.

Moduri de scriere

Deși nu sunt utilizate prea des, deoarece mulți dezvoltatori rareori trebuie să accepte limbile de la dreapta la stânga, există moduri de scriere. Acestea sunt o necesitate pentru tablouri de bord / cadre și site-uri multilingve. Datorită suportului sporit al proprietăților de scriere direcțională, cum ar fi margin-inline-start, de exemplu, nu trebuie să suprascrieți marginea-stânga la marginea-dreapta pentru RTL.

Subgrilă CSS

Am avut flex, apoi am avut grile. Acum, avem grile în interiorul grilelor . Subgrilele sunt ceva ce se așteaptă ca dezvoltatorii să fie disponibile din momentul în care Grid a fost acceptat pentru prima dată. Ei bine, acum îl avem și este la fel de mișto și util pe cât pare. Mențiune de onoare: golurile Flexbox (deoarece face parte și din rețele). Face ceea ce spune. Din păcate, nu este încă bine acceptat.

:is

Un selector de stenogramă care este cel mai bine explicat cu un fragment de cod pe care l-am luat de la MDN:

 / * Selectează orice paragraf dintr-un antet, principal
sau element de subsol care este planat * /
: este (antet, principal, subsol) p: hover {
culoarea rosie;
cursor: indicator;
}

 / * Cele de mai sus sunt echivalente cu următoarele * /
antetul p: plasați,
p principal: plasați,
subsol p: hover {
culoarea rosie;
cursor: indicator;
}