Faisal Rahman | Blog JavaScript dan Teknologi

Dokumen cetak berisi grafik performa

Arsitektur Front End Featured

Dua Pendekatan Pengukuran dan Pemantauan Performa Web

Performa situs web bisa dikuantifikasi dengan metrik-metrik Core Web Vitals. Skor-skor yang dihasilkan dari pengukurannya membantu kita memahami di mana situs kita berada dalam hal performa. Melakukan pengukuran performa secara berkala dan melakukan pemantauan terhadapnya bisa memberi kita wawasan akan perkembangan performa situs kita, sehingga kita bisa mengidentifikasi regresi ataupun

Speedometer mobil menunjukkan kecepatan 80km/h

Arsitektur Front End Featured

Mengukur Performa Website dengan Core Web Vitals

"Measure what is measurable, and make measurable what is not so" - (bukan) Galileo Galilei Performa situs web memiliki kaitan erat dengan performa bisnis. Berdasarkan riset Deloitte yang dikomisikan Google[1] terhadap 37 situs mobile bisnis-bisnis terkemuka di Eropa dan Amerika Serikat, peningkatan kecepatan situs mobile memberikan manfaat yang sangat

Optional Chaining pada JavaScript

Javascript Featured

Optional Chaining pada JavaScript

ES2020 mengenalkan fitur Optional Chaining, yang sudah kita bahas kisi-kisinya pada Bekerja dengan Ketiadaan di JavaScript (Bagian 2) [https://icalrn.id/bekerja-dengan-ketiadaan-dalam-javascript-objek-dan-tanda-tanya/] . Kali ini, kita akan menyelami fitur baru ini lebih dalam. Motivasi Optional Chaining JavaScript akan memberikan TypeError jika kita mencoba mengakses properti dari undefined atau null. Masuk akal

Bekerja dengan Ketiadaan dalam JavaScript: Objek dan Operator Tanda Tanya

Bekerja dengan Ketiadaan dalam JavaScript: Objek dan Operator Tanda Tanya

Dalam JavaScript, nilai undefined dan null yang mengindikasikan ketiadaan nilai diklasifikasikan sebagai nilai nullish karena kemiripan-kemiripannya. Meskipun begitu, banyak catatan yang mengingatkan kita untuk tidak menyamakan keduanya, misalnya pada kaitannya dengan deklarasi variabel dan parameter fungsi [https://icalrn.id/bekerja-dengan-ketiadaan-di-javascript/]. Nilai nullish juga memerlukan perhatian khusus dalam konteks bekerja dengan

Bekerja dengan Ketiadaan di JavaScript: Variabel dan Fungsi

Bekerja dengan Ketiadaan di JavaScript: Variabel dan Fungsi

Seperti banyak bahasa pemrograman lain, JavaScript mengenal indikator ketiadaan, yaitu nilai null dan undefined. Baik null maupun undefined adalah nilai eksklusif dari tipe data masing-masing, seperti yang pernah kita bahas di Berbicara Null, Undefined, Not Defined, dan Undeclared [https://icalrn.id/hiruk-pikuk-undefined/]. Mudahnya, undefined adalah nilai yang dihasilkan sistem, sementara

Array Bisa Melakukan Itu?

Array Bisa Melakukan Itu?

Array pada JavaScript adalah benda yang sangat menarik. Selain karena bisa menyimpan elemen-elemen dengan tipe data apapun, undefined sekalipun, juga karena Array memiliki banyak metode-metode menarik pada prototipenya yang bisa digunakan dalam berbagai situasi. Metode-metode tersebut disematkan pada prototipe objek Array sehingga dapat langsung digunakan setelah notasi literal Array, [].indexOf(

Menyajikan Dark Mode Berdasarkan Preferensi Sistem

Menyajikan Dark Mode Berdasarkan Preferensi Sistem

Dark mode dapat dikatakan penyajian antarmuka dengan warna latar belakang gelap dengan teks berwarna terang. Pengaturan warna tersebut disebut-sebut memiliki keuntungan antara lain: * Lebih hemat energi untuk perangkat-perangkat tampilan berteknologi OLED dan AMOLED. * Mengurangi beban pada mata ketika membaca dalam keadaan gelap. * Mengurangi efek pantulan cahaya yang mengganggu penglihatan (screen

Mengenal Unit Testing

Mengenal Unit Testing

Seberapa percaya dirikah Anda dengan kode Anda? Apakah Anda yakin kode yang Anda deploy tidak akan menyebabkan bug di production environment sistem Anda? Jika pertanyaan di atas membuat Anda ragu ataupun cemas, mungkin Anda butuh melakukan unit testing terhadap kode Anda. Apa Itu Unit Testing Unit testing adalah pengujian terhadap

CSS Naik Level dengan Sass

CSS Naik Level dengan Sass

Untuk Anda yang sering berkutat dengan Cascading Style Sheets alias CSS, pasti Anda pernah merasa menulis CSS adalah pekerjaan yang melelahkan. Mulai dari keharusan menulis ulang selektor-selektor yang bertingkat (nested); menulis prefix untuk kompatibilitas seperti -moz-*, -ms-* atau -webkit-*; dan bermacam-macam nilai kalkulasi yang bersifat konstan sehingga sulit dimanipulasi. Mungkin

Cara Baru Iterasi di ES6 dengan Iterable dan Iterator

* ES6 mengenalkan cara baru iterasi: for-of. * for-of melakukan iterasi terhadap objek yang iterable. * Iterable protocol mensyaratkan objek untuk mengimplemen metode iterator yang mengembalikan objek yang memenuhi protokol iterator pada prototipe [Symbol.iterator]-nya untuk dapat dianggap iterable. * Iterator protocol mensyaratkan sebuah objek untuk mengembalikan fungsi next yang kemudian mengembalikan objek

Mengenal Webfont, serta Fenomena FOIT dan FOUT

Webfont memudahkan pengembang web menciptakan situs dengan tipografi yang enak dipandang, memperkuat branding, dan memiliki aksesibilitas tinggi. Berbeda dengan desktop font yang dipasang pada komputer kita untuk digunakan oleh aplikasi-aplikasi dalam lingkungan komputer kita, webfont digunakan oleh browser melalui berkas font yang tersedia di web dan dipasang menggunakan kata kunci

Keanehan pada Tipe Data Number dan toString di Javascript?

Tempo hari saya menemukan satu lagi kasus yang sekilas aneh, bahkan sekilas terlihat seperti bug di Javascript. Kejadian bermula ketika saya dihadapi pada keperluan meng-encode sebuah integer ke dalam string baru berbasis 36. Metode yang bisa digunakan adalah dengan fungsi Number.prototype.toString(radix) yang dimiliki oleh semua objek bertipe

Destructuring Assignment pada Javascript

Salah satu fitur baru Javascript yang diperkenalkan oleh ECMAScript 2015 (ES6) adalah destructuring assignment. Fitur ini memungkinkan kita 'membongkar' isi array dan objek untuk disimpan pada beberapa variabel. Dengan menggunakan fitur ini, kita dapat menghemat kode secara signifikan. Array Destructuring Misalkan kita punya array seperti berikut ini: const arr = [0,

Berbicara Tentang Undefined, Null, Not Defined dan Undeclared

Dalam Javascript, terdapat beberapa istilah yang sekilas terdengar mirip: undefined, null, not defined dan undeclared. Jika kita baru mendengar istilah-istilah tersebut, mungkin kita akan merasa bahwa semua istilah itu berkaitan erat, bahkan mungkin mereka menjelaskan konsep yang sama. Kenyataannya, terdapat perbedaan - bahkan cukup besar - antara masing-masing istilah tersebut.

Memahami Keluaran Git Diff secara Menyeluruh

Setelah git commit, git pull dan git push, git diff adalah perintah Git yang (mungkin) paling sering saya gunakan. Eksekusi git diff sebelum melakukan git commit menjadi rutinitas yang selalu saya lakukan, untuk memastikan tidak ada kesalahan penulisan sebelum saya mencatatkan perubahan saya di sebuah commit. Perintah git diff memberitahu

Catatan dari Geekcamp 2017

Kemarin (Sabtu, 15 Juli) saya berkesempatan menghadiri konferensi Geekcamp 2017 di Senayan City. Geekcamp adalah tech conference yang diselenggarakan oleh KMK Online dan Karir.com, siklus persisnya saya kurang tahu karena ini acara pertama yang saya kunjungi. Acara ini berisikan seminar dari para punggawa teknologi kaliber regional dan nasional serta

Automasi dengan Git Hooks

Setiap pekerjaan yang dilakukan berulang-ulang adalah kandidat yang cocok untuk automasi. Termasuk ketika kita bekerja dengan Git, rutinitas yang dilakukan setelah menjalankan salah satu perintah Git adalah kandidat yang cocok untuk diotomasi guna meningkatkan produktivitas kita. Untuk keperluan itu, Git menyediakan utilitas yang sangat berguna, yaitu Git Hooks. Git Hooks

Elemen Metadata pada HTML

Metadata, menurut Merriam-Webster Dictionary berarti data yang memberikan informasi tentang data. Dalam sebuah dokumen HTML, disediakan bagian head (bagian dokumen yang diapit tag ) untuk meletakkan berbagai metadata yang menjelaskan dokumen HTML tersebut. Berbagai informasi dapat diletakkan di sana, mulai dari nama situs dengan tag ; dokumen terkait dengan tag <link>, yang umumnya

Memperbarui Instalasi Ghost dalam Docker

Bulan lalu, Ghost merilis versi 0.11.9 yang membawa beberapa perbaikan. Seperti blogging platform pada umumnya, ketika terdapat versi baru, Ghost memberikan notifikasi kepada para penggunanya untuk menawarkan pembaruan versi. Ghost pun menyediakan panduan pembaruan yang bisa diakses di How to Upgrade Ghost [https://docs.ghost.org/v1.0.

Instalasi Ghost dalam Docker di DigitalOcean

Seperti yang sudah saya ceritakan sebelumnya di Bagaimana Blog Ini Dibuat [https://icalrn.id/sekilas-tentang-pembuatan-blog-ini/], blog ini dibangun dengan platform Ghost (ghost.io [https://ghost.io]) yang berjalan di dalam container Docker (docker.io [https://docker.io]). Metode ini saya pilih karena kepraktisannya dan modularitasnya, proses instalasinya pun mudah. Di

Bermain dengan Git Diff

Umumnya, perintah git diff digunakan untuk menginspeksi perubahan yang kita lakukan ketika bekerja pada suatu repositori Git. Dengan perintah dasar git diff , Git akan mencetak semua insertion dan deletion yang kita lakukan pada repositori tersebut per berkas yang terdampak pekerjaan kita, seperti misalnya: $ git diff diff --git a/puisi.md

Lint Kodemu!

Di masa Unix V7, sekitar tahun 1979, diperkenalkan sebuah program bernama Lint diluncurkan bersama dengan sistem operasi tersebut. Lint adalah program yang membantu programmer bahasa C menganalisis kode yang mereka tulis dan menunjukkan bagian-bagian kode yang mungkin dapat menyebabkan bug pada program. Nama Lint sendiri berasal dari kata benda dalam

Modul Berbasis IIFE

> Good authors divide their books into chapters; good programmers divide their programs into modules. Secara kebahasaan, modul dapat diartikan sebagai komponen dari suatu sistem yang berdiri sendiri tetapi menunjang program dari sistem itu [1]. Modul, dalam pemrograman, membagi kode suatu program menjadi beberapa bagian yang dikelompokkan berdasarkan kriteria tertentu. Membagi

Immediately-Invoked Function Expression (IIFE) dan Motivasinya

Penggunaan variabel global dalam Javascript sangat ditentang karena banyak alasan [1]. Dua yang utama adalah sulitnya mengontrol akses terhadap resource yang tersedia untuk seluruh aplikasi, yang bisa mengakibatkan inkonsistensi data pada skala besar; dan penggunaan variabel global menyebabkan polusi terhadap namespace, yang bisa menyebabkan penggantian nilai tanpa terduga akibat kesamaan

Bencana Git Merge dengan Strategi 'Ours'

Beberapa waktu lalu, saya mengalami bencana ketika hendak memperbarui branch fitur yang sedang saya kerjakan berdasarkan master branch dengan menjalankan git merge master. Ceritanya, saat itu terjadi konflik di beberapa berkas binary yang memang sudah saya ubah, sementara hampir semua berkas lainnya berhasil diperbarui. Memang, saat itu branch yang saya