5 trendów front-end do naśladowania w 2022 r.

W sieci pojawia się mnóstwo artykułów „Trendy projektowe do naśladowania”. Skupiliśmy się również na jednym z trendów Hot Web Design do naśladowania w 2022 roku. Skupienie się na takich artykułach jest bardzo zrozumiałe – sam projekt jest tym, co widzą zarówno klient, jak i odwiedzający. Jednak stojący za nim kod jest w większości nieistotny dla większości użytkowników.

Ale choć wydaje się to nieistotne, oczywiście jest bardzo ważne. Czysty kod, zoptymalizowane podejścia i nowe techniki umożliwiają programistom prezentowanie pięknych projektów w sposób, który można skalować. Wydajność jest tym, czego chcą użytkownicy, skalowalność jest tym, czego chce klient.

Tak więc, aby oddać należny szacunek wszystkim programistom front-end, a także kilka spostrzeżeń i pomysłów projektantom, przygotowaliśmy tę listę „Trendów front-endowych do naśladowania w 2022 roku”.

1. Niestandardowe właściwości CSS

Jest to coś, czego programiści chcieli od lat, mimo że niestandardowe właściwości CSS (lub znane również jako zmienne CSS) istnieją już od jakiegoś czasu. Na przykład W3C Module Level 1 pochodzi z 2015 roku. Ale jak w przypadku każdej nowej technologii, uzyskanie przyczepności zajmuje trochę czasu. Wierzymy, że w 2021 r. zobaczymy jedne z największych wskaźników adopcji od czasu jego powstania.

Dlaczego to jest fajne?

Właściwości niestandardowe są w rzeczywistości zmiennymi w CSS. Możesz powiedzieć „Ale w Sass mamy zmienne, prawda?” Tak! Ale kiedy kompilujesz Sassa do CSS, otrzymujesz, cóż, CSS. I nie ma zmiennych. Nie możesz już zmienić wartości tej zmiennej. $primary: red to po prostu czerwony.

Jednak w przypadku właściwości niestandardowych masz --primary: red . A potem możesz na przykład przedefiniować --primary na niebieski. Bezpośrednio w przeglądarce nie jest wymagana kompilacja. Aby dowiedzieć się więcej o tych sztuczkach CSS, zapoznaj się z tym artykułem: Jaka jest różnica między zmiennymi CSS a zmiennymi preprocesora?

Jeden fajny hack, aby ich użyć, dotyczy niestandardowego motywu. Możesz zdefiniować wartości HSL za pomocą zmiennych, a następnie zezwolić użytkownikom na zmianę odcienia za pomocą suwaka na interfejsie. Połącz wartość suwaka ze zmienną CSS za pomocą JS i BAM za pomocą funkcji „Ustaw swój schemat kolorów”.

2. Zmienne czcionki

Czcionki zmienne, podobnie jak niestandardowe właściwości CSS, istnieją już od jakiegoś czasu, ale nadal nie są powszechnie używane. Jednym z powodów jest czas, jaki potrzebują, aby stać się bardziej popularnymi, liczba samouczków/przewodników i technik, które muszą zostać zaadaptowane przez programistów, a także potrzebne czcionki. Nie możesz po prostu wybrać dowolnej czcionki i zastosować do niej zmiany.

Jedną z witryn, do których możesz się udać, aby przeglądać i eksperymentować, są czcionki zmienne. Służy również jako dobre demo w przypadku, gdy słyszysz ten termin po raz pierwszy. Czcionki zmienne pozwalają używać jednego pliku i stosować właściwości, takie jak "font-weight" lub "font-style" z pełną kontrolą nad grubością lub pochyleniem…

Źródło

Dlaczego to jest fajne?

Cóż, jasne jest, że daje nam, programistom (i projektantom), niemal nieskończoną swobodę w wyglądzie czcionki. Czy kiedykolwiek myślałeś, że "font-weight: bold" to trochę za dużo, ale „normalne” jest zbyt cienkie i nie masz nic pomiędzy?

Projektanci fontów doskonale zdają sobie z tego sprawę i często zapewniają pośrednie właściwości. Oznaczają je liczbami takimi jak 100 (lekki) lub 900 (bardzo gruby) i czymś pomiędzy, jak 300, 400, 600, 700 itd. Ale może potrzebujesz 750 i nie jest dostępny? Teraz, dzięki czcionkom zmiennym, już tak!

Czcionki zmienne mają jeszcze jedną ogromną zaletę. Jak zapewne dobrze wiesz, czcionki mają duży wpływ na czas ładowania . Zarówno pod względem przepustowości, jak i renderowania na ekranie. Dość standardowe żądanie może wyglądać tak:

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

Przy całej tej dobroci możesz z łatwością przekroczyć 500 kb. W przypadku czcionki zmiennej potrzebujesz tylko jednej czcionki, a otrzymasz wszystkie inne odmiany. Jedna prośba.

Możesz przeczytać więcej na temat czcionek zmiennych: wprowadzenie do czcionek zmiennych w Internecie.

3. Więcej JavaScript!

To tytuł, który przyciąga wzrok, ale to prawda! Programiści Front-End to nie tylko programiści „JS”, ale także programiści „CSS/HTML”. I ten nagłówek jest dla nich.

JavaScript to nie tylko trend, chociaż w zależności od tego, kogo zapytasz, mogą pojawić się bardzo gorące rozmowy z komentarzami typu „Tak, a w dzisiejszych czasach nie możesz nawet otworzyć strony internetowej, jeśli nie masz włączonej obsługi JS” lub „podziękowania za ładowanie suwaków i reklam o wielkości 5 MB na stronę z informacjami”.

Ale bez względu na to, ile ma pozytywnych i negatywnych stron, jego użycie rośnie. Więc, która technologia/podejście/narzędzie oparte na JS powinno być bardziej popularne?

• React/Vue jako front do CMS, takiego jak WordPress (headless).
• WebGL (Three.js) Grafika 3D, symulacje i interaktywność.
• Treści VR i AR.
• Bardziej zoptymalizowane przepływy pracy (webpack, gulp).
• Interfejsy API przeglądarki zapewniające większą kontrolę/funkcjonalność.

I aby dodać kolejny świetny powód, aby zagłębić się w to głębiej – mając tylko JS, możesz technicznie zbudować prawie każdy rozmiar projektu, jaki chcesz. Wystarczy JS, aby stworzyć reaktywny frontend, podłączyć go do miejsca na dane, wykorzystać interfejsy API przeglądarki w celu uzyskania najlepszych wrażeń użytkownika i wdrożyć projekt na żywo. Wszelkie zmiany ustawień można łatwo wykonać w konfiguracji.

4. Stylizacja oparta na narzędziach

Stylizacja oparta na narzędziach koncentruje się na stosowaniu stylów za pomocą predefiniowanych klas. To właśnie oznacza stylizacja strony internetowej. Jednak tutaj jest to nieco inne niż standardowe podejście. Widzisz, nie .card z cieniem, tłem itp. Stylujesz element HTML za pomocą .shadow i .bg-light oraz .br-5 (jak border-radius).

Jest to podejście, które działa niesamowicie dobrze dla programistów JS, którzy po prostu muszą coś szybko wypisać i nie martwią się CSS.

Nie jest to wcale nowe, ale popularność Tailwind skłoniła deweloperów do ponownego rozważenia tego podejścia.

Źródło

Niektórzy mogą argumentować, że to właściwie „pisanie CSS w HTML”, w którym nie można tak naprawdę zmienić komponentu z CSS i aktualizować go wszędzie. Z technicznego punktu widzenia to prawda, ale jeśli twoje komponenty są plikami JS na przykład w aplikacji React /Vue, aktualizujesz je w jednym miejscu.

Być może jedną z wad jest to, że musisz nauczyć się innego frameworka. To nie jest tylko CSS, musisz zapamiętać właściwości, ponieważ niektóre elementy mogą wyglądać tak:

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

Chociaż zawsze znajdą się ludzie, którzy to pokochają (i nienawidzą), to jest to świetne rozwiązanie wielu problemów. Poza tym nigdy nie dowiesz się, czy to działa, dopóki naprawdę tego nie wypróbujesz.

5. Nowe funkcje CSS

Korzystanie z nowych funkcji CSS może być samym w sobie trendem w technologii front-end. Chociaż nie jest to zmiana w konkretnej funkcji lub podejściu, stanowi wyzwanie dla dotychczasowego sposobu kodowania. Profesjonaliści? Rozwiązuje wiele problemów. Złe? Kompatybilność wsteczna.

Ale dzięki postępowi producentów przeglądarek w ciągu ostatniego roku lub dwóch (patrząc na ciebie, Microsoft), większość użytkowników na całym świecie może uzyskać dostęp do sieci bardziej efektywnie niż kiedykolwiek wcześniej.

Źródło

Jedną z tych cech są niestandardowe właściwości CSS, ale mając około 6 lat (i dość duże), ma własną sekcję.

Tryby pisania

Chociaż nie są używane zbyt często, ponieważ wielu programistów rzadko musi obsługiwać języki od prawej do lewej, istnieją tryby pisania. Są niezbędne w przypadku pulpitów nawigacyjnych/frameworków i witryn wielojęzycznych. Dzięki zwiększonej obsłudze właściwości pisania kierunkowego, takich jak na przykład margin-inline-start, nie musisz nadpisywać marginesu od lewej do prawej w przypadku RTL.

Podsiatka CSS

Mieliśmy flex, potem mieliśmy siatki. Teraz mamy siatki wewnątrz siatek . Subgrids to coś, co deweloperzy spodziewali się być dostępne po wyjęciu z pudełka, gdy Grid był po raz pierwszy obsługiwany. Cóż, teraz to mamy i jest tak fajne i przydatne, jak się wydaje. Wyróżnienie: Luki Flexbox (ponieważ jest to również część siatek). Robi to, co mówi.

:is

Skrócony selektor, który najlepiej wyjaśnić za pomocą fragmentu kodu , który zaczerpnęliśmy z MDN:

 /* Zaznacza dowolny akapit wewnątrz nagłówka, main
lub element stopki, który jest najechany */
:is(header, main, footer) p:hover {
kolor czerwony;
kursor: wskaźnik;
}

 /* Powyższe jest równoważne z następującym */
nagłówek p:najedź,
główne p:najechanie,
stopka p:najedź {
kolor czerwony;
kursor: wskaźnik;
}

Zawijanie

Na przestrzeni lat wiele się zmieniło w trendach front-end, a ulepszenia będą się pojawiać. Jeśli chcesz mieć stronę internetową, która zapewni Ci pożądane konwersje i przychody, powinieneś już teraz zacząć pracować nad kodowaniem front-end. Twoi klienci powinni móc z łatwością korzystać z Twojej strony internetowej, aby zachęcić ich do interakcji z Twoją firmą.

Spróbuj wdrożyć wspomniane powyżej trendy front-endowe i daj nam znać, w jaki sposób pomogło to w rozwoju Twojej firmy.