DEV Community: Jason Melton

Building Jason Chess — Part 1: Rendering the Board and Pieces

Jason Melton — Mon, 26 Oct 2020 13:38:43 +0000

An ongoing series about building a React app called Jason Chess, a version of chess where if your name is Jason, you can’t lose.

What Is All This?

Over quarantine, I’ve become very addicted to chess. I like how random chance plays a small role in the game. Instead, better players manifest from hours of obsessive study. Getting better at chess has been a great distraction from the world crumbling all around me, lol.

As an engineer, it’s my job to build solutions to problems, right? Right. Well I’ll identify one problem that exists: me losing at chess. My solution: Jason Chess.

Jason Chess is a version of chess where if your name is “Jason”, you can’t lose.

This blog will follow the development of Jason Chess. It’s my goal to provide you with something instructive or, at minimum, I hope you find the some humor in the idea.

I’m a junior developer so please forgive my imprecisions. If you have any feedback, please comment or to email me at jason.melton2@gmail.com.

jump to the GitHub

Rendering the Board and Pieces

Preliminary Junk
Basic Layout and Menu
Rendering the Board
Rendering the Pieces
Conclusion

Preliminary Junk

To get this bad boy started, I set up a create-react-app, deleted default junk, and created a GitHub repository. Before going further, I spent some time planning. I like to write as I plan so I’ll keep some commented out notes in the readme until the project is finished.

I think of the work for this project in two parts: the logic and the render. Very similar to the divide between a front and back end. However, in this case, I won’t have a true back end.

The logic of the chess board will be an array of eight arrays. Each array will have a length of eight to represent the 64 spaces of a chess board. Pieces will be coded with two character strings.

  const boardArr = [
      ["br", "bn", "bb", "bq", "bk", "bb", "bn", "br"],
      ["bp", "bp", "bp", "bp", "bp", "bp", "bp", "bp"],
      [null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null],
      ["wp", "wp", "wp", "wp", "wp", "wp", "wp", "wp"],
      ["wr", "wn", "wb", "wq", "wk", "wb", "wn", "wr"]
    ]

The render will consist of mapping boardArr into the corresponding components.

Basic Layout and Menu

For now, I’m going to keep the app simple. There will be two main elements: a chessboard and a menu.

Later, I will also add a box above and below for entering the player’s name. Remember, if your name is “Jason”, then you cannot be checkmated.

I picked out some colors from Coolors.co and added height and width to the App component. I also created a class called .cfb (center flex box) that I use to center things throughout the project.

App.css

* {
    margin: 0;
    padding: 0;
}

.App {
    width: 100%;
    height: 100vh;
}

.cfb {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

The menu is a simple component, Navbar.js:

import React from 'react';

// styling
import './Navbar.css';

const Navbar = () => {
  return (
    <div className="Navbar">
        <h1 className="logo">Jason Chess</h1>
    </div>
  );
}

export default Navbar;

Navbar.css

.Navbar {
    padding: 1rem;
    background-color: #0A090C;
    color: #F0EDEE;
}

I’ll cover the chessboard in the next two sections.

Rendering the Board

My plan for the board is this: I will map my boardArr into 64 divs that will be evenly displayed using CSS grid.

I’ll show the whole Board component and CSS file and explain my work:

Board.js

import React from 'react';

// styling
import './Board.css';

// components
import PieceImg from './PieceImg'

const Board = props => {
    const { board, setBoard, turn, setTurn } = props
    // takes num, returns true if even
    const isEven = n => n % 2 === 0;
    // returns string of classnames for square
    const squareClass = index => {
        const classArr = ["cfb"]
        // rank even, file odd OR rank odd, file even --> dark square
        const rank = isEven(Math.floor(index/8))
        const file = isEven(index % 8)
        if ((rank && !file) || (!rank && file)) classArr.push("dark")
        return classArr.join(" ")
    };

    const renderBoard = () => {
        let startNum = 0
        const counter = () => startNum++
        return board.map(rank => rank.map(sq => {
            let sqNum = counter()
            return (
                <div key={sqNum} 
                    className={squareClass(sqNum)}>
                    <PieceImg piece={sq ? sq : false}/>
                </div>
            )
        }))
    }

    return (
        <div className="Board">
            {renderBoard()}
        </div>
    );
}

export default Board;

Board.css

.Board {
    margin: 2rem;

    height: 35rem;
    width: 35rem;

    border: 1rem solid #0A090C;
    border-radius: 1rem;

    background-color: #F0EDEE;
    display: grid;
    grid: repeat(8, 1fr) / repeat(8, 1fr);
}

.dark{
    width: 100%;
    height: 100%;
    background-color: #90DDF0;
}

.piece-img {
    width: 100%;
    height: 100%;
}

Board gets the boardArr as props. The function renderBoard() maps each rank of boardArr and then each square of each rank to return a div. That way I get 64 divs.

I use the function squareClass() to determine the classnames for each square. Light squares get a class of cfb and dark squares get a class of cfb dark.

As previously mentioned, cfb adds a centering flex box and dark adds a light blue background-color.

squareClass() also determines which squares are dark squares. I use the helper function isEven() to do this.

Starting from 0, even ranks and odd files are dark while on odd ranks, even files are dark. I find the rank and file of each square and add dark to the appropriate divs.

Rendering the Pieces

I render the pieces in two steps:

I create a picture library that can be accessed via an object.
I create a dynamic function that plugs in the correct image for the string code in the boardArr.

I found this great site for chess piece svgs. I threw the images in a folder and created a file called index.js.

In index.js, I created an object called pieceObject that accesses the image based on a key corresponding to the string codes in the array.

export const pieceObject = {
    wp: require('./wpawn.png'),
    wn: require('./wknight.png'),
    wb: require('./wbishop.png'),
    wr: require('./wrook.png'),
    wq: require('./wqueen.png'),
    wk: require('./wking.png'),
    bp: require('./bpawn.png'),
    bn: require('./bknight.png'),
    bb: require('./bbishop.png'),
    br: require('./brook.png'),
    bq: require('./bqueen.png'),
    bk: require('./bking.png')
}

Next, I feed this object to a component called PieceImg.

import React from 'react';

// images
import { pieceObject } from '../../images/index.js'

// styling
import './Board.css';

const PieceImg = props => {
    const { piece } = props
    return (
        piece ? 
            <img className="piece-img" src={pieceObject[piece]} alt="piece"/> 
                : <div></div> 
        );
}

export default PieceImg;

PieceImg takes props of piece that will be a code like bp for black pawn or wn for white knight. The pieceObject looks up the corresponding image. Also, if there isn’t a piece code on the square, piece will point be false and I will return an empty div.

const renderBoard = () => {
        let startNum = 0
        const counter = () => startNum++
        return board.map(rank => rank.map(sq => {
            let sqNum = counter()
            return (
                <div key={sqNum} 
                    className={squareClass(sqNum)}
                    onClick={() => clickPiece(sq, sqNum)}>
                    <PieceImg piece={sq ? sq : false}/>
                </div>
            )
        }))
    }

Look again at the renderBoard() function in Board. Here you can see the PieceImg is being fed the props of a piece code or false.

Conclusion

Thanks a ton for reading. Again, I assume there are some great ways to make chess games. I came up with this off the top of my head, grinding out bugs along the way. I’m sure there are better ways so I’d love your feedback. Hit me with a comment or an email — jason.melton2@gmail.com.

This will be an ongoing project so I may be inconsistent with the blogs, but I appreciate you reading.

Best, Jason

Building an Animated Counter with React and CSS

Jason Melton — Mon, 19 Oct 2020 23:16:55 +0000

In this blog, I attempt to create my own version of an animated counter component that I keep finding all over the web.

I’ll show you how I went about it, but I would love feedback. Do you know a better way to do this?

Leave a comment or shoot me an email at jason.melton2@gmail.com.

the code on Github

Tutorial

Preliminary Junk
Count Component
Increment Function
Conclusion

Preliminary Junk

I set up a create-react-app, deleted a bunch of default stuff, and a file structure like this:

I added some basic CSS to the App component — height, width, and flex box to center all its contents.

.App {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

I also set up a JSON file containing the data that I will map into Count components.

{
    "counts": [
        {
            "id": "001",
            "label": "A Really Big Number",
            "number": "900000",
            "duration": "2"
        },
        {
            "id": "002",
            "label": "Ice Cream Flavors",
            "number": "5321",
            "duration": "2"
        },
        {
            "id": "003",
            "label": "Customers Served",
            "number": "100",
            "duration": "2"
        },
        {
            "id": "004",
            "label": "Complaints",
            "number": "0",
            "duration": "2"
        }
    ]
}

Count Component

The object of my Count component is to accept some data about how the count should run and render the animation.

First, I set up a basic component.

import React from 'react';

//styling
import './Count.css';

const Count = props => {
  // label of counter
  // number to increment to
  // duration of count in seconds
  const {label, number, duration } = props.data

  return (
    <div className="Count">
      <h3>
        <i>{label}: {number}</i>
      </h3>
    </div>
  );
}

export default Count;

Count gets props of a data item from data.json. I destructured the label, number, and duration from the props.

Using JSX, I return the label and number as a header.

Later, I will change number so that it animates, but for now I can style the hard-coded version of what I’m building.

.Count {
    padding: 2rem;
    margin: 1rem;

    border-radius: 2em;
    box-shadow: 1px 2px 2px #0D3B66;
    background-color: #FAF0CA;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #0D3B66;
}

Increment Function

I set up a function that increments from 0 to the desired number in these three steps:

1) Set up a useState hook that saves our display number and, when updated, will trigger a render of the component.

The hook looks like this:

  // number displayed by component
  const [count, setCount] = useState("0");

I update the JSX to display count instead of number.

  return (
    <div className="Count">
      <h3>
        <i>{label}: {count}</i>
      </h3>
    </div>
  );

2) Set up a useEffect hook that calculates the count and increment time.

useEffect() takes an anonymous function that will handle the count. I create variables start and end. start is set to 0.

Initially, I used number as my end. However, for large numbers, this would take all night. Instead, I only increment the first three digits of the number and paste the the rest of back before updating the count.

I calculate the rate of each increment by dividing the duration (seconds) by the number of increments I plan on doing and multiply by 1000 to convert to milliseconds.
Image for post

  useEffect(() => {
    let start = 0;
    // first three numbers from props
    const end = parseInt(number.substring(0,3))
    // if zero, return
    if (start === end) return;

    // find duration per increment
    let totalMilSecDur = parseInt(duration);
    let incrementTime = (totalMilSecDur / end) * 1000;

    // dependency array
  }, [number, duration]);

I was hoping to speed up the interval to make up for how long it would take to increment large numbers, but setInterval() has a minimum duration of 10 milliseconds. Any number less than 10 will reset back to 10.

3) In that same useEffect hook, I employ setInterval() to increment the count with side effect of re-rendering the component.

I add one to start and call setCount() to update my useState hook. I convert start to a string and, if it’s a large number, I concat the rest of the number that I previously chopped off.

    // timer increments start counter 
    // then updates count
    // ends if start reaches end
    let timer = setInterval(() => {
      start += 1;
      setCount(String(start) + number.substring(3))
      if (start === end) clearInterval(timer)       
    }, incrementTime);

The entire component will now look like this:

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

//styling
import './Count.css';

const Count = props => {
  // label of counter
  // number to increment to
  // duration of count in seconds
  const {label, number, duration } = props.data

  // number displayed by component
  const [count, setCount] = useState("0")

  useEffect(() => {
    let start = 0;
    // first three numbers from props
    const end = parseInt(number.substring(0,3))
    // if zero, return
    if (start === end) return;

    // find duration per increment
    let totalMilSecDur = parseInt(duration);
    let incrementTime = (totalMilSecDur / end) * 1000;

    // timer increments start counter 
    // then updates count
    // ends if start reaches end
    let timer = setInterval(() => {
      start += 1;
      setCount(String(start) + number.substring(3))
      if (start === end) clearInterval(timer)       
    }, incrementTime);

    // dependency array
  }, [number, duration]);

  return (
    <div className="Count">
      <h3>
        <i>{label}: {count}</i>
      </h3>
    </div>
  );
}

export default Count;

Conclusion

I read through several articles about this sort of animation and combined their ideas with my instinct to make this abstract reusable component.

I am not sure what I came up with is the best method. For example setInterval had limitations I didn’t foresee. I would love some feedback. Feel free to comment or shoot me an email at jason.melton2@gmail.com.

Best, Jason

Using Chart.js to Display Poll Data in a Cool Way

Jason Melton — Mon, 12 Oct 2020 14:28:35 +0000

It’s voting time. Get ready to see a million graphs showing poll results of all the various groups — how many left-handed cellists voted green party, how many fiscally liberal vampires want to defund global warming, how many otters have the public opinion that eating is best while lying on your back.

I used Chart.js to build a bar graph that displays poll results between three counters. In this blog, I’ll show you how I did it.

the code on GitHub

Tutorial

Preliminary Junk
HTML & CSS
JavaScript for Vote Buttons and Results Text
Applying Chart.js
Conclusion

Preliminary Junk

To start, I set up a file for my HTML, CSS, and JavaScript. Then, I installed Chart.js with npm:

npm install chart.js --save

I ended up with a file structure (minus the demo) like this:

HTML & CSS

I set up the bones for this project in index.html.

   <div class="c-container"> 
        <!-- chart.js attaches to canvas element -->
        <canvas id="r-chart"></canvas>           
    </div>

    <div class="o-container">
      <!-- Vote Buttons -->
        <h3 class="r-header">Vote:</h3>
        <button id="a-btn" class="option">A</button>
        <button id="b-btn" class="option">B</button>
        <button id="c-btn" class="option">C</button>
      <!-- Results Text -->
        <h3 class="r-header">Results:</h3>
        <p id='a-text' class="results">0</p>
        <p id='b-text' class="results">0</p>
        <p id='c-text' class="results">0</p>
    </div>

And, I connected my stylesheet, JavaScript file and the Chart.js node module.

  <head>
    <link rel="stylesheet" href="styles.css">
    <title>Poll Machine</title>
  </head>
...
...
    <!-- chart.js library -->
    <script src="node_modules/chart.js/dist/Chart.js" defer></script>

    <script src="index.js" defer></script>

I added CSS to make the buttons and text look nice. I added some color, margins, padding, and put everything in a grid. I’m not going to go into severe detail, but you can find the CSS here.

JavaScript for Vote Buttons and Results Text

With the counter buttons’ HTML and CSS looking decent, I went to work on their functionality.

First, I grabbed all the buttons and text nodes by their classnames.

    // VOTE BTN ARR
    const btnArr = [...document.getElementsByClassName('option')];
    // RESULT TEXT ARR
    const txtArr = [...document.getElementsByClassName('results')];

Using .getElementsByClassName() returns an HTMLCollection type. These are similar to an array, but you cannot use array methods like map() with them. I used the spread operator ( ... ) to copy the HTMLCollection into a new array.

I set up an initial vote count for each button:

    // INITIAL VOTE COUNT
    let resultA = 0
    let resultB = 0
    let resultC = 0

With my buttons in an array, I map over them and give each an event listener. Whenever, a button is clicked it will the function updateVote().

    // ADD CLICK LISTENER TO BTNS
    const clickableBtns = () => {
        return btnArr.map(btn => {
            return btn.addEventListener('click', () => updateVote(btn.id.charAt(0)))
        })
    }

updateVote() does all the work. It takes a parameter of the first character ( charAt(0) ) of the button id. This will be 'a', 'b', or 'c'. Then, it adds one to the correlated result variable.

Next, I map over my results text. These are an array of paragraph elements I have stored in txtArr. I map this array to display the proper result for each element.

Finally, I update the chart. I will cover this in the next section.


    const updateVote = (choice) => {
        // ADD ONE TO CHOICE
        if (choice === 'a') resultA++
        if (choice === 'b') resultB++
        if (choice === 'c') resultC++

        // UPDATE RESULT TEXT
        txtArr.map(txt=> {
            let ch = txt.id.charAt(0)
            if (ch === 'a') return txt.innerHTML = resultA
            if (ch === 'b') return txt.innerHTML = resultB
            if (ch === 'c') return txt.innerHTML = resultC
        })

        // UPDATE CHART DATA
        newChart.data.datasets[0].data = [resultA]
        newChart.data.datasets[1].data = [resultB]
        newChart.data.datasets[2].data = [resultC]
        newChart.update()
    }

Applying Chart.js

Chart.js must be applied to a canvas element. I grab the canvas element I set up in the HTML.

    // CHART CANVAS
    let chartCvs = document.getElementById('r-chart')

Next, I make a chart by calling new Chart.

    // CHART SPECS
    const newChart = new Chart(chartCvs, {
        type: 'bar',
        data: {
            datasets: [{
                maxBarThickness: 70,
                label: 'A',
                data: [resultA],
                backgroundColor: ['#56A3A6'],
                borderColor: ['gray'],
                borderWidth: 1
            },
            {
                maxBarThickness: 70,
                label: 'B',
                data: [resultB],
                backgroundColor: ['#DB504A'],
                borderColor: ['gray'],
                borderWidth: 1
            },
            {
                maxBarThickness: 70,
                label: 'C',
                data: [resultC],
                backgroundColor: ['#E3B505'],
                borderColor: ['gray'],
                borderWidth: 1
            }
        ]},
        options: {
            title: {
                display: true,
                text: ["Results"]
            },
            // TURN OFF ANNOYING HOVER POPUP
            tooltips: { enabled: false },
            scales: {
                yAxes: [{
                    ticks: {
                        display: true,
                        beginAtZero: true
                    }
                }]
            }
        }
    });

new Chart takes a canvas element, chartCvs, for its first argument. For its second argument, it takes an object that holds all the chart specifications.

The three main keys of the object are type, data, and options.

type controls the type of graph. Chart.js gives a lot of good options. For this, I went with a simple bar graph by providing the value 'bar’.

The data takes one or multiple datasets depending on the type of graph you are making. For each bar, I give information about the color and style of the bar and the data and labels correlating to each letter — A, B, or C.

Finally, for options, I create a title, turn off tooltips (a hover box I didn’t like), and give labels and ticks to the scales on the y-axis.

Conclusion

The graphs of Chart.js display really nicely with detail and smooth transitions. There was a bit of a learning curve for me to get everything working. For this reason, I hard-coded a lot of the project. If I were to redo this, I would abstract a lot of this and explore more of what Chart.js offers. There’s a lot more customization that you can apply to a chart.

Message me if you have any feedback. I would love any suggestions or ideas to improve this blog or the ‘poll machine’. Please comment or feel free to email me at jason.melton2@gmail.com.

Best, Jason

Whipping Up a Rails API Real Quick

Jason Melton — Mon, 05 Oct 2020 08:23:07 +0000

In this blog, I attempt a concise outline of the basic steps to create a Ruby on Rails RESTful API.

jump to the code on GitHub

Tutorial

Steps

Create New Rails Project
Plan Models / Relationships
Generate Resources
Create / Migrate database
Set Up Controllers

1. Create New Rails Project

Assuming Rails is installed, enter the following command into your terminal replacing <my-project> with the project name.

rails new <my-project> --api --database=postgresql

Flags: The --api flag will forgo some of the extra junk a full Rails app has that I do not need. The --database flag lets you specify the type of database you prefer. I chose PostgreSQL. If you do not include this flag, the default database will be SQLite.

For demonstration, I’ll create an Evil Dog Catcher API.

Check out this dog catcher toy I found on Google images:

What maladjusted kid wants to play with dog catcher toys? Yikes.

2. Plan Models / Relationships

While Rails installs, now is a great time to plan the models and relationships. Having a clear idea of these ahead of time saves a lot of headaches.

I'm going with two models, Catchers and Dogs.

The relationships will be:

Catchers have many Dogs.
Dogs belong to Catchers.

3. Generate Resources

Next, I’ll generate resources. This command quickly sets up migrations, models, controllers, and routes for each model name.

rails generate resource <model> <attribute>:<type> <attribute>:<type>

Tips: You can use g as shorthand for generate. Also, you can list another model’s name as an attribute with a type of references to automatically add a foreign key to that model.

These will be my resource commands:

rails g resource catcher name:string city:string
rails g resource dog name:string breed:string catcher:references

References gives me a foreign key for the Dog model, but I have to manually go into the Catcher model add has_many :dogs.

class Dog < ApplicationRecord
  belongs_to :catcher # set up by catcher:references
end

class Catcher < ApplicationRecord
    has_many :dogs # add this line
end

4. Create / Migrate database

With all the files generated, it’s time to get the database going. First, I double check the migration files to make sure everything looks right.

class CreateCatchers < ActiveRecord::Migration[6.0]
  def change
    create_table :catchers do |t|
      t.string :name
      t.string :city

      t.timestamps
    end
  end
end

class CreateDogs < ActiveRecord::Migration[6.0]
  def change
    create_table :dogs do |t|
      t.string :name
      t.string :breed
      t.references :catcher, null: false, foreign_key: true

      t.timestamps
    end
  end
end

Note: Notice the line under CreateDogs that starts with t.references.... Because null: false, I will not be able to create a Dog unless it has the foreign key of a Catcher. If you want to be able to create models without this, set null: true.

Since everything looks right, I will now create and migrate my database by entering these commands into the terminal:

rails db:create
rails db:migrate

I double check my progress in the following steps:

In the terminal, rails c or rails console opens the console.
In the console, I create a Catcher instance, Catcher.create(name: 'test'), and a Dog instance, Dog.create(name: ‘test’, catcher_id: 1). There should be no errors.
I test the relationships by entering Catcher.find(1).dogs. This finds the Catcher with an id of 1 and shows me if they have any dogs. I get:

<ActiveRecord::Associations::CollectionProxy [#<Dog id: 1, name: “test”, breed: nil, catcher_id: 1, created_at: “2020–10–04 06:39:15”, updated_at: “2020–10–04 06:39:15”>]>

Since there’s no errors, it’s time for the next step.

5. Set Up Controllers

For the final step, I set up a basic index controller and test it on the Rails server.

class CatchersController < ApplicationController

    def index
        # grab an array of all catchers in db
        catchers = Catcher.all
        # render a json object of all catchers
        # include a sub array of their dogs with each catcher
        render json: catchers, include: :dogs 
    end

end

I run rails s or rails server in the terminal. I open http://localhost:3000/catchers in the browser and make sure everything is working.

Tip: For production purposes, you can open the CORS of this API to any website. Install the CORS gem by opening the Gemfile, uncommenting gem ‘rack-cors’, and run bundle install.

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

Next, access the config/application file. Find the class Application and — without altering any of the default code — insert the following:

config.middleware.insert_before 0, Rack::Cors do
    allow do
        origins '*'
        resource '*',
            :headers => :any,
            :methods => [:get, :post, :delete, :put, :patch, :options, :head],
            :max_age => 0
    end
end

Remember to change the origins before deployment or this API will be available to anyone.

Conclusion

At this point the basic API is up. The next steps will be to open up the CORS for whatever other site(s) will pull from it and set up the controllers to perform whatever actions I want the back-end to perform.

Hope this is helpful! Mostly I wanted a quick reference for setting up an API. I know Rails has a million aliases and shortcuts. If you have suggestions / corrections. Please comment or email me at jason.melton2@gmail.com.

Part 2: Build This Cool Dropdown Menu with React, React Router and CSS

Jason Melton — Sun, 27 Sep 2020 14:54:51 +0000

Part 1
Part 2

After my last blog about building a ~cool~ dropdown menu, I got a suggestion to write a part 2.

Andrew Bone pointed out, “Generally, when making a component, the aim is to make it reusable and simple enough that it rarely needs to be revisited.”

I took this to heart. In the following, I attempt to refactor my dropdown menu to be just this: reusable and simple.

jump to the code on GitHub

Tutorial

The goal: take the previous dropdown menu and rewrite the code so it can use data from an interchangeable JSON object to create a dropdown with the same structure and styles as the original.

Preliminary Junk
Mapping a JSON Object
Dynamic Styles
Dynamic Routes
Conclusion

Preliminary Junk

To start, I duplicated the original repository and created a JSON file with some dummy data.

Mapping a JSON Object

To make the component dynamic, I use map(). Map is common in React apps as it can transform indefinitely sized array into JSX. This abstracts components making them flexible and reusable.

The original Menu component has a return that looks like this:

    return (
        <div className="Menu">
            <div className={"m-item m-logo"}
                onClick={() => setOpenMenu(!openMenu)}>
                Menu
            </div>
            <div className={setClassNames(1)}
                onClick={() => pushToRoute("/dashboard")}>
                Dashboard
            </div>
            <div className={setClassNames(2)}
                onClick={() => pushToRoute("/settings")}>
                Settings
            </div>
            <div className={setClassNames(3)}
                onClick={() => pushToRoute("/")}>
                Sign out
            </div>
        </div>
  );

You can see, each item is spelled out with its own div and properties. In the refactored version, I define a cookie cutter menu item and map() each menu item from JSON into it.

The new return looks like this:

    return (
        <div className="Menu">
            <div className={"m-item m-logo"}
                onClick={() => setOpenMenu(!openMenu)}>
                Menu
            </div>

            {renderMenuItems(data)}

        </div>
  );

The first menu item remains in its own div. This item acts like a button to open the dropdown. It displays when the menu is closed and the other menu items hide behind it.

Beneath that, I call the renderMenuItems() function which takes a JSON object as a parameter.

renderMenuItems() is complicated. I will show the whole function and then explain it piece by piece.

    // render each menu item after Menu button clicked
    const renderMenuItems = data => {    
        const colorArr = ["#9b5de5", "#f15bb5", "#00BBF9"];

        let colorCounter = -1;
        return data.menu.map((item, index) => {

            // if counter is over 2, resets to 0
            // for colorArr bracket notation to get sequence of colors
            colorCounter < 2 ? colorCounter++ : colorCounter = 0

            // dynamic styles for each menu item 
            const itemStyle = {
                "top": `${index * 1.8}em`,
                "backgroundColor": colorArr[colorCounter]
            }

            return (
                <div className="m-item"
                    key={item.id}
                    style={openMenu ? itemStyle : null}
                    onClick={() => pushToRoute(item.route)}>
                    {item.name}
                </div>
            )
        })
    }

I will explain colorArr, colorCounter, and itemStyle in the next section about Dynamic Styles.

First, notice this line:

        return data.menu.map((item, index) => {

I am returning a map() of data, the JSON object parameter. map() runs a callback on each item in an array, returning the result of that function in a new array.

map() can take two parameters. The first parameter is the item from the array. I labeled that item. The second is each item’s index, labeled index.

Now this part:

            return (
                <div className="m-item"
                    key={item.id}
                    style={openMenu ? itemStyle : null}
                    onClick={() => pushToRoute(item.route)}>
                    {item.name}
                </div>
            )

I return dynamic JSX for each item in the map(). These will be the divs of our menu items. Each item has an id, name, and route.

I give each div the m-item classname, unchanged from the original. They get an onClick event that triggers pushToRoute(). Also the same as the original except the parameter is in the JSON object as route. Each gets a key of the JSON’s id. Finally, I display the JSON object’s name as text in the div.

For reference, here's one of the JSON menu items:

      {
        "id": "001",
        "name": "Dashboard",
        "route": "/dashboard"
      }

Dynamic Styles

CSS is responsible for the dropdown animation and styling. In my original menu, I use a function called setClassNames() to add classnames to the items. Then, I spell out an individual classname for each item including the color and length I wanted each to drop to.

Add classnames to trigger transitions:

    // parameter num corresponds to .open-# classes
    // is assigned when Menu clicked triggering animated dropdown
    const setClassNames = num => {
        const classArr = ["m-item"];
        if (openMenu) classArr.push(`open-${num}`)
        return classArr.join(' ')
    }

The added classnames:

.open-1{
    top: 1.8em;
    background-color: #9b5de5;
}
.open-2{
    top: 3.6em;
    background-color: #f15bb5;
}
.open-3{
    top: 5.4em;
    background-color: #00BBF9;
}

While this works, it is not easily reusable. Not only do I have to manually spell out each new open-# for each additional item, I also use a lot of extra lines of code.

Since I am using map() on the new menu items, I can work out the styles as I go. There are two parts to the CSS that I need to include:

A top set to a size of 1.8em times the number item it is on the list (1.8, 3.6, 5.4, 7.2, etc.).
One of three color hexes set as a background-color (#9b5de5, #f15bb5, #00BBF9).

Take a look at renderMenuItems one more time.

    // render each menu item after initial Menu button
    const renderMenuItems = data => {    
        const colorArr = ["#9b5de5", "#f15bb5", "#00BBF9"];

        let colorCounter = -1;
        return data.menu.map((item, index) => {

            // if counter is over 2, resets to 0
            // for colorArr bracket notation to get sequence of colors
            colorCounter < 2 ? colorCounter++ : colorCounter = 0

            // dynamic styles for each menu item 
            const itemStyle = {
                "top": `${index * 1.8}em`,
                "backgroundColor": colorArr[colorCounter]
            }

            return (
                <div className="m-item"
                    key={item.id}
                    style={openMenu ? itemStyle : null}
                    onClick={() => pushToRoute(item.route)}>
                    {item.name}
                </div>
            )
        })
    }

React allows you to add styles to an element as an object with properties written in the camelcase syntax of JavaScript.

Notice in itemStyle, I set a top size. I use the map() index parameter to dynamically increase em size as map() iterates through the JSON.

The background-color is a little trickier. I set up an array called colorArr with the 3 color hexes. To access these, I set up a counter called colorCounter that I use to access the hexes.

The colorCounter is initially set to -1. To contially iterate through 0, 1, and 2 until map() finishes, I coded this ternary:

            // if counter is over 2, resets to 0
            // for colorArr bracket notation to get sequence of colors
            colorCounter < 2 ? colorCounter++ : colorCounter = 0

If the counter is less than 2, I add 1. If it is over 2, I reset the counter to 0. Thus, the counter will run 0, 1, 2, 0, 1, 2… for as long as the map() goes.

Check out Andrew Bone's comment for a more succinct way of getting the colorCounter number sequence.

In itemStyle, I set the “backgroundColor” to colorArr[colorCounter]. Thus the colors appear in a sequence.

Finally, I need to add the top and background-color properties to the items only when the first menu item is clicked.

As previously, when clicked, the top menu item toggles openMenu, a useState hook, between true and false.

I give each div a style property:

    style={openMenu ? itemStyle : null}

I use a ternary here to return the object containing the new top and background-color if openMenu is true. If false, it receives null.

Dynamic Routes

The final piece of this is to go back to my Switch statement in App.js and render the routes dynamically as well.

I can map() the same JSON object in order to set up the corresponding route of each menu item.

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        {/* dropdown menu */}
        <Menu/>
        {/* routes */}
        <Switch>
          {/* map same data as dropdown to 
            create route for each item */}
          {data.menu.map(item =>{
            return(
              <Route key={item.id}
                exact path={item.route} 
                component={null} />
            )
          })}
        </Switch>
      </div>
    </BrowserRouter>
  );
}

Again, I'm missing the actual components of the the app that this menu would be applied to. If they were available, I could alter the JSON to include the component names or maybe to set up a lookup table that corresponds components to the IDs in the JSON.

Conclusion

It was great to revisit my code and improve on my initial ideas. Again, thanks to Andrew Bone for challenging me to try this. I feel like I created a much more flexible, reusable tool this second time around.

If you have any feedback or suggestions, please reach out. Comment or email me at jason.melton2@gmail.com. Regardless, thanks for reading. Best, Jason.

Part 1: Build This Cool Dropdown Menu with React, React Router and CSS

Jason Melton — Mon, 21 Sep 2020 09:54:04 +0000

Part 1
Part 2

How about a little dropdown menu to throw in a tight area of your site? Or maybe use it as a simple navigation tool with your minimalistic layout? Maybe use this smaller menu when the screen shrinks to smaller size.

the code on GitHub

Tutorial

*Preliminary Junk
*Menu Component
*Menu CSS
*React Router
*Conclusion

Preliminary Junk

To get it going, I made a create-react-app, installed React Router, deleted any unneeded default code, and set up a file structure that looks like this:

Menu Component

Menu.js contains all the JavaScript and JSX for our dropdown.

There are essentially four parts:

A useState hook holding a boolean that dictates if the menu should open. I call this openMenu.
A function called setClassNames() which conditionally adds classes to the menu items. The CSS of the classes will animate the menu.
A function called pushToRoute() which employs React Router to render the correlated component to the clicked menu item.
The Menu component’s return JSX for rendering the structure and bringing together all the functionality.

import React, {useState} from 'react';

// router
import { withRouter } from 'react-router-dom';

// styling
import './Menu.css';

const Menu = props => {
    // conditionally render dropdown affect based on this boolean
    const [openMenu, setOpenMenu] = useState(false)

    // parameter num corresponds to .open-# classes
    // is assigned when Menu clicked triggering animated dropdown
    const setClassNames = num => {
        const classArr = ["m-item"];
        if (openMenu) classArr.push(`open-${num}`)
        return classArr.join(' ')
    }

    // takes route string as parameter
    const pushToRoute = route => {
        props.history.push(route)
        setOpenMenu(false)
    }

    return (
        <div className="Menu">
            <div className={"m-item m-logo"}
                onClick={() => setOpenMenu(!openMenu)}>
                Menu
            </div>
            <div className={setClassNames(1)}
                onClick={() => pushToRoute("/dashboard")}>
                Dashboard
            </div>
            <div className={setClassNames(2)}
                onClick={() => pushToRoute("/settings")}>
                Settings
            </div>
            <div className={setClassNames(3)}
                onClick={() => pushToRoute("/")}>
                Sign out
            </div>
        </div>
  );
}

export default withRouter(Menu);

Menu CSS

CSS does all the work to open the menu. There are five important parts.

1 The .Menu class is the most outer container. This layer needs position: relative;.

The individual menu items will have a position: absolute;, so they will render based on the nearest component with a position. The basis of position will be the outer div of the Menu component.

2 The .m-item class is applied to each individual menu item. They are absolutely positioned with an initial top: 0;. This will render all the items on top of each other at the top of the .Menu div.

I use em units for width and all the other properties so I can ensure the items will fit perfectly on top of each other and still be responsive (em units are relative to the font-size of the element).

For aesthetics, I give them a background-color, box-shadow, padding, border-radius, font-size, and color.

The flexbox properties center the text vertically and horizontally. cursor changes the style of the mouse pointer on the screen to show the user menu items are clickable.

Finally, transition will animate changing properties applied by the setClassNames() function and CSS :hover.

.Menu{
    position: relative;
    margin: 2em 3em;
}

.m-item{
    position: absolute;
    top: 0;

    width: 5.5em;
    background-color: #301A4B;
    box-shadow: 1px 2px 2px #301A4B;

    padding: 0.2em;

    border-radius: 1em;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.5em;
    color: #EDFFEC;
    cursor: pointer;

    transition: 1s;
}

3 .m-item:hover adds a small border to the menu items on hover. The added 1 px of border causes the items to animate slightly giving them a little bit of life.

.m-item:hover{
    border: 1px solid black;
}

4 .m-logo is a special class for the first menu item. The z-index: 1; brings this div to the top so all other divs can hide beneath it.

z-index has a default value of 0 so if only one item has it declared, 1 will be enough to bring it to the top of all else.

.m-logo{
    z-index: 1;
}

5 A series of classes called .open-1, .open-2, and .open-3 cause the animation of the drop down. These classes are applied via setClassNames() when the the top menu item is clicked.

On click, each item transitions to the new properties in their open-# class. Namely, they will move to the newly specified top and new background-color.

.open-1{
    top: 1.8em;
    background-color: #9b5de5;
}
.open-2{
    top: 3.6em;
    background-color: #f15bb5;
}
.open-3{
    top: 5.4em;
    background-color: #00BBF9;
}

React Router

All the aesthetic aspects of the Menu component are set up at this point. What's left is to set up React Router so clicking on items navigates you to the correct component.

I wired this up in three steps:

1 The App.js file is the main run file for the whole project so this is where I set up the basic Router stuff.

I wrap App's return with BrowserRouter so the soon-to-be Routes will be available to all components contained.

I set up a Switch so that when one Route is rendered, the others will be disabled. Within, I define each specific Route needed for the project (these are set to null for the sake of demonstration).

The Menu component is placed outside the Switch so it will render whenever App is rendering. This makes it an efficient navigation tool, available on any screen of the app.

import React from 'react';

// router
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// styling
import './App.css';

// components
import Menu from './Menu/Menu';

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        {/* dropdown menu */}
        <Menu/>
        {/* routes */}
        <Switch>
          <Route exact path="/settings" component={null} />
          <Route exact path="/dashboard" component={null} />
          <Route exact path="/" component={null} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

2 In our Menu component, I import withRouter and wrap the Menu with it in the export statement.

// router
import { withRouter } from 'react-router-dom';

export default withRouter(Menu);

withRouter gives Menu props that will allow us to manipulate the react-router-dom. To access these, we give Menu a parameter of props.

const Menu = props => {

3 Finally, I wrote the function pushToRoute() which takes a parameter string of a route and pushes our app to that route. Then, it closes the Menu by calling setOpenMen(false).

    // takes route string as parameter
    const pushToRoute = route => {
        props.history.push(route)
        setOpenMenu(false)
    }

The menu items call pushToRoute() onClick.
For example:

   <div className={setClassNames(1)}
        onClick={() => pushToRoute("/dashboard")}>
        Dashboard
   </div>

Conclusion

I enjoyed creating this menu. It’s an efficient and easy to code tool that could help in a number of scenarios. I hope you find the concepts useful.

I love feedback. Got any suggestions? I’d be happy to add your knowledge to my own. Hit me up below or email me: jason.melton2@gmail.com if you got a reason to.

Best! Jason Melton.

Build This Cool PopUp / Modal with React and CSS

Jason Melton — Mon, 14 Sep 2020 07:43:54 +0000

A nicely styled version of an alert(), the modal, the popup. Probably the most annoying yet necessary element of the web.

For this blog, I created a modal using React and CSS. I assume there are millions of ways to do this, and I’d love your feedback if you can suggest improvements.

the code on GitHub

Tutorial

Preliminary Junk
CheckOut Component
PopUp Component
The Styles
Conclusion

Preliminary Junk

To start, I entered create-react-app into my terminal, deleted the default junk, and set up a file structure like this:

For the sake of the demo, I set up a fake shopping cart page.

The only thing that functions on this screen is the “Checkout!” button. I’m going to skip the code for this, but you can find it in the here.

CheckOut Component

I set up a CheckOut component that has a table displaying the items the user is purchasing and some other stuff for the sake of demoing the popup.

What’s important for the popup functionality are these lines of code:

I set up a useState hook for toggling the popup on and off.

    // controls if popup displays
    const [popUp, setPopUp] = useState(false)

I set up a variable called duringPopUp that will conditionally add the style " during-popup" to the elements it is applied to. This class will darken the background-color of those elements.

    // adds class to darken background color
    const duringPopUp = popUp ? " during-popup" : ""

I apply like this:

    <div className={"Checkout" + duringPopUp}>

Finally, I have a line of code that conditionally renders a PopUp component. That component receives setPopUp as props. That way I can toggle PopUp off from within the component.

    {popUp && <PopUp setPopUp={setPopUp}/>}

PopUp Component

The PopUp component is set up like this:

import React from 'react';
// styling
import './Checkout.css';
// images
import bone from './bone.png'

const PopUp = props => {
    // function that takes boolean as param to conditionally display popup
    const { setPopUp } = props 

    return (
        <div className="PopUp">
            {/* x close window */}
            <button className="popup-x" onClick={()=> setPopUp(false)} >X</button>
            <div className="pu-content-container">
                <img className="pu-img" src={bone} alt="bone" />
                <h1>Add more bones?</h1>
            </div>
            {/* button controls */}
            <div className="pu-button-container">
                <button onClick={()=> setPopUp(false)}> MORE BONES! </button>
                <button onClick={()=> setPopUp(false)}> No, thank you. </button>
            </div>
        </div>
    );
}

export default PopUp;

The content of PopUp can be whatever you need. I set all the buttons to simply toggle the component off. In reality, if someone wanted more bones, the MORE BONES! button would give them MORE BONES!

The Styles

Again, I’m going to skip most the styles in CheckOut.css file. Most of them set up the fake cart and make the buttons look a little nicer. Here’s what’s important for the popup.

Darken Background Colors in Checkout.js

.during-popup{
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

Remember, this style is added when the popUp state is true. It darkens the background-colors wherever it is applied.

Styles for Elements in PopUp.js

These are the styles for the outer most div in the PopUp container:

.PopUp{
    position: fixed;

    left: 25%;
    top: 30%;

    width: 50%;

    border: 1px solid #011627;
    border-radius: 1em;
    box-shadow: -2px 5px 5px #E71D36;

    background-color: #FDFFFC;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    color: #011627;
}

The important piece is position: fixed;. This will cause the component to render where it is positioned by top and left--no matter where the screen scrolls. Since it is fixed, it will stay in the same position no matter how the screen changes.

Conclusion

Hope this helps you create the most irritating advertisement the web has ever seen. Kidding, of course, but I do hope this helps with your popup design. I’d love some feedback. Comment or hit me up at jason.melton2@gmail.com. Thanks for reading. Best, Jason.

Build a Simple Loader with CSS and HTML

Jason Melton — Mon, 07 Sep 2020 02:21:17 +0000

The nice thing to do when your website isn’t fully loaded is to play a little animation.

It lets the user know: “We’re working on it.”

“We know if it takes more than 2 seconds, you’ll leave forever.”

“My liege, we graciously offer you ~three blinking dots~.”

Animations act like a mantra. Like staring into a campfire. It hits your brain jingling keys hit a baby. Something primitive is opened inside, and we're transported to a place outside of time. And while we're there, no one notices the load…

Tutorial

In this blog, I try my hand at recreating various loaders I’ve seen on the web. In doing so, I attempt to make them as simple as possible, so they can easily be imported into your project or you can use the ideas to create your own.

The code on Github

Preliminary Junk

I set up a file structure that is an HTML file, index.html and a CSS file, index.css. The HTML looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>loaders</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div id="example-1" class="loader"></div>

    <div id="example-2" class="loader">
        <div id="bar-1" class="bar"></div>
        <div id="bar-2" class="bar"></div>
        <div id="bar-3" class="bar"></div>
    </div>

    <div id="example-3" class="loader"></div>

    <div id="example-4" class="loader">
        <div id="ball-container-1" class="ball-container">
            <div id="ball-1" class="ball"></div>
        </div>
        <div id="ball-container-2" class="ball-container">
            <div id="ball-2" class="ball"></div>
        </div>
        <div id="ball-container-3" class="ball-container">
            <div id="ball-3" class="ball"></div>
        </div>
    </div>
  </body>
</html>

I’ll explain each example in more detail when it’s relevant.

I set up some CSS variables for colors (from Coolors.co), flexbox, and margins for the general layout of the demo.

:root {
    --main-bg-color: #1A535C;
    --loader-bg-color: #FF6B6B;
    --loader-acc-color: #4ECDC4;
}

body{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--main-bg-color);
}

.loader{
    margin-top: 5em;
}

Example 1

Example 1 has the HTML of one div, set up like this:

    <div id="example-1" class="loader"></div>

Design: I give it the same size width and height and a border-radius: 50%;. By adding a border, you can see that this creates a circle.

I style the border-top-color with my accent color, var(--loader-acc-color). This overwrites the initial color in border for just the top of the border.

Animation: I set up @keyframes example-one so an element with this animation will rotate from 0 to 360 degrees.

I give the #example-1 element an animation property. Using the shorthand, I set the duration to 2s, iteration count to infinite, and name as example-one.

/* EXAMPLE 1 */
#example-1{
    width: 3em;
    height: 3em;

    border-radius: 50%;
    border: 0.75em solid var(--loader-bg-color);
    border-top-color: var(--loader-acc-color); /* overrides top color to stand out */

    animation: 2s infinite example-one;
}

@keyframes example-one{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}

Example 2

For Example 2, the HTML is a div container for three more divs. Each will be a “bar”.

    <div id="example-2" class="loader">
        <div id="bar-1" class="bar"></div>
        <div id="bar-2" class="bar"></div>
        <div id="bar-3" class="bar"></div>
    </div>

Design: #example-2 is given some width, height and flexbox properties to center the bars within.

Each bar is given a margin, width, and starting height. I give them a background-color and some fancy border stuff for accent.

Animation: There are four parts to the example-two animation, divided into 0%, 25%, 50%, and 100%.

At 0%, the height is set to 2.5em, the same as the initial height of each bar. From 0% to 25%, the height grows to 5em. From 25% to 50%, it shrinks back to 2.5em where it will sustain until 100% when the animation restarts.

I give each bar an animation property with a duration of 1.5s, iteration count of infinite, and connect it to @keyframes by name, example-two.

Finally, in order to stagger the play, I grab the individual bars by their IDs. bar-1 gets a delay of 0.25s and bar-2 gets a delay of 0.5s.

/* EXAMPLE 2 */
#example-2{
    width: 5em;
    height: 5em;

    display: flex;
    justify-content: center;
    align-items: center;
}

.bar{
    margin: 0.2em;
    width: 0.75em;
    height: 2.5em;

    border: 0.1em solid var(--loader-bg-color);
    border-left: 0.1em solid var(--loader-acc-color);
    background-color: var(--loader-bg-color);

    animation: 1.5s infinite example-two;
}

#bar-2{animation-delay: 0.25s}
#bar-3{animation-delay: 0.5s}

@keyframes example-two{
    0% {height: 2.5em}
    25% {height: 5em}
    50% {height: 2.5em}
    100% {height: 2.5em}
}

Example 3

Example 3 is one div.

    <div id="example-3" class="loader"></div>

Design: I give #example-3 a width: 5em; and height: 1em; to make it a long rectangle. I give it a background-color and some fancy border stuff for an accent.

Animation: I use the transform property again, but this time I flip the div from 0 to 180 degrees over its y axis using rotateY(). Then I flip it to 360 degrees, back to its starting position.

/* EXAMPLE 3 */
#example-3{
    width: 5em;
    height: 1em;

    border: 0.3em solid var(--loader-bg-color);
    border-right: 0.3em solid var(--loader-acc-color);    
    background-color: var(--loader-bg-color);

    animation: 3s infinite example-three;
}

@keyframes example-three{
    from { transform: rotateY(0deg);}
    50% { transform: rotateY(180deg);}
    to { transform: rotateY(360deg);}
}

Example 4

Example 4, most complex loader, has HTML of a container div with three children divs. Each child is also a container div for a single div that will be shaped like a ball.

    <div id="example-4" class="loader">
        <div id="ball-container-1" class="ball-container">
            <div id="ball-1" class="ball"></div>
        </div>
        <div id="ball-container-2" class="ball-container">
            <div id="ball-2" class="ball"></div>
        </div>
        <div id="ball-container-3" class="ball-container">
            <div id="ball-3" class="ball"></div>
        </div>
    </div>

Design: The outer most container, #example-4 contains flexbox properties to center the loader within.

Each .ball-container gets the same width as height to make it a square and a margin-right to put some space in between.

Then, .ball-container gets flexbox properties to center the “ball” inside. This is important because as the ball changes sizes, I want it to remain centered.

Each .ball gets an initial width and height of 0. A border-radius of 50% turns them into circles, and a background-color makes them visible.

Animation: The animation follows the same logic as example-2 except I am manipulating each ball’s height and width.

From 0% to 20%, they grow from 0 x 0 to 1.5em x 1.5em. I keep them at this size from 20% to 40%. From 40% to 90% they shrink down to 0 x 0, and remain there from 90% to 100%.

I set each ball to have an animation property with a duration of 1.2s, iteration count of infinite, and name example-four.

Finally, I grab each ball by their individual ID so I can add an animation-delay to #ball-2 and #ball-3. This staggers the animation.

/* EXAMPLE 4 */
#example-4{
    display: flex;
    align-items: center;
    justify-content:center;
}

.ball-container{
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.8em;

    display: flex;
    align-items: center;
    justify-content:center;
}

.ball {
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--loader-bg-color);

    animation: 1.2s infinite example-four;
}

#ball-2{animation-delay: 0.1s;}
#ball-3{animation-delay: 0.2s;}

@keyframes example-four{
    0%  {
        width: 0;
        height: 0;
    }
    20% {
        width: 1.5em;
        height: 1.5em;
    }
    40%{
        width: 1.5em;
        height: 1.5em;
    }
    90%{ 
        width: 0;
        height: 0;
    }
    100%{ 
        width: 0;
        height: 0;
    }
}

Conclusion

Thanks for reading the blog. I hope you found some of it useful.

At minimum, I hope one of my loaders transported you to that timeless place where — just for a moment — you felt the balance of the universe, tasted a slice of nirvana, inner peace. Best, Jason.

Build This Cool Password Checklist with React and CSS

Jason Melton — Sun, 30 Aug 2020 04:45:11 +0000

My other blog about building cool sign up form got a lot of attention, so I decided to write another tutorial for a ~cool form~.

Edit: I'm getting feedback that password checklists are an antipattern. However, you could easily adapt the concepts in this project to make a to-do list or cross off ingredients on a recipe, etc. See this thread for more info.

This is a tutorial for how to build this animated password checklist:

get the code on GitHub

Tutorial

Preliminary Junk
Update Password Form
MustContainItem Component
Validation Checklist Functionality

Preliminary Junk

To create this demo, I entered create-react-app into my terminal, deleted the preliminary junk, and set up a file structure like this:

I added some basic styles to things and created a class called cfb that adds a flexbox centering the children of an element to which it’s applied. Also, I found out some nice colors using Coolors.co.

Update Password Form

This project’s purpose is to validate a password as it’s entered into an update form. The first thing I need is a password to validate. In UpdatePasswordContainer.js, I set up a form:

const UpdatePasswordContainer = () => {
  // form inputs
  const [passwordOne, setPasswordOne] = useState("")
  const [passwordTwo, setPasswordTwo] = useState("")
...
  return (
    <div className="UpdatePasswordContainer cfb">
        <h1> Update Password</h1>
        {/* update password form */}
        <form className="password-form cfb">
          {/* password one */}
            <label> 
              new password: 
              <br/>
             <input type="password" 
              value={passwordOne} 
              onChange={e=>setPasswordOne(e.target.value)} 
              onKeyUp={validatePassword}/>
            </label>
          {/* password two */}
            <label>
              re-enter password: 
              <br/>
              <input type="password" 
                value={passwordTwo} 
                onChange={e=>setPasswordTwo(e.target.value)} 
                onKeyUp={validatePassword} />
            </label>
            {/* input button */}
            <input 
              className="submit-button"
              type="submit" 
              disabled={!allValid}/>
        </form>
...

I will explain validatePassword() in detail later, but it checks the password to make sure it meets the requirements.

The allValid variable enables the submit button if the password passes all requirements.

Otherwise, this is a fairly typical React form. It’s inputs update the useState hook onChange for each input and then displays the useState variable as its value.

MustContainItem Component

Each item on the list will be represented by a MustContainItem component which looks like this:

const MustContainItem = props => {
    const { data } = props
    const label = data[0] // name of item
    const meetsReq = data[1] // boolean of whether or not req is satisfied

    // returns string of classes based on props aliased meetsReq
    const setClass = () => {
        const classArr = ["must-line"]
        if (meetsReq) classArr.push('cross-out')
        return classArr.join(' ')
    }

    return (
        <div className="must-item">
            <li className="must-text">{label}</li>
            <div className={setClass()}></div>
        </div>
  );
}

export default MustContainItem;

The MustContainItem takes props of data, which is an array containing a string that labels the item and a boolean of whether or not the requirement has been met.

In the div with class must-item, I put label in a li node. Then I created a div that receives its class from a function called setClass().

setClass() returns a string of classnames that will conditionally animate a line striking through label based on meetsReq, the boolean from props.

Here’s the CSS:


.must-container{
    margin-bottom: 1em;
    border: 0.1em solid #073B4C;
}

.must-item{
    position: relative;

    width: 15em;
    height: 1em;

    padding: 0.2em 0;

    border-bottom: 0.1em solid #073B4C;
    background-color: #DAF3FC;
}

.must-text{
    position: absolute;
    z-index: 0;
    top: 0.6em;
    left: 1em;

    width: 100%;

    padding: 0;
    margin: 0;
    line-height: 0;
}

.must-line{
    position: absolute;
    z-index: 1;
    top: 0.5em;

    width: 0;
    height: 0.2em;

    background-color: #EF476F;

    transition: 0.5s;
}

.cross-out{
    width: 100%;
}

I give the must-item parent container a position: relative; so that the child li node and must-line div are positioned absolutely on top of each other.

must-line gets a z-index of 1. It's positioned on top of must-text which has a z-index of 0. It will cover the text when it appears.

Initially, must-line gets a width of 0. When I add the class cross-out, the div’s width expands to 100% and, due to transition, the div's width animates between sizes.

Validation Checklist Functionality

The final step is to actually check the password to see if it meets the requirements and update all the relevant components.

First, I set up a useState hook for each requirement that I want to put on a new password. Then, I set up a hook for when all the requirements are met, allValid.

  // booleans for password validations
  const [containsUL, setContainsUL] = useState(false) // uppercase letter
  const [containsLL, setContainsLL] = useState(false) // lowercase letter
  const [containsN, setContainsN] = useState(false) // number
  const [containsSC, setContainsSC] = useState(false) // special character
  const [contains8C, setContains8C] = useState(false) // min 8 characters
  const [passwordMatch, setPasswordMatch] = useState(false) // passwords match

  // checks all validations are true
  const [allValid, setAllValid] = useState(false)

Next, I set up an array of arrays. Each of the inner arrays contains the label string and corresponding useState variable to pass to a MustContainItem as props.

  // labels and state boolean corresponding to each validation
  const mustContainData = [
    ["An uppercase letter (a-z)", containsUL],
    ["A lowercase letter (A-Z)", containsLL],
    ["A number (0-9)", containsN],
    ["A special character (!@#$)", containsSC],
    ["At least 8 characters", contains8C],
    ["Passwords match", passwordMatch]
  ]

I map() this array creating a MustContainItem for each array in the array, passed to the component as props named data.

  {/* creates a MustContainItem for each password validation with props of label and boolean of state */}
  <h4>Must contain:</h4>
  <div className="must-container cfb">
    {mustContainData.map(data=> <MustContainItem data={data}/>)}

Everything is set up at this point except for the actual validating of the password.

I check the password after each character is added or deleted in case a required character is added and then later deleted. For this, I used onKeyUp. Each time, a key is lifted, I run the function validatePassword().

    <input type="password" 
        value={passwordOne} 
        onChange={e=>setPasswordOne(e.target.value)} 
        onKeyUp={validatePassword}/>

validatePassword() runs a series of conditional statements.

 const validatePassword = () => {
    // has uppercase letter
    if (passwordOne.toLowerCase() != passwordOne) setContainsUL(true)
    else setContainsUL(false)

    // has lowercase letter
    if (passwordOne.toUpperCase() != passwordOne) setContainsLL(true)
    else setContainsLL(false)

    // has number
    if (/\d/.test(passwordOne)) setContainsN(true)
    else setContainsN(false)

    // has special character
    if (/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(passwordOne)) setContainsSC(true)
    else setContainsSC(false)

    // has 8 characters
    if (passwordOne.length >= 8) setContains8C(true)
    else setContains8C(false)

    // passwords match
    if (passwordOne !== "" && passwordOne === passwordTwo) setPasswordMatch(true)
    else setPasswordMatch(false)

    // all validations passed
    if (containsUL && containsLL && containsN && containsSC && contains8C && passwordMatch) setAllValid(true)
    else setAllValid(false)
  }

Each conditional checks the passwordOne variable stored in a useState hook for a different thing. If passwordOne meets the requirement, it updates that specific requirement’s useState hook. If the hook updates, the strikethrough animation is triggered. Viola.

Hope this is interesting or helpful!
Again, you can find all the code here.

Best, Jason.

If Ruby’s so Happy, What’s %w(a b c)

Jason Melton — Sun, 23 Aug 2020 20:27:06 +0000

When I started learning Ruby, I came across this quote about 50 times:

I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language.

According to its creator, Yukihiro Matsumoto, the goal of Ruby is to make programmers happy. For me, that was mostly true. There’s very few reserved words to memorize, tons of useful, baked-in methods, parentheses are often optional. It is a really clean language--to learn and use.

However, every once in a while, I would come across something like this:

%w(a b c)

Usually, I would find something like this while I’m in the middle of a bug, skimming docs, looking for a quick solution. Usually time was an issue so if I came across the odd percentage notation, annoyed, I’d skip it and open a new tab.

I’d think something like: If Ruby’s so happy, then what the hell is this??

Ruby Literals

“A literal is a special syntax in the Ruby language that creates an object of a specific type.” [ 1.]

Everything in Ruby is an object. Strings, integers, arrays and everything else have a class that dictates their identity, state, and behavior. To create an instance of one of these objects from its class, we invoke it with a literal.

These odd looking % signs are shorthand ways of invoking a literal. For example, %w invokes an array of strings. It works like this:

%w(a b c)     # [a, b, c]
%w(turtle cat different turtle)  # [turtle, cat, different, turtle]

According to a post on Stack Overflow:

There are other % literals:
%r() is another way to write a regular expression.
%q() is another way to write a single-quoted string (and can be multi-line, which is useful)
%Q() gives a double-quoted string
%x() is a shell command
%i() gives an array of symbols (Ruby >= 2.0.0)
%s() turns foo into a symbol (:foo)

And there’s other notations too. Check this link for more literals.

Conclusion

I learned %w isn’t some happiness obfuscating headache. It’s actually another way Ruby gives its user options. It’s honestly pretty nice. Hell yeah, Ruby.

Build This Cool Sign-In Form with React and CSS

Jason Melton — Mon, 17 Aug 2020 08:19:49 +0000

Background

After reading Vasudha Mamtani’s blog about sign-up pages, I realized I had been taking them for granted.

Having a solid sign-up page affects whether or not someone uses your website. Would you enter your email into a wonky looking sign-up form?

After looking through the examples in Mamtani’s blog, I decided to try my hand at making a better sign-in page. I came up with this:

The plan here is for a user to only see the abstract image when switching between signing in and creating an account.

I’m trying to imply that there’s a complicated inner working to this website. We are capable of great and complicated things. Trust us!

Tutorial

In the following, I’ll explain how to code one of these sign-up pages using React and CSS.

Link to GitHub

Preliminary Junk
Container Layout
Banner and Form Transitions
Conditionally Render Sign-In / Sign-Up
Conclusion

Preliminary Junk

First, as has become ritual for these blogs, I installed a create-react-app, deleted default stuff, and set up a file structure and components.

File Structure

As you can see, there are three main components. Container.js is my outermost element. Inside it, there are two divs for the form side and the banner side.

Then, there are two form components for whether you are signing in or creating a new account, SignIn.js and SignUp.js respectively. These are conditionally rendered on the form side of Container.js.

I added a CSS class called cfb (center flexbox). To reduce repetition, whenever I need contents of a div centered, I throw on a cfb. As needed, I add other flex-related properties, like flex-direction, to the specific element.

.cfb{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Container Layout

Container div

I style the main div in Container.js like this:

.Container{
    position: relative; 

    width: 50%;
    height: 60%;

    box-shadow: 1px 2px 2px #592941;
    border: 0.1em solid #592941;
    border-radius: 0.5em;

    background-image: url('./shapes.jpg'); 
}

Form Side and Banner Side

Next, I create the divs for the banner and form side of Container.js.

.banner-side{
    position: absolute;
    z-index: 2;
    right: 65%;

    border: 0.1em solid #592941;
    border-radius: 0.5em;

    width: 35%;
    height: 100%;

    flex-direction: column;

    background-color: #035E7B;
    opacity: 1;

    color: #EEFCF8;
    text-align: center;

    transition: 2s;
}

.form-side{
    position: absolute;
    z-index: 1;
    right: 0;

    border: 0.1em solid #592941;
    border-radius: 0.5em;

    width: 65%;
    height: 100%;

    background-color: #EEFCF8;
    opacity: 1;

    font-weight: bold;
    color: #035E7B;

    transition: 2s;
}

Banner and Form Transitions

Positioning

So the transitions work properly, I set up CSS properties for position, right, z-index, and transition.

To make the divs free to move, they must be styled with a position: absolute;. Then, they will align themselves within the nearest positioned parent element. This means I also must style the main div in Container.js to have a position: relative;.

I’ve styled the size of the divs with percentages. I use these same sizes to set how far right they should be.

First, the form-side is set at right: 0;. It will sit flush on the right side of the container.

Because the form-side is 65% of the parent element, I set the banner-side to be right: 65%;. It starts where the form-side ends.

To get banner-side to hover over form-side, I give banner-side a z-index: 2; and the form-side a z-index: 1;.

Finally, I give them each a transition: 2s;. When I change their right properties, they will move fluidly from their starting place to the next for the duration of two seconds.

Triggering Transitions by Updating Classes

The positioning of banner-side and form-side will be based on whether I am rendering a sign-in or sign-up form.

I set up two new classes for where the banner-side and form-side will be when they are reversed.

.send-right{
    right: 0;
}

.send-left{
    right: 35%;
}

I apply these new classes with functions.

const Container = () => {
  const [welcome, setWelcome] = useState(false);

  const setBannerClass = () => {
    const classArr = ["banner-side cfb"]
    if (welcome) classArr.push('send-right')
    return classArr.join(' ')
  };

  const setFormClass = () => {
    const classArr = ["form-side cfb"] 
    if (welcome) classArr.push('send-left')
    return classArr.join(' ')
  };
  return (
    <div className="Container cfb">

      <div className={setBannerClass()}> 
      </div>

      <div className={setFormClass()}> 
      </div>

    </div>
  );
}

My useState hook contains a boolean called welcome. When welcome is updated, the component will re-render and the classes will be updated based based on that boolean.

Finally, I put up a button in the banner to trigger setWelcome() in the useState hook.

        <button onClick={()=> setWelcome(!welcome)}>
          ~Change~
        </button>

Conditionally Render Sign-In / Sign-Up

The final touch is to change the forms and and banner text based on whether our user intends to sign-in or create a new account. To do this, I used the same welcome from my useState hook.

  return (
    <div className="Container cfb">

      <div className={setBannerClass()}> 

        {welcome ? 
          <h2>Hello, New Friend!</h2>
            : <h2>Welcome Back</h2>}

        <button onClick={()=> setWelcome(!welcome)}>
          {welcome ?
            "Sign In"
              : "Create Account"}
        </button>

      </div>

      <div className={setFormClass()}> 
          {welcome ? 
            <SignUp /> 
              : <SignIn/>
          }

      </div>
    </div>
  );

Because this is a dummy project, I didn’t do anything specific with the forms themselves. If you’d like, you can check them out on GitHub.

Conclusion

This was a fun one to figure out. The newest concept for me was a deeper understanding of position and z-index.

I've used this properties before, but I had been flying by the seat of my pants. I’m happy for my newfound confidence with them.

Taking this project further, I would also animate the rendering of the text and forms themselves. A smooth transition would improve the page.

As always, thanks for reading. I hope this helped you somehow.

CSS Transitions in React: Build a Root Beer Carousel

Jason Melton — Sun, 09 Aug 2020 22:53:45 +0000

Background

I was really scratching my head trying to get CSS transitions to work with React.

I created most of a project using React’s create-react-app and CSS, and I really liked the way it looked, and I was proud to have done all the CSS by hand. With one feature left, I needed CSS transitions to make it perfect.

Most of the internet suggested using React Transition Group and had this been a larger project, I would have gone that way. However, I really didn’t want to bring in another library when I was so close to being finished.

My stubbornness prevailed and I researched my way into a solution. Thanks to this Joe Davis blog, I learned a clever trick for adding and removing classnames, allowing me to add CSS transitions and create a carousel in this gif.

By the way, this is a long one so thanks ahead of time if you read it. I believe the most clever part of the carousel is covered in the section called “Function for Setting Classes” if you want to skip to it.

The Meat

What follows is my strategy for putting five root beer pictures in a carousel. If you’d like to get the whole thing, here’s the GitHub.

Preliminary Junk
Arrow Design & Functionality
CSS Transitions
Function for Setting Classes
Conclusion

Preliminary Junk

File Structure & Design Pattern

First, I installed a create-react-app, deleted a bunch of default stuff, and set up the file structure and components.

Our two components are CardContainer.js and Card.js using Dan Abramov’s presentational and container design pattern from this blog.

CardContainer.js handles the logic and state which are passed down to its children, each displayed as a Card.js.

I threw my root beer images in a folder and created an index.js file to handle their export with the following code:

export const rootBeer1 = require('./root-beer-1.png');
export const rootBeer2 = require('./root-beer-2.png');
export const rootBeer3 = require('./root-beer-3.png');
export const rootBeer4 = require('./root-beer-4.png');
export const rootBeer5 = require('./root-beer-5.png');

Card.js Component

import React from 'react';

const Card = props => {
  const {imgSrc, classList} = props

  return (
    <div className={classList}>
      <img src={imgSrc} 
        className="rootbeer-img" 
        alt="root beer img"/>
    </div>
  );
}

export default Card;

The Card.js is a very simple component that takes props of an image source, imgSrc , and a string, classList that is returned by the function setClass().

setClass() changes the classList string will serve the dual purpose of selecting which classes are on each Card.js and triggering a render causing the CSS transition animation. More on this in a bit.

Card.js in CardContainer.js

Next, I added a Card for each image in the CardContainer.

// images
import {
  rootBeer1,
  rootBeer2,
  rootBeer3,
  rootBeer4,
  rootBeer5
} from '../images/index'

In the CardContainer.js return div:

      <Card imgSrc={rootBeer1} classList={setClass(1)}/>
      <Card imgSrc={rootBeer2} classList={setClass(2)}/>
      <Card imgSrc={rootBeer3} classList={setClass(3)}/>
      <Card imgSrc={rootBeer4} classList={setClass(4)}/>
      <Card imgSrc={rootBeer5} classList={setClass(5)}/>

Arrow Design & Functionality

Arrow Design

I was a little extra with the arrow design. You could easily use buttons or links to control the carousel, but instead, I did some small scale CSS art.

/* ARROWS */
.arrow-container {
    padding: 1em;
}

.arrow {
    border-top: 0.5em solid #B1436E;
    border-right: 0.5em solid #B1436E;

    width: 1.5em;
    height: 1.5em;

    cursor: pointer;
}

.left {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.right {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

I made two divs each with thick borders on the same corner and turned them in each direction — 45 degrees and 225 degrees.

Arrow Functionality

      <div className="arrow-container center-box">

        {/* card num is 1, arrow display is none  */}
        <div onClick={()=> setCardNum(cardNum - 1)} 
          style={{display: cardNum === 1 ? "none" : "block" }} 
          className="arrow left">
        </div>

        <h1>{cardNum}</h1>

        {/* card num is 5, arrow display is none  */}
        <div onClick={()=> setCardNum(cardNum + 1)} 
          style={{display: cardNum === 5 ? "none" : "block" }}
          className="arrow right">
        </div>
      </div>

To flip through my five pictures, I set up a useState hook called cardNum with an initial state of 1.

On the arrow divs, I set a conditional style so the left arrow will not display if cardNum === 1 and the right arrow will not display if cardNum === 5.

Another possible design would be adding a clause that sets cardNum to 1 if it hits 6 and sets cardNum to 5 if it hits 0, allowing for a full rotation of cards.

CSS Transitions

If you’re unfamiliar, the CSS transition property animates an element so when it renders, its style properties slide from the old values to the new ones.

/* CARD */
.Card{
    position: relative;

    background-color: #B1436E;

    padding: 2em;

    transition: 0.5s;
}

/* CARD TRANSITIONS */
.present{
    left: 0;
    opacity: 1;
    visibility: visible; 
}

.next{
    position: absolute;
    top: 25%;
    left: 200vw;
    opacity: 0;
    visibility: hidden; 
}

.previous{    
    position: absolute;
    top: 25%;
    left: -200vw;
    opacity: 0;
    visibility: hidden; 
}

First, I set up three CSS classes: present, next, and previous.

When a Card has the present class, it will be centered in our CardContainer. The previous class hides the picture off screen on the left, and the next class hides things off screen on the right.

transition takes a duration value in seconds(s). As the initial Card class properties change according to present, next, and previous, transition will smooth them into each other for my set duration.

In this case, the current present component will get shoved off screen and turn invisible while, based on cardNum, the next or previous component will become visible and be pulled to the center.

One of the weaknesses of my current set-up is the changing of position from relative to absolute. I added a top of 25% to keep the element from awkwardly flying to the default, top: 0. It might be a minor issue, it will be inconsistent depending on screen size.

Function for Setting Classes

At this point, we can change our cardNum with the arrows, and our CSS is set up to employ our transitions. All That's left is to tie the cardNum to each Card's class.

Each Card receives a prop called classList which is the return value of setClass(), a string of classnames.

Here is the setClass() function:

  // sets class as present, next, previous in relation to cardNum
  const setClass = num => {
    const classArr = ['Card center-box']
    if (num === cardNum) classArr.push('present')
    if (num > cardNum) classArr.push('next')
    if (num < cardNum) classArr.push('previous')
    return classArr.join(' ')
  }

First, I set up an array called classArr with the string Card center-box.

This string will be plugged into the component's classNames and will be read as two classnames that give some general CSS, flex-box, background-color, etc. to our Card components.

Then, based on a series of conditionals, I push present, next, or previous into classArr.

If the num parameter is the same as cardNum, I push present. I push previous if num is greater than cardNum and next if num is less than cardNum.

That's it! Clicking the arrows causes the cardNum state to change. That triggers a render of the CardContainer. On that render, setClass() will be called on each Card component. The Cards will then have their classList prop changed so when they render, the appropriate Cards will transition off and on to the screen.

Conclusion

From top to bottom, that’s the whole thing. The nifty design concept I learned is using a function to set an array of classnames and hitting join() on that array. Then, it's easy to tie that to state of the parent component and manipulate that state.

As always, I hope this helps someone. If you have any suggestions or corrections, feel free to comment or email me at jason.melton2@gmail.com.

Don’t hesitate to hit me up, I love to be correct so I love to be corrected. Also, isn’t root beer great?

DEV Community: Jason Melton

Building Jason Chess — Part 1: Rendering the Board and Pieces

An ongoing series about building a React app called Jason Chess, a version of chess where if your name is Jason, you can’t lose.

What Is All This?

Rendering the Board and Pieces

Table of Contents

Preliminary Junk

Basic Layout and Menu

Rendering the Board

Rendering the Pieces

Conclusion

Building an Animated Counter with React and CSS

Tutorial

Table of Contents

Preliminary Junk

Count Component

Increment Function

Conclusion

Using Chart.js to Display Poll Data in a Cool Way

Tutorial

Table of Contents

Preliminary Junk

HTML & CSS

JavaScript for Vote Buttons and Results Text

Applying Chart.js

Conclusion

Whipping Up a Rails API Real Quick

Tutorial

Steps

1. Create New Rails Project

2. Plan Models / Relationships

3. Generate Resources

4. Create / Migrate database

5. Set Up Controllers

Conclusion

Part 2: Build This Cool Dropdown Menu with React, React Router and CSS

Tutorial

Table of Contents

Preliminary Junk

Mapping a JSON Object

Dynamic Styles

Dynamic Routes

Conclusion

Part 1: Build This Cool Dropdown Menu with React, React Router and CSS

Tutorial

Table of Contents

Preliminary Junk

Menu Component

Menu CSS

React Router

Conclusion

Build This Cool PopUp / Modal with React and CSS

Tutorial

Table of Contents

Preliminary Junk

CheckOut Component

PopUp Component

The Styles

Conclusion

Build a Simple Loader with CSS and HTML

Tutorial

Preliminary Junk

Example 1

Example 2

Example 3

Example 4

Conclusion

Build This Cool Password Checklist with React and CSS

Tutorial

Table of Contents

Preliminary Junk

Update Password Form

MustContainItem Component

Validation Checklist Functionality

If Ruby’s so Happy, What’s %w(a b c)

Ruby Literals

Conclusion

Build This Cool Sign-In Form with React and CSS

Background

Tutorial