Cara inspect web di chrome android

Bagi para web developer terkadang memiliki kesulitan pada tampilan mobile. Masalah umum yang terjadi adalah terkadang tampilan responsive walaupun sudah dites bagus di web. ternyata ada bagian yang tidak berperilaku seperti yang kita inginkan saat di perangkat mobile. Masalahnya, tidak ada pilihan inspect element pada browser mobile. Sehingga untuk mengeceknya kita bisa menggunakan cara lain, […]

more...

Menambahkan static asset (css, js , image) ke plugin magento 2

Pada tutorial sebelumnya, kita membuat block dan menyisipkannya di layout frontend. Akan tetapi pada file template kita kita masih menggunakan inline css. Yang mana tentu saja kurang sedap dipandang dan akan membuat kode kita membingungkan jika sudah banyak. Maka dari itu kali ini kita akan menyisipkan css pada layout kita. Buat direktori view/frontend/web/css pada module […]

more...

CSS: Animasi perubahan style dengan css transition

Terkadang di suatu bagian di halaman web kita ingin melakukan perubahan style saat user melakukan aksi tertentu. Semisal saat user melakukan mouseover disalah satu elemen kita ingin elemen tersebut berubah warna. Akan tetapi terkadang transisi yang kita lakukan berjalan secara kaku Kita dapat mengakali hal ini dengan css transition, element akan otomatis ditransisikan sesuai style […]

more...

Looping dengan less

Halo, kali ini kita akan mencoba membuat beberapa rule dengan metode “looping”. Jadi ceritanya kita akan membuat beberapa rule didalam looping. Jadi semisal kita memiliki suatu class khusus untuk mengatur background color. Tapi kita ingin membuat beberapa variasi kecerahan pada warna tersebut, kita bisa menggunakan looping ini. Jadi output yang diinginkan adalah: .bg-red{background-color:#FF0000} .bg-red-lighten-1{background-color:#FF1111} .bg-red-lighten-2{background-color:#FF2323} […]

more...

Membuat frontend dengan bantuan less

Less merupakan salah satu css preprocessor. Less memudahkan kita jika kita akan menulis css pada project yang besar. selain itu, banyak pula css framework yang menggunakan less. Sehingga, jika ingin melakukan theming, kita hanya tinggal mengimpor dan mengoveride variabel. Instalasi less Kita perlu menginstall nodejs terlebih dahulu sebelum menginstall less. Jika kita sudah memiliki nodejs […]

more...

CSS: membuat garis bawah pendek pada headline

Sebelumnya mohon maaf, saya juga bingung mau ngasih judul apa, wkwk. Pokoknya maksud saya adalah ingin membuat headline(h1/h2/h3/ dst) seperti dibawah ini Headline seperti ini sering dijumpai di landing page atau pada halaman detail product. Tentu kita tidak bisa hanya mengaplikasikan underline untuk jenis headline ini, karena underline akan membuat garis bawahnya memiliki ukuran yang […]

more...