Forem: Akash Varma

Make javascript to communicate between different tabs

Akash Varma — Fri, 08 May 2020 18:55:02 +0000

Hello Everyone, I hope you're doing great.

In this article, I'm going to discuss how to communicate between different tabs using Broadcast Channel API.

Broadcast Channel API allows basic communication between browsing contexts(i.e windows, tabs, frames, or iframes) and workers on same origin.

Websites not come under the same origin

http://www.dev.to
http://dev.to
https://dev.to
http://dev.to Here hosts and ports are different. Http uses port 80 and Https uses port 443

Wesbites come under same origin are:

Let's get our hands dirty🚀.

We will try to update heading in all the tabs when user updates heading in one tab.

Create 2 HTML pages and 2 javascript files. Lets say tab1.html, tab2.html, tab1.js, tab2.js. Import tab1.js in tab1.html and same order for tab2. Create a broadcast channel in both js files and should have the same channel names.

const bc = new BroadcastChannel('update-heading');
bc.onmessage = (eventMessage) => {

}

In both HTML pages add a title and in tab1.html add input element so that we can listen to this event and update the value in localstorage.

HTML in tab1 should be

<h1 id="title"> Hello </h1>
<input type="text" id="input" />

const bc= new BroadcastChannel('update-heading');
const title = document.getElementById('title');
const input = document.getElementById('input');
input.onkeyup = (e) => {
    const val = e.target.value;
    title.textContent = 'Hello ' + val;
    localStorage.setItem('title', val);
    bc.postMessage('update-title');
}

On every keypress, we will call a method 'postMessage' in broadcastChannel.
When broadcast posts something, we will listen onmessage method from broadcast. And also updating the title in localStorage. So that in tab2.js, when broadcast onmessage is triggered, we can fetch value from localStorage and update DOM.

In tab2.js

const bc = new BroadcastChannel('update-heading');
const title = document.getElementById('title');
bc.onmessage = (eventMessage) => {
 const val = localStorage.getItem('title');
 title.textContent = 'Hello ' + val;
}

For code, Please visit here .

Broadcast Channel is used for communication between same origin.

If you want to do cross origin communication, you can use window.postMessage() method, where window is the reference object of other domain's window.

Thank you for your time. Have a great day🙂.

How to implement 'Show Password' feature in Angular and React?

Akash Varma — Tue, 05 May 2020 15:44:14 +0000

Hello Everyone 👋, I hope you're doing great!

In Angular

In React

Explanation

We can toggle show/hide password by toggling input's type attribute.
Add an event listener to toggle button and change input's attribute value accordingly.
To show password, change input type value as password.
To show text, change input type value as text.

Bonus Tip🚀

Generally browsers will automatically save passwords for forms. Whenever you open website, browser will automatically fill the details including password. But sometimes we forget password and depend on browsers autofill.
To view the password which is automatically filled by browser, follow below steps:

Open Browser Development Tools ➡️ Select password's input element ➡️ Change input type password to text

Tada!!!! You can see your password now.

Thank you for your time. Please visit my profile to know more about web technologies

RxJs switchMap Operator

Akash Varma — Thu, 30 Apr 2020 15:45:09 +0000

Hello everyone 👋, I hope you're doing great.

Every RxJs developer should know about this operator.

switchMap

Consider typeahead functionality. Whenever a user enters something we will make calls for each keypress event. Ofcourse, we can use debounce and throttling methods to reduce unnecessary function calls.

Let's say you want to search for Canada. Without rxjs the functionality would be like calling 6 times XHR request. Ideally, we don't want to bother response for the first 5 calls. We want a response only for the 6th call. That achievement would make a great developer. Let's do that.

Add an event listener to the input element and pipe it with switchMap operator.

Note: getCountry method should return Observable

Basically observables should be subscribed. Only then it invokes. SwitchMap will subscribe inner function and here it is subscribing getCountry method.

Tada!!!

If you observe the above image, all the requests got cancelled except last one.

According to official docs, switchMap defines
Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

Thanks for your time✌️

How to create different environments in Angular?

Akash Varma — Tue, 21 Apr 2020 19:00:19 +0000

Hello Everyone 👋,

In a project, there will be a scenario where we have to create different environments. For example for the DEV environment, all the APIs in our app should point to the DEV server endpoint. Similarly for QA, UAT, stage, and prod APIs should change to respective environments.

First, create different environment files. By default, angular provides us two environment files. One is environment.ts file which is for development and the other is environment.prod.ts file for prod. So whenever we want to use environment variables, just import only environment.ts file to your component/module. Angular will automatically replace respective environment files while building.

Next, go to angular.json and search for configurations object. Inside that create a new object with key as [environment] name. Create an array with key as fileReplacements and replace environment.ts with the respective environment file.

Next, go to package.json and under scripts, add commands like "build:uat":ng build --configuration=uat". Here we need to pass configuration key and that key should match with angular.json configuration.

Run command npm run build:uat Angular replaces environment.ts with environment.uat.ts across the application.

Thanks for your time! Have an amazing day✌️

CSS: How to apply media print styles in the browser?

Akash Varma — Tue, 31 Mar 2020 18:17:50 +0000

In this article, we are going to witness applying media print styles in the browser.

Small Introduction about media print

Usually, we have different types of media queries

all
print
screen
speech

All is used for all media type devices
Print is used for print devices
Screen is used for Computer Screens, Tablets, Smart Phones etc
Speech is used for screenreaders

Styles written in @media print will apply only to printers.
We can't see it in browsers. But using developer tools we can render media print styles in the browser.

Here is the solution

Open Chrome Dev Tools -> Click on options (before 'X' icon, top right)
-> More Tools -> Rendering -> Emulate CSS Media Type -> Change Dropdown from 'No emulation' to 'print'

We can also Emulate CSS media feature prefers-color-scheme and prefers-reduced-motion by using the same tool.

Different ways to centre an element in css

Akash Varma — Tue, 31 Mar 2020 10:24:44 +0000

Hello DEVelopers!!

We will see how to center an element in css using different ways.

For all the examples, I will be using below html as common one.

<div class="parent">
   <div class="child"></div>
</div>

Using Position

.parent {
   position: relative;
}
.child { 
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Using margin in position

margin: auto works only for horizontal alignment.
But we can make it to work in both directions using below code.

.parent {
   position: relative;
}
.child { 
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
//by giving top,left,right,bottom values as 0 now child's width and height is exact to parent.
   width: 800px; //assuming random width
   height: 200px; //assuming random height
   margin: auto; //margin auto works for both vertical and horizontal alignments
}

Using Flex

.parent {
   display: flex;
   align-items: center;
   justify-content: center;
}

Using Grid

.parent {
    display: grid;
    justify-content: center;
    align-items: center;
}

Using Table

.parent {
   display: table;
   width: 100px;
   height: 100px;
}
.child {
   display: table-cell;
   vertical-align: middle;
   width: 50px;
   height: 50px;
   text-align: center;
}

Using text-align to center horizontally

.parent {
   display: block;
   text-align: center;
} 
.child {
   display: inline-block; //key point
}

Using line-height to center vertically

It works fine if there is only one line.

.parent {
   height: 200px;
}
.child {
   line-height: 200px; //same value of parent height
}

Using margin as auto to center horizontally

.child {
   width: 50%;
   margin: 0 auto;
}

CSS background-image as box-shadow?

Akash Varma — Fri, 27 Mar 2020 09:55:42 +0000

Hi,

Is it possible to get background image as box-shadow?

Yes, it is!!

One way is to add extra div, make it as position absolute and add background-image URL. To be optimistic I used ::after(psuedo element) and inherited background-image from parent div.

CSS Animation - Aeroplane Toggle Mode

Akash Varma — Tue, 24 Mar 2020 10:00:12 +0000

CSS Emojis 🙂😎😟

Akash Varma — Mon, 23 Mar 2020 10:03:12 +0000

I developed emojis using css in codepen.

For more codepens visit here

Aeroplane Toggle Mode Animation - CSS🚀🚀

Akash Varma — Sun, 15 Mar 2020 13:10:03 +0000

Heyloo,

I have developed a codepen inspired by one dribble shot!