Forem: Toluwanimi Isaiah

Let's discuss Generics in TypeScript

Toluwanimi Isaiah — Tue, 14 Mar 2023 09:40:00 +0000

This article will discuss Generics, their syntax, their importance and use cases.

Prerequisites

To succesfully follow and understand what will be explained, you need to have the following installed:

NodeJS
TypeScript
Your IDE of choice

Now, what are Generics?

Generics are a way to define reusable functions, classes and interfaces that can work with a variety of types instead of a single type. Generics basically enable us to keep them generic by making them work according to the passed type(s). Take the following function that returns whatever is passed:

function returnArg(arg: string): string {
  return arg;
}
let a = returnArg("Cat");
console.log(a); // "Cat"

We can see that it will not be possible to pass a number to this function, and that is because of the explicit annotation that specifies that it will only accept a string. If we wanted it to work with numbers, one thing we can do is define another function that accepts a number:

function returnArg(arg: number): number {
  return arg;
}
let b = returnArg(2);
console.log(b); // 2

This will work fine, but it results in code repetition which is time consuming and isn't intuitive. An alternative is to set the type of the argument to any:

function returnArg(arg: any): any {
  return arg;
}
let a = returnArg({ name: "Cindy" });

Using any will have the same effect as generics. However, it will cause our program to lose the information about what type was passed and what type will be returned. This means that it is not type-safe and defeats the purpose of type checking.

That's where generics come in. With this approach, we can make the above function work with data of any type without rewriting it. Let's create a generic version of the returnArg function:

function returnArg<T>(arg: T): T {
  return arg;
}

let a = returnArg(2); // 2
let b = returnArg("a"); // 'a'
let c = returnArg(["cat", "mouse"]); // ["cat". "mouse"]
let d = returnArg({ name: "Tolu", age: 10 }); // { name: "Tolu", age: 10}

The above function uses what is called a type variable which is a special kind of variable that works on types only and not values. It is usually captured within angle brackets. Whatever data type is supplied at the time of the function call is captured in the type variable T to be used later. This allows our function to work on a variety of types while maintaining type safety and preventing code repetition.

As we can see in the variables above, returnArg will accept any data type that is passed into it, without losing any vital information about what type is passed.

Using Generics with multiple parameters of different types

If there are multiple parameters in a function, you can represent each of them within a type variable list like this:

function returnArg<A, B, C>(
  arg1: A,
  arg2: B,
  arg3: C
): { arg1: A; arg2: B; arg3: C } {
  return { arg1, arg2, arg3 };
}

const a = returnArg(1, "Tolu", true);
console.log(a); // { "arg1": 1, "arg2": "Tolu", "arg3": true }

The type variables A, B and C are generic types for whatever arguments will be passed.

Generic interfaces

Not only functions can be generic. Interfaces and classes can too. Here's how a generic interface is written:

interface A {
  a: <T>;
  b: <U>;
  c: <V>;
}

To write a generic interface, we can pass generic types to an interface definition just like functions. It's members will reference the passed types, as seen above.

If for example, we want to represent a person with a generic object, we can create a generic interface for it like this:

interface Person<A, B, C, D> {
  name: <A>;
  age: <B>;
  likesToEat: <C>;
  callName: <D>
}

const person: Person<string, number, boolean, () => void> = {
  name: 'Tolu',
  age: 1,
  likesToEat: true,
  callName: function () {
    alert(this.name)
  }
}

At the point of use of the interface, we are to supply the specific types that we want the type variables to represent as shown in the person variable declaration.

Generic classes

class Pair<T, U> {
  first: T;
  second: U;

  constructor(first: T, second: U) {
    this.first = first;
    this.second = second;
  }
}

In this example, we've defined a Pair class that can hold two values of any type. The type variables T and U in the class declaration indicate that the class is generic, and that the types of the first and second values will be determined when the class is used.

The Pair class has two properties: first, which holds the first value, and second, which holds the second value. We can create instances of the Pair class with any type of data, like this:

const booleanAndString = new Pair<boolean, string>(true, "Alice");
const objectAndNumber = new Pair<{ greeting: string }, number>(
  { greeting: "hello" },
  42
);

In the first line, we create an instance of Pair with a boolean and a string. In the second line, we create another instance of Pair with a number and an object that has a greeting property. This goes to show the flexibility that generics afford us.

Conclusion

Generics are an important feature of TypeScript that allow us to write functions, interfaces and classes that can work with any data type. This creates flexible, reusable, concise and type safe code which contributes to high quality applications that are easier to maintain. It is worth it to learn about generics and how to put them to effective use within your applications.

I hope that you have gotten some value from this article. Kindly leave any questions or additional information in the comment section.

Thanks for reading!

Type Aliases vs Interfaces in TypeScript

Toluwanimi Isaiah — Wed, 29 Sep 2021 14:34:18 +0000

TypeScript provides two ways to create custom types for our data and they include Type aliases and Interfaces. This article will discuss the similarities and differences between them, and the best use cases for each. Let's dive in!

Type aliases

A type alias is basically a name for any type. Type aliases can be used to represent not only primitives but also object types, union types, tuples and intersections. Let's take a look at some examples:

type userName = string;
type userId = string | number; // Union type
type arr = number[];

// Object type
type Person = {
    id: userId; // We're making use of another type alias here
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
};

const user: Person = {
    id: 12345,
    name: "Tolu",
    age: 1,
    gender: "female",
    isWebDev: true,
};

const numbers: arr = [1, 8, 9];

Type aliases are declared with the type keyword preceding them. Think of them like regular JavaScript variables that are used to represent certain values. Wherever you use a variable name, it is evaluated to the value that it represents. Type aliases work in a similar manner. Wherever you annotate a type by its alias, the alias will evaluate to the type(s) that it stands for. Like variables, you can't declare the same type alias more than once. Aliases are also never inferred by TypeScript, you have to explicitly annotate them.

Interfaces

Interfaces are another way to name data structures e.g objects. The declaration syntax for interfaces is different from that of type aliases. Let's rewrite the type alias Person above to an interface declaration:

interface Person {
    id: userId;
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
}

Unions and Intersections

A union type is formed from two or more other types, and represents a value that can be any one of them. Intersections allow us to combine multiple existing types into a single type that has all the features of those types. Take the following example:

type Human = {
    name: string;
    speaks: boolean;
};

interface Dog {
    name: string;
    barks: boolean;
}

type HumanAndDog = Human & Dog; // Intersection
type HumanOrDogOrBoth = Human | Dog; // Union

let humanAndDog: HumanAndDog = {
    // must have all the properties of Human and Dog
    name: "Sparky",
    speaks: false,
    barks: true,
};

let humanOrDog: HumanOrDogOrBoth = {
    // can have the properties of Human or Dog, or both
    name: "Tolu",
    speaks: true,
};

Type aliases and interfaces can be combined into one type using unions or intersections, but cannot be combined into an interface.

Tuples

Tuples are a way to type arrays with fixed lengths, accounting for every item in said array.

type Mix = [number, string, boolean];

const mix: Mix = [1, "banana", true];

In TypeScript, tuples can be declared with types but not interfaces. However, tuples can be used inside interfaces, like this:

interface Mix {
    a: [number, string, boolean];
}

Declaration merging

If you declare one interface with the same name more than once, TypeScript merges them into one declaration and will treat them as a single interface. This is called declaration merging.

interface Person {
    name: string;
}

interface Person {
    age: number;
}

type Num = numbers;
type Num = string; // Duplicate identifier Num

let user: Person = {
    // has the properties of both instances of Person
    name: "Tolu",
    age: 0,
};

Declaration merging only works on interfaces. TypeScript will give an error if you declare the same type alias more than once.

Extends

Both type aliases and interfaces can be extended. However, the syntax differs. A derived type alias or interface has all the properties and methods of its base type alias or interface, and can also define additional members.

A type alias can extend another type alias using an ampersand:

type A = { x: number };
type B = A & { y: string };

Type aliases can also extend interfaces:

interface A {
    x: number;
}

type B = A & { y: string };

Interfaces can extend type aliases with the extends keyword:

type A = {
    x: number;
};

interface B extends A {
    y: string;
}

Interfaces can extend other interfaces the same way they extend type aliases. Interfaces can also extend multiple interfaces separated by commas.

interface A {
    x: string;
    y: number;
}

interface B {
    z: boolean;
}

interface C extends A, B {
    breed: string;
}

let c: C = {
    x: "Sparky",
    y: 4,
    z: true,
};

Interfaces extending classes

TypeScript allows an interface to extend a class. When this happens, the interface inherits the members of the base class, including the private and public members, but not their implementations. This means that when you create an interface that extends a class with private members, only that class or its subclasses can implement that interface. This allows you to restrict the use of the interface to the class or subclasses of the class that it extends.

class Base {
    greetFriend() {
        console.log(`Hello!`);
    }
}

// Interface extending the Base class
interface Derived extends Base {
    giveGist(): void;
}

// New class that extends Base class and implements the Derived interface
class NewClass extends Base implements Derived {
    giveGist() {
        console.log("I saw this the other day...");
    }
}

const c = new NewClass();
c.greetFriend(); // Hello!
c.giveGist(); // I saw this the other day...

Implements

TypeScript supports class-based object-oriented programming. As a result, it allows classes to implement both type aliases and interfaces using the implements keyword. An error will be thrown if a class fails to correctly implement it.

// Interface being implemented by a class
interface A {
    x: number;
    y: number;
}

class SomeClass implements A {
    x = 1;
    y = 2;
}

// Type alias being implemented by a class
type B = {
    x: number;
    y: number;
};

class SomeClass2 implements B {
    x = 1;
    y = 2;
}

A class can also implement multiple interfaces separated by commas e.g class A implements B, C {}. Note that a class can not implement or extend a type alias that represents a union type:

type C = { x: number } | { y: number };

// ERROR: A class can only implement an object type or intersection of object types with statically known members.
class SomeClass3 implements C {
    x = 1;
    y = 2;
}

It’s important to understand that an implements clause is only a check that the class can be treated as the interface type. It doesn’t change the type of the class or its methods at all. A common source of error is to assume that an implements clause will change the class type - it doesn’t!
— TypeScript official docs

Which should I use?

Type aliases and interfaces are very similar and you can choose freely between them. Personally, I use type aliases when defining primitive, union, intersection, function or tuple types. However, I make use of interfaces when defining object types or to take advantage of declaration merging.

Conclusion

We have seen the differences and similarities between type aliases and interfaces.

Both type aliases and interfaces can be used to describe the shape of an object or a function signature. But the syntax differs.
Declaration merging only works on interfaces and not type aliases.
You cannot declare a union, intersection or tuple with the interface keyword. However, you can make use of them within an interface.
Classes can implement both type aliases and interfaces, but not type aliases that represent a union type.

I hope that you have gained something useful from this article. Kindly leave any questions or additional information in the comment section.

Thanks for reading!

Type Widening and Narrowing in TypeScript

Toluwanimi Isaiah — Tue, 31 Aug 2021 12:11:56 +0000

There are many important concepts to understand to be able to write TypeScript effectively. This article will discuss two of them: Type widening and narrowing. Widening and Narrowing types is about expanding and reducing the possibilities which a type could represent.

Type Widening

To represent an absence of something, JavaScript has two values: null and undefined. These are special because in TypeScript, the only thing of type null is the value null, and the only thing of type undefined is the value undefined. let variables initialized to null and undefined are widened to any if strict null checking is off. To make sure the types remain the same, in your tsconfig.json file, set --strictNullChecks to true.

// --strictNullChecks: false
let a = null; // type any
const b = null; // type null

// --strictNullChecks: true
let a = null; // type null
let b = undefined; // type undefined

Note that the compiler widens on assignment. null is still of type null, and undefined is still of type undefined.

Literal widening

Literal widening in TypeScript is when a literal type gets treated as its base type. When you declare a variable using the const keyword and initialize it with a literal value, TypeScript will infer a literal type for that variable. TypeScript knows that once a primitive is assigned with const its value will never change, so it infers the most narrow type it can for that variable.

const num = 2; // type 2;
const name = "Tolu"; // type 'Tolu'
const isTrue = true; // type true

However, when you declare a variable with let or var, you're telling Typescript that its value can be changed later. So its type is inferred to be the base type that its literal value belongs to.

let surname = "Agboola"; // type string
let num2 = 10; // type number
let bool = true; // type boolean

In the above example, surname is initialized with the let keyword, so TypeScript gave it a wider type of string therefore giving it a wide set of possibilities. If Typescript were to infer literal types for let variables, trying to assign a different value from the inferred literal would cause an error at compile time.

Now, when a narrow type is reassigned to a mutable location e.g a let variable, the new variable will be widened to and treated as its respective widened type. For example, if you assign the value of the constant name to a mutable variable widenedName, the type of widenedName will be the base type of name which is type string:

let widenedName = name; // type string
let widenedNum = num; // type number

let narrowedName: "Tolu" = name; //narrowed to type 'Tolu';

Enums are a way to define a set of named constants and enumerate the possible values for a type. They are unordered data structures that map keys to values, similar to objects. The values of enum members are auto incremented unless specific values are assigned to them. Take the following enum:

enum Stuff {
    X, // 0
    Y, // 1
    Z, // 2
}
let e = Stuff.X; // type Stuff
const f = Stuff.Y; // type Stuff.Y

The mutable variable e to which enum member X is assigned to is widened to type Stuff, the containing enum of X. However, when const is used, TypeScript narrows the type of f to the member of the enum itself, Stuff.Y.

What literal types widen?

According to this handbook, literal types widen to their respective supertype:

Number literal types like 1 widen to number.
String literal types like 'hi' widen to string.
Boolean literal types like true widen to boolean.
Enum members widen to their containing enum.

Non-widening literal types

You can prevent your type from being widened with explicit annotation:

const nonWideVar: 43 = 43; // type 43
let newVar = nonWideVar; // type 43

This way, even if you reassign the value to a mutable location, the type will remain narrow.

Type Narrowing

TypeScript provides different ways to combine types. One of them is Union type. A union type is formed from two or more other types, and represents a value that can be any one of them. To understand narrowing, you need to know what declared type and computed type mean. The declared type of a variable is the one it is declared with, while the computed type varies based on context. Consider the following code:

let strNum: string | number; // type string | number (declared type)

strNum = "var"; // OK
strNum = 10; // OK
strNum = false; // Error: Type 'boolean' is not assignable to type 'string | number'.

You can assign either a string or a number to strNum without any complaints from TypeScript because the possibilities of its values have been specified in the union type. However, if you assign any other type of value to it, the compiler will give an error.

Function parameters can also be of union type:

function logType(val: string | boolean) {
    if (typeof val === "string") {
        console.log("Value is a string"); // Computed type here is string
    } else if (typeof val === "boolean") {
        console.log("Value is boolean"); // Computed type here is boolean
    }
}

logType("Value"); // OK
logType(true); // OK
logType(10); // Error: Argument of type '10' is not assignable to parameter of type 'string | boolean'.

Now, let's take a look at the logType function above. It receives one argument, val, that can either be a string or boolean. The first block of code within the function checks the type of the argument and will only run if the computed type of the argument is a string. It basically narrows the type of val to string allowing it to be temporarily treated as a string within that context. The same thing is happening within the second block which narrows the argument to boolean. Outside of those contexts, the type remains string | boolean. Narrowing, which is the removal of types from a union, has just taken place.

Conclusion

In this article, we've seen how and why TypeScript widens the types of mutable variables, how strict null checking affects widening of null and undefined values. We saw what types can be widened, and how to prevent widening with explicit annotation. We also discussed what declared types and computed types mean, and how they play a part in type narrowing.

I hope you have gained some value from this explanation. Let me know your thoughts in the comments.

Thanks for reading!

Build the Game of Life with React and TypeScript

Toluwanimi Isaiah — Wed, 07 Jul 2021 11:19:42 +0000

In this tutorial, we'll develop the popular Game of Life using React and TypeScript. The Game of Life was created by the late John Conway in 1970. It consists of a grid of cells, each either alive or dead which interacts with its neighbours following a set of rules. It is more of a simulation or cellular automation than a game as it requires no input from the user.

I find it to be a good project for practicing some useful concepts in React. It is relatively easy to build, and only took about 150 lines of code to complete. This project was originally recorded by Ben Awad in this video, however, this tutorial makes several modifications to the codebase.

Prerequisites

This tutorial assumes a basic knowledge of React (including Hooks) and TypeScript.

Getting started

Let's set up our React project with TypeScript by running the following command in the terminal:

npx create-react-app game-of-life --template typescript

You can also grab the starter files for the project here and follow the instructions in the README if you prefer.

Create the grid

A grid is naturally made up of a number of rows and columns. Let's start by creating variables in App.tsx to keep track of these values, including the grid itself. Store the grid in state so that it can be easily updated. For this we will employ the useState hook. The useState hook returns a stateful value, and a function to update it. Destructure those return values into grid and setGrid variables as shown below.

// App.tsx
import { FC, useState } from "react";

const numRows = 25;
const numCols = 35;

const App: FC = () => {
  const [grid, setGrid] = useState();
};

Note that we're annotating the type of our component as a Functional Component(FC). This makes sure that the signature of our function is correct and it returns valid JSX. Also, all the code in this tutorial will be written in one file, namely App.tsx.

Next, we want to initialise the grid. useState accepts one argument which will be returned as the initial state on the first render. Create a function that returns an array of random live and dead cells.

// App.tsx
const randomTiles: = () => {
  const rows = [];
  for (let i = 0; i < numRows; i++) {
    rows.push(Array.from(Array(numCols), () => (Math.random() > 0.7 ? 1 : 0))); // returns a live cell 70% of the time
  }
  return rows;
}

const App = () => {
  const [grid, setGrid] = useState(() => {
    return randomTiles();
  });
};

The randomTiles function creates a multidimensional array of randomly placed 0s and 1s. 0 means dead and 1 means alive. The length of the array is the number of rows we declared earlier and each array in it contains numCols items (in this case, 35). Notice that the type is annotated as an array of zeroes and ones. You can already see below what our grid will look like:

Now, whenever the App component is rendered for the first time, the initial state will be a grid of random cells. Next thing is to display them. Update your App.tsx file as shown below:

// App.tsx
const App = () => {
  const [grid, setGrid] = useState(() => {
    return randomTiles();
  });

  return (
    <div>
      {grid.map((rows, i) =>
        rows.map((col, k) => (
          <div
            style={{
              width: 20,
              height: 20,
              backgroundColor: grid[i][k] ? "#F68E5F" : undefined,
              border: "1px solid #595959",
            }}
          />
        ))
      )}
    </div>
  );
};

The code above iterates over the grid, which has been initialised to randomTiles, and each time generates a 20 x 20 box to represent a cell. The background color of each cell is dependent on whether it is alive or dead.

At the moment, the cells formed are in a straight line as shown above. We need them to be arranged neatly into a grid. To achieve that, let us make the wrapping div a Grid container and style it as follows:

// App.tsx
<div
  style={{
    display: "grid",
    gridTemplateColumns: `repeat(${numCols}, 20px)`,
    width: "fit-content",
    margin: "0 auto",
  }}
>{...}</div>
//I use ... to denote code already established.

Now that we have what we're looking for, you can style the page in any other way you want.

Handle cell clicks

Apart from the randomly generated cell state, we want each cell to be clickable to make it either alive or dead. Add an event handler to the cell div as follows:

// App.tsx
return (
  <div
    style={
      {
        // ...
      }
    }
  >
    {grid.map((rows, i) =>
      rows.map((col, k) => (
        <div
          key={`${i}-${k}`}
          onClick={() => {
            let newGrid = JSON.parse(JSON.stringify(grid));
            newGrid[i][k] = grid[i][k] ? 0 : 1;
            setGrid(newGrid);
          }}
          style={
            {
              // ...
            }
          }
        ></div>
      ))
    )}
  </div>
);

What the click event handler above does is:

It clones the grid array into a newGrid,
Finds the clicked cell by it's index and checks if it's alive or dead,
If the cell is currently alive, it makes it dead and vice versa,
Finally, it updates the state with the modified newGrid.

It is best practice to always add a unique identity to elements in React to help React know when it has changed. Set the key attribute of each cell to its specific position in the grid.

Run the simulation

There's no game of life without the actual interaction between the cells, so let's work on that. Let's start by storing the running status of the simulation in state, same way we did the grid, then initialize it to false. Let's allow TypeScript infer the type for us here which will be boolean.

// App.tsx
const App = () => {
  const [grid, setGrid] = useState(() => {
    return randomTiles();
  });

  const [running, setRunning] = useState(false);

  // ...
};

By default, the simulation is not running. Now, let's create a button to start or stop the simulation:

// App.tsx
<button
  onClick={() => {
    setRunning(!running);
  }}
>
  {running ? "Stop" : "Start"}
</button>

Next up, we'll work on implementing the interactions between the cells and their neighbors following the rules of the game which include:

Any live cell with fewer than two live neighbours dies, as if by underpopulation.
Any live cell with two or three live neighbours lives on to the next generation.
Any live cell with more than three live neighbours dies, as if by overpopulation.
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

Create a positions array outside the App component. This array represents the eight neighbors surrounding a cell, which we will make use of within the simulation.

// App.tsx
import { useState, useCallback } from "react";

const positions = [
  [0, 1],
  [0, -1],
  [1, -1],
  [-1, 1],
  [1, 1],
  [-1, -1],
  [1, 0],
  [-1, 0],
];

Within the App component, create a function called runSimulation using the useCallback hook and pass the grid as an argument. The reason why useCallback is being used here is to prevent our function from being created every time the App component is rendered. useCallback creates a memoized function every time it's dependency array changes, this means that the function will be created only once and then run when necessary. In this case, we'll leave the dependency array empty.

// App.tsx
const App = () => {
  // ...
  const runningRef = useRef(running);
  runningRef.current = running;

  const runSimulation = useCallback((grid) => {
    if (!runningRef.current) {
      return;
    }

    let gridCopy = JSON.parse(JSON.stringify(grid));
    for (let i = 0; i < numRows; i++) {
      for (let j = 0; j < numCols; j++) {
        let neighbors = 0;

        positions.forEach(([x, y]) => {
          const newI = i + x;
          const newJ = j + y;

          if (newI >= 0 && newI < numRows && newJ >= 0 && newJ < numCols) {
            neighbors += grid[newI][newJ];
          }
        });

        if (neighbors < 2 || neighbors > 3) {
          gridCopy[i][j] = 0;
        } else if (grid[i][j] === 0 && neighbors === 3) {
          gridCopy[i][j] = 1;
        }
      }
    }

    setGrid(gridCopy);
  }, []);

  // ...
};

We're creating runSimulation once but we want the current running value at all times, and the function will not keep updating the value for us. To fix that, let's create a runningRef variable using the useRef hook and initialize it to the current value of the running state. This way, the running status is always up to date within our simulation because it is being stored in a ref. Whenever the .current property of runningRef is false, the function will stop, otherwise it will proceed to work with the rules of the game.

Now, runSimulation clones the grid, loops over every cell in it and computes the live neighbors that each cell has by iterating over the positions array. It then checks to make sure that we're not going out of bounds and are within the rows and columns in the grid. If that condition is met, it increments the number of live neighbors of the cell in question. The forEach loop will run 8 times for each cell.

Next, it enforces the rules. If the number of live neighbors of the cell is less than 2 or greater than 3, the cell dies. Else, if the cell is dead and it has exactly 3 neighbors, the cell lives and proceeds to the next generation. After all the cells are covered, it updates the grid state with the gridCopy.

A very useful custom hook

To make the simulation continuous, we need a function that runs it after a specified interval. Let's fire the setInterval method when the Start button is clicked:

// App.tsx
<button
  onClick={() => {
    setRunning(!running);
    if (!running) {
      runningRef.current = true;
    }
    setInterval(() => {
      runSimulation(grid);
    }, 1000);
  }}
>
  {running ? "Stop" : "Start"}
</button>

The click event handler updates the running state to its opposite, but in case it is false, it changes the ref to true and calls runSimulation every second. If you run this in your browser, you'll see that the simulation isn't running as it should. It appears to be stuck in a loop between two or three generations. This is due to the mismatch between the React programming model and setInterval which you can read more about here.

While researching a solution to this issue, I discovered this custom hook written by Dan Abramov called useInterval. Create a file called useInterval.tsx in your project directory and paste the following code into it:

// useInterval.tsx
import { useEffect, useRef } from "react";

function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(callback);

  // Remember the latest callback if it changes.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    // Don't schedule if no delay is specified.
    if (delay === null) {
      return;
    }

    const id = setInterval(() => savedCallback.current(), delay);

    return () => clearInterval(id);
  }, [delay]);
}

export default useInterval;

Import the hook into the App component and make use of it as follows:

// App.tsx
import useInterval from "./useInterval";

// Put this right under runSimulation() inside the App function
useInterval(() => {
  runSimulation(grid);
}, 150);

The syntax of this hook looks identical to setInterval, but works a bit differently. It’s more like setInterval and clearInterval tied in one, and it's arguments are dynamic. Delete the setInterval function from the click handler and watch our app run smoothly.

Clear the grid

Let's add a function to empty the grid of all live cells. Create a function called generateEmptyGrid:

// App.tsx
const generateEmptyGrid = (): number[][] => {
  const rows = [];
  for (let i = 0; i < numRows; i++) {
    rows.push(Array.from(Array(numCols), () => 0));
  }
  return rows;
};

This function looks like randomTiles except it returns a multidimensional array containing only zeroes. Create a button to update the state with the new array of dead cells:

// App.tsx
<button
  onClick={() => {
    setGrid(generateEmptyGrid());
  }}
>
  Clear board
</button>

When you check the browser, you should see an error that looks like this:

This is because of the way TypeScript works. When you initialize a variable, TypeScript infers its type as narrowly as possible if you don't explicitly annotate it. In our case, when we declared the grid state, we initialized it to randomTiles. Because we didn't annotate the type of randomTiles, it's type was inferred as () => (0 | 1)[][], that is, a function that returns only zeroes and ones.

Now, generateEmptyGrid's type is inferred as () => number[][] which is not assignable to () => (0 | 1)[][]. That is the reason behind that error above which shows that our code failed to compile. For our app to work, the types have to be compatible. Let's annotate their types so that they are the same:

// App.tsx
const generateEmptyGrid = (): number[][] => {
  const rows = [];
  for (let i = 0; i < numRows; i++) {
    rows.push(Array.from(Array(numCols), () => 0));
  }
  return rows;
};

const randomTiles = (): number[][] => {
  const rows = [];
  for (let i = 0; i < numRows; i++) {
    rows.push(Array.from(Array(numCols), () => (Math.random() > 0.7 ? 1 : 0)));
  }
  return rows;
};

Now that they are both multidimensional arrays containing numbers and can be assigned to each other, our Clear button should work as expected. Let's add in another button to randomize the tiles again if the user desires to.

// App.tsx
<button
  onClick={() => {
    setGrid(randomTiles());
  }}
>
  Random
</button>

This click handler just updates the state with our previously declared randomTiles function that returns randomly placed 0s and 1s.

Conclusion

In this tutorial, we have successfully built Conway's Game of Life using React and TypeScript. We covered how to make use of some React hooks including useState, useCallback and useRef. We saw how React and setInterval don't work too well together and fixed the issue with a custom hook. We also discussed how TypeScript infers types when they are not annotated, how a type mismatch caused our code not to compile and how to solve the problem.

The complete code for this project can be found in this GitHub repository. I hope you have gained some value from this article. Your feedback will be appreciated in the comments.

Thanks for reading!

Lessons learned from building landing pages

Toluwanimi Isaiah — Tue, 08 Jun 2021 21:22:00 +0000

I recently took the time to improve my portfolio page, and I also had an opportunity to build a landing page for an open source project. This gave me the opportunity to learn a CSS framework, and pick up a few other useful skills along the way. I was able to build and deploy both sites, and I'm now writing about the lessons I learned during the course of working on both pages.

Choosing a framework

I made use of the Bulma framework for both projects. I chose Bulma because it's based on Flexbox, has no JavaScript (which I didn't need for either website) and is built with Sass which I wanted to learn. The class names in Bulma are also easy to understand and remember. It was amazing how much faster I was able to go with a framework. When I built my old portfolio page, I wrote the styles from start to finish and it took so long, but this time I didn't even spend up to half the time with much better results.

One issue I had at first was that whenever I wrote custom styles, the framework styles would overwrite them. As a result, I found myself using !important a lot. I later realised that it was because of the order in which I linked them in my HTML. In CSS, when rules on the same element have the same specificity (classes in my case), the styles that come last will take precedence. To solve my problem and stop fighting with the framework, all I did was link my CSS file after the Bulma stylesheet, like so:

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"
/>
<link rel="stylesheet" type="text/css" href="main.css" />

As I progressed with my work, I realized that I was including the entire Bulma framework in my project, but I only used a small part of it for the page which didn't feel right to me. I did some research and discovered that Sass provided a much better way for me to include only what I needed from the framework. First I had to install bulma through npm:

npm install bulma

This command created a bulma folder within the node_modules folder in my project directory. I was then able to remove the CDN link from my HTML file and import the Bulma components I needed using the path to their specific files:

@import "node_modules/bulma/sass/components/navbar.sass";
@import "node_modules/bulma/sass/elements/button.sass";
@import "node_modules/bulma/sass/elements/container.sass";
@import "node_modules/bulma/sass/elements/image.sass";
// ...and any other part of the framework I need

Doing this reduced the size of the CSS bundle in one of the projects from 240KB to 160KB. Minifying the code reduced the file size further to 137KB which should translate to faster loading times.

Loading images

Whenever the pages were loading, I noticed that the images were causing the pages to shift because spaces were not reserved for them until they load which was not ideal. The solution was to set the width and height attributes for each image on the page so as maintain the layout of the page regardless of whether the images are loaded or not. With these attributes in place, layout shifting is prevented causing the page to behave more predictably.

<img
    loading="lazy"
    width="1500"
    height="975"
    src="image.png"
    class="project-img"
/>

Finding out the specific dimensions of an image can be done through the browser DevTools. All you need to do is hover the cursor on the image's src link and a popup will provide more details. When doing this, it's important to use the intrinsic size which is the actual size of the image and not the rendered size which is dependent on the device.

Another way I was able to improve the image loading experience was by lazy loading them. That means instructing the browser to delay the loading of off-screen images until the user scrolls near them. To achieve that, set the loading attribute on the img tag to lazy and that's it.

<img src="image.png" loading="lazy" />

Learning Sass and CSS variables

To up my styling skills a notch, I decided to learn how to use a CSS Preprocessor (SASS) and more advanced CSS features like variables (a.k.a. custom properties). I chose to learn Sass simply because it's the most popular one out there. It can be installed with this command:

npm install -g sass

To run Sass code in a web browser, it must first be transpiled to CSS. Every time a change is made in a styles.scss for example, the following command will compile it into styles.css which the browser can read. Link the compiled CSS file in your HTML file, and you're good to go.

sass --watch style.scss style.css
// Press `Ctrl + C` to cancel the operation

With Sass, I was able to make use of mixins and nesting. For example, I had several flex containers in my application. Instead of declaring the same styles every single time, I created a mixin for it. The advantage is that it helped to reduce repetition, and kept my code cleaner and shorter. I also made use of CSS variables over Sass variables for the sole reason of being able to access and manipulate them with JavaScript if necessary.

:root {
    --bg-color: #ffffff; // CSS variable
}

// Mixin declaration
@mixin flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project {
    background: var(--bg-color); // CSS variable in use
    @include flex-container; // Mixin in use
}

Performance optimisation

Before deploying the sites to GitHub pages, I ran both of them through Lighthouse to measure their performance. Lighthouse provides audit reports in several categories such as Accessibility, SEO etc. Here are the initial results for one of the sites:

I followed some suggestions from the report which include:

Adding alt attributes to all images.
Sizing images properly with the width and height attributes.
Eliminating render-blocking resources.

After improving my code based on the above recommendations and running the performance test again, my score on Accessibility went up from 75% to 94%. The remaining categories also went up in score:

While I was reading up on render-blocking resources, I realised that more than 90% of the CSS on my page was not being used despite my attempts to include only what I needed from Bulma. This insight was gained when I checked the Coverage tab in the Chrome DevTools.

In the process of trying to figure out how to remove the unused code, I found out about UnCSS, a tool that removes unused CSS from your stylesheets. It can be installed by running:

npm install uncss --save-dev

Then I created an uncss.js file and used the following code from the documentation:

const uncss = require("uncss");
const fs = require("fs");

// Your html files here
const files = ["index.html"];

uncss(files, (err, output) => {
    try {
        if (err) throw err;

        // Write output to a css file here
        fs.writeFile("main.css", output, (err) => {
            if (err) throw err;
            console.log("uncss: done!");
        });
    } catch (err) {
        console.error(err);
    }
});

UnCSS analyses each HTML file in the files array and provides the trimmed css in the callback function (as output). fs.WriteFile then creates a main.css file and appends the content of the output. The whole operation is wrapped in a try...catch block for efficient error handling. After saving the file, I updated the build script in my package.json file:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx sass --style compressed main.scss main.css && node uncss.js"
},

When I run npm run build, it converts the Sass file to minified CSS code, and subsequently runs the UnCSS script to remove the unused parts of my code thereby increasing performance and reducing loading time. It absolutely changed the game for me after I used it. The size of the CSS file in one of the projects went from 137KB to 11KB representing approximately a 2,000% reduction from the original 240KB stylesheet size without any visual differences! This ensures that I'm sending the smallest possible bundle to the users.

Takeaway

All in all, I learned a lot of new things during the process of building the both landing pages. They include:

The value of CSS variables.
Sass, its features and how to use them.
Using only what is needed to increase performance.
How to use the UnCSS tool to remove unused CSS code.
Setting specific width and height for images to prevent layout shifting.
Using Lighthouse to measure and improve site performance.

You can check and compare the old and new versions of the sites:

I hope you have gained some value from this article. Let me know your thoughts in the comments.

Thanks a lot for reading!

Build a Random Hex Color Generator with Vanilla JavaScript

Toluwanimi Isaiah — Wed, 27 Jan 2021 17:47:06 +0000

In this tutorial, I will be showing how I built a hex color generator. It is a simple page that generates a random hexadecimal color code when you click a button and updates the background of the page to correspond with the generated color code.

The markup

I decided to make the page very simple, giving it only a heading containing a span tag that will display the value of the current background color, and a button.

<body>
  <div class="container">
    <h1>Hex Color: <span class="hexValue">#ffffff</span></h1>
    <button id="btn">Click to generate new color</button>
  </div>
</body>

Styles

I gave the page a default background color of white, added a transition effect to make the color change smoother and set its height and width to that of the viewport which is the user's visible area of a web page. Then I went ahead to center the contents of the page using CSS Flexbox:

body {
  background: #ffffff;
  font-family: 'Lato', sans-serif;
  transition: background 0.3s;
}

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  letter-spacing: 0.1em;
}

Functionality

First thing I did was to create references to the necessary HTML elements and the button in the JS file.

const button = document.querySelector('#btn');
const body = document.querySelector('body');
const value = document.querySelector('.hexValue');

Then I stored all hexadecimal values in an array and added a click event listener to the button:

const hexValues = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']; 

button.addEventListener('click', changeHex);

I defined the callback function of the event listener as follows:

function changeHex() {
  let hex = '#';

  for(let i = 0; i < 6; i++){
    const index = Math.floor(Math.random() * hexValues.length)
    hex += hexValues[index];
  }

  value.textContent = hex;
  body.style.backgroundColor = hex;
}

Every time the button is clicked, the changeHex function is called which creates a variable hex and sets its value to #. Then it loops over the hexValues array 6 times and each time generates a random number using Math.random().

Now, the Math.random() function picks a random number between 0 and 1 (not including 1) and returns a decimal but we don't want decimals. So what do we do if we want a whole number larger than 1? We multiply it by the number we want (in this case, the length of the hexValues array) and wrap it within the Math.floor() function which returns the largest integer less than or equal to a given number. It basically rounds it down to the nearest whole number. This makes sure that any number generated is a valid hexValues index.

The random whole number generated is appended to a new variable index. I can now access the hexValues array item in the position corresponding to the generated index number using bracket notation, then add it to the end of the hex variable i.e hex += hexValues[index]. Then the cycle repeats itself until the 6th round is over at which time a full 6-digit hex code will have been generated.

Updating the page

All that's left is to set the textContent of the span tag and the background color of the page to be the value of hex. And that's all!

Conclusion

We've successfully built a random hex color generator using HTML, CSS and a few lines of JavaScript. I hope you learnt a lot from my method. You can find the complete code on my GitHub repository. There are certainly other ways to achieve the same result so do check them out and give them a try.

Thanks a lot for reading, and happy coding!

Build an Unsplash Photo Search App Using Vanilla JavaScript

Toluwanimi Isaiah — Tue, 24 Nov 2020 14:51:55 +0000

In this article, I will explain how I used JavaScript to build an image search app. It fetches and displays images from Unsplash based on the user's search query. This is one of several personal projects I've built to enable me to gain some practice on all I've been learning.

Setting up the markup and styles

I thought about what I wanted the page to look like and decided on a simple white page (as shown above) with the input and submit button at the top, and the results in a grid formation. You can view the whole code below:

Tackling the JavaScript

I first globally stored references to the form and some other HTML elements that I was going to work with. I would still select others within functions later. I also added a submit event listener to the form.

const form = document.querySelector('.js-form');
form.addEventListener('submit', handleSubmit);
const nextBtn = document.querySelector('.js-next');
const prevBtn = document.querySelector('.js-prev');
let resultStats = document.querySelector('.js-result-stats');
let searchQuery;

Then I defined the callback function handleSubmit in the event listener as shown below:

function handleSubmit(event) {
    event.preventDefault();
    const inputValue = document.querySelector('.js-search-input').value;
    searchQuery = inputValue.trim();
    console.log(searchQuery);
    fetchResults(searchQuery);
}

This function takes an event as its argument and first of all prevents the page from reloading using the preventDefault() method. It then stores the value of the search input in inputValue and removes any whitespace with the trim() method. It stores the trimmed input value in searchQuery and passes it as an argument to the fetchResults function which is being called there. I logged the value of searchQuery to the console to make sure the right value was being passed.

Fetch results from Unsplash

async function searchUnsplash(searchQuery) {
    const endpoint = `https://api.unsplash.com/search/photos?query=${searchQuery}&client_id=YOUR_ACCESS_KEY`;
    const response = await fetch(endpoint);
    if (!response.ok) {
        throw Error(response.statusText);
    }
    const json = await response.json();
    return json;
}

async function fetchResults(searchQuery) {
    try {
        const results = await searchUnsplash(searchQuery);
        console.log(results);
        displayResults(results);
    } catch(err) {
        console.log(err);
        alert('Failed to search Unsplash');
    }
}

To be able to use Unsplash's API, you have to create a developer account. Only after that do you get your unique API key with which you can access the photos on the site. An AJAX request is made to Unsplash using a URL containing the endpoint and the relevant query parameters. More information on this is provided in the Documentation page on their website.

The function searchUnsplash takes one parameter (searchQuery), which is inserted into the endpoint as the value of the query query parameter. Now, the URL is stored in a variable endpoint which is passed as a parameter to fetch. The fetch() method takes one argument, the path to the resource you want to fetch, which is stored in endpoint in this case. It always returns a Promise. Now, if the response is 200 OK, it is parsed as JSON which is stored in the json variable. The result is logged to the console so as to view the contents of the JSON data.

Both functions above are asynchronous which means that the await keyword can be used to pause the execution of the function until a promise is resolved. This is achieved by placing the async keyword before declaring a function. I used a try...catch block in the fetchResults function. The try block 'tries' to execute the code within it and, should there be an exception or error, the catch block saves the day and responds appropriately with whatever code is written within it. This is a control flow mechanism which prevents the code from crashing if an error occurs while fetching the results.

Display the results on the page

The next thing is to display the results on the page. If you check the JSON data looged to the console, you will find that it contains several properties which have different contents.

The results property is an array in which the search results are contained. Each search result is an object and can be accessed using either dot or bracket notation.

function displayResults(json) {
    const searchResults = document.querySelector('.js-search-results');
    searchResults.textContent = '';
    json.results.forEach(result => {
        const url = result.urls.small;
        const unsplashLink = result.links.html;
        const photographer = result.user.name;
        const photographerPage = result.user.links.html;
        searchResults.insertAdjacentHTML(
            'beforeend',
            `<div>
                <a href="${unsplashLink}" target="_blank">
                    <div class="result-item" style="background-image: url(${url});"></div>
                </a>
                <p class="photographer-name">
                    <a href="${photographerPage}" target="_blank" style="color: black; text-decoration: none;">Photo by ${photographer}</a>
                </p>
            </div>`
        );  
    });
    totalResults = json.total;
    resultStats.textContent = `About ${totalResults} results found`;
};

An empty div with a class of search-results was already created in the HTML file. It is then selected in the JS file within a new function called displayResults which takes a JSON object as an argument. The textContent is also set to an empty string to clear all previous results.

Now, the results array is iterated over using the forEach method. Within the callback function, the nested object can be accessed through the result parameter. If you study the above image closely, you will find that each object in the array contains several keys such as links, user, urls. These can be used to access different categories of information on the object in question.

The first lines within the callback function are variables in which the different values needed are stored. They were all accessed using dot notation and include:

the image url
the link to the image on Unsplash
the name of the photographer
the link to the photographer's Unsplash profile

Afterwards, each result is inserted into the searchResults element using the insertAdjacentHTML method. This method takes two arguments: the position of the element, and the text to be parsed as HTML. Template literals are used in the second argument because of the parts of the code that will be changing constantly. These are represented by placeholders in the code. The function displayResults is then called in fetchResults.

Each image is set to be the background of its container, and is also a link to its Unsplash page. The name of the photographer, which links to his/her Unsplash profile, is placed right under the image and the result display was styled using CSS Grid.

Show a loading indicator

This is something to be displayed when a search query is being executed to let the user know that the operation is still in progress. I selected a spinner from this website and pasted the HTML and CSS into my code. A reference to the spinner was stored globally in a variable spinner and then the fectchResults function was updated as follows:

const spinner = document.querySelector('.js-spinner');

async function fetchResults(searchQuery) {
    spinner.classList.remove('hidden');
    try {
        const results = await searchUnsplash(searchQuery);
        pagination(results.total_pages);
        console.log(results);
        displayResults(results);
    } catch(err) {
        console.log(err);
        alert('Failed to search Unsplash');
    }
    spinner.classList.add('hidden');
}

Conclusion

In this tutorial, we have seen how an interactive application can be built using JavaScript. I hope you learnt a lot from it.

I'm currently open to job offers. Any information on openings will be really appreciated.

Thanks for reading!