DEV Community: codingcardio

If you've been laid off recently, I'd like to offer free portfolio/resume reviews/mock interviews

codingcardio — Fri, 03 Apr 2020 16:16:44 +0000

I've been seeing a lot of people going through tough times with the current pandemic. I'd like to try to help in someway.

If you'd find it helpful for any kind of portfolio/resume review, I'd be more than happy to offer my help. I focus mostly in JavaScript and front-end tools/technologies. I used to do these kinds of reviews fairly regularly and want to start back up given the current circumstances.

Please DM me for more info if you or someone you know may be interested!

React Hooks Intro Pt. 1: useState (Re-creating a class component)

codingcardio — Mon, 04 Nov 2019 13:31:59 +0000

I'm making a several part series where I demonstrate how to get started using React Hooks by re-creating a class component. I'll also demonstrate some bugs you may encounter with useState.

Feedback welcome! ✌️

CSS Display Tutorial: Block, Inline, & Inline-block

codingcardio — Mon, 29 Jul 2019 13:22:42 +0000

I made a tutorial walking through some different display properties in CSS and how they work. I talk about when they can be useful as well.

Feedback welcome!

Here's a video tutorial for some commonly used Array methods in JavaScript

codingcardio — Tue, 23 Jul 2019 21:57:11 +0000

In this video, I go through some common (and some uncommon) array methods and how to use them.

Here are the ones covered in the video: .some() .filter() .map() .flat() .reduce() .every() .find() .pop() .shift() .unshift() .includes()

Feedback welcome!

A Beginner's Guide to Flexbox - Video Tutorial

codingcardio — Mon, 15 Jul 2019 12:58:39 +0000

I made another video tutorial on getting started with Flexbox, where we cover how it works, as well as understanding properties like justify-content, align-items and flex.

Feedback welcome!

CSS Positioning Tutorial: Absolute, Relative and Fixed

codingcardio — Mon, 08 Jul 2019 13:45:26 +0000

I made a tutorial walking through some different positioning properties in CSS and how they work. I talk about when they can be useful as well.

Feedback welcome! Subscriptions very much appreciated 🤗

Learn the Ins and Outs of JavaScript's Reduce

codingcardio — Mon, 01 Jul 2019 13:56:28 +0000

This video will walk through some basic reduce patterns and show use cases for when to use a reduce in a real project. We'll also do some debugging as we use reduce.

Feedback welcome!

How to Use React's Context Hook

codingcardio — Fri, 31 May 2019 16:49:59 +0000

In this article, we'll take a look at how we can refactor a component to use React's Context hook. This lets us refactor our code quite a bit, and make things a lot more readable when using several contexts.

If you're already familiar with React's Context API, you know it can be a very powerful tool to pass data to multiple components. If you're not familiar let's look at an example. Say we have a Grandmother component that returns a Mother component like so:

import React, { createContext } from "react";

const FamilyContext = createContext({});
export const FamilyProvider = FamilyContext.Provider;
export const FamilyConsumer = FamilyContext.Consumer;

export class Grandmother extends React.Component {
  state = {
    familyName: { lastName: "Smith" }
  };

  render() {
    return (
      <FamilyProvider value={this.state.familyName}>
        <Mother />
      </FamilyProvider>
    );
  }
}

We wrap our <Mother /> component in a provider tag that will allow our children to consume some data. Now our components rendered from Grandmother will have access to some data. So let's say we had:

const Mother = () => {
  return <Child />;
};

const Child = () => {
  return (
    <FamilyConsumer>
      {familyContext => (
        <p>Last name: {familyContext.lastName}</p>
      )}
    </FamilyConsumer>
  );
};

Now we have access in the <Child /> from data being provided by the <Grandmother />

NOTE:

We use a state object value on Family Provider instead of passing an object directing to the value prop. If we were to pass a new object, this would cause all of our Consumers to re-render every time Provider re-renders.

Why use a context hook?

The above example works fine, but what if we had multiple contexts that we want to pass to our components? Building off of our example, that may look something like:

  ...

  render() {
    return (
      <FamilyProvider value={this.state.familyName}>
        <UserProvider value={this.state.user}>
          <NotificationsProvider value={this.state.notifications}>
            <Mother />
          </NotificationsProvider>
        </UserProvider>
      </FamilyProvider>
    );
  }

And in our consumers, we would have to write something like:

   ...
   return (

    <FamilyConsumer>
      {familyContext => (
        <UserConsumer>
          {currentUser => (
            <NotificationsConsumer>
              {notifications => (
                <div>
                  <p>User: {currentUser.email}</p>
                  <p>Last Name: {familyContext.lastName}</p>
                  <p>Notifications: {notifications.count}</p>
                </div>
              )}
            </NotificationsConsumer>
          )}
        </UserConsumer>
      )}
    </FamilyConsumer>

   )

It's starting to get a bit out of hand, as we can see this gets less readable with each context we add.

The how

Let's clean this up a little bit using some hooks.

First, let's make sure we're importing the useContext hook

import React, { useContext } from `react`;

Our useContext is going to accept a context object. So now let's refactor and see what that looks like! Let's first remove the Providers from our Grandmother

  // Grandmother
  ...
  render() {
    return <Mother />;
  }

No more nesting inside of multiple providers! This is now one less thing we have to worry about inside of this component

Now let's create a context object like so:

const FamilyContext = React.createContext({ lastName: "Smith" });

Ideally, you can keep these contexts in their own files and import them as you see fit. You can imagine they can get quite large depending on the data you're trying to store and pass.

Now we can refactor our <Child /> component and free it up from all that nesting:

const Child = () => {
  const familyContext = useContext(FamilyContext);
  const user = useContext(UserContext);
  const notifications = useContext(NotificationsContext);
  return (
         <div>
           <p>User: {currentUser.email}</p>
           <p>Last Name: {familyContext.lastName}</p>
           <p>Notifications: {notifications.count}</p>
         </div>
   );
};

See if you can create the Notifications and User contexts yourself based on what we've done so far!

Let's look at the child's return from non-hooks vs hooks difference:

Old:

   return (

    <FamilyConsumer>
      {familyContext => (
        <UserConsumer>
          {currentUser => (
            <NotificationsConsumer>
              {notifications => (
                <div>
                  <p>User: {currentUser.email}</p>
                  <p>Last Name: {familyContext.lastName}</p>
                  <p>Notifications: {notifications.count}</p>
                </div>
              )}
            </NotificationsConsumer>
          )}
        </UserConsumer>
      )}
    </FamilyConsumer>

   )

vs.

New:

  return (
         <div>
           <p>User: {currentUser.email}</p>
           <p>Last Name: {familyContext.lastName}</p>
           <p>Notifications: {notifications.count}</p>
         </div>
   );

We can see how much more readable this is. It's also a lot easier to understand the data flow this way. We can see exactly where each context is coming from instead of trying to following a nesting pattern.

I hope this helps!