Javascript on NewInWeb

String.replaceAll

Tue, 01 Sep 2020 11:00:00 +0000

Something that often catches out developers when doing string replacement in Javascript is that it is not global by default. That is, when replacing a substring, only the first instance is replaced:

const str = 'Welcome to WEBSITE. We hope you enjoy WEBSITE.';
console.log(str.replace('WEBSITE', 'newinweb.menardi.dev'));
// 'Welcome to newinweb.menardi.dev. We hope you enjoy WEBSITE.'

Previously, to replace all instances of WEBSITE above, you would need to create a Regex, and set the g flag to make it global.

Relative Time strings

Tue, 15 Jan 2019 11:00:00 +0000

Handling dates in Javascript has always been considered a tricky task, which led to the rise of date-handling libraries such as Moment.js. One of the most common uses of Moment.js is converting dates to relative time, such as “a few seconds ago” or “a month from now”.

Now this can be partially achieved natively in browsers using Intl.RelativeTimeFormat. It takes an amount of time as a number, and formats it as a relative time in the user’s language. This offers a great space saving as you will no longer need to include extra language files on your site to handle all these cases.

Improved Performance with OffscreenCanvas

Mon, 10 Sep 2018 11:45:00 +0000

When doing advanced animations or illustrations on the web, many developers opt to use canvas. It is extremely flexible and a great choice for many projects. However, one serious drawback is that it renders on the same thread as the rest of the UI. So, if you have intensive canvas calculations, then scrolling, typing and other interactions with your page can become janky and slow.

With the introduction of OffscreenCanvas, it is now possible to render a canvas using a web worker, meaning that all the heavy lifting is done on a separate thread.

Shadow DOM: Encapsulation for Custom Elements

Wed, 09 May 2018 09:00:00 +0000

This post is part of a series on Custom Elements. See the first post in the series for an introduction.

Custom elements are a great way of creating self-contained elements, and used in many frameworks, such as Onsen UI and Ionic. But, how do they ensure that the user’s own CSS doesn’t accidentally interfere with the framework’s CSS? This is where the shadow DOM comes in.

CSS Leaking

In our original custom elements example, we had a simple series of messages which used a custom element called custom-message. Inside this element, we automatically set up a div with the class message. Imagine that we publish our custom-message to be used by any developer who wants to use it, such as in Onsen UI or Ionic. For simplicity, we move the CSS into a style tag inside the component so it is completely standalone.

Custom Elements (Web Components)

Sun, 29 Apr 2018 09:00:00 +0000

Custom Elements (also known as Web Components) are a great way of writing reusable and testable code. They allow you to define a new HTML tag, which has Javascript associated with it. If you have used React or Vue before, then these will feel familiar to Components in those libraries. Custom Elements will also be easy to pick up if you are familiar with Angular directives.

Where can I use one?

Let’s take the simple case of a messaging app, and consider what the markup for a two simple text messages might look like.

Fetch: A modern replacement for XHR

Mon, 26 Mar 2018 10:00:00 +0000

If you have ever had to fetch some JSON from a website without using a library, you will be familiar with XMLHttpRequest. It can be quite tedious to use, which is why all modern browsers now support the much easier fetch.

Fetch offers a simple way of making requests to a server, returning the result in a promise. In the simple example below, we are getting the HTML of the home page of NewInWeb using both XHR and fetch, and logging it out.

Javascript Arrow functions

Tue, 20 Mar 2018 09:00:00 +0000

One of the biggest new features in the ES2015 specification was the introduction of arrow functions. You have probably already seen these around the internet, and indeed in my previous blog posts. They help to make function definitions much shorter, as well as making working with this much easier.

Shorter function definitions

Let’s start with the basics. How do you define an arrow function? In the simplest case, remove the function keyword, and add => after the list of arguments. In the example below, these functions do the same thing, adding x and y together.

How and why to use Symbols in Javascript

Wed, 14 Mar 2018 19:00:00 +0000

Symbols are a primitive data type in Javascript introduced in the ES2015 specification. It is the seventh data type in Javascript, joining String, Number, Boolean, Object, undefined and null. The use case for Symbol is relatively limited, but it is worth knowing about since it is one of the few primitive data types.

How to Use Symbol

A symbol is created by calling the Symbol function. It accepts one optional parameter, which is a description. It’s important to realise that the only purpose of the description is to aid in debugging. That is, when you console.log your symbol, it will also show the description. The description does not affect the operation of the symbol itself in any way.

Strings in ES2015+

Sat, 10 Mar 2018 18:00:00 +0000

Today we will take a look at some new string-related features, which you can start using in modern browsers right now. These are template literals, .includes(), padding and repeat.

Template literals MDN

Template literals are one of my favourite recent Javascript features. If you find yourself constructing strings from variables frequently, you may be familiar with how unwieldy such a construction can become. The new template literals introduce the use of ` (backticks) instead of ' and ". To use variables inside template literals, you simply include it like ${variable}. It is worth knowing that inside ${...}, you can put any Javascript code you want, not just variables!