Forem: David Quick

Creating flexible compnents with props and local data.

David Quick — Thu, 10 Sep 2020 12:17:32 +0000

In this article, we'll be focusing on one component in specific that we'll dive into and refactor while focusing on re-usability and props.

This came about as I was updating my portfolio and came across a really ugly and inefficient component that needed some work.

The component in question was this Projects component. It simply rendered multiple card components (ProjctCard) to showcase various projects. Each card received props to display its respective information with different values:

import React from 'react'
import ProjectCard from './components/ProjectCard'

// Project images
import kintsugi from '../images/kintsugi.png'
import agency from '../images/agency.jpg'
import merlin from '../images/merlins-marker.jpg'
import colorBurst from '../images/color-burst.jpg'
import coffeeHouse from '../images/coffee-house-screenshot.jpg'
import lightsOut from '../images/lights-out.jpg'

const Projects = () => (
  <>
    <ProjectCard
      img={kintsugi}
      title='Kintsugi'
      description='An Anime databse where users can browse and discover anime titles.'
      tech='NextJS | Tailwind CSS'
    />
    <ProjectCard
      img={agency}
      title='Agency'
      description='A simple landing page with a focus on minimal design and fluid animations using GSAP.'
      tech='React | GSAP'
    />
    <ProjectCard
      img={merlin}
      title='Merlins-Marker'
      description='A theme generator for Prism.js. Users create their own theme for code highlighting.'
      tech='JavaScript | CSS Variables'
    />
    <ProjectCard
      img={colorBurst}
      title='Color-Burst'
      description='A color palette generator to help users on their next project.'
      tech='React | React-Router | React-Sortable'
    />
    <ProjectCard
      img={coffeeHouse}
      title='Coffee House'
      description='A cofee/restaurant website.'
      tech='HTML/CSS | Sass | CSS Grid'
    />
    <ProjectCard
      img={lightsOut}
      title='Lights Out'
      description='A puzzle game in which you need to toggle all of the lights off.'
      tech='React'
    />
  </>
)

export default Projects

We can clearly see that this component lacks efficiency and future proofing. Every prop is being filled in manually and the code isn't DRY as each card is being repeated again and again.

At best, even if there were only two project cards to display, it's always beneficial to be intentional with the code you write and to think of use cases for the future.

To clean this up, we can create a new folder called data and then within that folder create a new file called projectData.js. This file will hold all the static data used to fill in the prop information for each ProjectCard:

export default [
  {
    img: kintsugi,
    title: 'Kintsugi',
    description: 'An Anime databse where users can browse and discover anime titles.',
    tech: 'NextJS | Tailwind CSS',
  },
  {
    img: agency,
    title: 'Agency',
    description: 'A simple landing page with a focus on minimal design and fluid animations using GSAP.',
    tech: 'React | GSAP',
  },
  {
    img: merlin,
    title: 'Merlins-Marker',
    description: 'A theme generator for Prism.js. Users create their own theme for code highlighting.',
    tech: 'JavaScript | CSS Variables',
  },
  {
    img: colorBurst,
    title: 'Color-Burst',
    description: 'A color palette generator to help users on their next project.',
    tech: 'React | React-Router | React-Sortable',
  },
  {
    img: coffeeHouse,
    title: 'Coffee House',
    description: 'A cofee/restaurant website.',
    tech: 'HTML/CSS | Sass | CSS Grid',
  },
  {
    img: lightsOut,
    title: 'Lights Out',
    description: 'A puzzle game in which you need to toggle all of the lights off.',
    tech: 'React',
  },
]

The structure of this file is an array of objects because it will allow us to map over the data and access the values within each object.

Another thing we should add into the projectData.js file are all of the project images. This allows us to have one central location for all our data pertaining to each project:

// Project images
import kintsugi from '../images/kintsugi.png'
import agency from '../images/agency.jpg'
import merlin from '../images/merlins-marker.jpg'
import colorBurst from '../images/color-burst.jpg'
import coffeeHouse from '../images/coffee-house-screenshot.jpg'
import lightsOut from '../images/lights-out.jpg'

export default [
  {
    img: kintsugi,
    title: 'Kintsugi',
    description: 'An Anime databse where users can browse and discover anime titles.',
    tech: 'NextJS | Tailwind CSS',
  },
  {
    img: agency,
    title: 'Agency',
    description: 'A simple landing page with a focus on minimal design and fluid animations using GSAP.',
    tech: 'React | GSAP',
  },
  {
    img: merlin,
    title: 'Merlins-Marker',
    description: 'A theme generator for Prism.js. Users create their own theme for code highlighting.',
    tech: 'JavaScript | CSS Variables',
  },
  {
    img: colorBurst,
    title: 'Color-Burst',
    description: 'A color palette generator to help users on their next project.',
    tech: 'React | React-Router | React-Sortable',
  },
  {
    img: coffeeHouse,
    title: 'Coffee House',
    description: 'A cofee/restaurant website.',
    tech: 'HTML/CSS | Sass | CSS Grid',
  },
  {
    img: lightsOut,
    title: 'Lights Out',
    description: 'A puzzle game in which you need to toggle all of the lights off.',
    tech: 'React',
  },
]

If we move back into the Projects component, we can now remove every instance of the ProjectCard component except for one. The component should now look like this:

import React from 'react'
import ProjectCard from './components/ProjectCard'

const Projects = () => (
  <>
    <ProjectCard
      img={kintsugi}
      title='Kintsugi'
      description='An Anime databse where users can browse and discover anime titles.'
      tech='NextJS | Tailwind CSS'
    />
  </>
)

export default Projects

The static prop information is no longer needed since it will be provided from the projectData.js file. We can now go ahead and import the projectData.js file and map over it while passing in our desired prop values:

import React from 'react'
import ProjectCard from './components/ProjectCard'
import data from '../data/projectData'

const Projects = () => (
  <>
    {data.map(project => (
      <ProjectCard
        key={project.title}
        img={project.img}
        title={project.title}
        description={project.description}
        tech={project.tech}
      />
    ))}
  </>
)

export default Projects

Above, we mapped over each project which is represented by every object within our projectData.js file and filled in each prop value with the key from our data object:

data.map(project => (
  <ProjectCard
    key={project.title}
    img={project.img}
    title={project.title}
    description={project.description}
    tech={project.tech}
  />
))

You may have noticed the addition of a key attribute:

key={project.title}

This is necessary when rendering a list of components as it gives React a way to identify which items have changed. Since each key must be unique, we'll use the title as each title is different and we don't have any specific id's.

Our last step is to simply destructure our prop values from the project:

import data from '../data/ProjectData'

const Projects = () => (
  <>
    {data.map(project => {
      let {img, title, description, tech} = project

      <ProjectCard
        key={title}
        img={img}
        title={title}
        description={description}
        tech={tech}
      />
    })}
  </>
)

export default Projects

We now have a readable and manageable component that will allow for expansion in the future!

Conclusion

Props are an essential part of React that allow components to adapt to the data they receive. As we've see, it's always good practice to loosen data from the display to provide more flexible and focused components.

I hope you found this article well and that you and your family are healthy!

Building your own Create React App template

David Quick — Thu, 02 Jul 2020 23:55:33 +0000

As per the create-react-app docs. Creating templates is a feature available with react-scripts@3.3.0 and higher.

Using CRA (create-react-app) is a convenient and fast way to get started on a React project. Chances are, you have a set of favorite packages and tools that you use when setting up a new project.

Having to constantly install these packages and tools every time you create a project gets tiring and unless your aim is to specifically learn how to set up a React project, there's no need to always do so.

This is where a CRA template comes in hand. By creating your own template, you can run a single command and have everything at your disposal.

Overview

We'll walk through the process of creating a very basic CRA template and publish our template to npm so that we can use it and share it with others.

Getting Started

Head into a folder where you want your template to live and open your terminal to that location.

You can then run the following command in your terminal:

npx create-react-app cra-template-[template-name]

[template-name] should be changed to the actual name of your template and must follow the convention of cra-template- followed by your template name. You can name this anything you'd like, just make sure it's unique compared to the pre-existing published templates. I've named mine cra-template-custom-styled for the sake of this article.

Once CRA has finished, you can move into the app and run it with the following commands:

cd cra-template-custom-styled
yarn start

Now we have a simple CRA project that we can begin customizing to our liking.

Building The Template

Let's focus on setting up our template structure before we add the features we want.

The structure for any CRA template will be as follows:

cra-template
│ └───template
│   │   gitignore
│   │ 
│   └───public
│       │   ...   
│   └───src
│       │   App.js
│       │   App.test.js
│       │   index.css
│       │   index.js
│       │   ...   
│   package.json  
│   README.md
│   template.json

Note: You can head over to the base cra-template to get a more visual understanding of the file and folder structure if the above confuses you.

Let's go ahead and structure our app by creating a template folder at the top level and moving both the src and public folders inside the template folder.

You can then take the .gitignore file and move it into the template folder. With this, we can also remove the . from the start of the file so that it looks like this: gitignore.

Just for clarity, the gitignore file should not have the . in front of it.

We can also delete both the yarn.lock file and the package-lock.json file in the root as well as the node_modules folder.

One last thing is to create a template.json file in the root of our project and add the following to it:

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.1"
    }
  }
}

This template.json file is where we'll store all of our packages.

Adding Dependancies

For this particular template, we're going to use styled-components.

You're more than welcome to use any dependencies you'd like.

Let's add styled-components and a babel plugin by adding the following to our template.json file:

"styled-components": "^5.1.1,"
"babel-plugin-styled-components": "^1.10.7"

Note: Normally you'd want to add these as a devDependency, but cra-templates currently don't support the use of devDependencies. You can read more here as to why.

The reason that we've manually added these instead of installing them is because once we run CRA, it will look inside the template.json file and download all of the dependencies listed for us.

Make sure you do a quick npm search for the dependencies you want to add and their correct version number.

Your template.json file should now look like this:

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.1",
      "styled-components": "^5.1.1",
      "babel-plugin-styled-components": "^1.10.7"
    }
  }
}

With the addition of the babel plugin, we need to create a .babelrc file in our template folder and add the following to the .babelrc file:

{
  "plugins": ["babel-plugin-styled-components"]
}

Editing package.json

When creating a template, the package.json file will look a little different. Let's remove everything currently in our file and add the following:

{
  "name": "cra-template-custom-styled",
  "version": "1.0.0",
  "keywords": [
    "react",
    "create-react-app",
    "template"
  ],
  "description": "My custom template for Create React App.",
  "main": "template.json"
  "repository": {
    "type": "git",
    "url": "https://github.com/facebook/create-react-app.git",
    "directory": "packages/cra-template"
  },
  "license": "MIT",
  "engines": {
    "node": ">=10"
  },
  "bugs": {
    "url": "https://github.com/facebook/create-react-app/issues"
  },
  "files": [
    "template",
    "template.json"
  ]
}

Make sure the name field is the name of your template.

Within the package.json file, you should consider changing the description to better suit your template and changing the url to your repository. You could also add an author field and more keywords for any dependencies you've added.

The most important line within this file is "main": "template.json". If you don't have this, you won't be successful in publishing your template.

Customizing The Template

Aside from your dependencies of choice, the files you include within your template are completely up to you.

In general, CRA comes with a few files that you'll most likely end up getting rid of anyways.

You're free to follow along or create/delete any files and folders on your own from this point on.

Heading into the src folder, I've gotten rid of the following files:

App.css
logo.svg
serviceWorker.js

With those files gone, I've altered my App.js file to look as follows:

import React from 'react'
import styled from 'styled-components'

const App = () => (
  <AppContainer>
    <Intro>
       Welcome to my CRA-Template!
    </Intro>
  </AppContainer>
)

export default App

const AppContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  background: #1d1f27;
`

const Intro = styled.p`
  font-size: 2.5vw;
  color: #ffff;
`

I also removed the serviceWorker from the index.js file.

I won't go much further, as customizing the template to your liking is something only you know. The possibilities are endless!

Publishing The Template

You'll need an account with npm in order to publish your template. If you don't have one already, go ahead and create one.

Once created, head to your terminal and log in to npm with the following command:

npm login

You'll be prompted to put in your information. Once you're done, you can publish the template with:

npm publish --access public

Guess what? You just created your first create-react-app template!

To see it in action create a new project with the following command:

npx create-react-app your-project-name --template [your-template-name]

your-template-name should be the name of your template without the cra-template- prefix. The --template parameter will identify it as a template.

Closing

I hope you found this article useful. Build all the templates!!!

Data fetching with SWR in React

David Quick — Wed, 15 Apr 2020 01:24:24 +0000

SWR is a library that provides React Hooks for data fetching. It's made by ZEIT, the folks over at Next.js and allows you to pre-fetch your data on the client side while using http caching.

There are a lot of amazing features that come with SWR, but we'll be focusing on the basics. If you'd like to learn more, you can head over to the SWR page.

Getting Started

I've created a very basic skeleton to work with over at Codesandbox. You can use it to follow along.

I have gone ahead and added swr as a dependency and imported it in the main App component.

Using SWR

In our App.js file lets call the useSWR hook right above our return() statement:


  const { data, error } = useSWR(key, fetcher);

Above, we're using object destructuring with a data and error variable:

data: The data returned from the fetcher
error: The error provided

When calling useSWR(), we see that it take in two arguments:

key: The URL for the API endpoint or path if your data is local.
fetcher: A function that retrieves data from an API request.

In the case of our fetcher, we'll be using the fetch API. You can use any fetching library you feel most comfortable with. useSWR has no mandatory preference to how the data is fetched.

The API and Fetcher Function

For this article, we'll be using the Jikan API to fetch a list of top airing Anime titles.

The following code will be placed above our useSWR() call.

Let's start by storing our API endpoint in a variable:

  const url = 'https://api.jikan.moe/v3/top/anime/1/airing';

Now, we can go ahead and create our fetcher function:

  const fetcher = (...args) => fetch(...args).then(res => res.json());

The fetcher function above takes in all of our arguments using the spread operator and calls fetch. It may not seem obvious, but the arguments being spread is the url for our API. Fetch returns a promise so we use .then() to get the response and turn it into JSON.

Our component should now look like this:

import React from "react";
import "./styles.css";

import useSWR from 'swr';

export default function App() {
  const url = 'https://api.jikan.moe/v3/top/anime/1/airing';
  const fetcher = (...args) => fetch(...args).then(res => res.json());

  const { data, error } = useSWR(url, fetcher)

  console.log(data.top) 

  return (
    <div className="App">
      <h1>Fetching data with SWR</h1>
    </div>
  );
}

If we do a quick console log of our data as I've added above, we should see our fetched data with 50 objects.

I've used data.top as it's the exact endpoint to display our data.

The response for the first object should look something like this:

mal_id: 40591
rank: 1
title: "Kaguya-sama wa Kokurasetai?: Tensai-tachi no Renai Zunousen"
url: "https://myanimelist.net/anime/40591/Kaguya-sama_wa_Kokurasetai__Tensai-tachi_no_Renai_Zunousen"
image_url: "https://cdn.myanimelist.net/images/anime/1764/106659.jpg?s=aab19d0f19e345e223dc26542ac3a28f"
type: "TV"
episodes: null
start_date: "Apr 2020"
end_date: null
members: 164557
score: 8.8

If the title and result isn't exactly the same, no worries. The data received is top airing anime, so this could change depending on when you read this article.

The only thing left is to add quick error handling and to display some sort of notification in the event that the data doesn't load immediately. We can add the following to our existing code:

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

The above is pretty self explanatory, but we are simply saying if there is an error, then display "failed to load" and if there is no data, return "loading...".

Our full component should now look like this:

import React from "react";
import "./styles.css";

import useSWR from 'swr';

export default function App() {
  const url = 'https://api.jikan.moe/v3/top/anime/1/airing';
  const fetcher = (...args) => fetch(...args).then(res => res.json());

  const { data, error } = useSWR(url, fetcher)

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  return (
    <div className="App">
      <h1>Fetching data with SWR</h1>
    </div>
  );
}

We've successfully fetched our data using the useSWR hook!

Displaying the data

There's no use in having our data logged out to the console. We can quickly display our data by mapping over our data and displaying the title, image, and score:

import React from "react";
import "./styles.css";

import useSWR from 'swr';

export default function App() {
  const url = 'https://api.jikan.moe/v3/top/anime/1/airing';
  const fetcher = (...args) => fetch(...args).then(res => res.json());

  const { data, error } = useSWR(url, fetcher)

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  return (
    <div className="App">
      <h1>Fetching data with SWR</h1>
      <div>
        {data.top.map((anime) => {
          return (
            <div key={anime.mal_id}>
              <h2>{anime.title}</h2>
              <img src={anime.image_url} alt='poster'/>
              <p>{anime.score}</p>
            </div>
          )
        })}
      </div>
    </div>
  );
}

Here's what our final project looks like:

Further learning

This article came about as I was working on a Next.js project and found using swr to be an ideal tool for said project. I decided to write this article specifically using React as it reaches a broader audience.

In the event you are using Next.js, I would highly recommend watching this video. It provides an in depth look at the useSWR hook and more of its features.

Dynamically loaded content with RSS and Gatsby

David Quick — Wed, 11 Mar 2020 01:06:46 +0000

In this guide, we'll utilize gatsby-plugin-feed to generate an RSS feed that contains blog posts from a Gatsby site. We'll then use the RSS feed to display that data dynamically onto a different site using an NPM package called rss-parser.

Note:
Following this guide holds the assumption that you already have a blog built with Gatsby or some base knowledge of Gatsby.

If you don't have a blog with Gatsby, don't worry about it. You could follow this article and build one.

Installing the plugin

Open your Gatsby blog in whatever editor you'd like. I'll be using VS Code in specific.

Once you're all set, head to your terminal and enter in the following command:

yarn add gatsby-plugin-feed

If your blog is using MDX for blog posts instead of MD, then you can use the gatsby-plugin-feed-mdx plugin instead.

This will add the necessary plugin to our project as a dependency.

We can check that the plugin was installed successfully by opening up our package.json and looking under "dependencies" for gatsby-plugin-feed.

Using and understanding the plugin

In order to get the plugin to do what we want, we need to install it and make some changes within its configuration.

Head into your gatsby-config.js file and insert the following into the plugins array:

Navigating the plugins array can be tricky. What you need to keep in mind, is that each plugin is an object within an array. As we know, arrays are comma-separated. Each plugin will come after the other by adding a comma, followed by the new plugin and its configuration options (if there are any).

 {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMarkdownRemark } }) => {
              return allMarkdownRemark.edges.map(edge => {
                return Object.assign({}, edge.node.frontmatter, {
                  description: edge.node.excerpt,
                  date: edge.node.frontmatter.date,
                  url: site.siteMetadata.siteUrl + edge.node.fields.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
                  custom_elements: [{ "content:encoded": edge.node.html }],
                })
              })
            },
            query: `
              {
                allMarkdownRemark(
                  limit: 3,
                  sort: { order: DESC, fields: [frontmatter___date] },
                ) {
                  edges {
                    node {
                      excerpt
                      html
                      fields { slug }
                      frontmatter {
                        title
                        date
                      }
                    }
                  }
                }
              }
            `,
            output: `/rss.xml`,
            title: `RSS feed name`,
          },
        ],
      }
    }

There's a lot to take in, but we'll walk through it together.

The gatsby-feed-plugin options are doing several things for us:

Query our sites metadata
Creating a feeds array to construct the RSS skeleton
Using allMarkdownRemark for any related files and fields
Gives fields for RSS file name and title

What we want to focus on are the output and title fields. The output field will be the path in our URL and the title field will be the name of your RSS feed.

You can configure your field options like so:

output: `/rss.xml`,
title: `Your RSS feed name here`,

Once you've done that, you're all set with adding and configuring the plugin!

I mentioned before that if you're using MDX, you'll have to use a different plugin. Along with the alternate plugin, there are a few configuration changes that need to be made. You can follow this video for said changes.

Viewing Our Feed

The RSS feed can only be viewed for production builds, so we'll need to build our Gatsby site and then serve it using a local server.

You can go ahead and open your terminal and type in the following:

gatsby build && gatsby serve

Once Gatsby has done its thing, you should see the following in your terminal:

gatsby serve running at: http://localhost:9000/

Open the link and add your RSS path to the end of the URL like so:

http://localhost:9000/rss.xml

You should now see your blog posts in XML format. Your RSS feed is officially set! Now, let's take our newly created feed and do something with it.

Using our RSS feed

We'll be moving away from our Gatsby site and using our feed by injecting it into another.

I wanted to display my most recent blog posts on my portfolio to show more of my work, so I'll be using a component in my portfolio as an example.

I implemented the rss-parser library to grab my RSS feed and parse it so that I could use the data returned to display my posts. Here's the main working piece behind displaying the RSS feed:

  const rssData = async () => {
    const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
    let parser = new RSSParser();

    try {
      const feed = await parser.parseURL(`${CORS_PROXY}https://papabearcodes.com/rss.xml`)
      setFeed(feed)
    } catch (error) {
      console.log(error)
    }
  }

In the snippet above, I created an asynchronous function rssData that grabs my RSS feed and parses it into a JavaScript object. If you're wondering what the CORS_PROXY variable is, it contains a url to an API that allows cross-origin requests anywhere. This is needed because some RSS feeds will not load due to CORS security.

If you're unfamilair with async await and prefer callbacks or promises, rss-parser uses a callback in their documentation example:

const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"

let parser = new RSSParser();
parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', function(err, feed) {
  if (err) throw err;
  console.log(feed.title);
  feed.items.forEach(function(entry) {
    console.log(entry.title + ':' + entry.link);
  })
})

That's pretty much it. Once you've created an RSS feed, using rss-parser makes your feed a portable asset.

Here is my full component for displaying content from my RSS feed:

import React, {useState, useEffect} from 'react'
import RSSParser from 'rss-parser'

const RssFeed = () => {
  const [feed, setFeed] = useState({ title: '', items: [] })

  const rssData = async () => {
    const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
    let parser = new RSSParser();

    try {
      const feed = await parser.parseURL(`${CORS_PROXY}https://papabearcodes.com/rss.xml`)
      setFeed(feed)
    } catch (error) {
      console.log(error)
    }
  }
  useEffect(() => {
    rssData()
  }, [])

    return (
    <div>
      <h1>Blog Posts</h1>
      <p>{feed.title}</p>
      {feed.items.slice(0, 3).map((item, i) => (
          <div key={i}>
              <h1>{item.title}</h1>
              <p>{item.content}</p>
              <p>{item.pubDate}</p>
          </div>
      ))}
    </div>
    );
  }

export default RssFeed

Theming with CSS Variables

David Quick — Wed, 05 Feb 2020 18:05:55 +0000

Out of pure meddling and frustration over being stuck on a project for a lot longer than expected, I learned quite a bit about CSS variables and how they allow us to make dynamic changes with ease.

We'll look at CSS variables at a glance and then dive into a small project I've created. The main focus is to showcase how CSS variables and JavaScript make a "dynamic" duo.

What are CSS Variables?

CSS variables are "custom properties" that act as a value for CSS declarations within your stylesheet. If you're familiar with preprocessors such as Sass and Less, then you'll get the hang of them instantly. If not, no worries. Just think "dynamic variables" and it'll come to eventually.

You create your CSS variables by using two hyphens "--" followed by the variable name, a colon ":", then the actual CSS value. The syntax looks like this:

--main-color: #333;

Where do I place all my CSS variables?

Your CSS variables can be placed within any element, but it's common to put them within the :root element. This allows your variables to:

have one central location
have higher specificity as the :root targets the HTML element
have global scope as opposed to local scope on a single element (not necessarily a bad thing)

:root {
  --main-color: #333;
  --secondary-color: #444;
}

If you're curious about having locally scoped CSS variables, you can take a look at this awesome article discussing its advantages.

How do I actually use them?

Let's say we want to set the background color of a specific div. Take the CSS variable name and wrap it within the "var()" function. You can then set it as the property value to a CSS declaration like so:

div {
  background-color: var(--main-color);
}

Fallbacks

You can give your CSS variables a fallback value in the event that your variable is invalid. Simply add a comma after the variable and then provide the fallback as the second parameter.

div {
  background-color: var(--main-color, grey);
}

Personally, I find this rattles the entire idea of having variables as you have to place the actual fallback (the initial value of the variable) directly in the variable call.

/* This won't work */

:root {
  --main-color: #333, grey;
  /* Fallbacks cannot be written within the initial creation of the variable. */
}

CSS variables in practice

I've built out a small project showcasing how CSS Variables can be used in a dynamic way. We'll primarily be focusing on the styles and functionality, so don't worry too much about the HTML document aside from our inputs.

Setting Up Our CSS Variables and Initial Values

If you head over to the styles.css file, you'll see all of the CSS variables we'll be using defined within the :root element.

:root {
  --base-font: 16px;
  --background-color: #ffba49;
  --text-color: #000000;
}

With our variables defined, we can then attach them as a value to a specific CSS property. In our case, all of our variables will sit within the .text-section class, as these are the only dynamic parts we want to target.

.text-section {
  background: var(--background-color);
  color: var(--text-color);
  font-size: var(--base-font);
}

Inputs

We have two color inputs and a range input that will allow us to select our desired color and font size.

<input id="background-color" type="color" value="#ffba49" />
<input id="text-color" type="color" value="#000000" />
<input
    type="range"
    id="base-font"
    value="14"
    min="12"
    max="16"
    step="1"
    name="font-size"
  />

The background-color, text-color and base-font id's on our inputs correspond to the CSS variables we defined. This will allow us to have a link between our input values and CSS variable values.

Dynamic Functionality

If you head over to the index.js file you'll notice that there isn't much going on, so let's walk through everything.

const inputs = document.querySelectorAll("input");

const handleUpdate = event => {
  const suffix = event.target.id === "base-font" ? "px" : "";

  document.documentElement.style.setProperty(
    `--${event.target.id}`,
    `${event.target.value}${suffix}`
  );
};

inputs.forEach(input => input.addEventListener("input", handleUpdate));

Initially, we're grabbing all of our inputs and storing them in a variable called inputs.

const inputs = document.querySelectorAll("input");

One line down, you'll see the handleUpdate function. Let's go over the first line within the function.

const suffix = event.target.id === "base-font" ? "px" : "";

Here, we're creating a variable called suffix which holds a ternary operator that states if the current target element has an id of base-font, then give us a string of "px" else an empty string.

Moving further down is where the magic happens. This is where our CSS variables come to life.

document.documentElement.style.setProperty(
    `--${event.target.id}`,
    `${event.target.value}${suffix}`
  );

What's going on here is that document.documentElement.style is being used to access the root element of the page <html> and allow us to set styles via the style property.

The setProperty method that follows, takes in three parameters, but we'll only be giving it two. A property name and value.

setProperty(
`--${event.target.id}`, `${event.target.value}${suffix}`
)

In this instance, the property name is the target element written in the form of a CSS variable using two hyphens -- before the name.

event.target.id will target the current element being accessed with its id which is the name defined as our CSS variables.

// If the background color input is clicked then 
`--${event.target.id}` 

// becomes
`--${background-color}`

event.target.value is the value selected for any element that's currently being targeted.

suffix (as we saw earlier holds either "px" or "") is added to the end of the value in case the font size input is selected. This is because the font-size CSS property takes a value that ends in "px".

Lastly, we loop over each input and attach an event listener to the input event which triggers the handleUpdate function.

  inputs.forEach(input => input.addEventListener("input", handleUpdate));

I've decided to use the input event rather than the change event because input events fire as soon as the value on an input changes, rather than waiting for the value to be fully set. This allows us to see the value change as we slide our input slider and move our cursor around the color input.

Wrapping up

Hopefully you have a better understanding of CSS variables and how to use them in a dynamic way. Feel free to further build out the project I started and build something cool!

If you're interested in seeing the project that sparked this article, you can head over to Merlins Marker.

Learn the useState hook by example

David Quick — Tue, 19 Nov 2019 14:56:26 +0000

In this guide, we'll take a look into useState by comparing class and function components.

This isn't an in-depth look as there are other great features of the useState hook that aren't included in this guide.

What Are Hooks?

React hooks are functions that allow us to access state and lifecycle methods in functional components without having to write a class component.

Prior to hooks, the only way to access the state was by using a class component. Functional components were purposed for handling anything UI related without logic. You may have heard them called "stateless functional components" or "presentational components".

Let's Dive In

I've created a small project that displays two planets using React Kawaii. For the given planets, you can toggle their mood by clicking the Emotion Toggle button.

Class Component

import React, { Component } from 'react';
import { Planet } from 'react-kawaii';

class PlanetClass extends Component {

  state = {
    emotion: true
  }

  handleToggle = () => {
    this.setState(prevState => ({
      emotion: !prevState.emotion
    }))
  }

  render() {
    const { emotion } = this.state
    const emotionCondition = emotion ? 'blissful' : 'ko'

    return (
      <>
        {<Planet size={250} mood={emotionCondition} color="#FDA7DC" />}
        <button
          className='emotion-btn'
          onClick={this.handleToggle}
        >
          Emotion Toggle
        </button>
      </>
    )
  }
}

export default PlanetClass

Above, our component has a single state named emotion with an initial value of "true". Following this, we have a method called handleToggle that takes the initial state and provides the opposite.

The handleToggle method then gets attached to the onClick event handler within our button, allowing us to click the button and toggle between the emotionCondition.

The emotionCondition is a condition that takes the initial state of emotion: true and provides a property of "blissful" if true otherwise "ko" if false.

Please note that I've used the Class Fields syntax in this class component. This allows me to write property instances directly within the class and eliminates the need to create a constructor and call super (my favorite). If you want to learn more about the Class Fields syntax, I'd highly suggest reading this article by Tyler Mcginnis.

I am also using an arrow function for the handleToggle method to avoid binding methods in the constructor since arrow functions have their own "this".

Functional Component

import React, { useState } from 'react';
import { Planet } from 'react-kawaii';

const PlanetHook = () => {
  const [emotion, setEmotion] = useState(true)

  const handleToggle = () => {
    setEmotion(prevState => !prevState)
  }

  const emotionCondition = emotion ? 'blissful' : 'ko'

  return (
    <>
      {<Planet size={250} mood={emotionCondition} color="#61DDBC" />}
      <button
        className='emotion-btn'
        onClick={handleToggle}
      >
        Emotion Toggle
        </button>
    </>
  )
}

export default PlanetHook

At first, you'll notice our functional component using hooks has significantly less code (rubs hands together).

Let's break this down and go over the changes while comparing what we had before.

Within the first line, we've imported useState as a named export from 'react'.

import React, { useState } from 'react';

Let's move down to line five where we've called useState.

  const [emotion, setEmotion] = useState(true)

This single line is what makes our function stateful.

We have two elements within an array, emotion and setEmotion. Both are being destructured (array destructuring) and will be the return value of useState. Within the parenthesis of useState, we store the initial value of our state.

Confusing? We'll go further.

Within the array the first value will be the name of the state and the second will be the setter for the state. Both can be named anything, but it's common practice to include "set" followed by the state name as the setter (second value).

setEmotion is the equivalent of setState in a class component.

Let's take a quick glance at the state in the class and function component.

// Class Component
state = {
    emotion: true
  }

// Function Component
  const [emotion, setEmotion] = useState(true)

Comparing the two, we have a few things that don't inherently change.

state and useState are both keywords that dictate state
the name of our state (emotion) remains
the value of our state remains

The key differences in useState are:

We don't store state within an object literal
We use destructuring to name our state and state setter
Our state value is written within the parenthesis following the useState keyword

How Do I Set State?

Remember, the second value of the array is the setter. We'll use that when updating state. Check out both methods for the class and function component.

// Class Component
handleToggle = () => {
  this.setState(prevState => ({
    emotion: !prevState.emotion
  }))
}

// Function component
  const handleToggle = () => {
  setEmotion(prevState => !prevState)
}

Above, our class component uses setState followed by an object literal within a callback.

In our function, we call setEmotion with the desired updated state.

Both are using callbacks since we are setting state based on a previous state. Also, setState in React is actually asynchronous. This means that after calling setState, the state variable itself may not change right away so it's best to use a callback.

Is that all?

Of course not, there's always more. For now, I'll see you next time and bring useEffect with me.

Immutable objects with preventExtensions(), seal(), and freeze()

David Quick — Sun, 27 Oct 2019 20:29:42 +0000

There are times where you'll have an object and want to preserve it's properties and restrict its behavior. This is when we can reach for preventExtensions, seal, or freeze.

Let's create an object with several properties. We'll be working with the same object as to avoid confusion.

const village = {
 elder: "Greybeard",
 population: 120
}

preventExtensions()

Object.preventExtensions() prevents new properties from being added to the object that's passed as its argument. Let's see how that works.

Object.preventExtensions(village)

village.group = "outsiders" // TypeError: can't define property "group": Object is not extensible

Above, we attempted to add a new property to our object. By using preventExtensions, we prevented a group of outsiders from entering our village object.

seal()

Object.seal() borrows from preventExtensions by not allowing new properties to be added to an object and also preventing properties from being deleted.

Object.seal(village)

village.group = "outsiders" // TypeError: can't define property "group": Object is not extensible

delete village.elder // TypeError: property "elder" is non-configurable and can't be deleted

We see that we cannot add a group or remove our existing elder from the village object. However, we can still change our elder because our properties are writable. Let's see what that means.

Object.seal(village)

village.elder = "Blackbeard" 

console.log(village.elder) // "Blackbeard"

Our elder has now become Blackbeard.

freeze()

Object.freeze() takes from both preventExtensions and seal in that We cannot add new properties and we cannot delete existing properties. The new addition is that it also prevents existing properties and their values from being changed.

Remember the writable issue with seal?

Object.freeze(village)

village.elder = "Redbeard" 

console.log(village.elder) // TypeError: "elder" is read-only

NOTE: Object.freeze() only does a shallow freeze. Nested objects will not be frozen.

Overview

Each method has its own use case and I don't blame you for not remembering them off the bat (I sure as heck didn't and still get confused from time to time). What helps me is to start from the least restrictive and work my way up from there. Also, breaking down the actual syntax is what helped me the most.

Here's my odd rationale behind remembering them.

You have three sisters with superhuman abilities. From the oldest down, each sister gets a new ability while maintaining the ability of the other.

Oldest sister - Object.preventExtensions(): You can't (extend) add more properties.
Middle sister - Object.seal(): Seals an object, preventing properties from being deleted (What's inside cannot get out). Acquires the same ability from preventExtensions.
Youngest - Object.freeze(): Freezes an object (nothing can be altered) and borrows the abilities from preventExtensions and seal.

Hoisting in JavaScript

David Quick — Fri, 25 Oct 2019 16:17:42 +0000

I feel it's safe to say that hoisting in JavaScript leads to a lot of confusion and it's mainly due to how it's explained and our condition to take words immediately for what they are.

Hoisting is the physical act of moving something right? Yes, but not in this case. Yet, you may have heard "Hoisting is when declarations are moved to the top of your code". Well... not really.

Function Hoisting

Let's look at a basic example of a function declaration.

function getName(name) {
  console.log(`My name is ${name}`)
}

getName("Dave") // My name is Dave

Above, we declared a function named getName and then call it.

Now, let's flip it and call the function before it's declared.

getName("Dave") // My name is Dave

function getName(name) {
  console.log(`My name is ${name}`)
}

You might be surprised, but our output is exactly the same without any errors. Let's see why.

Keep in mind, this behavior only applies to function declarations. Function expressions are not hoisted.

Under the hood

When the JavaScript engine runs your code, it sets up something called the Global Execution Context. In this, there are two phases, the creation phase and execution phase. During the creation phase, JavaScript has done the following to your variable and function declarations:

Created space in memory to store variables and functions
Set variables to have a value of undefined.

NOTE: There are two other steps before this (global object and the "this" keyword) but to avoid confusion, I have left those out as a seperate topic.

The simple breakdown

JavaScript looked through our code, grabbed the getName function in it's entirety and placed it in memory during the creation phase. It then moved onto the execution phase where it went through our code line by line and once it hit the getName() call, it checked it's memory space and found the getName function to use.

Variable hoisting

Earlier, we learned that during the creation phase variables are set to undefined. Let's look at an example to better understand that.

var fruit = "apple"

console.log(fruit) // "apple"

Let's see what happens when we declare our variable after we call it.

console.log(fruit) // undefined

var fruit = "apple"

Why do we get undefined and not an error? Let's drill it in one more time. Variables are set to undefined and put in memory during the creation phase.

The above code behind the scenes really looks like this

var fruit = undefined

console.log(fruit) // undefined

fruit = "apple"

As for ES6, let & const are not hoisted.

Closing

Hopefully you have a better understanding of what hoisting is and what it isn't. The next time someone asks, you'll be able to confidently say:

Hoisting is when the JavaScript engine puts function declarations into memory and sets variables to undefined during the creation phase.