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

Există o mulțime de articole „Tendințe de design de urmat” care plutesc pe web. De asemenea, ne-am îndreptat spre unul din Tendințele fierbinți în design web de urmat în 2022. Accentul pe astfel de articole este foarte de înțeles – designul în sine este ceea ce văd atât un client, cât și un vizitator. Codul din spatele acestuia, cu toate acestea, este în mare parte irelevant pentru majoritatea utilizatorilor.

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

Așadar, pentru a acorda respectul cuvenit tuturor dezvoltatorilor front-end, precum și câteva perspective și idei designerilor, am întocmit această listă de „Tendințe front-end de urmat în 2022”.

1. Proprietăți personalizate CSS

Este ceva ce dezvoltatorii și-au dorit de ani de zile, chiar dacă proprietățile personalizate CSS (sau cunoscute și ca variabile CSS) există de ceva vreme. De exemplu, Modulul W3C Nivelul 1 este din 2015. Dar, ca în cazul oricărei tehnologii noi, este nevoie de 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 începuturile sale.

De ce este cool?

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

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

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

2. Fonturi variabile

Fonturile variabile, la fel ca CSS Custom Properties 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 web pe care le puteți utiliza pentru a naviga și a experimenta este Fonturile 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ă

De ce este cool?

Ei bine, este clar că ne oferă nouă, dezvoltatorilor (și designerilor), libertate aproape infinită asupra modului în care arată un font. Te-ai gândit vreodată că "font-weight: bold" este puțin prea mult, dar „normal” este prea subțire și nu ai nimic între ele?

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

Există un alt avantaj uriaș al fonturilor variabile. După cum probabil știți bine, fonturile contribuie semnificativ la timpii de încărcare . Atât în ​​ceea ce privește lățimea de bandă, cât și redarea pe ecran. O solicitare 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ă această bunătate, poți trece cu ușurință peste 500 kb. Cu un font variabil, ai nevoie doar de un font și primești toate celelalte variante. O cerere.

Puteți citi mai multe despre Fonturi variabile: Introducere în fonturile variabile pe web.

3. Mai mult JavaScript!

Acesta este un titlu „alcător”, 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 întrebi, pot apărea conversații foarte aprinse cu comentarii de genul „Da, și în zilele noastre, nici măcar nu poți deschide un site dacă nu ai JS activat” sau „mulțumesc pentru se încarcă glisoare și reclame de 5 MB pentru pagina Despre”.

Dar oricâte laturi pozitive și negative are, utilizarea sa crește. Deci, ce tehnologie/abordare/instrumente bazate pe JS ar trebui să aibă mai multă tendință?

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

Și pentru a adăuga un alt motiv grozav 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. Doar cu JS, puteți face un front-end reactiv, îl puteți conecta la un spațiu de stocare de date, puteți utiliza API-urile browserului pentru cea mai bună experiență de utilizator și puteți implementa proiectul în direct. Orice ajustări ale setărilor se pot face cu ușurință în configurare.

4. Styling bazat pe utilitate

Stilul bazat pe utilitate se concentrează pe aplicarea stilurilor prin clase predefinite. Acesta este ceea ce înseamnă în general stilul unei pagini web. Cu toate acestea, aici este puțin diferit de abordarea standard. Vezi, nu dai stil unui .card cu umbră, fundal etc. Dai stil unui element HTML cu .shadow și .bg-light și .br-5 (cum ar fi raza-chenar).

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

Acest lucru nu este deloc nou, dar popularitatea Tailwind i-a făcut pe dezvoltatori să-și reconsidere abordarea.

Sursă

Unii ar putea argumenta că este mai mult „a scrie CSS în HTML” în care nu poți schimba cu adevărat o componentă din CSS și să o actualizezi peste tot. Din punct de vedere tehnic, este adevărat, dar atunci când componentele dvs. sunt fișiere JS într-o aplicație React/Vue, de exemplu, atunci le actualizați într-un singur loc.

Poate unul 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ă la multe probleme. De asemenea, nu vei ști niciodată dacă funcționează pentru tine până când nu îl încerci cu adevărat.

5. Noi caracteristici CSS

Utilizarea noilor funcții CSS poate fi o tendință tehnologică front-end în sine. Deși nu este o modificare a unei anumite caracteristici sau abordări, provoacă modul în care am codificat până acum. Profesionistii? Rezolvă multe probleme. Răul? Compatibilitate inversă.

Dar, datorită progresului vânzătorilor de browsere în ultimii ani sau doi (căutându-mă la tine, Microsoft), majoritatea utilizatorilor din întreaga lume pot accesa web-ul mai eficient decât oricând.

Sursă

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

Moduri de scriere

Deși nu este folosit prea des, deoarece mulți dezvoltatori rareori au nevoie să accepte limbile de la dreapta la stânga, modurile de scriere există. 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 margin-left la margin-right pentru RTL.

Subgrid CSS

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

:is

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

 /* Selectează orice paragraf în interiorul unui antet, principal
sau element de subsol care este plasat cu mouse-ul */
:is(header, main, footer) p:hover {
culoarea rosie;
cursor: pointer;
}

 /* Cele de mai sus sunt echivalente cu următoarele */
antet p:hover,
p principal: hover,
subsol p:hover {
culoarea rosie;
cursor: pointer;
}

Încheierea

Multe s-au schimbat cu tendințele front-end de-a lungul anilor, iar îmbunătățirile vor continua să apară. Dacă doriți un site web care să vă ofere conversiile și veniturile pe care le doriți, atunci ar trebui să începeți să lucrați la codificarea front-end de îndată ce acum. Clienții dvs. ar trebui să poată folosi pagina dvs. web cu ușurință, astfel încât să fie încurajați să interacționeze cu afacerea dvs.

Încercați să implementați tendințele front-end pe care le-am menționat mai sus și spuneți-ne cum v-a ajutat afacerea să se dezvolte.