Tips All

Berdasarkan hasil survey Stack Overflow Developer Survey 2023, Javascript menempati posisi pertama dalam urutan “Most Popular Technology”. Javascript digunakan hampir 95% untuk semua website yang kita digunakan baik itu pada skala besar ataupun kecil. Terdapat banyak framework Javascript yang bisa digunakan secara gratis untuk mengembangkan aplikasi dan website sesuai kebutuhan. Namun kemampuan fundamental dasar Javascript sangat dibutuhkan apabila ingin menggunakan framework tersebut secara maksimal dan efisien. Maka dari itu sebelum mengenal dan menggunakan framework lebih jauh, alangkah baiknya kita memahami dasar-dasar fundamental nya terlebih dahulu. 1. Variabel Seperti matematika, variabel merupakan tempat menyimpan data. Javascript menyediakan tiga cara untuk membuat variabel, yakni: Menggunakan var Kata kunci ini bersifat Global Scope, dikarenakan variabel tersebut dapat di akses secara global dan diberikan nilai berulang kali. Perhatikan kode berikut: var age = 20 { var age = 40 } var age = 50 console.log(age) // Output: 50 Pada kode tersebut terdapat tiga variabel dengan nama yang sama yaitu age, dan diberikan nilai awal berupa 20 lalu di update menjadi 40 hingga terakhir menjadi 50. Baris kode tersebut merupakan kode yang valid dan tidak terdapat error. Namun ada kalanya kita membuat variabel dengan nama yang sama akan tetapi berada dalam ruang lingkup yang berbeda. Contohnya: var name = 'John' function sayMyName() { var name = 'Heisenberg' console.log(name) } console.log(name) // John sayMyName() // Fungsi dijalankan dan memiliki output: Heisenberg console.log(name) // Value dari variabel pertama berubah menjadi: Heisenberg Pada kode di atas, kita mendefinisikan variabel name yang memiliki value ‘John’. Kemudian pada baris berikutnya terdapat fungsi sayMyName yang memiliki nama variabel yang sama namun dengan value ‘Heisenberg’.Apabila kita console variabel pertama, akan didapatkan output berupa ‘John’.Namun ketika fungsi sayMyName dijalankan, kemudian kita console variabel name yang pertama, maka nilai yang semula ‘John’ berubah menjadi ‘Heisenberg’. Hal ini tentu tidak kita inginkan, karena dapat mengakibatkan sistem yang dibangun menjadi tidak konsisten karena nilai variabel yang berubah-ubah. Untuk mengatasi hal tersebut Javascript menyediakan dua kata kunci lainnya yaitu let dan const. Menggunakan let Ketika menggunakan kata kunci let, maka kita mendapatkan variabel yang bersifat Local Scope dan dapat diubah nilainya namun tidak dapat dideklarasikan ulang. Perhatikan kode berikut: let age = 30 age = 50 // Melakukan perubahan nilai { age = 30 // Tetap bernilai 30 } console.log(age) // Output: 50 Kode tersebut berjalan tanpa adanya error, namun berbeda jika kita mendeklarasikan ulang variabel tersebut: let age = 30 let age = 40 console.log(age) // SyntaxError:Identifier 'age' has already been declared Terjadi error dikarenakan kata kunci let tidak mengizinkan kita untuk mendeklarasikan ulang variabel dengan nama yang sama. Menggunakan const Sama seperti let, kata kunci const menghasilkan variabel yang memiliki sifat Local Scope namun tidak dapat diubah nilainya dan tidak bisa dideklarasikan ulang. Hal ini sesuai dengan namanya yaitu Constanta. Ketika menggunakan kata kunci const, variabel yang dihasilkan akan menjadi lebih strict dan membuatnya konsisten. Berikut ini contoh penerapannya: // 1. Kita mendeklarasikan ulang variabel dan melakukan update terhadap valuenya const data = 'John' const data = 'Doe' console.log(data) // SyntaxError: Identifier 'data' has already been declared // 2. Kita melakukan update data terhadap variabel const const data = 'John' data = 'Doe' console.log(data) // TypeError: Assignment to constant variable. Berdasarkan point di atas, apabila ingin membuat variabel direkomendasikan menggunakan kata kunci let ataupun const. Hal ini bertujuan untuk meminimalisir terjadinya duplikasi dan perubahan nilai pada variabel yang tidak kita inginkan. Lalu bagaimana jika kita ingin membuat variabel yang dapat menyimpan banyak nilai dan tipe data secara bersamaan? Untuk menjawab hal tersebut, maka kita akan berkenalan dengan Array. 2. Array Array merupakan struktur data pada Javascript yang bertujuan untuk menyimpan beberapa nilai dan tipe data dalam satu variabel. Contohnya: const fruits = ['apel', 'pisang', 'jeruk'] Pada kode di atas kita membuat variabel yang memiliki tipe data array dan menampung value berupa apel, pisang, dan jeruk. Lalu bagaimana cara kita mengakses value dari array tersebut? Untuk mengakses value yang berada di dalam array, kita bisa memanfaatkan indeks array. Indeks atau Index dalam array akan selalu dimulai dari 0, maka apabila ingin mengakses value dalam array tersebut, kita bisa melakukannya seperti ini: const fruits = ['apel', 'pisang', 'jeruk'] console.log(fruits[0]) // Output: apel console.log(fruits[1]) // Output: pisang console.log(fruits[2]) // Output: jeruk Array juga dapat menyimpan beberapa tipe data kompleks sekaligus seperti yang diterangkan di awal. const someArray = ['String', true, 3, { name: "John", age: 30, address: "123 Main St", sayHello: function () { console.log("Hello, my name is " + this.name); }, isLogin: true }, [1, 2, 3, 4, 5], function () { console.log("Hello World"); }] 3. Method Array Pada langkah sebelumnya, didapatkan data array sebagai berikut: const fruits = ['apel', 'pisang', 'jeruk'] Dan apabila kita ingin mengakses value yang berada di dalam array tersebut, kita bisa menggunakan indeks. Maka didapatkan: console.log(fruits[0]) // apel console.log(fruits[1]) // pisang console.log(fruits[2]) // jeruk Lalu terdapat pertanyaan, bagaimana jika pada array tersebut terdapat ribuan data yang kita tidak tahu persis indeks nya? Tentu hal ini sangat tidak efisien jika kita console satu persatu untuk mengecek nilainya. Untuk menjawab masalah tersebut, Javascript menyediakan fungsi khusus yang berkaitan dengan array, salah satunya ialah fungsi map. fruits.map((result) => { console.log(result) }) Pertama kita panggil nama array yang kita miliki, yaitu array bernama fruits.Kemudian kita melakukan proses chaining method dengan memanggil fungsi map.Fungsi map bertujuan untuk membuat array baru dan hasil dari fungsi tersebut akan ditampung kedalam variabel yang kita beri nama result.Kemudian pada langkah terakhir kita cetak nilai dari variabel result tersebut. Maka kita telah berhasil mencetak nilai secara keseluruhan dari dalam array tanpa harus melakukannya satu persatu dengan indeks. Selain menggunakan kata kunci map, Javascript menyediakan beberapa fungsi lainnya, seperti: forEach()length()pop()push()shift() Untuk lebih jelasnya silakan kamu cek dokumentasinya di sini: Array - Javascript MDN. 4. Object Object merupakan struktur data pada Javascript yang memiliki property dan value untuk menyimpan beberapa tipe data sekaligus. Perbedaan antara array dan object ialah, array diawali dengan kurung siku [] sedangkan untuk object diawali dengan kurung kurawal {}. const user = { property:"value", name: "John", age: 30, address: "123 Main St", isLogin: true } Terlihat kita membuat sebuah object yang berisikan property dan value yang memiliki tipe data berbeda-beda. Lantas bagaimana cara kita mengakses value dari object tersebut? Berikut implementasinya: console.log(user.property) // Output: "value" console.log(user.name) // Output: "John" console.log(user.age) // Output: 30 console.log(user.address) // Output: "123 Main St" console.log(user.isLogin) // Output: true Kalau diperhatikan pada kode tersebut, kita memanggil nama object berulang kali setiap ingin mencetak nilainya. Kemudian muncul pertanyaan lainnya yaitu, apakah kita bisa memanggil nama property nya saja tanpa perlu melakukan chaining dengan nama object tersebut? Jawabannya adalah bisa dan kita akan memanfaatkan salah satu fitur magic Javascript yaitu Destructuring Object. const { property, name, age, address, isLogin } = user // Mereferensikan dengan nama object terkait console.log(property) // Output: "value" console.log(name) // Output: "John" console.log(age) // Output: 30 console.log(address) // Output: "123 Main St" console.log(isLogin) // Output: true Terlihat pada kode di atas kita melakukan proses Destructuring Object dengan cara mengeluarkan property dari object tersebut, kemudian menampungnya ke dalam sebuah variabel yang sesuai dengan nama property nya. Hal tersebut valid dan kita bisa membuktikannya dengan membuka browser console, maka didapatkan hasil yang sama seperti di awal namun dengan kode yang lebih clean dan mudah dibaca. 5. Perulangan Perulangan pada Javascript merupakan salah satu basic yang wajib kamu kuasai, kenapa demikian? Perhatikan kode berikut: console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) Terlihat kita ingin mencetak nilai console secara berulang sebanyak 5 kali. Namun bagaimana jika ingin mencetak nilai console tersebut hingga sampai 100 atau bahkan 1000 percobaan? Tentu apabila menuliskannya satu persatu maka akan menghabiskan waktu dan sangat tidak efisien. Untuk mengatasi hal tersebut, kita akan memanfaatkan fitur perulangan pada Javascript yaitu menggunakan kata kunci for. for (let index = 0; index <= 100; index++) { console.log(index) } Kita melakukan perulangan dengan kata kunci for.Pada fungsi for tersebut menerima tiga parameter yakni:Parameter pertama: Merupakan inisialisasi variabel dan parameter ini akan selalu berjalan satu kali sebelum perulangan di mulai. Pada kode di atas kita mendefinisikan sebuah variabel dengan nama index dan bernilai 0.Parameter kedua: Merupakan kondisi mengapa perulangan tersebut terjadi. Pada parameter kedua, kita definisikan kondisi yaitu variabel pada parameter pertama tidak boleh lebih atau sama dengan 100.Parameter ketiga: Merupakan sebuah kondisi yang di mana akan selalu di-eksekusi setiap kali perulangan tersebut dijalankan. Pada parameter ketiga, kita melakukan modifikasi variabel index dengan melakukan proses increment variabel dengan operator ++, yang dimana berfungsi untuk menambahkan satu nilai setiap perulangan. Maka outputnya adalah nilai dari variabel tersebut akan terus bertambah sesuai dengan kondisi yang kita atur pada parameter kedua.Apabila kita console ke dalam browser maka didapatkan nilai yang sesuai dengan kondisi pada parameter kedua fungsi tersebut. Selain kata kunci for, Javascript menyediakan juga beberapa kata kunci lainnya yaitu: WhileDo WhileFor InFor Of Untuk lebih jelasnya silakan kamu cek dokumentasinya di sini: Loop and Iteration - Javascript MDN. 6. Percabangan Percabangan atau pengecekan kondisi adalah cara agar program yang kita bangun berjalan sesuai dengan kondisi yang diinginkan. Javascript menyediakan beberapa kata kunci untuk melakukan percabangan yang salah satunya adalah if else statement. if (condition) { // Blok kode ketika kondisi bernilai true } else { // Blok kode ketika kondisi bernilai false } Pada point sebelumnya kita berhasil membuat perulangan sebanyak 100 kali. Namun perbedaannya kali ini kita akan melakukan kondisi yang dimana jika variabel index tersebut merupakan angka genap, maka tampilkan console ‘Angka tersebut Genap’. Namun jika kondisi pertama tidak terpenuhi maka tampilkan console ‘Angka tersebut Ganjil’. for (let index = 0; index <= 100; index++) { if (index % 2 == 0) { console.log(`Angka ${index} adalah Genap`) } else { console.log(`Angka ${index} adalah Ganjil`) } } Dari kode di atas kita mengkombinasikan tiga point yaitu: Melakukan perulangan sebanyak 100 percobaan.Lalu melakukan percabangan dimana, jika hasil sisa bagi variabel index dengan 2 adalah 0, maka kita cetak isi dari variabel tersebut dengan pesan angka tersebut genap.Namun jika hasil pada kondisi pertama tidak memenuhi syarat, bisa dipastikan angka tersebut merupakan bilangan ganjil. Pada langkah di atas, kita telah berhasil melakukan percabangan sederhana menggunakan Javascript. Tentu banyak contoh lainnya yang biasa kita temui, seperti ketika ingin mengakses halaman tertentu, namun belum melakukan proses login, maka kita akan diarahkan ke halaman login terlebih dahulu. Berikut ini beberapa kata kunci yang sering digunakan untuk melakukan percabangan atau pengecekan kondisi: if elseswitch caseternary operator Untuk lebih jelasnya silakan kamu cek dokumentasinya: Conditional Javascript - MDN 6. Function Function pada Javascript adalah kumpulan dari baris kode yang berfungsi untuk menyelesaikan task tertentu. Pada point-point sebelumnya kita sudah menggunakan fungsi seperti melakukan perulangan kata kunci for atau melakukan percabangan dengan kata kunci if. Namun bagaimana jika kita ingin membuat fungsi kita sendiri? Javascript menjawab pertanyaan tersebut dengan cara: Menggunakan function function sum(a, b) { return a + b } console.log(sum(1, 2)) // Output: 3 Menggunakan Arrow Function const sum = (a, b) => { return a + b; } console.log(sum(1, 2)); // Output: 3 Terlihat kita berhasil membuat fungsi dengan dua cara yang berbeda dan keduanya merupakan kode yang valid. Namun terdapat perbedaan diantara keduanya. Perhatikan kode berikut: const total = sum(10, 30) // Memanggil fungsi sebelum dideklarasikan console.log(total) // Output: 40 // Mendeklarasikan fungsi dengan kata kunci function function sum(a, b) { return a + b } Pada kode di atas kita membuat variabel yang menampung data dari hasil fungsi sum, kemudian kita melakukan console dan didapatkan kode tersebut valid. Kok bisa? Karena ketika membuat fungsi dengan kata kunci function, Javascript memberikan sifat Global Scope yang dimana kita bisa mengakses fungsi tersebut sebelum dideklarasikan. Berbeda ketika kita menggunakan arrow function, maka akan terjadi error karena arrow function tidak memiliki sifat Global Scope. const total = sum(10, 30) console.log(total) // Output: ReferenceError: Cannot access 'sum' before initialization const sum = (a, b) => { return a + b; } Namun pada akhirnya, kita tetap akan direkomendasikan untuk menuliskan fungsinya terlebih dahulu baru mengakses nya, hal ini bertujuan agar kode yang kita buat tetap konsisten untuk menghindari terjadinya error di kemudian hari. 7. Operator Berikut ini beberapa operator yang akan sering kamu temui ketika menggunakan Javascript: JavaScript Arithmetic Operators OperatorNamaContohHasil-Subtractionx= 5x = 5+Additionx = 5 + 1x = 6*Multiplicationx = 6 * 2x = 12++Incrementx++x = 13--Decrementx—x= 12%Modulus (Sisa bagi)x = 10 % 2 == 0true JavaScript Arithmetic Operators OperatorNamaContohHasil==Equal tox == 8false===Equal value and typex === "5"false!=Not equalx != 8true!==Not equal value or typex !== "5"true>Greater thanx > 8false<Less thanx < 8true>=Greater or equal tox >= 8false<=Less or equal tox <= 8true JavaScript Arithmetic Operators OperatorNamaContoh&&AND(x < 10 && y > 1) is true||OR(x === 5 || y === 5) is false!NOT!(x === y) is true Kesimpulan Dari artikel “Pengenalan Dasar Javascript” dapat kita simpulkan beberapa point berikut: Apabila ingin membuat variabel, direkomendasikan menggunakan kata kunci const atau let untuk menghindari terjadinya duplikasi dan perubahan nilai secara tidak disengaja.Array dan object sama-sama menyimpan berbagai tipe data secara bersamaan, namun memiliki sifat yang berbeda.Kita bisa memanfaatkan fungsi array apabila ingin melakukan sebuah manipulasi data yang berkaitan di dalamnya.Kata kunci if else merupakan salah satu cara agar kita bisa melakukan pengkondisian dengan syarat yang kita hendaki.Apabila melakukan sebuah task, dan baris kode tersebut berulang dan kompleks, kita bisa memecah task tersebut menjadi bagian yang lebih kecil dan mempunyai fungsi tersendiri. Untuk membuat fungsi tersebut, kita bisa dengan menggunakan kata kunci function ataupun menggunakan arrow function. Ok that’s it. Saya harap kamu belajar banyak dalam tulisan kali ini, dan apabila kamu ingin belajar tentang web development, kamu bisa bergabung dalam kelas gratis yang disediakan oleh BuildWithAngga. Dengan mengikuti kelas yang ada di BuildWithAngga kamu juga dapat menambah portfolio dan menambah ilmu untuk memulai karir sebagai Web Developer. Jadi tunggu apalagi? Mari bergabung dan sampai jumpa di kelas.

Dalam dunia UI design, ada teman-teman seru yang bikin desain jadi lebih asyik! Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout, mereka seperti superhero desain UI. Dengan bantuan mereka, desainer seperti kit_a jadi punya senjata rahasia untuk menciptakan tampilan yang keren dan fungsional. Yuk, kita kenalan lebih dekat sama mereka! 😉 Figma Community Figma Community adalah tool terbaik desainer UI. Dengan beragam komponen dan templat gratis, Figma memudahkan kolaborasi tim secara langsung. Keunggulannya juga terletak pada plugin dan penggabungan yang membuat proses desain semakin lancar. Keunggulan Figma Community adalah: Kolaborasi Real-Time: Figma Community memungkinkan kamu untuk bekerja bersama secara langsung, memfasilitasi kolaborasi yang efisien dan tanpa hambatan dalam pengembangan desain.Gratis dan Beragam: Dengan komponen dan templat yang dapat diakses secara gratis, Figma Community menyediakan berbagai resources desain yang beragam, membantu desainer menghemat waktu dan upaya.Plugin dan Integrasi: Figma Community dilengkapi dengan plugin dan penggabungan yang memperkaya pengalaman desain, memudahkan kamu untuk menyesuaikan toool mereka sesuai kebutuhan, meningkatkan produktivitas secara keseluruhan. Open Peeps (Illustrations) Open Peeps merupakan koleksi ilustrasi karakter yang dapat disesuaikan, membantu menciptakan desain UI yang lebih menarik dan bersahabat. Kelebihannya terletak pada kemudahan penggunaan dan fleksibilitas, memungkinkan desainer untuk dengan cepat menyusun visual yang unik. Dengan variasi yang kaya, Open Peeps membantu “menghidupkan” desain tanpa perlu menghabiskan waktu berlebih. Keunggulan Open Peeps sebagai berikut: Karakter Dapat Disesuaikan: Open Peeps menawarkan ilustrasi karakter yang dapat disesuaikan, memungkinkan desainer untuk menciptakan visual yang unik sesuai dengan kebutuhan proyek mereka.Mudah Digunakan: Dengan interface yang sederhana, Open Peeps mudah digunakan bahkan bagi pemula sekalipun, mempercepat proses desain tanpa perlu menghabiskan waktu berlebih.Fleksibilitas Desain: Open Peeps memberikan fleksibilitas tinggi, memungkinkan desainer untuk dengan mudah menggabungkan karakter Open Peeps ke dalam desain mereka, memberikan sentuhan easy to use. Daily UI Daily UI memberikan daily challenge yang mengasah kemampuan desain UI. Dengan fokus pada elemen UI, desainer dapat terus berkembang. Keuntungan utamanya adalah memberikan latihan kreatif harian, memperkaya keterampilan desain secara konsisten. Keunggulan Dailyui adalah seperti: Daily Challenge: Daily UI memberikan tantangan desain harian, membantu desainer mengasah keterampilan mereka dalam merancang elemen UI dengan konsisten.Meningkatkan Kreativitas: Dengan fokus pada elemen UI yang berbeda setiap hari, membantu desainer mengembangkan yang lebih beragam dalam desain mereka.Mengembangkan Keterampilan: Mengikuti tantangan ini secara teratur membantu designer mempercepat developing keterampilan desain UI-mu, membuat mereka lebih siap menghadapi proyek-proyek yang complex. 404 Illustrations 404 Illustrations adalah sumber daya desain yang khusus dirancang untuk mempercantik halaman 404, yang biasanya muncul ketika pengguna mengunjungi halaman yang tidak dapat ditemukan. 404 Illustrations ini menawarkan berbagai ilustrasi yang penuh kreativitas untuk menggantikan pesan kesalahan standar. Ilustrasinya tidak hanya menarik perhatian, tetapi juga memiliki tujuan untuk membuat pengalaman kesalahan menjadi lebih bersahabat dan keren. Keunggulan 404 Illustrations antara lain: Kreatif dan Ramah: 404 Illustrations menawarkan ilustrasi yang kreatif dan ramah untuk error page, menjadikan masa yang seharusnya menjengkel menjadi lebih bersahabat.Jelas dan Menarik: Ilustrasinya tidak hanya menarik perhatian, tetapi juga memberikan pesan yang jelas tentang kesalahan yang terjadi, membantu pengguna memahami situasi dengan mudah.Menghidupkan Error Page: Dengan 404 Illustrations, error page tidak lagi terlihat membosankan. Ilustrasinya memberikan sentuhan visual yang menyenangkan, menciptakan pengalaman yang lebih positif bagi pengguna. Iconscout [Iconscout](https://https://www.figma.com/community/plugin/744098704933821409/iconscout-icons-illustrations-3d-assets-lottie-animations.fun/) adalah sumber ikon yang luas. Dengan beragam ikon dan gaya, Iconscout memenuhi kebutuhan desainer dengan berbagai selera. Integrasi yang mudah membuatnya menjadi tempat yang efisien untuk menemukan ikon-ikon yang sesuai. Keunggulan Iconscout antara lain: Beragam Pilihan: Iconscout menawarkan beragam ikon dengan gaya yang berbeda, memudahkan desainer untuk menemukan ikon yang sesuai dengan tampilan project mereka.Integrasi Mudah: Dengan integrasi yang simpel ke berbagai alat desain, Iconscout memastikan desainer dapat dengan cepat mengakses dan menggunakan ikon-ikon berkualitas tanpa hambatan.Sumber Ikon yang Luas: Iconscout memiliki database ikon yang luas, menjadikannya resources yang mudah untuk memenuhi kebutuhan desainer dengan berbagai selera dan gaya desain. Kesimpulan 💬 Resources Desain Penting: Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout membuktikan diri sebagai tools yang sangat mampu diandalkan bagi UI designer.Beragam dan Gratis: Keunggulan Figma Community dan Iconscout terletak pada kemampuan mereka menyediakan sumber daya yang beragam dan gratis, membantu kamu sebagai designer untuk menghemat waktu dan biaya.Kreativitas Terus Berkembang: Dailyui memberikan tantangan harian/daily challenge, memacu desainer untuk terus berkembang dan meningkatkan keterampilan desain UI-mu.Mengatasi Kesalahan dengan Kreativitas: 404 Illustrations tidak hanya mempercantik error page, tetapi juga membuat experience error menjadi lebih bersahabat dengan ilustrasi yang eye-catching.Efisiensi dan Fleksibilitas: Iconscout terkenal dengan menyediakan ikon-ikon beragam dan mudah diakses, memastikan designer dapat bekerja dengan efisien tanpa mengorbankan fleksibilitas. Dalam dunia UI design, memiliki akses sumber daya yang tepat sangatlah penting. Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout membuktikan diri sebagai “senjata” tak tergantikan bagi UI designer. Dengan beragamnya resources dan daily challenge dari Daily UI, desainer dapat terus mengasah kreativitas mereka. 404 Illustrations memberikan kesan ramah pada error, sedangkan Iconscout dengan koleksi ikonnya yang beragam memudahkan desainer dalam mencari yang sesuai. Semuanya ini membuktikan bahwa kualitas desain dapat ditingkatkan dengan memanfaatkan berbagai resources yang ada.

Fetching data merupakan teknik bagaimana sebuah aplikasi melakukan permintaan resource pada server tertentu dan mengembalikan data tersebut sesuai dengan permintaan. Pada artikel kali ini kita akan membahas bagaimana melakukan Fetching data menggunakan Javascript menggunakan kata kunci fetch. Syntax fetch('url') .then(result => { // handle result here }).catch(error => { // handle error here }) Mari kita analisis: Fungsi fetch pada JavaScript menerima satu parameter bertipe data string, yaitu endpoint atau URL dimana kita akan melakukan proses permintaan data pada resource tertentu.Kemudian karena fungsi fetch merupakan sebuah Promise, maka kita perlu melakukan proses chaining dengan fungsi then agar mendapatkan data yang diinginkan.Ketika melakukan sebuah permintaan data menggunakan fetch, terkadang data yang diinginkan tidak dikembalikan sesuai permintaan. Hal tersebut terjadi karena server ataupun endpoint tersebut mengalami error yang tidak kita ketahui. Untuk mengatasi hal tersebut kita wajib melakukan error handling, yaitu dengan cara memanggil fungsi catch. Fungsi catch ini mendapatkan semua error baik saat melakukan proses pemanggilan data ataupun kesalahan saat proses development. Implementasi Kita akan mencoba untuk hit endpoint yang disediakan oleh website JSONPlaceholder untuk melakukan proses fetching sederhana menggunakan kata kunci fetch. Jadi mari kita mulai. Inisialisasi Project Silakan kamu buat folder dengan nama learn-fetching-data, kemudian buat file HTML dengan nama index.html dan script.js hal ini bertujuan agar kita memisahkan antara bagian logic dan proses render menjadi file terpisah. Dalam project kali ini kita akan menggunakan Tailwind CSS sebagai proses styling, maka didapatkan: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample API Data</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> <style> body { font-family: "Poppins", sans-serif; } </style> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div class="container mx-auto px-5 mt-10"> <h1 class="text-2xl font-bold mb-5">Belajar Fetching Data</h1> <div id="container" class="flex flex-col gap-5"> <!-- Semua data akan dirender disini --> </div> </div> <script src="script.js"></script> </body> </html> Maka didapatkan hasil: 2. Lakukan Fetching Data Silakan kamu buka file script.js, kemudian kita akan melakukan proses fetching data dengan URL yang sudah kita siapkan sebelumnya, maka didapatkan: const fetchAllTodos = () => { return fetch("https://jsonplaceholder.typicode.com/posts") .then((response) => { if (!response.ok) { throw new Error('Network response was not ok.'); } return response.json(); }) .then((data) => { console.log(data); return data; }) .catch((error) => { return error; }); }; fetchAllTodos(); Maka apabila kita buka browser dan pada bagian console akan didapatkan data sebagai berikut: Seperti keterangan console di atas, kita sudah berhasil melakukan proses pengambilan data dengan menggunakan kata kunci fetch pada JavaScript. Selanjutnya kita akan menampilkan data tersebut ke dalam bentuk komponen UI yang sederhana. 3. Implementasikan Kedalam UI Untuk membuat hasil fetching data menjadi sebuah komponen HTML dan mudah dibaca, kita perlu membuat design nya terlebih dahulu. Berikut komponen Card yang akan kita gunakan untuk menampilkan data tersebut: <div class="border rounded-md p-4 flex justify-between items-start gap-x-3"> <div> <h1 class="font-bold mb-3">Lorem ipsum dolor sit amet.</h1> <span class="text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum, suscipit?</span> </div> <div> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg> </div> </div> Maka apabila kita padukan dengan baris HTML pada langkah pertama, didapatkan kode sebagai berikut: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample API Data</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> <style> body { font-family: "Poppins", sans-serif; } </style> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div class="container mx-auto px-5 mt-10"> <h1 class="text-2xl font-bold mb-5">Belajar Fetching Data</h1> <div id="container" class="flex flex-col gap-5"> <!-- Semua data akan dirender disini --> <div class="border rounded-md p-4 flex justify-between items-start gap-x-3"> <div> <h1 class="font-bold mb-3">Lorem ipsum dolor sit amet.</h1> <span class="text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum, suscipit?</span> </div> <div> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg> </div> </div> </div> </div> <script src="script.js"></script> </body> </html> Pada langkah ini kita sudah berhasil membuat design komponen Card, hanya saja data tersebut belum sesuai dengan hasil fetching kita. Maka kita perlu menjadikannya dinamis dengan cara membuat fungsi yang me-render komponen Card yang barusan kita dibuat. Silahkan kamu buka file script.js dan tambahkan kode berikut: // Ambil tag id container const containerDisplay = document.getElementById('container') // Komponen Card untuk render semua data const cardComponent = (title, body) => { // Buat Card const data = ` <div class="border rounded-md p-4 flex justify-between items-start gap-x-3"> <div> <h1 class="font-bold mb-3">${title}</h1> <span class="text-sm text-gray-500">${body}</span> </div> <div> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg> </div> </div> ` // Tambahkan kedalam elemen container yang sudah kita definisikan sebelumnya containerDisplay.insertAdjacentHTML('afterbegin', data) } Kemudian kita buat sebuah fungsi bernama render untuk menggabungkan antara fungsi fetchAllTodos yang sudah kita definisikan sebelumnya dengan fungsi cardComponent yang barusan kita buat. function render() { fetchAllTodos() .then((response) => { response.forEach(result => { cardComponent(result.title, result.body); }); }) .catch((error) => { console.error('Error rendering data:', error); }); } render(); Maka apabila kita buka browser akan didapatkan hasil seperti ini: Taraa! Selamat kalian telah berhasil melakukan fetching data dan menampilkannya ke dalam komponen HTML yang mudah dibaca. Pada langkah selanjutnya kita akan mencoba melakukan Handle Error untuk mengantisipasi terjadinya kesalahan baik itu dari aplikasi kita maupun dari sisi server. 4. Handle Error Pertama kita buat komponen HTML nya terlebih dahulu dan kita sebut sebagai komponen Alert: <div class="m-10 border border-red-700 text-red-700 bg-red-100 p-10 rounded-lg flex flex-col items-center gap-3"> <div class="flex gap-x-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> </svg> <h1 class="font-bold text-center md:text-xl lg:text-2xl">Terjadi Kesalahan</h1> </div> <span class="text-sm text-center text-red-600"><span class="font-bold">Error Message :</span> Some Error</span> </div> Didapatkan bentuk seperti ini: Lalu buat fungsi untuk menampung komponen Alert tersebut seperti komponen Card sebelumnya, didapatkan: // Komponen Alert jika terdapat error const alertComponent = (message) => { const data = ` <div class="m-10 border border-red-700 text-red-700 bg-red-100 p-10 rounded-lg flex flex-col items-center gap-3"> <div class="flex gap-x-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> </svg> <h1 class="font-bold text-center md:text-xl lg:text-2xl">Terjadi Kesalahan</h1> </div> <span class="text-sm text-center text-red-600"><span class="font-bold">Error Message :</span> ${message}</span> </div> ` containerDisplay.insertAdjacentHTML('afterbegin', data) } Kemudian kita implementasikan ke dalam fungsi render sebelumnya, didapatkan: function render() { fetchAllTodos() .then((response) => { response.forEach(result => { cardComponent(result.title, result.body); }); }) .catch((error) => { alertComponent(error.message) }); } render(); Maka dengan ini apabila terdapat error, maka fungsi AlertComponent akan berjalan dan menampilkannya sebagai komponen HTML sesuai dengan yang kita harapkan. Berikut ini kode keseluruhan file index.html dan script.js yang telah kita buat: File index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample API Data</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> <style> body { font-family: "Poppins", sans-serif; } </style> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div class="container mx-auto px-5 mt-10"> <h1 class="text-2xl font-bold mb-5">Belajar Fetching Data</h1> <div id="container" class="flex flex-col gap-5"></div> </div> <script src="script.js"></script> </body> </html> File script.js // Ambil tag id container const containerDisplay = document.getElementById('container') // Komponen Card untuk render semua data const cardComponent = (title, body) => { // Buat Card const data = ` <div class="border rounded-md p-4 flex justify-between items-start gap-x-3"> <div> <h1 class="font-bold mb-3">${title}</h1> <span class="text-sm text-gray-500">${body}</span> </div> <div> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg> </div> </div> ` // Tambahkan kedalam elemen container yang sudah kita definisikan sebelumnya containerDisplay.insertAdjacentHTML('afterbegin', data) } // Komponen Alert jika terdapat error const alertComponent = (message) => { const data = ` <div class="m-10 border border-red-700 text-red-700 bg-red-100 p-10 rounded-lg flex flex-col items-center gap-3"> <div class="flex gap-x-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> </svg> <h1 class="font-bold text-center md:text-xl lg:text-2xl">Terjadi Kesalahan</h1> </div> <span class="text-sm text-center text-red-600"><span class="font-bold">Error Message :</span> ${message}</span> </div> ` containerDisplay.insertAdjacentHTML('afterbegin', data) } // Fungsi untuk mendapatkan semua data fetch const fetchAllTodos = () => { return fetch("https://jsonplaceholder.typicode.com/posts") .then((response) => { if (!response.ok) { throw new Error('Network response was not ok.'); } return response.json(); }) .catch((error) => { return error; }); }; function render() { fetchAllTodos() .then((response) => { response.forEach(result => { cardComponent(result.title, result.body); }); }) .catch((error) => { alertComponent(error.message) }); } render(); Kesimpulan Tentu saja artikel ini hanya mencakup dasar fetching data dan bagaimana implementasinya dalam project sederhana. Kita juga dapat mengkombinasikan fetching data menggunakan framework JavaScript seperti React atau Vue untuk membangun sebuah website yang lebih interaktif dan efisien. Kalian bisa mulai latihan menggunakan framework JavaScript dengan cara mempelajari beberapa kelas online di BuildWithAngga. Jadi tunggu apa lagi? Mari bergabung dan sampai jumpa di kelas!

User Experience Research merupakan hal yang sangat vital bagi keberlangsungan perusahaan untuk terus kompetitif dan menyediakan pelayanan terbaik kepada user. Dengan memberikan kebutuhan yang sesuai dengan kehendak User, maka perusahaan tersebut mendapatkan banyak benefit seperti User retention, Customer Satifcation Score yang tinggi, maupun Conversion Rate yang baik. Dengan kebutuhan tersebut, tentunya perusahaan sangat membutuhkan platform yang dapat dengan advanced membantu perusahaan untuk melakukan User Experience Research. Maze bisa jadi salah satu platform terbaik untuk kamu melakukan User Research. Maze merupakan software User Research yang dapat membantu tim mengumpulkan, mengatur, bahkan analisis data dalam satu platform. Maze juga dapat membantu mengumpulkan data berupa Kuantitatif dan Kualitatif pada Web, Mobile App, maupun Desktop App. Berikut beberapa Manfaat atau kegunaan Maze yang bisa kamu pakai: User Journey MappingA/B TestingUsability TestingAccessibility TestingPre-release Product TestingUsability Benchmarking Dan masih banyak lagi! Manfaat tersebut dapat membantu kamu mengiterasi produk kamu lebih baik secara cepat. Namun, bagi kamu yang baru memulai User Research. Maze menyediakan banyak sekali template yang siap pakai untuk kamu. Fitur Unggulan Maze Usability Testing Maze memfasilitasi usability testing yang efisien dan efektif untuk evaluasi produk kamu. Kamu dapat melakukan Usability Testing dengan bantuan tim kamu secara real-time. Partisipan dapat melakukan user interaction dengan prototype yang telah kamu berikan. Pada akhirnya, maze dapat memberikan kamu beberapa insights yang sangat membantu seperti, Heatmap, Task Time, dan lainnya. Maze juga dapat bekerja secara baik dengan yang disediakan seperti: Video RecordingsParticipants ManagementIn-product prompts Fitur-fitur tersebut dapat memberikan insights berharga untuk kamu memahami User Behavior dan Preferences. Dengan ini, kamu dan tim dapat memulai peningkatan dalam produk yang kamu sedang kerjakan. Validasi Konsep dan Ide Konsep dan Ide merupakan hal yang sangat vital dalam Product Development. Dengan begitu, Maze menyediakan tools yang dapat mengvalidasi ide dan konsep kalian secara cepat dengan Users asli. Tidak hanya itu, Maze juga menyediakan analisis yang sangat detail dan juga metriks untuk mengukur user research kalian seperti time-on task, heatmap, dan lainnya. Hasil dari analisis tersebut dapat kamu pakai untuk iterasi membuat keputusan design lebih baik lagi. Kamu dapat menggunakan fitur tersebut seperti: A/B Testing: Komparasi versi prototype yang berbeda.5-second tests: Secara cepat mendapatkan feedback.Tree Testing: Identifikasi user flows dan optimasi navigasi.Heat Map: Memahami perilaku pengguna. Dengan fitur-fitur tersebut, tentunya kamu melakukan validasi dan ide sangat efektif dan efisien. Content Testing Disamping dari validasi konsep dan prototype testing, kamu juga dapat melakukan content testing untuk keperluan kamu melakukan Information Architecture (IA). Content Testing merupakan cara yang sangat membantu kamu untuk memberikan informasi yang sangat dibutuhkan oleh users. Kamu dapat melakukan Content Testing ini dengan fitur berikut: Card Sorting: Optimasi Information Architecture (IA)Text Analysis: Analisis Copywriting dan KonsepSurvey Creation: Membuat survey untuk memahami Users. Dengan begitu, kamu dapat mengetahui content tersebut apakah dibutuhkan users atau tidak. Kesimpulan Well, pada dasarnya, kamu dapat menggunakan Maze untuk keperluan apapun dalam stage manapun produk kamu berada. Platform yang menyediakan hampir semua tools untuk keperluan mulai dari research hingga usability testing. Maze mempunyai user interface yang mudah digunakan, dan juga Maze dapat kamu pakai secara gratis dengan beberapa limitasi. Berikut pro dan kontra pengalaman saya menggunakan Maze dalam User Experience Research: Pro Fitur yang lengkap dan komprehensif untuk user research.Integrasi dengan Tools terbaik seperti Figma.Easy-to-use.Analisis yang sangat detail untuk mengukur Key Performace Indicator (KPI) ataupun metrics lainnya.Banyak Template yang bisa kamu pakai. Kontra Free Plan sangat terbatas. Sedangkan Rencana berbayar tergolong relatif mahal untuk digunakan.Tester kadang mempunyai masalah saat menggunakan maze. Kalau kamu ingin mempelajari cara User Experience Research dengan baik lagi, kamu dapat berkunjung ke website BuildWithAngga.com dalam mempersiapkan karir UI/UX Designer dan dapat survive dengan kompetitor lainnya. Sampai jumpa di artikel & tips selanjutnya. Good Luck!

Cascade Style Sheet (CSS) sangat penting digunakan apabila kita ingin membuat projek website menjadi lebih menarik dalam meningkatkan user interface dan user experience sehingga pengguna yang menggunakan website tersebut menjadi lebih betah dan dapat meningkatkan keuntungan dari perusahaan tersebut. Pada CSS terdapat banyak property yang bisa digunakan seperti tinggi, lebar, warna latar belakang, efek shadows, warna gradient, border, rata kanan dan kiri, dan juga sebagainya. Apabila kita menulis property tersebut satu per satu dari awal maka akan membutuhkan waktu yang begitu banyak dalam menyelesaikan sebuah tampilan projek website. Mengenal Framework Tailwind CSS Saat ini terdapat banyak framework CSS yang dapat kita gunakan untuk mempercepat kinerja kita sebagai website developer dalam mengembangkan website yang modern disertai tampilan menarik, saya akan coba memberikan rekomendasi untuk kamu segera mencoba framework CSS yang sedang popular saat ini yaitu adalah Tailwind CSS. Tailwind adalah sebuah framework CSS yang mengedepankan konsep utility-first, yang dimaksud dari utility-first adalah Tailwind telah menyediakan ratusan Class CSS yang dapat kita panggil dengan mudah pada dokumen HTML, sehingga kita tidak perlu lagi melakukan penulisan CSS secara custom karena class CSS yang disediakan oleh tailwind sudah sangat lengkap. Beberapa Class pada framework Tailwind CSS yang sering digunakan oleh website developer adalah sebagai berikut: w-10 = mengatur lebarh-10 = mengatur tinggitext-white = mengatur warna teksbg-indigo-500 = mengatur warna latar belakangflex flex-col = mengatur layout menjadi verticalgrid grid-cols-3 = mengatur layout menjadi terbagi 3 bagian (DIV) Perbedaan Tailwind CSS dengan traditional framework CSS lainnya Jika sebelumnya kamu pernah pakai Bootstrap atau Semantic UI maka ketika mulai menggunakan Tailwind CSS, kamu akan melihat perbedaan yang besar yaitu pada Tailwind CSS tidak tersedia predefined components yang siap digunakan seperti btn-primary, navbar, form-group, dan juga sebagainya layaknya tersedia pada traditional framework CSS. Konsep utility-first pada tailwind css memberikan kebebasan tak terbatas kepada website developer untuk menggunakan kreatifitas mereka dalam mengembangkan sebuah website yang modern disertai tampilan sangat menarik. Selain itu juga untuk mengurangi bloated pada projek tersebut sehingga perfomance pada website menjadi lebih cepat karena tidak menggunakan Class yang tidak terpakai. Tips mempelajari framework Tailwind CSS dengan baik Kamu perlu memperdalam property utama yang tersedia pada CSS sebelum langsung menggunakan Tailwind CSS dikarenakan seperti yang saya bilang sebelumnya kalau menggunakan Tailwind tidak akan tersedia predefined component sehingga kita perlu paham untuk mengatur tinggi, lebar, warna background, dan sebagainya menggunakan property apa saja sehingga hasilnya lebih maksimal. Setelah mengenal seluruh property penting pada CSS maka bisa dilanjutkan untuk memahami dokumen resmi framework Tailwind CSS untuk mempelajari bagaimana cara install, pemakaian class, dan juga sebagainya sehingga kita bisa lebih hafal dalam menggabungkan setiap utility yang telah disediakan oleh framework Tailwind CSS untuk membuat layout yang kompleks. Perbanyak slicing tampilan website untuk berlatih Saya biasanya memperdalam keahlian dalam menggunakan Tailwind CSS adalah dengan cara melakukan slicing berbagai layout dari mulai yang mudah sampai dengan sulit. Beberapa template Figma tersebut dapat saya download gratis sebagai bahan latihan pada website Shaynakit, seluruh design pada Shaynakit dibuat oleh designer lokal dalam membantu website developer memiliki projek yang menarik sebagai portfolio mereka kedepannya nanti. Kesimpulan menggunakan framework Tailwind CSS Tailwind CSS memberikan kebebasan dan perfomance yang baik dalam membangun website yang memiliki tampilan modern dan eye-catching. Kita dapat mengkombinasikan Tailwind CSS dengan framework JavaScript seperti React atau Vue JS dalam membangun website yang interaktif demi meningkatkan pertumbuhan bisnis perusahaan. Kamu bisa mulai latihan menggunakan framework tailwind css dengan cara mempelajari beberapa kelas online gratis tailwind css buatan mentor expert di BuildWithAngga.

Sebuah website dapat membantu kita untuk meningkatkan sumber penghasilan sebagai pembisnis atau juga pekerja freelancer. Biasanya biaya membangun website tergolong cukup mahal sehingga masih banyak bisnis UMKM atau individual yang kesulitan dalam memiliki sebuah website yang menarik, modern, dan dapat mendatangkan sumber penghasilan. Pada kali ini saya akan membagikan langkah-langkah terbaru dalam membuat sebuah website tanpa harus mengeluarkan biaya, selain itu juga kita tidak perlu memiliki keahlian programming (coding) karena nantinya kita hanya perlu drag and drop saja menggunakan beberapa komponen dan template yang telah disediakan oleh software yang akan kita pelajari nanti. Beberapa contoh website yang dapat kita bangun Software tersebut dapat membangun beberapa kategori website yang saat ini sangat dibutuhkan oleh orang-orang dan perusahaan kecil atau besar di Indonesia. Berikut beberapa kategori website yang dapat kita buat: Ecommerce, website ini digunakan untuk membantu pembisnis kecil atau individu dalam menjual produk buatan mereka secara online dan menjangkau lebih banyak calon pembeli dengan kemudahan dalam membeli produk tersebut.Company profile, kategori yang satu ini dibutuhkan oleh perusahaan dan startup dalam mempromosikan vision mereka yang di dalamnya tersedia jasa atau produk yang mereka jual dalam membangun pertumbuhan bisnis perusahaan lain.Personal portfolio, website dengan kategori ini digunakan oleh para freelancer seperti software engineer atau ui/ux designer dalam mempromosikan jasa mereka dan menjangkau lebih banyak calon klien atau rekruiter untuk memberikan projek. Beberapa website di atas dapat kita bangun tanpa harus menggunakan coding, dan faktanya kita bisa selesaikan website tersebut hanya dalam beberapa hari saja dibandingkan dengan ketika ngoding sendiri yang dapat menghabiskan waktu paling cepat adalah satu bulan. Langkah untuk membuat website dengan biaya gratis 1) Menggunakan Framer atau Webflow Framer dan Webflow adalah sebuah software yang sering digunakan oleh orang-orang ketika ingin membuat website tanpa koding dengan biaya gratis. Kedua software tersebut juga telah menyediakan ratusan template gratis yang sesuai dengan kebutuhan kita seperti toko online, company profile, landing page, dan sebagainya. Pada kali ini kita coba praktikkan menggunakan software Framer ya karena lebih mudah diadaptasi oleh seorang pemula terutama yang tidak punya background design atau coding, well, mari kita mulai pembelajarannya dengan baik. 2) Kunjungi Framer lalu periksa template Kamu bisa coba kunjungi website resmi Framer lalu pilih menu templates untuk melihat seluruh template dengan design modern dan juga memberikan user experience yang bagus untuk bisnis kita. 3) Melakukan duplicate pada template tersebut Setelah kita menemukan template yang cocok maka selanjutnya dapat kita duplicate saja kepada akun Framer kita. Alasan utama kita langsung menggunakan template yang tersedia dibandingkan bikin dari awal adalah agar kita bisa terbiasa dulu dengan cara kerja software Framer dari beberapa template gratisan yang telah dibuat oleh orang-orang handal. 4) Memodifikasi sesuai kebutuhan projek website Kita perlu modifikasi template yang telah kita duplicate sebelumnya sehingga akan terlihat lebih natural karena sudah sesuai dengan kebutuhan bisnis online yang kita jalani saat ini. Dimulai dengan mengubah seluruh copywriting pada setiap halamannya menggunakan bahasa Indonesia (sesuai dengan target audience). Setelah itu kita juga bisa mengubah beberapa image yang dibutuhkan misalnya kita berfokus jualan skincare online maka kita perlu ubah seluruh foto pada website tersebut dengan foto-foto berkualitas tinggi produk skincare kita saat ini. 5) Mempublish website agar dapat diakses online Apabila projek website tersebut sudah sesuai dengan keinginan dan kebutuhan bisnis kita maka selanjutnya adalah mempublish-nya agar orang-orang dapat segera mengunjungi website kita secara online untuk membeli produk dan jasa yang kita jual saat ini. Sebenarnya untuk mempublish sebuah website biasanya membutuhkan biaya besar untuk membeli hosting dan domain, tapi karena kita menggunakan Framer, jadi kita tidak perlu mengeluarkan biaya besar tersebut karena Framer telah menyediakan domain dan hosting berkualitas tinggi dengan biaya gratis, wow. Kesimpulan dan penutup Bikin website modern yang menarik di zaman sekarang sudah lebih mudah dibandingkan beberapa tahun sebelumnya, tugas kita saat ini adalah memanfaatkan teknologi tersebut dan berfokus kepada dari segi business model yang kita jalankan secara online. Apabila kamu juga tertarik untuk belajar membangun website dengan full-stack coding dalam membangun fitur yang lebih kompleks lagi maka saya sarankan mengikuti beberapa kelas online gratis website development buatan mentor-mentor handal di BuildWithAngga. Setelah itu juga kamu bisa pelajari kelas-kelas gratis UI UX design untuk meningkatkan user experience dan user interface pada website yang kamu bangun saat ini. Semoga bisa bermanfaat dan sampai jumpa pada tips menarik lainnya.

Bagi sebagian Designer, nama Figjam mungkin sudah tidak asing lagi. Figjam sendiri merupakan produk yang telah dikembangkan oleh perusahaan desain dan kolaborasi bernama Figma. Sedangkan Figma merupakan platform design berbasis cloud yang memungkinkan kolaborasi antar tim secara real-time dalam pengembangan produk, interface design, maupun prototype Figjam lebih fokus pada kolaborasi brainstorming dan ideation secara real-time. Figjam dirancang untuk membantu tim dalam proses brainstorming, wireframe, diagram, dan lain-lain. Figjam memungkinkan kamu untuk membuat board yang dapat diakses publik dan diedit bersama, termasuk fitur yang telah saya sebutkan Pada artikel ini, saya akan menjelaskan fitur-fitur sederhana untuk kamu memulai bekerja menggunakan Figjam agar terpakai dengan efektif. Whiteboard Saat kamu membuka Figjam, hal pertama yang akan kamu lihat adalah papan putih atau whiteboard yang sangat luas. Whiteboard sendiri merupakan fitur yang memungkinkan kamu untuk berkolaborasi secara real-time dalam membuat wireframe, diagram, brainstorming, sticky notes, dan banyak lagi. Sebagai analogi, Whiteboard merupakan papan tulis yang disediakan secara virtual yang memungkinkan orang lain dapat berkontribusi, memberikan feedback, dan berinteraksi dengan ide-ide secara langsung. AI Generate dan Template Pada saat kamu membuat file baru Figjam, di sisi kiri akan kamu temukan sebuah tools AI Generate beserta template. Ini merupakan tools yang dapat mempermudah kamu dalam menemukan apa yang akan kamu buat. Contohnya, saya saat ini ingin membuat sesi brainstorm dengan kolega saya. Lalu saya cukup menekan tombol ‘Brainstorm’ saja, sisanya AI Generate yang akan bekerja. Pada Generate AI ini, kamu dapat memilih 3 pilihan rekomendasi dari AI tersebut untuk memulai seperti Chart, dan Plan. Namun, jika keperluan kamu tidak ada di ketiga pilihan tersebut, kamu dapat memberikan request prompt di input field “Let’s make a…” tersebut. Contoh yang saya buat. Setelah prompt selesai kita buat. Hasilnya akan seperti ini: Tentunya, kamu dapat mengkostumisasi template yang diberikan AI tersebut dengan lebih leluasa dan sesuai seleramu lagi. Namun, jika kamu ingin melihat-lihat template yang lain, kamu dapat menekan tombol ‘Start with a template’. Disini kamu dapat memilih template kamu butuhkan yang telah disediakan Figma maupun kontributor lainnya, mulai dari meetings sampai dengan developer. Tools Bagian Atas Jika kita tadi membahas Whiteboard dan Tools AI dan Template, maka kita akan beralih pada bar sisi atas. Disana kamu akan menemui beberapa option untuk keperluan operasional seperti penamaan file, pesan feedback, share file, dan lain-lain. Pada sisi kiri tool bagian atas, kita dapat melihat beberapa opsi icon button, berikut penjelasaannya: Icon Figma: Disini kamu dapat memilih semua pengaturan terhadap software Figjam, kamu dapat menemukan opsi untuk menambah file Figjam, Import image, Keyboard Shortcut, dan lain-lainTimer and Music: Ini merupakan tools yang dapat membantu kamu untuk memulai timer dan memainkan music agar kamu dapat fokus dan efesien dalam mengerjakan ideation.AI Generate: Tools ini sangat cocok bagi kamu yang ingin memulai suatu pekerjaan dengan framework tertentu yang belum disediakan template nya. Kamu disini dapat menulis sendiri prompt untuk AI atau dapat memilih opsi yang telah disediakan seperti chart, diagram dan brainstorm.Template: Pada tools ini, kamu disediakan ratusan template yang sangat berguna pada pekerjaan tertentu, mulai dari meeting, planning, diagram, develop, user research, hingga design. Kamu juga dapat melihat template yang diberikan komunitas di tombol ‘See more in Community’Feedback: Tools ini memungkinkan kamu dan orang lain dapat saling memberikan feedback di beberapa titik. Kamu juga dapat melihat feedback berdasarkan list pada sisi kanan tampilan kamu.Nama File: Disini kamu dapat melihat nama file yang sedang kamu edit. Kamupun dapat rename nama tersebut dengan klik 2x pada tulisan Untitled tersebut.Share: Disini kamu dapat mengundang kolega kamu, ataupun membagikan link File Figjam kamu.Zoom in & out: Kamu dapat melakukan Zoom In & Zoom Out pada whiteboard kamu. Cukup tekan tombol “+” atau “-” sesuai dengan preferensi kamu. Tools bagian Bawah Jika kita tadi sudah membahas tools bagian atas, maka sekarang kita membahas bagian bawah. Tidak seperti bagian atas, disini Figjam lebih menyediakan tools yang berhubungan dengan whiteboard dan kreativitas. Select Tool & Hand Tool: Kamu dapat memakai Select tool ini untuk keperluan memilih, nge-block, ataupun drag & drop. Sedangkan Hand tool, kamu dapat memakai ini untuk keperluan melihat-lihat tanpa mengedit apapunMarker: Disini kamu disediakan berbagai macam market, lebih dalamnya yaitu seperti spidol, pensil, penghapus, dan tape dalam berbagai macam warna.Sticky Note: sama seperti sticky notes pada umumnya, kamu dapat menggunakannya untuk keperluan brainstorming atau catatan kecil.Shape & Connector: Figjam menyediakan banyak sekali bentuk dan warna untuk kamu memulai bikin flowchart, diagram, ataupun wireframe. Disini kamu juga dapat membuat connectorText: Seperti biasa, kamu bisa bikin teks melalui ini.Section: Section dapat digunakan saat kita ingin membedakan satu block dengan block lainnya agar tidak kebingungan saat mencarinya.Table: Tidak hanya menyediakan tools untuk gambar atau bentuk, Figjam juga menyediakan table untuk keperluan memasukkan data-data penting.Stamp: Disini Figjam menyediakan stamp & emoticon yang unik dan lucu. Stamp biasanya digunakan untuk melakukan voting.Template: Figjam banyak menyediakan template untuk kamu memulai suatu pekerjaan. Di dalam tools ini, kamu dapat banyak menemukan template berguna seperti untuk memulai meetings, sesi brainstorming, diagram, flowchart, dan masih banyak lagi. Tidak cuma template, tools ini juga menyediakan stickers yang unik, Widget seperti kanban dan Jambot AI, Plugin, dan masih banyak lagi. Kesimpulan Well, berikut tadi adalah tools-tools sederhana yang bisa kamu pakai saat menggunakan Figjam. Tentunya, masih banyak lagi tools di dalam Figjam yang lebih dalam untuk menunjang kamu bekerja dengan lebih mudah lagi seperti Jambot AI. Kelebihan pemakaian Figjam yang mudah digunakan, beragam pilihan template untuk memulai, dan tingkat kustomisasi yang luas dapat menjadikan Figjam sebagai elemen penting untuk brainstorming, meeting, diagram, dan banyak hal. Sehingga, Figjam merupakan solusi yang tepat bagi para developer, designer, product manager, dan lain-lain. Untuk mendapatkan solusi yang terbaik dari setiap sesi yang mereka lakukan, dan memvisualisaikannya dalam bentuk Whiteboard di Figjam. Silahkan dipelajari beberapa kelas gratis UI/UX Design yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan kompetitor lainnya. Sampai jumpa di artikel & tips selanjutnya. Good Luck!

Dalam dunia digital design, Figma telah menjadi “pegangan” setia bagi para designer yang sangat membutuhkam inovasi baru. Dengan interface yang bersahabat dan kemampuan kolaboratif, Figma bukan hanya tools desain biasa/semata, tetapi juga pilihan yang tepat bagi pengguna Windows untuk memulai kreativitas mereka. Artikel ini akan mengarahkan kamu melalui langkah-langkah men-download dan meng-install Figma di Windows, mempersiapkan kamu untuk explore dunia desain tanpa batas yang ditawarkan oleh platform ini. Berikut keunggulan menggunakan Figma: Real-time Collaborations: Figma memberikan kemampuan berkolaborasi secara real-time, antar anggota tim untuk bekerja bersama pada project desain untuk menghemat waktu dan lokasi. Hal ini mampu mengoptimalkan produktivitas dan memastikan kerjaan menjadi jauh lebih secara efisien.Prototyping yang Interaktif: Dengan Figma, designer dapat menciptakan prototype interaktif dengan mudah. Ini memungkinkan mereka untuk menguji design mereka sebelum diimplementasi.Component Library: Figma memiliki konsep component library yang dapat digunakan kembali. Designer dapat membuat, menyimpan, dan menggunakan komponen desain secara konsisten di seluruh project. Hal ini tidak hanya memastikan konsistensi visual, tetapi juga mempercepat proses desain dengan meminimalkan pengulangan membuat komponen.Memperpadukan Desain yang Mudah: Figma mendukung perpaduan yang mudah dengan berbagai tool desain dan prototyping lainnya. Dengan kemampuan untuk mengimpor dan mengekspor berbagai format file, Figma memudahkan desainer untuk berkolaborasi dengan tim yang mungkin menggunakan tool desain berbeda. Yuk simak cara meng-install Figma untuk Windows! Kunjungi Situs Resmi Figma Buka browser kamu lalu kunjungi situs resmi Figma. Daftar atau Masuk Akun Buatlah akun Figma untuk mulai mendesain atau jika kamu sudah memiliki akun, pilih opsi Log In. Get the Desktop App Pada pojok kiri atas, ada Menu akun. Klik tanda panah yang ke arah bawah dan pilih Get Desktop App. Ikuti langkah selanjutnya yang diarahkan. Open Figma Terakhir, kamu tinggal buka aplikasi Figma yang ada di laptop/komputermu. Kamu tidak perlu lagi membuka Figma lewat browser yaa Lalu klik opsi + Design File untuk mulai membuat design! Last but Not Least, Explore Your Design Style Now! Dengan mengikuti langkah-langkah ini, kamu dapat dengan mudah menginstal Figma di Windows dan mulai explore potensi kreativitasmu. Kalau kamu ingin memulai perjalanan menjadi seorang UI/UX designer, kami menyarankan kamu untuk mengikuti alur pembelajaran UI/UX gratis yang kami sediakan seperti: UI Design : Grid System dengan Figma Di sini kamu akan mulai mempelajari: Tools Dasar FigmaMemahami fungsi Grid dalam projectMembuat Grid pada FigmaMengimplementasikan Grid ke UI Design Pada kelas Grid System ini, kamu akan belajar bagaimana Grid System membantu kita untuk menentukan letak elemen desain yang konsisten. Tanpa menggunakan Grid, kemungkinan besar letak elemen tidak konsisten dan hasilnya jadi tidak responsive. Dengan grid, kamu dapat dengan cepat menempatkan elemen-elemen desain tanpa harus terus-menerus mengukur dan menyesuaikan letaknya. Dengan mengatur grid yang responsif, kamu dapat dengan mudah mengatur layout untuk berbagai ukuran layar atau perangkat, memastikan experience pengguna yang konsisten di seluruh platform. Kelas ini cocok untuk kamu yang ingin mempelajari Micointeracion, untuk kamu yang ingin mempelajari cara membuat prototype dan mendalami pengetahuan UI/UX! UI Design : Wireframe to Visual Design Di kelas ini kamu akan belajar tentang: Pembuatan Moodboard untuk referensi desainImpor gambar dan icon untuk tampilan UIMenentukam hirarki teksMengubah tampilan Wireframe menjadi Visual Design Wireframe dan Visual Design adalah dua aspek kunci dalam proses UI design Figma, dan keduanya memainkan peran yang sangat penting dalam pembuatan UX yang efektif dan menarik. **** Visual design memiliki peran yang sangat penting dalam UI design di Figma maupun dalam platform desain lainnya. Visual Design sangat penting untuk memberikan first impression yang baik. Design yang menarik dan profesional dapat memberi kesan positif dalam desainmu.Wireframe mampu memberikan gambaran kasar akan letak elemen-elemen penting, seperti posisi tombol, teks, dan gambar juga memberikan “kerangka desain” untuk didiskusikan dan mereview fitur dan fungsi utama desain. Di kelas ini kamu akan mempelajari cara membuat sebuah tampilan mulai dari proses pembuatan moodboard menggunakan InvisionApp yang terdiri dari tipografi, warna dan juga referensi design. Kelas ini cocok untuk pemula UI/UX agar mengerti bahwa Visual Desain tidak hanya tentang “estetika” tapi juga menciptakan pengalaman user yang optimal. UI Style Guide Lalu kamu akan diarahkan untuk belajar dan memahami tentang: Style Guide dan Design LibraryPerbedaan Frame dan GroupPembuatan Component Responsive dengan Auto LayoutPembuatan Varian Component Style guide memiliki peran yang sangat penting dalam pembuatan UI design di Figma, maupun tools desain lainnya. UI/UX designer harus membuat design yang konsisten baik dalam pemilihan warna, teks, ukuran elemen/komponen dan mampu mempermudah pembuatan UI design karena waktu yang jadi lebih hemat. Kita akan belajar cara mendesain dengan cepat dan terstrukur dengan memanfaatkan Auto Layout, Design Tokens dan penggunaan rekomendasi plugins yang sangat efisien. Dengan memahami dan menerapkan Style Guide yang konsisten, tim desain dapat memiliki hasil yang lebih baik dan efisien dalam pembuatan UI design yang berkualitas. Kelas ini cocok untuk kamu yang ingin mendalami pengetahuan akan Design Library juga lho! Menarik kan? Yuk segera manfaatkan dan bergabung bersama students lainnya untuk gaining new skills as a ui ux designer😉

Halo, Sobat Developer! Di dunia yang serba cepat ini, siapa sih yang tidak ingin bekerja dengan lebih efisien? Terutama bagi kalian, para developer memiliki alat yang tepat akan sangat membantu dalam pengerjaan suatu project betul tidak? Nah, di sinilah Visual Studio Code (VSCode) akan mempermudah kamu. Sebagai salah satu code editor yang paling banyak digunakan, VSCode menawarkan berbagai extension yang bisa membuat pekerjaan kita sebagai developer menjadi lebih mudah dan menyenangkan. Dalam artikel ini, saya ingin mengajak kalian untuk mengeksplorasi 10 extension di VSCode yang akan membantu kita dalam berkerja. Dari extension yang membuat code kita menjadi tertata rapi, hingga extension yang mempermudah kita debuging codingan kita, Siap untuk menemukan extension yang mungkin selama ini kamu cari? Yuk, kita simak pembahasannya! 🚀💻 1. Prettier - Code Formatter Nah, di list yang pertama ini ada Prettier - Code Formatter Bagi kalian yang sering menggunakan HTML, CSS, hingga JavaScript, Prettier ini berfungsi untuk merapikan codingan kamu. Prettier akan membuat setiap baris code yang kamu tulis tidak hanya berfungsi dengan baik, tapi juga terlihat cantik dan rapi. Hal ini membuat codingan kita dapat dibaca dengan lebih mudah dan dipahami, baik oleh kamu atau developer lainya yang ingin melihat codinganmu. Manfaat Extension Prettier: 🌟 Membuat codingan Menjadi Estetik: Prettier akan membantu membuat codingan kamu menjadi lebih estetik, kamu hanya perlu klik ctrl + s (save). Maka codingan kamu akan tertata dengan rapi.✨ Efisiensi Waktu: Dengan Prettier, kamu bisa lebih fokus dengan memecahkan permasalahan yang ada di codingan kamu, Bukan lagi dalam penataan codingan kamu. Sangat menghemat waktu bukan?🎨 Support berbagai bahasa pemrograman: Prettier mendukung berbagai bahasa pemrograman populer, jadi satu extension untuk banyak kebutuhan.🔧 Mudah Diatur: Prettier fleksibel dan bisa kamu sesuaikan dengan standar codingan timmu. Install, set-up, dan biarkan ia bekerja. Dengan Prettier, setiap baris code yang kamu tulis bukan hanya akan efisien dalam performa, tapi juga memanjakan mata siapa pun yang melihatnya🚀✨ 2. Live Server Nah di list yang ke dua ini ada, Live Server yang akan membuat proses pengembangan web kamu jadi lebih lancar dan menyenangkan. Bayangkan, kamu bisa langsung melihat perubahan yang kamu buat pada code HTML atau CSS di browser secara real-time. Yup, tidak perlu lagi bolak-balik refresh halaman webmu. Live Server ini bakal membantumu dalam mengecek perubahan desain atau fungsionalitas halaman web yang sedang kamu garap. Simpel, efektif, dan tentunya, menghemat banyak waktu! Keuntungan Menggunakan Live Server: 🚀 Preview Real-Time: Lihat langsung perubahan pada halaman webmu tanpa perlu refresh manual.🔄 Live Reload Otomatis: Setiap kali kamu menyimpan perubahan pada codingan kamu, Live Server akan otomatis memuat ulang halaman.💡 Efisiensi Waktu: Menghemat waktu dalam proses pengembangan, karena kamu bisa langsung melihat perubahanya. Well, Live Server membantumu dalam mengerjakan suatu project menajdi lebih cepat dan menyenangkan. Let's code and see the magic happen! 🌟💻 3. Bracket Pair Colorizer Pernahkah kamu merasa kebingungan mencari bracket pair yang susah di banyaknya baris code? Nah, Bracket Pair Colorizer hadir sebagai solusi cerdas untuk masalah ini. Bayangkan setiap kurawal, atau bracket di code kamu diberi warna berbeda. Seperti pelangi yang mewarnai langit, extension ini akan mewarnai codinganmu, membuat setiap bagian menjadi jelas dan mudah dikenali. Ini bukan hanya soal estetika, tapi juga tentang membuat navigasi dan pengelolaan code yang kompleks menjadi lebih mudah. Dengan Bracket Pair Colorizer, setiap sesi coding jadi lebih efisien dan mengurangi risiko kecil yang bisa jadi besar, seperti kesalahan dalam menyusun kurung. Kegunaan Bracket Pair Colorizer: 🌈 Membuat codinganmu menjadi berwarna: Masing-masing tag, atau bracket mendapat warna berbeda, membuatnya mudah dilihat.🧭 Navigasi yang Mudah: Dengan warna yang berbeda, mencari kesalahan dalam struktur code jadi lebih cepat dan mudah.👀 Mengurangi Kesalahan dalam Coding: Warna yang berbeda membantu mengurangi kesalahan dalam codingan seperti kurung yang tidak tertutup atau tidak sesuai. Bracket Pair Colorizer ini membuat codingan kamu menjadi jelas dan indah dalam setiap baris code yang kamu tulis. 4. Auto Rename Tag Pernah gak sih, saat kamu asik mengedit code HTML atau XML, lalu tiba-tiba sadar kalau ada tag yang belum kamu ganti namanya? Nah, Auto Rename Tag di sini berfungsi secara otomatis mengganti nama tag pembuka dan penutup sesuai dengan perubahan yang kamu lakukan. Bayangkan, kamu mengubah satu tag, dan voila! Tag pasangannya juga berubah. Tidak perlu lagi khawatir tentang tag yang tidak sinkron atau kesalahan kecil yang bisa membuatmu pusing. Berikut beberapa manfaat extension ini: 🔄 Menyingkronkan Tag yang Kamu Ubah: Ubah satu tag, dan tag pasangannya juga ikut berubah secara otomatis.⏰ Hemat Waktu: Mengurangi waktu kamu untuk mencocokkan tag pembuka dan penutup.🛠️ Kurangi Kesalahan: Dengan Auto Rename Tag, risiko kesalahan seperti tag yang tidak tertutup atau tidak konsisten jadi berkurang.💡 Efisiensi Tinggi: Codingan lebih cepat selesai, lebih rapi, dan tentunya lebih mudah dibaca. Dengan Auto Rename Tag, setiap kali kamu merubah sebuah tag, keseluruhan proses jadi lebih cepat, lebih efisien, dan pastinya lebih mudah.🌟🛠️ 5. ESLint Next, untuk extension yang ke lima ini berfungsi untuk menjadikan code JavaScript-mu lebih bersih dan berkualitas. ESLint merupakan extension yang akan membantumu dalam menjaga kualitas codingan kamu. ESLint adalah JavaScript yang terintegrasi langsung ke dalam Visual Studio Code (VSCode). Jadi, extension ini akan dengan pintar mengidentifikasi dan menyoroti masalah dalam code JavaScript-mu, bahkan sebelum code tersebut dijalankan. Extension ini bukan hanya mebantu mu dalam menemukan error dalam codinganmu, namun juga membantu mu untuk memberikan solusi dari setiap permasalahan yang ada dalam codinganmu. Berikut beberapa manfaat extension ini : 🚀 Memperbaiki kualitas codinganmu: Dengan bantuan ESLint, kamu akan selalu membuat code yang lebih bersih dan berkualitas.🧐 Mendeteksi permasalahan yang ada dalam codinganmu: ESLint membantu kamu menemukan masalah dalam codinganmu sebelum codingan tersebut dijalankan.🧰 Otomatis Memperbaiki Codinganmu: ESLint tidak hanya menunjukkan masalah, tapi juga memberikan solusi untuk memperbaikinya. Dengan ESLint, kamu akan menjadi seorang developer yang lebih tangguh dalam menghasilkan code JavaScript yang handal dan berkualitas. 6. Code Runner Code Runner adalah extension yang akan membantu kamu dalam pengembangan perangkat lunak. Extension ini memungkinkanmu untuk menjalankan code dalam berbagai bahasa pemrograman secara instan, tanpa perlu keluar dari VSCode. Di samping itu, Code Runner menampilkan hasil pengujian code dengan cepat, dan menghemat waktumu. Berikut beberapa manfaat utamanya: 🚀 Mengeksekusi Code dengan Cepat: Menjalankan code hanya dalam beberapa klik, meningkatkan efisiensi pengujian dan debugging.🌐 Support Beberapa Bahasa Pemrogaman: Code Runner mendukung berbagai bahasa pemrograman, memungkinkanmu untuk bekerja dalam bahasa yang kamu kuasai. Dengan Code Runner, pengujian dan eksekusi code kamu akan lebih efisien dan menyenangkan.🏃‍♂️ 7. Path Intellisense Kalian tentu pernahkan saat mengerjakan sebuah project bingung mencari file-file yang dibutuhkan? Perkenalkan extension yang satu ini, Path Intellisense hadir sebagai extension yang mengatasi masalah ini. Extension ini menyediakan fitur autocompletion untuk jalur file, sehingga saat kamu mengetik alamat file, Path Intellisense akan dengan cerdas menampilkan pilihan file yang sesuai. Dengan begitu, kamu tidak perlu lagi menghafal jalur-jalur file yang panjang atau mencarinya secara manual. Di samping itu, ada beberapa manfaat tambahan: 🚀 Navigasi yang Cepat: Path Intellisense membuat navigasi file dalam proyekmu menjadi lebih cepat dan efisien.📂 Memudahkan saat digunakan pada Project Besar: Extension ini ideal untuk digunakan dalam project-project besar dengan banyak file dan folder.🎯 Menghindari Kesalahan: Mengurangi risiko kesalahan karena kamu tidak perlu mengetik jalur file secara manual. Dengan Path Intellisense, proses mencari dan menavigasi file dalam proyekmu akan menjadi lebih mudah dan efektif.🌟📁 8. CSS Peek Pasti kalian sering menemukan tantangan dalam mengulik code CSS kalian? Nah, extension CSS Peek ini merupakan extension yang akan membuat proses dalam menavigasi code CSS dengan cepat dan mudah. Tidak hanya itu berikut adalah beberapa manfaat dari extension tersebut : 🚀 Menemukan Deklarasi CSS dengan Mudah: Dengan CSS Peek, kamu dapat dengan mudah menemukan deklarasi CSS untuk elemen yang spesifik tanpa harus mencari-cari manual.🌈 Melihat Sumber Code CSS di HTML: Extension ini memungkinkan kamu melihat code sumber CSS yang terhubung dengan elemen HTML tertentu dengan sekali klik.👁️ Membantu Dalam Mencari Hubungan Element dengan Code CSS: Memudahkan dalam memahami hubungan antara elemen HTML dan code CSS yang berkaitan. Dengan bantuan CSS Peek, kamu akan mudah dalam mengelola dan menavigasi code CSS akan menjadi jauh lebih baik. 9. GitLens Jika kamu mencari cara untuk lebih memahami history dan perubahan code dalam project kamu, GitLens adalah extension yang tepat untukmu. Extension ini membawa fitur bawaan Git di Visual Studio Code (VSCode) dengan beragam fitur hebat, seperti tracking perubahan code kamu, riwayat perubahan, dan banyak lagi. Tidak hanya itu, berikut adalah beberapa manfaat utamanya: 🕵️ Tracking Perubahan Codinganmu: GitLens memungkinkan kamu untuk melacak setiap perubahan code, mengetahui siapa yang merubahnya, dan kapan perubahan itu terjadi.📜 History Perubahan: Kamu dapat menjelajahi riwayat perubahan codinganmu dengan mudah, melihat semua revisi, dan membandingkannya.🙌 Memudahkan dalam Berkolaborasi dengan Tim: Membantu dalam bekerja sama dengan tim, karena kamu dapat melihat kontribusi setiap anggota tim dengan mudah. Dengan GitLens, kamu akan mudah dalam melacak codinganmu yang lebih jelas dan mendalam, memungkinkanmu untuk mengelola versi code dengan lebih baik dan berkolaborasi dengan tim secara efisien.🌟🧑‍💻👩‍💻 10. CSS Flexbox Cheatsheet Ketika berurusan dengan desain tata letak dalam CSS, ilmu tentang Flexbox adalah kunci untuk menciptakan tampilan yang responsif dan rapi. Well berbicara soal flexbox, CSS Flexbox Cheatsheet hadir sebagai extension yang akan membantumu menguasai konsep-konsep Flexbox dengan mudah. Inilah beberapa manfaat utamanya: 🎯 Memberi Gambaran Jelas Terkait Properti Flexbox Pada CSS: Cheatsheet ini memberikan gambaran jelas tentang properti Flexbox dan bagaimana cara menggunakannya.📈 Menyederhanakan Code CSS: Dengan pemahaman yang baik tentang Flexbox, kamu dapat menyusun code CSS dengan lebih efisien.📱 Responsifitas: Menggunakan Flexbox membantumu membuat tampilan yang responsif untuk berbagai perangkat. Extension ini sangat berguna untuk membantumu menguasai Flexbox, sehingga dapat meningkatkan keterampilan desain tata letak dan menciptakan tampilan web yang lebih baik. Kesimpulan Well, tidak terasa kita telah menjelajahi 10 ekstensi Visual Studio Code yang sangat membantu produktivitas para developer. Dari Prettier yang membantu merapikan setiap baris codingan hingga GitLens yang mempermudah pelacakan perubahan dalam codingan, setiap ekstensi memberikan nilai tambah yang luar biasa dalam pengembangan perangkat lunak. Selain itu, dengan adanya CSS Flexbox Cheatsheet, kita dapat menguasai konsep-konsep Flexbox dengan lebih mudah, meningkatkan keterampilan tata letak desain, dan menciptakan tampilan web yang lebih responsif. Nah, buat kamu yang ingin terus mengembangkan keterampilan dalam dunia web development, saya ingin mengajakmu untuk bergabung di kelas BuildWithAngga. Di sana, kamu dapat memperdalam pengetahuan dan keterampilanmu dalam pengembangan perangkat lunak. Jadi, jangan ragu untuk mendaftar dan terus meningkatkan kemampuanmu. Selamat bertemu dikelas! 🚀💻

User Research merupakan proses yang sangat penting untuk kesuksesan sebuah produk yang sedang dikembangkan. Tanpa adanya user research, sebuah user tentunya akan mengalami banyak frustasi saat menggunakan produk tersebut, bahkan dari sisi pengembang-pun akan memakan banyak biaya dan waktu tanpa menghasilkan outcome yang diharapkan dari sisi bisnis. Oleh sebab itu, mempelajari bagaimana cara melakukan user research design yang baik akan sangat berguna saat kita membangun sebuah produk digital, agar outcome yang dihasilkan sesuai dengan apa yang kita inginkan dengan menggunakan biaya dan waktu se-efisien & se-efektif mungkin. Di dalam artikel ini, saya akan memberikan beberapa tips melakukan user research design yang baik, agar kamu tidak membuang waktu & biaya dengan sia-sia. Definisikan Rencana Research dengan Jelas Hal pertama yang harus kamu lakukan agar research kamu efektif & efisien adalah memastikan tujuan kamu terdefinisi secara jelas. Dengan adanya tujuan secara jelas, kamu akan sangat terbantu untuk mengidentifikasi metode mana yang sekira nya akan cocok untuk dipakai, sehingga outcome yang akan dihasilkan akan sesuai dengan apa yang kita inginkan. Sebagai contoh tujuan research seperti berikut: Definisikan Research goals: Disini kamu bisa menulis masalah apa yang ingin kamu coba selesaikan, apakah itu untuk user atau bisnis? Dan bagaimana output dari user research ini dapat berdampak pada design decision kamu?Buat Research Questions: Buatlah beberapa pertanyaan yang akan dijawab melalui research, seperti “Berapa lama user membutuhkan waktu untuk mencapai checkout order?”Menentukan KPI: KPI atau Key Performance Indicators merupakan metode pengukuran yang dipakai, contohnya adalah Time on Task, use of navigation vs. search, user error rates, drop-off rates, dan lain-lain.Memilih participant yang tepat: Memilih participant sesuai dengan kriteria tujuan research, seperti gender, umur, demografi, bahkan spesifik populasi seperti disabilitas dan lainnya. Patut diingat, mendefisinikan tujuan utama dan goals melakukan user research ini akan sangat berguna agar kamu tidak membuang waktu dan uang hanya sia-sia. Memilih Metode Research yang Sesuai User Research pada dasarnya memiliki 2 kategori, yaitu kualitatif dan kuantitatif. Kualitatif research fokus kepada pemahaman “why” dibalik perilaku user. Contoh pada kualitatif adalah user interview, observation, usability testing, focus group. Sedangkan kuantitatif lebih kepada hasil yang berbentuk data numerikal dan persentase, contohnya seperti survey atau kuisioner. Kedua metode research tersebut sangatlah penting dan dapat dilakukan bersamaan. Namun, perlu diketahui bahwa pemilihan metode research bergantung pada tujuan dan skala pada project kamu, dan penting untuk memahami secara jelas Research Plan yang telah saya bahas sebelumnya, agar kamu tidak membuang waktu dan uang yang sia-sia. Pelajari Presentasi Temuan Kamu agar Efektif dan Efisien Untuk melakukan user research, tentunya bukan cuma mencari jawaban atas pertanyaan research yang telah kita buat. Tetapi juga, orang lain juga harus paham atas hasil yang telah kita dapatkan. Dengan mempelajari presentasi yang baik dan benar, insights yang telah kamu dapatkan dengan mudah dipahami dan diimplementasi. Contoh presentasi hasil user research yang efektif dan efisien: Executive Summary: kamu bisa membuat executive summary bersamaan dengan informasi background research dan hasil temuanmu.Statistic dan Visual: Buatlah statistic dan visual yang menarik namun tidak sulit untuk dibaca untuk men-support dan mengilustrasikan poin-poin yang telah kamu temukan.Impact and Recommended Action: kamu bisa menjelaskan secara ringkas dan jelas tentang dampak dari hasil research kamu dan juga memberikan aksi rekomendasi untuk mengatasi hasil research kamu tersebut. Dengan menyampaikan secara jelas tujuan, hasil temuan, dampak, serta aksi rekomendasi, kamu dapat membantu orang lain memahami kenapa hasil temuan kamu tersebut sangat berguna dan apa yang harus orang tersebut lakukan. Kesimpulan Well, berikut tadi adalah 3 tips bagaimana cara melakukan user research design yang baik. Tentunya, research akan selalu dipakai kepedepannya dimanapun industry kamu berada. Dengan adanya research, kamu akan selalu kompetitif dengan perusahaan lainnya. Berikut beberapa key takeaways agar user research kamu lebih baik: Definisikan secara jelas tujuan dan rencana kamu melakukan user research.Pilihlah metode research yang sesuai dengan rencana serta kemampuan kamu.Buatlah presentasi kamu lebih efektif dan efisien lagi agar orang lain lebih mudah memahami serta dapat di-implementasikan. Silahkan dipelajari beberapa kelas gratis UI/UX Design yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan developer lainnya. Sampai jumpa di artikel & tips selanjutnya. Good Luck!