#TIL by Rahmanda Wibowo

Kadang-kadang kita perlu menggunakan   pada HTML kita sebagai pengganti dari spasi. Tetapi karena   mempunyai byte code yang berbeda, perbandingan antara   dan spasi akan mengembalikan nilai false. Oleh karena itu apabila kita ingin melakukan unit testing dengan sebuah teks HTML yang mengandung karakter  , kita perlu mengganti spasi dengan \u00a0 (  akan ditransform ke kode unix saat dirender).

const mount = function render() {
  return <p>&nbsp;</p>;
}

const wrapper = mount();

expect(wrapper.text()).toBe(' '); // false
expect(wrapper.text()).toBe('\u00a0'); // true

Kalau kamu perlu menggunakan shallowMount tetapi aplikasi kamu menggunakan komponen global, kamu mungkin akan terganggu dengan banyaknya log warning yang muncul pada terminal kamu saat menjalankan skrip unit testing.

Untuk mematikan warning tersebut, taruh kode dibawah ini pada setup files yang kamu definisikan dalam konfigurasi jest kamu.

global.beforeEach(() => {
  // surpress Vue warn
  spyOnConsoleError = jest.spyOn(global.console, 'error').mockImplementation(message => {
    if (!String(message).includes('[Vue warn]: : Unknown custom element')) {
      consoleError(message);
    }
  });
});

Cara ini akan membuat jest hanya mematikan warning untuk error 'unknown custom element' saja.

Sayangnya gabisa.

Scoped style gak akan ter-apply meskipun kita sudah menulisnya di dalam komponen yang menggunakan v-html.

Hal ini disebabkan karena tag yang disuntikkan dengan v-html tidak memiliki scope identifier dalam atributnya. Oleh karena itu, scoped style tidak memiliki efek terhadap tag tersebut.

<!-- anggap kita punya komponen seperti ini -->
<template>
  <div class="container" v-html="htmlContent"/>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>Tag yang ingin kamu tambahkan styling</p>',
    };
  },
};
</script>

<style scoped>
.container p {
  color: cornflowerblue;
}
</style>

<!-- setelah kita merender komponennya, tag html yang ter-generate akan seperti ini -->
<div class="container" data-v-r4nd0m1d>
  <p>Tag yang ingin kamu tambahkan styling</p>
</div>

<!-- dan style yang ter-generate akan terlihat seperti ini -->
<style>
.container p[data-v-r4nd0m1d] {
  color: cornflowerblue;
}
</style>

Menghapus listeners sudah menjadi pengetahuan umum saat bekerja di bagian front-end, tapi saya masih sering lupa dengan itu. Kali ini, saya tidak menghapus sebuah listener scroll pada sebuah page component yang menyebabkan error saat saya bernavigasi ke page lain.

Ini disebabkan karena callback yang dipakai di listener-nya masih mengakses konteks dari component yang, tentu saja, telah dihapus saat berpindah dari page tsb. Solusinya simpel, tinggal menambahkan removeEventListener di dalam lifecycle beforeDestroy:

<script>
export default {
  // ...
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollCallback)
  }
}
</script>

Meskipun kata orang kita tidak perlu peduli dengan itu selama kita pakai browser modern (yang punya garbage collector yang pintar), hal ini masih akan terjadi terutama kalau app kalian mempunyai routing di client side. Jadi, jangan lupa untuk menghapus semua listener ya!

Saat saya mengerjakan visualisasi kalender ini, saya menemukan cara yang keren untuk mengubah warna teks supaya tampil hitam pada background yang terang dan putih pada background yang gelap.

<template>
  <div style="display: flex;">
    <div v-for="value in items" :style="{ backgroundColor: `${bgScale(value)}`, width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center' }">
      <span :style="{ color: `${colorScale(valueToRatio(value))}` }">{{ value }}</span>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  props: {
    // set data random
    items: {
      type: Array,
      default: () => [0, 1, 20, 30, 40, 23, 33, 50],
    }
  },
  data() {
    return {
      // nilai yang lebih tinggi berarti warnanya lebih gelap, nilai yang lebih rendah
      // berarti warnanya lebih terang
      bgScale: d3.scaleQuantize([0, d3.max(this.items, value => value)], d3.schemeBlues[9]),

      // nilai yang lebih tinggi berarti warnanya putih, nilai yang lebih rendah
      // berarti warnanya hitam
      colorScale: d3.scaleQuantize([0, 1], ['black', 'white']),

      // fungsi untuk mengubah nilai menjadi rasio
      valueToRatio: d3.scaleLinear().domain([0, d3.max(this.items, value => value)]).range([0, 1])
    }
  }
}
</script>

Idenya adalah mengubah data menjadi rasio menggunakan fungsi valueToRatio, dan membuat dua fungsi scale untuk warna background dan teks.

Dengan nilai yang belum ditransform, ambil warna background dengan fungsi bgScale yang mengembalikan warna terang pada range rendah, dan warna gelap pada range tinggi. Lalu dengan nilai rasio, ambil warna teks dengan fungsi colorScale yang mengembalikan warna gelap pada range rendah, dan warna terang pada range tinggi.

Saya baru sadar kalau tag image yang tidak memiliki atribut dimensi (width dan height) ternyata dapat memengaruhi layout shifting secara signifikan setelah saya menonton video ini oleh Addy Osmani. Dan saat ini, cumulative layout shifts (CLS) termasuk ke dalam salah satu Core Web Vitals yang berpengaruh terhadap search ranking halaman kita di Google. Sekarang saya harus lebih hati-hati saat ingin menambahkan image pada layout yang responsif.

Berdasarkan schema.org, sebuah properti publisher bisa diisi dengan tipe Organization atau Person. Hanya saja saat saya mencoba menggunakan tipe Person pada schema web ini, structured data testing tool oleh Google menyatakan itu tidak valid. Oleh sebab itu, saya hanya bisa menggunakan tipe Organization untuk properti publisher. Kalo mau sih, antara schema.org yang membetulkan dokumentasinya, atau Google yang perlu membetulkan testing tool-nya hmmm....

Berkaitan dengan postingan ini, saya menemukan bahwa mengubah style inset itu tidak selalu mudah terutama kalau melibatkan dua sisi yang berlawanan, seperti top vs bottom, atau left vs right. Apabila kamu perlu meng-update nilai dari satu sisi lalu setelah itu kamu perlu mengupdate nilai dari sisi yang berlawanan, kamu akan mendapatkan tampilan yang tidak konsisten kalau kamu tidak mengeset nilai default untuk kedua sisi tersebut.

// Ini tidak konsisten

document.querySelector('.container').style.top = 0
// ... lalu pada kode setelahnya
document.querySelector('.container').style.bottom = '200px'


// Ini konsisten

document.querySelector('.container').style.top = 0
document.querySelector('.container').style.bottom = 'unset'
// ... lalu pada kode setelahnya
document.querySelector('.container').style.top = 'unset'
document.querySelector('.container').style.bottom = '200px'

Sampai versi 0.7.17, satu-satunya cara untuk membuat tipe post lebih dari satu adalah dengan melakukan registrasi konfigurasi @gridsome/source-filesystem berkali-kali ke dalam nilai plugins pada file gridsome.config.js.

// gridsome.config.js

export default {
  // ...
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Blog',
        path: './contents/blog/**/*.md'
      }
    },
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Journal',
        path: './contents/journal/**/*.md'
      }
    }
  ]
}

Saya baru ngeh kalau martabak asin di Indonesia berasal dari masakan Arab yang bernama 'murtabbaq' setelah nonton video Geography Now di Youtube. Tapi setahu saya, martabak manis atau terang bulan itu asalnya dari masakan China 'Man Jian Guo'. Uniknya, di Indonesia martabak asin dan manis itu hampir selalu dijual bersamaan oleh pedagang yang sama. Jadi selama ini, pedagang martabak itu menjual dua makanan yang berasal dari budaya yang amat sangat berbeda.

Jadi penasaran apa sebenarnya sejarah dibalik pedagang martabak bisa berjualan dua makanan ini secara bersamaan....

Setiap kali kamu mengontrol history via JS menggunakan window.history dan onpopstate untuk mengatasi event back, kamu perlu menaruh replaceState saat page load. Hal ini disebabkan saat user mengunjungi sebuah URL untuk pertama kali, state history untuk page tersebut masih kosong dan akan menimbulkan bug saat user mencoba kembali ke halaman ini menggunakan back button.