DEV Community: Oluwakeye John

Building Reusable Components with Vue

Oluwakeye John — Tue, 22 Dec 2020 20:56:54 +0000

Introduction

Vue.js is a progressive framework for JavaScript used to build web interfaces and one-page applications. It has become really popular these days because of its simplicity compared to other UI libraries.

Components are the building blocks of many frontend libraries and frameworks like react and vue. Everything in an modern application can (and should) be broken down into components. Also, by convention a component should do just ONE thing

Here is an example of a component in vue

<template>
  <div class="alert">Click me</div>
</template>

<script>
  export default {
      name: “Component”
  }
</script>

<script>
  .alert{
    background-color: orange
  }
</script>

The above components is a simple div that displays the text enclosed.

This works fine. However, if we want to use our Alert component in multiple places with this approach, we will have to duplicate our Alert component multiple times which isn't clean and does not stick to the DRY(Don't Repeat Yourself) approach.

That's where reusability comes into play. In a typical application, there are a lot of cases where we need to reuse components which includes headers, footers, alerts amidst others. Vue provides us with a lot of ways to achieve this. In this article, we are going to examine two of them:

1. Passing Props

The first approach is to use props.
According to the vue docs, props (short for properties), are custom attributes you can register on a component.

Props are the way that we pass data from a parent component down to it's child components.

To pass a text to our component, we can include it in the list of props this component accepts, using a props option. We can also specify the type for the prop we are expecting, be it a string, number or object. An optional default value can also be provided.

<template>
  <div class="alert">{{ text }}</div>
</template>

<script>
  export default {
    name: "Alert",
    props: {
      text: {
        type: String,
        required: true,
      },
    },
  }
</script>

We can then use out Alert component in multiple instance, by passing our text prop into our Alert component

<div>
  <Alert text="An error jsut occurred" />
  <Alert text="Scam alert" />
  <Alert text="Something has gone verrry wrong" />
</div>

With this approach, we are able to reuse our Alert component multiple times by passing different prop values into it.

2. Using Slots

Other than using props, Vue also allows us to use slots to make reusable components.

According to the vue docs, slot elements serve as distribution outlets for content.
If you are familiar with react, then slot work just like react children, but a little more flexible. Slots allow us to wrap our components around other elements to create fully flexible reusable components.

To convert out above element to use slots, we do the following:

<template>
  <div class="alert">
    <slot />
  </div>
</template>

We are basically creating a normal component, but note that the slot that has been added. When the component renders, the slot will be replaced by out text.

<div>
  <Alert>An error occurred</Alert>
  <Alert>An error occurred</Alert>
</div>

Also, note that the slot can be anything, including template code and HTML. It can also contain other components.

<Alert>
  <div>
    <h1>This is HTML</h1>
  </div>
</Alert>

Setting Fallback

We can also provide a fallback content for our slots. The fallback content will only be rendered when no content is provided. To provide a fallback content for our slots, we place it in between out slot tags:

<template>
  <div class="alert">
    <slot>Here is the default value</slot>
  </div>
</template>

If the slot default value is provided, then it slot falls back to this default if no value is provided when using out Alert component

<div>
  <!-- the fallback content is used below -->
  <Alert />
</div>

Summary

That's it. We have looked at creating resuable using both the props and the slots approach. You can find more details and advanced usage of both approaches on the vue docs.

Capturing Media With JavaScript

Oluwakeye John — Sun, 09 Aug 2020 20:34:57 +0000

Introduction

Have you ever wondered how a video chat app like zoom works? Well, it all boils down to capturing video and audio from a device.

Fortunately, JavaScript has an API called MediaDevices which can be used to access and use the media inputs of a device. The MediaDevices can be accessed under the window navigator object using navigation.mediaDevices.

Media input in this scenario can include camera stream, audio track, screen sharing service and others.

getUserMedia()

To start receiving the stream, we need to call the method MediaDevices.getUserMedia(). This method asks the user for permission to use the media input in question. The method resolves to the MediaStream object. If there is an error, the device doesn’t have the requested media, or the user denies the permission, then the promise is rejected.

const promise = navigator.mediaDevices.getUserMedia(constraints)

N.B. For security reasons, the getUserMedia method can only be used on a secure connection (secure includes HTTPS, localhost and file://). HTTP will not work, neither will an iframe.

Constraints

The MediaDevices.getUserMedia takes an argument, called the constraints. The constraint describes the media type requested: video, audio or both. The constraint can also be used to specify more requirements on the returned media stream.

The following requests both video and audio.

const constraints = {
  video: true,
}

You can also specify additional requirements for each media type:

const constraints = {
  video: {
    width: 640,
    heigth: 480,
  },
  audio: {
    noiseSuppression: true,
  },
}

You can checkout a list of other constraints.

As earlier said, the getUserMedia() method returns a stream which you can decide to display on the device or transmit to another device for purposes like WebRTC(more to come on that later).

Here is a code snippet to access the MediaDevices API:

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    // process stream
  })
  .catch(function (err) {
    // catch error
  })

Basic example

The code snippet below gives an example of how to use the getUserMedia method. In this example, the stream is passed to the video srcObject property and displayed on the screen.

<html>
  <head>
    <title>Capturing media with JavaScript </head>
  </head>
  <body>
    <video autoplay controls />

    <script>
      const constraint = {
        video: true,
        audio: false,
      }
      const video = document.querySelector("video")

      navigation.mediaDevices
        .getUserMedia(constraint)
        .then(stream => {
          video.srcObject = streams
        })
        .catch(() => {
          console.log("error")
        })
    </script>
  </body>
</html>

What next?

This post is just the tip of what you can do with the MediaDevices API. In a future post, I will:

Record the captured media using the MediaRecorder API
Stream the captured stream on another device via Web RTC

My New Website (tools and kits)

Oluwakeye John — Sun, 09 Aug 2020 20:21:23 +0000

After a long time of procastinating, I've finally been able to make time to create my own personal website. This website involves a relatively
small tech stack and doesn't cost a dime as it involves no hosting or backend. In this post, I will like to share what the website is built on with you.

Here is a link to the site on Github: Code. You can grab some codes and use it in yours.
Also, feel free to raise an issue.

Tool Stack

Gatsby

Gatsby is a static site generator (SSR) which is used to make blazing fast websites and it is based on React. Gatsby uses server-side rendering to create static websites.
Build usually take a while, which is based on the number of pages and images. I chose Gatsby for this project because it:

Has great image optimization
East to setup
Has a large ecosystem of developers
Is blazing fast

Github

Both the code and the post content are stored on github.

Styled Components

I used styled components for styling. Styled components allow for true reusable components, locally scoped classes and prevents clashing class names.
I plan on writing more about styled components in future posts

MDX

Most developers love markdown. So combining the power of markdown (md) and react JSX for a blog is absolutely incredible. It allows you to embed any react components directly into your blog.

ImprovMX

ImprovMX serves as my mail forwarder. It forwards mails from *@keyejohn.com to my personal email account. BTW, It’s free.

React-icons

React-icons is a collection of different fonts from different: font-awesome, material design icons, etc. For this project, I used only font awesome though I hope to explore other ones in future.

PrismJS

Prism JS is a lightweight, extensible syntax highlighter, built with modern web standards in mind. For this website, I used a theme called prism-tomorrow

Netlify

This website is hosted on Netlify. I enabled continuous deployment, so that the code is automatically updated from Github

Tradeoffs

Overall, this stack is good. The major problem however is the long build time. This denies the opportunity to see changes to the site immediately. However, the introduction of Gatby's incremental build has reduced this drastically.

Summary

This stack is in no way perfect. I however went with this because:

It has great developer experience (DE)
It is cheap (comes at no cost)
It is very easy to maintain