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?