DEV Community: Svein Petter Gjøby

Build your own version of React

Svein Petter Gjøby — Sat, 21 Dec 2019 22:52:01 +0000

Are you using React, but don’t really know how it works? The framework is quite simple and do not require understanding the underlying mechanisms for most day to day tasks. This workshop will take your skills up a level, giving you a thorough understanding of React.

Earlier this year, me and some colleagues created a workshop where you implement a very basic, yet working, version of React and ReactDOM.

Check it out

You will create a working version of React in less than 200 lines of code. It won’t be as efficient as React is. Nonetheless, you will gain valuable insight into how React work under the hood. We will demystify a lot of the concepts that are taken for granted when using React: representing the DOM-tree, rendering components, setting state and props, and re-rendering.

D3 in action

Svein Petter Gjøby — Fri, 13 Dec 2019 11:13:14 +0000

Originally posted on javascript.christmas

D3 (Data Driven Documents) is a JavaScript library that's well suited to create data visualizations on the web. It brings data to life using HTML, SVGs and CSS. You can make everything from static graphs to interactive articles.

D3.js has been around for a long time, it was initially released in 2011, and has gained a lot of traction during these years. Nowadays, it is the de facto standard of data visualization and has a large community. Just take a look at this list of examples.

What's the fuss about?

The core idea of D3 is to connect data with HTML and/or SVG. Let's say we have some data about the population in some countries and we want to visualize it.

const data = [
    { name: 'Ireland', pop: 6378 },
    { name: 'Tanzania', pop: 3407 },
    { name: 'Norway', pop: 5084 },
];

Then we let D3 do its magic, and suddenly we have the SVG below.

<svg height="300" width="600">
    <circle cx="100" cy="150" r="64" style="fill:green" />
    <circle cx="220" cy="150" r="34" style="fill:orange" />
    <circle cx="340" cy="150" r="51" style="fill:red" />
</svg>

The SVG contains three circles, each of which has a radius relative to the population of the country.

This is where the magic happens

Let's take it one step further, and take a glimpse at what D3 can do.

<svg id="mySVG" width="600" height="300"></svg>

Given this html and the same data as in the previous example.

const data = [
    { name: 'Ireland', pop: 6378 },
    { name: 'Tanzania', pop: 3407 },
    { name: 'Norway', pop: 5084 },
];

Then we use the data method of D3 to join each datum in our dataset to a circle element in the SVG above.

let circles = d3
    .select('#mySVG')
    .selectAll('circle')
    .data(data, d => d.name);

Wait, what?! There are no circle elements in the SVG.

I found this really confusing the first (and second) time I saw it. Instead of telling D3 how to do something, you tell D3 what you want. In our case we want one circle element for each datum in our dataset. This concept is called joining data and this article explains it better than I ever could.

In our example the SVG does not contain any circle elements. Hence, all our data points are a part of the enter selection. The enter selection contains unbound data points, which represents missing elements.

let newItems = circles.enter();

Joining data with the data method creates multiple selections. To better understand data binding in D3 you should check them out.

Then we use the append method to append a circle element for each of the datums in the enter selection.

newItems
    .append('circle') // Add a <circle />
    .attr('cx', (d, i) => 50 + i * 100)
    .attr('cy', 150)
    .attr('r', (d, i) => d.pop / 100);

Now we have modified the original html and it contains three circles that represent the population of each of the countries.

This is just the tip of the iceberg. You can literally make anything you want with D3.

If this article got you interested, you should check out the offical documentation. In my humble opinion that's the best place to start.

Removing duplicates from an array

Svein Petter Gjøby — Sun, 08 Dec 2019 11:42:45 +0000

Originally posted on javascript.christmas

Knowing more than one way to solve a given problem can help you write more readable code. Let's look at three different ways to remove duplicates elements from an array.

Never underestimate the importance of code quality. As a developer it is key to clearly communicate the implementation of any solution you are working on through readable code. Knowing more than one way to solve a given problem can help you write more readable code. Let's look at three different ways to remove duplicate primitive values from an array.

const array = [1, 1, 1, 3, 3, 2, 2];

// Method 1: Using a Set
const unique = [...new Set(array)];

// Method 2: Array.prototype.reduce
const unique = array.reduce((result, element) => {
  return result.includes(element) ? result : [...result, element];
}, []);

// Method 3: Array.prototype.filter
const unique = array.filter((element, index) => {
  return array.indexOf(element) === index;
});

Set

A Set is an object that lets you store unique values. Repeated calls of Set.add(value) with the same value don’t do anything.

const uniqueNames = new Set();

uniqueNames.add("Dasher"); // {"Dasher"}
uniqueNames.add("Dasher"); // {"Dasher"}

By exploiting the fact that a Set cannot contain duplicate values, then use a spread operator to transform the Set back to an array we are able to remove duplicate elements from the array.

const array = [1, 1, 1, 3, 3, 2, 2];

const uniqueSet = new Set(array); // {1, 3, 2}

const uniqueArray = [...uniqueSet]; // [1, 3, 2]

Reduce

The reduce method executes a reducer function (provided by you) on each element of the array, resulting in a single output value. The value returned from a reducer function is assigned to the accumulator, which is passed as the first argument of the subsequent execution of the reducer function and ultimately becomes the final resulting value.

To remove duplicate elements from an array, we can provide a function that checks if the accumulated array includes the current element. If not we add the current element to the array.

const array = [1, 1, 1, 3, 3, 2, 2];

const reducerFunction = (result, element) => {
  return result.includes(element) ? result : [...result, element];
}

const unique = array.reduce(reducerFunction);

Filter

The key to understand this method is to understand how indexOf and filter works.

indexOfreturns the first index of a given element in an array.
filter creates a new array with all the elements that passes a test. You can provide the test as the first argument of filter.

If we combine these two methods, by providing a test that checks if each element is the first occurrence of the given element in the array, we can remove duplicate elements from arrays.

const isFirst = (element, index) => {
  // Checks if a given element is the first occurrence of it.
  return array.indexOf(element) === index;
}

const unique = array.filter(isFirst);

Which method should I choose?

We saw three different methods to remove duplicate elements from an array. It's easy to imagine a fourth method that would improve the readability. Namely, by creating a proposal to add Array.prototype.unique to EcmaScript.

In terms of readability and performance, I prefer the first method. By using a Set your code is both short, performant and easy to understand.