#TIL by Rahmanda Wibowo

Sometimes we need to use   in our HTML as opposed to a space. However because   has a different byte code, the comparison between   and a space will always return false. That's why if we want to do assertion with an HTML text containing   characters, we need to replace spaces with \u00a0 (  will be transformed to unix code when rendered).

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

const wrapper = mount();

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

If you need to use shallowMount but your app are using globally registered components, you might get annoyed by so many warning logs appear on your terminal when running the unit testings.

To turn off the warnings, put this code below on your test setup files defined in your jest configuration.

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

This will let jest to silence only the unknown custom element error.

No, you can't.

The scoped style won't be applied even if we have written it inside of the component that uses v-html.

The reason is that the tags injected with v-html don't have scope identifiers in their attributes and therefore the scoped style will have no effect on those tags.

<!-- let say we have a component like this -->
<template>
  <div class="container" v-html="htmlContent"/>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>Tags that you want to style</p>',
    };
  },
};
</script>

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

<!-- when we render those component, the html tags will be generated like this -->
<div class="container" data-v-r4nd0m1d>
  <p>Tags that you want to style</p>
</div>

<!-- and the generated style will look like this -->
<style>
.container p[data-v-r4nd0m1d] {
  color: cornflowerblue;
}
</style>

Removing listeners has become a common knowledge when working on front-end stuff, however I still manage to forget about it just now. This time, I didn't remove a scroll listener on my page component which caused an error when I navigate to another page.

This is because the callback for the listener was still accessing the component's context which, of course, had been deleted when navigating away from the page. The solution is simple, just add a removeEventListener inside of beforeDestroy lifecycle:

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

Even though people say that we don't need to take care of it as long as we are using a modern browser (which has a smart garbage collector), this thing can still happen especially if your app has a client side routing. So, don't forget to remove all listeners folks!

When I was working on this calendar visualization, I found a pretty cool method to adjust the text color so that it will appear black on a lighter background and white on a darker background.

<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: {
    // some random data items
    items: {
      type: Array,
      default: () => [0, 1, 20, 30, 40, 23, 33, 50],
    }
  },
  data() {
    return {
      // higher value means darker bg color, lower value means lighter bg color
      bgScale: d3.scaleQuantize([0, d3.max(this.items, value => value)], d3.schemeBlues[9]),

      // higher value will have white color, lower value will have black color
      colorScale: d3.scaleQuantize([0, 1], ['black', 'white']),

      // function to transform value into a ratio
      valueToRatio: d3.scaleLinear().domain([0, d3.max(this.items, value => value)]).range([0, 1])
    }
  }
}
</script>

The idea is to transform our data into a ratio with valueToRatio function, and have two scale functions for background and text color.

With a untransformed value, get the background color from bgScale which returns a lighter color on the lower range, and a darker color on the lower range. Then with a ratio value, get the text color from colorScale which returns a darker color on the lower range, and a lighter color on the higher range.

I just realize that a image tag without dimension attributes (width and height) can actually cause a significant layout shifting after I watched this video by Addy Osmani. And right now, cumulative layout shifts is a part of the Core Web Vitals which is taken into account for our page search ranking on Google. I think I should be more careful now when I want to add images in a responsive layout.

According to schema.org, a publisher property can be filled with either Organization or Person type. However when I was trying to use Person type on this web's schema, the Google's structured data testing tool said it was invalid. Therefore, I can only use Organization type for a publisher, which I opted out later and just use author property. This could be either schema.org who needs to fix the documentation, or Google who needs to fix the testing tool hmmm....

Related to this post, I find that updating inset style is not always easy especially when it is involving two opposing sides, such as top vs bottom, or left vs right. If you need to update one side value and then later on you need to update the opposite side value, you may end up getting an inconsistent display if you don't set the default value for both sides.

// This is a no

document.querySelector('.container').style.top = 0
// ... later on the code
document.querySelector('.container').style.bottom = '200px'


// This is a yes

document.querySelector('.container').style.top = 0
document.querySelector('.container').style.bottom = 'unset'
// ... later on the code
document.querySelector('.container').style.top = 'unset'
document.querySelector('.container').style.bottom = '200px'

I just realized that martabak asin in Indonesia was originated from Arab cuisine 'murtabbaq' from watching Geography Now video on Youtube. However, martabak manis or terang bulan was originated from Chinese cuisine 'Man Jian Guo'. The thing is, martabak asin and manis are almost always sold together by the same street vendor in Indonesia. Thus after all this time, the martabak vendor sells two things with entirely different cultures.

I wonder what was the history behind martabak vendor started to sell these foods together back in the days....

Until v0.7.17, the only way to enable multiple post type is by repeatedly registering bunch of @gridsome/source-filesystem configs on gridsome.config.js plugins value.

// 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'
      }
    }
  ]
}

Every time you control history via JS with window.history and use onpopstate to handle back button, you have to include replaceStateon page load. This is because when a user hits a URL for the first time, the history for the page will have an empty state and it will cause a bug when a user tries to revisit this page using back button.