Image for post
Image for post

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:


Image for post
Image for post

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.


Image for post
Image for post
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. …


Image for post
Image for post

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.


Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post
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!

Image for post
Image for post
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…

Image for post
Image for post

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…


Image for post
Image for post

Today I am introducing one of the most basic concepts in programming, the for loop. My goal today is to talk about the for loop in a way that could be understood by someone who is completely unfamiliar with the concept.

Loops are a fundamental concept in programming and different types of loops are used in all programming languages.

The for loop is one of the building blocks of Javascript, and many of our higher-order functions are built using it. (Check out my write-up on some of those functions here!)

So what is a for loop?

Mozilla’s documentation defines it…

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