Sebagai pengembang frontend, tugasnya adalah memastikan antarmuka pengguna dari program perangkat lunak apakah sudah berfungsi dengan baik.

Anda tahu bahwa, ini merupakan pekerjaan yang sulit dimana Anda perlu memastikan setiap komponen itu berfungsi sebagaimana mestinya sehingga pengguna dapat memiliki pengalaman yang baik.

Pengembang frontend saat ini sangat diminati, dimana pengembang frontend ini dapat mengelola UI/UX dari perangkat lunak.

Hal ini, penting karena pengguna dapat berinteraksi langsung dengan front-end dengan suatu aplikasi.

Postingan kali ini, tim Lumoshive akan membahas tentang beberapa keterampilan paling berharga yang dapat dikembangkan oleh seorang pengembang frontend pemula.

Dimana mempelajari banyak keterampilan dapat membantu Anda untuk maju dalam karir di masa yang akan datang.

Mempelajari JavaScript Modern (ES6)

Kita tahu bahwa, bahasa pemrograman JavaScript sudah memiliki beberapa versi dari ES1 ke ES6 selama 25 tahun terakhir dan memiliki beberapa kemampuan yang luar biasa setiap kali mereka merilis versi baru.

Tahun 2015, ES6 diterbitkan sebagai versi standar JavaScript yang baru dimana ECMAScript 2015 adalah nama lain dari ES1, sedangkan ES6 merupakan suatu hal yang memiliki banyak fitur baru yang dapat membantu Anda menulis kode lebih baik.

Misalnya, dengan kelas berorientasi objek, fungsi panah, literal string, dan masih banyak lagi dimana itu adalah dasar untuk perpustakaan modern seperti React dan Vue.

Manfaat Fitur dari ES6 yang dapat Menghancurkan Tugas

Anda dapat melihat nilai larik atau atribut dari salah satu objek ke dalam variabel individual yang menggunakan penugasan destrukturisasi.

Berikut adalah contoh tugas destrukturisasi di ES6:

Menghancurkan array:

let myName, myRole;

let array = ['Chaitanya', 'Web Developer'];

[myName, myRole] = array; //positional assignment occurs here

console.log(myName, my Role); //Chaitanya Web Developer

Menghancurkan objek.

Menghancurkan objek:

let myName, myRole;

let object = {myName:'Chaitanya', myRole:'Web Developer'};

({myName, myRole}=object);

//properties (keys) are matched with the local variable names

console.log(myName, myRole);

//Chaitanya Web Developer

Ekspresi Fungsi Panah

Ekspresi fungsi panah adalah sintaks baru untuk membuat ekspresi fungsi biasa. Dimana Anda dapat mengabaikan fungsi dan kembali ke dalam kode satu baris menggunakan ekspresi fungsi panah.

Misalnya, seperti contoh dibawah yang menjelaskan bagaimana ekspresi fungsi panas di ES6:

let getName = ((firstName, lastName) => {

let myRole = 'Web Developer';

return `My name is ${firstName} ${lastName}

I am a ${myRole}.`;

});

Parameter Default

Kita tahu bahwa, nilai default adalah argumen dari fungsi dalam JavaScript yang tidak dapat ditentukan. Hal ini akan terlihat lebih praktis dengan menggunakan nilai yang berbeda.

Anda dapat melakukan itu, dengan menggunakan parameter fungsi default.

Misalnya, seperti contoh di bawah yang menjelaskan bagaimana cara kerja parameter default di ES6:

Tanpa menggunakan ES6

function add(number1, number2) {

return number1+number2;

}

add (3,4); //returns 7

add(3); //returns NaN as number2 is undefined

Menggunakan ES6

function add(num1, num2=7) {

return num1+num2;

}

add (5,2) //returns 7

add(3) //returns 10 as num2 has default value = 7

Kinerja dan Kualitas Web

Kita tahu bahwa, memastikan kelancaran tanpa ada kesalahan pada saat menggunakan situs web sangatlah penting.

Dengan waktu yang diperlukan untuk memuat situs web Anda ini, akan dipengaruhi oleh banyak faktor yang terkait kinerja web itu sendiri.

Ada beberapa langkah yang dapat Anda ambil untuk meningkatkan kinerja situs web yang lambat dimuat oleh sistem.

Meningkatkan kinerja Web:

Gunakan gambar yang berukuran kecil yang telah dioptimalkan. Anda dapat menggunakan TinyPNG untuk mengoprasikan gambar tanpa harus kehilangan banyak kualitas.

Hapus CSS dan JavaScript yang tidak Anda inginkan (agar dapat membuat kode berukuran besar).

Anda perlu mendapatkan penyedia hosting yang bagus seperti, Linode, digitalocean, dan SiteGround.

Tip Wordpress (menghapus plugin yang tidak diinginkan) misalnya, kami tidak menyarankan Anda untuk menggunakan lebih dari 10 plugin kecuali itu diperlukan.

Jadi, tidak masalah jika Anda membuat situs web paling menakjubkan yang pernah ada.

Namun, jika itu tidak bekerja secara efektif, ini akan memberitahu kepada pengguna dengan cepat hal ini tentunya tidak akan ada masalah.

Kita tahu bahwa, pengguna tidak suka menunggu lebih dari 3 detik untuk membuat situs web. Jadi, jika situs Anda membutuhkan waktu lebih lama dari itu, maka rasio pentalan ini akan naik.

Alat Pengembang Chrome

Anda tahu bahwa, alat pengembang Chrome yang disertakan di Peramban Google Chrome digunakan oleh pengembang pada setiap saat untuk mengulangi, men-debug, dan menganalisis situs web.

Chrome DevTools adalah alat yang sangat berguna terlepas bagaimana Anda memahami cara menggunakanya.

Anda dapat mempelajari lebih lanjut dengan melihat konten berikut yang berisikan Chrome DevTools- Crash Course.

Contoh Google Chrome DevTools yang diliputi oleh:

Panel konsol yang berinteraksi dengan JavaScript pada halaman tidak lain sebagai shell, log, dan data diagnostik.

Toolbar perangkat yang dapat membantu Anda untuk membuat situs web responsif.

Elemen yang digunakan untuk mengatur CSS dan Model Objek dokumen (DOM).

Wawasan kinerja web.

Fungsi keamanan dan jaringan.

Anda dapat mempelajari lebih lanjut mengenai tentang Chrome DevTools dengan klik disini.

Kontrol Versi Menggunakan Git

Git (pelacak Informasi Global) adalah sistem kontrol versi terdistribusi sumber terbuka yang merupakan perangkat lunak yang dapat melacak perubahan dalam satu set file yang digunakan oleh pengembang untuk berkoordinasi pada saat mereka mengerjakan sumber kode perangkat lunak secara bersamaan.

Setelah semua kerja keras Anda setelah meng-coding, hal terakhir yang perlu Anda lakukan adalah mengecek kembali pekerjaan Anda apakah itu sudah berjalan sesuai dengan apa yang Anda inginkan.

Dalam kasus ini, Git dapat membantu Anda untuk kembali ke versi perangkat lunak yang sebelumnya tanpa menghilangkan kode yang sudah Anda kerjakan.

Mengetahui dasar-dasar Git adalah keterampilan yang akan dihargai oleh Anda (dan calon pemberi kerja serta klien Anda).

Desain Responsi

Kebanyakan orang mengakses internet menggunakan ponsel, tablet, laptop, dan komputer dimana ini memiliki ukuran layar yang berbeda.

Desain Responsif ini akan membantu Anda untuk mendesain aplikasi yang berfungsi ke semua ukuran layar (dan akan menjadi prioritas utama dalam aplikasi atau situs web apapun yang sedang Anda kembangkan).

Lalu Bagaimana Cara Kerja Desain Responsif?

Situs web dengan fitur, konten, dan media yang ramah seperti, seluler yang seringkali disebut sebagai situs responsif.

Situs web responsif ini akan menyesuaikan dengan perangkat lunak yang digunakan oleh pengunjung/pengguna seperti, ponsel cerdas, tablet, dan PC.

Berikut beberapa langkah-langkah yang perlu Anda ketahui:

Perlunya menggunakan grafik vektor scalable (SVG).

Contoh gambar normal vs SVG:

Pastikan Anda membuat menu hamburger untuk perangkat lunak laya kecil (menu navbar).

Menguji situs web responsif di berbagai perangkat dan browser seperti, pengujian situs mobile dan Tes Layar untuk menguji situs web Anda.

Catatan: Perlu Anda ingat desain responsif adalah fitur bawaan dari kerangka kerja CSS seperti, Tailwind dan Bootstrap yang berarti kerangka kerja ini dapat membantu Anda untuk membuat situs web lebih ke responsif untuk semua ukuran perangkat.

Bagaimana Cara Bekerja dengan Kerangka?

Kerangka kerja CSS dan JavaScript adalah kumpulan file yang menangani banyak pekerjaan berat dengan menawarkan fitur standar.

Alih-alih ingin memulai dengan halaman teks kosong, Anda dapat memulai dengan file kode yang sudah memiliki banyak JavaScript di dalamnya.

Kerangka kerja JavaScript dan CSS ini akan mengubah cara penulisan kode. Misalnya pada beberapa kerangka kerja yang dibuat untuk dapat membantu Anda membuat antarmuka pengguna yang rumit, sementara itu yang lainnya akan berkembang pesat dalam penampilan konten situs web.

Perlunya Anda memilih kerangka kerja yang tepat dengan begitu Anda dapat mempelajarinya dengan mudah.

Anda tahu bahwa, kerangka populer tidak selalu merupakan pilihan yang tepat, Anda perlu memilih yang sesuai dengan kebutuhan Anda sendiri.

Berikut adalah beberapa contoh kerangka kerja JavaScript yang kami sarankan untuk Anda:

Bereaksi merupakan kerangka kerja JavaScript seperti front-end dari sumber terbuka dan gratis untuk membuat antarmuka pengguna yang berbasis komponen UI (meta mempertahankannya).

Vue (vue.js) adalah kerangka kerja JavaScript front-end open-source untuk membuat aplikasi satu halaman dan antarmuka pengguna.

Svelte adalah compiler front-end dari sumber dan gratis yang saat ini dikelola oleh Vercel.

Kerangka kerja CSS yang kami rekomendasikan untuk Anda:

Bootstrap adalah kerangka kerja sumber terbuka untuk komponen antarmuka yang mencakup CSS dan templat berbasis JavaScript.

Tailwind CSS adalah framework CSS utilitas pertama yang menyertakan kelas untuk membuat desain UI kustom.

Bulma adalah kerangka kerja CSS sumber terbuka yang dapat membantu Anda menyelesaikan sesuatu lebih cepat dan baik.

Sumber:

eyJpdiI6IlVGZ0xZdXRDMWNnT2hNeGpjWU5tOEE9PSIsInZhbHVlIjoiSGdWOVRkb2NYRSt1Tmo4WlNNcDRlUT09IiwibWFjIjoiY2EyMTFjM2VlNmRiODIxN2UzNWE3ZmNkMmY4NTI4MDNlNmMyYTliZDQ4OTc3MjE3ODg5YmU2ZmFlMGM4ZGYyNyJ9

Sampai jumpa dilain hari dengan artikel selanjutnya!!