When working with large numbers it can be hard to read them out, try to read this value for example: const value = 100000000; Numeric separators are a JavaScript feature that allows you to use underscore as a separator in numeric literals, for example, you can write 10000 as 10_000. The feature works in recent versions of modern browsers as well as Node.js. When we apply this to the top example we can easily read out the value: const value = 100_000_000; The numeric separator also works on octal, hex, and binary numbers: const octalValue = 0o32_12; const hexValue = 0xff_55_00; const b ..read more

Arrays is as sentral to JavaScript as in many other languages, in this article we will go through the most useful array methods along with creative usage examples. This article is intended for JavaScript beginners up to intermediate level that wants to learn tricks and solutions to problems when working with JavaScript arrays. The article covers the following topics. The basics Array.prototype.length Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.concat Array.prototype.sort The ones you might want to use more Array.prototype.splice Array.prototype.reduc ..read more

The flux pattern has proved a useful for more complex applications. The Redux package has been used extensively in React applications for years but can also be used in similar ways with LitElement style web components. In this tutorial we will re-create the Redux/React Todos example, but this time with pure LitElement style web components. The tutorial is a bit longer, but it will give you a good understanding of how both LitElement and Redux works. With Web Components we do not need the Virual DOM layer as several other frameworks do, and we can therefore render apps with higher performance ..read more

The native Intl.NumberFormat API lets you format numbers for specific languages without any external dependencies. The internationalization APIs in browsers has improved a lot in the last few years. This is the second blog post in a series that will show neat litte examples to help us get more familiar with the native Intl APIs. This post will bring up the basics of using the Intl.NumberFormat constructor to format numbers. Using Intl.NumberFormat const formatter = new Intl.NumberFormat(); console.log(formatter.format(1234)); // 1,234 The constructorIntl.NumberFormat will default to the lan ..read more

The native Intl.RelativeTimeFormat API can generate nicely formatted relative date/time strings without any external dependencies. The internationalization APIs in browsers has improved a lot in the last few years. This is the first blog post in a series that will show neat litte examples that will help you getting familiar with the native Intl APIs. This post will bring up the basics of using the Intl.RelativeTimeFormat constructor for format dates into strings in the popular "5 days ago" used in various services over the internet. Calculate the delta days First we need to calculate how many ..read more

When working a lot on dynamic Web Component apps I have often stumbled on cases where the element properties will be defined by the end users. To prevent errors when selecting these elements they need to be properly escaped to work with any character. At first I had the approach of filtering out forbidden characters for these properties (like .replace(/[^a-z\d-]/g, '')) but this will always increase the risk for collisions where two values that was inserted differently for the user gets converted to the same string (my id and my.id might both be converted to myid). Its easy to start thinging a ..read more

We live in a data-driven world, consistently transferring data from one location to another. In this brief tutorial, I will show you how to extract pdf content using PDF.js. This npm package will help you roll out custom pdf extraction logic or an interface to explore pdf data. This article is a guest post by Ammon Victor. This article glosses over the following ES6 concepts const, promises, async/await and fat arrow functions # run npm install pdfjs-dist # or yarn add pdfjs-dist Core /** * Note the import of pdfjs/es5/build/pdf, required when in Node.js * else when using the default import ..read more

The Math.round function will always round to a whole number and sometimes you want to round a number to a specific precision. This is a tiny and handy function to round a number to a specific precision: function round(value, precision = 0) { const exponent = Math.pow(10, precision); return Math.round(value * exponent) / exponent; } Less is more ..read more

In some cases you have one type of values with a specific range and you want to scale them proportionally into a new range. function scale(value, inMin, inMax, outMin, outMax) { const result = (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; if (result < outMin) { return outMin; } else if (result > outMax) { return outMax; } return result; } If you have a lot of places where you need to scale values between the same two ranges a class might be more useful to reduce repeating the min/max properties each time. class Scaler { constructor(inMin, inMax, outMin, outMax) { thi ..read more

While we have CustomEvent for all of our events that needs to carry data the need for the detail property nesting can feel a bit cumbersome. Also the name custom in CustomEvent does not really tell us much about what this object does. DataEvent I find it useful to instead inherit from Event and then simply use Object.assign to append properties from the provided options. class DataEvent extends Event { constructor(name, options = {}) { super(name); Object.assign(this, options); Object.freeze(this); } } Also we freeze the object as the event should not be modified. Usage example: const notif ..read more