This question is asked in many JavaScript, Node, Angular, React.. interviews

Why use Promise.all ?

Promise.all is actually a promise that takes an array of promises as an input (an iterable). Then it gets resolved when all the promises get resolved or any one of them gets rejected.

Promise.all([Promise1, Promise2, Promise3])
.then(result) => {
console.log(result)
})
.catch(error => console.log(`Error in promises ${error}`))

What is Polyfill

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

Suppose Promise.all not available so lets create our Promise.all() function . we will use async and await to achieve this.

Promise.all Polyfill

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.

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…

  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.

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