The TypeScript documentation is very good for learning and understanding how to use TypeScript. With this post I thought I would jot down some notes about basic TypeScript to act as a short and simple reference for myself, and hopefully it is useful to others just starting out with using TypeScript.

The basic TypeScript types are: string, number, boolean, array, tuple, enum, unknown, any, void, null and undefined, never, and object. Many of these are straightforward as they are primitive JavaScript data types. I will go over some of the others with a bit more detail.

TypeScript is a programming language developed and maintained by Microsoft

The Any Type

Declaring with the any

I was recently working on a coding challenge of sorts in which the goal was to create a specific-sized grid and build three useable functions off of the grid. There’s of course multiple ways to solve this problem as a whole, but I wanted to share my methodology and solution (even if it’s not the most efficient way).

The Matrix is an oldie but goodie.

Ultimately, what we need to create is an array of arrays, and then fill in each subarray with objects. …

JavaScript has several built-in methods for “cleaning” strings that can be very useful for your frontend application. Since these methods are built in, they are accessible on any string as they live on the primitive String datatype (String.prototype). These methods are not unknown, but perhaps not often utilized. Let’s dive in.

Time to clean JavaScript strings!

padStart(targetLength, padString)
padEnd(targetLength, padString)

These methods “pad” the beginning or end of a string with a string of your choosing.

Each method takes in two arguments:
1) targetLength: The total length of the resulting string
2) padString (optional): The string to pad the remaining spaces

A good example of…

Managing data in your application globally makes your application cleaner and easier to maintain.

Lately I have been playing around with React’s Context API and exploring its use cases. Someone recently shared a very insightful blog article with me that takes a deep dive into why Context API is not a state management tool. I recommend reading the entire article but if you are limited on time then cut to the recommendations section to understand when to use Context vs. Context + useReducer vs. Redux in your application. See article:

The important thing to know is Context in and of itself is NOT a state management tool, while Context + useReducer IS but with…

In my last article I went over how to integrate JSON Web Tokens into the backend of your Rails application. That article can be found:

In this article I will go over a simple integration of JSON Web Tokens with Node.js, specifically with Express. The request from the frontend will remain the same, namely you will be sending a token to the backend on every request that requires authorization. You do this by adding the Authorization header to your fetch request with the token. In this example, we will be making a GET request for an individual task…

In most applications you will likely have user accounts. And if you do, you certainly want to limit what a particular user has access to. JSON Web Tokens is a popular method for providing user authorization across resources inside your application on the client-side.

When you send a normal fetch request to your backend, you typically send the method of the request (GET, POST, etc) along with a header object. Something like:

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. Another way of sharing data is by utilizing React’s Context API.

Data is essential to any application and there are multiple ways to access that data.

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…

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:

Input: ‘aabb’
Output: True => ‘baab’

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…

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…

Doug Schallmoser

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