Showing a loading message to your users while fetching data.

Photo by Christina Morillo from Pexels

Hello again, thank you for stopping by! In this article, we will go through one of a million ways to let your users know something is loading in the background. Today, we will be implementing this in an existing application. This is good for many different reasons but we won’t get into that now. Today, we hack!!

Our application is a browser-based 2D video game inspired by Galaga the classic arcade from the '80s. The front-end was built with Javascript, HTML5 Canvas, and CSS3. The back-end is a Rails API with a PostgreSQL database that serves JSON data. Here are…


Create parallax effects with react-materialize and materialize-CSS.

Photo by Antonio Batinić from Pexels

Hello there, welcome back! Thank you for stopping by! In this article, we will add super cool looking parallax scrolling effects to an existing mock-up of a single page application or SPA. The SPA was built with React.js and uses components from react-materialize, and was styled with materialize-css.

I recently learned about materialize-css and wanted to see how I could use it in a react app. I researched a bit and found react-materialize that helps me do just that.

Materialize
A modern responsive front-end framework based on Material Design

By utilizing elements and principles of Material Design, we were able to create…


Testing React components using Jest and React-Testing-Library.

Photo by Marta Branco from Pexels

Hi there, welcome back! Thank you for stopping by. Last month in my Getting Started with AWS article I wrote:

If you are a budding developer looking to get that first opportunity, it is important to get familiar with some of the different cloud infrastructure providers out there.

The exact same can be said for writing tests for your code and the Testing Frameworks and libraries that help you do it. In this article, we will walk through setting up some unit tests with jest and react-testing-library for some components in an existing React application.

What is Jest?

Jest is a…


Fixing the “A cookie was set without the `SameSite` attribute. It has been blocked by Chrome.” issue on a Rails API.

Photo by Christina Morillo from Pexels

Hey now, thanks for stopping by! In this article, I want to share a recent issue I encountered with one of the applications I have hosted on Heroku and how I was able to finally solve it. I decided to write this because I had a really hard time finding a single source that provided a simple solution.

I have a React.js application as the front-end and a Ruby on Rails API back-end with a PostgreSQL database. …


Adding transitions and animations with React-Spring

Photo by Lucas Fonseca from Pexels

Welcome back! Thank you for stopping by. In this article, we are going to try out the React-Spring library.

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

We will go through the steps to add this to an existing react application. For this example, We have a simple click counter application that was styled with Material-UI components.

As you can see above, there is not much happening when we click the buttons, and when we refresh…


Deploying a React.js application using Amazon Web Services.

Photo by Christina Morillo from Pexels

Hi there, welcome back! Thank you for stopping by. In this article, we’ll try to answer the questions “What is AWS?” and “Where do I start?”. To do that, we’ll go through the steps to deploy an existing React.js single page application (SPA). If you plan to follow along, here is the repo to the app we are deploying.

Who better to answer the “What is AWS?” question than Amazon themselves.

Amazon Web Services (AWS) is the world’s most comprehensive and broadly adopted cloud platform, offering over 175 fully featured services from data centers globally.

If you are a budding…


Using the Material-UI framework in an existing React application.

Photo by Christina Morillo from Pexels

I have heard many great things about Material-UI the popular React.js framework. As stated in their about page:

Material-UI started back in 2014 to unify React and Material Design.

Today, Material-UI has grown to become one of the world’s most popular React UI libraries — backed by a vibrant community of more than 1M developers in over 180 countries.

Their mission is to provide components to make the development of a React UI easier and faster. They had me at easier, so I decided to take it out for a spin! For this example, I’ll be referring to the Material-UI…


Photo by Soumil Kumar from Pexels

Some may feel that using Ruby on Rails as an API is a bit of an overkill. If you are working on a super simple API that may be true but who doesn’t want to take advantage of how easy it is to get up and running with rails. There are many great articles out there on this same subject but I wanted to go a bit further than just creating it and connecting a database.

We will go through the steps to create our API with the database and create some methods to handle some JSON data. For this…


Creating a counter app with React and Redux from scratch.

Photo by Christina Morillo from Pexels

Hello everyone, thanks for stopping by! Today, we will build a simple React.js application that displays a counter with two buttons. The counter will go up by one when you click the “up” button and down by one when you click the “down” button. We will be going through the steps to set up our environment and creating our counter app. Let’s hop to it!

1 - Create The Directory For The Application

Decide where you want your application files to live then create the directory for it. I will name my directory ReactStateDemo.

mkdir ReactStateDemo

2 - Navigate Into That Directory

cd ReactStateDemo

3 - Set Up Environment

We will need to make sure we have Node.js …

Caleb

Full-Stack web developer having fun with Rails, JavaScript, HTML, CSS, React, Redux, Bootstrap, Material-UI, and quarantine gardening.

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