DEV Community: Brian Barrow

Generating Collapsable Navigation from Nuxt Content

Brian Barrow — Mon, 07 Feb 2022 20:34:46 +0000

When we started building the Documentation page here at Deepgram, we had a lot of nested pages and routes. Rather than have all those links listed out on the side, we wanted the user to be able to expand and collapse them in order to have a cleaner look and feel.

At the top level of our navigation, we have a SideNavigation.vue component that gets the navigation information from a navigation.yml file in our content folder. Each navigation element can have a children property (shown below) that lists out the child routes of that page.

This is the original template we had set up for the component:

<template>
  <ul>
    <li
      v-for="nav of navigation"
      :key="nav.to"
      :class="{ active: isActive(nav) }"
    >
      <NuxtLink :to="nav.to" :title="nav.title || nav.name">{{
        nav.name
      }}</NuxtLink>
      <NavList v-if="nav.children" :navigation="nav.children" />
    </li>
  </ul>
</template>

The component was recursively going through the navigation object and creating new NavList components if there were children routes. Basically, it is rendering another version of itself inside of itself. So the NavList component renders another NavList component. Sort of like component Inception. Don't worry about an infinite rendering of NavLists though. It will render a child NavList only if there are children to the navigation object.

I like the fact that it is recursive, making it dynamic. That way, we don't have to specify when to use a 'child' NavList component. It also presented a problem. I needed some way to identify which sub-menus were open and which were not. After some thought and some rubber ducking, I settled on having a data property containing an array of the parent route paths that were expanded. I called it childrenShow.

data() {
    return {
      childrenShow: [],
    }
  },

If a parent route has a path of /documentation/getting-started/, the entire string gets pushed into the array. Then, as the child NavList components get added to the page, I needed to check if they should be shown using a v-show directive. I did this by using the isExpanded method, which takes in the current nav object (which comes from the original YAML file for the nav list structure via the v-for above) and checks it against the childrenShow array to see if should be shown.

Also, since there is already a v-if on the NavList, and I can't use both a v-if and a v-show on the same element, I had to create a container template to handle the v-if. So the NavList line will change to this:

<template v-if="nav.children">
  <NavList v-show="isExpanded(nav)" :navigation="nav.children" />
</template>

This worked well as-is. The menus collapse and expand when the user clicks on the respective expand/collapse button. The only issue now is that the transition wasn't smooth, which can be a little jarring.

After playing with transitions for a while and not having much success for this use case, I talked to a co-worker, and he sent me this article from Markus Oberlehner that talks about transitioning to an element's full height. So I created a new component called TransitionExpand.vue and put this code in there:

<script>
export default {
  name: `TransitionExpand`,
  functional: true,
  render(createElement, context) {
    const data = {
      props: {
        name: `expand`,
      },
      on: {
        afterEnter(element) {
          // eslint-disable-next-line no-param-reassign
          element.style.height = `auto`
        },
        enter(element) {
          const { width } = getComputedStyle(element)

          /* eslint-disable no-param-reassign */
          element.style.width = width
          element.style.position = `absolute`
          element.style.visibility = `hidden`
          element.style.height = `auto`
          /* eslint-enable */

          const { height } = getComputedStyle(element)

          /* eslint-disable no-param-reassign */
          element.style.width = null
          element.style.position = null
          element.style.visibility = null
          element.style.height = 0
          /* eslint-enable */

          // Force repaint to make sure the
          // animation is triggered correctly.
          // eslint-disable-next-line no-unused-expressions
          getComputedStyle(element).height

          requestAnimationFrame(() => {
            // eslint-disable-next-line no-param-reassign
            element.style.height = height
          })
        },
        leave(element) {
          const { height } = getComputedStyle(element)

          // eslint-disable-next-line no-param-reassign
          element.style.height = height

          // Force repaint to make sure the
          // animation is triggered correctly.
          // eslint-disable-next-line no-unused-expressions
          getComputedStyle(element).height

          requestAnimationFrame(() => {
            // eslint-disable-next-line no-param-reassign
            element.style.height = 0
          })
        },
      },
    }

    return createElement(`transition`, data, context.children)
  },
}
</script>

<style scoped>
* {
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}
</style>

<style>
.expand-enter-active,
.expand-leave-active {
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}

.expand-enter,
.expand-leave-to {
  height: 0;
}
</style>

There is a lot of stuff happening in that component. To understand it better, visit the link above to Markus' blog. He goes into the detail you need.

I then changed the template tag that was containing the child NavList component, to a transition-expand tag like this:

<transition-expand v-if="nav.children">
  <NavList v-show="isExpanded(nav)" :navigation="nav.children" />
</transition-expand>

That made the expand/collapse transition much smoother and created a better user experience. It was a challenging problem that was fun to figure out. If you want to see a working example of it, you can check out this code sandbox. If you want to see it on our production site, you can see it on our Documentation page.

Getting Started with the MediaStream API

Brian Barrow — Mon, 13 Dec 2021 21:16:02 +0000

When building web applications, you will sometimes need to work with audio and/or video inputs. You'll need to understand the MediaStream API, which is the web API that supports streaming both audio and video information. In this post, we'll cover the basics of the MediaStream API.

Getting Started

To get started, you'll need to gain access to the user's audio/video devices which provide data in a 'stream.' A common use case would be getting access to the user's microphone and camera. One of the most common ways to do this is through the getUserMedia method that is built into the browser. This post is more about understanding the different parts of the API. To see this method used in action, refer to Kevin's post about getting audio in the browser.

Let's take the following code, insert it into an HTML file, and then open that file in the browser.

<!DOCTYPE html>
<html>
  <body>
    <h1>Getting Started With MediaStream</h1>
    <script>
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          console.log('MEDIA STREAM: ', stream)
        })
        .catch((err) => {
          alert('PERMISSION DENIED')
        })
    </script>
  </body>
</html>

This will prompt you to allow access to the microphone on your machine. If you reject it, you'll get an alert saying PERMISSION DENIED. If you allow that, then you will see the following in your console:

As you can see, there are several properties and methods available on the MediaStream object. Before we dive into these, I want to clarify a couple of definitions.

stream: A stream of media content. Regarding what we'll be discussing, this refers to the stream of information coming from a user's device. The stream will be coming from either the device's microphone or the camera, or both at the same time. A stream will consist of one or more 'tracks.'
track: A track is a piece of media within a stream. These are typically audio or video tracks. If we get access to both a microphone and a camera, our stream will consist of both an audio and a video track.

Properties

active

The first one we see is the active property. This property is simply a boolean value indicating if any part of the MediaStream object is currently active or being used. Most MediaStream objects you'll encounter will contain audio and/or video tracks. If any of these tracks is active, then the active property on the MediaStream object will be true.

The other property available on our MediaStream object is the id, a unique identifier for the object and contains 36 characters. This will be helpful if you need to keep track of multiple streams and do different things with them.

Methods

addTrack

This method takes in a MediaStreamTrack as an argument and adds it to the MediaStream object.

getTracks

This returns a list of all MediaStreamTrack objects associated with the stream. To test it out, let's add the getTracks method to our code. I've included the video: true in the constraints so we can see multiple tracks.

  <!DOCTYPE html>
  <html>
    <body>
      <h1>Getting Started With MediaStream</h1>
      <script>
        navigator.mediaDevices
          .getUserMedia({ audio: true, video: true })
          .then((stream) => {
            console.log("tracks", stream.getTracks());
          .catch((err) => {
            console.log("ERROR", err);
            alert("PERMISSION DENIED");
          });
      </script>
    </body>
  </html>

You can see in the screenshot below that we get both the audio and the video tracks showing:

getAudioTracks

This returns a list of MediaStreamTrack objects that are audio types. If we used this instead of getTracks above, we would have gotten the list with only the audio track showing.

getVideoTracks
This returns a list of MediaStreamTrack objects that are video types.
getTrackById
This method takes in a string and will return the track from the MediaStream object with the corresponding id.

  <!DOCTYPE html>
  <html>
    <body>
      <h1>Getting Started With MediaStream</h1>
      <script>
        navigator.mediaDevices
          .getUserMedia({ audio: true, video: true })
          .then((stream) => {
            const trackId = stream.getAudioTracks()[0].id;
            console.log("getTrackById", stream.getTrackById(trackId))
          .catch((err) => {
            console.log("ERROR", err);
            alert("PERMISSION DENIED");
          });
      </script>
    </body>
  </html>

removeTrack This method removes the given track from the MediaStream object. When we add a button to remove the track to our code and then log the MediaStream.getTracks to the dev tools console, we can see it is no longer there. If we were displaying a video stream to a div on our page and removed the video track, then the stream would no longer appear.

  <!DOCTYPE html>
  <html>
    <body>
      <h1>Getting Started With MediaStream</h1>
      <script>
        navigator.mediaDevices
          .getUserMedia({ audio: true, video: true })
          .then((stream) => {
            const tracks = stream.getTracks()
            console.log("tracks before remove", tracks);
            // remove both tracks
            stream.removeTrack(tracks[1])
            stream.removeTrack(tracks[0])
            console.log("tracks after remove", stream.getTracks());
          .catch((err) => {
            console.log("ERROR", err);
            alert("PERMISSION DENIED");
          });
      </script>
    </body>
  </html>

Events

Events are simply actions that happen in the system you are programming, which the system tells you about so your code can react to them if needed. An event listener is a function that runs when a specific event occurs.

You should be aware of a few events on the MediaStream object.

addtrack
Fired when a new track object is added.
- Event listener: onaddtrack is fired when a new track is added. To use the event listener, assign it to a function that you want to be called whenever a track is added.

navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) => {
      stream.onaddtrack = function(event) {
        // code to execute when track is added
      }
    .catch((err) => {
      console.log("ERROR", err);
      alert("PERMISSION DENIED");
    });

removetrack Fired when a new track object is added.
- Event listener: onremovetrack is fired when a new track is removed. To use the event listener, assign it to a function you want to be called whenever a track is removed.

Conclusion

The MediaStream API is beneficial and can be utilized in the applications that you build. I hope this has been informative and helped you as a web developer.

Getting Started with Supabase

Brian Barrow — Mon, 06 Dec 2021 17:15:11 +0000

Getting a database set up and running can be a difficult and time-consuming process. There are quite a few options these days for "quick" solutions. Supabase is one of those options and is gaining popularity very quickly. Let's dive in and see what Supabase offers. We'll walk through an example of setting up a database for a Reading List app and learn how to add, read, edit, and delete data from it.

Who this post is for

This post will be easier to follow if you have a general understanding of how databases work.

Setup

The first thing you'll need to do is sign up on Supabase. It asks you to sign up with GitHub, so if you don't have an account, you should also sign up for one of those.

Once you are signed in, you'll click the green button that says "New Project" and select the default organization that was created when you logged in. Mine was called "briancbarrow's Org." This will bring up a box where we provide some info about the project. I'll name it reading-list, give it a strong password, and then I'm going to select the region West US (North California) because that is closest to me.

Click the "Create new project" button. It will take a few minutes for the project to be ready, so sit tight until that finishes.

Now that we have that set up, you should see a page with the name of the project you gave, and below that, it should say "Welcome to your new project." Below that, there are a few features that we can start exploring.

Database: The Supabase Database is an instance of a Postgres Database. We'll be diving into this more below.
Auth: The Supabase Auth service makes it relatively easy to set up authentication for your app and also manage your users. We won't be covering Auth in this post.
Storage: Supabase offers a storage service for larger files like images or audio files. We won't be covering Storage in this post either.

Initializing the Database

Click on the button in the "Database" card that says "Table editor." This takes us to a blank dashboard where we'll be able to add and edit our database tables. Click the + New table button on the left and give it the name books. For now don't check the "Enable Row Level Security (RLS)." This table will need a few columns in addition to the "id" column. I've listed them below.

Column Name: title, Type: varchar
Column Name: author, Type: varchar
Column Name: finished Type: bool

The table might already have a 'created_at' column in there by default. We won't need it so you can remove that one.

Save that, and you've created a table in your database. You should now be able to see it. Let's fill in some data now. Click the button that says "Insert Row" and fill in the data with a couple of books you like. Remember that you can only insert the type of data into columns that you specified in the table setup. For example, we couldn't store a string inside the "finished" column because it only accepts booleans. Here is a link to more info on data types.

Here is what my table looked like after I inserted two rows of data.

Querying the Database

With the data added, we can now look at how to send API requests to it in order to read that data.

In the left hand navigation, there is a link to the API documentation. This is auto-generated for us by Supabase and allows us to connect with our database in our code. Right now, we want to test that we can get the data we want from our books table. In the left hand menu, there is a section called "Tables and Views". Select the books table. Since we don't have a JavaScript app set up yet, select the "Bash" tab at the top of the right hand column above the code output. This will show us how a basic request is structured. I am going to be using Postman (which you can get here) to send these requests.

Reading data

Go down to the section that says "READ ALL ROWS", where you'll find the curl request to get the information from our database.

Here is what it should look like:

curl 'https://swmsbxvlhkqilunwmsgs.supabase.co/rest/v1/books?select=*' \
-H "apikey: SUPABASE_KEY" \
-H "Authorization: Bearer SUPABASE_KEY"

You can put this info into an app like Postman, or you can copy this code and put it directly into your terminal to get the results. Note that the SUPABASE_KEY in the above code is just a placeholder for your own key. To get your API keys to populated into the example requests, there is a dropdown labeled "Key" up at the top of the screen. Select anon key.

Since I'm using Postman for these requests I'll first copy the URL from the curl line and paste it into the request URL field in Postman. For this request we'll keep it as a GET request. I'll then click on the "Headers" tab inside Postman and add the apikey and Authorization headers respectively. It will look something like this, with your URL and API Keys instead of mine.

Inserting data via the API

Now we can send the request and the results will show the contents of our books table. But what if we want to add or update data using the API? Inside of the API page of our Supabase app there are examples of all these types of requests. Let's try to insert data. I'll find the "Insert Rows" section of the API documentation and create a new request in Postman with the required fields.
The request with the new headers you'll need should look something like this.

This request requires a body of data to be sent to the API endpoint. Add some raw JSON data to the body tab of the request like this:

When we send this, if it is successful, it will return with the item we just inserted.

Updating data

A lot of times we have data in the app that needs to be changed/updated. In the API documentation this will be found under the "Update rows" section. This request is shaped a lot like the Insert request we did above. The first difference is that this is a PATCH request instead of a POST request. (Note that we use a PATCH to update instead of a PUT because PATCH allows us to update only specific fields, while PUT requires us to send the entire object with the request. We could have used PUT in this case, but the PATCH makes it more flexible in the future. See this link for more details on the difference). The second difference is in the URL. At the end of the URL there is a parameter. In the example from the API documentation they have it shown as ?some_column=eq.someValue. This is where we tell the database which row we want updated. So in our case, we can put ?id=eq.2 to update the book with the ID of 2. Let's update the title to "The Graveyard Book" and the author to "Neil Gaiman."

Deleting data

We also need to be able to delete data from our table. Like before, look at the example request in the API documentation page. It is similar to the Update request above. There aren't as many headers needed though and we don't pass any data. We need to specify which row though using a parameter again and make sure you change the type of request to a DELETE request. Let's delete the same book we just updated. The request will look something like this:

When you navigate back to the Tables page of the Supabase UI, you should only see the first book you created.

Conclusion

Now you know the basics of how to set up and use a Supabase Database. This tutorial just scratched the surface of Supabase, but it should give you a solid start.

Before you start using the database in an app, you'll also want to add the "Row Level Security" to your tables. This is beyond the scope of this introduction to Supabase blog, but basically it makes it so only authenticated users can affect the data in the tables. You can find out more in the Supabase documentation page.