When dealing with Web APIs, you come across this error:

API can only be initiated by a user gesture

In this blog, we’re going to take a look at what Cyclomatic Complexity is, how to calculate it, and some tools you can use in your everyday coding environment. We’ll also take a look at how useful it is as a metric for measuring the complexity of your code.

First, how do we measure code complexity?

Take a minute to observe the following three snippets of code, which all do the same thing. Which of the following snippets is the “best”?

The answer to that question is very subjective and depends on what metric you are using to measure which is “best”. Some may prefer Option…

This blog will teach you how to tidy up your React code, and avoid prop drilling using a helpful React API called Context.

What is prop drilling?

Prop drilling is the process in a React app where props are passed from one part of a tree to another by going through other parts that do not need the data, but only help in passing it through the tree.

As an example, suppose you have an application that has two themes: light mode and dark mode. Then suppose you have the following Component tree in your app:

This blog will run you through 3 ways to filter unique values from an array in JavaScript, removing duplicate values.

1. Use filter and indexOf to get only the first instance of each value

This approach involves running a filter over the array — for each value, we only add it to the unique array if it is the first item with that value in the array, i.e. if arr.indexOf(value) === index:

const arr = ['a', 'b', 'a', 'b', 'c'];const uniqueArr = arr.filter((value, index) => {
  return arr.indexOf(value) === index;
});console.log(uniqueArr); // ['a', 'b', 'c']

2. Use a map object to store unique values

This second approach relies on JavaScript map objects, which cannot have duplicate keys. It involves creating an…

React gives us two ways of writing our components — functional components, and class components. In this blog, we will take a deep dive into the differences between the two, and the pros and cons of each.

First, what is a React Component?

React components are a way of defining a piece of UI into a reusable piece of code. A component is like a function, accepting inputs (called props) and returning a React element, which describes what should be rendered to the DOM.

The Syntax Differences

Let’s take a look at the syntax of functional and class components — how to write each style of component, the different…

This blog will provide a summary of how to add windowing to your webpage using the Intersection Observer API. Windowing is a great way of improving the load time and performance of your webpage.

What is Windowing in web development?

In web development, windowing is the concept of only rendering what is currently onscreen to the DOM. When rendering a large list of items:

• Elements which are currently visible in the viewport are rendered
• Elements outside of the currently visible viewport are not rendered. They are rendered once you scroll to them.

In this blog I’m going to share 4 interesting Web APIs I’ve used, which might help you when building your next website.

1. MediaStream and MediaRecorder APIs

MediaStream and MediaRecorder APIs are used to capture audio or video from the device’s microphone and camera from the browser. There’s a wide variety of use cases for this, for example:

• Video and audio creation or editing software
• Capturing audio for song detection (SoundHound, Shazam)
• Voice commands and recognition

This blog will run you through 3 ways to initialize a JavaScript Array with conditional elements.

1. Create and spread an array inside the array

This method involves spreading an new array inside ofthe array with the ternary operator.

const myArray = [
    'a', 'b', 'c', 'd',
    ... condition ? ['e'] : [],
];

When the condition is true, this will add 'e'. When it is false, it will spread an empty list[], and nothing will be added to the array.

2. Add elements conditionally and filter falsy values

Here we conditionally add elements using the ternary operator, and then filter out falsy values:

const myArray = [
    'a', 'b', 'c', 'd',
    condition ? …