Forem: Theran Brigowatz

Add AR and 3D Models to any Site in Minutes

Theran Brigowatz — Fri, 09 Oct 2020 07:09:54 +0000

Adding a 3D model is super easy and can be added to any project in just a few minutes. This is provided that you have a 3D model. In addition, you can also utilize AR on mobile devices with just a few extra steps. Below I'll explain how to get and running in no time.

One awesome element built by Google is model viewer which can be found at https://modelviewer.dev. It is built upon Three.js and allows you to easily add 3D WebGL models to any page. Though the instructions are on the site.

I'll offer a brief rundown of my experience with it and hopefully give you some pointers to not get stuck where I did.

It can either be imported with a CDN in your header with:

<script
  type="module"
  src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

Or it can be done by using an NPM package by:

npm i @google/model-viewer

You can then import it via:

import '@google/model-viewer';

Google recommends using the CDN as the project is still a work in progress and new features are being added quite often. It ensures you have the latest version always running.

One issue that I ran into with imports is that when using a SSR framework like Next.js you might have to use dynamic imports for the model viewer components. Make sure to set them to SSR false for these type of frameworks.

Once you have this all imported you can simply add a model-viewer tag and be on your way.

  <model-viewer
    src={../Link/To/Model.gltf}
    ios-src={../Link/To/Model.usdz}
    alt='model name'
    ar
    loading='lazy'
    camera-controls
    poster={../Link/To/Image.png}
    autoplay>
  </model-viewer>

In this case this would be basic animated model that starts the animation automatically. You can go through the docs on https://modelviewer.dev, for a more detailed explanation.

You can use either local models, or ones hosted on something like S3. One problem that I ran into was using files on Firebase Storage. They sometimes have CORS problems, and it is an open issue on GitHub.

You will need at GLTF or GLB model in order for this to work. If you have another model type, there are converters that can be found online to get the right model type working.

This will also allow you to use AR on Android as it will open up in Android's Scene Viewer. If you want AR on iOS you will also need a second model type called USDZ in order to use AR Quick Look.

You will also need to find a converter for using this type. Apple does have a program that is free to download and will do this for you if you have an iOS developer account. It is called Reality Converter.

If you are not using AR, you can disregard the ar and ios-src attributes in the code above.

It is really that easy to get it up and running. The hard part is making a cool model to go into your site. That part I will leave up to you.

Refactoring My Old Boot Camp Algorithms from Years Ago

Theran Brigowatz — Tue, 29 Sep 2020 05:29:11 +0000

Have you have ever gone back to the first code you wrote and gave it a look?

It's kind of like looking at your middle school year book photos. It's still you, but kind of younger, less advanced, and more awkward version. Old code is kind of the puka shell necklace of those photos.

However, unlike those photos that are engraved into the annals of history, with code we have the opportunity to go back and optimize it. We can improve upon our past selves, and better yet, learn from it. I decided to go back to some JavaScript exercises I did when I first started to learn in my boot camp. They are just basic algorithms like reverse a string, but I wanted to see what I could do to improve them and see how I would optimize them as a more seasoned developer.

Check out the old spaghetti, and see how we could improve this outdated code.

If you have any other ways that you would refactor them, leave it in the comments below. I would like to see how others would optimize my code as well.

1 - isVowel

Algorithm

// Define a function named isVowel that takes one argument
//    letter (string)
//
// If the letter is a vowel
//    Return true
// Otherwise
//    Return false
//
// Treat 'y' as a consonant.

Original

const isVowel = (letter) => {
  var checkLetter = letter.toUpperCase();
  switch (checkLetter) {
    case 'A':
      return true;
      break;
    case 'E':
      return true;
      break;
    case 'I':
      return true;
      break;
    case 'O':
      return true;
      break;
    case 'U':
      return true;
      break;
    default:
      return false;
      break;
  }
};

Refactor

The absolute horror, a switch statement. They of course have their place, but in this case, this problem could definitely be checked with a regex. I know that I always have to look up the syntax, and I did for this one too, but the key here is knowing that there is a better and more efficient way of running your code. Looking up syntax is fine, knowing what to look for is the key.

const isVowel = (letter) => {
  return /^[aeiou]$/i.test(letter);
};

Or if you are opposed to regex, and don't want to look up the syntax, think about how you would break this down into an array, or string method. For example we could put our testable letters into an array, then we just need to check if that value is found in the array.

const isVowel = (letter) => {
  return ['a', 'e', 'i', 'o', 'u'].some((vowel) => vowel === letter);
};

2- largestOfThree

Algorithm

// Define a function named largestOfThree which takes three arguments
//    value1 (number)
//    value2 (number)
//    value3 (number)
//
// Return the largest argument by value

Original

const largestOfThree = (value1, value2, value3) => {
  if (value1 > value2 && value1 > value3) {
    return value1;
  } else if (value2 > value1 && value2 > value3) {
    return value2;
  } else {
    return value3;
  }
};

Refactor

Much like above, I thought that a chain of if and if else statements was the way to go. And who can blame old me, it worked, just like my middle school Birkenstocks. But we can do better.

The main problem with my old code is that it just uses the numbers and I have to do all of the comparisons myself. I had to think through every case, rather than letting the language and programming do the work for me.

Also when refactoring we should think about if our functions have to scale. In this case what if we have four values, or 4000. I don't think 4000 else if statements would be ideal. Let JavaScript do the work for you. Often times when we start, we aren't familiar with the vast array of methods (pun intended) that we can take advantage of. Often research will yield better results than a series of if else statements.

const largestOfThree = (value1, value2, value3) => {
  return Math.max(value1, value2, value3);
};

2- longestOfThree

Algorithm

//Define a function named longestOfThree which takes three arguments
//    value1 (string)
//    value2 (string)
//    value3 (string)
//
// Return the longest argument by length

Original

const longestOfThree = (value1, value2, value3) => {
  if (value1.length > value2.length && value1.length > value3.length) {
    return value1;
  } else if (value2.length > value1.length && value2.length > value3.length) {
    return value2;
  } else {
    return value3;
  }
};

Refactor

In this case, my if else statement might not be the worst thing.

However, again we have a problem with scale. Easy to work with for a small sample size, but it doesn't scale. What if I have hundreds of these.

I need to find a way to make it more efficient and allow for more input. In this case an array of objects would probably make more sense. Though to solve this specific algorithm, it would not be shorter, it would allow for more flexibility and future proof as my data set grows.

const longestOfThree = (...arguments) => {
  const createObject = (str) => {
    return { string: str, strLength: str.length };
  };
  const sortedArguments = arguments
    .map((arg) => createObject(arg))
    .sort((a, b) => b.strLength - a.strLength);
  return sortedArguments[0].string;
};

In this case, it is the same length, but it does scale better if we add a more arguments. We have refactored it to allow for any number of arguments, rather than just the three that we were taking in. In addition, but iterating over the items we can scale this and get rid of the if and if else statements. There are definitely other methods that we could apply to refactor this even further. We could have the return chain with the 0 array index and the string property, but sometimes it is better to have your code broken up to be more readable for other developers.

When refactoring your code you should be thinking about three things. It should be a simpler way of doing the same action, easier to read and convey the message of your code, and it should scale for growth. Don't be afraid to go back. Look at what you have learned, and apply it to see how you would change your first code.

We're not still rocking the bootcut jeans, so it is never too late to change.

Tailwind.css: The Awesome and Annoying

Theran Brigowatz — Tue, 22 Sep 2020 01:31:48 +0000

"Oh great. Another CSS framework. Who needs one when I just write all of my CSS from scratch?"

This was the first thought that went through my head when I was recommended to checkout Tailwind by a colleague.

After all I had been writing all of my own CSS without a need for Bootstrap grid, and I had mastered StyledComponents. But I decided to check it out for a new project, and I ended up liking it quite a bit.

It has been about three months since I started using Tailwind.css in my projects. Clearly, if I have been sticking with it for this long, I definitely see the value in it, but there are a few pain points that go along with it.

Below are some of the great parts, and the weaknesses that I have found in my time using it.

Awesome Sauce - What's Great

Fewer Ambiguous Class Names

Tailwind helps to eliminate the need for ambiguous class names like paragraph-container. Tailwind uses clear declarative naming for the classes, so what you see is what you get. It gets to be time consuming having to look back through my css in order to see what css was actually applied to the classes. Rather, Tailwind uses a system like border-2 border-blue rounded-lg bg-green. From that you can pretty much see that there is a 2 px blue border that is rounded and has a green background.

Some scoff at the idea of long class names and that they clutter up the html. Plus don't even start on the no CSS in JS crowd. But I find it actually gives me a better development experience to not have to look back and forth between files. I can see the styling that is already present in that tag. I can easily see what classes I am applying, and what styling is taking place, rather than having to guess what the difference is between responsive-paragraph-container vs. paragraph-container.

Plus if you really dislike the long names. You can still apply all of the styles in your css file the old fashioned way.

You can keep paragraph-container as:

.paragraph-container {
  @apply border-2 border-blue rounded-lg bg-green;
}

This is also the way that you would build out reusable styling classes for components as well.

Both naming approaches work for whatever style you prefer. One of the callings of good code is that it is explicit and expressive in it's meaning. Tailwind allows you to take whichever approach you thing accomplishes this.

Standardization and Theming

Working with designers and building out a design system is one of my favorite parts of application building. But, creating standards and having to build out variables is not. Luckily Tailwind makes this easy. You can use the defaults p-4 lg:p-32, or use custom variables, so you can create p-mobile lg:p-desktop.

Coloring is a dream as you can create your own color palette and access it an any color element. You can overwrite their colors, or extend it with your own.

Working with widths is great if you are using percentages, as it uses a numerator/denominator system based upon 2, 3, 4, 5, 6 and 12. So you can enter in w-8/12. For fixed widths I have tended to use custom variables, as the Tailwind ones are based upon REM Units, and is something I touch on later.

Write Better CSS and Classes

Using Tailwind has gotten me to write better classes and better CSS overall. I remember first learning bootstrap and wondering why you had to include btn and btn-red. However, using Tailwind had gotten me to realize why it is important to build out your CSS like you do components in React. Take a look at the following example:

.btn {
  @apply px-8 py-2 text-lg rounded-lg shadow-sm;
}

.btn:hover {
  @apply shadow-lg;
}

.btn-orange {
  @apply text-black bg-orange;
}

.btn-orange:hover {
  @apply bg-orange-700;
}

.btn-green {
  @apply text-white bg-green-300;
}

.btn-green:hover {
  @apply bg-green-700;
}

This has lead me to really adopt what they call a utility first design pattern. Looking at the above code, my .btn class defines the shape and size of my buttons. Then the color classes are just doing that, only applying color. This allows me to focus on those as two separate aspects. Following this pattern has made me write cleaner and more expressive CSS. It is a pattern I have tried to follow whether using Tailwind or just vanilla CSS.

This is all to say, that this pattern was not invented by Tailwind, but their terrific documentation makes it clear why you should practice it.

Mobile Responsive First

If you are like me I can never remember how to properly write a media query. Is it max-width or min-width? What are the break points? Luckily, tailwind makes this super easy. You start with the mobile styling as your base, and then you add on queries to fit larger screens.

So if you start with flex flex-col lg:grid lg:grid-cols-3, you now have flexbox columns on mobile, while grid for your desktop views. I honestly couldn't tell you the last time I wrote a media query. This is probably my main selling point on Tailwind so far. Any class can be added to your breakpoints.

Community

The Tailwind community is really growing, and something that I really enjoy. There are so many resources that help you to build beautiful components.

This repo has tons of resources:

Awesome TailwindCSS

The Meh - Some Pain Points

Not everything is perfect. Here are some of the pain points I have run into. I realize that all of these have workarounds, but they are things I would fix in a perfect world.

Units

I talked about this one before, in that Tailwind uses REM units. I know that they are based up a math formula of unit / 4 = rem size, but it is something I constantly have to keep in mind a calculate in my head. It is also frustrating if you are working with a design team that gives things in pixels. Ends up with a lot of math.

Plus for fixed width items you can only go up to about 16 REM. This is about 256 pixels. I realize that there is no way for Tailwind to include every pixel width, and that it makes sense to only cover most use cases, but I have found it to be a pain, if you do have fixed width items, and you have to define those custom widths.

Luckily most design these days eschews these ideas, and focuses on responsive design, so it is not as big of an issue as the past.

Limited Options on Some CSS

I realize that typically height is not as often defined as it is for width, but it would be nice to have the option. They only have heights for the fixed REM heights, auto, 100%, and 100vh. It would be nice to have those percentages in there like they are for width, as an option for when they are needed.

This also applies to grid. You can only have grid columns or rows that are equal width. If you want a custom grid, it needs to defined. I realize that it again impossible to add everything needed and defined, but it is an issue I have run into. Luckily, I use Grid less these days, and flexbox more.

Webkit and Unpopular CSS

Some of my specific SVG CSS properties that I needed on a recent project were not available in Tailwind, which means that it ends up going into the custom CSS file. This also goes along for things that are -webkit as these can not be specified. If you need to develop for iOS Safari, this ends up becoming a big pain point. But that is probably more of an issue with Safari that Tailwind.

These again are not properties used by every developer, but they are issues I have run into, and something that others might want to be aware of for certain development cases.

Conclusion

I really thought that as I was planning this out, that I would have a balanced article that fairly weighed out the pros and cons. What I realized as I got to the end, is that all of my negatives were not really that big of an issue. They are really relatively minor things, and all can be worked around by extending it to fit my specific design needs.

Overall Tailwind has made my CSS more organized, expressive, and faster. I think it is definitely an approach I would test out if you haven't done so already.

How to Work with Immutable Data in JavaScript

Theran Brigowatz — Mon, 14 Sep 2020 10:49:57 +0000

Immutability sounds like one of those things that is only found on coding interviews or multiple choice development quizzes. However, it is actually quite fundamental to the basics of programming. It is something that you might be putting into practice without even knowing. But today, we are going to dive into what immutability is in JavaScript and how you can put it into practice.

First, what is immutability? It is one where the functions or methods do not change the original values which were put into it.

The Basics

Take for example an array:

const characters = ['Big Bird', 'Grover', 'Elmo', 'Oscar'];

Pop

Let's say that Oscar leaves the group. The most common method for removing this would be to use the pop method.

characters.pop();
console.log(characters); // ['Big Bird', 'Grover', 'Elmo']

Now this might be great and all is well, but now what if I want to compare the old data to the new data. I want to see who is missing from the list. Now that characters has been reassigned, I can't do so. That is why it is better to work with data that is immutable. A cleaner method would to be to create a new array using the the slice method.

const newCharacters = characters.slice(0, -1);

//or

const newCharacters = characters.slice(0, characters.length - 1);

We get the same results, but now have access to both the old and new data. We also avoid side effects where we might send the wrong modified data through functions resulting in a whole host of problems. Working with immutable data is like making a copy of important documents to hand in to others, rather than giving them the original. It is safer in the long run.

Shift

If we want to remove the first character just modify your slice method.

const newCharacters = characters.slice(0, 1);

Push

Let's say that we want to add another member to the group. Instead of using push, you can use the spread operator.

const newCharacters = [...characters, 'Cookie Monster'];

Unshift

To add a new member at the beginning, we need to simply add the spread operator at the end.

const newCharacters = ['Cookie Monster', ...characters];

Other Methods

One of the things that you can see here is that a pattern is developing, we are assigning our data to new variables. Although from a performance standpoint this is a bit more expensive. The benefits of more well-defined code and fewer opportunities for side effects, outweighs that modest decrease in performance.

Let's take the following more complex example.

const characters = [
  { name: 'Big Bird', color: 'yellow', address: 'Sesame Street' },
  { name: 'Grover', color: 'blue', address: 'unknown' },
  { name: 'Elmo', color: 'red', address: 'unknown' },
  { name: 'Oscar', color: 'green', address: 'Sesame Street' },
];

If we want to update the property for each item in the array, we might want to use a loop. In this case we could use a good old fashion forEach on it.

characters.forEach((character) => {
  character.address = 'Sesame Street';
});

But now what if we want to compare the characters who have moved, to those who have stayed in the same place. This is why it is typically safer to map your data.

Map

const updatedAddressCharacters = characters.map((character) => {
  return { ...character, address: 'Sesame Street' };
});

The same goes if we want to filter out items from the original list.

Filter

const unknownAddressesCharacters = characters.filter((character) => {
  return character.address === 'unknown';
});

In both of these cases we are assigning our modified data to new arrays, rather than overwriting the old data. Looking over this we are gaining several advantages.

There are other methods that can be used much in the same way. Often this same method is done with sort, reverse, or reduce. Getting used to this pattern is one that will make your code cleaner and have several noticeable benefits:

No Side Effects - In these simple examples we are doing relatively simple actions, however if you are doing calculations or other complex functions before returning, in a forEach loop you have the possibility of overwriting data, and leading to side effects in other functions that also might rely on that original array.
Reusable Code - Your code is more reusable. Working with the immutable data, means that you can apply several methods to the original, and always have a reference back to it. You always have that original reference point. This includes chaining together and combining methods and functions with these new and old data sources.
Easy Data Comparisons - By having two different data sets it is much easier to parse differences in your data. This is something that is very handy, especially as your applications and data sets grow.
Explicit Code - Running a forEach loop over an array, does not really explain what is happening. However, by reassigning our data to new variables, we keep the original, while and have a new variable that clearly conveys it's meaning. Remember that good code clearly conveys what is happening, especially when working in teams.

Working with immutable data is something that has greatly benefited my React and Vanilla JavaScript code. Hopefully some of this can help you as well.

Basics of JavaScript Object and Array Destructuring

Theran Brigowatz — Mon, 07 Sep 2020 05:29:53 +0000

Object destructuring is one of those terms that sounds a lot fancier than what it really is. Although from a performance side, in most applications or projects, it won't make a noticeable difference, it will make a huge difference in you code from a readability point of view. When working in a team this is extremely important, as your code should convey clear meaning and flow.

Object Destructuring

The basics of destructuring are that you can pull apart an object, or array, and use the parts as their own variables. Let's look at a basic example.

// Basic javascript Object
const muppet = {
  name: 'Grover',
  color: 'blue',
  address: '123 Sesame Street',
  nicknames: ['Super Grover', 'The Blue Monster'],
};

const { name, color } = muppet;

console.log(name); // Grover
console.log(color); // blue

Rather than having to use muppet.name or muppet.color you now simply have them as variables name and color. You can continue to access the other properties like address by simply adding it to your destructuring statement. You can start to see how this makes your code more readable.

For a simple object like the one above it might not be the biggest deal to destructure your object. After all we are only going one level deep.

But let's say we have more complicated data returned from an API. That is where this really comes in handy.

Let's say we have following data returned from an API and I want to print out a string with the score:

const game = {
  location: 'Minneapolis',
  attendance: 15000,
  teams: {
    home: { homeName: 'Minnesota Golden Gophers', homePoints: 110 },
    away: { awayName: 'Wisconsin Badgers', awayPoints: 50 },
  },
};

To print the score we need:

const scoreString = `${game.teams.home.homePoints} to ${game.teams.away.awayPoints}`;

Not the easiest to read.

Now let's say that we need the home and away team data. Access that data in the traditional object notation methods is not very DRY. Rather than accessing this via game.teams.home.homeName or game.team.away.awayPoints we can destructure it.

const { homeName, homePoints } = game.teams.home;
const { awayName, awayPoints } = game.teams.away;

const scoreString = `${homePoints} to ${awayPoints}`;

Not only did we shorten our scoreString, but we also have access to all of the other variables as we need them. In this example I showed destructuring with all of the variables pulled out. In reality you only need to destructure the variables that are needed.

Order does not matter, but the name does as it is accessing the name key. To rename them you would do that in the following way:

const { homeName: hName, homePoints: hPoints } = game.teams.home;

Your variables are now available as hName and hPoints. Though this is not a great use case in this example, it gives you an idea of how to use it, especially once you start to work with more complex data structures.

You might already be doing this when you write functions. If you pass in a object as parameters, you can destructure the parameters:

Take the following:

const muppet = {
  name: 'Grover',
  color: 'blue',
  address: '123 Sesame Street',
  nicknames: ['Super Grover', 'The Blue Monster'],
};

function printMuppetInformation(muppet) {
  console.log(`${muppet.name} lives at ${muppet.address}.`);
}

Now with destructuring we can make the syntax more readable:

function printMuppetInformation({ name, address }) {
  console.log(`${name} lives at ${address}.`);
}

Arrays

The same principle can also be applied to arrays if needed. Though I would not recommend doing so with large arrays.

Here is a slightly different game structure:

const game = {
  location: 'Minneapolis',
  attendance: 15000,
  teams: [
    { name: 'Minnesota Golden Gophers', points: 110 },
    { name: 'Wisconsin Badgers', points: 50 },
  ],
};

Now we can use array destructuring:

const [home, away] = game.teams;

This differs a bit from array destructuring in that you can assign any name to the variables in array destructuring, but the order is important as the first item will access the [0] item, the second will access [1] and so on.

Array destructuring is something not typically done with long arrays of an unknown length. However if you do have a long array and only want certain items at a known index you can use the following syntax.

const items = [1, 2, 3, 4, 5, 6];
const [item1, item2, ...remainingItems] = items;

console.log(item1); // 1
console.log(remainingItems); // [3,4,5,6]

This usage is not as common, but it does have use cases in certain situations.

There is a lot more to touch on like destructuring assignments and mixed destructuring, but it gives you a basic blueprint for more readable javascript.

Server Side Authentication with NextJS and Firebase

Theran Brigowatz — Wed, 02 Sep 2020 00:33:41 +0000

Overview

Finding a good way to add user authorization to a Firebase and Next.js app was not the easiest out there to find. So I thought that I would write a tutorial that explains the process that I have pieced together, in the hopes that it could help others out as well.

The beauty in this method is all of your Firebase authentication is done on the server so you then have all of the necessary user data on hand for each request.

If you want to have authorized and protected routes, this way allows for a user authentication check on every page, as it lives in the _app.js file. If you want to use this route only on specific pages you would add the getInitialProps function to that specific page.

We are going to be creating a Firebase Token when the user logs in and then using the Next.js API routes we will be able to check is it is an authorized token with each page request. The user data is then available at the page level, making it available for any other components on your page.

We will be taking advantage of the Next.js feature for getInitialProps. This allows you to render the page with data already populated, rather than waiting for your typical API data call in the useEffect hook or class lifecycle method. This speeds up load time and ensures you have user data when you load the page.

I will be assuming familiarity with the basics of both Next.js and Firebase. If you have any questions about specifics for the _app.js file or the api/validate route do not hesitate to ask.

Let's get started.

The Process

First of all we need to create a UserContext.js file. This is where going to create a Context Provider for all of the user data and Firebase functions. If you have never used the React Context API I wrote a basic tutorial that can help to explain more.

Although you could stop here and just pass the user data along through context, it would mean that you would have loading time on each page, rather than utilizing the Next.js feature for getInitialProps.

We will put this all together later. But for now your UserContext.js file should be similar to the following.

Right now we just have the login function, but you can also add in your logout, signup, or other Firebase functions here as well. I like to keep any user authentication functions in here and pass them through context to the proper components.

We will be use js-cookie to create and remove cookies.

You can install that with:

yarn add js-cookie

import React, { useEffect, useState } from 'react';

import cookie from 'js-cookie';
import firebase from '../firebaseSetup';

export const UserContext = React.createContext();

const tokenName = 'firebaseToken';

const UserProvider = ({ children }) => {
  // Basic Firebase email login function.
  const emailLogin = async (email, password, redirectPath) => {
    await firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        console.log('User logged in.');
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // Checks that user state has changed and then creates or destroys cookie with Firebase token.
  const onAuthStateChange = () => {
    return firebase.auth().onAuthStateChanged(async (user) => {
      if (user) {
        const token = await user.getIdToken();
        cookie.set(tokenName, token, { expires: 14 });
      } else {
        cookie.remove(tokenName);
      }
    });
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChange();
    return () => {
      unsubscribe();
    };
  }, []);

  return <UserContext.Provider value={{ emailLogin }}>{children}</UserContext.Provider>;
};

export default UserProvider;

The magic here lies in this section:

// Add or remove cookie with Firebase Auth Token on sign in or logout.
const onAuthStateChange = () => {
  return firebase.auth().onAuthStateChanged(async (user) => {
    if (user) {
      const token = await user.getIdToken();
      cookie.set(tokenName, token, { expires: 14 });
    } else {
      cookie.remove(tokenName);
    }
  });
};

useEffect(() => {
  const unsubscribe = onAuthStateChange();
  return () => {
    unsubscribe();
  };
}, []);

Here the onAuthStateChange is called in the useEffect hook. When a user logs in a cookie is created that stores the Firebase Authentication Token, or if they logout the cookie is destroyed. We will check that token through the Next.js API routes and do our user validation on the server side before the page loads. This will ensure that we do not have to wait for our user authentication with Firebase to take up any loading time.

Now in the _app.js we will get our initial props. We need to add a getInitialProps function to call the Next.js API routes and return the user data.

We will use fetch from "isomorphic-unfetch" and cookies with next-cookies for this file which can be added with:

yarn add isomorphic-unfetch next-cookies

Be sure to import it into _app.js file.

MyApp.getInitialProps = async (appContext) => {
  const { ctx } = appContext;
  // Calls `getInitialProps` and fills `appProps.pageProps`
  let error;
  const appProps = await App.getInitialProps(appContext);

  const { firebaseToken } = cookies(ctx);

  // If token exists run Firebase validation on server side before rendering.
  if (firebaseToken) {
    try {
      const headers = {
        'Context-Type': 'application/json',
        Authorization: JSON.stringify({ token: firebaseToken }),
      };
      const result = await fetch(`${server}/api/validate`, { headers }).then((res) => res.json());
      return { ...result, ...appProps };
    } catch (e) {
      console.log(e);
    }
  }
  return { ...appProps };
};

In order to have the correct server called for production and development you can use the following:

const dev = process.env.NODE_ENV === 'development';

const server = dev ? 'http://localhost:3000' : 'https://mydomain.com/';

One last thing is needed to tie the whole thing together. Now we need add in a Next.js API route. In your pages folder you need to create a api/validate.js file. I highly suggest learning more about the Next.js API routes as they really help to take advantage of the SSR functionality that Next.js offers.

Here we are going to create the logic that populates our page with the Firebase data.

A note here: You will need to create a Firebase Admin instance in order to use this, you cannot simply use a standard Firebase instance.

import { firebaseAdmin } from '../../utilities/firebaseAdminSetup';

const validate = async (token) => {
  // Check that the user has a valid token
  const decodedToken = await firebaseAdmin.auth().verifyIdToken(token, true);
  let userData;
  // Get user Firebase data from token
  const user = await firebaseAdmin.auth().getUser(decodedToken.uid);
  // Get any additional user data from the Firebase DB
  await firebaseAdmin
    .firestore()
    .collection('users')
    .doc(decodedToken.uid)
    .get()
    .then((doc) => {
      if (doc.exists) {
        userData = { ...doc.data() };
      }
    })
    .catch((error) => {
      console.log('Error getting document:', error);
    });
  // Assign the user result that will be passed to your _app.js file with populated data from the getUser and db functions
  const result = {
    user: {
      uid: user.uid,
      email: user.email,
      username: userData.username,
      emailVerified: user.emailVerified,
    },
  };
  return result;
};

export default async (req, res) => {
  try {
    // Check if there is a token and if not return undefined.
    const { token } = JSON.parse(req.headers.authorization || '{}');
    if (!token) {
      return res.status(403).send({
        errorCode: 403,
        message: 'Auth token missing.',
      });
    }
    // Call the validate function above that gets the user data.
    const result = await validate(token);
    return res.status(200).send(result);
  } catch (err) {
    // Return undefined if there is no user. You may also send a different status or handle the error in any way that you wish.
    console.log(err);
    const result = undefined;
    return res.status(200).send(result);
  }
};

You now have user available as props on any page route. Just pass it into the component as props in your _app.js file. User validation is now a snap and now can be consumed by any other component.

This type of pattern comes in handy for any server side data fetching that you want to do. It is one of the great features of Next.js that you should try to utilize throughout your applications.

React Progressive Image Loader: From Blurry to Crisp High Definition

Theran Brigowatz — Mon, 31 Aug 2020 06:33:21 +0000

Overview

A good UX allows users to see some UI elements even as we load data from our API. Sometimes with large network payloads this time can be significant. By allowing for UI elements to show and a good UX, users won't be as frustrated, as they would with a white page. This is perceived loading time can be a big difference maker.

While working on a project that needed huge high-resolution 3D images this image loading technique became a life saver. It allows you to load a tiny version of the image, while you wait for the high-resolution one to load. It displays a blurry image in place of the large one, and focuses in once it has loaded.

This is done for images on Medium and allows users to see instantly loaded images and increases load speed.

The blurry version vs. the crisp one.

Notes on Images

One thing that developers often overlook is their image size, even though they are one of the heaviest parts of your network payload. For the full size images I strive to never go beyond 150k on any image if possible. 1,280px wide should be your upper limit for the majority of screen sizes and most use cases. If you are working with ultra high-definition images you will have to adjust accordingly.
This image takes in an ultra small image on first load and they transitions to the larger full size image. When doing this I would strive to keep an image to about 30px high and size of around 500b (Yes that is bytes). I would also turn down the quality to about 10% in the JPG compressor. You want just a rough outline of colors and shapes. Below you can see what the tiny image looks like under heavy compression.
There are services like Cloudinary that allow you to work with the full-size image and then pass in transformations as query parameters in the URL for the small size images. This means you only have to load one image up to your provider. However, be wary that they do have a limit on the amount of transformations you can make before you do get charged.

A blown up version of the small image after compression. This is 500b

The Code

To start out we are going to create a basic react component. It will take in the following props:

preview: the small version of your photo
image: the full-size version of the photo
alt: remember to keep it accessible

The following are optional but make it more reusable. imageStyleClass and divStyleClass allow you to inject the style classes, like from Tailwind.css or other stylesheets, for each individual image, like if you are working with different sizes. The bgColor is to be sure that something is taking up the space of the photo if your network payload is taking a long time. I have set the default to transparent.

imageStyleClass: classNames for the image
divStyleClass: classNames for the container div
bgColor: To be sure that something is there on first load

We are staring with a div and an image. We are also going to add a loading state that is set to true and a current image state. The currentImage will initially take in the preview. But as the full-sized image is loaded we will change the state. The image source will be set to the currentImage as we will update this as the image loads.

The div is there to make sure that the filter blur that escapes the image area is hidden. useEffect will be used later, while the style class props are added to their respective tags.

import React, { useEffect, useState } from 'react';
const [currentImage, setCurrentImage] = useState(preview);
const [loading, setLoading] = useState(true);

const BlurryLoadingImage = ({
  preview,
  image,
  alt,
  imageStyleClass,
  divStyleClass,
  bgColor = 'transparent',
}) => {
  return (
    <div className={divStyleClass}>
      <img src={currentImage} alt={alt} className={imageStyleClass} />
    </div>
  );
};

export default BlurryLoadingImage;

Now for where the magic happens. In your fetchImage you will wait for the large image file to load. When it is done, you will set the currentImage to the new image source. fetchImage will use the full size image source as the argument when it is called in useEffect.

const fetchImage = (src) => {
  const loadingImage = new Image();
  loadingImage.src = src;
  loadingImage.onload = () => {
    setCurrentImage(loadingImage.src);
    setLoading(false);
  };
};

useEffect(() => {
  fetchImage(image);
}, []);

Now as things stand you will go from a very tiny image to a full size one since there is no styling. We have to add the following to the image to make sure that it is going from blurry to the high resolution version. This will blur the initial image and then transition it once the image is done loading. You can adjust these timing and blur values for what looks good for your needs.

The transition between the two will make for a cool effect where the photo gets sharper like it is coming into focus. You can again adjust this time for what works for your project.

<img
  style={{
    filter: `${loading ? 'blur(20px)' : ''}`,
    transition: '1s filter linear',
    width: '100%',
    background: bgColor,
  }}
  src={currentImage}
  alt={alt}
  className={imageStyleClass}
/>

Width is set to 100% in order to fill the parent container and make sure the small image is taking up the same amount of space as the parent. Be sure to have a width set on the parent div in the divStyleClass so that you keep a uniform image size between the small and large versions. The last thing that I would recommend is setting the divClassStyle CSS to have overflow: hidden as this will make sure that the blurred pixels of the image are not shown as they will bleed over.

That is it. Now you can use this image anywhere you would use an image. It is highly reusable and allows for you to decrease loading time. Your initial images coming in at 500b vs 150k will do loads to make your UX that much better.

Final React Component

import React, { useEffect, useState } from 'react';

const BlurryLoadingImage = ({
  preview,
  image,
  alt,
  imageStyleClass,
  divStyleClass,
  bgColor = 'transparent',
}) => {
  const [currentImage, setCurrentImage] = useState(preview);
  const [loading, setLoading] = useState(true);

  const fetchImage = (src) => {
    const loadingImage = new Image();
    loadingImage.src = src;
    loadingImage.onload = () => {
      setCurrentImage(loadingImage.src);
      setLoading(false);
    };
  };

  useEffect(() => {
    fetchImage(image);
  }, []);

  return (
    <div className={divStyleClass} style={{ overflow: 'hidden' }}>
      <img
        style={{
          filter: `${loading ? 'blur(20px)' : ''}`,
          transition: '1s filter linear',
          width: '100%',
          background: bgColor,
        }}
        src={currentImage}
        alt={alt}
        className={imageStyleClass}
      />
    </div>
  );
};

export default BlurryLoadingImage;

JavaScript Object and Array Methods You Should Use

Theran Brigowatz — Thu, 20 Aug 2020 00:49:53 +0000

Below are a list of JavaScript features and methods that I wish I knew about when I started my coding journey (or they were not available in ES5 when I began my foray into coding.) I hope you can learn something new, and can use them in your JavaScript journey.

Object Destructuring

When working with large JSON data or large objects, it can often be difficult to break down the data, especially once you get into large nested data objects like a call to a weather API. When you do so, you can end up getting large back nested objects and arrays like the location information, current weather, forecast, etc. This can be difficult to manage and you end up with large dot notation chains to access object properties.

Object destructuring can help to alleviate some of those concerns. Imagine you get a JSON data object back like muppets below. Rather than having to call muppets.bert.age you can instead use object destructuring to call each name. By calling const { bert, ernie, grover, elmo } = muppets you can now call each nested object as it’s own variable.

const muppets = {
  bert: {
    age: 35,
    color: 'yellow',
    likes: ['quiet', 'unibrows'],
  },
  ernie: {
    age: 35,
    color: 'yellow',
    likes: ['baths', 'rubber ducks'],
  },
  grover: {
    age: 12,
    color: 'blue',
    likes: ['superheroes', 'capes'],
  },
  elmo: {
    age: 8,
    color: 'red',
    likes: ['fun', 'hugging'],
  },
};

const { bert, ernie, grover, elmo } = muppets;

console.log(bert.age); // 35
console.log(grover.likes); // [ 'superheroes', 'capes' ]

New Sets

I know when I first started using Code Wars sites, about half of them asked you to find unique data from arrays or strings. For example, does the following string “alphabet” contain all unique characters? Though there are numerous ways of attacking a problem like this, like putting the letters into an ordered array, sorting them, and comparing all characters to the previous index, this gets a bit tiresome and makes for lengthy functions.

That is where Set comes to the rescue. It takes and filters out any duplicate data, and returns a new set that has all unique data.

const string1 = 'Alphabet';
const string2 = 'alphabet';
const array = [1, 1, 1, 2, 2, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4];

console.log(new Set(string1)); // Set { 'A', 'l', 'p', 'h', 'a', 'b', 'e', 't' }
console.log(new Set(string2)); // Set { 'a', 'l', 'p', 'h', 'b', 'e', 't' }
console.log(new Set(array)); // Set { 1, 2, 3, 4 }

Note that in the above example string1 has an “A” and an “a” which are distinct characters in JavaScript.

Spread Operator

This one has become one of my favorites to use recently. The spread operator is written as three little dots ... and they do quite a bit of work. This has become especially useful when you are working with immutable.

You can easily turn a string into an array (useful on those algorithm sites and data manipulation) or used in combination with Set to get those unique characters into an array.

const string = 'This is a string';

const stringArray = [...string];
console.log(stringArray); // [ 'T','h','i','s',' ','i','s',' ','a',' ','s','t','r','i','n','g' ]

const uniqueCharacterArray = [...new Set(string)];
console.log(uniqueCharacterArray); // [ 'T', 'h', 'i', 's', ' ', 'a', 't', 'r', 'n', 'g' ]

The other common use that I have found is with objects. This one is particularly helpful when you want to update part of the data within an object. Here the spread operator works to to copy the properties over from the previous object, and then you can simply change the properties while keeping the rest of the data the same.

const person = {
  firstName: 'john',
  lastName: 'smith',
  age: 24,
  hairColor: 'brown',
  eyeColor: 'hazel',
};

const newPerson = {
  ...person,
  age: 25,
  hairColor: 'pink',
};

console.log(newPerson); // { firstName: 'john', lastName: 'smith', age: 25, hairColor: 'pink', eyeColor: 'hazel' }

Array Methods

Below is a list of methods that I commonly use. ES6 has made working with immutable data much easier and the following are some of the common ones that I have found useful in my day-to-day programming.

.map

This one gets used almost daily by me in React development. It returns a new array that you can work with and change, while keeping your original data intact.

const numbers = [1, 2, 3, 4, 5, 6];

const biggerNumbers = numbers.map((num) => num + 10);

console.log(biggerNumbers); // [ 11, 12, 13, 14, 15, 16 ]
console.log(numbers); //[ 1, 2, 3, 4, 5, 6 ]

.filter

This one basically does as it says. It filters out data and returns a new array based upon whatever criteria you set up for it.

const numbers = [1, 2, 3, 4, 5, 6];

const numbersGreaterThanThree = numbers.filter((num) => num > 3);

console.log(numbersGreaterThanThree); // [4,5,6]

.reduce

I use this one a little less often than .filter and .map but it is quite useful whenever you need to add up some items or find totals. It is one of my go-tos when creating a shopping cart and I need to add up to get a sum.

const shoppingCartItemPrices = [23, 43, 52, 67, 54];

const shoppingCartTotal = shoppingCartItemPrices.reduce((total, item) => total + item);

console.log(shoppingCartTotal); //239

.some

This one is helpful to check for the truthiness of an array. It checks to see if at least one item in an array passes your set criteria. This method does not return a new array, but rather simply checks for true or false.

const numbers = [1, 2, 3, 4, 5, 6];

console.log(numbers.some((num) => num > 7)); // false
console.log(numbers.some((num) => num > 3)); // true

.every

Like the .some method, but this one checks that every item in the array is true under the criteria that you have set. This one again simply returns true or false.

const numbers = [5, 10, 15, 20, 25, 30];

console.log(numbers.every((num) => num >= 10)); // false
console.log(numbers.every((num) => num >= 5)); // true

Thank You

Thank you for taking the time to read through this little list of JavaScript tips. I hope you found something useful that you can use in your code and maybe make your life a bit easier.

Check out more of my work at theran.dev or on twitter.

Build a React Calculator with Hooks and Context API

Theran Brigowatz — Wed, 19 Aug 2020 02:06:42 +0000

Originally Published March 15, 2019 for FreeCodeCamp.org

If you are like me, when you first heard of React Hooks you were maybe a little bit ambivalent or confused by what all the hype was about. What’s the big deal if I don’t have to write out class components anymore? However, once I dove in and got to using them, I couldn’t really see myself going back to my pre-Hook days. In the immortal words of Blues Traveller, “The hook brings you back. I ain’t tellin’ you no lie.”

For a while, I was looking for a guide about how to use Hooks in connection with the Context API. After only finding a few examples out there that explained the concept fully, I decided to do what any good developer should do: pore over the docs and build something myself. Struggling through it and learning it on your own is one of the best ways to absorb knowledge. This is a guide for how to build the same project that I did with the use of Hooks and Context.

Overview

This project is going to be a basic calculator app similar to the iPhone calculator. Since this is just a simple desktop app I have replaced the % button with a back button. Though I wouldn’t use this to take the SATs, you could definitely add up the number of toes you have on it.

There is a working deployed version of the project, or you can view all of the code on GitHub.

Our calculator design - Not award winning by any stretch of the imagination.

The Project

Getting Started

To get started we are just going to use create-react-app. You can get started by running the following:

npx create-react-app calculator
cd calculator
npm start

File Structure & CSS

The file structure of the app should look like the following. In the src folder create the following files or just leave the App.js and index.js.

src
├── App.js
├── index.js
└── components
    ├── BackButton.js
    ├── Calculator.js
    ├── ClearButton.js
    ├── Display.js
    ├── EqualButton.js
    ├── FunctionButton.js
    ├── NegativeButton.js
    ├── NumberButton.js
    ├── NumberProvider.js
    └── styles
        └── Styles.js

If you want to follow along exactly you can also install Styled Components for the CSS.

npm -i styled-components

You can then add the Styled CSS from this link to the Styles.js file or add your own.

Main App Structure

The Calculator.js file should setup the display and number pad. It should contain all of the button types.

import React from 'react';
import NumberButton from './NumberButton';
import FunctionButton from './FunctionButton';
import ClearButton from './ClearButton';
import Display from './Display';
import EqualButton from './EqualButton';
import BackButton from './BackButton';
import NegativeButton from './NegativeButton';
import { CalculatorStyles } from './styles/Styles';

const Calculator = () => (
  <CalculatorStyles>
    <div className='display'>
      <h1>CALC-U-LATER</h1>
      <Display />
    </div>
    <div className='number-pad'>
      <ClearButton />
      <BackButton />
      <NegativeButton />
      <FunctionButton buttonValue='/' />
      <NumberButton buttonValue={7} />
      <NumberButton buttonValue={8} />
      <NumberButton buttonValue={9} />
      <FunctionButton buttonValue='*' />
      <NumberButton buttonValue={4} />
      <NumberButton buttonValue={5} />
      <NumberButton buttonValue={6} />
      <FunctionButton buttonValue='-' />
      <NumberButton buttonValue={1} />
      <NumberButton buttonValue={2} />
      <NumberButton buttonValue={3} />
      <FunctionButton buttonValue='+' />
      <div className='zero-button'>
        <NumberButton buttonValue={0} />
      </div>
      <NumberButton buttonValue='.' />
      <EqualButton />
    </div>
  </CalculatorStyles>
);

export default Calculator;

You will notice that all of the button components are added in here along with the number display. Each of the button components are essentially the same. They should all follow the same basic structure. The zero-button gets a separate div since we are using CSS Grid for the layout and it needs to span two columns. (PS — If you want to know more about CSS Grid I did a little article on the basics.)

You may notice that the buttonValue prop is only needed for the NumberButton and FunctionButton components. Each of the buttons should follow the same basic structure with a unique name. You can reference the file structure up above to see which buttons are needed. The buttons should have the symbol written in the button component if they are not passed a buttonValue via props. Create one of these for each of the button types in your file structure.

import React from 'react';

const ButtonName = ({ buttonValue }) => {
  return <button type='button'>{buttonValue}</button>;
};

export default ButtonName;

After this you should have the basic structure of a calculator. We are going to come back to the display in just a bit. Now we are going to get into the inner workings of the app and see how we can use our Hooks and Context.

Building the Context API Provider

We are now going to create the NumberProvider.js . This is the heart of your app and where our functions are going to live. If you have never used the React Context API it is a great tool to help pass data from one component to another.

Think of when you have components that are nested within each other. In the past you would have to “prop drill” . This is when you pass the data or function through as props in down through nested components. This is hardly ideal, especially when you start to go several layers deep.

However, with this provider component, it allows you to pass data to any nested component, no matter how deep. This number provider will wrap our App component. Now whenever we want to get data, or use a function that lives in the provider, it is globally available. This gets us out of having to “prop drill” through nested components. You maintain the single source of truth that is the essence of React. To get started you need to create the provider. It should look like the following:

import React from 'react';

export const NumberContext = React.createContext();

const NumberProvider = (props) => {
  const number = '0';
  return (
    <NumberContext.Provider
      value={{
        number,
      }}>
      {props.children}
    </NumberContext.Provider>
  );
};

export default NumberProvider;

The basic provider is created and any value that is passed in is now available to all nested components. In order to make this available we are going to wrap our App component so it is globally available. Our App will have this code.

import React from 'react';
import Calculator from './components/Calculator';
import NumberProvider from './components/NumberProvider';

const App = () => (
  <NumberProvider>
    <Calculator />
  </NumberProvider>
);

export default App;

Using the Context Provider

Now we can add in the code for our display. We can display the value by passing in the useContext function from the new React Hooks API. We no longer have to pass in prop through nested components. The display should look like:

import React, { useContext } from 'react';
import { NumberContext } from './NumberProvider';
import { DisplayStyles } from './styles/Styles';

const Display = () => {
  const { number } = useContext(NumberContext);
  return (
    <DisplayStyles>
      <h2>{number}</h2>
      <p>Enter Some Numbers</p>
    </DisplayStyles>
  );
};

export default Display;

The number that you passed three levels up in the NumberProvider is immediately available to the Display component by calling useContext and passing our created NumberContext. Your number display is now up and running as it is showing number which we have set to zero.

Now of course our calculator is showing a single zero. This is great if you are counting the number of hours of sleep I get with a new born son, but not so great if trying to add anything else, so let’s use some hooks going get this calculator calculating.

Getting Started with Hooks

If you haven’t used a hook before, it essentially allows you to get rid of the class syntax, and instead have state within functional components. Here we can add the following to our NumberProvider.js file in order to create our first hook.

import React, { useState } from 'react';

export const NumberContext = React.createContext();

const NumberProvider = (props) => {
  const [number, setNumber] = useState('');

  const handleSetDisplayValue = (num) => {
    if (!number.includes('.') || num !== '.') {
      setNumber(`${(number + num).replace(/^0+/, '')}`);
    }
  };

  return (
    <NumberContext.Provider
      value={{
        handleSetDisplayValue,
        number,
      }}>
      {props.children}
    </NumberContext.Provider>
  );
};

export default NumberProvider;

There might be some syntax you have not seen. Rather than writing out our class with state we break each part of state into its own smaller number variable. There is also setNumber which acts the same as a setState function, but now works for a specific variable, and can be called when necessary. useState allows us to set an initial value.

We are now able to use this all in our function to pass the number button values into the display. In this app the calculator is using strings to get the input. There are checks to make sure that you can not have multiple . in your number and that you do not have series of zeroes to start your number.

Building Button Components

Now you can call this function using the Context API in any of the nested components.

import React, { useContext } from 'react';
import { NumberContext } from './NumberProvider';

const NumberButton = ({ buttonValue }) => {
  const { handleSetDisplayValue } = useContext(NumberContext);
  return (
    <button type='button' onClick={() => handleSetDisplayValue(buttonValue)}>
      {buttonValue}
    </button>
  );
};

export default NumberButton;

Now you have working string of numbers maker. You can see how you can start to inject the values that you set in the NumberProvider into the other components of the app via the useContext function. State and the functions that affect it are held in the NumberProvider . You just have to call in the specific context that you want.

You can start to see how this would be great as you start to add more complexity to your app. Say you want a user component to check that you are logged in to use special features. You can create a separate provider that holds the user data and makes that available any nested component.

We can continue to add in functions to our calculator and pass them to the proper component through the useContext function that is built in.

Completed Provider Functions

The completed NumberProvider is found below and contains the following functions that are used with hooks.

handleSetDisplayValue sets the value that you are typing into the display. We are checking that it there is only one decimal in the number string and we are limiting the number length to 8 characters. Think of this as more a tip calculator than one to get you through your calculus exam. It takes in the buttonValue property in NumberButton.js .
handleSetStoredValue takes our display string and stores it so that we can enter another number. This is our stored value. It will be used as a helper function.
handleClearValue resets everything back to 0. This is your clear function. It will get passed to ClearButton.js.
handleBackButton allows you to delete your previously entered characters one at a time until you get back to 0. This belongs in the BackButton.js file.
handleSetCalcFunction is where you get your math function. It sets if you are adding, subtracting, dividing, or multiplying. It gets passed into the FunctionButton.js file and takes in the buttonValue property.
handleToggleNegative does just as the name implies. It allows you do so for either the display value or a stored value after a calculation. This of course goes in NegativeButton.js.
doMath does the Math. Finally. Since this is only a simple four function calculator it is just using simple switch function depending upon the functionType that we have in state. We are using parseInt since we are passing our number in as strings. Also we are rounding to only three decimal places, to make sure that we do not have crazy long numbers.

import React, { useState } from 'react';

export const NumberContext = React.createContext();

const NumberProvider = (props) => {
  const [number, setNumber] = useState('');
  const [storedNumber, setStoredNumber] = useState('');
  const [functionType, setFunctionType] = useState('');

  const handleSetDisplayValue = (num) => {
    if ((!number.includes('.') || num !== '.') && number.length < 8) {
      setNumber(`${(number + num).replace(/^0+/, '')}`);
    }
  };

  const handleSetStoredValue = () => {
    setStoredNumber(number);
    setNumber('');
  };

  const handleClearValue = () => {
    setNumber('');
    setStoredNumber('');
    setFunctionType('');
  };

  const handleBackButton = () => {
    if (number !== '') {
      const deletedNumber = number.slice(0, number.length - 1);
      setNumber(deletedNumber);
    }
  };

  const handleSetCalcFunction = (type) => {
    if (number) {
      setFunctionType(type);
      handleSetStoredValue();
    }
    if (storedNumber) {
      setFunctionType(type);
    }
  };

  const handleToggleNegative = () => {
    if (number) {
      if (number > 0) {
        setNumber(`-${number}`);
      } else {
        const positiveNumber = number.slice(1);
        setNumber(positiveNumber);
      }
    } else if (storedNumber > 0) {
      setStoredNumber(`-${storedNumber}`);
    } else {
      const positiveNumber = storedNumber.slice(1);
      setStoredNumber(positiveNumber);
    }
  };

  const doMath = () => {
    if (number && storedNumber) {
      switch (functionType) {
        case '+':
          setStoredNumber(
            `${Math.round(`${(parseFloat(storedNumber) + parseFloat(number)) * 100}`) / 100}`
          );
          break;
        case '-':
          setStoredNumber(
            `${Math.round(`${(parseFloat(storedNumber) - parseFloat(number)) * 1000}`) / 1000}`
          );
          break;
        case '/':
          setStoredNumber(
            `${Math.round(`${(parseFloat(storedNumber) / parseFloat(number)) * 1000}`) / 1000}`
          );
          break;
        case '*':
          setStoredNumber(
            `${Math.round(`${parseFloat(storedNumber) * parseFloat(number) * 1000}`) / 1000}`
          );
          break;
        default:
          break;
      }
      setNumber('');
    }
  };

  return (
    <NumberContext.Provider
      value={{
        doMath,
        functionType,
        handleBackButton,
        handleClearValue,
        handleSetCalcFunction,
        handleSetDisplayValue,
        handleSetStoredValue,
        handleToggleNegative,
        number,
        storedNumber,
        setNumber,
      }}>
      {props.children}
    </NumberContext.Provider>
  );
};

export default NumberProvider;

The Finished Display

You will also need a display. In this case it will show the number and the storedNumber along with your functionType. There are a few check such as showing a 0 when you have an empty string as a number.

import React, { useContext } from 'react';
import { NumberContext } from './NumberProvider';
import { DisplayStyles } from './styles/Styles';

const Display = () => {
  const { number, storedNumber, functionType } = useContext(NumberContext);
  return (
    <DisplayStyles>
      <h2>{!number.length && !storedNumber ? '0' : number || storedNumber}</h2>
      <p>{!storedNumber ? 'ENTER SOME NUMBERS' : `${storedNumber} ${functionType} ${number}`}</p>
    </DisplayStyles>
  );
};

export default Display;

For brevity sake, I am not going to include all of the button functions since they are pretty much the same as the NumberButton.js file above. Just be sure that you pass in a buttonValue prop when necessary, and that you are passing in the correct function from the above list.

Conclusion

I hope that this clears up a bit about how React Hooks and the Context API can be used together. Using these built in React features offers several benefits.

Simple to understand syntax and gets rid of the clutter of class components. No more super and constructors. Just a few clean variables.
Easier to set and use state within and across components. No more messy prop drilling through multiple component.
Eliminates need for Redux in small projects, where you don’t need to hold too much in complex state. You probably aren’t going to re-create Facebook with it, but it will do the job on small-scale apps.

Please let me know your thoughts or if there are any issues that you come across in the code. Hopefully this shone a bit of light onto something that you may not have been familiar with before. React Hooks and Context are great ways to simplify your React apps and write cleaner code.

See All the Code

If you would like to see the entire code for this project it can be found over in:

GitHub Repo

Calc-U-Later Deploy

Check out more of my articles, projects, and other content at theran.dev or on twitter.

Stop Coding and Become a Better Developer

Theran Brigowatz — Wed, 19 Aug 2020 01:08:42 +0000

I am here to tell you stop coding.

Stop.

Really.

Stop.

Take a break and close the laptop.

Have a beer or cup of coffee.

Go hug your significant other.

Sit and watch TV for a bit.

Take the dog for a walk.

Grab a snack.

Go to bed.

Do something other than stare at your code editor. I promise VS Code and the algorithm you are perfecting will still be there when you come back. And you'll be a better developer for it.

I will start off by stating that I love to code. I wouldn't be writing this if I didn't. I love my profession and the work I do. After spending a decade as an educator, I found a career that I have a true passion for.

I know there will be tons of critics on this subject because I have been a part of the discussions whenever the topic comes up. The chorus of "Real developers never stop," or "Who is coding all weekend?" ring throughout the comments of any Twitter thread about coding in your time off. But I can honestly say that the best thing I have learned in the previous year or so, is that when my work day is done, it is best to close my laptop, and leave the world of code behind.

Too often as developers we place our self worth on the number of lines of code that we write, the number of commits to GitHub, or the number of hours spent in front of the chair. It is not uncommon to hear bragging about the all night code sessions, wearing that time as a badge of honor. But in the long run, this is not sustainable. You only hurt yourself by doing so.

Not in the Job Description

Developers are often asked in interviews what they code in their free time, or for personal projects. We don't ask surgeons what kind of surgery they perform in their time off. So why is it acceptable, or even standard, to expect developers to do so. Coding is one of my main interests. It is truly a job that I enjoy and I love to learn more about it, but I am more than my code and the number of hours that I spend crafting it.

Most chefs don't go home and cook a four course meal after a day spent in the kitchen. After eight plus hours coding, it is not what I want to spend my limited free time doing, or should be expected to do. I have a family, other interests, or I just simply want to zone out on the couch and watch tv like any other tired human being. Not coding in your free time should not be seen as a mark against a developer. We all don't have the time, resources, or will to code all of our waking hours.

To me this would be a warning sign in an interview, especially for an experienced developer. I understand side projects are your main way in as new developer. You can still have a passion and drive for your craft without doing it on the side.

You're Hurting Yourself

One of the common retorts to this topic is that they are spending their time learning for work, or to get their foot in the door as a developer.

If it is the latter, I see no problem with this. I went the bootcamp route to become a developer. I was working full-time as the sole breadwinner while coding 30+ hours a week for nine months, with a wife who was pregnant for most of that time. I wouldn't take it back at all, because I do have a career that I love. You have to work hard to get what you want.

However, for the former, learning for work, this is detrimental to your standing as an employee, and can lead to you being taken advantage of if not careful. If you are learning for work it is most likely one of two cases, you are new to the industry, or it is new technology that you are not familiar with.

A good employer should understand that if you are new to the industry, you should be given time to learn on the job and foster an environment where you can learn the necessary skills and thrive. Being expected to learn outside of work adds to the already insane pressure that someone who is new to this industry is already feeling.

The same goes for learning new skills, or new tech, even for experienced devs. When introducing new tech, an lengthened time frame is to be expected, and estimates should be made accordingly. The burden should not fall on the dev to work outside of work to catch up. Too often employers use these excuses to get free work out of employees, and it is detrimental to the industry as a whole.

Our lives are so much more than work. We already spend a majority of our waking hours at work, so the little free time that we do have should be just that, free.

Become a More Well-rounded Developer

Being a good developer is so much more than just writing code. A good coder has the ability to solve puzzles, communicate, and gather information to name a few. Branching out beyond the world of development is a way to give yourself a variety of tools that will help you in the long run to be a better developer and better overall human.

Reading allows you to become better at combing through documentation. Writing, or blogging will help you to be a better communicator on your team. Playing video games and puzzles will help you to look at problems in a new way and from different angles.

The other day while playing with my son, I was able to see the grid structure that was giving me issues while playing with blocks. I see code everywhere, even if I am not coding.

I built a homemade fermentation chamber for homebrewing. This required me to read schematics and search through various blogs and put together something that fit my needs, because no off-the-shelf model would fit my needs. If this doesn't sound like what a developer does on a daily basis, then I don't know what does. It doesn't have to be code to hone your skills as a developer.

Also there are other ways to absorb code. I will typically browse programming Twitter or Reddit on my phone while I ignore the TV in the background. This is just as valuable as coding as you are exposing yourself to new ideas and methods without actually going through the rigors of developing.

Being a more well-rounded individual will make you better at your job, and a more valuable member of your team.

Reset Your Brain

I wasn't the most dedicated student during my first few college years. (It is true that youth is wasted on the young.) In order to pass the time in class I used to do the crossword puzzle in the daily newspaper. Usually in the morning class, I would get about halfway through and then get stuck. Later on in the day I would pull it out again, and usually finish it in a matter of moments. I needed to get my brain unstuck from looking at the same problem in the same way. It needed a reset.

Our brains get caught in these lanes and it is difficult to get out. Taking a break, especially when stuck on a problem, can be key. I think most of my "Aha" moments come in the shower, or while on a hike during lunch.

The same goes for talking to a coworker about the issue. How often have you gone over to a coworkers desk to go over an issue and found the problem within seconds? Having a different point of view is good. Variety is the spice of life.

Your Mental Health

Burnout is real. It happens to us all, so there is no reason to bring it's onset faster than necessary. Throwing more hours at a problem is not always going to bring the solution. In the long run it can be detrimental to your mental wellbeing.

Coding is something that I love, but it is also something that I can walk away from. We all need to take breaks in order to center ourselves. A bug in your code should not be a reason to stay up all hours of the night or neglect a meal. I have the luxury of taking a hike at a local trail on my lunch break, which helps me to refocus and get out to be a part of nature and reset my mind.

The current stresses of a Covid world are already too great. Combine that with the regular pressures of adulthood that we all face and it compounds quickly. Don't be afraid to say that you need a break. An gray space in your GitHub profile isn't going to be the make or break of your career, or self-worth.

Your Job Doesn't Define You

I remember reading one of those AskReddit threads where the topic was along the lines of "What do you as Europeans find strange about Americans. One answer that struck me was the response about asking people what they do for a living. We often place too much of our worth on our career, when it should not be your defining characteristic.

I'm a developer but I love to cook, brew beer, travel, and watch sports whenever I can. My limited free time is reserved for my family and being the best father and husband I can be. I am more than just where my paycheck comes from.

The above image is my Github profile for the past six months. I am proud of my green space on this one. I go hard during the week. My office hours leave me to work that code editor hard. I love to code and learn. I lose track of time during the work day, earning a living at a craft I am passionate about. Fingers moving and code committing.

But my weekends are for my family and hobbies. Free to enjoy the other things that life has to offer. Life is too short to just be a developer. Step away and take a breath. You'll be a better developer for it.

Check out more of my articles, projects, and other content at theran.dev or on twitter.