DEV Community: vazsonyidl

Goodbye padding?

vazsonyidl — Tue, 12 Apr 2022 15:20:36 +0000

Come on, it is twenty-twentysomething now, we really should know everything about accessibility, standards, usability, etc.. But how much time do we usually spend with styling, and how much effort is taken away with the N+1 JavaScript framework released every Monday?

It is a pain..

...I read it on several pages, hear it from the community. That is why Tailwind CSS shines so bright, but rather learning all the tags of a CSS framework, people can actually do their own styling. So jump into our today's pick, the magical padding.

The box model

I hope that everyone is familiar already with the box model, but let me attach a picture and the docs.

In CSS, usually everything has a box around it and it can be either inline or block. When the browsers parses your HTML, it will logically organise these super fancy squares that a 2 year old can draw already.

Give me some space

So you want to give your element a little free-space, not to look that bad. Okay, there is no good or bad, so just to add some spacing around it. I mean, with padding, your elements still be so close to each other like you to your commuting-fellows at 5 p.m. on the underground, but at least your arm will be 8px away from your coat sleeve on the inside. That is padding. Hope it helps during your next interview. :)

The problem arises when..

..when you only think about yourself. Really. Do you read from top-to-bottom/left-to-right? Awesome, than you are actually part of ~70% of the people from this point-of-view, but you miss out a few people, who reads from right-to-left/top-to-bottom, etc.

Example

Okay, enough from anecdotes, jump into the code. The following
code shows what I was trying to point out.

in the first paragraph, it works as intended
on the other hand, the second (if the direction is rtl) we can immediately see the issue.

The padding is there, but.. :)

You can say that use padding: 0 8px instead, but come-on...

Writing mode

You may come up with the idea, that instead of rotating the title of your Y-axis on a diagram, you end up using the less-known writing-mode CSS property. Docs here.

In this case, what happens? With padding-left (which you originally set for to give some extra space for the 'beginning' of your element) is actually on the left-hand side now.

Which is the bottom of your text, and the top is the left.

What?! Let me demonstrate:

There is even more

Things can get to be really complicated when you throw in some text-orientation as well - apart from writing-mode. I do not want to really go into the nitty-gritty details of all of these, MDN documentation is always there for edge cases.

Conclusion

Rather than sticking to the well-know and easy-to-use padding-left/right/top/bottom take into consideration, that accessibility and usability is not just some buzz-words, but actual user-experience depends on you! :)

There is always room for improvement, some minor one is padding-inline, but it's big brother padding-block is worth a mention as well.

Hope you enjoyed this article and I was able to show you something new. If you have anything to add, I welcome every comment.

How to boost your productivity

vazsonyidl — Sun, 06 Mar 2022 11:58:03 +0000

In the next couple of lines I would like to share you my experience from the latest feature developed at the current company.

! You should not implement authentication, cryptographic solutions from scratch. In those cases, please rely on third party solutions, unless you really know what you are doing!

The eggs hatched

When I started to write this post, it would have contained only the first part. Thankfully forgot to post - because now, after a few weeks - I have another first-hand experience to share with you! (Although I will do that in another post soon :) )

The scene - for the first occasion

So our designer dreamed a new page for the latest feature. It is a custom graph displaying several different information about booking tables for different periods and for varying length in dates. The main part of the page looks like this:

The difficulties

It contains the two most difficult (or rather tricky) thing to deal with in JavaScript (in my opinion): dates, and a graph/chart.

The possibilities

Picking some third party solutions for the project usually includes these two reasons:

Having the pressure from the product side
Try not to reinvent the wheel

With this on the table, every team tries to deliver the feature as fast as possible - within an achievable time period.

The path

I started to look for various third-party libraries, like
d3js or recharts. Oh, I hope I mentioned, we use React.js.

Everything was like a roller-coaster. One day it looked like there is a possibility to implement all the details with some compromise, but soon I realised that it will not be the solution.

During a bath, a new idea started to take shape, that maybe I should solve it with plain HTML elements. After all, a diagram is a table, where the available spaces are the Y axis, and the time period is the X axis. Each cell contains a filled status, if that particular space is sold or not.

The surprise

To my greatest surprise, it was much quicker to solve the problem this way.

The pros:

You do not have to concentrate on the API of the library
Your possibilities are not limited by the API
You can spend more time to completely match your core business logic (even the edge cases)
React.js is your friend with Reconciliation to optimise rerendering (You can search for more years in our case)
You are free to jump between major versions - one dependency less to track the compatibility with.
Smaller bundle size

The cons:

I think there are a few, and the most important one was wasting ~1 week with finding the 3rd party lib that matched our use-case.

You have to implement the styling by yourself. (Is it even a con? CSS is awesome and easy!)
Third party libraries may provide some additional features (but does not cover your main requirement, so..)

Footnote

I do not want to say that using third part libraries are bad. There are awesome ones, and each of those serves a purpose.

My suggestion is: always look for possible third party options as well as think about how to solve it with plain HTML/TS/CSS.

The more experience you gain, the less time you can make the current best decision.

And remember: the junior programmer knows what to use, the senior knows what not to use.

Selection sort

vazsonyidl — Sun, 07 Nov 2021 18:02:22 +0000

Cover photo from: Unsplash

Intro

This post is a part of a sorting series, where we go over each sorting methods from bubble sort to radix sort, and I will give you some simple explanation. The importance of sorting can be measured by the success of Google search engine vs other search engines. At the end of the day, it gives you the most useful results - based on its well designed sorting algo.

Selection sort

Selection sort basically a very easy method, and can be imagined and implemented in the same way. The main logic is the following:

Take an unsorted array of elements
Create a new array - for ex. starting from the left, initially [] - this will be your sorted sublist
Your input will be your second, unsorted sublist
Find the smallest - or largest - element of your unsorted sublist - depending on your preferences
Insert that into your sorted sublist - at the end
Move the boundaries

Visual demo

Performance and complexity

Sadly, this is an easy solution but it costs you some memory and computation power, and I will show you this through an example.

Example

Let say, your starting element is in const array = [ 4, 1, 3, 9];, in where the length of your array is n = 4;

You have to find the smallest element of this list, which requires n - 1 comparisons. Finding the next one requires n - 2 and so on. On large lists, this soon become quadratic - known as O(n²).

When to use?

If you have small lists - and you are aware and you manage the length of your input, you can use this. In this situation, it can be helpful because of its simplicity.

Implementation

function selectionSort(array) {

// break the reference
  const elements = [...array];
  for (let i = 0; i < elements.length; i++) {

// assume that the 'first` is the smallest
    let smallestIndex = i;

// find the smallest index
    for(let j = i + 1; j < elements.length; j++) if(elements[j] < elements[smallestIndex]) smallestIndex = j;

// if the index is not the same, swap the two numbers
    if(smallestIndex !== i) [elements[i], elements[smallestIndex]] = [elements[smallestIndex], elements[i]]
  }

  return elements;
}

Demo

You can check out this demo page, which is fancy enough to give you a nice understanding.

Visualgo

Thanks four your time :)

Bubble-sort

vazsonyidl — Thu, 07 Oct 2021 17:30:57 +0000

Cover image from: Unsplash - Kai Dahms

Intro

This is going to be a series about different sorting algorithms, some explanation and a quick demo with solution in JavaScript.

Bubble sort

First of all, let start with the most basic one - bubble sort.
The logic behind bubble sort is the following:

starting from the beginning, compare two adjacent elements
if the previous one is bigger than the following one, swap those two
repeat until there is no element left in the array

This is just one iteration, which guarantees that the biggest element is at the end of the array.

repeat this process for every element in the array

Complexity

As you may see, there are several different outcomes, and based on the number of the elements to compare, things quickly can get out of control.

Best case scenario: The elements are ordered > we will do O(n) comparisons.

Worst case scenario: The elements are reverse ordered > we will do O(n²) comparison. It does not look like a problem for 10 elements, but for 1000, there will be a lot of zero after that first leading one. :)

Average scenario: Sadly, the average scenario has the same time complexity as the worst one, which still will be O(n²).

Usage

I think bubble sort is not so problematic, because of its ease to understand. Use it wisely, and use it for small amount of elements. There is nothing wrong with it - up to a minimal amount of elements.

Implementation

Of course, there are a lot of way to implement this, but I will leave mine here for anyone who is interested in. I will link the GitHub repo for this as well.

function bubbleSort(_array) {
  const array = _array;
  for (let i = 0; i < array.length - 1; i++)
    for (let j = 0; j < array.length - i; j++)
      if (array[j] > array[j + 1]) [array[j], array[j + 1]] = [array[j + 1], array[j]];

  return array;
}

Some sneak peak:

the easiest way to swap two variables is [a, b] = [b, a] > you do not need a tmp one then
you do not have to loop the array until the end every iteration > if the greatest is already at the end (and the nth greatest .. so on) leave that alone

Reference

Repo

Angular DI in action - series

vazsonyidl — Sat, 31 Jul 2021 12:38:36 +0000

Introduction

In Angular, you can use services for several purposes. You can share state between components, share common functionalities, create plus one abstraction layer for some problem and so on. Services are just basic classes with the @Injectable() decorator. But how does this decorator actually works, what are the resolution rules that describes which service to use in a component?

Let's dive into these topic. This will be a series with 4-6 parts, and this is the first one.

What is DI anyway?

Dependency Injection is a design pattern, where the initiated class request its dependencies from external sources instead of creating them by itself. With this, you can increase modularity, flexibility and reusability of your codebase.

Starting point

Let's create a demo service for our starting point. It does not matter what this service can do, because we will discover how Angular handles dependency injection.

import { Injectable } from "@angular/core";

@Injectable()
export class DemoService {
  constructor() {}
}

Provide possibilities of a service

So if you would like to use this service, what are your options to tell Angular

I need this service, so inject this for me?

There are two popular ways - as of my current experiences.

Providing it on root level with providedIn: 'root'
Providing it on module level

These two uses almost the same technique with a slight difference. But are these two is used because these are the best solutions, or there are some convenient reasons behind this?

Angular modules never got destroy, so neither the services provided on them ¹.

It not obviously a problem, but good to know this. :)

Dependency lookup mechanism

When you are providing a service, you are requesting that resource from the DI. Dependency injection is solved in the background for you by Angular, but it is worth to have a bit of knowledge how it works.

First of all, there are three different hierarchical injectors (that you can configure):

ModuleInjector: @NgModule and @Injectable with providedIn - module based
ElementInjector: empty by default, but sticked to a component
root ModuleInjector: created when bootstrapping the application

and there are two more that you can not configure:

NullInjector(): this is the top/lowest one
PlatformModule's ModuleInjector() - provide special core things

Visualised, it looks like the following - taken from the official docs:

ModuleInjector

ModuleInjector is created with providers and import properties in any of the @NgModules. At the end, this is a flattening of all of your providers of all the modules that can be reached by any of the imports, recursively.

Think of it as a huge basket of providers - configured by you!

Child ModuleInjectors are created when you lazy load a new module.

ElementInjector

Angular creates an ElementInjector for every DOM node implicitly. You can configure this injector with the providers or viewProviders property of a component decorator.

NullInjector

This is the parent of every Injector in the hierarchy.
If you reach this point - without any modifier - an error will be thrown for you. Yes, that well know error:

NullInjectorError: No provider for XYZService

Why is it important?

So you may have asked yourself now: why is it important for us at all? I can tell you the reason: with understanding the base mechanism of injectors, we can dive a bit deeper to understand how Dependency Injector traverse up the hierarchical graph of this Injectors and how can we influence this lookup mechanism.

With this, you can easily understand why you have a NullInjectorError, why your components have a different instance of your service.

This may help you to debug faster and find the solution for your problem easier.

Stay tuned

This was the first part of this series. In the following one, we will check the resolution rules of dependencies as well as the first resolution modifier.

Have a nice day! :)

References:
1

RxJS 7 is released 🎉

vazsonyidl — Thu, 06 May 2021 19:21:17 +0000

Intro

RxJS v7.0.0 was released just a few days ago, after a more-than-one-year long beta period. It is definitely the most used reactive extension library used for JavaScript with ~24 millions download per week.
Npm page

There are no removal yet, but a lot of deprecations - that will be removed later - so it is recommended to allocate time for the RxJS update!

What's new

It is not that much upgrade that was the previous major package updates, but there are several notable differences between version 6 and seven, let's take a closer look.

Smaller bundle size

It is worth a point that the whole package had been walked through by the creators to check out where are possibilities to - at the end - reduce the bundle size. There were no major refactor with the app - as I saw and read.

Maybe the reduce size is not that outstanding, but every kB counts with slow network especially on mobile. You may see the reducing trend in the chart, it is a good way to go. :)

You can check out the bundle size here, on Bundlephobia.

Latest TypeScript & better type interference

RxJS uses the latest TypeScript (as of 2021.05.06) and also has some real improvements interfering different types. The limit, that around ~7/8 argument RxJS was not able to handle types no longer exists!

There is another example for this, let's take a look at this.

of(new Date(), null, undefined)
  .pipe(filter(Boolean))
  .subscribe();

Now, the type will be Observable<Date>, but it was Observable<undefined> in RxJS 6.

toPromise deprecation

Maybe this is not relevant for someone but a lot of projects may be affected from this. toPromise is deprecated in RxJS 7 and there are two new operators replacing this one, called firstValueFrom and lastValueFrom. It is a huge improvement for reliability for many codebases.

AS the name indicates, firstValueFrom resolves with the first value of a stream, and lastValueFrom return with the last value from the observable stream. If no values emitted, an error is thrown. Unlike toPromise, which resolves simply with undefined.

Operators renamed

I remember we had a discussion with the team that: "wish the operators in RxJS could have more talkative names". It happened, so the following operators are renamed

combineLatest -> combineLatestWith
merge -> mergeWith
zip -> zipWith
concat -> concatWith
race -> raceWith

Retry operator with resetOnSuccess

Previously the retry operator's parameter was not reseted after successful attempts. Now there is a configuration option to indicate this.

...
retry({ count: 2, resetOnSuccess: true })
...

Removing multiple callback options

In RxJS 7 the multiple callback for done, error, complete had been removed from tap and subscribe. Now you need to pass an object for these configuration, just to force you to think it two times and make sure.

Now, instead of this

obs$.pipe(tap(
  data => console.log(data),
  error => console.log(error)
)).subscribe(
  data => console.log(data),
  error => console.log(error)
)

Now you have to do the following:

source$.pipe(tap(
  data => console.log(data)
)).subscribe(
  {
    next:  data => console.log(data), 
    error:  err => console.log(err),
  }
)

Faster

According to some tweets and discussions, developers claims that RxJS 7 is faster. Still, it needs to stand the probe of time, but I think it will. :)

Footnote

Of course there are several other updates in RxJS and shoutout to the developer team for releasing this package. You can read more about the update in details on the following links:

Change summary
Medium article
inDepth article

Mock recursive calls with Jest

vazsonyidl — Wed, 28 Apr 2021 17:31:59 +0000

Introduction

In the recent cadence there were some problems that had been solved with recursive function calls. It is not a problem at all, but what if you have to write unit test for these functions? Forget the what if, you have to write unit tests for your functions, of course! In the next few sections I would like to share my experience with you, and how you can solve this kind of problems.

This post will show you how to solve this problem with Jest.

What this post is not about

This post is not about those fancy stuffs like memoization, recursive function calls to solve fib(50) with the most optimal way, etc and testing these things. While these are great stuff, I have never met with the requirement to memoize a fibonacci call in production, so these tasks are good for your brain and for learning purposes, but now turn our attention to some real life issues.

A bit nicer solution would be a WebSocket, but .. for the sake of demonstration. :)

Setting up the scene

So, imagine you have to solve some pulling thing collaborating with you backend. For example, there is a generation process in progress and your task is to polling this endpoint as long as the required response has not come yet.

The happy path is: your first call will succeed and you are on your way to make your user happy.

The sad path is: the generation is in progress in the first (or second, ...) call and you have to pull files until you have a satisfying result.

Code example for this

  private getChannelInfo(): Observable<string> {
    const channel_id = this.getChannelId();
    return this.getInfo<InfoResponse>(`/api/_info`, {
        params: {channel_id},
      })
      .pipe(
        delay(1000),
        switchMap(body => body?.completed ? of(body) : this.getChannelInfo()),
      );

As long as the endpoint not responds with a satisfying result, specially with completed, we are fetching again with a one second delay.

The problem

Okay, we set the scene, now we should write test for it. Okay, mock the return value for the getInfo function call. But what if we mocked that once? We should flush that mock, and provide another return value on the second call, for example.

The solution

Maybe there are several hacky workarounds for this, I think Jest provides a really straightforward solution.

it('should pull channel info again', () => {
// ... the rest of your setup
serviceUnderTest.getInfo = jest.fn().mockReturnValueOnce(of(null)).mockReturnValueOnce(of(mock));
// ... your assertions
});

What we can see in this example, when the first function calls happen for the getInfo function, jest steps in and says

on the first call, I will return of(null)
on the second call, I will return of(mock)

With this chaining of mocks, you can provide multiple return values based on the times of call for your function. With this, you can easily test thoroughly your recursive logic in your service/components.

Addition

There is an option to provide return value for any other calls for the function with the following set-up:

jest.fn().mockReturnValue([]).mockReturnValueOnce(of(null)).mockReturnValueOnce(of(mock));

the first and seconds returns as described above
any other function call will return with []

I hope this give you a bit of interest with this topic, any comments and responses are welcomed :)

References:
Mock once

Prototypes & inheritance in JavaScript

vazsonyidl — Mon, 25 Jan 2021 18:25:59 +0000

Intro

Have you ever wondered how inheritance works in a language like Javascript? This language is not in the first ones that come to your mind first when talking about OOP paradigms. Although inheritance literally works in JavaScript, and in the following sections we will discuss it in details.

Prototype, the stalker

If you are not a real newbie to JavaScript, then maybe the words prototype and property not sounds strange. Almost all objects in JavaScript have a prototype object. Although Object.prototype is one of that rare objects that does not have a prototype object. When you create a simple

let a = 'bcd'; code, the

Object.getPrototypeOf(a); // String.prototype

will return you some interesting stuff. Your variable has been wrapped around with an object, here for example with the String. That is the reason why you can use that huge amount of different methods on your variables.

If you create a simple let q = {}; then you do not have a prototype property at all, sou can not query with the q.prototype way. But do not afraid, it is the normal behavior. We will discuss how to inspect the prototype in the following sections.

One important note: almost all object have a prototype but do not have a property called prototype. Although inheritance in JavaScript works even this way.

Prototype chain

Accessing properties of object are just like bubbles underwater. It always goes up and up until reaches its goal.

For example, take that you want to query the myProperty property on an myObject object. If that own property does not exist on that object, the prototype object of myObject is looked up. If the property exists there (on that object), then that is returned. If not, then another level is looked again, until myProperty is found or the prototype property turns out to be null. In this case undefined is returned. As this little description summarized it, the prototype attributes create a chain, called prototype chain.

Example

As you can see here, first we created our base object. Then two descendants are made in a chain-like way. If you query a property it bubbles up in the prototype chain, just like the chair property does. If one is not exists, then undefined returned. As you can see, you can overwrite properties, and that will not affect the prototype chain's properties, so setting properties not bubbles up, only getting.

This is a key feature, because it allows us to create and overwrite inherited properties selectively.

Exceptions

There is one exception that breaks the basic way of creating property of an object. If the inherited property you wish to overwrite (just like color in the previous example) is an accessor property with a setter method. Then that method will be invoked on your object and again, leaves the prototype chain unmodified.

Query the prototype

The simplest built in function to check for the prototype is the

Object.getPrototypeOf()

method.

This is how it works.

Object.getPrototypeOf([]);  // Array.prototype
Object.getPrototypeOf('');  // String.prototype

Another useful method is the isPrototypeOf method. Docs.

It returns a boolean value for you as the name suggests.

let a = {z: 1};
let b = Object.create(a);
a.isPrototypeOf(b);  // return true

Set the prototype

It is important to note, that every prototype is set when creating a new object with any of the available syntaxes and totally unrecommended to change the prototype of an object.
Although it can be carried out in the following way.

let a = [1, 2];
Object.setPrototypeOf(a, String.prototype);
a.join(); // Throws a TypeError, join not defined

That why it is not a recommendation to set prototype manually.

Footnote proto

__proto__ is an early browser exposed implementation of the prototype attribute. Because a huge amount of code still depends on it, it is mandated for that reason, but deprecated since a long time. You should really avoid this.

I hope you enjoyed my article, leave your comments below!
The next post will be about Classes & Prototypes.

Resources:
David Flanagan: JavaScript, The Definitive Guide

Scopes in JavaScript

vazsonyidl — Mon, 04 Jan 2021 19:21:22 +0000

Introduction

Scope: maybe you read a hundred of times the word when reading an article about JS or a post on Stackoverflow.

But what does scope actually means in JavaScript and how scopes are managed?

Let's dive into this in the following sections. :)

What is scope?

Our program has states. Without this, to be honest, our code would just perform operations, do some API calls or calculate things, etc. But it you want to store these results somewhere, you need variables.

These variables later can be retrieved, updated and it enables more powerful ways to build applications. But how can you access and for what variables you have access to when a piece of code is running?

These questions need to be answered with a well defined set of rules that manages the access to variables.

The scope is a set of rules that manage the accessibility of variables.

Type of scopes

There are two main type of scopes that can be divided into smaller pieces.

Global scope
Local scope

Global scope

Global scope is the most outer scope of the existing scopes. Variables created in the global scope can be accessed within any scope.

Any variables declared on the global scope is called a global variable. Although, it is not a good idea to pollute the global scope with variables.

Because any block of code has access to the global variable set, collisions can happen easily which may overwrite or update the values stored in that global variable accidentally.

To avoid this problem, let me introduce the local scope which is helpful in these cases.

Local scope

Variables and constants declared within any kind of block is somewhat local scoped and does not pollute the global environment.
These can be created with {} braces but do not let the chance of understanding slip away and be more precise than this.
In the following sections we will walk through the types of local scopes.

Function scope - var & let & const

Create scope for var, let and const

If you think about how can you create a scope for your variables, maybe it comes to your mind that a function can come in handy.
Functions in JavaScript create a new scope called function scope.
The another useful tool of function scopes is closures but it is a good theme for another post. :)

An example for the better understanding.

function _fscope() {
  let a = 1;
  console.log(a); // outputs: 1
}
console.log(a); // ReferenceError: a is not defined

globalThis.a // evaluates to undefined

As you can see, a simple function declaration creates a scope for the variables declared within it. You can not access to that variable outside of that scope.
An IIFE creates a scope as well as basic function declarations.

Block scope - let & const

Create scope for let and const

A block scope now is really can be described as a scope within {} curly braces or another way: a JavaScript block of code defines a scope for variables.

The following example can give a quick view of its behavior.

{
  let q = 123;
  console.log(q); // 123
}
console.log(q); // ReferenceError: q is not defined

globalThis.q // evaluates to undefined

This is really the simplest example. The following blocks create block scope for variables.

Loops
Conditional statements 'body'
A simple {} block

Nesting scopes

Scopes can be nested, which means: any of the 'inner' scope has access to the containing scopes up to the global object. Or if you start from the other end of the statement, none of the 'outer' scopes has access to the 'inner' scopes. It shouts for an example!

const global = '2021';
(function() {
    let outer = 123;
  if (outer) {
    const inner = 'inner';
    console.log(global, inner, outer); // '2021' 'inner' 123
  };
    console.log(global, inner, outer); // ReferenceError: inner is not defined
})();

As you can see in the above example, a nested scope has access to all of the outer scopes, but a scope does not have access to its inner ones.

Module scope

ES2015, or maybe you known it as ES6 introduces modules. Modules are just a simple .js or .mjs file. It does not matter is a module is CommonJS module or an ES6 module, it creates a scope for:

Functions
Classes
Variables

So unless you not export one of the above mentioned member of the module, it is not available in another module, even if you import that module. It is a good separation mechanism.

The +1: var

As you see above, only the function scope can encapsulate a variable created with var (and this is +1 reason why using var is not recommended nowadays).

Sometimes I find debates whether var creates variables on the global scope. Let revisit this part os JavaScript.

Creating variables with var not creates variable on the global scope.

Variables created with var is function scoped, so the following will output undefined:

(function (){
    var q = 3;
})();
console.log(globalThis.q);
*undefined*

But the following will output a not so nice thing

if(true) {
  let a = 3;
  var b = 2;
}
console.log(globalThis.a); // undefined
console.log(globalThis.b); // 2 - oops :(

My recommendation: try to use let everywhere except there is a very-very strong reason for using var.

The related article can be found on the official Docs

Conclusion

Understanding scopes is an important part in the long learning path of JavaScript, but definitely can helps reduce debug time and gives a better understand of how the JS codes working.

I hope you enjoyed my article, please add your comments below! :)

@Cover image: Unsplash

NodeJS modularizaton & strict mode

vazsonyidl — Fri, 25 Dec 2020 17:50:20 +0000

Maybe you know a lot about the strict mode in Javascript/ ECMAscript. It is quite a useful stuff and it is strongly recommended to use always to throw error during the development and avoid confusing bugs.

You can read more about strict mode here on the official Docs.

Strict mode in NodeJs

Maybe when you start developing a NodeJS project or a simple application, it comes to your mind: do I have to put the "use strict"; boilerplate onto the first line of every .js file in my project?

Depends on your configuration, you have to and also you do not have to.

Keep reading, I will explain this in details.

Default mode in Node JS

The default NodeJS set up, when you initialize your project first for example with the npm init command does not use strict mode.

NodeJS uses CommonJS modularization by default.

So if you hang up with this configuration, you end up not using strict mode in any of your files.

Non strict mode example

For clarity, let me show you some code snippets.

I have an app.js file containing the following setup (I import the modules this way to emphasize the different modes)

const nonStrictMode = require('./modules/non-strict');
nonStrictMode.preventExtension();

And the following non-strict.js

module.exports = {
    preventExtension: () => {
        console.log('Non strict mode.');
        const fixed = {};
        Object.preventExtensions(fixed);
        fixed.newProperty = 'newProp';
        console.log(fixed.newProperty);
        console.log('Non strict mode finished.');
    }
};

That is a full valid JavaScript syntax in non strict mode. Although it will not work as the way you expect, you will not get a compile time error, and you will be confused maybe.

The console output will be the following:

Non strict mode.
*undefined*
Non strict mode finished.

Hmm, maybe that is not what you want to achieve. So it would be better if an error will be thrown to inform you about this 'problem'.

Strict mode for the rescue.

Strict mode example

So I have the following configuration in my app.js file:

const strictMode = require('./modules/strict');
strictMode.preventExtension();

And the following code in my strict.js:

'use strict';

module.exports = {
    preventExtension: () => {
        console.log('Strict mode on.');
        const fixed = {};
        Object.preventExtensions(fixed);
        fixed.newProperty = 'newProp';
        console.log('Strict mode finished.');
    }
};

The output will be a nice:

Strict mode on.
TypeError: Cannot add property newProperty, object is not extensible.

Wait, wait, is it not possible to add properties to a freezed object?

No it is not, and it is far more better to get a compile time error than avoiding this error at all.

As you can see, I used the 'use strict'; at the top of this .js file. So maybe you had better to use this configuration as well.

Modules on ECMAScript

The modularization was announced in the 6th edition of ECMAScript (released on 2015), known as ES6.

It is such a big help for complex applications.

ECMAScript modules uses strict mode by default.

It comes in handy if you want to omit all the boilerplate from the first line of files and enforce some coding restrictions with the strict mode.

Enforcing modularization for NodeJS

If you are initialize a project with the npm init, a package.json file will be added to your root directory.

In this package.json will have to look like something like this:

{
  "name": "js",
  "version": "1.0.0",
  "description": "Strict mode compare",
  "main": "app.js",
  "type": "module",
  "author": "You",
  "license": "MIT"
}

Note the 'type': 'module' property.

With this property, you can enforce your NodeJS app to use the modularization described in the ECMAScript 6 rules.

Modularized example

My app.js and the modularized.js look like the following:

import {modularizedPreventExtension} from 'modularized.js';
modularizedPreventExtension();

function modularizedPreventExtension() {
    console.log('Modularized mode on.');
    const fixed = {};
    Object.preventExtensions(fixed);
    fixed.newProperty = 'newProp';
    console.log('Modularized mode finished.');
}

export {modularizedPreventExtension};

End as you expect, the output will be:

Modularized mode on.
TypeError: Cannot add property newProperty, object is not extensible

Additional information

So you are wondering maybe how the app knows whether to use or not to use this type of modularization. It is totally based on your closest package.json.

I truly recommend not to mix this types, just simply use the modularization provided y ES6.

Hope you enjoyed my article, please add your reviews in the comments below! :)

References:
CommonJS modules
ECMAScript modules

Intro to Array.reduce()

vazsonyidl — Sun, 29 Nov 2020 10:57:09 +0000

Array functions

There are some basic array function which about every developer has some knowledge, or at least some idea what that functions do. These functions are: sort, map, findIndex, includes. But there are some powerful Array functions that good to know about. Maybe someone start using this later in their project or with this article it would be easier to understand he Array.reduce() function.

Problems

What if you have an array of numbers, and want to calculate the sum of every element? Maybe you loop through over the array, create a sum property, set to zero and add the values together, and the end of the function return with the summed value. Something like this:

const numArray = [1, 4, 5 ,6 ,8];
let sum = 0;

for (const num of numArray) {
    sum += num;
}

If you have multiple arrays to add together, you have to do calculate the sums multiple times, or write a function that accept an array parameter and return the expected sum of the array than add that values together.

What if you want to calculate the sum of the factorial of an array? Okay, perhaps you never want to do this, but imagine ...

Reduce function

In above mentioned use cases the reduce function can come in handy. According to the MDN Docs
The reduce() method executes a **reducer* function (that you provide) on each element of the array, resulting in single output value.*

The functions accepts a callback function with 2 required and 2 optional parameter. The first 2 parameters are:

accumulator & current value

If the naming make someone confused, the simplest way to think about the accumulator: a temporary storage for the computed values in the previous loops.
The current value has a more clear name: it holds the value of the current iteration (something like array[index]).

The last 2 parameter is optional, but just for mention: the third one is the currently processed index (starts from zero when initial value given, start from 1 when initial value is leaved empty) of the array, and the fourth one is the array on currently calling the reduce function.

Initial value

You can provide initial value for the reduce function. If no initial value is provided, the first element of the array will be the initial value (and the index property - third argument of the function - will start from 1!)
But enough talking, lets see some examples that can solve the missing pieces now.

Examples

Lets revisit the sum of an array with the reduce function:

const reduceSum = numArray.reduce((alreadySummed, current) => alreadySummed + current, 0);

If we try to examine the values in each iteration for the above mentioned array, the following stands:

iteration number	temp container	current value	return value
1st	0	1	1
2nd	1	4	5
3rd	5	5	10
4th	10	6	16
5th	16	8	24

If no initial value provided, the reduce function simply skip (but set every property according to) the first row mentioned in this table, and everything goes on from the second row.

Future discussion

Of course there are several more sophisticated, complicated usage of the reduce function. You can count values in array of objects based on a key, transform values according to an ENUM. You can return an array or an object from the function not only a number or a string. This is just an introduction to the function.
Hope you find it interesting, this is my first post here. Please add your remarks in the discussion!

DEV Community: vazsonyidl

Goodbye padding?

It is a pain..

The box model

Give me some space

The problem arises when..

Example

Writing mode

There is even more

Conclusion

How to boost your productivity

The eggs hatched

The scene - for the first occasion

The difficulties

The possibilities

The path

The surprise

Footnote

Selection sort

Intro

Selection sort

Visual demo

Performance and complexity

Example

When to use?

Implementation

Demo

Bubble-sort

Intro

Bubble sort

Complexity

Usage

Implementation

Reference

Angular DI in action - series

Introduction

What is DI anyway?

Starting point

Provide possibilities of a service

Dependency lookup mechanism

ModuleInjector

ElementInjector

NullInjector

Why is it important?

Stay tuned

RxJS 7 is released 🎉

Intro

What's new

Smaller bundle size

Latest TypeScript & better type interference

toPromise deprecation

Operators renamed

Retry operator with resetOnSuccess

Removing multiple callback options

Faster

Footnote

Mock recursive calls with Jest

Introduction

What this post is not about

Setting up the scene

Code example for this

The problem

The solution

Addition

Prototypes & inheritance in JavaScript

Intro

Prototype, the stalker

Prototype chain

Example

Exceptions

Query the prototype

Set the prototype

Footnote __proto__

Scopes in JavaScript

Introduction

What is scope?

Type of scopes

Global scope

Local scope

Function scope - var & let & const

Footnote proto