Today I Learned

---
title: "Today I Learned Page"
description: "Document what I have learn today."
head:
  meta:
    - name: "robots"
      content: "index, follow"
    - name: "keywords"
      content: "today i learned, learn, learning, today, til"
    - name: "og:title"
      content: "Now Page"
    - name: "og:description"
      content: "Document what I have learn today."
---

05 May 2023

resolveComponent()

#VueJS #NuxtJS #Components #Dynamic

I have case on Playground Page need create dynamic component for preview of playround.

Source

resolve-component.vue

<template>
  <component :is="clickable ? MyButton : 'div'" />
</template>
 
<script setup>
  const MyButton = resolveComponent('MyButton')
</script>

22 April 2023

Resize Observer

#Javascript #DOM

I insipre Vercel Design Team who create show width and height of element. I search how to create it, then found a Resize Observer.

Demo Source

resize-observer.ts

const resize = new ResizeObserver((entries, observer) => {
  entries.forEach((entry) => {
    console.log(`${entry.offsetWidth} x ${entry.offsetHeight}`)
  });
});
resize.observe(element);

// Dont forget to disconnect/unobserver when not use
resize.disconnect();

22 March 2023

Intersection Observer

#Javascript #DOM

If you see my Home Page you notice the element is show when visible on screen and disappear when not visible screen. It create with Intersection Observer.

Demo Source

intersection-observer.ts

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting) return entry.target.classList.add("intersecting")
    return entry.target.classList.remove("intersecting")
  })},
  { rootMargin: "0px" }
);
observer.observe(element);
 
// Dont forget to disconnect/unobserver when not use
observer.unobserve(element) // Single element
observer.disconnect() // All element