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 much simpler than react-dnd, however has some limitations and is primarily designed for drag and drop with vertical and horizontal lists.

In this blog, we are going to focus on react-beautiful-dnd — how to set it up, some details about the API, and finally how to implement a re-orderable list.

Setting up

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?

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…

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

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 same syntax of JS, but it lets you add types to values, write classes and interfaces — it is essentially a wrapper to JS, and it is transpiled into plain JS before it runs.

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