5 Tren Front-End yang Harus Diikuti pada 2021

Diterbitkan: 2020-12-17

Ada banyak sekali artikel "Tren desain untuk diikuti" yang beredar di web. Kami juga melakukan putaran kami di Tren Desain Web Panas untuk Diikuti pada tahun 2021. Fokus pada artikel semacam itu sangat bisa dimengerti - desain itu sendiri adalah apa yang dilihat oleh klien dan pengunjung. Namun kode di belakangnya sebagian besar tidak relevan bagi sebagian besar pengguna.

Tetapi meskipun tampaknya tidak relevan, tentu saja, ini sangat penting. Kode yang bersih, pendekatan yang dioptimalkan, dan teknik baru adalah hal yang memungkinkan pengembang menyajikan desain yang indah dengan cara yang dapat diskalakan. Performa adalah yang diinginkan pengguna, skalabilitas adalah 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 yang Harus Diikuti di 2021".

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 untuk beberapa waktu sekarang. Misalnya, W3C Module Level 1 berasal dari tahun 2015. Namun seperti halnya teknologi baru, perlu beberapa saat untuk mendapatkan daya tarik. Dan kami yakin bahwa pada tahun 2021, kami akan melihat beberapa tingkat adopsi terbesar sejak diluncurkan.

Mengapa Itu Keren?

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

custom-properties-support

Properti kustom didukung dengan baik di mana saja kecuali untuk Internet Explorer

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

Satu peretasan yang rapi untuk menggunakannya adalah untuk tema khusus. Anda dapat menentukan nilai HSL melalui variabel dan kemudian mengizinkan pengguna untuk mengubah corak melalui slider di frontend. Hubungkan nilai slider ke variabel CSS dengan JS dan BAM dengan fungsionalitas "Set your color scheme".

2. Font Variabel

Font variabel, seperti CSS Custom Properties telah ada selama beberapa 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 mereka butuhkan. Anda tidak bisa begitu saja memilih font apa pun dan menerapkan perubahan padanya.

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

variabel-font-gif

Sumber: Pengenalan font variabel di web

Mengapa Itu 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 pun di antaranya?

Desainer font sangat menyadari hal itu dan sering kali memberikan properti tengah. Mereka melabeli mereka dengan angka seperti 100 (ringan) atau 900 (sangat tebal) dan apa saja 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 ketahui, font adalah kontributor besar untuk waktu muat . Baik dalam hal bandwidth dan 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 "menarik perhatian", tapi itu benar! Pengembang Front-End tidak hanya pengembang “JS Developers”, 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 ”.

Tetapi tidak peduli berapa banyak sisi positif dan negatif yang dimilikinya, penggunaannya terus bertambah. Jadi, teknologi / pendekatan / perkakas berbasis JS apa yang harus lebih tren?

  • React / Vue sebagai front untuk CMS seperti WordPress (headless)
  • Grafik 3D WebGL (Three.js), simulasi, interaktivitas
  • Konten VR dan AR
  • Alur kerja build yang lebih dioptimalkan (webpack, gulp)
  • API browser untuk lebih banyak kontrol / fungsionalitas

Dan untuk menambahkan alasan bagus lainnya untuk menyelami lebih dalam - hanya dengan JS, Anda secara teknis dapat membangun hampir semua ukuran proyek yang Anda inginkan. Hanya dengan JS, Anda dapat melakukan frontend reaktif, menghubungkannya ke beberapa penyimpanan data, memanfaatkan API browser untuk pengalaman pengguna terbaik, dan menerapkan proyek Anda secara langsung. Setiap penyesuaian pada pengaturan dapat dilakukan dengan mudah dalam pengaturan.

4. Styling berbasis utilitas

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

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

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

Beranda Tailwind

Beranda Tailwind

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

Mungkin salah satu kelemahannya adalah Anda perlu mempelajari kerangka kerja lain. Ini tidak seperti itu hanya CSS, Anda harus menghafal properti 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. Selain itu, 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 tersendiri. Meskipun ini bukan perubahan pada fitur atau pendekatan tertentu, ini menantang cara kami membuat kode sejauh ini. Pro? Ini memecahkan banyak masalah. Keburukan? Kompatibilitas terbalik.

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

ccs bagian bayangan

Bagian Bayangan CSS sebagai fitur lain yang akan datang

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

Mode Penulisan

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

Subkisi CSS

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

:is

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

 / * Memilih paragraf apa pun di dalam header, main
atau elemen footer yang sedang di-hover * /
: is (header, main, footer) p: hover {
warna merah;
kursor: pointer;
}
 / * Di atas sama dengan yang berikut * /
header p: hover,
p utama: hover,
footer p: hover {
warna merah;
kursor: pointer;
}