Jennifer Bland header image
≡ Menu

3 Ways To Remove Duplicates in an Array with JavaScript

Sometimes you have an array of data and you want to remove all duplicates from the array. In this article, I will show you three ways in which you can do this.

1) Remove duplicates using forEach and includes

The Array includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

With this method, we will create a new empty array. All unique values from our array will be put into this array. We will loop over our array of data and check if the current item is in our new array. If it isn't then we put it in our new array. If it is in our new array then we do nothing.

[continue reading…]

Grid to List Toggle Using Flexbox

In this article, I will show you how to create a toggle to display items in a grid from a list. This will be using basic JavaScript skills with no external code or libraries. We will be using Flexbox.

What we will be creating

grid to list in plain JavaScript

[continue reading…]

Learn CSS: Create the Google Logo

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Google logo:

  • position relative and absolute
  • pseudo classes ::before and ::after
  • positioning an element that is absolute
  • transform: translateY
  • create triangle

What we will be creating

We will create the Google logo in pure CSS. It will look like this:

google logo

[continue reading…]

Learn CSS: Create the Git Logo

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Git logo:

  • Transform to rotate an image
  • position relative and absolute
  • pseudo classes ::before and ::after

What we will be creating

We will create the Git logo in pure CSS. It will look like this:

git logo

[continue reading…]

Learn CSS: Create the React Logo

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the React logo:

  • position: absolute
  • vw (view width)
  • transform: rotate()
  • animation using keyframes

What we will be creating

We will create the React logo in pure CSS. It will look like this:

React Logo

[continue reading…]