web development

Ketika Anda mengunjungi halaman posts di website saya menggunakan browser Firefox maka hasil render tidak berjalan dengan mulus. Maksudnya? Jadi, di halaman post menampilkan daftar artikel yang saya tulis dan pagination dengan bantuan tag html ul alias unordered list. Tampilannya seperti gambar di bawah. Mengapa ini bisa terjadi? Karena saya menggunakan fitur preload. Apa itu preload? Berdasarkan situs Mozilla Developer Network, definisi preload sebagai berikut The preload value of the element’s rel attribute lets you declare fetch requests in the HTML’s , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in....

Bagaimana cara menutup tab di browser dengan JavaScript? Jawabannya adalah menggunakan window.close(). Ini adalah suatu method untuk menutup tab yang sedang aktif alias kita sedang berada di tab tersebut. Method window.close() hanya bisa berjalan jika salah satu kondisi di bawah ini terpenuhi, antara lain: Tab dibuat dari method window.open() Pengguna membuka suatu halaman melalui tautan dengan ctrl + click Pengembang menyisipkan atribut target="_blank" pada tag anchor. Jika tidak memenuhi salah satu syarat tersebut maka akan diberikan peringatan Scripts may not close windows that were not opened by script....

Iya, kalian tidak salah baca. Saya menemukan artikel tentang mewawancarai seorang pengembang web yang bekerja di Pornhub yang ditulis oleh David Walsh. Setelah saya baca isinya cukup menarik untuk dirangkum di blog saya. Pornhub menyisipkan iklan mereka melalui fitur web socket. Mereka tidak menggunakan gambar dan video asli untuk pengembangan fitur dan desain. 🤯 Di sisi front-end mereka melakukan beragam perubahan antara lain: Berpindah dari plain CSS yang akhirnya menggunakan LESS dan Mixins, menggunakan flex Grid system dengan media query dan tag picture yang mengakomodasi beragam resolusi dan ukuran layar....

Untuk mendeteksi apakah sebuah halaman sudah memuat JavaScript, kita bisa menggunakan Document.readyState salah satu Web API untuk menangani document. Lantas, seperti apakah ada contoh studi kasus yang sudah mengimplementasikan hal di atas? Di website komunitas PHPBali menggunakan pustaka Flatpick (datepicker) dan Choice (select dropdown) untuk menginput atau mengedit topik dan kegiatan. Saya menggunakan atribut async di kedua pustaka tersebut dengan tujuan agar keduanya lebih cepat dimuat di halaman. Pakai async untuk memuat sumber yang benar-benar kita perlukan saat memuat halaman dan gunakan defer untuk menunda sumber yang tidak diperlukan saat memuat halaman...

Umumnya, jika ingin melakukan simulasi tampilan website di perangkat seluler kita menggunakan remote USB debugging pada browser seperti Chrome. Di tulisan ini, saya akan menggunakan bantuan dari mydevice.io untuk mendapatkan data-data penunjang simulasi perangkat seluler sehingga tidak perlu bergantung dengan remote USB debugging. Pertama, silahkan menuju website mydevice.io melalui perangkat seluler yang akan digunakan untuk simulasi tampilan website di perangkat seluler. Sebagai contoh, saya menggunakan Xiaomi A1 untuk mendapatkan data-data penunjang seperti lebar (width) di bagian @media (device-width), tinggi (height) di bagian @media (device-height), pixel ratio di bagian CSS pixel-ratio, dan user agent....

Kemarin saya telah menulis pengaturan Sublime Text 3 untuk web developer khususnya PHP Developer. Tetapi, setelah saya coba dari kemarin sampai sekarang hasilnya tidak nyaman. Permasalahan yang saya diantaranya: Saat membuka terminal, package yang saya install di Sublime (terminal) malah melempar saya ke aplikasi terminal. Yang saya harapkan adalah terminal tersebut menyatu dengan teks editor seperti yang dilakukan oleh VS Code. Tidak ada penanda sebuah file telah diedit atau file baru ke dalam project kita....

Selain VS Code, saya menggunakan Sublime Text 3 dengan tujuan memisahkan yang mana ngoding PHP dan JavaScript. Saya menyerahkan Sublime untuk mengurus kodingan PHP. Setelah memasang Sublime Text 3, yang saya lakukan berikutnya adalah memasang package control agar dapat memasang package-package lainnya. Silahkan baca halaman ini: https://packagecontrol.io/installation. Berikutnya adalah memasang package tambahan: Material theme. Roboto Mono font di komputer agar tampilan font kode lebih nyaman (pendapat pribadi). Melakukan konfigurasi di Preferences: Settings di Sublime Text 3 dan masukkan konfigurasi berikut pada Gist ini AdvanceNewFile plugin yang memudahkan kita untuk membuat file dan direktori sekaligus dengan perintah command tanpa harus klik kanan mouse....

Unit testing merupakan sebuah teknik untuk mengetes apakah sub-sub fitur pada software kita berjalan sesuai yang kita ekspektasikan atau tidak. Mengapa saya sebut sub-sub fitur? Karena, daripada kita menjadikannya dalam satu fitur lebih baik kita pecah menjadi beberapa sub fitur. Kasus kecil sederhana misalnya kita punya sebuah kalkulator yang memiliki fitur menambah atau membagi angka. Sebagai user kita berharap bahwa detail fiturnya seperti ini: Operasi penambahan angka berjalan dengan baik dan bisa ditambah dengan banyak deret....