DEV Community: James Q Quick

Build a JavaScript Memory Match Game

James Q Quick — Thu, 25 Aug 2022 14:10:00 +0000

In this tutorial, we’re going to build a PokeMatch game with vanilla HTML, CSS, and JavaScript. The Pokemon API is free and fun to work with, so let’s get started.

This is an abridged version of the tutorial. Watch the full tutorial on YouTube. You can find the full source code here.

Set Up

Open a blank folder in your favorite text editor (VSCode for me). Then, create three files.

index.html
app.js
app.css

In the HTML file, stub out a basic template with a few elements.

references to both app.css and app.js
div with a class of container to wrap everything
a header for the title and a reset button that calls a resetGame function
an empty div with an id of game

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Pokemon Memory Match Game</title>
    <link rel="stylesheet" href="app.css" />
</head>
<body>
    <div class="container">

        <header>
            <h1>PokeMatch</h1>
            <button onclick="resetGame()">Reset</button>
        </header>
        <div id="game">    
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

**TIP** You can use the ‘live server’ extension in VS Code to get a live reloading server running. By default it runs on port 5501.

This is all the markup we’ll need for now. We’ll dynamically generate the board in JavaScript.

Getting your Pokemon

In the app.js file, we’ll need to work with the Pokemon APIto get information on 8 different Pokemon for each iteration of the game. We’ll use this Pokemon API endpoint:

https://pokeapi.co/api/v2/pokemon/{id}

We'll need 3 key properties about each pokemon.

ID
sprites (images)
type

First, we’re going to create a new function called loadPokemon which will make a fetch request to the API for 8 random Pokemon. This function will use async/await so we can go ahead and mark it as async.

We’ll start by making a request to the PokeAPI based URL and then add on the string of the Pokemon we want to fetch. For example, if we want to fetch information for Bulbasaur, we would add 1 to the end of the URL.

const pokeAPIBaseUrl = "https://pokeapi.co/api/v2/pokemon/";

const loadPokemon = async () => {
  const res = await fetch(pokeAPIBaseUrl + '1');
  const pokemon = await res.json();
}

Now, we need to generate an array of random Pokémon IDs, then iterate through the array to make a fetch request for each one. We can use a set to take care of any duplicate IDs and Match.random() to generate random numbers.

A set is an object data structure that doesn’t allow for duplicates and has a constant lookup time.

const randomIds = new Set();
while(randomIds.size < 8){
    const randomNumber = Math.ceil(Math.random() * 150);
    randomIds.add(randomNumber);
}

Then, we'll take that set of random Ids and make a request to the Pokemon API for each one. For performance benefits, we are going to use Promise.all() which will let the different API requests happen in parallel. Here's the final loadPokemon function.

const loadPokemon = async () => {
  const randomIds = new Set();
  while(randomIds.size < 8){
      const randomNumber = Math.ceil(Math.random() * 150);
      randomIds.add(randomNumber);
  }
  const pokePromises = [...randomIds].map(id => fetch(pokeAPIBaseUrl + id))
  const results = await Promise.all(pokePromises);
  return await Promise.all(results.map(res => res.json()));
}

Let's create a displayPokemon function to display the cards. This function will:

sort the pokemon in a random order using this trick - pokemon.sort( _ => Math.random() - 0.5);
iterate through each Pokemon using Array.map()
convert each Pokemon to an HTML template string
call join on the resulting array to generate one HTML string that includes all of the Pokemon cards

const displayPokemon = (pokemon) => {
    pokemon.sort( _ => Math.random() - 0.5);
    const pokemonHTML = pokemon.map(pokemon => {
    return '
            <div class ="card">
                <h2>${pokemon.name}
            </div>
        '
    }).join('');
}

With the HTML string generated, we now need to set it as the innerHTML property of the game div.

const game = document.getElementById('game');

const displayPokemon = (pokemon) => {
    pokemon.sort( _ => Math.random() - 0.5);
    const pokemonHTML = pokemon.map(pokemon => {
    return '
            <div class ="card">
                <h2>${pokemon.name}
            </div>
        '
    }).join('');
  game.innerHTML = pokemonHTML;

}

Now, let's create a resetGame function that will load the Pokemon and then call displayPokemon. Since this is a match game, we'll need two cards for each Pokemon. For this, we can create a new array with two copies of the loadedPokemon using the Spread operator.

const resetGame = async() => {
  game.innerHTML = '';
  const loadedPokemon = await loadPokemon();
  displayPokemon([...loadedPokemon, ...loadedPokemon]);
}

Basic Styling

Let's start to style our app with CSS.

This is optional, but for fun, I downloaded a free Pokemon font. After downloading the Pokemon.TTF and adding it to the root of your directory, you can use it to your CSS.

@font-face {
  font-family: pokemon;
  src: url(pokemon.ttf);
}

Now for the game container. Let's use Flexbox to center the content on the screen as well as a few additional styles.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  font-family: pokemon;
  letter-spacing: 5px;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
}

Now, for the header. We can use Flexbox again here to center the title and the reset button vertically and spread them apart. We can also make the title a bit bigger.

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

h1 {
    font-size: 54px;
}

Styling the Pokemon Cards

First, let's style the game as grid of four by four with a bit of gap between each.

#game {
  display: grid;
  grid-template-columns: repeat(4, 160px);
  grid-template-rows: repeat(4, 160px);
  grid-gap: 10px;
}

Now, for our individual card, we’ll add a box-shadow, border-radius, and position.

We’ll also set the overflow to be hidden.

There's one additional property transform-style that we'll add. This will allow us to make the flipping animations look 3d.

.card {
  box-shadow: 0 3px 10px rgba(200,200,200, 0.9);
  border-radius: 10px;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
}

Animating and Styling the Cards

Let's work on the flip animation to show the front and back of each card.

Inside of the markup for each card, we'll add two containing divs, one for the front, and one for the back.

For the front of the card, I grabbed in image of a Pokeball to display. We'll do this in CSS. You can grab that from the source code if you want to add it.

For the back of the card, we'll display the image of the Pokemon and their name. The back of the card will also have a class of rotated. We'll toggle this class to trigger the animation in JavaScript.

Lastly, we'll add two properties to the container card.

an onclick property that calls a clickCard function (we'll create this shortly)
a custom data property called data-pokename - we'll use this to determine the name of the Pokemon that was clicked

<div class="card" onclick="clickCard(event)" data-pokename="${pokemon.name}">
  <div class="front">
  </div>
  <div class="back rotated">
    <img src="${pokemon.sprites.front_default}" alt="${pokemon.name}" />
    <h2>${pokemon.name}</h2>
  </div>
</div>

Let's style the front of the card in CSS to add the background image.

.front {
  background-image: url("/pokeball.png");
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}

We can also add some general styling that applies to both the front and back of the cards.

Flexbox for centering the content
position of absolute and a height and width set to 100%
transition to make the flip smooth

One interesting property that we will set is backface-visibility property to hidden. This will be used to make sure only the back or the front will show at a time.

.card > .front, .card > .back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  transition: transform 0.5s;
}

Flipping the Card

Let's now create the clickCard function. We'll need to know which card was clicked. We can do this by grabbing a reference to e.currentTarget. We can then find the name of the Pokemon from the custom data property we created.

const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const pokemonName = pokemonCard.dataset.pokename;
}

To flip this card, we need to get the front and back elements of the card. We'll then flip these by toggling the rotated class. Here's a little helper function that uses a query selector to get the front and back elements.

const getFrontAndBackFromCard = (card) => {
  const front = card.querySelector(".front");
  const back = card.querySelector(".back");
  return [front, back]
}

And here's a helper function for toggling the rotated class on an array of elements.

const rotateElements = (elements) => {
  if(typeof elements !== 'object' || !elements.length) return;
  elements.forEach(element => element.classList.toggle('rotated'));
}

From there, we can toggle the front and the back like so.

const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  const pokemonName = pokemonCard.dataset.pokename;
  rotateElements([front, back]);
}

Adding More Game Logic

Now that we can flip the front and back of one card, we need to add extra game logic to take two cards into account. This is core to how memory match games work because we'll need to keep track of two cards at a time.

After a card is clicked, we'll track it by storing the card element in a variable called firstPick. We can then check to see whether or not there is an existing card that has been clicked to determine what to do next. We can also ignore the clicking of a card if it has already been clicked by checking if its front element already has a class of rotated.

const firstPick = null;
...

const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)

  if(front.classList.contains("rotated")) {
    return;
  }
  rotateElements([front, back]);

  if(!firstPick){
    //track the clicked card
    firstPick = pokemonCard;
  }else {
    //check for matches
  }
}

Let's now handle the scenario where the user is clicking the second card. We want to check if that card matches the first clicked card. If so, we leave them flipped. If not, we flip them back. We'll put the flipping part inside of setTimeoutto give it a bit of a delay.

else {
  const firstPokemonName = firstPick.dataset.pokename;
  const secondPokemonName = pokemonCard.dataset.pokename;
  if(firstPokemonName !== secondPokemonName) {
    const [firstFront, firstBack] = getFrontAndBackFromCard(firstPick);
    setTimeout(() => {
        rotateElements([front, back, firstFront, firstBack]);
        firstPick = null;
    }, 500)    
  }
}

And what if the cards do match? Well, let's keep track of how many matches the user has gotten so far with a variable called matches. Then, if that number reaches 8, the user has won. Here's what the full function looks like.

let matches = 0;
...

const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  if(front.classList.contains("rotated")) {
    return;
  }
  isPaused = true;
  rotateElements([front, back]);
  if(!firstPick){
    firstPick = pokemonCard;
  }
  else {
    const secondPokemonName = pokemonCard.dataset.pokename;
    const firstPokemonName = firstPick.dataset.pokename;
    if(firstPokemonName !== secondPokemonName) {
        const [firstFront, firstBack] = getFrontAndBackFromCard(firstPick);
        setTimeout(() => {
            rotateElements([front, back, firstFront, firstBack]);
            firstPick = null;
        }, 500)    
    }else {
        matches++;
        if(matches === 8) {
            console.log("WINNER");
        }
        firstPick = null;
    }
  }
}

Lastly, we can update the resetGame function to appropriately reset the game state. Then, we'll call the resetGame function to start the game.

const resetGame = async() => {
  game.innerHTML = '';
  firstPick = null;
  matches = 0;
  const loadedPokemon = await loadPokemon();  
  displayPokemon([...loadedPokemon, ...loadedPokemon]);
}

resetGame()

Create a Link Shortener App with SvelteKit, TypeScript, and Directus.io

James Q Quick — Wed, 24 Aug 2022 14:31:00 +0000

Let’s build a link shortener app like bit.ly using SvelteKit, TypeScript, and Directus.io as our Headless CMS.

This article is a shortened form of the full tutorial. For more details, watch the full YouTube video. Note that the video uses a previous version of the SvelteKit routing API where this article uses the up-to-date API as of August 24th.

Why Directus.io

There a few reasons to I really like Directus:

open-source
a beautiful UI with lots of customization
nice JavaScript API
can be deployed anywhere

Directus can sit on top of your existing SQL database which means you can add a REST API and/or GraphQL on top of your existing data in minutes! Fun stuff! Let’s get started.

Set-Up

In this case, instead of deploying our own instance of Directus, let’s use the built in managed version. To get started, create a free project and sign up with your Github account.

After that, create a new project. Give it a name and choose the Community Cloud option, which is the free version. Then, choose an empty project to start completely from scratch.

After you’ve created your project and it’s been deployed, click to open it. Note that the admin credentials for the dashboard were sent to the email address that was used to sign up. Use those credentials to sign in.

Creating the Data Model

For this link shortener app, we're going to need to store the short slug and the full url the user should be redirected to as well as the number of times a link has been clicked. You can also track additional UTM parameters. These are often used for tracking impact and clicks associated with a given campaign.

From the dashboard, you create a collection to store your short links.

Name the collection short_link and set the primary key to be auto incremented.

You can add built-in properties to your collection like who created it and when it was last updated. You can also add the ability to sort.

Next up, you’ll need to create the other data fields.

slug - input -> String
url - input -> String
clicks - input -> Integer
utm_source - input -> String
utm_medium - input -> String
utm_campaign - input -> String

Next up, create a few records in the short link collection. I added a short link (/podcast) for my Compressed.fm podcast as an example.

Building the API in Sveltekit

Now to the code. We’re going to use Sveltekit to create an API endpoint that is listening for an incoming request. It will take the slug out of the request, grab the associated record out of Directus, and figure out the right URL to redirect the user to.

Create a new Sveltekit project and call it link-shortener and complete the prompts to select yes to TypeScript, ESLint, and Prettier.

npm create svelte@latest link-shortener

In the terminal, run npm install to install the necessary packages.

With the project created, you’ll need two environment variables.

DIRECTUS_API_TOKEN (static admin token)
DIRECTUS_URL (the URL of your deployed dashboard, ex. https://<app_id>.directus.app)

To get you your API token, go to the user directory, click on our admin user, and scroll down to the token section. Click to create a static token and copy it.

Next, install the dotenv package by running npm install dotenv. This package will take care of grabbing environment variables out of a .env file and making them accessible in the code. Then, create the .env file in the source of your repo and add your two environment variables.

DIRECTUS_URL=https://<your_project>.directus.app
DIRECTUS_API_TOKEN=<your_api_token>

Install the Directus JavaScript SDK from NPM.

npm install @directus/sdk

Create a new folder called util, and add a file named directus.ts. You’ll need to import Directus from the Directus package and the dotenv package like so.``

` import { Directus } from'@directus/sdk'; import 'dotenv/config'; `

Then, create an instance of Directus using the two environment variables and export it.``

import { Directus } from '@directus/sdk';
import 'dotenv/config';

const directusToken = process.env.DIRECTUS_API_TOKEN;
const directusUrl = process.env.DIRECTUS_URL;

export const directus = new Directus(directusUrl, {
    auth: {
        staticToken: directusToken
    }
})

Next, you’ll need to create a dynamic API route in SvelteKit. In the src/routes/[slug] directory, create a new file called +server.ts. Then, scaffold a basic route with the following code which also imports the instance of Directus. Notice the params and setHeaders properties are destructured from the incoming request.

import { directus } from "../utils/directus";
import type { RequestHandler } from '@sveltejs/kit';

export const GET: RequestHandler = async ({ params, setHeaders }) => {
    return new Response('', { status: 302 });
};

Next, you’ll need to get the slug of the URL (the dynamic part). For now, log it to the console for testing.

console.log(params.slug);

Now, test it out. Start your project with the following command.``

` npm run dev `

By default, your server will start at localhost:5173. Try navigating to localhost:5173/podcast, to see if podcast is logged out correctly as the slug.

From there, you’ll want to get the correct link associated with that slug from Directus. You can query Directus for this record by passing a filter like so:``

const slug = params.slug;      
const { data } = await directus.items('short_link').readByQuery({
    filter: {
        slug
    }
})
const shortLink = data[0]

This query will return an array of records, so you’ll need to grab the first item in the data array. After querying the record correctly, you’ll need to update the existing short link and increment its click value.

We’ll use the updateOne method and specify the ID of the record we want to update. The value for the clicks will come from shortLink.clicks + 1.

 await directus.items('short_link').updateOne(shortLink.id, {
    clicks: shortLink.clicks + 1
 });

Now, you can redirect the user to the appropriate destination based on the url property of the short link.

setHeaders({
    location: shortLink.url
});

return new Response('', { status: 302 });

Final Test

In my example, I created a short link (/podcast) for my podcast. When I navigate to localhost:5173/podcast, I correctly get redirected to https://compressed.fm/.

Did yours redirect correctly? Did the clicks property get updated appropriately inside of the Directus dashboard as well?

JavaScript Callbacks Explained in 5 Minutes

James Q Quick — Tue, 09 Aug 2022 15:39:00 +0000

Callbacks are an essential part of understanding JavaScript especially when dealing with asynchronous code. Let's cover the basics of callbacks in about 5 minutes with a handful of examples!

What Are Callback Functions?

One of the more unique aspects of JavaScript is how it handles/treats functions. Functions are considered to be "first-class citizens". This has a couple of different implications.

functions are objects
you can assign a function to a variable
functions can be passed as a parameter to a function

The last bullet point is is in bold because it is essential to the idea of callbacks.

Callback functions are functions that are passed as a parameter to another function.

Basic Callback with setTimeout

One of the first times that JavaScript developers encounter a callback function is when using the setTimeout() function. Here's a simple example.

setTimeout(() => {
  console.log("Hello")
},100)

In this case, we are telling JavaScript to call our callback function after waiting for 100 ms. The setTimeout() function takes two parameters: a callback function and a timeout number in milliseconds. We can make this more obvious by creating a separate function completely instead of using an inline anonymous function.

//this is the callback function
const timeoutCallback = () => {
  console.log("Hello")
}

setTimeout(timeoutCallback, 100)

It works the exact same as the previous snippet, but now we've separated the function out more clearly.

Callbacks in Array Functions

If you've written much JavaScript in the past couple of years, you're probably familiar with array functions like map(), reduce(), filter(), forEach(), etc. Each of these functions leverages callbacks. They each will iterate through an array and call the callback function for each item. Here's an example with forEach().

const names = ['james', 'jess', 'lily', 'sevy']

names.forEach((name) => {
  console.log(name)
});

In this case, the callback function is defined inline and accepts a parameter which is an individual name from the names array. It then logs that name to the console. This example may seem simple, but let's take a look at what's going on behind the scenes.

Building forEach() From Scratch With Callbacks

Building JavaScript functions from scratch has always been an amazing learning exercise for me, so let's give it a try here. Let's create our own version of the forEach() function to get a clearer idea of how callbacks work.

Let's create a new function myForEach() that accepts two parameters, an array and a callback function.

const myForEach = (arr, cb) => {

}

Inside of the function, we can create a for loop to iterate through the array and get access to each element.

const myForEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
  }
}

From there, we'll call the callback function and pass the individual element as a parameter.

const myForEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    cb(element)
  }
}

That's it. That's basically what all of the array functions are doing behind the scenes. Building these kinds of example have always helped my understanding, so hopefully it's helped you as well!

Asynchronous Callback Functions

The array function examples shown above are dealing with synchronous code, so let's look at an example of how it works with asynchronous code. Let's use the built in fetch() function in JavaScript to request data from the FREE PokeAPI.

In this case, we make a fetch request to the PokeAPI for a Pokemon with an id of 56 (do you know which one that is? 👀).

fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
  .then(res => {
    return res.json()
  })
  .then(data => {
    console.log(data)
  })

Fetch returns a promise, so we have to use .then()`to wait for the response to come back. We then convert the data to JSON which returns another promise. Finally, we log out the Pokemon data. We are passing a callback function to each instance.then()`. This is beneficial because we continue to run other code while the request is running instead of waiting the entire time for the data to be returned.

Wrap Up

Callbacks are an essential part of JavaScript. The flow and usage can seem tricky at first, but hopefully it's gotten simpler with a few examples!

My Favorite FREE VS Code Font in 2022 - Install and Setup with FONT LIGATURES!

James Q Quick — Tue, 02 Aug 2022 13:35:00 +0000

VS Code is amazing, but it's pretty boring looking by default. The good news is that it only takes a few minutes to start to customize it and make it look much more fun! In this article, I'm going to show you how to install and setup my favorite FREE VS Code font, Cascadia Code.

Install

To install the font, download the latest ZIP file from the releases pages(2111.01 as of this article). After you've installed the ZIP, extract the files.

Then look for the different font files inside of the ttf folder.

On a Mac, you can double click each one of these files, and choose install.

On Windows, I believe you can right-click on the font files and choose "Install". Here's a link for more details, How to Download and Install Cascadia Code Font for Windows.

Setup in VS Code

Now that you have the font installed, you need to configure VS Code to use it. This will only take a second. Open your VS Code settings by clicking the gear icon in the lower left corner. Then, search for "Font Family" and type in "Cascadia Code".

Now, if you look at your code, it should look much better! Note that you may see a bit of a delay here. You may have to close a code file and open it back up.

Font Ligatures

One of my favorite features of this font is the ability to use Font Ligatures which create custom characters for things like triple equals, arrows, etc. In your settings, search for "Font Ligatures", and click "Edit in settings.json". Then, assign that property in JSON to true.



{
  //...other settings
  "editor.fontLigatures":true
}

Here's a final screenshot of my code!

Note that I think these a really neat, but keep in mind that you'll be sacrificing a bit of readability by using them since many people aren't used to seeing them.

Extra Fonts

I figured I'd give you two additional font options if you're interested.

Fira Code is another great FREE font that also supports font ligatures.

Dank Mono is a PAID font (about $40 USD I think), and is one of the coolest fonts I've ever seen.

Wrap Up

Hope your VS Code is looking a lot more fun now. I'm curious what your favorite VS Code font is? Let me know in this Tweet.

If you'd like more tips for working with VS Code, check out my FREE VS Code Cheat Sheet.

BRAND NEW VS Code Extension for Testing APIs

James Q Quick — Mon, 01 Aug 2022 17:26:00 +0000

Did you know you can test your API endpoints right inside of VS Code? I recently discovered a BRAND NEW VS Code extension for for doing just that from RapidAPI. Let's see how to use it and a few of it's best features!

Installing the Extension

Open the extensions tab inside of VS Code and search for "RapidAPI Client". Then, click install.

You may be asked to reload VS Code, so go ahead and do that.

API Endpoint Setup with Express (optional)

In my demo, I am using a simple Node/Express server to create an endpoint that I can test against. If you already have an endpoint to test, feel free to skip this section. I won't show you how to set up the server from scratch since this isn't a Node/Express tutorial, but here is the sample code for reference.

const express = require('express');
const app = express();

const data = [
    {
        link: "https://www.producthunt.com/posts/react-and-next-js-snippets",
        title: "React and Next.js Snippets - React and Nextjs Snippets with TypeScript!🚀 | Product Hunt by Avneesh",
        imageUrl: "https://ph-files.imgix.net/b17455eb-f82d-4d1a-bd22-68eac9667073.png?auto=format&auto=compress&codec=mozjpeg&cs=strip&w=440&h=220&fit=max&dpr=2",
        description:"This is a Visual Studio Code extension that gives you many React and Next.js snippets with typescript support so you don't have to rewrite the same code over and over again 😉"
    },
    {
        link:"https://egghead.io/blog/drag-to-reorder-list-items-with-framer-motion",
        title: "Drag-to-Reorder List Items with Framer Motion by willjohnsonio",
        imageUrl: "https://egghead.io/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdg3gyk0gu%2Fimage%2Fupload%2Fv1644535367%2Fegghead-next-ebombs%2F2022-will%2Fpink_orbs_hexagon_1.png&w=3840&q=100",
        description: "If you have an application with a list of items, like a to-do list, shopping list, a list of the greatest basketball players, etc. You might want to reorder your list once you have some items added to it."

    }
];

app.get('/content', (req, res) => {
    res.json(data);
});

const port = process.env.PORT || 3000;

app.listen(port, () => {
    console.log(`listening on port ${port}`);
});

In this example, I have a Node/Express server with one endpoint, /content, that returns some JSON data.

In this endpoint, I am returning a sample list of content that has been created from my Learn Build Teach Discord community. We have a slash command enabled in the server for people to share content they've created, so I figured it would make for a good example here.

Join the Learn Build Teach Discord!

Testing the API Request

With the Node/Express server running, I'm now able to test out this endpoint inside of the RapidAPI Client extension by sending a GET request to http://localhost:3000/content. To do so, open the extension using the icon in your sidebar.

Then, click the plus icon to create a new request and populate the address.

Then, click "New Request", and you should see the data returned from your API endpoint.

From here, you can do all the basic things you would expect.

change HTTP methods (GET, POST, PATCH, DELETE, etc.)
add query parameters, headers, etc.
add authentication parameters

In addition to the basics, there are few extra nifty features we should look at!

Generate Code Snippets

This extension gives you a dropdown of languages that you can use to generate code snippets for making requests to the API that you are testing. There is an amazing list of languages here.

JavaScript and TypeScript
Java
C#
Python
lots more!

To generate a JavaScript code snippet, select JavaScript as the language next to the "Request snippet" text in the bottom of the window. I'm choosing to use the Fetch API for my request. Then, you can click the </> button to generate the code snippet.

The resulting code snippet will look like this.

const options = {method: 'GET'};

fetch('http://localhost:3000/content', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

From there, you can copy and paste this snippet into your project. Pretty neat!

Generate TypeScript Types

I've becoming a bigger and bigger fan of TypeScript, so I love to have TypeScript types for any data I pull from an external API. Well, this extension can help here as well. In the lower right hand side, there is a "JSON to" section which gives you a list of type definitions you can export to including TypeScript.

To generate your TypeScript type, choose TypeScript from the dropdown and then click the code icon.

For my data, I get this TypeScript definition.

export interface RootObject {
 description: string;
 imageUrl: string;
 link: string;
 title: string;
}

Wrap Up

I love that VS Code extensions add so much functionality without having to download external tools. If you'd like to learn more about the RapidAPI Client extension and specifically how to use environments, secret credentials, and more, check out the full video.

15 Common Beginner JavaScript Mistakes

James Q Quick — Tue, 19 Jul 2022 19:49:00 +0000

I've taught JavaScript to hundreds of people in-person and thousands online. During my time teaching, I've seen beginner JavaScript developers make the same mistakes over and over....and over again. Here are the 15 most common beginner JavaScript mistakes I've seen.

Find the full source code and examples in this Replit.

1. Not Returning From a Function

If you've ever called a function and gotten a response of undefined, you've probably already seen this mistake. Functions in JavaScript return a value of undefined by default, which means if you don't explicitly return anything with the return keyword, undefined will be the result.

So instead of this.

const getAddedValue = (a, b) => {
 a + b;
}

Make sure you actually return the result.

const getAddedValue = (a, b) => {
  return a + b;
}

2. Loading JavaScript Scripts in HTML Before the DOM Is Loaded

This is the only example that is going to touch a bit on how JavaScript interacts with HTML and the DOM. The key in how they interact is that the timing is important. If you want to reference a DOM element in your JavaScript, that DOM element must have already been loaded on the page. Let's look at an example.

Let's say you have a bit of HTML that also imports a JavaScript file called script.js. Notice the JavaScript file is imported before the h1 element with the id of header.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JavaScript Mistake Demo</title>
</head>
<body>
 <script src="script.js"></script>
 <h1 id="header">Hello world</h1>
</body>

</html>

Then, in your JavaScript, you want to get a reference to the header element and update its text.

const header = document.getElementById('header');
header.innerText = "James is cool!";

In this case, you're going to get an error: Cannot set properties of null (setting 'innerText'). This is because the JavaScript is trying to get a reference to a DOM element that has not been loaded on the page yet.

To fix this, it's common to import your JavaScript at the bottom of your HTML, after all of the HTML elements have been loaded.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JavaScript Mistake Demo</title>
  </head>
  <body>
   <h1 id="header">Hello world</h1>
   <script src="script.js"></script>
  </body>
</html>

This way, the JavaScript file is being loaded after the header element has already been loaded.

It's important to note that there are also other options to explore in terms of importing your JavaScript files in your HTML. What we've shown is a basic example targeted at beginners, but there are additional keywords that you can look into for more details.

3. Reassigning Const Variables

This is such a common mistake that it continues to happen to me almost on a daily basis, so don't feel bad if it does to you. As of ES6 (JavaScript version released in 2015), there are two main ways to declare variables: const and let. These two have, for the most part, replaced the usage of var in modern JavaScript.

The difference between these two is that you cannot reassign const variables while you can with let. Here's a piece of sample code.

const count = 0;
for (let i = 0; i < 10; i++) {
  count = count + i;
}
console.log(count);

In this case you'll get an error: Assignment to constant variable. If you're going to need to reassign a variable, make sure to use let.

let count = 0;
for (let i = 0; i < 10; i++) {
  count = count + i;
}
console.log(count);

For more on const vs let vs var, check out this article from freeCodeCamp.

4. Misunderstanding Variable Scope

Variable scope is a tricky concept for new developers, especially in JavaScript. One common problem I see from learning developers is defining a variable inside of a function and expecting to be able to access that variable outside of the function it is defined in.

That's a pretty generic problem I see. Let's take a look at a more JavaScript specific example though. This goes back to the usage of const and let vs var. I mentioned that var is a more outdated way of declaring variables, but you will still come across it in documentation and source code. Because of that, it's important to understand how scoping differs with it.

If you define a variable using var inside of a for loop, for example, that variable is also accessible after the for loop. Here's a quick example.

for (let i = 0; i < 10; i++) {
  var count = 5;
}
console.log(count);

This code will actually work although it's counter-intuitive to me. The value of count is accessible after the for loop it was defined in. However, this does not work for const and let variables. If defined inside of a for loop, they are only accessible inside of that for loop.

for (let i = 0; i < 10; i++) {
  const count = 5;
}
console.log(count); //error: count is not defined

For more details, here's another great article from freeCodeCamp.

5. Poorly Named Variables

Poorly named variables make code one million times more difficult to read and follow. This is a mistake I've seen every single beginner developer that I've worked with make. Using names like thing1, thing2, and anotherThing give no context as to what the variables are. This makes it much harder for me to help debug someone's code. Let's take a look at an example.

const arr = ["James", "Jess", "Lily", "Sevi"];
let str = "";
for(let i = 0; i < arr.length; i++){
  const tmp = arr[i];
  str += tmp[0];
}
console.log(str);

The variables arr, str, and tmp give no context for what the variables are and what the code is doing. Here's an example that uses naming conventions that add much more context.

const names = ["James", "Jess", "Lily", "Sevi"];
let retVal = "";
for(let i = 0; i < arr.length; i++){
  const name = arr[i];
  retVal += name[0];
}
console.log(retVal);

One of the easiest pieces of advice I have is to name arrays as the pluralized version of the type of info they hold. For example, an array of names should be called names. Then, you can reference an individual items inside of that array as name. I commonly see an array named in the singular form, and it's incredibly confusing.

6. Too Large of Functions

This is a pretty meta mistake, but it's extremely common early on. When developers learn about functions in JavaScript, they often have the tendency to write one function and dump all the code they need into it. However, it's better to start thinking about how to break functions into smaller pieces of code that are more readable, composable, etc. Instead of a code example, here are a few extra links you can read for more.

7. Unnecessary Else Statements

What often gets misunderstood is that a return statement inside of a function actually stops the execution of that function. In other words, after you return inside of a function, no other code inside of that function gets run. Because of that, I often see unnecessary else statements. Here's an example.

const isOdd = (num) => {
  if(num % 2 === 1) {
    return true
  }else {
    return false;
  }
}

Because we already have a return in the if condition, the else is unnecessary. We simplify this code by removing the else condition.

const isOdd = (num) => {
  if(num % 2 === 1) {
    return true
  }
  return false;
}

You can even take this one step further and return the evaluated expression directly since num%2 === 1 returns a boolean.

const isOdd = (num) => {
  return num % 2 === 1;
}

8. Not Short-circuiting Loops

Short-circuiting is another way to improve your for loops. Let's say write a function where you need to determine whether an array of numbers includes an even number. Here's an example of how you might solve that.

const hasEvenNumber = (numbersArr) => {
  let retVal;
  for(let i =0; i< numbersArr.length; i++){
    if(numbersArr[i] % 2 === 0){
      retVal = true;
    }else {
      retVal = false;
    }
  }
  return retVal;
}

In this case, we are iterating through each number and updating a boolean accordingly based on if the number is even. Unfortunately, there's a problem. Let's say the first number is even, but then the next number is odd. Well, the boolean is updated to true for even, then back to false for the odd number.

This would give the incorrect answer since you just want to know if the function has at least one even number (it should return true). In this case, after you see the first even number, you have your answer. You don't need to look anymore. This is where short-circuiting comes into play. After you see one even number, return. If you never see one, return falseat the end.

const hasEvenNumber = (numbersArr) => {
  for(let i =0; i< numbersArr.length; i++){
    if(numbersArr[i] % 2 === 0){
      return true;
    }
  }
  return false;
}

This way, your logic is cleaner and you're avoiding unnecessarily iterating through additional items in the array.

9. Double vs Triple Equals

This is a huge topic of confusion in JavaScript. To start, it's important to know that the double equals compares two values without taking into account their data types. On the flip side, the triple equals compares two values while taking into account their data types.

Since the double equals doesn't take into account the data types of the two values, JavaScript has to have some way to compare them. To do this, JavaScript secretly will cast (convert one data type to another) each value accordingly so they can be compared. This means that a number and string could be considered to be double equal but not triple equal since they are different data types.

const jamesAge = "31";
const jessAge = 31;

console.log(jamesAge == jessAge); //equal
console.log(jamesAge === jessAge); //not equal

General piece of advice: use triple equals by default unless you have a specific reason to use double equals. It's typically safer and helps avoids unintended results. For more details on how these equalities work, check out the MDN docs.

10. Incorrect Object vs Primitive Comparisons

Another similar problem that I see is trying to compare primitives and objects for equality. There are seven primitive values in JavaScript.

number
string
bigint
boolean
undefined
symbol
null

Everything else is represented as an object, and objects and primitives are referenced differently. In JavaScript, primitives are referenced directly by their value. On the other hand, objects more generically reference a space in memory where the value(s) is stored. This leads to some confusion when objects and primitives. Consider this example.

const name1 = "James";
const name2 = "James";
console.log(name1 === name2);

Since these two variables are primitives with the same value they are considered equal, but what if we compare two objects with the same name property like so?

const person1 = {
  name:"James"
}
const person2 = {
  name:"James"
}
console.log(person1 === person2);

In this case, these two objects are not considered equal. This is because the two variables are actually references to different "spaces in memory". Although they look the same, they aren't considered to be equal because of this. If you wanted to compare their equality more appropriately, you could compare their name properties directly.

const person1 = {
  name:"James"
}
const person2 = {
  name:"James"
}
console.log(person1.name === person2.name);

11. Cannot Read Property of Undefined

As I'm writing this, I'm realizing that I didn't necessarily order this in terms of frequency. If I did, this one would rank much higher 🤣.

Anyways, one thing that beginner (and experienced) developers forget to do is validate input parameters to a function. Just because you expect to receive an object, doesn't mean you actually will. Let's look at this function that prints the name property of an object.

const printNamedGreeting = (person) => {
  console.log(person.name)
}

Seems simple enough, but what happens if someone calls this function and doesn't pass anything? Well, you'll get a cannot read property name of undefined error. So, how do you improve on this code?

Well, you'll need to validate that the input you receive matches your expectations. In this case, one simple (although not complete) solution would be to check that the input parameter is not "falsy".

const printNamedGreeting = (person) => {
  if(!person){
    return console.log("Invalid person object")
  }
  console.log(person.name)
}

In this case, if the person parameter is "falsy", we log out an error. Otherwise, we continue to log out the name property.

Keep in mind, this is a quick and simple validation check, but in a real application you'd probably want something more in-depth. You'd want to validate that the input is actually an object (not a string for example) and that it also has a name property.

Lastly, before you say it, yes, you could use TypeScript for this...I know! 😃

12. Mutation with Arrays

Mutation is an interesting concept in JavaScript. In general, mutation occurs when you call a function on a variable that then changes the variable itself in some way. For example, when you call the sort function on an array, the array itself is mutated. However, if you call the map function on an array, the original array remains intact. It is not mutated.

const names = ["Jess", "James", "Sevi", "Lily"];
const copiedNames = [...names]; 
const sortedNames = names.sort();
console.log(names); //["James", "Jess", "Lily", "Sevi"]
console.log(copiedNames); //["Jess", "James", "Sevi", "Lily"]
console.log(sortedNames); //["James", "Jess", "Lily", "Sevi"]

In this example, calling names.sort() will mutate the original names array, meaning the names and sortedNames arrays will look the same. However, the copiedNames array is unaffected since it was a true copy of the original array.

However, if you were to call the map() function on the array, the original names array is unaffected.

const firstLettersArray = names.map( name => name[0]);

The main lesson here is to understand how the functions that you call mutate or not the data you're working with. This should be listed in the documentation for whatever function you're calling.

13. Not Understanding Asynchronous Code

The asynchronous nature of JavaScript is one of the most difficult things to grasp for beginner developers. This isn't the place to go into a full tutorial of asynchronous JavaScript, so I'll leave you with the most common beginner example there is to introduce the topic. In what order will these log statements print out?

console.log("1");
setTimeout(() => {
  console.log("2")
}, 0)
console.log("3");

The answer might surprise if you're new to this. W3 Schools is always a favorite reference for me, so here's their getting start doc for asynchronousJavaScript.

14. Not Handling Errors

The problem with lots of beginner tutorials is that they rarely cover how to handle errors in JavaScript. You only see the best case scenarios for code samples, and not the "what if something goes wrong" code. It's understandable because there's only so much you can cover in a beginner tutorial. At some point, though, it's important to spend some time learning how to appropriately handle errors.

Again, this might not be the spot for an in-depth tutorial on error handling, so I'll leave you with one piece of advice. As you're writing code, ask yourself " what if something goes wrong here". As long as you keep that thought in your head as you're learning, you'll be in a good spot!

15. Not Formatting Code

This is another meta example, but it makes such a big difference. Similar to the variable naming section above, poorly formatted code is incredibly difficult to read. Developers are used to reading code in a standardized and formatted way. Because of that, it becomes seemingly impossible to read code that isn't formatted.

I've experienced this over and over again in teaching. To answer what seems like an easy question, I find myself backtracking through the code to try and decipher what is going on. The lesson here is always spend a bit of time and energy on formatting your code correctly with indentation, spacing, etc. This will make it much easier for you to read as well as anyone else that might read your code.

JavaScript Array Filter Method Practice in 5 Minutes

James Q Quick — Mon, 04 Jan 2021 06:00:00 +0000

JavaScript arrays have some powerful built-in methods that simplify working with them. In this article, let's look at the array filter()method.

Getting Started

This post is part of a series focused on learning JavaScript array methods. You can find the starter code in this repository.

In that repository, there is a worksheet.js file with some sample Star Wars data. So, clone the repository, open up the worksheet.js file, and scroll down to the Filter section. Alternatively, you can copy the sample data into a JavaScript file without cloning if you choose.

Here's the sample data.

const characters = [
    {
        name: 'Luke Skywalker',
        height: 172,
        mass: 77,
        eye_color: 'blue',
        gender: 'male',
    },
    {
        name: 'Darth Vader',
        height: 202,
        mass: 136,
        eye_color: 'yellow',
        gender: 'male',
    },
    {
        name: 'Leia Organa',
        height: 150,
        mass: 49,
        eye_color: 'brown',
        gender: 'female',
    },
    {
        name: 'Anakin Skywalker',
        height: 188,
        mass: 84,
        eye_color: 'blue',
        gender: 'male',
    },
];

Array Filter Overview

The filter method returns a new array with only the items that we wish to be included. We tell the filter method which items to include by passing it a callback function. This callback function accepts one parameter (each item in the array), and then we return a boolean of whether or not that item should be included in the filtered results.

For example, if we have an array of numbers and we only want the numbers that are greater than 50, our filter condition would look like this.

num > 50

So, the entire filter would look like this.

const numbers = [25,50,75];
const lessThan50 = numbers.filter( num => {
  return num > 50;
})

Let's take a look at a few exercises.

1. Get characters with mass greater than 100

Remember we call filter by passing it a callback function that determines whether or not a given item should be filtered or included. In this case, the condition is character.mass > 100. So, our filter will look like this.

const greater100Characters = characters.filter(
    (character) => {
      return character.mass > 100;
    }
);

Since our callback function has a one-line return, we can simplify this arrow function by omitting the return keyword and the function brackets. This syntax implies an implicit return which means that whatever comes after the => will be automatically returned.

const greater100Characters = characters.filter(
    (character) => character.mass > 100
);

2. Get characters with height less than 200

Now, our condition changes a little bit. The condition is character.height < 200.

const shorterCharacters = characters.filter(
    (character) => {
      return character.height < 200;
    }
);

And again, we can use the abbreviated syntax for implicit returns.

const shorterCharacters = characters.filter(
    (character) => character.height < 200
);

3. Get all male characters

Now, we only want to get male characters by checking the gender property of each character.

const maleCharacters = characters.filter(
    (character) => character.gender === 'male'
);

4. Get all female characters

Lastly, we can tweak the previous filter to search for the string "female" as the gender property.

const femaleCharacters = characters.filter(
    (character) => character.gender === 'female'
);

Wrap Up

If you want to learn more about JavaScript, make sure to subscribe on YouTube!

5 Things I've Learned From Creating YouTube Videos

James Q Quick — Tue, 10 Nov 2020 00:00:00 +0000

I've been creating Youtube videos for about 6 years now, and I can confidently say it has changed both my life and my career in a positive way. I've learned so much that I figured it would be worthwhile to share my learnings here!

Get started creating YouTube videos today with the YouTube for Developers eBook!

1. How to Record Edit, and Produce Videos

This first one may seem obvious, but there's a lot more to creating videos than just turning on a camera and talking.

Preparation

There's a lot of preparation that goes into making a good YouTube video. You have to consider several things for each video that you create.

who is the audience
what are the main topics/points to cover
why they should care about the topic

Once you have a good idea of who and what, then you can make more specific notes about the flow of the video. Typically, I keep a bullet point list of items to cover in a specific order.

Hardware/Software

This is where the learning curve really gets steep. There are so many options for both hardware and software that it can be quite intimidating.

hardware - lights, cameras, microphones, etc.

software - recording, editing, creating images/graphics, etc.

Start simple and gradually improve

The biggest thing I've learned in this category is to take it slow. Don't try to over-invest too early. Start with the simplest options first, then improve.

Over the course of 6 years, I've spent over 3k on equipment, but most of that has been in the last year or two. It is easier for me to invest more money into equipment knowing that content creation is something I'm taking seriously.

Want to know what hardware and software I use? Check out my uses page!

Editing

I'm by no means the best video editor, but it's amazing how much I've learned after creating videos for several years. I typically don't do anything too fancy, but I do know how to splice clips together, add text, basic animations, etc. Video editing has become a fun creative outlet for me.

2. How to Be a Better Communicator and Teacher

After creating 200+ videos, there's no way you don't become better at speaking, explaining technical concepts, and being on camera right? Yes, you're absolutely right! In fact, my ability to speak confidently and teach others has been one of the biggest factors in me progressing throughout my career.

My YouTube experience has directly led to promotions, teaching opportunities, and more!

When I worked at FedEx, I made a name for myself by becoming a spokesperson on the tech side to those who weren't developers. Being able to explain technical concepts to non-technical people is an extremely sought after skill. My strong communication skills led to me becoming one of the youngest Architects in FedEx history. I wouldn't have been able to do that without the practice of creating videos.

Teaching

Although you may not think of this naturally, most YouTubers are teachers. They are teaching you how to do something...cooking, woodworking, programming, etc. I've also been fortunate enough to have a few formal teaching opportunities as well. In fact, I'm currently teaching a cohort through the LaunchCode Bootcamp. I can tell you that having recorded so many videos has made it much easier for me to be able to lead and teach a group of 100 aspiring developers.

3. How to Learn New Technologies

Here's an interesting fact. I don't always create videos on topics I already know. Sometimes, I decide on a topic that I'm not comfortable with and use that as an opportunity to explore something new. Here are a few of the technologies I've learned in that manner.

Next.js
Tailwind CSS
Styled Components
Netlify and Serverless Functions
Fauna
Cloudinary
VS Code
Airtable

Learning is a skill that can carry you a long way in your career.

The list could go on and on, but it's weird to think that the people creating YouTube videos aren't necessarily experts in a given topic. More commonly, YouTubers have gotten better and better at learning, so they can turn around and teach you what they've learned...even if they learned it the previous week.

One of the big impacts of my learning process is that I'm well-versed in lots of different technologies. I'm not saying I know them all at an intimate level, but I do have a pretty understanding of the landscape and ecosystem of Web Development.

4. How to Market and Advocate for Yourself

Marketing yourself is not natural for many of us, myself included. It's actually something I've struggled with going back to the beginning of my career at Microsoft. Honestly, I always felt like I had the same amount (or more) impact as other people, but I wasn't as good at advocating for myself. Because of that, I often didn't get the visibility that others did.

You're going to be overlooked in your career if you can't advocate for yourself.

Although it's not natural, marketing and advocating for yourself is just something you have to learn how to do. I know...it's tough but it's true. You're going to be overlooked in your career if you're not able to paint the picture of the impact that you have. Here's one career hack for yourself.

Take notes about the impact that you have throughout the year. That way, at the end of the year, you have a list full of notes to reflect on. Otherwise, it's easy to forget those small wins from several months ago.

Alright, enough of the career soapbox. In the content space, i t's really difficult to gain visibility for your content if you're not sharing it. Again, it's not natural for me to constantly share things like..."Hey, look at this new thing I created", but I've learned to overcome some of that anxiety. Simply put, people don't watch the videos they don't know exist.

There is one additional thing I'd like to add. There are ways to share your content in a (for lack of a better word) less obnoxious way. The key is to provide direct value in your posts. For example, if you're sharing a video on building Tic Tac Toe in JavaScript, maybe you can share a key snippet from your code. This provides a level of genuineness in the post because you are providing value directly in the post.

I'll wrap up this section by saying that I still consider my marketing abilities to be one of my biggest weaknesses. When I compare myself to some of the top content creators in Web Development, this is where I feel I have the most to learn/grow. Although I've gotten better, I still have a long way to go!

Advocating for Your Career

I couldn't help myself...one more small section 😆

Let's talk resumes. Words on a resume are just that...words. They don't actually mean anything because you can literally write whatever you want on a resume. What really means something is having proof of the skills you advertise. YouTube videos have proven the skills I list on my resume.

My YouTube channel is my proof. It is my portfolio.

People will frequently stress how important a strong portfolio is for progressing in your career, and this is very true. The unique thing for me is that YouTube is a big portion of my portfolio. It proves that I can communicate and that I understand Web Development. I strongly believe that creating videos is a very positive step anyone can take in their career.

5. How to Be An Entrepreneur

Being an entrepreneur is a mindset and an incredibly powerful one. There's absolutely nothing wrong with working 9-5 for someone else (I've been doing this my entire career), but it's not the only option.

Being able to make money on your own is an absolute gamechanger. When I made my first bit of money from YouTube ads, I lost my sh*t 🤣 Although it was only a few pennies, it was proof to me that I could make money on my own doing something I love.

Fast forward a couple of years, and now I'm able to generate a consistent stream of additional income from a few different places.

YouTube ads
sponsored YouTube videos
paid content (courses, eBooks, etc.)

At this point, I get daily emails looking to pay me for content; a video, an article, etc. I can't tell you how amazing of a feeling that is. Creating YouTube videos has taught me to value my skills more and more and I look forward to where I take them in the next couple of years.

Wrap Up

I can talk all day about how creating YouTube videos has changed my life, and I believe it can do the same for you. If you're interested in learning how to get started creating YouTube videos, check out the YouTube for Developers eBook!

The Easiest Way to Add Node.js User Authentication

James Q Quick — Wed, 28 Oct 2020 00:00:00 +0000

Adding authentication in your Node.js applications can be a daunting task. Even if you're using Passport.js to do some of the heavy lifting, it's still tricky to incorporate. In this article, let's see how to use the express-openid-connectlibrary to add authentication to your Node.js/Express application 💪 Trust me, this is by far the easiest way I've found to do this!

Project Setup

We are going to be building a Node.js/Express application that has routes for handling login and logout as well as displaying profile information to the user. Let's start from the very beginning. Create a folder on your computer, and then, in the terminal, run npm init -y to set the project up as a JavaScript project.

Then, we'll need to install some dependencies.

express - server framework
dotenv - for working with local environment variables
express-openid-connect - library that handles authentication

npm install express dotenv express-openid-connect

Then, open the folder up with your favorite text editor. Create an app.js file in the root of your directory. Inside of here, add the code to create an express server.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send("hello world");
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`listening on port ${port}`);
});

You can then run the server with node app.js or, if you have nodemon installed, nodemon app.js. You should see a log stating the server is running.

Setup Environment Variables

We are going to need 4 different environment variables to configure the express-openid-connect libary.

ISSUER_BASE_URL - the base url of the issuer (from the authorization server)
CLIENT_ID = unique id for the client (from the authorization server)
BASE_URL- the url of the locally running server (http://localhost:3000 in this case)
SECRET - a random string of at least 32 characters

Since we are running this app locally, we are going to store these environment variables inside of a .env file. Create that file in the root of your repository and paste in the following.

ISSUER_BASE_URL=
CLIENT_ID=
BASE_URL=
SECRET=

Auth0 (Or Alternative) Setup

In this demo, we are going to use Auth0, a 3rd party authentication provider, to do the majority of the behind-the-scenes authentication work. It's important to note that you could use any other 3rd party authentication provider that is OpenID Connect compliant. That means you could easily swap out to a different provider by changing your environment variables.

If you are going to use Auth0, you'll need to sign up for a FREE account if you don't have one already. As part of the process, you will create a tenant, which is basically a container for different applications.

Next, you'll need to create an application and choose Regular Web App.

With your application created, you'll need to update two settings, the callback URL and logout URL. We will be leveraging the OpenID Connect protocol for handling authentication which requires the user to be redirected to the authorization and then back to our application. Because of this, we need to tell Auth0 where the user should be redirected back to.

Don't worry, all of the redirect business gets handled by the authorization server. You don't have to write any of that logic.

Callback URL - http://localhost:3000/callback
Logout URL - http://localhost:3000

Be sure to scroll down and hit save.

Lastly, we need to grab two properties from our Auth0 application, the Domain and the Client ID.

Update Environment Variables Appropriately

Remember, you don't have to use Auth0 to make this work, so if you used another provider, just use those credentials. Now, update the .env file with the appropriate values.

ISSUER_BASE_URL=https://<YOUR_DOMAIN>
CLIENT_ID=<YOUR_CLIENT_ID>
BASE_URL=http://localhost:3000
SECRET=<LONG_RANDOM_STRING>

Lastly, for our environment variables to be accessible while running locally, you need to require the dotenv package and call its config() function like so. Make sure to put this at the top of your file.

require('dotenv').config();

Express Open ID Package Configuration

With all of that setup, let's get down to the auth. We need to auth from the express-openid-connection package.

Then, we configure the auth object using the credentials from our environment variables. Lastly, we use this object as middleware in our Express server. Here's what that looks like.

const { auth } = require('express-openid-connect');

app.use(
    auth({
        authRequired: false,
        auth0Logout: true,
        issuerBaseURL: process.env.ISSUER_BASE_URL,
        baseURL: process.env.BASE_URL,
        clientID: process.env.CLIENT_ID,
        secret: process.env.SECRET,
    })
);

With this middleware in place, we can get access to the logged-in user (if they are logged in) inside of the request parameter of a given endpoint. For example, if we wanted to show whether the user is logged in or not, we could define an index route like so.

app.get('/', (req, res) => {
    res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});

Restart your server and then open your browser to localhost:3000. and you should see "Logged out".

Now, for the magic. Notice, we didn't define any login or logout routes specifically. Well, those are already created for us! Now, you can navigate to localhost:3000/login and follow the login process. After you finish, the home page should now show logged in 🥳

How cool is that?!?!

Creating a Profile Route

Now that you can track a logged-in user, we can create a profile route that will show info about the user. This grabs the information about the logged-in user and returns it as json.

app.get('/profile', (req, res) => {
    res.send(JSON.stringify(req.oidc.user));
});

Restart your server and make sure you are logged in. Then, navigate to localhost:3000/profile.

Protecting Routes

With the profile route, you don't want someone who isn't logged in to be able to access it. Therefore, we need to add some protection to the route to make sure that doesn't happen. Thankfully, the library we are using will help us do just that.

Start by importing the requiresAuthmiddleware from the library.

const { auth, requiresAuth } = require('express-openid-connect');

Then, use this middleware in the profile route like so.

app.get('/profile', requiresAuth(), (req, res) => {
    res.send(JSON.stringify(req.oidc.user));
});

Restart your server and logout by going to localhost:3000/logout. Then try to navigate to the /profile route. You should be redirected to the login page!

Wrap Up

This library did a lot of work for us. Behind the scenes, it created fully functions login and logout routes. It also tracks the user and exposes user info on the req object of each API request. It also provided middleware to be able to easily protect our API routes by forcing a user to login!

Here's the full source code, LESS THAN 30 LINES!

const express = require('express');
const app = express();
require('dotenv').config();
const { auth, requiresAuth } = require('express-openid-connect');

app.use(
    auth({
        authRequired: false,
        auth0Logout: true,
        issuerBaseURL: process.env.ISSUER_BASE_URL,
        baseURL: process.env.BASE_URL,
        clientID: process.env.CLIENT_ID,
        secret: process.env.SECRET,
    })
);

app.get('/', (req, res) => {
    res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});

app.get('/profile', requiresAuth(), (req, res) => {
    res.send(JSON.stringify(req.oidc.user));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`listening on port ${port}`);
});

I've tried several different approaches to handle authentication in Node.js and this is by far the easiest one I've found.

5 Ways to Customize VS Code

James Q Quick — Wed, 21 Oct 2020 00:00:00 +0000

The beauty of Visual Studio Code is how easy it is to customize. I've spent tons of time learning how to optimize VS Code for me, so I wanted to share how you can do it too!

Let's look at 5 different ways you can customize your VS Code.

1. Themes

Themes are probably the first and easiest way to customize your VS Code to look much nicer. There are so many themes out there, but here are a few of my favorites.

You can update your theme by installing it as an extension and then selecting it in the command palette. Search for "theme".

Then, select the theme you want to use.

As you can see, I personally use the Cobalt 2 theme from Wes Bos!

My second favorite is probably Shades of Purplefrom Ahmad Awais.

Lastly, Night Owl from Sarah Drasner is amazing as well!

2. Font

Your font is the second thing that can really make your VS Code stand out. You can change it inside of your settings.

I am currently using theCascadia Code font from Microsoft which is free!

Previously, I used Fira Code which is also free!

Font Ligatures

If you look closely at those screenshots, you might notice there are some characters that seem a bit different. If I zoom in a bit and highlight the arrows, you'll be able to see them now.

I love Font Ligatures so I turned them on as soon as I found out how to do it. You can turn them on in your settings as well.

3. Extensions

We mentioned extensions above for changing how your VS Code looks, but extensions add a lot more than just aesthetics. They provide almost any sort of functionality that you think VS Code might be missing out of the box. Trust me, you can find an extension for almost anything.

Download the Free VS Code Cheat Sheet!

Here are my top 10 extensions for Web Development.

4. Custom Settings

I've shown you a few different settings that you can customize, but there are tons more. The really cool thing is that the changes take place immediately. Here's an example.

My zoom level starts out at 2.

As soon as I update that setting, VS Code immediately displays the changes.

Honestly, I would recommend scrolling through the settings that are available and trying them out. In the meantime, here are a few extra fun ones.

cursor blinking|style|width - customize your cursor
format on save -automatically format your code when you save
editor->rulers - add rulers to your code to keep readable
editor->wordWrap - automatically wrap your code
window->title - customize the title bar at the top of VS Code
editor->minimap->enabled - toggle the minimap on/off

Again, there are so many. Do some searching and see what you find!

5. Keyboard Shortcuts

First off, I love shortcuts! I try to learn as many shortcuts as I can to save myself some time as a developer. In general, the more time you spend on your keyboard and not your mouse, the better off you'll be.

VS Code gives you full customization over your shortcuts. You can override any keyboard shortcuts that you want to.

The real power with these shortcuts comes with the "when" property. You have the ability to customize "when" a shortcut should be used. For example, if you only want a shortcut to be used when you are working in the terminal, you can use that as a condition.

The use of the "when" is extremely powerful and you can find more info on how it works in the full documentation.

If you prefer shortcuts from other editors, you can also download keymap extensions which will allow you to import shortcuts from editors like Atom, Sublime, etc.

Wrap Up

I could go on and on about customizing VS Code, but hopefully that gives you an idea. If you want more videos on VS Code, make sure to check out my VS Code playlist on YouTube!

Build an Authenticated JAMstack App with Next.js, Airtable, Auth0, and Tailwind CSS

James Q Quick — Mon, 05 Oct 2020 00:00:00 +0000

Next.js makes building Full-stack applications in the JAMstack much easier, but there's still a few pieces to figure out. Where are you going to store data? How are you handling authentication? Well, here's how we are going to put it all together.

Next.js for front-end and API routes w/ Serverless Functions
Airtable for storing data
Auth0 for Authentication
Tailwind CSS for styling

In this article, we'll cover an abridged version of this tutorial. Be sure to watch the entire YouTube playlist for a more detailed walkthrough.

TLDR

Setup Next.js project and an Airtable base
Configure Next.js with Tailwind CSS
Integrate Airtable with API routes/serverless functions
Create React Context for tracking TODOs and CRUD operations
Configure authentication with Auth0
Add authentication and authorization to API endpoints

Project Setup

To get started, you'll want to create a starter next application by running the following command.

npx create-next-app [app-name]

Open this code in your text editor.

Configuring Tailwind CSS with Next.js

We are going to use Tailwind CSS for styling our application. Tailwind is a utility-based framework, so we won't write any CSS from scratch. We'll leverage the Tailwind classes for all of our styling.

First, install Tailwind CSS and PostCSS.

npm install --save-dev tailwindcss postcss-preset-env

Next, let's configure Tailwind.

npx tailwind init

Then, create a postcss.config.js file in the root of your project for your PostCSS configuration. Add the following snippet of code.

module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env'],
}

Now that Tailwind and PostCSS are configured, we'll need to use it. Add an index.css into your styles directory and add the following.

@tailwind base;
@tailwind components;
@tailwind utilities;

Import that new css file into your _app.js file. I also added some styles to wrap our application with a container.

import '../styles/index.css';
function MyApp({ Component, pageProps }) {
    return (
      <div className="container mx-auto my-10 max-w-xl">
          <Component {...pageProps} />
      </div>
    );
}

export default MyApp;

Lastly, let's clean up the index.js file to remove the previous styling and boilerplate JSX. I deleted everything except for the head and main tags and added an h1.

import Head from 'next/head';
export default function Home() {

    return (
        <div>
            <Head>
                <title>Authenticated TODO App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
              <h1 className="text-2xl text-center mb-4">My Todos</h1>
            </main>
        </div>
    );
}

Create a Tailwind Navbar

Let's create a basic Navbar for our app. It will have a title on the left and login/logout buttons on the right.

import React from 'react';

export default function Navbar() {
    return (
        <nav className="flex justify-between items-center py-4">
            <p className="text-2xl font-bold text-grey-800">My Todos</p>
            <div className="flex">
                <a
                    href="/api/logout"
                    className=" rounded bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
                >
                    Logout
                </a>
                <a
                    href="/api/login"
                    className="rounded bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
                >
                    Login
                </a>
            </div>
        </nav>
    );
}

Then, import it into your Home page.

import Head from 'next/head';
import Navbar from '../components/Navbar';

export default function Home() {

    return (
        <div>
            <Head>
                <title>Authenticated TODO App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
                <Navbar/>
            </main>
        </div>
    );
}

Airtable Setup and Next.js Environment Variables

You'll need to set up a free account on Airtable. After you've done that, you can create your base (Airtable code word for database). Choose from scratch and give it a name. After it's created, double-click to open it up and update the columns.

description - single-line text
completed - checkbox
userId - single-line text

Rename your table to todo, and add some dummy data. Should look like this in the end.

Next, you'll need to find your Table ID as well as your API key. To do so, visit the Airtable API page and click on your Base. On the documentation page, you'll see the ID of the base and you can find your API by checking the "show API key" box in the top right.

To work with Airtable in Next.js, we are going to use the Airtable JavaScript SDK.

npm install airtable

To configure the Airtable client we will need the base id, API secret, and table name. We'll access these credentials through environment variables.

Environment variables are typically stored in your hosting provider. For example, I often use Netlify to host my sites and can store environment variables there. However, how do you access environment variables when running locally? With Next.js (and many other frameworks), you have the ability to load environment variables from a local .env file. That's what we'll do here.

Create a .env in the root of your project and fill in the Airtable credentials below. We'll get to the Auth0 credentials in a bit.

AIRTABLE_API_KEY=
AIRTABLE_BASE_ID=
AIRTABLE_TABLE_NAME=
AUTH0_DOMAIN=
AUTH0_SECRET=
AUTH0_CLIENT_ID=
COOKIE_SECRET=

Integrate Airtable with Next.js Serverless Functions

For re-using Airtable logic, create a utils directory inside of the api directory and add an Airtable.js file. In the Airtable.js file, we'll configure the Airtable client as well as include a few helper files for minifying the data that comes back from the Airtable API.

const Airtable = require('airtable');
const base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(
    process.env.AIRTABLE_BASE_ID
);

const table = base(process.env.AIRTABLE_TABLE_NAME);

const minifyRecords = (records) => {
    return records.map((record) => getMinifiedRecord(record));
};
const getMinifiedRecord = (record) => {
    if (!record.fields.completed) {
        record.fields.completed = false;
    }
    return {
        id: record.id,
        fields: record.fields,
    };
};

export { table, getMinifiedRecord, minifyRecords };

Now, you'll need CRUD endpoints to interact with Airtable. Create the following files.

pages/api/getTodos.js

import { table, minifyRecords } from './utils/Airtable';

export default async (req, res) => {
    try {
        const records = await table.select({}).firstPage();
        const minifiedRecords = minifyRecords(records);
        res.statusCode = 200;
        res.json(minifiedRecords);
    } catch (err) {
        res.statusCode = 500;
        res.json({ msg: 'Something went wrong' });
    }
};

pages/api/createTodo.js

import { table, minifyRecords } from './utils/Airtable';

export default async (req, res) => {
    const { description } = req.body;
    try {
        const createdRecords = await table.create([
            { fields: { description} },
        ]);
        const createdRecord = {
            id: createdRecords[0].id,
            fields: createdRecords[0].fields,
        };
        res.statusCode = 200;
        res.json(createdRecord);
    } catch (err) {
        console.error(err);
        res.statusCode = 500;
        res.json({ msg: 'Something went wrong' });
    }
};

pages/api/updateTodo.js

import { table, getMinifiedRecord } from './utils/Airtable';
export default async (req, res) => {
    const { id, fields } = req.body;
    try {
        const updatedRecords = await table.update([{ id, fields }]);
        res.statusCode = 200;
        res.json(getMinifiedRecord(updatedRecords[0]));
    } catch (err) {
        console.error(err);
        res.statusCode = 500;
        res.json({ msg: 'Something went wrong' });
    }
};

pages/api/deleteTodo.js

import { table, getMinifiedRecord } from './utils/Airtable';

export default async (req, res) => {
    const { id } = req.body;

    try {
        const deletedRecords = await table.destroy([id]);
        res.statusCode = 200;
        res.json(getMinifiedRecord(deletedRecords[0]));
    } catch (err) {
        console.error(err);
        res.statusCode = 500;
        res.json({ msg: 'Something went wrong' });
    }
};

Display TODOs

With those CRUD API routes in place, we can use the getServerSideProps hook in our home page, to load the list of TODOs and pass them into the Home component.

import Head from 'next/head';
import { table, minifyRecords } from './api/utils/airtable';
import Todo from '../compenents/Todo';
import Navbar from '../components/Navbar';

export default function Home({ initialTodos }) {
    return (
        <div className="max-w-xl m-auto p-2">
            <Head>
                <title>My Todo CRUD App</title>
            </Head>

            <main>
                <Navbar />
                <>
                    <ul>
                        {initialTodos &&
                            initialTodos.map((todo) => (
                                <Todo todo={todo} key={todo.id} />
                            ))}
                    </ul>
                </>
            </main>
        </div>
    );
}

export async function getServerSideProps(context) {
    let todos = await table
        .select({ })
        .firstPage();
    return {
        props: {
            initialTodos: minifyRecords(todos),
        },
    };
}

After the Home component receives the initialTodos in props, it uses Todo components for displaying the todos. Create a components directory inside the root of the project and add a Todo.js file.

export default function Todo({ todo }) {

    return (
        <li className="bg-white flex items-center shadow-lg rounded-lg my-2 py-2 px-4">
            <input
                type="checkbox"
                name="completed"
                id="completed"
                checked={todo.fields.completed}
                className="mr-2 form-checkbox h-5 w-5"
                onChange={()=>{}}
            />
            <p
                className={`flex-1 text-gray-800 ${
                    todo.fields.completed ? 'line-through' : ''
                }`}
            >
                {todo.fields.description}
            </p>
            <button
                type="button"
                className="text-sm bg-red-500 hover:bg-red-600 text-white py-1 px-2 rounded "
                onClick={() => {}}
            >
                Delete
            </button>
        </li>
    );
}

Creating a TODO Context

We'll use React Context to share the state of our TODOs between components. This context will expose the list of TODOs as well as the necessary functions for performing CRUD operations by calling our API endpoints.

It's important to mention that in a scaled production application, the Context API might not be the best fit. If your data is frequently changing, this will cause lots of re-renders in your app.

import { createContext, useState } from 'react';

const TodosContext = createContext();

const TodosProvider = ({ children }) => {
    const [todos, setTodos] = useState([]);

    const refreshTodos = async () => {
        try {
            const res = await fetch('/api/getTodos');
            const latestTodos = await res.json();
            setTodos(latestTodos);
        } catch (err) {
            console.error(err);
        }
    };

    const addTodo = async (description) => {
        try {
            const res = await fetch('/api/createTodo', {
                method: 'POST',
                body: JSON.stringify({ description }),
                headers: { 'Content-Type': 'application/json' },
            });
            const newTodo = await res.json();
            setTodos((prevTodos) => {
                return [newTodo, ...prevTodos];
            });
        } catch (err) {
            console.error(err);
        }
    };

    const updateTodo = async (updatedTodo) => {
        try {
            const res = await fetch('/api/updateTodo', {
                method: 'PUT',
                body: JSON.stringify(updatedTodo),
                headers: { 'Content-Type': 'application/json' },
            });
            await res.json();
            setTodos((prevTodos) => {
                const existingTodos = [...prevTodos];
                const existingTodo = existingTodos.find(
                    (todo) => todo.id === updatedTodo.id
                );
                existingTodo.fields = updatedTodo.fields;
                return existingTodos;
            });
        } catch (err) {
            console.error(err);
        }
    };

    const deleteTodo = async (id) => {
        try {
            await fetch('/api/deleteTodo', {
                method: 'Delete',
                body: JSON.stringify({ id }),
                headers: { 'Content-Type': 'application/json' },
            });

            setTodos((prevTodos) => {
                return prevTodos.filter((todo) => todo.id !== id);
            });
        } catch (err) {
            console.error(err);
        }
    };
    return (
        <TodosContext.Provider
            value={{
                todos,
                setTodos,
                refreshTodos,
                updateTodo,
                deleteTodo,
                addTodo,
            }}
        >
            {children}
        </TodosContext.Provider>
    );
};

export { TodosProvider, TodosContext };

For this context to be available in our application, we need to wrap the content in the _app.js with the TodosProvider.

import '../styles/index.css';
import { TodosProvider } from '../contexts/TodosContext';
function MyApp({ Component, pageProps }) {
    return (
        <TodosProvider>
            <div className="container mx-auto my-10 max-w-xl">
                <Component {...pageProps} />
            </div>
        </TodosProvider>
    );
}

export default MyApp;

From there, we will set the TODOs in the context with the initialTodosfrom the props of the Home component. After setting the TODOs in the context, we'll use the todos from the context to display.

This might seem a bit confusing but it allows us to load our TODOs on the server initially and then track them using React Context.

export default function Home({ initialTodos }) {
    const { todos, setTodos } = useContext(TodosContext);
    useEffect(() => {
        setTodos(initialTodos);
    }, []);

    render(
      ...
          <ul>
              {todos &&
                  todos.map((todo) => (
                      <Todo key={todo.id} todo={todo} />
                  ))}
          </ul>
      ...
    )
}

Now, we can update the todo component to add the hooks for updating and deleting items.

import React, { useContext } from 'react';
import { TodosContext } from '../contexts/TodosContext';
export default function Todo({ todo }) {
    const { updateTodo, deleteTodo } = useContext(TodosContext);

    const handleToggleCompleted = () => {
        const updatedFields = {
            ...todo.fields,
            completed: !todo.fields.completed,
        };
        const updatedTodo = { id: todo.id, fields: updatedFields };
        updateTodo(updatedTodo);
    };
    return (
        <li className="bg-white flex items-center shadow-lg rounded-lg my-2 py-2 px-4">
            <input
                type="checkbox"
                name="completed"
                id="completed"
                checked={todo.fields.completed}
                className="mr-2 form-checkbox h-5 w-5"
                onChange={handleToggleCompleted}
            />
            <p
                className={`flex-1 text-gray-800 ${
                    todo.fields.completed ? 'line-through' : ''
                }`}
            >
                {todo.fields.description}
            </p>
            <button
                type="button"
                className="text-sm bg-red-500 hover:bg-red-600 text-white py-1 px-2 rounded "
                onClick={() => deleteTodo(todo.id)}
            >
                Delete
            </button>
        </li>
    );
}

Setup Authentication with Auth0

For integrating Auth0 into our Next.js app, we'll use the nextjs-auth0 package. Start by installing the package.

npm install @auth0/nextjs-auth0

To complete this series, you'll need to sign up for a free account at Auth0.

Inside of Auth0, you'll need to create a new application and choose Regular Web Application. You'll also need to update two settings. These are callback URLs to routes that we will create in a second.

Allowed Callback URLs : http://localhost:3000/api/callback
Allowed Logout URLs : http://localhost:3000

In the dashboard, copy the Auth0 domain, client id, and secret for your application. Add these credentials to the .env file in your repository. You'll also need to fill in the COOKIE_SECRET property with a random string of at least 32 characters.

Next, we'll create the Auth0 client configuration. Create an auth0.js file in your utils directory with the following.

import { initAuth0 } from '@auth0/nextjs-auth0';

export default initAuth0({
    domain: process.env.AUTH0_DOMAIN,
    clientId: process.env.AUTH0_CLIENT_ID,
    clientSecret: process.env.AUTH0_SECRET,
    scope: 'openid profile',
    redirectUri: 'http://localhost:3000/api/callback',
    postLogoutRedirectUri: 'http://localhost:3000/',
    session: {
        // The secret used to encrypt the cookie.
        cookieSecret: process.env.COOKIE_SECRET,
    },
});

Login Route

Create a login.js file inside of the api directory.

import auth0 from './utils/auth0';

export default async function login(req, res) {
    try {
        await auth0.handleLogin(req, res);
    } catch (error) {
        console.error(error);
        res.status(error.status || 400).end(error.message);
    }
}

Callback Route

Create a callback.js file inside of the api directory.

import auth0 from './utils/auth0';

export default async function callback(req, res) {
    try {
        await auth0.handleCallback(req, res, { redirectTo: '/' });
    } catch (error) {
        console.error(error);
        res.status(error.status || 400).end(error.message);
    }
}

Logout Route

Create a logout.js file inside of the api directory.

import auth0 from './utils/auth0';

export default async function logout(req, res) {
    try {
        await auth0.handleLogout(req, res);
    } catch (error) {
        console.error(error);
        res.status(error.status || 400).end(error.message);
    }
}

Testing Authentication

Since our Navbar already has buttons for logging in and logging out, you can test the authentication process out. After you finish the logging in, however, you won't notice anything different. That's because we aren't using the fact that the user is logged in to display anything different on the front end. Let's change that.

In the index.js, we'll update the getServerSideProps hook to pass the user into props if they are logged in. We grab the user (if logged in) from the Auth0 session.

export async function getServerSideProps(context) {
    const session = await auth0.getSession(context.req);
    let todos = await table.select().firstPage();
    return {
        props: {
            initialTodos: minifyRecords(todos),
            user: session?.user || null,
        },
    };
}

Then, we can grab the user out of the component properties and pass it to the Navbar component.

import Head from 'next/head';
import { table, minifyRecords } from './api/utils/airtable';
import Todo from '../compenents/Todo';
import { useEffect, useContext } from 'react';
import { TodosContext } from '../contexts/TodosContext';
import auth0 from './api/utils/auth0';
import Navbar from '../components/Navbar';

export default function Home({ initialTodos, user }) {
    const { todos, setTodos } = useContext(TodosContext);
    useEffect(() => {
        setTodos(initialTodos);
    }, []);

    return (
        <div className="max-w-xl m-auto p-2">
            <Head>
                <title>My Todo CRUD App</title>
            </Head>

            <main>
                <Navbar user={user} />
               ...
            </main>
        </div>
    );
}

We can then update the Navbar to display the login button when the user is logged out and the logout button when the user is logged in.

import React from 'react';

export default function Navbar({ user }) {
    return (
        <nav className="flex justify-between items-center py-4">
            <p className="text-2xl font-bold text-grey-800">My Todos</p>
            <div className="flex">
                {user && (
                    <a
                        href="/api/logout"
                        className=" rounded bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
                    >
                        Logout
                    </a>
                )}
                {!user && (
                    <a
                        href="/api/login"
                        className="rounded bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
                    >
                        Login
                    </a>
                )}
            </div>
        </nav>
    );
}

Now, if you log in, you should see the logout button showing and visa versa after logging out.

Create the TODO Form with Tailwind

Create a TodoForm.js file in your components directory. I won't cover the details of tailwind here, but you can watch the video for more background. We'll use state here to keep track of the user's input for the description of their todo item.

That said, add the following form to your new component.

import React, { useState } from 'react';

export default function TodoForm() {
    const [todo, setTodo] = useState('');

    return (
        <form className="form my-6">
            <div className="flex flex-col text-sm mb-2">
                <label className="font-bold mb-2 text-gray-800" htmlFor="todo">
                    Todo
                </label>
                <input
                    type="text"
                    name="todo"
                    id="todo"
                    value={todo}
                    onChange={(e) => setTodo(e.target.value)}
                    placeholder="ex. Learn about authentication"
                    className="border border-gray-200 p-2 rounded-lg appearance-none focus:outline-none focus:border-gray-500"
                />
            </div>
            <button
                type="submit"
                className="w-full rounded bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
            >
                Submit
            </button>
        </form>
    );
}

With that in place, we can now leverage our context provider from above. Remember, that provider exposes an addTodo function that we can leverage here. We'll add a handleSubmit function that will prevent the default form submission action and call the addTodo function.

import React, { useState, useContext } from 'react';
import { TodosContext } from '../contexts/TodosContext';

export default function TodoForm() {
    const [todo, setTodo] = useState('');
    const { addTodo } = useContext(TodosContext);

    const handleSubmit = (e) => {
        e.preventDefault();
        addTodo(todo);
        setTodo('');
    };
    return (
        <form className="form my-6" onSubmit={handleSubmit}>
            <div className="flex flex-col text-sm mb-2">
                <label className="font-bold mb-2 text-gray-800" htmlFor="todo">
                    Todo
                </label>
                <input
                    type="text"
                    name="todo"
                    id="todo"
                    value={todo}
                    onChange={(e) => setTodo(e.target.value)}
                    placeholder="ex. Learn about authentication"
                    className="border border-gray-200 p-2 rounded-lg appearance-none focus:outline-none focus:border-gray-500"
                />
            </div>
            <button
                type="submit"
                className="w-full rounded bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
            >
                Submit
            </button>
        </form>
    );
}

Include the new form component in the home page and test it out. I also added a bit of logic to only display the form if the user is logged in. Hopefully, you'll see your new todo item was submitted successfully!

import Head from 'next/head';
import { table, minifyRecords } from './api/utils/airtable';
import Todo from '../compenents/Todo';
import { useEffect, useContext } from 'react';
import { TodosContext } from '../contexts/TodosContext';
import TodoForm from '../compenents/TodoForm';
import auth0 from './api/utils/auth0';
import Navbar from '../components/Navbar';

export default function Home({ initialTodos, user }) {
    const { todos, setTodos } = useContext(TodosContext);
    useEffect(() => {
        setTodos(initialTodos);
    }, []);

    return (
        <div className="max-w-xl m-auto p-2">
            <Head>
                <title>My Todo CRUD App</title>
            </Head>

            <main>
                <Navbar user={user} />
                {user ? (
                    <>
                        <TodoForm />
                        <ul>
                            {todos &&
                                todos.map((todo) => (
                                    <Todo todo={todo} key={todo.id} />
                                ))}
                        </ul>
                    </>
                ) : (
                    <p className="text-center mt-4">
                        Please login to save todos!
                    </p>
                )}
            </main>
        </div>
    );
}

export async function getServerSideProps(context) {
    const session = await auth0.getSession(context.req);
    let todos = await table.select().firstPage();
    return {
        props: {
            initialTodos: minifyRecords(todos),
            user: session?.user || null,
        },
    };
}

Add Authentication to API Routes

With the functionality for adding TODOs in place, we need to associate new records with the logged-in user and verify that a user is logged in before letting them perform CRUD operations. We'll do this by grabbing the user from the Auth0 session similar to how we did in the getServerSideProps hook for the home page.

We then use the sub property of the user and add it as the userId property of the new TODO record in the createTodo.js file.

import { table, minifyRecords } from './utils/Airtable';
import auth0 from './utils/auth0';

export default async (req, res) => {
    const { description } = req.body;
    const { user } = await auth0.getSession(req);
    try {
        const createdRecords = await table.create([
            { fields: { description, userId: user.sub } },
        ]);
        const createdRecord = {
            id: createdRecords[0].id,
            fields: createdRecords[0].fields,
        };
        res.statusCode = 200;
        res.json(createdRecord);
    } catch (err) {
        console.error(err);
        res.statusCode = 500;
        res.json({ msg: 'Something went wrong' });
    }
};

This associates new records with the user, but it doesn't prevent someone who is not logged in from calling this endpoint. Thankfully, the Auth0 library gives us an easy way to protect an endpoint from non logged in users. We accomplish this by wrapping our async function with auth0.requireAuthentication().

import { table, minifyRecords } from './utils/Airtable';
import auth0 from './utils/auth0';

export default auth0.requireAuthentication(async (req, res) => {
    const { description } = req.body;
    const { user } = await auth0.getSession(req);
    ...
});

Note: You should update each of the other CRUD API routes with this protection as well.

Now that a user is being associated with TODO records, let's only show the user the records that they created and not other people's records. We can do this by updating the Airtable query in the home component's getServerSideProps hook.

export async function getServerSideProps(context) {
    const session = await auth0.getSession(context.req);
    let todos = [];
    if (session?.user) {
        todos = await table
            .select({ filterByFormula: `userId = '${session.user.sub}'` })
            .firstPage();
    }
    return {
        props: {
            initialTodos: minifyRecords(todos),
            user: session?.user || null,
        },
    };
}

Protect API Routes with Authorization

One last bit of security we need to add is to make sure that only the owner of a given record is able to update or delete that record. In other words, users shouldn't be able to update or delete records that they did not create. For this, we'll create a custom piece of middleware. Create a middleware directory inside of your api directory. and add an OwnsRecords.js file.

Inside this file, we will start by getting the logged-in user. We can use the same auth0.requireAuthentication() function from above to verify the user is logged in.

import auth0 from '../utils/auth0';
import { table } from '../utils/Airtable';

const ownsRecord = (handler) =>
    auth0.requireAuthentication(async (req, res) => {
      const { user } = await auth0.getSession(req);
});

export default ownsRecord;

This middleware will be used on the update and delete routes. Since both of them require an id property to be included in the body, we can use that id to grab the existing record from the database. Then, we compare the userId property of the existing record to the sub property of the logged-in user to ensure the user owns the record. Lastly, we attach the existing record to the request so that it can be used if necessary in the API route itself.

import auth0 from '../utils/auth0';
import { table } from '../utils/Airtable';

const ownsRecord = (handler) =>
    auth0.requireAuthentication(async (req, res) => {
        const { user } = await auth0.getSession(req);

        const { id } = req.body;

        try {
            const existingRecord = await table.find(id);

            if (!existingRecord || user.sub !== existingRecord.fields.userId) {
                res.statusCode = 404;
                return res.json({ msg: 'Record not found' });
            }

            req.record = existingRecord;
            return handler(req, res);
        } catch (error) {
            console.error(err);
            res.statusCode = 500;
            return res.json({ msg: 'Something went wrong' });
        }
    });

export default ownsRecord;

With the middleware created, now we can wrap our update and delete functions with it.

updateTodo.js

import { table, getMinifiedRecord } from './utils/Airtable';
import auth0 from './utils/auth0';
import OwnsRecord from './middleware/OwnsRecord';
export default OwnsRecord(async (req, res) => {
    const { id, fields } = req.body;
    const { user } = await auth0.getSession(req);

    try {
        const updatedRecords = await table.update([{ id, fields }]);
        res.statusCode = 200;
        res.json(getMinifiedRecord(updatedRecords[0]));
    } catch (err) {
        console.error(err);
        res.statusCode = 500;
        res.json({ msg: 'Something went wrong' });
    }
});

deleteTodo.js

import { table, getMinifiedRecord } from './utils/Airtable';
import auth0 from './utils/auth0';
import OwnsRecord from './middleware/OwnsRecord';

export default OwnsRecord(async (req, res) => {
    const { id } = req.body;
    const { user } = await auth0.getSession(req);

    try {
        const deletedRecords = await table.destroy([id]);
        res.statusCode = 200;
        res.json(getMinifiedRecord(deletedRecords[0]));
    } catch (err) {
        console.error(err);
        res.statusCode = 500;
        res.json({ msg: 'Something went wrong' });
    }
});

Wrap Up

Top 5 Pieces of Advice for Aspiring and Learning Developers

James Q Quick — Tue, 22 Sep 2020 00:00:00 +0000

Since I started my professional career, I’ve worked with countless developers in person and online. I’ve done 1:1 sessions, conference talks, guest lectures, and even taught an 8-month Bootcamp in 2019 (shoutout to the Launch Code crew here in Memphis).

During all of those engagements, there’s one question I’ve been asked over and over again…

“What advice would you give someone looking to become a developer?”

There are lots of variations to that question, but they are all pretty much the same. Here are my top five pieces of advice!

1. Write Code/Build Stuff

Here’s the number one piece of advice you’ve probably already heard, but probably need to hear again. Just build something!

Want to get better at writing code? Write code! Crazy huh?!

First off, tutorials are great. I’ve learned a ton from them, but I learn so much more from pushing myself to build something further on my own. It’s funny how a “simple idea” becomes pretty involved when you start working out the finer details.

Build Something for Yourself

I know what you’re thinking… “but what do I build?”. Well, think about something that would be useful for yourself. I’ve been playing lots of disc golf recently, and I could use an app to help track my scores.

Start with a small idea, build it out, and then expand on it!

This might start out simple, but I could easily build out more advanced features like authentication, saving scores in a database, sharing scores with friends, etc. The cool thing is you’ll be motivated to finish an app that you benefit from.

Building my personal site has been quite an amazing learning experience, and it’s one of the best decisions I’ve ever made.

For more ideas, check out this repository from Florin Pop.

You Need Projects on Your Portfolio

One of the other big benefits of building out a few sample projects is that you can (and should) use them on your portfolio. When you’re looking for your first job, you don’t have the professional experience to show, but you can talk about side projects you’ve worked on.

Building a Harry Potter Quiz app for Android helped me get a job at Microsoft!

During my senior year of college, I interviewed with Microsoft, one of the top tech companies in the world. In 90% of my interviews, I talked about the Harry Potter Quiz app I made for Android. They loved that I was passionate and capable enough to learn on my own to build a working application. These are the kinds of conversations that set you apart from other candidates.

2. Take Your Time and Focus on What You Enjoy

It’s common to jump into programming and quickly feel overwhelmed. Every day, you’ll hear people talking about the hot new library, framework, etc. It’s easy to get lost in the whirlwind and not know where to start or where to go next.

Strive for understanding, not speed!

Wherever you start your journey (JavaScript, Python, HTML, etc.), take your time and strive for understanding before moving on to a new concept. Don’t sweat it if you have to follow the same tutorial ten times before it clicks…we’ve all been there. Embrace the learning process, and don’t let your original expectations (or expectations from others) push you to move too quickly.

Also, as you spend more time programming, pay attention to the things you enjoy and focus on them. I think it’s good to get experience with different aspects of development, but following your interests helps you stay engaged while learning.

Focus on the things that you enjoy the most!

What do you get most excited about? Frontend, backend, design, databases, infrastructure, automation? Don’t be afraid to branch out and gain experience in different areas, but make sure to let yourself enjoy the things you work on.

3. Invest in Yourself

“Invest in yourself” is the single best piece of advice I’ve ever gotten in my career. It may seem obvious, but often we fail to make intentional efforts to improve ourselves. That has to change!

Spend some time thinking about what might be holding you back from getting your first job.

Need to improve your technical skills? Algorithms? Data structures? React? Find tutorials or courses online and practice, practice, practice.

Need to improve your people/career skills? Maybe you need to work on your communication skills? Reach out to a friend and see if they can conduct a mock interview for you.

Want to become a public speaker? Sign up to give your first talk at a local (or virtual) meetup! Meetups are often in need of speakers, and they are a great place to get started! The Code Connector Meetup is always looking for lightning talk speakers.

Whatever it is, search for resources you can use to help improve those areas. Honestly, YouTube is a great start for almost anything! I recently started picking up woodworking on YouTube 💪

Sometimes You Have to Spend Money 💵

Historically, I’m a pretty cheap person, so financially investing in myself is tough. I’m always looking for the cheapest option, but I’ve learned in most cases you get what you pay for. Sometimes, you just have to spend the money on the resources you need. Here are a few things I’ve spent money on.

tons of courses (from Udemy, Wes Bos, Level Up Tuts, Frontend Masters, etc.)
new laptop, monitors, hard drives
recording equipment for streaming and creating videos

I know many of us don’t have a lot of disposable income (my wife and I follow a pretty strict budget ourselves), so don’t think you have to spend a lot of money.

Maybe one month you take $10 to buy a course on Udemy…

Maybe you save $10/month for a few months to buy a more expensive course…

Maybe find a freelance project for $1000 and use that for a new computer…

Overall, if you have the means, don’t be afraid to pay for the resources you need to improve yourself and your career.

4. Create Your Own Content

My personal motto is Learn Build Teach.

learn constantly (hence the many courses I’ve purchased and taken)
build projects based on what you learn
teach other people how to do it too

I built a Discord Server around the philosophy of Learn Build Teach. I'd love to have you there! Join the Discord.

One of the biggest benefits of teaching others is it helps reinforce the things you know (or thought you knew). Trying to explain technical concepts helps you gauge how well you actually understand a topic yourself.

Overall, teaching helps you learn…seems ironic but it’s true!

Keep in mind that teaching doesn’t always mean standing in front of a classroom. Teaching means creating content that people can learn from, and this can have many different forms.

tweeting a code snippet
writing a blog article
creating a YouTube video
doing a live stream on Twitch

Here are a few of the benefits of creating content…

Content Improves Your Resume

I mentioned earlier that side projects are great to have on your resume. Well, so are blog posts, videos, etc. As I said, being able to explain technical concepts in an understandable way is a skill. If I was looking to hire someone, the ability to help teach others on my team would be an attractive characteristic.

Teaching is one of the big ways I made a name for myself during my career at FedEx. My ability to teach others in my organization helped me establish myself as a leader in technology.

Build a Brand

Creating content can also help build your brand. If you start to make a name for yourself by creating JavaScript content, for example, you never what that brand can lead to.

Gaining more followers on Twitter, YouTube, etc. might seem vain, but practically speaking it can be very useful. The more people that know about your content and your brand, the more people that reach out to you about job opportunities. Again, I’d rather hire someone with technical skills as well as the ability to communicate effectively and teach others.

Document for Yourself as well as Others

You can also use the content as a resource for yourself. By documenting the things you learn in a video or blog post, you create a reference for yourself going forward. If you ever forget how to do X in the future, go back and read your post.

I’ve come across my previous articles/videos many times in the past when looking for an answer to a specific problem

Create Content to Learn Content

I use creating content as a way to force myself to learn new things. For instance, I’m currently learning more about Next.js. Well, if I give myself a deadline for creating a video in the next two weeks, I’ve now given myself a reason to learn. By forcing myself to create videos on different topics, I learn more and more.

I've created 100s of videos on YouTube, and I learn something new with each one!

5. Invest in the Community

After teaching an 8-month Bootcamp, I realized that the most successful students were the ones who invested in each other. They were the ones who asked the most questions, who shared the things they learned, came out to meetups (pre-COVID), etc.

As your learning and looking to build a new career, you need people in your circle that you can trust.

You need people who won’t judge when you ask a question you’re embarrassed to ask.

You need people that you can learn from.

You need people that you can teach something to (benefits of teaching above ☝️).

I built a Discord for the community around my motto, Learn Build Teach. Join the Discord.

Honestly, you just need something to feel like you’re a part of something.

You need to know it’s not just you.

You need to know that you’re not the only that faces imposter syndrome.

You need to know everyone else is constantly learning as well.

You need to know experienced developers Google the shit out of everything too.

Connecting with other people in different stages of their careers gives you some perspective and (hopefully) a sense of belonging, and that’s a pretty powerful thing.

Wrap Up

I love programming because it’s simultaneously one of the easiest and difficult careers to get into. It’s “easy” because there are so many resources. You don’t need a 4-year degree (at many companies). You can literally change careers from watching FREE YouTube videos and building out a nice portfolio.

At the same time, learning to program is just difficult, especially when you try to do it in isolation. You need a community that you trust to support you. Once you find your rhythm of learning and sharing, you’ll be in a good spot!

As you're learning I'd love to hear about what you're working on. Feel free to share with me on Twitter!