Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Chakra UI Vue

UI Development with Chakra UI Vue — v-chakra Directive

Post author By John Au-Yeung
Post date April 10, 2021
No Comments on UI Development with Chakra UI Vue — v-chakra Directive

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

v-chakra Directive

We can use the v-chakra directive to let us style non-Chakra UI Vue elements with Chakra UI Vue props.

For instance, we can write:

<template>
  <c-box>
    <div
      v-chakra
      p="3"
      bg="red.100"
      rounded="md"
      color="red.500"
      font-weight="bold"
    >
      Welcome
    </div>
  </c-box>
</template>

<script>
import { CBox } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
  },
};
</script>

The p prop sets the padding. bg sets the background color.

rounded sets the breakpoint for rounded corners to apply.

color has the text color.

font-weight has the font-weight.

We can also style child elements with v-chakra .

To do this, we write:

<template>
  <c-box>
    <div
      v-chakra="{
        p: 3,
        shadow: 'sm',
        header: {
          bg: 'blue.100',
          fontSize: 'lg',
          fontWeight: 'bold',
        },
        '& > p': {
          fontStyle: 'italic',
        },
      }"
    >
      <header>Title</header>
      <p>Text</p>
    </div>
  </c-box>
</template>

<script>
import { CBox } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
  },
};
</script>

The header property has the header element styles.

& > p has the p element styles.

We can also add computed styles by passing in a callback that returns an object with the style values:

<template>
  <c-box>
    <div
      v-chakra="
        (theme) => ({
          shadow: 'sm',
          bg: theme.colors.blue[800],
          color: theme.colors.yellow[300],
          p: {
            fontWeight: 'bold',
            p: 3,
          },
        })
      "
    >
      <header>Title</header>
      <p>Text</p>
    </div>
  </c-box>
</template>

<script>
import { CBox } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
  },
};
</script>

We use the theme parameter to get the color values we want to set.

We used them to set the bg and color properties.

Conclusion

We can use the v-chakra directive to apply Chakra UI Vue styles directly to a non-Chakra UI Vue element.

Chakra UI Vue

UI Development with Chakra UI Vue — Tooltips

Post author By John Au-Yeung
Post date April 10, 2021
No Comments on UI Development with Chakra UI Vue — Tooltips

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Tooltip

We can add a tooltip with Chakra UI Vue.

For instance, we can write:

<template>
  <c-box> <c-tooltip label="tooltip">Hover Me</c-tooltip> </c-box>
</template>

<script>
import { CBox, CTooltip } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
  },
};
</script>

We add the c-tooltip component to add the tooltip.

The label has the tooltip text.

When we hover over ‘Hover Me’, we see the tooltip displayed.

We can add an icon as the hover content.

For instance, we can write:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom">
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

<script>
import { CBox, CTooltip, CIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
    CIcon,
  },
};
</script>

to add an icon.

placement sets the placement of the tooltip.

We can change the background color of the tooltip with the bg prop:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom" bg="blue.600">
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

<script>
import { CBox, CTooltip, CIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
    CIcon,
  },
};
</script>

And we can add an arrow to the tooltip with the has-arrow prop:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom" has-arrow>
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

<script>
import { CBox, CTooltip, CIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
    CIcon,
  },
};
</script>

Conclusion

We can add tooltips easily with Chakra UI Vue.

Chakra UI Vue

UI Development with Chakra UI Vue — Toast

Post author By John Au-Yeung
Post date April 10, 2021
No Comments on UI Development with Chakra UI Vue — Toast

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Toast

Chakra UI Vue comes with a toast component.

To add it, we can write:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        title: "Account created.",
        description: "We've created your account for you.",
        status: "info",
        duration: 10000,
      });
    },
  },
};
</script>

We have a c-button that calls the showToast method when we click it.

In the showToast method, we call the this.$toast method to open the toast.

title has the title.

description has the main content text.

status sets the type of toast to show.

status can also be 'success' , 'warning' or 'error' .

duration is the duration milliseconds that the toast would be shown.

We can also set a component to show as the toast content.

For instance, we can write:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        position: "bottom-left",
        render: () => {
          return this.$createElement(
            "c-box",
            {
              props: {
                color: "white",
                p: 3,
                m: 3,
                bg: "blue.500",
              },
            },
            "Hello World!"
          );
        },
      });
    },
  },
};
</script>

We have the render method that returns c-box component as the toast content.

The props property has the props we pass into c-box .

The 3rd argument has the child content of the c-box .

So when we click on the c-button , ‘Hello World!’ should be shown.

position sets the position of the toast.

The variant property changes the background color style.

For instance, if we have:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        title: "Account created.",
        description: "We've created your account for you.",
        status: "info",
        duration: 10000,
        variant: "subtle",
      });
    },
  },
};
</script>

Then the toast background color is lighter because variant is set to 'subtle' .

Conclusion

We can add a toast with Chakra UI Vue.

JavaScript

JavaScript Promise Cheat Sheet — Handing Promise Results

Post author By John Au-Yeung
Post date April 10, 2021
No Comments on JavaScript Promise Cheat Sheet — Handing Promise Results

short-coated white and beige puppy on the floor

JavaScript promises lets us add non-IO-blocking, asynchronous code easily into our JavaScript app sequentially.

Therefore, they’re used everywhere.

In this article, we’ll look at how to use promises in our JavaScript code.

Create a Promise that Resolves

We can create a promise that resolves with Promise.resolve .

For instance, we can write:

Promise.resolve(1)
  .then((val) => console.log(val))

Then val is 1 since we passed in 1 to Promise.resolve .

Create a Promise that Rejects

We can create a promise that resolves with Promise.reject.

For instance, we can write:

Promise.reject('error')
  .catch((err) => console.log(err))

Then err is 'error' since the catch callback catches the reason value of the rejected promise.

Catching Rejected Promises

We can handle errors that are raised by rejected promises with the Promise.prototype.catch instance method.

For instance, we can write:

Promise.reject('error')
  .catch((err) => console.log(err))

Then err is 'error' since the catch callback catches the reason value of the rejected promise.

This lets us handle the value from the first rejected promises.

Get Value from Resolved Promises

We can use the Promise.prototype.then method to get value from resolved promises.

For instance, we can write:

Promise.resolve(1)
  .then(() => Promise.resolve(2))
  .then((val) => console.log(val))

We call then with a callback with a parameter to get the resolved value from the previously resolved promise.

So val is 2.

Run Code Regardless of Promise Result

We can use the Promise.prototype.finally method to run code regardless of what happens to the promises.

For instance, if we have:

Promise.reject('error')
  .catch((err) => console.log(err))
  .finally(() => console.log('finally'))

Then we see 'error' and 'finally' logged since the finally callback runs regardless of whether a promise is resolved or rejected.

Conclusion

We can use promises to make writing async JavaScript code easy.

JavaScript

JavaScript Promise Cheat Sheet — Basic Operations

Post author By John Au-Yeung
Post date April 10, 2021
No Comments on JavaScript Promise Cheat Sheet — Basic Operations

JavaScript promises lets us add non-IO-blocking, asynchronous code easily into our JavaScript app sequentially.

Therefore, they’re used everywhere.

In this article, we’ll look at how to use promises in our JavaScript code.

Create a Promise

We can create a promise with the Promise constructor.

For instance, we can write:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

to pass a callback into the Promise constructor.

resolve fulfills the promise by returning a value.

reject is a function that throws an error.

then Method

We can use the then method to get the resolved value of the promise.

For instance, we can write:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(
    val => console.log(val),
    err => console.log(err)
  )

The first then callback has the resolved value as the parameter.

The 2nd then callback has the rejected value as the parameter.

Chaining Promises

We can chain multiple promises by returning a promise in the then callback.

For instance, we can write:

Promise.resolve(1)
  .then(() => Promise.resolve(2))
  .then((val) => console.log(val))

We call Promise.resolve to create a promise that resolves.

In the first then callback, we return the promise created by Promise.resolve(2) .

Then we get the resolved value of that promise with the val parameter.

So val is 2.

Run All Promises Simultaneously

We can run all promises simultaneously with the Promise.all method.

For instance, we can write:

Promise.all([
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3),
  ])
  .then((vals) => console.log(vals))

We call Promise.all with 3 promises that resolve.

Then in the then callback, we have vals parameter that has the array of resolved values.

So vals is [1, 2, 3] , which are the resolved values of all the promises.

Wait for All Promises to be Settled Regardless of Result

We can use the Promise.allSettled method to run all promises simultaneously and get the results of them regardless of whether they’re resolved or rejected.

For instance, we can write:

Promise.allSettled([
    Promise.resolve(1),
    Promise.reject('error'),
    Promise.resolve(3),
  ])
  .then((vals) => console.log(vals))

Then we get:

[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "rejected",
    "reason": "error"
  },
  {
    "status": "fulfilled",
    "value": 3
  }
]

as the value of vals .

status has the promise status.

And value has the value.

Wait Until the First Promise is Resolved

The Promise.any method lets us wait until the first promise is resolved.

For instance, we can write:

Promise.any([
    Promise.reject('error'),
    Promise.resolve(1),
    Promise.resolve(3),
  ])
  .then((val) => console.log(val))

val is 1 since it’s the first promise that resolves.

Promise.any returns a promise with the value of the first promise that resolves.

Wait Until any of the Promises is Resolved or Rejected

We can use the Promise.race method to wait until any promise resolves or rejects.

So if we have:

Promise.race([
    Promise.reject('error'),
    Promise.resolve(1),
    Promise.resolve(3),
  ])
  .then((val) => console.log(val))
  .catch((err) => console.log(err))

Then the catch callback will log 'error' since the first promise rejects with reason 'error' .

Conclusion

We can use promises to make writing async JavaScript code easy.