Photo by Matt-Ridley via Unsplash

This is an overview of a project that I really enjoyed building and I’m excited to share some of the cool stuff I learned along the way.

This is not a step-by-step walk-through like you might find in my other blog posts, the stack is too large for that and each step deserves more attention than I could bring in a single read. Instead, I’ll touch on a few highlights and lessons I learned during the build.

If you have questions, find a mistake, or just want to say hi, let me know in the comments, I’d love to hear…


I was recently working on a project that needed to connect web sockets to a deployed database in order to work. This was a sprint and I just needed to get the database up quickly.

Enter Ngrok.

Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall. — ngrok.com

It says it right on their website… but is it too good to be true?

Install Ngrok

Installation instructions through their site are straightforward, but if you have Homebrew installed already then it’s even simpler.

Run the following from your terminal:


In this article I am listing the shortcuts I use most often in the terminal as well as a few I would love to add!

Although I am writing this so I will have a quick reference as I learn some new commands, I hope others may find some value as well.

Outline

  • Zsh/Bash
  • Oh My Zsh
  • Git (Oh My Zsh)
  • Heroku

Zsh/Bash

Zsh is my shell of choice because it is customizable and based on Bash. Use these commands in either Zsh or Bash.

!! — bring up the last command. sudo !! — reruns the last command in admin mode.


Photo by Jeremy Lapak

Sometime in September or October every year, people shake the dust from their running shoes and begin training for marathons scheduled in early spring the next year.

It takes months to train, so a good plan is necessary. Ramp your miles up too fast and you risk injury, go too slow and you won’t have enough miles on your legs to finish 26.2 on race day.

One of the best tools for keeping you on track is a good running app. I use Strava because it tracks data including distance, pace, heart rate, personal best times, and more. …


Today I am going to implement a really useful service, EmailJS. This third party service makes adding email capability to your React project quick and easy.

Last week I wrote a simple guide where we used React Hook Forms (RHF) to create a form with validations in a React project.


Form validations are important for security and they make our web apps easier to use. Developers create forms all the time and we repeat the same patterns over and over in every project.

We also like to be efficient (make things easier on ourselves), and using some trusted 3rd party libraries is a great way to cut down on code and make it easier to read and work in.

Today I am going to implement a really useful library, React Hook Forms. This library uses a custom React hook to make adding validations a snap.

This demo assumes that you…


Thinking beyond the first three lines of code.

I start just about every project with a few lines of code in my top-level CSS file that look something like this:

This ensures that my website will look the same across browsers.

In this write-up, I am going touch on how CSS works, why a reset is important for the web developer, and a few additions one might make once we have a better understanding.

At the heart of CSS (Cascading Style Sheets) is the cascade algorithm. It defines how to combine property values originating from different sources.

CSS stylesheets…


Creating a React App from scratch

Photo by Tikkho Maciel

A chef knows that two different cooks, one more skilled and one less skilled, given the same ingredients and instructions will produce two dishes that are very different.

The less skilled cook may have followed each step carefully, measured each ingredient exactly, and still finds themselves flabbergasted that their dish isn’t as good as their counterpart’s.

The skilled cook knows that it takes more than the right tools and good instructions to create something amazing. …


In this article, I will walk through how to stream a Medium blog to your React.js project. You can fork and clone the completed demo here, or follow along to build your own!

Photo of a satellite by NASA hosted on Unsplash

This guide assumes that you have some basic experience using React with hooks and that you have a Medium account with at least one blog posted.

Project Outline:

  1. Create a React App and set up two components.
  2. Identify the Medium blog endpoint
  3. Convert the endpoint to JSON using rss2json.
  4. Call the endpoint and persist the response client-side.
  5. Iterate through the data and isolate the blog posts.
  6. Format the blog…


In its simplest implementation, Recoil allows you to hold global state in your React App, and then use or update it from any component.

Recoil shines because of how simple it is to use and how little code it takes to get up and running. Recoil eliminates long paths of passed props, and unlike other global state libraries like Redux, there is very little learning curve or boilerplate code for setup.

Today we are going to build an app that demonstrates how simple Recoil is to set up and use.

This guide assumes that you have Node ≥8.10 and NPM…

Josh-Gotro

Hi, I’m Josh Gauthreaux. I’m a full-stack web developer from Austin, TX. I love people and I love building things.

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