In React there are many ways of sharing data throughout your application. You can pass data as a prop from a parent component to a child component. You can use a third-party library such as Redux to globally store data in a container of sorts. A more modern way of sharing data is by utilizing React’s Context API.

The Context API allows your data to be available anywhere you need it inside your application. This is incredibly useful for situations in which multiple components must have access to the same data. You could pass this data down through multiple components until you arrive at the component that needs it. But of course, it is best to avoid prop drilling as it is inefficient and unnecessary. …

A recent software engineer coding interview question I was given was the following:

Check if a given string can be rearranged to form a palindrome. Return true or false.

A palindrome is a sequence of characters that reads the same backwards as it does forwards. So the question is asking if characters in the input string can be rearranged to from a string that reads backwards the same as it does forwards.

I had some difficulty understanding the question at first so here are some example input/outputs to clarify what the question is looking for:

Example:
Input: ‘aabb’
Output: True =>…

If you built an app utilizing Rails ActionCable and you want to deploy it to Heroku, this short walkthrough is for you.

In the “Trailblaze” app I built with React/Rails, I implemented ActionCable in order to have a real-time chat feature. Getting the chat feature to work using WebSockets and ActionCable was somewhat difficult, but once I had it working in development there were some additional steps necessary to get the chat feature working in production. I was able to successfully deploy ActionCable to Heroku with the following steps:

Note: ActionCable subscribes and broadcasts from channels with Redis. Redis is an in-memory data structure used for data storage and caching in your app. Essentially, Redis keeps track of and syncs broadcasted content through ActionCable. Heroku requires a credit card on file but if you choose the nano version of Redis you won’t get charged but will be limited in data storage to 5MB. …

In order to secure sensitive information such as API keys from other people’s eyes, it is imperative that you hide them from your public repository. You do not want your keys visible in any of your public commits. There are simple processes you can take to hide sensitive information in both your React frontend application as well as your backend Rails application.

Hiding API Keys in React

There is a very simple way to hide your API keys if you built your React application using create-react-app:

1. Create a new file named .env in the root of your React application.
2. Because you created your app using create-react-app, the engine is able to read keys that start with REACT_APP. Inside your .env file, add the following line:
   REACT_APP_GOOGLE_API_KEY =…

During my first full build with React I ran into several issues that left me scratching my head for significant amounts of time. Some were common issues, and some were just particular to the application that I built. I want to share some of these hangups so that others may learn and grow from my frustrations. All of these issues were resolved by going down the rabbit hole that is debugging, along with tried and true Google searching.

The issues I want to discuss are as follows:

1. useEffect and asynchronous functions
2. createRef, scrollIntoView, stopPropagation
3. google-maps-react and ReactDOM.render
4. sending JWT tokens on every request that requires…

I recently built a Single Page Application as part of Flatiron School’s Portfolio Project #4. The app utilizes a Rails API backend and a Javascript, CSS and HTML frontend. The code is stored in a single repository with two subdirectories:

So here are the steps I went through to successfully deploy a Rails API backend to Heroku and a JS frontend to Github Pages, from a single repository.

BACKEND

1. Create a Heroku Account.
2. Install the Heroku CLI in the terminal (mac install command shown):
   brew tap heroku/brew && brew install heroku
3. Login to heroku:
   heroku login
4. CD into the main directory of your code and create a new heroku app:
   heroku create…

As we have heard everyone say, almost everything in Javascript is an object. The exceptions are the primitive datatypes (string, number, boolean, symbol, null and undefined). So how can we inherit in Javascript? By using objects. Remember, almost all objects in JS are simply instances of Object.

All objects have a prototype property. This makes it possible for objects to inherit from other objects. This prototype property is what links one object to another. Through prototype chaining, changes to an object’s prototype can be seen by all objects if they are part of the chain.

In this prototype property, methods and properties are stored for which other objects can inherit from. When a property or method is called, the JS engine begins to locate that property or method. If it is not found, the search will move on and look for it in the object’s prototype. It will continue this cycle until it finds the property it’s looking for. If it can’t find it then the prototype chain eventually ends when an object has null as it’s prototype (and null doesn’t have a prototype). This ends the prototype chain. …

Single Page Application’s (SPA) are prevalent throughout modern web application development. The benefit of a SPA is that the page does not require reloading. This allows the user to interact with the application without virtually any downtime. When implemented correctly, the browser will always have content displayed even if a user click’s on a link on the page. Only a portion of the page will get rendered which provides seamless user interaction with minimal wait time.

As par of the Flatiron School curriculum, I created a SPA using a Rails backend API combined with a vanilla Javascript frontend. The frontend utilizes JS object orientation (OO) in order to organize the code in a useful and structured way. …