Byte Babbles

The CSS   border  property is great for adding stroke outlines to your elements, but it offers little flexibility when working with dashed borders. For example, you can't customise dash lengths, gaps between dashes, or even the caps on each dash.  To overcome this,  we'll be writing our own dashed border renderer using the new CSS Houdini Paint API . The full code is available at the end of the post and on GitHub here . Final result Note that as of 2021, the Paint API is not supported by Firefox or Safari, so if this feature is mission-critical to your project in these browsers, you might want to look for alternatives. Support tables for the API can be found  here . Writing a Custom Paint Class To start with, we need to create a class that handles all the custom painting we'll be doing. It will be responsible for exposing available properties and drawing the actual borders themselves. As you can see, the class has a method that returns all properties we'd like t...

In this article we will delve into the  map()  and  filter()  array methods available in JavaScript. We will understand their properties, explore a few use-cases, and discuss how they lend to the "functional" aspect of the programming language. We will also write our own implementations of these functions, just to gain a better understanding of how they work under the hood. Properties of   map()  and  filter() Unlike methods like  push()  or  fill() , both  map()  and  filter()  work on a copy of the input array. They can thus be said to be  immutable . This means they do not modify array elements themselves, rather return a new array after processing the original. These methods are also  pure functions , meaning their output depends solely on the input arguments and not on any external side effects. Working with  Array.prototype.map() The map function operates on arrays and takes exactly one param...