Bukan Hanya CORS ! Permasalahan Yang Sering Di Temukan Oleh Frontend Developer

Desain dengan dan tanpa Grid

Grid adalah salah satu elemen penting dalam desain, karena dapat membantu menciptakan konsistensi, keselarasan, dan presisi. Namun, tidak semua desainer menggunakan Grid dalam karya mereka.

Hal ini dapat menimbulkan tantangan bagi developer yang harus mengubah desain menjadi kode. Dalam dunia Frontend, segala sesuatu harus diukur dengan angka, bukan hanya dengan imajinasi. Jika tidak ada grid, akan sulit untuk menentukan jarak antara komponen-komponen dalam desain. Selain itu, tanpa grid, juga akan sulit untuk membuat desain yang responsif, yaitu dapat menyesuaikan diri dengan berbagai ukuran layar dan perangkat.

Desain Responsif dan Non-Responsif

Desain responsif adalah desain yang dapat beradaptasi dengan lebar layar dan orientasi perangkat yang digunakan oleh pengguna. Desain responsif dapat meningkatkan pengalaman pengguna dan kinerja situs web. Tidak semua desainer membuat versi responsif dari desain mereka. Biasanya, desainer hanya membuat versi Dekstop dengan resolusi 1440px, dan mengharapkan developer untuk membuatnya responsif untuk perangkat lain, seperti

>1024px
>900px
>480px
>360px
dst.

Hal ini dapat menyulitkan developer, terutama jika desainnya sangat bagus dan kompleks. Developer harus berimajinasi sendiri bagaimana desain tersebut akan terlihat di versi mobile atau tablet, dan apakah hasilnya akan sesuai dengan versi dekstop. Selain itu, tanpa grid, juga akan sulit untuk mengetahui, komponen mana yang harus dikecilkan, seberapa besar, atau bahkan dihilangkan, untuk versi mobile atau tablet.

Desain dengan dan tanpa Animasi

Animasi adalah salah satu cara untuk membuat desain menjadi lebih hidup, menarik, dan interaktif. Animasi dapat memberikan efek visual, transisi, atau gerakan pada komponen-komponen dalam desain. Tidak semua desainer memberikan animasi pada desain mereka. Kadang-kadang, desainer hanya memberikan desain statis, dan mengharapkan developer untuk memberikan animasi. Namun, animasi yang dibuat oleh developer mungkin tidak sebagus yang diharapkan oleh desainer, karena keterbatasan waktu, kemampuan, atau alat.

Desain dengan dan tanpa Flow

Flow adalah alur atau arah yang diikuti oleh pengguna saat mengakses situs web atau aplikasi. Flow dapat menunjukkan fungsi, tujuan, atau hubungan antara komponen-komponen dalam desain.

Flow dapat membantu developer untuk mengetahui jenis tag HTML, tingkat aksesibilitas, atau interaksi yang dibutuhkan oleh desain. Beberapa alat desain, seperti Figma, Zeplin, atau Adobe XD, menyediakan fitur demo untuk menampilkan flow pada desain. Namun, tidak semua desainer menggunakan fitur ini, atau memberikan informasi yang cukup tentang flow pada desain mereka. Hal ini dapat membuat developer bingung untuk mengetahui flow dari desain, dan bagaimana menerapkannya dalam kode. Jika developer mengetahui flow dari desain, maka developer dapat membuat animasi, perpindahan, atau fungsi yang sesuai dengan desain.

Desain dengan dan tanpa Styleguide

Styleguide adalah kumpulan aturan atau pedoman yang digunakan untuk menciptakan konsistensi dalam desain. Styleguide dapat mencakup warna, font, ukuran, jarak, bentuk, atau elemen lain yang digunakan dalam desain.

Styleguide dapat memudahkan developer untuk mengetahui fungsi atau makna dari elemen-elemen dalam desain.

Tidak semua desainer memberikan styleguide pada desain mereka, atau membuat styleguide yang jelas dan lengkap. Hal ini dapat menyebabkan ketidaksesuaian atau ketidakkonsistenan dalam desain. Misalnya, warna yang digunakan dalam desain tidak sesuai dengan warna yang diharapkan oleh developer, atau font yang digunakan dalam desain tidak tersedia atau tidak cocok dengan kode.

Contoh Penggunaan Styleguide yang tidak benar:

Penyesuaian Browser

Browser adalah perangkat lunak yang digunakan oleh pengguna untuk mengakses situs web atau aplikasi. Browser dapat berbeda-beda tergantung pada jenis, versi, atau pengaturan yang digunakan oleh pengguna.

Browser dapat mempengaruhi tampilan atau fungsi dari situs web atau aplikasi yang dibuat oleh developer. Oleh karena itu, developer harus melakukan penyesuaian atau pengujian browser untuk memastikan bahwa situs web atau aplikasi yang dibuat dapat berjalan dengan baik di berbagai browser. Penyesuaian atau pengujian browser dapat memakan waktu dan tenaga yang banyak, karena ada banyak browser yang berbeda, baik di antara dekstop maupun perangkat mobile.

Selain itu, ada juga browser yang sulit untuk disesuaikan atau diuji, seperti Internet Explorer atau Safari, karena sering tidak kompatibel dengan kode yang dibuat oleh developer. Oleh karena itu, banyak situs web atau aplikasi yang menyarankan pengguna untuk menggunakan browser tertentu, seperti Chrome, untuk hasil yang optimal.

Error Tracking dan CORS

Error adalah kesalahan atau masalah yang terjadi saat situs web atau aplikasi berjalan. Error dapat berasal dari berbagai sumber, baik dari sisi frontend maupun backend. Error dapat mempengaruhi kinerja atau pengalaman pengguna dari situs web atau aplikasi. Oleh karena itu, developer harus melakukan error tracking atau pelacakan error untuk mengetahui penyebab dan solusi dari error.

Salah satu error yang sering ditemukan oleh developer adalah CORS atau Cross-Origin Resource Sharing.

Cross-Origin Resource Sharing (CORS)

CORS adalah mekanisme yang mengatur akses atau pertukaran data antara sumber yang berbeda, seperti situs web atau aplikasi. CORS dapat menyebabkan error jika sumber yang berbeda tidak memiliki izin atau aturan yang sesuai untuk berbagi data. Error CORS dapat sulit untuk dideteksi atau diperbaiki, karena dapat berasal dari sisi frontend atau backend. Error CORS juga dapat memberikan pesan yang tidak jelas atau menyesatkan, seperti "Network Failed". Pesan ini dapat membuat developer bingung, karena dapat berarti ada masalah di jaringan sisi klien, padahal sebenarnya ada masalah di CORS sisi server.

State Management

State adalah kondisi atau nilai dari variabel yang digunakan dalam situs web atau aplikasi. State dapat berubah-ubah tergantung pada interaksi atau input dari pengguna atau sumber lain. State management adalah cara untuk mengelola atau mengontrol perubahan state dalam situs web atau aplikasi. State management dapat mempengaruhi kinerja, keamanan, atau kualitas dari situs web atau aplikasi. Oleh karena itu, developer harus memikirkan berbagai hal dalam melakukan state management, seperti:

State management adalah salah satu hal yang paling rumit dan penting dalam pembuatan Web Apps berbasis ReactJS. State management dapat menguras tenaga dan pikiran, karena harus memikirkan setiap state yang ada. Developer harus mencari cara yang paling efektif dan efisien untuk state management, dengan belajar dari kode atau pengalaman orang lain, atau mencoba sendiri.