JavaScript in 2021 provide some new features and flexibility to make JS developer life easy. let’s start —

1. Promise.any

Syntax: Promise.any([p1, p2, p3])

Promise.any() is opposite of Promise.all(), it get resolved if any of Single promise get resolved.

Example-

Promise.any get resolved as any of promise get resolved , here promise 2 resolved first.

If you have different API for getting weather information and want to load result very fast, so fetch multiple API asynchronously and use the first response come back. ( If you have better examples please write in comment section :))

2. Make class Method/Accessors as private

Example


We are going to use print.js library: https://printjs.crabbly.com/

1. For Html/Javascript Project

a) in HTML file define these links

<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css"><script src="https://printjs-4de6.kxcdn.com/print.min.js"> </script>

b) Now global method printjs is available

printJS({printable:'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf', type:'pdf', showModal:true})

2. If you are using Angular 2+

Follow given steps to implement pdf preview in Agular 2+

  1. npm install print-js --save
  2. import printJS from 'print-js'; in component.ts code
  3. tsconfig.json: "allowSyntheticDefaultImports": true, option incompilerOptions

Now you can use printJs method inside component.ts code -

ngOnInit() {printJS({printable:'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf', type:'pdf', showModal:true})
}

This will open a print preview in the browser :)

If you like this Article give a clap and write in comment section.


In this article, we are going to talk about design patterns that can be and should be used to write better, maintainable JavaScript code

A design pattern provides a general reusable solution for the common problems occurs in software design.

The underlying concept of design patterns has been around in the software engineering industry since the very beginning, but they weren’t really so formalised. Design Patterns: Elements Of Reusable Object-Oriented Software written by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides — the famous Gang of Four (GoF) — Provide 23 Design patterns in their Original book

Types of…


What is AWS SSM: AWS Systems Manager Parameter Store provides secure, hierarchical storage for configuration data management and secrets management. You can store data such as passwords, database strings and license codes as parameter values. You can store values as plain text or encrypted data

Some use cases —

a. Store Key and Values Pairs
b. Store environment variables that are going to be used in different AWS services like — AWS Lambda, Amazon EC2
c. We can also Update/Access these variables from Lambda functions

We will do these 3 steps to create, read and update Parameters from Lambda function…


Suppose there are 100 of images and you want to render them one by one in HTML.

<html><body><div id="container"></div><script>const images = ['https://fakeimg.pl/300/', 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png', 'https://fakeimg.pl/400/', 'https://fakeimg.pl/100/'];const loadImages = (images) => { images.forEach((image) => { const img = document.createElement('img'); img.src = image; document.getElementById('container').appendChild(img);})};loadImages(images);</script></body></html>

You can add `n` number of images in Array

Output

write in the comment section if you have any question or suggestion.

Please give a clap if this post helps you.


Many javascript developers either newbie or experienced developer confused with this. You will find all about this keyword in easy language

What is this?

In our natural language, we use this to refer to current Environment Objects:

The person sitting inside the house

If a person sitting inside the house says: this address so it means the address in which a person is currently present.

So we are inside the house so you can refer to the house like this.


  1. Use XMLHttpRequest()
  2. set responseType to Blob ,
  3. use FileReader() at XMLHttpRequest onload event to read response as data URI
var xhr = new XMLHttpRequest();       
xhr.open("GET", "/path/to/local/image/file", true);
xhr.responseType = "blob";
xhr.onload = function (e) {
console.log(this.response);
var reader = new FileReader();
reader.onload = function(event) {
var res = event.target.result;
console.log(res)
}
var file = this.response;
reader.readAsDataURL(file)
};
xhr.send()

Thanks! Please give a clap if the post is helpful. Write in the comment section for any help or suggestion.


Many times I notice setting an environment variable in Windows/Linux not work quickly so there is a package manager tool pm2 use for managing env variables and setup server

PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without the downtime and to facilitate common system admin tasks.

Steps:

  1. Create a new project folder: test_node, add app.js file now npm init
  2. Install pm2 in your Linux/ Windows machine by npm:

npm install pm2 -g

3. To create server install express: npm i express

3…


You have given Html element structure -

Html Page

Now you need to insert data to every div using Javascript!

First we need to get length of nested HTML elements


The difference is scoping. var is scoped to the nearest function block and let is scoped to the nearest enclosing block which can be smaller than a function block.
Both are global if outside any block.

Understand — let/var scope

So variable declares within a function can be accessed anywhere in the function.

You cant access variable declared with var outside of function because var is just global to its function level not outside of the function

Shivam Gupta

Full Stack Engineer (Web/App) working on different JS Technologies & frameworks— Angular, Node, Typescript, Ionic, Firebase, AWS, ElK...Love to write cool stuff

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store