How to remove all HTML tags from a string?
When counting text characters in HTML strings, you usually do not want to include the characters in the HTML markup code. While parsing HTML with RegExp does have its limits, in this case, RegExp works very well. …read more
Custom element hearts for Valentine's Day
Tomorrow is Valentine's Day, so what could be more fitting than making a custom valentine-hearts element for your web page? …read more
How do you create a custom element?
Custom elements are part of the Web Components standard. They allow you to extend the browser's native HTML elements or create new ones. When used well, this makes them portable and reusable in any later projects without worrying about backward compatibility or framework choices. …read more
How do you replace all occurrences of a string?
What are Node.js ":node" protocol imports?
Gone are the days of the older require/module.exports/CommonJS import syntaxes. In recent versions of Node.js, the support for modern ECMAScript module (ESM) imports is finally on par with the browser standards, but Node.js has also added a few extra features on top of those standards. …read more
What are numeric separators?
When working with large numbers it can be hard to read them out, try to read this value for example: …read more
How to build a Web Components app with Redux!
The flux pattern has proved useful for more complex applications. The Redux npm package has been used extensively in React applications for years but can also be used in similar ways with LitElement style Web Components. …read more
How to format numbers
The native Intl.NumberFormat API lets you format numbers for specific languages without any external dependencies. …read more
The native Intl.RelativeTimeFormat API can generate nicely formatted relative date/time strings without any external dependencies. …read more
Escaping your CSS selectors in the easiest way possible
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. …read more
How to extract pdf data with PDF.js
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. …read more
Use more ergonomic custom events
While we have CustomEvent for all of our events that need to carry data the need for the detail property nesting can feel a bit cumbersome. …read more
Why should I start using Optional Chaining and Nullish Coalescing operators?
Gone are the days where you had to add incremental nullish (undefined or null) checks when fetching values in nested objects. Let's do more with less code. …read more
Defining easy-to-use APIs can be tricky, a good starting point is to keep a small exposed surface. Now as private fields are becoming available, let try them out. …read more
ESLint disable single line and code blocks
ESLint is a must-have tool for the editor as well as in your CI setup as it greatly improves code quality, however, sometimes you need to disable some rules. …read more
Mixins are handy when you want to share a feature across multiple classes without using inheritance as only some of the child classes should have that feature. …read more
Passing an Object named options to a function instead of separate arguments is one of the oldest tricks in the book, by also assigning an empty object by default you also reduce the amount of if statements needed at the top of the function. But a year ago I learned how combining this with object deconstruction made it so much more elegant. …read more
Why default exports are bad
Sometimes you want to ensure that a RegExp pattern starts immediately after a specific string but you don't want to include those characters in the match. In these cases, a lookbehind expression comes in handy. …read more
This is a tiny and handy function to round a number to a specific precision: …read more
Scaling values between two ranges
In some cases, you have one type of value with a specific range and you want to scale them proportionally into a new range. …read more
How to deprecate features in your API before making breaking changes
When creating APIs that external parties depend on you will soon realize the need to be careful about making breaking changes to that API as even a single renamed property/function might cause existing code using your API to fail. …read more
Why you should always use undefined, and never null