Photo from Valerii

Introduction: What is react-beautiful-dnd?

react-beautiful-dnd is a React library for creating drag and drop lists, built by Atlassian. This library has many great characteristics:

Another popular React drag and drop library is react-dnd. react-beautiful-dnd is…

API can only be initiated by a user gesture — what does this error mean, and how can you fix it?

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?


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…

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…

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…

Photo by Vladimir Kudinov

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…

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. …

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

What is TypeScript?

For some context, JavaScript is a scripting programming language that is typically used to make webpages dynamic, and runs in the browser, or on a server.

TypeScript is a superset of JavaScript, which adds optional static typing to the language. It is backward compatible with JavaScript.

TypeScript has all the…

Anna Azzam

Software Developer 👩‍💻

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