Below are some interview questions you might run into.

What is the difference between var, let and const?

Global Scope: var

Local Scope: let + const

Hoisted: var

Not Hoisted: let + const

Redeclare Variable: var

Cannot Redeclare Variable: let + const

Can give the variable a new value: var + let

Cannot give the variable a new value: const

What is the difference between undefined and null?

undefined: has been declared, but not yet assigned a value

null: is an assignment value. It can be assigned to a variable as a representation of no value

What is NaN?

The NaN property represents a value that is “not a number”.

What are the JS Data Types?

What is the 'this' keyword in JS?

this references the object that…


A superset of JS

In this post, I wanted to walk you through converting your React JS components to TSX components.

Next.js has made it very easy to setup and incrementally adopt TypeScript. To get started, at the root of your project directory create a file named tsconfig.json

Head over to your terminal and run the following commands:

yarn add --dev typescript @types/react @types/node
yarn run dev

This will install the dependancies and populate your tsconfig.json file for you. Let’s jump into the code.

/components/card.js

const Card = (props) => {
return (
<div onClick={props.handleClick}>
<img src={props.imgURL} alt={props.imgTitle} />
<h1>{props.title}</h1>
<p>{props.excerpt}</>
<p>{props.likes}</p> …


Contentful + GraphQL API

This tutorial will walk you through connecting your project to your Contentful CMS with a simple GraphQL query. This post assumes you already have a Contentful account setup and data models created.

Dependancies:

“graphql”: The JavaScript reference implementation for GraphQL, a query language for APIs created by Facebook.

“apollo-boost”: Apollo Boost is a zero-config way to start using Apollo Client. It includes some sensible defaults, such as our recommended InMemoryCache and HttpLink, which come configured for you with our recommended settings.

“@apollo/react-hooks”: React Apollo useQuery, useLazyQuery, useMutation, useSubscription and useApolloClient hooks.

“next-apollo”: A package for using Apollo within a Next.js application.


Below are three algorithms you might run into in a technical interview.

Create a function that returns true if the input is a prime number and false if it is not.

function isPrime(numInput) {
if (typeof numInput === "number") {
let divisor = 3;
let limit = Math.sqrt(numInput);

if (numInput === 2 || numInput === 3)
return true;
if (numInput % 2 == 0)
return false;
while (divisor <= limit)
{
if (numInput % divisor === 0)
return false;
else
divisor += 2;
}
return true;
}
}

Create a function that returns all the prime factors of a given…


React.js

Following up on my previous post, I wanted to share how to upload images from your React frontend to your server. It only takes a couple of lines of code, but if everything isn’t lined up, you will be pulling your hair out.

This example was built with Ionic. The form is universal to React frameworks, but rendering the avatar is unique to Ionic

For simplicity’s sake, we are going to build a component that both renders your image and allows for you to upload a new one. Let’s call it Avatar.tsx

First, let’s render an image.

/components/Avatar.tsx

import React…


Amazon S3

This post assumes you have a backend server up and running with Express + MongoDB Atlas and want to extend the functionality by adding the ability to upload files, or in this case, images.

I recently made the mistake of trying to directly upload images to MongoDB. After a couple of hours of frustration, I reached out to a friend who pointed me in the right direction: Amazon S3.

Dependancies:

dotenv: Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env

aws-sdk: The official AWS SDK for JavaScript, available for browsers and mobile devices, or…


Today I want to share a convenient way to make sure your site’s visitors have been authenticated and are logged in.

For this example, the user is already signed in. If the visitor is truly signed in, local storage contains the user’s id as well as username. In Next.js, pages are generated by files within your pages directory. Throughout the app’s pages, the content is wrapped with the following Layout component.

import Head from "next/head"; import Router from "next/router"; import Header from "./Header"; import { useEffect, useState } from "react"; export default ({ children }) => { const [usernameState, setUsername]…


Responsive header via event listeners

I was building a header component, in React, the other day and was trying to find a way to make it mobile responsive. I could not find a solution that I liked, so I decided to forge my own path.

To start, I created an event listener for the browser width and stored it within the Header’s local state. To access the window object, you will have to create the event listener within the useEffect hook.

/components/Header

import { useState, useEffect } from "react";export default function Header() { const [dimensions, setDimensions] = useState({ height: "", width: "" }); useEffect(()…

This week, I found a really cool React library for rendering charts: react-minimal-pie-chart. react-minimal-pie-chart lightweight React SVG pie chart library, with versatile options and CSS animation included. < 2kB gzipped.

https://github.com/toomuchdesign/react-minimal-pie-chart

The library comes with a bunch of built in charts that take a standardized data set to render each. Let’s jump into an example:

import { PieChart } from "react-minimal-pie-chart";
...
<PieChart animation animationDuration={500} animationEasing="ease-out" center={[50, 50]} data={[ { color: "#E38627", title: "One", value: 10, }, { color: "#C13C37", title: "Two", value: 15, }, { color: "#6A2135", title: "Three", value: 20, }, ]} labelPosition={50} lengthAngle={360} lineWidth={15} paddingAngle={0} radius={50} rounded…


Try again

Today I want to review how you can build a simple helper function that will serve as a form validator. For this example I will be using React via Next.js and vanilla JavaScript for the form validation.

Let’s build a simple sign up form component:

/components/SignUpForm.js

import React, { useState, useEffect } from "react"; import Router from "next/router"; import Link from "next/link"; export default function SignUpForm() { const [formState, setFormState] = useState({ username: "", password: "", password2: "", }); const createAccount = (e) => { e.preventDefault(); fetch("http://localhost:4000/users/sign-up", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify(formState), })…

Tyler Knapp

A recent graduate of the immersive, software engineering program at the Flatiron School in NYC.

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