DEV Community: Ian Holden

Future JavaScript – Stay ahead of the curve by using new JavaScript features today (4/4 – Data Structures)

Ian Holden — Sun, 21 Feb 2021 17:56:00 +0000

In this post, I am going to show you some of the future JavaScript features that you can use today. Our focus will be on data structures within JavaScript that were outlined as less commonly used in 2020’s State of JS survey.

This post is the fourth and final in a series focussing on using future JavaScript features. If you would like to know more about what tools you will need to begin using future JavaScript features, using new syntax features or using new JavaScript language features, I would recommend viewing the previous posts in this series.

Getting Started

Firstly, we will explore how the map object gives us an opportunity to store key-value pairs.

Secondly, we are going to see how we can use sets to store a unique set of values.

Finally, we will explore the flat() method of JavaScript Arrays. This allows us to pull arrays from inside of an array and move them “up a level” within the array so-to-speak.

Let’s begin with maps.

Maps

Similar to objects, maps allow us to store key-value pairs. The difference is, maps allow us to store any type of value as a key. We could have a boolean key and a corresponding value which is an object if we wanted!

Maps also come with a host of helpful functions. We can count the number of elements within a Map object or check for the existence of a given key. We also have the CRUD-style (create, read, update and delete) operations too.

To explain how we can use Map objects, let’s begin with an example. Let’s set up a map named myMap and then add some key-value pairs to it.

let myMap = new Map();

let keyString = "a string";
let keyObj = {};
let keyFunc = function () {};

myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");

We can use the in-built functions like so:

myMap.size // 3
myMap.get(keyString) // "value associated with 'a string'"
myMap.get(keyObj) // "value associated with keyObj"
myMap.get(keyFunc) // "value associated with keyFunc"
myMap.has("a string") // true
myMap.has("string") // false

Next up, let’s take a look at Sets.

Sets

Sets allow us to create collections of unique values of any type. The easiest way to illustrate this is with some examples:

let mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(2);
mySet.add("three");
let o = { a: 1, b: 2 };
mySet.add(o);

After adding these values to our set, let’s try out some functions to see what is happening inside our set object:

mySet.size // 5
mySet.has(1) // true
mySet.has(2) // true
mySet.has(Math.sqrt(4)) // true
mySet.has("Three") // false
mySet.has("Three".toLowerCase()) // true
mySet.has(o) // true

Did you notice that we tried to add the number 2 twice? Our set will only contain one value for the number 2 because it will only add unique values.

Array.prototype.flat()

The Array.prototype.flat function can be useful when you need to ‘flatten’ an array. If our array has values that are arrays, we can bring those arrays up a level towards the parent array. It is similar to destructuring the child array inside of its parent.

Here is a simple example of how you can use it:

const myArray = [0, [1], [[2]], [[[3]]]];

myArray.flat() // [0, 1, [2], [[3]]]
myArray.flat(2) // [0, 1, 2, [3]]
myArray.flat(3) // [0, 1, 2, 3]

Live Example

If you would like to play with these features in a live environment, I have created a Code Sandbox for you to clone and tamper with at your leisure. It is a Node sandbox that uses the Console to log the output from all of the examples that you have seen in this post. To view these logs, you may need to run yarn start in the Console.

To Conclude

Thank you for reading my post. If you have enjoyed this series, please let me know in the comments. I have learnt a lot about these new language features and will be looking to use them in future projects, where appropriate.

Are there any other features of JavaScript that you would like to know more about in a future post or another future series perhaps? Let me know in the comments and be sure to continue for more JavaScript posts.

Future JavaScript – Use new Language features today (3/4 - Language)

Ian Holden — Sun, 14 Feb 2021 15:25:09 +0000

In this post, I am going to show you some of the future JavaScript features that you can use today. Our focus will be on language features that were outlined as less commonly used in 2020’s State of JS survey.

This post is the third in a series focussing on using future JavaScript features. If you would like to know more about using new syntax features or what tools you will need to begin using future JavaScript features, I would recommend viewing the previous posts in this series.

Please be aware, if you have not read the first post in this series and would like to try these features for yourself, you will need a compiler like Babel. For your convenience, I have embedded a Code Sandbox playground with all examples at the bottom of this post.

Getting Started

Firstly, we will explore how we can use proxies in JavaScript to intercept and change the functionality of a predefined object.

Secondly, we are going to look at decorators and how they can be used to add additional functionality to class methods and attributes.

Last but not least, we will explore the allSettled method of Promises. This will allow us to continue execution of code once we have received a response from every member of an array of Promises.

Let’s begin with proxies.

Proxies

The Proxy feature allows you to change the functionality of an existing object by defining new behaviour. It requires two parameters, target and handler.

The target parameter should contain the object that we wish to proxy.
The handler parameter should contain a function that tells our system how we should handle the target object. You can use the following handler functions to modify the target.

Let’s start with a code example:

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler = {
  get: function (target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message1) // undefined
console.log(proxy.message2) // "world"

This code defines a proxy variable and hands it the target object and the handler object as its parameters. The handler object has one property get which looks for a prop named ‘message2’ and if found, returns “world”.

You may have noticed that when we accessed the ‘message1’ attribute, we are returned undefined. This is because we have only told the get function to return something if the ‘message2’ prop is accessed.

We can return all other properties unchanged by using the global Reflect object. Examine the amended example below:

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler = {
  get: function (target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments); // <-- This is our addition
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message1) // "hello"
console.log(proxy.message2) // "world"

We can now see that our proxy object returns the original value in the message1 attribute.

This is proxies in a nutshell. There are many more features available to us and I would recommend viewing the official documentation on MDN for more advanced examples.

Decorators

Decorators are a JavaScript feature that allows you to decorate existing class functionality by adding additional functionality to it. We can identify decorators by using the @ prefix before a class or its methods.

Babel config

Currently (as of February 2021 – at the time of writing this post), I needed to install a couple of plugins for Babel and update its config to use this feature.

Let’s start by installing the required plugins:

npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save-dev

Next, we can update our .babelrc config file to include these new plugins. Here is what mine looks like:

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ],
  "parserOpts": {
    "plugins": [
      "dynamicImport"
    ]
  }
}

Once these plugins are installed, you should see error messages in your IDE disappear when using this feature.

An example

Take a look at the following example for a demonstration of how we can add some simple, additional functionality to a class.

function setSomeProperty(target) {
  target.prototype.someProperty = "I am set by the decorator.";
}

@setSomeProperty
class MyClass {}

const test = new MyClass();

console.log(test.someProperty) // "I am set by the decorator"

In this example, we have a simple function that accepts a target object and adds a property to it. We have also defined a JavaScript class without any methods or properties. This class has a decorator before its definition which references our function.

We can see that when we log someProperty on our test class, we have been returned the value that we set in our function.

Promise.allSettled

With allSettled, we can ensure that we continue code execution when all our asynchronous functions have completed or failed.

Here is how it can be used:

const promise1 = Promise.resolve("FOO");
const promise2 = Promise.reject("BAR");
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => {
  console.log(results[0]) // { status: 'fulfilled', value: 'FOO' }
  console.log(results[1]) // { status: 'rejected', reason: 'BAR' }
})

Our example above shows the returned response from the allSettled function. This function really comes into its own when you have a more realistic asynchronous operation which returns a response at different times.

If you would like to know more about Promises, I would recommend this detailed article by Jake Archibald.

Live Example

Up Next

Thank you for reading my post. If you have enjoyed it, stay tuned as there will be one final instalment in this series next week. Data structures are the topic of next weeks tutorial. I look forward to seeing you then.

Future JavaScript – Play with JavaScript syntax features today (2/4 – Syntax)

Ian Holden — Sun, 07 Feb 2021 00:51:09 +0000

In this post, I am going to show you some of the future JavaScript features that you can use today. Our focus will be on syntactical features that were outlined as less commonly used in 2020's State of JS survey.

This post is the second post in a series focussing on using future JavaScript features. If you would like to know how you can set up a project to use these new features, read the first future JavaScript post in this series.

Please note, if you have not read the first post and would like to try these JavaScript features for yourself, you will need a compiler like Babel. For your convenience, I have embedded a Code Sandbox playground with all examples included at the bottom of this post.

Getting Started

Firstly, we will see how nullish coalescing can help you avoid null or undefined errors in your code at runtime.

Next, we will explore optional chaining. This feature offers similar benefits to nullish coalescing but can be expressed in a slightly different way.

Finally, we will look at private fields in ES6 classes. Private fields allow you to privately scope your variables to a class object (or instance). This aligns JavaScript classes with other object-oriented languages that you may be familiar with (like Java for example).

Let's begin with nullish coalescing.

Nullish Coalescing

Nullish coalescing is a new operator that is formed of two question marks ??.

This operator will return the left-hand side operand if it is not null or undefined. Otherwise, it will return the right-hand side operand.

Primitive data type examples

Remember, the nullish coalescing operator will only return values that are not null or undefined. Therefore, the following examples work like so:

undefined ?? "return me" // "return me"
null ?? "return me" // "return me"

However, what do you think would happen if we try the same examples with booleans? Take a look:

true ?? "do not return me - return true" // true
false ?? "do not return me - return false" // false

Surprised? The last example actually returns a false boolean value, which is quite unusual if you were expecting this operator to work as a standard if ... else conditional would.

If you are looking for an operator that does not return falsey values, you should use the logical OR (||) operator. To compare this with the nullish coalescing example above, see the following:

false ?? "do not return me - return false" // false
false || "return me" // "return me"

This makes the nullish coalescing operator very useful. If you are using numbers that are initialised as 0, or strings that are initialised as '', you may want to return these because they are valid values for your variables. See the example below:

0 ?? "do not return me - return 0" // 0
"" ?? "do not return me - return an empty string" // ""

Object examples

For these next two examples, we will look at how nullish coalescing affects objects. We will work under the assumption that the following object is defined:

const obj = {
  key: "value"
};

We can check the existence of an object's nested property using this technique really easily:

obj.key ?? "do not return me - return value" // "value"
obj.key.nestedKey ?? "return me" // "return me"

In our next feature, we will see how optional chaining can help us work with objects in a similar, but slightly different manner.

Optional Chaining

Optional Chaining allows you to use .? to access nested attributes in an object.

It will allow you to access objects in a familiar way but it will short circuit if it meets a nested attribute that is being accessed from a null or undefined parent.

We will start our examples by defining an object (the same object as before in fact) that we will test this operator on:

const obj = {
  key: "value"
};

Currently, we know that objects in JavaScript work in the following way:

obj.key // "value"
obj.badKey // undefined

However, when we try and go one level deeper for a key that is undefined, we are met with an error:

obj.badKey.key // Uncaught TypeError: Cannot read property 'key' of undefined

This is where the optional chaining operator becomes useful. In some scenarios, we may not want our program to error if we try to access an undefined nested property. We can achieve this in the following way:

obj.badKey?.key // undefined

Private Fields

You can add private properties or methods (fancy names for class variables and class functions) to your classes by using private fields. This ensures that they are privately scoped so that they can only be interacted with by the class.

Private properties/methods can be defined by the # character.

Babel config

Before we can begin using this feature, it is worth noting that currently (as of February 2021 - at the time of writing this post), this feature is still experimental. This means that if we are using Babel to enable this future JavaScript feature, we need to add a little extra config.

First, we need to ensure that we have the relevant Babel plugins installed:

npm install @babel/plugin-proposal-private-methods @babel/preset-env --save-dev

Once these have been installed, we can add them to our .babelrc file. To see an example .babelrc file, you can see how I have used these plugins below:

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ],
  "parserOpts": {
    "plugins": [
      "dynamicImport"
    ]
  }
}

Once you have completed this step, your IDE should stop complaining when you use this feature.

Examples

For these examples, we are going to assume that we have defined the following class and have an instance of it stored in the test variable:

class Test {
  #privateField = 1;
  publicField = 2;

  sum() {
    return this.#privateField + this.publicField;
  }
}

const test = new Test();

Now to illustrate how private fields work in this example, look at the following code:

test.publicField // 2
test.privateField // undefined
test.sum() // 3

Hopefully, you can see here that we have defined two properties: publicField as 2 and privateField as 1. When we try to access these properties outside of the class, we can see the value of the private property has not been returned.

When we call the class method sum() however, we can see that it returns 3 which proves that the private attribute's value is being used inside the class.

Live example

If you want a more interactive experience of the features in this post, I have created a corresponding Code Sandbox for you to play with. It is a Node sandbox that uses the Console to log the examples given in this post. To view these logs, you may need to run yarn start in the Code Sandbox console.

Up Next

I hope you enjoyed this description of three of the lesser-used features from the State of JS 2020 survey. Luckily, you can find more examples of future JavaScript features in my next post. Spoiler alert - we will be looking at some of the language features next.

Future JavaScript - Stay ahead of the curve by using new JavaScript features today (1/4 - Intro)

Ian Holden — Tue, 02 Feb 2021 12:37:22 +0000

JavaScript is one of the most popular programming languages in the world. It is frequently changing to offer new ways of writing code and performing functions over time.

If you imagine a graph that pins the average number of tools in today's JavaScript engineer's toolkit, you might find yourself wanting to learn more about some of the latest features. I wanted to write this post to show you how you can start using future JavaScript features in your projects today.

What future JavaScript features are we going to look at?

Last December, the State of JS 2020 survey published their results. The survey questioned which new JavaScript features are being used in the projects of its correspondents. I wanted to try some of the lesser-used features and explain how you can use them in your projects.

The survey returned many categorised results. I have created a series of posts to explore three of these categories further. These categories are:

Syntax
Language
Data Structures

I have selected a few results from each category that have not been adopted as much as others, according to the State of JS survey. By doing this, I hope that you can learn about how simple it is to pick these up and become knowledgeable about them which will help put you ahead of the curve as a JavaScript engineer.

How can we use future JavaScript features?

Let's start with a definition. What do I mean by 'future JavaScript'?

Periodically, ECMA script will release a new edition of their specification. When this happens, browsers that run JavaScript will work to support these new features. Browsers adopt these features at different rates which can make it difficult to use them in our projects. We may come across issues where one browser supports the new feature but another does not.

We can get around this problem by using a compiler.

To translate one flavour of something to another flavour of something, we need a compiler. In JavaScript, our compiler needs to be responsible for transforming future JavaScript code (ES6+) into JavaScript code that is supported by all browsers (ES5).

Thankfully, Babel is a compiler that will help us.

Setting up a JavaScript compiler for your project

Babel is designed to help us in a number of environments. Our project might be a webpage that uses JavaScript in a web browser or it might be running JavaScript on a server that supports Node.js. Whatever our task, it is likely that Babel has the setup option to help us get started.

Because the Babel website has such a long list of setup options and tutorials, I am not going to explain how we can set up our project with Babel in this article.

If you are using a framework to build your project, you may find that your project uses Babel without you knowing. Frameworks like create-react-app, Gatsby and Parcel, all have Babel configured as soon as you start a project.

Up next

In the next article, we will explore some of the future JavaScript features outlined in the State of JS survey.

If you would like to be reminded when the next articles in this series are released, give me a follow.

Please, let me know in the comments if there are any features that you would like to read about in greater detail.

Using SVG icons in your React developer portfolio project

Ian Holden — Sun, 24 Jan 2021 08:27:53 +0000

Have you needed icons in your React web project but were unsure of how to implement them? I use SVG icons on my personal portfolio site and have recently updated the way that I include them. I would like to describe my chosen method in this article.

What is SVG?

SVG is the format for creating Scalable Vector Graphics. This means that you are able to create visuals that are defined with vectors instead of pixels. They are an alternative to other rasterised image formats such as JPG and PNG (for example).

Rasterised graphic formats such as JPG and PNG are great for storing densely populated images that include lots of variations in colour. A landscape of a forest, for example, would have many different shades of green, blue and brown for the leaves, sky and ground respectively. A scene like this would be hard to recreate using SVG.

SVG's intended purpose is for creating simpler graphics; graphics that contain fewer colours and defined shapes. They also offer a host of other benefits that are not available to us in a pixel-based format.

Why would we use SVG?

SVGs provide many benefits. Their payload is typically smaller than that of a JPG or PNG because SVGs are stored as XML. This allows our graphics to be indexed.

SVGs are totally scalable because they are designed with vectors. This allows us to enlarge, shrink and print the graphic at any resolution and the graphic will still look crisp.

SVGs give us more control over our graphic and how we might transform it with code. Because SVGs are stored as XML, we are able to interact with it from within our project markup. This gives us the potential to animate and transform our graphics on the fly using JavaScript and CSS.

Finding SVGs for my React project

On my portfolio website, I use many different SVGs to highlight the web technologies that I have used and also to highlight the methods to contact me (social media, email, GitHub).

These web technology icons are SVGs that describe the technologies used to create my portfolio website.

Sourcing icons from Devicon

My first task is to source the icons that I would like to use in my project. This article applies to any SVG that you would like to use, however, if you are looking to use icons for a web development portfolio, I can not recommend Devicon highly enough!

Devicon offers a couple of ways to use their icons in your project.

Import icon font

You can access all the icons from Devicon by importing their CSS font. This is a simple import in the <head> of your markup:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.9.0/devicon.min.css">

To use an icon from the icon font, you can use the following markup:

<i class="devicon-javascript-plain"></i></code></pre>

This approach is fine and will work. However, for my project, it didn't offer as much flexibility as I would have liked. I also didn't like the idea of adding another HTTP request for the CSS stylesheet when I knew that I would only use a few of the icons from Devicon.

I opted to use another method.

Use raw SVGs in custom components

As well as an icon font, Devicon offers each icon as raw SVG via their GitHub repository or via their website interface. I opted to use the raw SVG in my project for a few reasons:

It will give me greater control over the SVG within my code; allowing me to animate the icon if I would like to.
I can make simple changes on the fly by incorporating prop values into the SVG.
I can optimise the SVG however I like.

Implementing an SVG component in my React project

Create React project

Our first task is to create a new React project. For speed, we can use the create-react-app template by running the following command in our command-line interface:

npx create-react-app svg-dev-icons
cd svg-dev-icons

Import SVGs from Devicon

Find an icon that you would like to use from Devicon and copy the raw SVG to your clipboard. For this tutorial, we are going to use the React icon:

<svg viewBox="0 0 128 128">
  <g fill="#61DAFB">
    <circle cx="64" cy="64" r="11.4"></circle>
    <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z">
    </path>
  </g>
</svg>

Create a component to display SVG

Directory structure

Create a few directories so that your file structure looks like this:

/src
  /components
    /icons
      /svg

react.js

Inside your new /svg directory, create a file named react.js and add the following code:

import React from "react";

const Icon = ({color}) => (
  <svg viewBox="0 0 128 128">
    <g fill={color}>
      <circle cx="64" cy="64" r="11.4"></circle>
      <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"></path>
    </g>
  </svg>
);

export default Icon;

This is going to be how we import our SVGs into our project. For every new SVG that you would like to use in your project, you will need to create a new JS file like the one above and replace the SVG content with that of the new icon.

We could go ahead and use this component in our project, however, I prefer to create a container that will customise the SVG and add additional markup.

index.js

Create an index.js file in our /icons directory. Add the following code:

import React from "react";
import classNames from "classnames";
import ReactIcon from "./svg/react.js";

const tidy = (string) => string.toLowerCase().trim();

const getIcon = (name, color = "#494949") => {
  switch (tidy(name)) {
    case "react":
      return <ReactIcon color={color} />;
    default:
      return "";
  }
};

const Icons = ({ name, classes, color }) => (
  <div id={`${tidy(name)}-logo-icon`} className={classNames("icon", classes)}>
    {getIcon(tidy(name), color)}
  </div>
);

export default Icons;

There are a few things happening in this file.

Firstly, we have installed the 'classnames' package to help us pass through CSS classes to our new component. To use this, you must run the following command in your terminal:

npm install classnames --save

We have set up a few props for our new component.

Our first is a name prop that we will use to select which icon we would like to return to our project.

The second is a classes prop which will allow us to apply additional classes to the component.

The third is a color prop which we will use to change the colour of the icon. We have set a default value for this prop so that it becomes optional.

Using our SVG component

To use our new Icon component, we can import it into the files that require it and supply the required props like so:

import Icon from "./components/icons";

// ...

<Icon name="React" classes="size-xs" color="hotpink" />

Full solution

You can view the full implementation on Code Sandbox.

Do you have any other smart ways of working with SVGs in React? I would love to hear about them in the comment section.

CSS Architecture (BEM, OOCSS, SMACSS & ACSS) and why we need it.

Ian Holden — Tue, 12 Jan 2021 10:52:03 +0000

Have you ever worked on a large project where there is a clear structure in place for the JavaScript source files, but when you need to make a change to the CSS, you are greeted with a mess of unstructured CSS?

You know what CSS attribute you need to add or amend but in the code, you are cautious because there are CSS attributes being overridden in multiple places and in some cases, there are !important flags being used. You are scared to make a change to the code in fear of breaking some existing styles. So naturally, you create a new rule which has high specificity and just adds to the mess that you were greeted with in the first place.

This is a problem that a lot of projects suffer from.

Understanding how to organise CSS in your project's codebase can be invaluable when your project begins to scale or when new frontend engineers join the team. I would like to walk you through different ideas that can help you create stronger CSS architecture.

Why do we need strong CSS Architecture?

The foundations of a solid CSS architecture can uphold the project as it begins to scale and grow. If these foundations have not been constructed with any thought or planning, it is very likely that in the future, your project could metaphorically fall over.

What I mean by this metaphor is; although CSS will not likely break your system like a JavaScript error might, it can create different issues that make working on the project very difficult. If you have a team of engineers who are not confident in adding or changing CSS in the project, they are more likely to introduce bugs. These bugs will find their way to your end-users and the project's success may be affected because of this.

It is essential to begin a project with a solid CSS architecture in place because it is much easier to write bad CSS than it is to remove it.

My impression is that CSS is not as widely respected in the front-end space as other disciplines are. Why do we take so much time in learning about the latest JavaScript frameworks but also insist on getting by with a loose understanding of CSS? HTML and CSS are the building blocks of the web, yet we settle for an average understanding.

This is something that I think we have all been guilty of! It is something that I would like to change.

What CSS architectures can we use?

There were a number of CSS architectures that stood out when I started researching this topic. They were:

BEM (Block Element Modifier)
OOCSS (Object-Oriented CSS)
SMACSS (Scalable and Modular Architecture for CSS)
ACSS (Atomic CSS)

I do not want to describe these in too much detail as there are some excellent resources available online already. Instead, you can find a brief description of each one below and a link to more information about each methodology.

What is BEM (Block Element Modifier)?

BEM stands for Block Element Modifier and is a way of architecting CSS to encourage the use of a consistent naming convention when creating your style classes.

The naming convention that is recommended by BEM is block-name__element-name--modifier-name where:

block-name describes the block that it should style. For example: photo.
__element-name describes the element within that block that should be styled. For example: photo__image or photo__caption.
--modifier-name describes the modifier of the block or element that is being styled. For example: photo--large or photo__image--black-and-white.

For more information on BEM, i would recommend reading BEM 101.

What is OOCSS (Object-Oriented CSS)?

OOCSS stands for Object-Oriented CSS and is a way of architecting CSS to encourage the use of abstraction to separate structural and visual styling as well as to remove duplication from your CSS.

OOCSS would encourage you to change the following example from something like this...

.button {
    padding: 10px 16px;
    color: blue;
}
.h1 {
    font-size: 2em;
    color: blue;
}

...to something like this...

.button {
    padding: 10px 16px;
}
.h1 {
    font-size: 2em;
}
.primary {
    color: blue;
}

With our new abstraction, we can assign the 'primary' class to both <button> and <h1> elements and it will be given a colour of 'blue'. This helps us keep our stylesheets nice and DRY (Don't Repeat Yourself).

For a more detailed guide on OOCSS, I would recommend reading An Introduction To Object Oriented CSS (OOCSS).

What is SMACSS (Scalable and Modular Architecture for CSS)?

SMACSS stands for Scalable and Modular Architecture for CSS. It requires styles to be built under five different categories: base, layout, module, state and theme.

Base styles should hold your default CSS styles. These styles will be used on all elements of the website/app.
Layout styles should hold the styles for elements that are designed to separate the page into its structural components. Styles for elements like header, footer and grids should be defined here.
Module styles should hold the styles for reusable elements across the website/app.
State styles should define the various states of different elements across your website/app. Styles such as 'is-active', 'is-disabled' and 'is-success' should be found here.
Theme styles should dictate how your elements look. They should go beyond the Base styles and start injecting your project's branding and style into the website/app.

For a comprehensive look at SMACSS, read the online guide from its' creator at SMACSS.com.

What is ACSS (Atomic CSS)?

ACSS stands for Atomic CSS and focuses on creating many small CSS utility classes for you to use in your HTML. It is similar to OOCSS in that they both recommend separating duplicate property-value pairs into their own rules. ACSS could be seen as a more extreme version of OOCSS though, as it encourages you to create styles at the smallest possible level.

Here is an example of some style rules that you might find in a project that uses Atomic CSS:

/* Colours */
.color-primary { color: blue; }
.color-secondary { color: purple; }

/* Margins */
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }

ACSS is also different to OOCSS in that it recommends the use of CSS properties in the naming convention of CSS selectors. For example, in OOCSS, you might target a selector named .primary to change the colour of your elements to a nice shade of blue. In ACSS, you might target a selector named .color-primary.

To find out more about ACSS, I would recommend reading Let’s Define Exactly What Atomic CSS is.

Which CSS architecture should we choose?

The short answer — it doesn't matter.

There are positives and negatives to each different architecture described above. Different people will have different views over which they prefer.

The most important thing is to ensure that your team have agreed on a consistent format to use before you begin writing CSS. This format can be one of the architectures mentioned above, a blend of different architectures or something that you come up with yourself.

The engineering team that work on the project should understand this format so that any new CSS that is written, adheres to the style that you have chosen to follow. Preferably, the architecture should be explained in written documentation. New engineers that join the team should be able to find out about your chosen architecture quickly and easily.

Enforcing consistent styling

Once you have set some rules for how your styles should be written, you will want to enforce them. Whether this is done manually or via an automated process, you will want to ensure that the CSS in your codebase is written consistently over time.

Manually enforcing your code style

You can do this manually by checking new additions to the codebase when you are reviewing pull requests in your git workflow. If you can see that a new CSS rule is being added that uses the !important flag or creates new code instead of using an existing utility function that will give you the same outcome, you should probably advise that this code is changed.

It is optimistic to assume that every member of your team will have a complete understanding of your chosen CSS architecture. Humans make mistakes and it is impossible to ensure that every Pull Request will be reviewed without any code smells slipping through.

We need something more reliable.

Automating the enforcement of your code style

Much like we can use linters to review our JavaScript code, we can now do the same for CSS. PostCSS is a tool that is helping engineers write CSS and use plugins to improve or enhance it. PostCSS offers a host of plugins that include tooling to help us do all sorts of things to our CSS like auto prefixing, linting, minification and many more.

Automating your processes like this will help reduce the amount of issues that slip through your manual code checks and give the team more time to focus on the code that they are working with.

I would recommend finding out more about PostCSS by visiting the PostCSS repository.

Summary

However you choose to architect your project, you must ensure that you do not forget about your CSS. You must try and maintain a consistent style to your CSS code that makes it easier for new engineers to pick up and allows them to make changes confidently. Make sure that these rules are documented and enforced, preferably in an automated way.

The initial time spent creating a strong set of rules that govern the way you write CSS will far outweigh the problems that you might face in the long run if you don't invest this time now. You want new code to produce new features. Don't let small bugs take up the majority of your engineer's time and energy.

What new CSS architectures and tools are you discovering currently? I would love to hear your thoughts in the comment section.

Upload to Amazon S3 using AWS CLI and NPM scripts

Ian Holden — Mon, 02 Nov 2020 18:07:13 +0000

Static websites are a brilliant way to create performant sites. My website is built using Gatsby and hosted on Amazon S3. I have created a simple script to help you quickly upload your site to S3 by running one simple command in your project terminal.

Prerequisites

Before we start, you must ensure that you have completed the following:

Install AWS CLI (Amazon Web Services Command Line Interface) on your machine.
Create a bucket in Amazon S3 (this is where we will be uploading our project files to).

This guide assumes that you have some familiarity navigating the AWS Console and each Amazon Web Service.

Configuring our Amazon services

Amazon S3 is the primary service that we will use for this tutorial. I like to create new users when I work with different projects using Amazon’s CLI so we will be using Amazon IAM (Identity and Access Management) too.

Create a user for our project

In the IAM service, create a new user, give them a name and grant them Programmatic access.

When setting permissions for this user, we want to ‘Attach existing policies directly’ and Create policy.

Using the JSON editor, we can paste the following policy. You must replace ‘ianholden.co.uk’ with the name of the S3 bucket that you want to copy your project files to:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "VisualEditor0",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:ListBucket",
        "s3:DeleteObject"
      ],
      "Resource": [
        "arn:aws:s3:::ianholden.co.uk/",
        "arn:aws:s3:::ianholden.co.uk"
      ]
    }
  ]
}

Save this policy against your new user and you should be presented with an Access Key ID and a Secret Access Key. You must keep these credentials safe as they will be needed later.

Add our new user as a named profile

With the user that we have just created, we need to add this user to our system’s AWS CLI configuration. Follow these instructions for creating named profiles. In your local AWS configuration file, add a new named profile called ‘testUser‘.

Doing this will require us to specify the user that we want to use when we use the AWS CLI. As this will be scripted later, we can include this in the script that we write.

Create a script

This part of the guide will occur in our project’s directory. This method will work for any NPM project that uses a package.json file to control project dependencies and NPM scripts. Examples of these are React, Angular and Vue projects, to name a few.

Create script file

Open your web project in a code editor and create a file at the root of this project called upload-to-s3.sh. Enter the following code, replacing ‘ianholden.co.uk’ with the name of your S3 bucket. Replace ‘project-files’ with the relative directory that you want to upload to your S3 bucket:

#!/bin/bash
# Empty the S3 bucket
aws s3 rm s3://ianholden.co.uk --recursive --profile testUser

# Upload our project files to the S3 bucket
aws s3 cp project-files/ s3://ianholden.co.uk --recursive --profile testUser

Update package.json file

In your project’s package.json file, add the following attribute to your ‘scripts’ object:

scripts: {
  ...,
  "upload-to-s3": "./upload-to-s3.sh"
}

This addition now allows us to run the following command in our terminal which will execute the new script that we have just created:

npm run upload-to-s3

That’s it!

If everything has worked, you should now be able to log into your AWS Console again, view your S3 bucket and find that your project files have been uploaded. This helpful script is very simple and it will save you a lot of time doing these tasks manually.

If you have any issues, it could be that you have not setup your AWS user correctly. Your terminal will normally give you an error message if something hasn’t worked correctly.

In many cases, you might only use one user for your AWS account. If that is the case, you do not need to create a named profile, you can just set up the AWS CLI using default credentials. I would recommend using multiple users across each project because it gives you the ability to finely tune that user’s access to your services which makes it more secure.

I hope you have found this helpful.