Assigns a default value

Object destructuring and default arguments:

A default value to the default object:

Function composition

Function composition is a mathematical operation that combines two or more functions in such a way that the output of one function becomes the input for the next function. The result is a new function that combines the behavior of both functions.

Implementation of general composition function

The corresponding execution order is from left to right. If you want to execute from right to left, then you can use the Array.prototype.reduceRight method.

Example

Memoization function

I found an interesting function while working on my latest project. I call it a memoization function.

The function stores the results in memory and returns immediately if called repeatedly with the same arguments. Such a function is suitable for some longer and demanding calculations.

That is nothing new, but it's a nice piece of code. ;)

Look at this:

Dynamically loading font resources

Did you know, that fonts can be downloaded with Javascript using a new API, the CSS Font Loading API?

The API exposes 2 objects - FontFace and FontFaceSet. A FontFace represents a font. After loaded it, the font can be added to the list of available fonts (called FontFaceSet), and then can be used normally.

See example:

Extract the non-tagged contents of HTML in browser

Yes, you can use the RegularExpression of cource. But, there is cool idea, how to extract tagged content in browser:

JS String padding

Sometimes we want the string to have a specific length. We can use the padStart and padEnd methods.

Removing Event Listeners with AbortController()

With the AbortControler you can cancel fetch request but remove Event Listeners too.

Let's look at an example:

You can use one signal to remove multiple listeners:

Promise with timeout

When you use await, it will wait until the Promise is either resolved or rejected. But sometimes API requests we make don’t get any response from the server.

You can use AbortController to abort one or more Web requests. The second way to solve this is to create a promise with a timeout.

Pipes and error handling

When using pipe(), the error events are not propagated automatically through the pipeline:

We will catch only the errors coming from stream2. 

If we want to catch any error generated from stream1 , we have to attach another error listener directly to it:

---

pipeline() helper function

You can use the pipeline() from the core stream package.

This pipes every stream passed in the arguments list to the next one. For each stream, it will also register a proper error and close listeners.

Vue3 - Attribute Inheritance

The child component by default inherit the declared attributes. Vue3 calls it the Fallthrough Attributes.

A "fallthrough attribute" is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.

If you do not want a component to automatically inherit attributes, you can set inheritAttrs: false in the component's options. These fallthrough attributes can be accessed directly in template expressions as $attrs.

Example:

Optional object property with spread operator

I saw cool magic in my previous project. The optional object property.

Let see example:

Format Dates In JavaScript

Working with a date and time in JS was awful in the past. I dont know about you, but I used MomentJS or date-nfs library. 

Now it is possible to start using the Internationalization API for formating a date and time. Support is good in all browsers.

Let see an example:

If you want to use the browser’s locale, you must pass an empty Array in the constructor. The second argument is options. For more details see the documentation.

There is a Intl.RelativeTimeFormat() class for relative manipulation with a date and time. The Intl.RelativeTimeFormat is similar to the Intl.DateTimeFormat.

Let see an example:

---

Bonus :)

Streams - Transform

Transform streams are a special kind of Duplex stream. Transform streams apply some kind of transformation to each chunk of data that they receive from the Writable side, and then make the transformed data available on the Readable side.

For implementing a new Transform stream, we have to fill _transform() and optionally _flush() methods.

Let see example:

Streams - Readable, Writable

Streams are one of the most important components of Node.js 

For example, the fs module has createReadStream() for reading from a file and createWriteStream() for writing to a file, the HTTP request and response objects are essentially streams, the zlib module allows compress and decompress data using a streaming interface and, crypto module exposes streaming primitives like createCipheriv and createDecipheriv.

Every stream in Node.js is an implementation of one of the four base abstract classes. Writable, Readable, Duplex, Transform. Each stream class is also an instance of EventEmitter.

Streams support two operating modes:

• Binary mode - buffers or strings
• Object mode: objects

---

Readable streams

A Readable stream represents a source of data. There are two approaches to receive the data from a Readable stream: non-flowing (or paused) and flowing. 

Paused mode

In paused mode, you need to call read() on the stream instance repeatedly until every chunk of data has been read.

The highWaterMark property, passed as an option to fs.createReadStream, determines how much data buffers inside the stream.

All Readable streams begin in paused mode but can be switched to flowing mode in one of the following ways: 

• Adding a 'data' event handler.
• Calling the stream.resume() method.
• Calling the stream.pipe() method to send the data to a Writable.

Flowing mode

You can call readable.pause() and readable.resume()

Readable streams from iterables

You can create Readable stream instances from arrays or other iterable objects using the Readable.from()

---

Writable streams

A Writable stream represents a data destination. The example bellow shows an elegant way to create a gziped copy of a file.

In the next post, I am going to look at Transform streams.

Compare locale string

Hi guys

this is a simple post, but I feel it useful. 

I wrote a comparison function for the Czech language in many times. A friend of mine show me a Intl.Collator object today. I acknowledge that I have overlooked it in the past many times.

Lets look at example:

Functions chaining with reduce

Functions chain is very strong pattern in functional programing.

Let see a very simple example:

The evaluation of a functions chain takes place from right to left.

The last step is to create a universal chain function with any number of arguments. I use the reduceRight function from the array with this.

Happy coding.

Promises chaining with reduce

Hi devs,

I am going to made a promises chain with reduce function in this post. I think it is an elegant solution to the sequential execution of async tasks.

"Each .then() returns a newly generated promise object, which can optionally be used for chaining."

MDN Web Docs

Let's see example:

Now let's make chaining with reduce:

Eager & lazy Promise

Promises are always eager to the execution process. It means that when a Promise is created, the callback is immediately executed. That is ok, but sometimes you need call Promise in specific time, for example after setting some resources. 

The sollution is to wrap a Promise in a function.

Lets look an example:

Happy codding.

Conccurency Task queue

Spawning parallel tasks without control can often lead to excessive load. For instance sending bulk emails or downloads a lot of files slightly exceeds server resource limit.

In this post I am going to make a parallel tasks queue with concurrency limit control. 

This queue extends EventEmitter. It is possible to receive errors and get a message after finish.

Let see a queue:

Let see a examle:

Happy coding.

Resource: 

• Source code on Github

Try/ Catch Wrapper

Hey Guys,

do you also have a lots of Try/ Catch in the code? Of course yes. In my previous project I saw interesting wrapper for that.

Let see it:

Happy codding!