author Ahmad Muhardian

Nekat Menggunakan Bootstrap 4 Versi Beta, Petani Kode Akhirnya Kena Deface


Petanikode Bootstrap4

Deface yang saya maksud bukan deface karena kena hack 😄…

Deface = mengubah tampilan, alias mengganti template

Hehe, maaf kalau judulnya agak ‘klik bait’.

Bootstrap 4 mamang masih versi Beta, namun menurut saya— seteleah mencobanya—sudah cukup stabil.

Sehingga saya cukup ’nekat’ untuk menggunakannya pada template Petani Kode.

Template Baru Petani Kode

Template baru Petani Kode bernama Kacang, pernah saya tulis tutorialnya di sini:

Bumbu-bumbu dasar dari template tersebut adalah:

Lalu dikembangkan lagi sehingga menjadi template yang kalian lihat saat ini.

Apa saja yang berubah?

1. Mengganti Ikon Font-awesome

Bootstrap4 tidak lagi menyediakan ikon seperti Bootstrap 3 dan 2.

Namun, kita bisa menggunakan ikon dari pihak ketiga seperti Font-awesome.

Font-awesome adalah framework CSS untuk membuat ikon, tersedia ratusan ikon yang bisa langsung digunakan dengan tag seperti berikut ini.

<i class="fa fa-coffee"></i>

Akan tetapi saya tidak menggunakan itu lagi, mungkin karena malas harus include CSS lagi.

Sebagai penggantinya, saya menggunakan ikon SVG (Scalable Vector Graphics) dari Entypo. Ikon ini berbasis vektor, sehingga saya ‘menykainya’ 😄.

Kenapa harus vektor?

Karen kebanyakan browser saat ini sudah mendukung file SVG, selain itu file ini tidak akan pecah bila dibuka pada resolusi berapa pun dan juga ukuran filenya relatif lebih kecil.

Berbeda dengan file PNG dan JPG, hasilnya akan pecah bila dibuka di—misalnya di HP—resolusi yang lebih kecil.

Bitmap VS SVG

Selain itu, saya juga bisa mengeditnya dengan bebeas menggunakan Inkscape:

Modifikasi Ikon di Inkscape

Lalu cara menggunakannya di HTML, bisa dengan di-embed maupun di masukan ke tag <img> sebagai src:

<img src="/path/to/entypo/icon/nama-icon.svg" width="32" height="32" alt="teks alternatif" />

Agak lebih panjang dibandingkan Font-awesome ya…

Selain Entypo, Ada beberapa ikon yang disarankan oleh Bootstrap4:

2. Menambahkan Twemoji (Twitter Emoji)

Pada template sebelumnya, Petani Kode menggunakan twitter emoji dari Wordpress dengan kode berikut:

<!-- Twitter Emoji dari Wordpress  -->
<script type="text/javascript">
    window._wpemojiSettings = { "baseUrl": "https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/72x72\/", "ext": ".png", "svgUrl": "https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/svg\/", "svgExt": ".svg", "source": { "concatemoji": "https:\/\/s1.wp.com\/wp-includes\/js\/wp-emoji-release.min.js?m=1496863874h&ver=4.8-RC2-40878" } };
    !function (a, b, c) { function d(a) { var b, c, d, e, f = String.fromCharCode; if (!k || !k.fillText) return !1; switch (k.clearRect(0, 0, j.width, j.height), k.textBaseline = "top", k.font = "600 32px Arial", a) { case "flag": return k.fillText(f(55356, 56826, 55356, 56819), 0, 0), b = j.toDataURL(), k.clearRect(0, 0, j.width, j.height), k.fillText(f(55356, 56826, 8203, 55356, 56819), 0, 0), c = j.toDataURL(), b === c && (k.clearRect(0, 0, j.width, j.height), k.fillText(f(55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447), 0, 0), b = j.toDataURL(), k.clearRect(0, 0, j.width, j.height), k.fillText(f(55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447), 0, 0), c = j.toDataURL(), b !== c); case "emoji4": return k.fillText(f(55358, 56794, 8205, 9794, 65039), 0, 0), d = j.toDataURL(), k.clearRect(0, 0, j.width, j.height), k.fillText(f(55358, 56794, 8203, 9794, 65039), 0, 0), e = j.toDataURL(), d !== e }return !1 } function e(a) { var c = b.createElement("script"); c.src = a, c.defer = c.type = "text/javascript", b.getElementsByTagName("head")[0].appendChild(c) } var f, g, h, i, j = b.createElement("canvas"), k = j.getContext && j.getContext("2d"); for (i = Array("flag", "emoji4"), c.supports = { everything: !0, everythingExceptFlag: !0 }, h = 0; h < i.length; h++)c.supports[i[h]] = d(i[h]), c.supports.everything = c.supports.everything && c.supports[i[h]], "flag" !== i[h] && (c.supports.everythingExceptFlag = c.supports.everythingExceptFlag && c.supports[i[h]]); c.supports.everythingExceptFlag = c.supports.everythingExceptFlag && !c.supports.flag, c.DOMReady = !1, c.readyCallback = function () { c.DOMReady = !0 }, c.supports.everything || (g = function () { c.readyCallback() }, b.addEventListener ? (b.addEventListener("DOMContentLoaded", g, !1), a.addEventListener("load", g, !1)) : (a.attachEvent("onload", g), b.attachEvent("onreadystatechange", function () { "complete" === b.readyState && c.readyCallback() })), f = c.source || {}, f.concatemoji ? e(f.concatemoji) : f.wpemoji && f.twemoji && (e(f.twemoji), e(f.wpemoji))) }(window, document, window._wpemojiSettings);

</script>
<style type="text/css">
    img.wp-smiley,
    img.emoji {
        display: inline !important;
        border: none !important;
        box-shadow: none !important;
        height: 1em !important;
        width: 1em !important;
        margin: 0 .07em !important;
        vertical-align: -0.1em !important;
        background: none !important;
        padding: 0 !important;
    }
</style>
<!-- /Twitter Emoji dari Wordpress  -->

Namun sekarang sudah berubah, ikon untuk emojinya dihosting sendiri biar mudah mengatur cache-nya.

3. Menghentikan Dukungan untuk AMP

Bisa dibilang, AMP adalah instant view-nya Google.

Ada beberapa hal yang saya kurang suka dengan AMP:

  • Terlalu banyak aturan sehingga kurang bebas modifikasi template-nya;
  • Menggunakan kustom tag sendiri dan dianggap tidak valid oleh validator W3C.

Untuk saat ini, Petani Kode tidak lagi menggunakan AMP. Mungkin nanti akan digunakan lagi setelah paham cara penerapan AMP yang benar.

4. Menambahkan Lazyload

Lazyload adalah library javascript untuk men-download gambar secara asynchronous, sehingga dapat mempercepat loading.

Biasanya digunakan pada halaman yang memiliki banyak gambar.

Ada banyak sekali library Lazyload di Gihtub, salah satu yang saya pilih adalah lazysizes karen mudah digunakan dan di template resmi hugo ( goHugoThemes) juga menggunakannya.

Cara mengggunakannya cukup mudah:

Pertama sisipkan kode lazysizes.

<script type="text/javascript" async src="/js/lazysizes.min.js"></script>

Lalu tinggal diterapkan pada gambar dengan menambahkan class lazyload dan atribut data-src untuk gambar originalnya.

<img class="lazyload"  
    src="/img/placeholder.svg" 
    data-src="/img/original-large.jpg" />

Kenapa Menggunakan Bootstrap 4?

Bootstrap adalah framework CSS yang paling populer dan sudah digunakan di banyak website.

Lalu kenapa Petani Kode mengugnakan Bootstrap 4, padahal masih versi beta?

Alasan pertama:

Saya tidak sabar menunggu yang versi stabil 😄, dan menurut saya versi beta ini sudah cukup powerfull.

Alasan kedua:

Sistem layout Bootstrap 4 sudah menggunakan flex, yang merupakan sistem layout yang lebih canggih dan modern.

Sebelumnya template Petani Kode dibuat dari template AMP Starter, lalu dimofikasi dengan ditambahkan PocketGrid dan CSS racikan sendiri.

Hasilnya:

Banyak menulis kode CSS (sektar 800+ baris) dan berantakan, karena belum menggunakan best practice dalam menulis kode CSS.

Selain itu, struktur template dari AMP Starter juga cukup ‘berantakan’ dan kurang rapi.

Setelah menggunakan Bootstrap 4:

Kode CSS yang ditulis sekitar 34 baris dan tentunya lebih rapi dan clean.

Kode CSS

Bootstrap 4 sangat membantu sekali, karena banyak class-class yang siap pakai.

Kendala Saat Membuat Template

Ada beberapa kendala saat membuat template ini:

  1. Koneksi Internet: Kuota habis 😄 tidak bisa googling;
  2. Belum terbiasa dengan nama class-class Bootstrap4;
  3. Hugo belum terlalu matang atau stabil, sehingga beberapa nama variabel untuk template sering berubah-ubah. Seperti .Url menjadi .URL.

Dampak Setelah Mengganti Template

  • Trafik Petani Kode terjun bebeas di hari penggantian, karena kode pelacak Analytic tidak bekerja dengan benar dan analytic di Cloudflare juga bermasalah.

    Trafik petani kode

Akhir Kata…

Bagaimana menurutmu template baru dari Petani Kode ini?

Apa saja yang masih kurang, atau malah semakin jelek…

Bagaimana pendapatmu?

Baca Juga ini

Mencoba Bootstrap 4: Apa saja yang baru di Bootstrap 4?

Mencoba Bootstrap 4: Apa saja yang baru di Bootstrap 4?

Mencoba menggunakan Bootstrap 4 dan ada hadiah template Bootstrap 4 gratis dari Petani Kode

Tips Modifikasi Panel Bootstrap untuk dijadikan Card

Tips Modifikasi Panel Bootstrap untuk dijadikan Card

Seperti yang kita ketahui, istilah card memang sering dipakai pada Material Design. Sedangkan Bootstrap versi 3 tidak memiliki komponen card. Mungkin saja akan ditambahkan pada versi ke-4. Kita tunggu saja. Pada kesempatan ini, kita akan belajar cara modifikasi komponen panel Bootstrap untuk dijadikan Card. Berikut ini tampilan hasil akhir yang akan kita buat: Mempersiapkan Grid LayoutPertama, kita siapkan dulu grid layout dengan empat kolom. <div class="container"> <div class="row"> <div class="col-md-3"> <!

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Cara Menggunakan Font-awesome untuk Membuat Ikon pada Web

Cara Menggunakan Font-awesome untuk Membuat Ikon pada Web

Dulu… saya sempat berpikir: Pembuatan web sepertinya susah, karena banyak komponen yang harus dibuat. Seperti background dan ikon. Bagi seorang desainer, mungkin tidak masalah membuat banyak gambar background dan ikon. Tapi, bagi programmer atau developer…ini sangat merepotkan. Untunglah ada Font-awesome, yang merupakan framework CSS untuk membuat ikon. Font-awesome memiliki ratusan ikon yang bisa kita gunakan. Pada tulisan ini, kita akan belajar cara membuat ikon menggunakan Font-awesome. Dimulai dari tahap instalasi sampai ke pembuatan animasi.