5 Tren Front-End yang Akan Diikuti pada 2022

Ada banyak sekali artikel “Tren desain untuk diikuti” yang beredar di web. Kami juga menempatkan putaran kami pada salah satu Tren Desain Web Panas untuk Diikuti pada tahun 2022. Fokus pada artikel semacam itu sangat dapat dimengerti – desain itu sendiri adalah apa yang dilihat oleh klien dan pengunjung. Namun, kode di baliknya sebagian besar tidak relevan bagi sebagian besar pengguna.

Tapi sementara tampaknya tidak relevan, tentu saja, itu sangat penting. Kode yang bersih, pendekatan yang dioptimalkan, dan teknik baru memungkinkan pengembang untuk menyajikan desain yang indah dengan cara yang dapat ditingkatkan. Performa adalah apa yang diinginkan pengguna, skalabilitas adalah apa yang diinginkan klien.

Jadi, untuk memberikan rasa hormat kepada semua pengembang front-end serta beberapa wawasan dan ide untuk desainer, kami telah menyusun daftar "Tren Front-End untuk Diikuti pada tahun 2022".

1. Properti Kustom CSS

Ini adalah sesuatu yang diinginkan pengembang selama bertahun-tahun meskipun properti Kustom CSS (atau juga dikenal sebagai Variabel CSS) telah ada selama beberapa waktu sekarang. Misalnya, Modul W3C Level 1 berasal dari tahun 2015. Tetapi seperti halnya teknologi baru lainnya, butuh beberapa saat untuk mendapatkan daya tarik. Dan kami percaya bahwa pada tahun 2021, kami akan melihat beberapa tingkat adopsi terbesar sejak awal.

Kenapa Keren?

Properti khusus sebenarnya adalah variabel dalam CSS. Anda mungkin berkata, “Tapi kami memiliki variabel di Sass, bukan?” Ya, kami melakukannya! Tetapi ketika Anda mengkompilasi Sass ke CSS, Anda mendapatkan, yah, CSS. Dan tidak ada variabel. Anda tidak dapat lagi mengubah nilai variabel tersebut. $primary: red hanya merah.

Namun, dengan properti khusus, Anda memiliki --primary: red . Dan kemudian Anda dapat mendefinisikan ulang --primary menjadi biru misalnya. Langsung di browser, tidak diperlukan kompilasi. Untuk mengetahui lebih lanjut tentang trik CSS ini, lihat artikel ini: Apa perbedaan antara variabel CSS dan variabel praprosesor?

Satu peretasan yang rapi untuk menggunakannya adalah untuk tema khusus. Anda dapat menentukan nilai HSL melalui variabel dan kemudian mengizinkan pengguna untuk mengubah rona melalui penggeser di frontend. Hubungkan nilai slider ke variabel CSS dengan JS dan BAM dengan fungsi "Setel skema warna Anda".

2. Font Variabel

Font variabel, seperti CSS Custom Properties telah ada untuk sementara waktu, tetapi masih belum banyak digunakan. Salah satu alasannya adalah waktu yang mereka butuhkan untuk menjadi lebih populer, jumlah tutorial/panduan dan teknik untuk diadopsi oleh pengembang serta font yang dibutuhkan sendiri. Anda tidak bisa begitu saja memilih font apa saja dan menerapkan perubahan padanya.

Salah satu situs web masuk yang dapat Anda gunakan untuk menjelajah dan bereksperimen adalah Variable Fonts. Ini juga berfungsi sebagai demo yang bagus jika Anda mendengar istilah ini untuk pertama kalinya. Font variabel memungkinkan Anda untuk menggunakan satu file dan menerapkan properti seperti "font-weight" atau "font-style" dengan kontrol penuh atas jumlah ketebalan atau kemiringan…

Sumber

Kenapa Keren?

Jelas bahwa ini memberi kita, para pengembang (dan desainer), kebebasan yang hampir tak terbatas untuk tampilan font. Pernahkah Anda berpikir bahwa "font-weight: bold" terlalu berlebihan, tetapi "normal" terlalu tipis dan Anda tidak memiliki apa-apa di antaranya?

Perancang font sangat menyadari hal itu dan sering kali menyediakan properti menengah. Mereka memberi label dengan angka seperti 100 (ringan) atau 900 (sangat tebal) dan apa pun di antaranya seperti 300, 400, 600, 700, dll. Tapi mungkin Anda membutuhkan 750 Dan itu tidak tersedia? Sekarang, dengan font variabel, Anda bisa!

Ada manfaat besar lainnya untuk font variabel. Seperti yang mungkin Anda sadari, font adalah kontributor besar untuk memuat waktu . Baik dari segi bandwidth maupun rendering di layar. Permintaan yang agak standar mungkin terlihat seperti ini:

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

Dengan semua kebaikan itu, Anda dapat dengan mudah melewati 500kb. Dengan font variabel, Anda hanya perlu satu font dan Anda menerima semua variasi lainnya. Satu permintaan.

Anda dapat membaca lebih lanjut tentang Font Variabel: Pengenalan font variabel di web.

3. Lebih Banyak JavaScript!

Ini adalah judul yang "menggelitik", tapi itu benar! Pengembang Front-End tidak hanya "Pengembang JS", tetapi juga hanya pengembang "CSS/HTML". Dan judul ini untuk mereka.

JavaScript bukan hanya tren, meskipun tergantung pada siapa Anda bertanya, beberapa percakapan yang sangat panas mungkin terjadi dengan komentar seperti "Ya, dan saat ini, Anda bahkan tidak dapat membuka situs web jika Anda tidak mengaktifkan JS" atau "terima kasih untuk memuat slider 5MB dan iklan untuk halaman Tentang Anda”.

Namun seberapa banyak sisi positif dan negatifnya, penggunaannya semakin bertambah. Jadi, teknologi/pendekatan/perkakas berbasis JS apa yang harus lebih tren?

• Bereaksi/Vue sebagai depan untuk CMS seperti WordPress (tanpa kepala).
• WebGL (Three.js) grafis 3D, simulasi dan interaktivitas.
• Konten VR dan AR.
• Alur kerja build yang lebih optimal (webpack, gulp).
• API Browser untuk kontrol/fungsi yang lebih banyak.

Dan untuk menambahkan alasan bagus lainnya untuk menyelam lebih dalam ke dalamnya – hanya dengan JS, Anda secara teknis dapat membangun hampir semua ukuran proyek yang Anda inginkan. Hanya dengan JS, Anda dapat melakukan antarmuka reaktif, menghubungkannya ke beberapa penyimpanan data, memanfaatkan API browser untuk pengalaman pengguna terbaik, dan menerapkan proyek Anda secara langsung. Penyesuaian apa pun pada pengaturan dapat dilakukan dengan mudah di pengaturan.

4. Penataan Berbasis Utilitas

Penataan gaya berbasis utilitas berfokus pada penerapan gaya melalui kelas yang telah ditentukan sebelumnya. Itulah yang dimaksud dengan menata halaman web secara umum. Namun, ini sedikit berbeda dari pendekatan standar. Lihat, Anda tidak menata .card dengan bayangan, latar belakang, dll. Anda menata elemen HTML dengan .shadow dan .bg-light dan .br-5 (seperti radius batas).

Ini adalah pendekatan yang bekerja sangat baik untuk pengembang JS yang hanya perlu menghasilkan sesuatu dengan cepat dan tidak khawatir tentang CSS.

Ini sama sekali bukan hal baru, tetapi popularitas Tailwind telah membuat pengembang mempertimbangkan kembali pendekatan tersebut.

Sumber

Beberapa orang dapat berargumen bahwa itu cukup banyak "menulis CSS dalam HTML" di mana Anda tidak dapat benar-benar mengubah komponen dari CSS dan memperbaruinya di mana-mana. Secara teknis, itu benar, tetapi ketika komponen Anda adalah file JS di aplikasi React/Vue misalnya, maka Anda memperbaruinya di satu tempat.

Mungkin salah satu kelemahannya adalah Anda perlu mempelajari kerangka kerja lain. Ini tidak seperti CSS, Anda harus mengingat propertinya karena beberapa elemen mungkin terlihat seperti ini:

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

Meskipun akan selalu ada orang yang menyukainya (dan membencinya), ini adalah solusi yang bagus untuk banyak masalah. Juga, Anda tidak akan pernah tahu apakah itu berhasil untuk Anda sampai Anda benar-benar mencobanya.

5. Fitur CSS Baru

Menggunakan fitur CSS baru bisa menjadi tren teknologi front-end itu sendiri. Meskipun ini bukan perubahan pada fitur atau pendekatan tertentu, ini menantang cara kami mengkode sejauh ini. Pro? Ini memecahkan banyak masalah. Keburukan? Kompatibilitas terbalik.

Namun berkat kemajuan vendor browser dalam satu atau dua tahun terakhir (melihat Anda, Microsoft), mayoritas pengguna di seluruh dunia dapat mengakses web lebih efisien daripada sebelumnya.

Sumber

Properti Kustom CSS adalah salah satu fitur ini, tetapi karena berusia sekitar 6 tahun (dan cukup besar), ia memiliki bagiannya sendiri.

Mode Menulis

Meskipun tidak terlalu sering digunakan, karena banyak pengembang jarang perlu mendukung bahasa dari kanan ke kiri, mode penulisan memang ada. Mereka adalah suatu keharusan untuk dasbor/kerangka kerja dan situs multibahasa. Berkat peningkatan dukungan properti penulisan terarah seperti margin-inline-start misalnya, Anda tidak perlu menimpa margin-kiri ke margin-kanan untuk RTL.

Subgrid CSS

Kami memiliki flex, lalu kami memiliki grid. Sekarang, kami memiliki kisi-kisi di dalam kisi-kisi . Subgrid adalah sesuatu yang diharapkan pengembang akan tersedia di luar kotak saat Grid pertama kali didukung. Nah, sekarang kita memilikinya dan itu sekeren dan berguna kedengarannya. Sebutan terhormat: Celah Flexbox (karena itu juga bagian dari kisi). Ia melakukan apa yang dikatakannya.

:is

Pemilih singkatan yang paling baik dijelaskan dengan cuplikan kode yang kami ambil dari MDN:

 /* Memilih paragraf mana pun di dalam header, main
atau elemen footer yang sedang di-hover */
:is(header, main, footer) p:hover {
warna merah;
kursor: penunjuk;
}

 /* Kalimat di atas sama dengan yang berikut ini */
tajuk p: arahkan kursor,
p utama: arahkan kursor,
footer p:arahkan kursor {
warna merah;
kursor: penunjuk;
}

Membungkus

Banyak yang telah berubah dengan tren front-end selama bertahun-tahun, dan peningkatan akan terus datang. Jika Anda menginginkan situs web yang akan memberi Anda konversi dan pendapatan yang Anda inginkan, maka Anda harus mulai mengerjakan pengkodean front-end Anda segera. Pelanggan Anda harus dapat menggunakan halaman web Anda dengan mudah sehingga mereka terdorong untuk berinteraksi dengan bisnis Anda.

Coba terapkan tren front-end yang telah kami sebutkan di atas dan beri tahu kami bagaimana hal itu telah membantu bisnis Anda berkembang.