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: whenever I lose at chess. It’s my job to fix this. 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. …


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. Is there a better way to do this?

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

Image for post
Image for post

the code on Github

Tutorial

Table of Contents

  • 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:


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 publicly 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.

Image for post
Image for post

Jump to the GitHub

Tutorial

Table of Contents

  • 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 …


Image for post
Image for post

In this blog, I concisely outline the basic steps of creating a Rails RESTful API.

jump to the code on GitHub

Tutorial

Steps

  1. Create New Rails Project
  2. Plan Models / Relationships
  3. Generate Resources
  4. Create / Migrate database
  5. Set Up Controllers

1. Create New Rails Project

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

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

Flags: The --api flag will forgo including some of the extra junk a full Rails application has that we do not need. The --database flag lets you specify the type of database you prefer. I chose PostgreSQL. …


Image for post
Image for post

After my last blog about building a ~cool~ dropdown menu, I received the 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 the advice to heart. In the following, I show how I refactored my dropdown menu to be just this: reusable and simple.


Image for post
Image for post

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


Image for post
Image for post

A nicely styled version of an alert(), the modal, the popup. One of the sometimes annoying yet necessary elements of the web.

For this blog, I created a modal using React and CSS, and I’m going to show you how I went about it.

I assume there are millions of ways to achieve this. I’d love your feedback if you have any improvements.

the code on GitHub

Tutorial

Table of Contents

  • Preliminary Junk
  • CheckOut Component
  • PopUp Component
  • The Styles
  • Conclusion

Preliminary Junk

To begin, I set up a create-react-app deleted the default junk and set up a file structure like this:


Image for post
Image for post

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…


Image for post
Image for post

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~.

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


Image for post
Image for post

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…

About

Jason Melton

Software dev. Love root beer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store