Forem: Siddhant Jaiswal

Easy Modals with Angular

Siddhant Jaiswal — Fri, 03 Jun 2022 12:47:51 +0000

Hello Devs,

We all might have (users of #angular) to create modals at some point or the other. BUT creating a reusable modal is not easy in Angular. Now there are third party libraries which will help you get the work done but that itself has its learning curve and sometimes it's difficult to collaborate with them.

The Angular team offers a solution, via the Angular CDK module.

The Idea!

The idea is to create a simple modal with Overlay Modal using Ng-Template, also making sure it's WCAG 2.0 accessible.

The Overlay Module

Provided by Angular CDK it's one of the simplest ways to create Modals in angular. With easy access to modal data and functions.
The overlay package provides an effortless way to create floating panels on screen. It can be used to create a floating dropdown menu, modals, etc. and since the CDK modules are divided into small components we only need to import the packages we need.

Lets Begin.

First, we need to install Angular CDK module to our existing project and to do that just run the following command in the root of your project.

npm install @angular/cdk
or
ng add @angular/cdk

Next up we need to import just one module in the app.module.ts file and add that in the imports array as well.

import { OverlayModule } from '@angular/cdk/overlay';
....

imports: [
...
OverlayModule
]

Basics of OverlayModule

Now to create an overlay we need to call create() method. This method returns an OverlayRef which is a PortalOutlet.
Now this Portal package gives us a flexible way of rendering dynamic content. (More on this later).
This create() method takes a config object which helps us define certain parameters of the content will look on the screen. The most used parameters are

backdropClass: string [] //Adds the custom class for backdrop of modal.
hasBackdrop: boolean //Whether overlay will have backdrop or not. 
height: number | string //defines the height of overlay. 
width: number | string //defines the width of overlay.
pannelClass: string [] //Custom class for overlay. 
positionStrategy: PositionStrategy //How will the overlay be placed on screen. 
scrollStrategy: ScrollStrategy //how scrolling will happen on the overlay.

These are some of the parameters that we pass in create() method.

const overlayRef = overlay.create({
  height: '20vh',
  width: '80vw',
  .... // an example of creating an overlay
});

This overlayRef has attach() method that takes in the PortalOutlet instance as parameter to display the overlay. This PortalOutlet instance will hold our UI elements.

Portals

A portal is a UI that can be rendered dynamically. Now this portal can be a Component or TemplateRef or a DOM element.
This provides a dynamic way of rendering UI elements on the page.
We will be working with TemplatePortal, to create a template protal first we need to create a ng-template block which is basically our modal strucutre.
TemplatePortal allows you to take Angular content within one template and render it somewhere else.

<ng-template #template >
    <div class="modal-card" >
        <header class="modal-card-head">
            <h5 tabindex="0" >{{title}}</h5>
            <a tabindex="0" (click)="closeModal()" (keydown)="handleKey($event)"  role="button" aria-label="Close Modal">
                <span>X</span>
            </a>
        </header>
        <section class="modal-card-body">
           <p class="regular" tabindex="0">{{body}}</p>
        </section>
    </div>
</ng-template>

It's a considerably basic modal structure, modal-card is the wrapper inside which we have two sections one is for the title and other is for the body/content.

Now that our structure is ready, we need to access this template inside our component.ts file, and to do that we need import TemplateRef ViewChild and ViewContainerRef.

@ViewChild('template') tpl! : TemplateRef<unknown>;

constructor(..., private viewContainerRef: ViewContainerRef);

Now once all our imports are taken care we need to attach the template to our OverlayRef.

openWithTemplate() {
    const config = new OverlayConfig({
      hasBackdrop: true,
      panelClass: ['modal', 'active'],
      backdropClass: 'modal-backdrop',
      scrollStrategy: this.overlay.scrollStrategies.block(),
    });
    this.overlayRef = this.overlay.create(config);
    this.overlayRef.attach(new TemplatePortal(this.tpl, this.viewContainerRef)); 
  }

So, this is our final openWithTemplate() function which can be used to open the Modal just map with any button's click funtion and the modal will open.
As for the closing the modal its quite simple as well. Look at the html structure of modal and you can see we have mapped a close() function to anchor tag. The function is code is:

closeModal(){
    this.overlayRef.dispose();
  }

and this is reason we opted to create overlayRef as global variable.

Accessibility

In today's world accessibility is especially important as we must make sure to be as inclusive as possible and give extra thought while building web applications. There is a substantial number of users across the globe who depend on screen readers and other assistive technology. The World Wide Web Consortium has laid out a set of guidelines that must be followed when building any web application known as Web Content Accessibility Guidelines or WCAG in short. The Angular team is working hard on this and thus make sures that we the developers have all the right tools to make our applications WCAG complaint. Angular CDK provides A11yModule to help us in achieving WCAG standards.

As per the WCAG standard the focus should be inside the Modal window once it is open and should remain inside until the modal is closed. We also must make sure that all the elements inside the modal are accessible to the end user, meaning when user focuses on any element inside the modal that screen reader should announce it. Some of the basic accessibility properties were already set in the initial HTML code of the modal that was presented before like the anchor tag has role=button this property does nothing visually but is important for assistive techs in understanding that this anchor is not a link but is acting as button. Similarly, we have aria-label to indicate the button title which is Close thus the screen reader will announce it as Close Button.
Apart from this we have also set some tabindex on multiple elements to make sure they get focus as the user uses TAB Key to navigate, but once the user reaches the last tabindex in the modal and hits tab again he will move out of the modal even though the modal is still open and we want our users to stay inside it. And this were A11yModeule will help us.

First thing is that we must make sure the focus is transferred to modal as soon as it opens for this, we will be using cdkFocusInitial directive what this thus is sets an initial focus point for the modal. Next, We have to trap the focus inside the modal and for this we have cdkTrapFocus & cdkTrapFocusAutoCapture

cdkTrapFocusAutoCapture: Whether the directive should automatically move focus into the trapped region upon initialization and return focus to the previous activeElement upon destruction.

cdkTrapFocus: Whether the focus trap is active.

Applying these accessibility helper directives to our code and it looks something like this.

<ng-template #template >
    <div class="modal-card" cdkTrapFocus cdkTrapFocusAutoCapture>
        <header class="modal-card-head">
            <h5 tabindex="0" cdkFocusInitial>{{title}}</h5>
            <a tabindex="0" (click)="closeModal()" (keydown)="handleKey($event)"  role="button" aria-label="Close Modal">
                <span>X</span>
            </a>
        </header>
        <section class="modal-card-body">
            <p class="regular" tabindex="0">{{body}}</p>
        </section>
    </div>
</ng-template>

We are giving cdkTrapFocus & cdkTrapFocusAutoCapture to modal container element thus making sure the focus is rotated inside this container until and unless the modal is closed. And ckdFocusInitial is added to h5 element as it is the title of the modal. Just by adding these three directives and certain aria properties we have converted our modal to WCAG 2.0 complaint.

Here is a sample modal I have been working on:

Conclusion

To make this modal reusable we can convert the ng-template code into its own separate component and now we have modal that works throughout the application without writing any custom service for the same. This is a very simple way of creating modals with accessibility.

I would love to hear your thoughts on this and how can we improve this code. Lets collaborate in a fun way.

Check out my portfolio Find Sid.

Lets connect on LinkedIn
Checkout my artwork on Instagram, a follow will be nice.

Animating SVGs

Siddhant Jaiswal — Sun, 05 Sep 2021 04:11:13 +0000

In this series we discuss about animations on the web using css or SVG animation. Everyone of us has at some point stuck to create a stunning loading animation for our web project and right now web has advanced so much that it has made it very easy to create SVGs and then animate them. All of we have to do is keep on learning new features of the web.

Intro

Previously I showed you'll how LaLiga Developers used the old Disney way to make a bunch of image move so fast that it feels like its moving which is really very smart.
In this post I'll show how to achieve a similar effect using just the SVG (no css).

So to start of I need to recreate the LaLiga loading spinner into svg and to do this I used Figma. Figma is a great tool to create web designs and illustrations adn most importantly it is free to use. So I traced the LaLiga loader in figma and you check that file here

Lets Code

I know its not perfect but it will do the work.
The loader is made up of 7 individual items and hence in Figma file I have named them in order from 1-7 this indeed will create 7 paths with ids from 1-7. While exporting this helps us to target each section individually and eventually you have more control over each item and thus after exporting it from Figma as SVG the code looks something like this:

<svg width="150" height="150" viewBox="0 0 151 152" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="7" d="M44.93 31.95C44.93 31.95 68.07 16.2 87.57 22.63L88.64 0.700003C88.64 0.700003 58.86 -3.08999 35.64 22.41L44.93 31.95Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">

    </path>
    <path id="6" d="M92.02 23.11C92.02 23.11 120.62 33.24 126.57 50.91L143.29 38.86C143.29 38.86 122.55 10.09 93.62 10.7L92.02 23.11Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">

    </path>
    <path id="5" d="M128.82 55.57L138.46 49.15C138.46 49.15 157 69.56 147.46 105.45L128.82 100.58C128.82 100.58 139.41 72.45 128.82 55.57Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">

    </path>
    <path id="4" d="M126.89 104.49L137.07 107.7C137.07 107.7 129.89 142.27 99.46 150.7L91.46 132.34C91.46 132.34 113.29 129.88 126.89 104.49Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">

    </path>
    <path id="3" d="M43 122.7C43 122.7 68.31 139.63 86.07 133.84L90.36 144.13C90.36 144.13 75.36 157.2 34.21 140.7L43 122.7Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">

    </path>
    <path id="2" d="M39.93 120.22C39.93 120.22 18.5 98.7 20.78 80.21L0.5 83.86C0.5 83.86 6.76 118.76 33.13 130.69L39.93 120.22Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">

    </path>
    <path id="1" d="M40.86 34.41C40.86 34.41 19.86 53.02 21.57 74.27L8.93 75.7C8.93 75.7 4.86 35.91 24.93 20.7L40.86 34.41Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">

    </path>

  </svg>

Now we have the loader as we want it and everything is IDed properly. Now to animate each and every item we will using a special tag created for SVGs the animate tag.
This tag consists of the following properties:

attributeName : Here you specify the attribute you want to animate for our case we will animating fill-opacity.
dur : This specifies how long the animation will run.
begin: This specifies at which second your animation will start.
values: This is very import this helps us in overriding the value of property we are targeting via attributeName in our case we will define how the fill-opacity will change over the course of 1s for each item.
calcMode: This defines the function how our animation will be processed it can have values such as discrete | linear | paced | spline you read more about in Mozilla Docs
repeatCount: This defines how long animation will be repeated, since its a loader we want to run it indefinitely.

Hence our animate tag will look something like this:

<animate attributeName="fill-opacity" begin="0s" dur="1s"
values="1;.3;.3;.3;.3;.3;.3" calcMode="linear" 
repeatCount="indefinite" attributeName="translate" />

Interesting thing to note here is the values property. My current values is "1;.3;.3;.3;.3;.3;.3" what this really means that the fill opacity will start from 1 and within a second it will change to .3 so basically we are changing the fill-opacity of each item 7 times so that we achieve the circular motion affect, so for the next path id=2 the animate tag will :

<animate attributeName="fill-opacity" begin="0s" dur="1s"
values=".3;1;.3;.3;.3;.3;.3" calcMode="linear" 
repeatCount="indefinite" attributeName="translate" />

and we will keep doing like this until the last one has values as ".3;.3;.3;.3;.3;.3;1"

Now the final SVG code will be:

 <svg width="150" height="150" viewBox="0 0 151 152" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="7" d="M44.93 31.95C44.93 31.95 68.07 16.2 87.57 22.63L88.64 0.700003C88.64 0.700003 58.86 -3.08999 35.64 22.41L44.93 31.95Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">
      <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.3;.3;.3;.3;.3;.3" calcMode="linear" repeatCount="indefinite" attributeName="translate" />
    </path>
    <path id="6" d="M92.02 23.11C92.02 23.11 120.62 33.24 126.57 50.91L143.29 38.86C143.29 38.86 122.55 10.09 93.62 10.7L92.02 23.11Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">
      <animate attributeName="fill-opacity" begin="0s" dur="1s" values=".3;1;.3;.3;.3;.3;.3" calcMode="linear" repeatCount="indefinite" />
    </path>
    <path id="5" d="M128.82 55.57L138.46 49.15C138.46 49.15 157 69.56 147.46 105.45L128.82 100.58C128.82 100.58 139.41 72.45 128.82 55.57Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">
      <animate attributeName="fill-opacity" begin="0s" dur="1s" values=".3;.3;1;.3;.3;.3;.3" calcMode="linear" repeatCount="indefinite" />
    </path>
    <path id="4" d="M126.89 104.49L137.07 107.7C137.07 107.7 129.89 142.27 99.46 150.7L91.46 132.34C91.46 132.34 113.29 129.88 126.89 104.49Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">
      <animate attributeName="fill-opacity" begin="0s" dur="1s" values=".3;.3;.3; 1;.3;.3;.3" calcMode="linear" repeatCount="indefinite" />
    </path>
    <path id="3" d="M43 122.7C43 122.7 68.31 139.63 86.07 133.84L90.36 144.13C90.36 144.13 75.36 157.2 34.21 140.7L43 122.7Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">
      <animate attributeName="fill-opacity" begin="0s" dur="1s" values=".3;.3;.3;.3;1;.3;.3" calcMode="linear" repeatCount="indefinite" />
    </path>
    <path id="2" d="M39.93 120.22C39.93 120.22 18.5 98.7 20.78 80.21L0.5 83.86C0.5 83.86 6.76 118.76 33.13 130.69L39.93 120.22Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">
      <animate attributeName="fill-opacity" begin="0s" dur="1s" values=".3;.3;.3;.3;.3;1;.3" calcMode="linear" repeatCount="indefinite" />
    </path>
    <path id="1" d="M40.86 34.41C40.86 34.41 19.86 53.02 21.57 74.27L8.93 75.7C8.93 75.7 4.86 35.91 24.93 20.7L40.86 34.41Z" fill="white" fill-opacity="0.7" stroke="white" stroke-linecap="round" stroke-linejoin="round">
      <animate attributeName="fill-opacity" begin="0s" dur="1s" values=".3;.3;.3;.3;.3;.3;1" calcMode="linear" repeatCount="indefinite" />
    </path>
  </svg>

and we get our round animation.

Now next up we need to do the scale animation for that we will animateTransform this is similar to animate tag but will apply the Transform effect to the svg.

<animateTransform attributeName="transform" type="scale" values="1;.9;1" additive="sum" begin="0s" dur="1.4s" repeatCount="indefinite" />

Here I'm basically changing the transform value from 1 to .9 and to 1 so will expand and collapse on its center.

Result

The final result is:

Conclusion

This is far from perfect but you get the idea I need to refine the SVG a little and it will good to go. In the same way we can create the inner part of the SVG and give the values in reverse order to make to rotate in opposite direction.

CSS Animations

Siddhant Jaiswal — Fri, 27 Aug 2021 12:24:10 +0000

Hi,

Recently I came across a cool looking animation on the office LaLiga Websitefor those of you who don't know what is LaLiga, then allow me to expand your knowledge 😋. Its a Football league (for our American friends its Soccer) in Spain and some of the greatest teams and players have played their. Enough about football this is not a forum to post about sports so I'll come back to its Loading Animation and in the first look I thought that is cool looking SVG animation. You can see the sample below:

If you look closely you'll see 3 different animation running on it. First one is pretty straightforward the fill rotates throughout the LaLiga Logo the second one is little subtle you can see each of individual section of the LaLiga logo is expanding and contracting and then third one is simple the inner circle part rotates in the opposite direction of the outer one, and seeing this I started to wonder how are they doing this so as every developer must I opened the good old dev tools and began inspecting it and boy I was surprised with what I saw.

They were not using svg but a really long image that contains all the states of the loading screen see below:

and there css code to achieve this illusion of single object rotating is quite smart I must say.

  width: 150px;
  height: 150px;
  background-image: url("https://assets.laliga.com/assets
/public/generic/spinnerBeat.png");
  animation: 1s steps(12) 0s infinite normal none running laliga;

@keyframes laliga {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -1800px;
  }
}

So you see the css is quite simple with one interesting property the animation property. As per the Mozilla Docs The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. (No need to apply these in order).

Most of the properties are self-explanatory like the animation-name duration, delay and direction.

animation-play-state this defines whether the animation should run or pause.
animation-timing-function this defines how the animation will progresses through the duration of each cycle. (More on this later).
animation-iteration-count this defines how many times the animation will run (Mostly its kept to infinite).

The interesting thing that they have done is to make sure only one image is visible from that long list of images by setting the width and height to 150px. next to keep that image changing from one to other is they are using animation-timing-function as steps(12) since there are 12 loading images in that long list if you count so within a second the image is changed 12 times and finally their key frames does the rest of the magic.

They have already divided the animation into 12 parts all they need to do now is to change the position of each part and that is what they are doing in key frames simply changing the position to 0px to -1800px (as they have reversed order in the image list for some reason). they just keep y axis moving for obvious reasons.

To be honest they used the old trick Walt Disney used to create animations moving a bunch really fast in a loop to create the sense of motion for the audience which is great touch in this modern world. 😍😍😍

In the next post I'll try to recreate this animation (at least some part of using SVGs) so keep an eye out 👓👓👓

If you liked this post then please leave a like and share it with your friends.

Vuex Simplified

Siddhant Jaiswal — Mon, 12 Apr 2021 10:28:35 +0000

Hi,

Through this article I hope to improve your knowledge on the current hot JS framework Vue.
In this article we are going to cover two core Vue features Vuex and Vue Router. I am assuming that you already have basic knowledge of Vue if not then please visit the Vue Js Docs and start learning its quite easy to learn compared to other frameworks. In this example we will also be using Firebase Auth. If you wish to use your Auth System, then please feel free to do so.

Why we need State Management?

State Management helps you manage data efficiently. Let's understand with example. You have card which list the details of course that your app offers and since you are the admin you have access to edit the details as well as view button to view full details. For now, we have not implemented state management:
So, the initial cards details are fetched from the API on page load after that you click on view button to see the entire details, for this also we get our details from an API. You will be able to see all this API requests in Network Tab of Chrome/Edge Dev tools.

Now if you hit back button, you will see that initial card details which was already fetched during first app load is again being fetched. Thus, leading to slight wait time for end user and multiple API calls which is not ideal when you have a huge library of date being fetched from back end. For smaller applications you may not see an enormous impact on your app but as your app grows this same data might be shared across various components and loading the same data repeatedly with same API being repeated is not ideal and may lead to bad User Experience.

This is where state management comes into picture.

What is State Management?

State Management offers a centralized store of data pool for all your components in an app, with certain rules that ensure that state of any data is updated in predictable fashion.
State Management is cycle where every action leads to updating of data in store which in turn triggers/updates the View and through the button/input actions on the view the actions are triggered again.

In simple terms there are 3 properties of state management:

Data Store or State.
Actions
Views

What is Vuex?

Vuex is State Management and Pattern Library created by beautiful minds at Vue.
It can be used outside of vuejs apps as well but is mostly used in Vue apps. It's quite like Redux but easy to learn and understand, and it acts as centralized stores for all your components. I'll not be going into deep dive of Vuex core components, but you can always find it in Vuex docs

The core concepts of Vuex are:

State: This is single object that contains all your app level states and acts a sole source of truth. You can split your states in different modules as well to better manage the data.
Getters: As the name suggest this is used to get the state in any component of your app. It simply provides you the state you need. You need define different getters for each state you need.
Actions: This leads to updating the state of your state/object. Whenever you need to modify the state in store you need call an action specific to that data.
Mutations: This is where you update the data once your action was called successfully. To mutate any state, you need call commit function inside action and once the state is mutated successfully it will be reflected across all components.
Module: Modules help you to simply the Store state. If a single module is implemented, then all the states of our app will inside one single big object which might be difficult to manage. Thus, dividing your states in different modules helps you better manage all states.

Create a Vue App

Install Vue

npm install -g @vue/cli

To create a Vue App:

vue create <project-name>

When asked for Preset select manual preset and select Vuex and router using spacebar and hit enter.

For Vue version select 2.x or 3.x and router history will be Yes and then for lint select the first option.
More details you visit Vue CLI

Create Firebase Project

To create a firebase project, you need to head to Firebase Console. Login with google account.

Steps to setup Project:

Click on Add Project.
Give A Name for your project click on continue you can disable analytics for now and hit create project (It will take some time).
One dashboard in the left top corner you'll find Project Overview and beside that a ⚙ icon click on that and select Project Settings.
Under the General tab scroll down to Your app section select the </> web project. Give a nickname for your app and continue.
Once the app is created head over to Firebase SDK Snippet and select the Config Radio button.
Copy the contents we will need it later.
Now on the left navigation click on Authentication and the click on Get Started.
You'll list of Sign In providers head over to Google Sign In and enable it.

And we are done you successfully have setup firebase project.
If you encounter any difficulty, then check out the Firebase Docs.

Let's Start Codding

Now open the Vue app in VS Code or any editor of your choice.
In src folder create a new Folder named as firebase.
Inside that folder create config.js file and paste the config that we copied from Firebase console

export default {
    firebaseConfig : {
        apiKey: <Your-Key>,
        authDomain: "cloudfirestorelearning.firebaseapp.com",
        databaseURL: "https://cloudfirestorelearning.firebaseio.com",
        projectId: "cloudfirestorelearning",
        storageBucket: "cloudfirestorelearning.appspot.com",
        messagingSenderId: "681859861309",
        appId: "1:681859861309: web:1726f8a46bf9b5b48a9354"
    }
}

Next up we need to install Firebase as an dependency in our project using the following command.

npm i firebase --save

Once installed create firebaseInit.js inside the firebase folder and write the following code:

import firebase from 'firebase'; 
import env from './config'

firebase.initializeApp(env.firebaseConfig);

export default firebase.

Now head over to main.js file your directory and add the following code :

import "./firebaseInit/firebase"

Thus far we have successfully installed and configured Firebase for our app.

Create the State Management Library

Inside the src folder you'll see a store folder inside that you find index.js file.
In the same folder create another file as authStore.js
Now this store file will have 4 properties:

State
Mutations
Actions
Getters

so, our initial code will look something like this:

export default {
    state: {},
    mutations: {},
    actions: {},
    getters: {}
};

Now the State will contain all the data that you need. So, for case of authentication, we need just two objects

user: This will hold the user data such as name, email, photoURL, etc.
isAuth: This is boolean value and will be used to check if user is logged in or not.

Mutations will define the functions which updates our state values, you define how you want to update your state. In our case we will have two mutation functions

setUser().
setAuth().

Actions are triggers that will lead to mutation of our states. For authentication we will be defining two functions.

googleSignIn().
signOut().

Getters will help us get the current state throughout the app in any component we need. We will be creating two getters as well

getUser()
isAuthenticated()

So going back to state we will be defining our states :

state: {
        user: null,
        isAuth: false
    },

As you can we have defined initial values for our states.

Mutation's property will have two functions as we will be updating two states separately. Each function will have two arguments one is the state object itself and other will the payload which contains the value that has to updated in states.

setUser(state, payload) {
    state.user = payload;
},
authenticated(state, payload) {
    state.isAuth = payload;
}

Actions define the triggers that lead to mutation of our states so in we will create two functions as follows :

async googleSignIn({ commit }) {
    const response = await firebase.auth().
    signInWithPopup(new firebase.auth.GoogleAuthProvider());
    console.log(response);
    const newUser = {
        uid: response.user.uid,
        displayName: response.user.displayName,
        email: response.user.email,
        photoURL: response.user.photoURL
    };
    commit("setUser", newUser);
    commit("authenticated", firebase.auth().currentUser);
},
async signOut({ commit }) {
    await firebase.auth().signOut();
    commit("setUser", null);
    commit("authenticated", false);
}

Action handlers receive a context object which exposes the same set of methods on the store instance. We often use ES2015 argument destructing to make things more simple as we need to call commit multiple times. Commit lets us trigger mutations and update our states.

Now coming to firebase.auth() this is method provided by firebase for login. In this case we are using signInwithPopup(new firebase.auth.GoogleAuthProvider()) this method opens a popup and the arguments is our sign in provider Google as we have enabled that while setting up firebase project. There are lot more options for sign in which you can find in Firebase Docs.
This SignOut method is quite simple and currentUser returns Boolean value so if logged in then true else false.

As you can see it's a promise, so we are ES2015 async & wait for response. You can put this in try catch block for error handling as well. Once we get response, we are calling the commit method to trigger mutation and updating our states.

Getters are defined to get the current state throughout our app, and we have defined two getters for our two states

getUser(state){
    console.log(state.user);
    return state.user;
},
isAuthenticated(state) {
    return state.isAuth;
}

Now to call actions in any component of our app we need to use dispatch method offered by store in the component. We will be seeing that later.

Thus, we have created a separate module for our AuthStates and code will look something like this.

import firebase from "firebase/app";
import "firebase/auth";

export default {
    state: {
        user: null,
        isAuth: false
    },
    mutations: {
        setUser(state, payload) {
            state.user = payload;
        },
        authenticated(state, payload) {
            state.isAuth = payload;
        }
    },
    actions: {
        async googleSignIn({ commit }) {
            const response = await firebase.auth().
            signInWithPopup(new firebase.auth.GoogleAuthProvider());
            console.log(response);
            const newUser = {
                uid: response.user.uid,
                displayName: response.user.displayName,
                email: response.user.email,
                photoURL: response.user.photoURL
            };
            commit("setUser", newUser);
            commit("authenticated", firebase.auth().currentUser);
        },
        async signOut({ commit }) {
            await firebase.auth().signOut();
            commit("setUser", null);
            commit("authenticated", false);
        }
    },
    getters:{
        getUser(state){
            console.log(state.user);
            return state.user;
        },
        isAuthenticated(state) {
            return state.isAuth;
        }
    }
};

But still our authStore is not registered. To do that we will open the index.js inside store folder and update it as below:

import Vue from "vue";
import Vuex from "vuex";
import authStore from "./authStore";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth: authStore
  }});

And thats it we have successfully created an authStore for login.

Dispatching actions from Login Component.

Firstly, we need to create a Login.vue file inside our components folder.
It's typical vue component file with just template and script. I'm have not defined any styles for this but feel free to add in your project as needed.

<template>
    <div class="container">
        <button v-if="!isLoggedIn" @click.prevent="login()">Google Sign In</button>
    </div>
</template>
<style scoped>

</style>
<script>
export default {
    name: "Login",
    data() {
        return {};
    },
    computed: {
        isLoggedIn() {
            return this.$store.getters.isAuthenticated;
        }
    },
    watch: {
        isLoggedIn(value){
            if(value !== null && value!== undefined){
                this.$router.push("/");
            }
        }
    },
    methods: {
        login() {
            this.$store.dispatch("googleSignIn");
        }
    }

}
</script>

In the methods property of our component we are dispatching Actions.
Vue provides a straightforward way to dispatch methods all we need is to call $store.dispatch(<action-name>) and vola are action is fired.

In the computed property we are calling getters to get the value of our state isAuthenticated. This is help us identify if users is loggedIn or not. Coupled with the watch property, we are checking that as soon as we get isAuthenticated value as true we need to route our user to Home page.

SignOut Action from Home

We will be using Home.vue fie which was created with our app at the beginning.
Coming to script of our Home component we have similar setup to that of Login component.
As usual methods property dispatches the signOut action, computed: property get the loggedIn user details and in watch we are checking isLoggedIn value and soon as its value changes to null we are redirecting our user to login page.

<template>
    <div class="home">
        <img src="../assets/logo.png" alt="vue-logo">
        <div v-if="isLoggedIn">
            <p>{{isLoggedIn}}</p>

            <button v-if="isLoggedIn" @click.prevent="signOut()">Sign Out</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "Home",
    computed: {
        isLoggedIn() {
            return this.$store.getters.getUser;
        }
    },
    watch: {
        isLoggedIn(value) {
            if(!value) {
                this.$router.push("/login");
            }
        }
    },
    methods: {
        signOut() {
            this.$store.dispatch('signOut');
        }
    }
}
</script>

Routing

Routing is pretty simple for now we have three components and we have defined routes for all three components.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from "../components/Login.vue"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }, 
  {

    path: "/login",
    name: "Login",
    component: Login
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

And thus, you have successfully implemented the Vuex logic for your app. At this point everything should work as intended but there is no security. Any user without any authentication will be able to view all of components that we have defined in our routes script. There are not guards to protect unwanted page views and most of the modern-day apps need some form guards to protect views that they want only authenticated users to see. Thus we will be building our own guards.

Guards

We will again be harnessing the power of our authStore to create guards.
We don't let logged in users to visit login page and we don't unauthenticated users to visit our Home and About component, so lets get started .

In Vue we need to call the router.beforeEach() method.
Every guards gets three arguments:

to: Route : the target Route Object being navigated to.
from: Route: the current route being navigated away from.
next : Function: this function must be called to resolve the hook. The action depends on the arguments provided to next:
- next(): move on to the next hook in the pipeline.
- next('/') or next({ path: '/' }): redirect to a different location.

We need to make sure that next function is called at least once in our guards. We will be creating guards in separate files.

First create a file named authGuard.js inside the router folder and the code for it will be:

import store from "../store";

export default (to, from , next) => {
    if(!store.getters.isAuthenticated){
        next({
            path: "/login", 
            query: {
                redirect: to.fullPath
            }
        })
    } else {
        next();
    }
}

We are importing the store module here and using the getters.isAuthenticated to check if user is logged in or not. If the users is not logged In then redirect user to login route and if the user is logged in then continue with the next pipeline route.

Similarly, we will be creating appGuard.js to make sure logged in user can't access the Login component.

import store from "../store";

export default (to, from , next) => {
    if(store.getters.getUser){
        next({
            path: "/", 
            query: {
                redirect: to.fullPath
            }
        })
    } else {
        next();
    }
}

Now we need to include this in our router script. We just need to add the few line of code and our final index.js file for router will look like this:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from "../components/Login.vue"
import Auth from "./authGuard"
import AppG from "./appGuard"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: Auth
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    beforeEnter: Auth
  }, 
  {

    path: "/login",
    name: "Login",
    component: Login,
    beforeEnter: AppG
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

And that it we have implemented Route guards and Store as well.
I hope you enjoyed this article, please do let me know in the comments section your thoughts on this.

You can find the entire repo in Github

siddhant-dev / vuex-auth-state

Explaining Firebase Auth with VUEX state management.

Hi I have learning Web development since 2016 and Infosys Learning Platform Lex has been a huge part of my learning process along with YouTube tutorials, web forums and MDN and trust me the web keeps on evolving all the time and in these last 4 years or so there has been so many new frameworks and we have also seen so many drastic changes in the process how we develop web apps.

Through this article I hope to improve your knowledge on the current hot JS framework Vue In this article we are going to cover 2 core Vue features Vuex and Vue Router. I am assuming that you already have basic knowledge of Vue if not then please visit the Vue Js Docs and start learning its quite easy to learn compared to other frameworks. In this example we will also be using Firebase Auth.…

View on GitHub

Happy Codding 👓

LightSpeed CSS

Siddhant Jaiswal — Wed, 31 Mar 2021 07:57:55 +0000

Hello Coders,

We all have been using Emmet Abbreviations for HTML in VS Code to code faster.

If you are new to this the following example will help you:
If you type ! and the select the autocomplete option then you get the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Similarly, if you div.container then hit enter/return key you get the following code:

<div class="container"></div>

you get the idea for more shortcuts refer to this cheat sheet

Similarly, we can use Emmet for CSS as well and you will end up writing CSS properties lot faster.

Just try typing this in you css/scss/less file inside any class and hit tab/return key.

m0+p2r+w100p

and you will get this

.container{
    margin: 0;
    padding: 2rem;
    width: 100%;
}

this makes writing CSS so simple and faster.

now you can also type the same thing in diverse ways like
m:0+p:2r+w:100p
and you will get the same result.

suppose you need postion then you type
posr and this will give postion: relative;,
for display you can type d:f and it will give display:flex; mr becomes margin-right, there lots and lots of shortcuts. Find out more on cheat sheet.

Lastly, I want to acknowledge this article was inspired by a video of Kevin Powell, he is one of the most CSS gurus on YouTube and you should checkout his channel.

And you can watch his video on emmet for CSS here:

Please do share this with you developer friends and family.

PS: Emmet comes preinstalled in VS Code. If you use other IDE then you might need to install the emmet plugin.

Customise Datalist

Siddhant Jaiswal — Wed, 24 Mar 2021 07:45:36 +0000

Intro

Most web developers often do not know about all the HTML tags/elements there are, and it's not their fault as well there are close to 100 tags and remembering the functionality for all is quite difficult as a result our web apps end mostly made of divs, paragraphs, lists, spans and headers, but I would suggest we start using section tag, article tag, address tags as well in our apps and for forms we should start using fieldset, legend and datalist as well. These will help your applications be more accessible to people with special needs and in today's world we should make our apps accessible to everyone.

What is Datalist?

In simple words datalist when combined with input elements provides a searchable dropdown options to select from. It's more like select and options elements on steroids. 🤣🤣🤣
A basic example of datalist is below:

As you can see, we get an input field where you can type and the options gets filtered based on your inputs and it's a great out of box element, but the only caveat is that the dropdown styles depend on the browser you are using so it will be different on Firefox edge opera chrome etc. which is not good as most designers and developers prefers consistency throughout their apps/websites.
Now the good news is we can customise the datalist using CSS but we will have to disable/ignore the OOB datalist functionality and rewrite the functionality using JavaScript and the result is below:

Now how do you do this? well, it's pretty simple, let me explain:

DIY

First of we create and input tag and add list attribute to it. This list attribute will take in the id of our datalist element

<input autocomplete="off" list="browsers" id="input"
name="browsers" placeholder="Select your fav browser">

Next up we will create our datalist element with ID as browsers and inside the datalist element will have some option elements as well and voila your basic datalist is complete.

<datalist id="browsers">
  <option value="Internet Explorer">Internet Explorer</option>
  <option value="Chrome">Chrome</option>
  <option value="Safari">Safari</option>
  <option value="Microsoft Edge">Microsoft Edge</option>
  <option value="Firefox">Firefox</option>
</datalist>

Now to customise the datalist first thing we need to do is disable the OOB datalist and to do that we simply need to pass empty string to our input list attribute.

<input autocomplete="off" list="" id="input" 
name="browsers" placeholder="Select your fav browser">

Now we will add some basic CSS to our datalist and options elements

datalist {
  position: absolute;
  background-color: white;
  border: 1px solid blue;
  border-radius: 0 0 5px 5px;
  border-top: none;
  font-family: sans-serif;
  width: 350px;
  padding: 5px;

}

option {
  background-color: white;
  padding: 4px;
  color: blue;
  margin-bottom: 1px;
   font-size: 18px;
  cursor: pointer;
}

Please not CSS for input element can be found in codepen above.

Now we want the our datalist to be displayed when the focus on our input element and for this we will some Javascript.

input.onfocus = function () {
  browsers.style.display = 'block';
  input.style.borderRadius = "5px 5px 0 0";  
};
for (let option of browsers.options) {
  option.onclick = function () {
    input.value = option.value;
    browsers.style.display = 'none';
    input.style.borderRadius = "5px";
  }
};

We will also add hover styling so that the option is highlighted when we hover over any option

option:hover, .active{
  background-color: lightblue;
}

We will use active class later.

Now this will make your datalist work and users will be able to select any option via mouse but won't work with keyboard input.

Next up we will try to filter to the options based on input values. To do that we will create an oninput trigger and get the values then will match the values with our options and display only the options that match with input values.

input.oninput = function() {
  var text = input.value.toUpperCase();
  for (let option of browsers.options) {
    if(option.value.toUpperCase().indexOf(text) > -1){
      option.style.display = "block";
  }else{
    option.style.display = "none";
    }
  };
}

Here we simply take the input value convert them to uppercase and then see if that input is present at any index for each option values. if yes then display it else hide it.

Next will add the functionality for tracking the options via keyboard up and down arrow keys and select any option using enter. For this we will need to track the currectFocus for our option element so we will define a variable as currentFocus = -1, then check for keyboard input keycode to be up or down arrow keys and toggle the active class defined earlier.

var currentFocus = -1;
input.onkeydown = function(e) {
  if(e.keyCode == 40){
    currentFocus++
   addActive(browsers.options);
  }
  else if(e.keyCode == 38){
    currentFocus--
   addActive(browsers.options);
  }
  else if(e.keyCode == 13){
    e.preventDefault();
        if (currentFocus > -1) {
          if (browsers.options) 
browsers.options[currentFocus].click();
        }
  }
}

function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) 
       currentFocus = (x.length - 1);
    x[currentFocus].classList.add("active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("active");
    }
  }

and we have recreated the default datalist.

Conclusion

I hope this helps you all who have been trying to use datalist but were unable to use because of lack of support of customization. I hope that in future browsers provide us more freedom to customise the datalist without rewriting the JavaScript to recreate the functionality and with just CSS we can achieve our desired result. 🤞🤞🤞

If you find any bugs or if you can improve the functionality, please feel free to do so and add the link for your codepen in the comments below so that me and others can also try to improve our skills. 😃

Thanks for reading. Please share it with your collegues and developer friends and family.

happyCodding.

Angular Modal Library

Siddhant Jaiswal — Tue, 03 Dec 2019 05:20:36 +0000

Hi I have learning front end development for past 2 years (mostly Angular) and I have built few apps of my own which you can check out here:

• Tic Tac Game
• Weather App

While working on these projects I wanted to add Modal to the weather app but I was not able to find right library. Angular Material is quite big and I was worried that it would increase my bundle size. Other libraries which I looked were not satisfactory. Then I came across one few tutorials on how to create modal feature in Angular.
I was inspired by that and created in my test project and it was working fine, but there were no animations on how the modal would appear it would just come right out when clicked to activate it and I was not happy to I made my own modal with slide down animation.

It’s at this moment I knew I f**ked up 😂😂😂😂 just kidding.

I realized that it would be better if made it reusable so that I can use it in my future projects and by this way I could try to return something back to the community of Open Source which has empowered me. Thus I started working on the Library and within 3 days I published my first ever library to NPM https://www.npmjs.com/package/angular-modal-library .

Enough of Intro (might be pretty long intro 😅) lets come to part how to install and use it.
Well installation is quite simple just use the following commands:

npm i angular-modal-library

**Note: Changed the Selector from ng-modal to sj-modal. As suggested by Andy Wright, that ng tags are reserved for angular itself.

Once installation is complete you need to import ModalModule and ModalService from angular-modal-library
Once that is done at to your imports array as well.
ModalService provides two functions open(id) and close(id).
In the html of the component where you want it to displayed add the following code :

<sj-modal id="my-modal">
  <div>
    HI
  </div>
  <button (click)="closeModal('my-modal')">Close </button>
</sj-modal>

Please note the id (my-modal in this case) needs to add as the parameter where you call the open function on the html for example you want modal to open by click of a button then add the following code :

<button (click)="openModal('my-modal')">Open</button>

Now in the component.ts file you need import ModalService and declare it in constructor.

constructor(private modal: ModalService) {}

To open the modal, use the following code:

openModal(id){
this.modal.open(id)
}
//close function
closeModal(id){
this.modal.close(id)
}

The classes used in Modal library for styling are as follow:
.modal .modal-body .modal-background .modal-open (self-explanatory classes)
It is also responsive for mobile devices with an slide down animation to custom styling you will need to use ElementRef. (Google it and experiment with it)

If you wish to contribute and improve the modal library then here is the GitHub repo

Contributing to angular-modal-library

To contribute to angular-modal-library, follow these steps:
• Fork this repository.
• Create a branch: git checkout -b .
• Make your changes and commit them: git commit -m <commit_message>
• Push to the original branch: git push origin <project_name>/<location>
• Create the pull request.
• Alternatively see the GitHub documentation on creating a pull request.

Thanks a lot and happy Codding 🕹💻