media query min and max for all devices

December 9, 2020 in Tips and Tricks

media query min and max for all devices

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* Styles */
    section#clients-say::after {
        content: ' only screen and (min-device-width: 320px) and (max-device-width: 480px)';
    }
}


/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 321px) {
    /* Styles */
    .footer-nav ul.list-inline {
        display: inline-flex;
        display: -webkit-inline-box;
    }
    .say-card {
        border-radius: 60px;
    }
    section#clients-say::after {
        content: ' only screen and (min-width: 321px) ';
    }
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) {
    /* Styles */
    section#clients-say::after {
        content: ' only screen and (max-width: 320px)';
    }
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Styles */
    section#clients-say::after {
        content: 'iPads (portrait and landscape)';
    }
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
    section#clients-say::after {
        content: 'iPads (landscape)';
    }
}


/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* Styles */
    section#clients-say::after {
        content: ' iPads (portrait)';
    }
}


/**********
    iPad 3
    **********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'iPad 3';
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and ';
    }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
    /* Styles */
    .footer-nav ul.list-inline {
        display: block;
    }
    section#clients-say::after {
        content: 'Desktops and laptops ';
    }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
    /* Styles */
    section#clients-say::after {
        content: ' Large screens';
    }
}


/* iPhone 4 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'iPhone 4';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)';
    }
}


/* iPhone 5 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'iPhone 5 ';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'screen and (min-device-width: 320px) and (max-device-height: 568px) and';
    }
}


/* iPhone 6, 7, 8 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'Phone 6, 7, 8)';
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)';
    }
}


/* iPhone 6+, 7+, 8+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'iPhone 6+, 7+, 8+';
    }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: ' (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) ';
    }
}


/* iPhone X ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: ' iPhone X -)';
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)';
    }
}


/* iPhone XS Max, XR ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: 'iPhone XS Max, XR ';
    }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)';
    }
}


/* Samsung Galaxy S3 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: ' Samsung Galaxy S3 ';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { ';
    }
}


/* Samsung Galaxy S4 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: 'Samsung Galaxy S4';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: ' 640px) and (orientation: portrait';
    }
}


/* Samsung Galaxy S5 ----------- */

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: 'orientation: landscape';
    }
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: 'orientation: portrait';
    }
}

December 8, 2020 in Tips and Tricks

set meta tags in angular 8

In this step by step Angular 8/9/10 SEO tutorial, we are going to learn how to make Angular app SEO friendly by adding the page titles, meta descriptions, keywords, and other SEO attributes in an Angular Universal Server-side rendering app.

In the previous tutorial, we saw how to create an Angular Universal app from scratch with MongoDB. In this tutorial, we will take the Git clone from this Github repository and configure it to insert the SEO HTML meta tags.

Angular 8/9/10 SEO Meta Service Methods

Angular offers the Title and Meta services, and these tags are similar HTML meta tags that help in achieving the purpose of making the Angular app SEO friendly.

Meta is a service in Angular, and it belongs to a class family. Angular offers various Meta services to add, read, update, and remove HTML meta elements.

Let us check out the various Meta service methods:

• addTag(): Includes one meta tag.
• updateTag(): Updates meta tag in angular component.
• removeTag(): Removes meta tag for the specified selector.
• getTag(): Gets HTMLMetaElement for the specified meta selector.
• addTags(): Includes more than one meta tag in angular component.
• getTags(): Returns array of HTMLMetaElement for the specified meta selector.
• removeTagElement(): Removes meta tag for the specified HTMLMetaElement

In this Angular 8|9 SEO tutorial, we will learn to add, update, HTML meta tag examples for keywords, description, robots, date, author, viewport, charset using Angular Meta service.

Configure Angular Universal Project

We are going to make Angular app SEO compatible, to enable the SEO in Angular, we are going to use Angular universal app. It’s a music app built with MongoDB server-side rendering. Let us take the Git clone from the following Github repo:

git clone https://github.com/SinghDigamber/angular-universal-crud.git

Next, get inside the project folder:

cd angular-universal-crud

Run following command to install the required packages:

npm install

Set up Angular Meta Service

Go to app/app.component.ts file and import Angular Meta service. The Meta service allow us to add keywords, robots, author, viewport, date and charset in Angular

import { Meta } from '@angular/platform-browser';

Now, also add the following code in the same file. Here, we inject the private metaTagService: Meta in the constructor and then used the Meta’s addTags() method to configure the following HTML meta attributes.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private metaTagService: Meta
  ) { }

  ngOnInit() {
    this.metaTagService.addTags([
      { name: 'keywords', content: 'Angular SEO Integration, Music CRUD, Angular Universal' },
      { name: 'robots', content: 'index, follow' },
      { name: 'author', content: 'Digamber Singh' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'date', content: '2019-10-31', scheme: 'YYYY-MM-DD' },
      { charset: 'UTF-8' }
    ]);
  }
}

Adding SEO Title and Meta Description in Angular Component

Now, we will set Title and Meta Description in Angular Universal app. First import Title, Meta from @angular/platform-browser. Go to app/components/add-song/add-song.component.ts file and add the following code in it.

import { Title, Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-add-song',
  templateUrl: './add-song.component.html',
  styleUrls: ['./add-song.component.css']
})

export class AddSongComponent implements OnInit {
  title = 'Add Song - Angular Universal CRUD App';

  constructor(
    private titleService: Title,
    private metaTagService: Meta
  ) { }

  ngOnInit() {
    this.titleService.setTitle(this.title);
    this.metaTagService.updateTag(
      { name: 'description', content: 'Add song template' }
    );
  }
}

Here we defined the SEO title with the appropriate value. Then we declared the SEO title with the help of the setTitle() method inside the ngOnInit lifecycle hook.

We also declared the Meta description in Angular with the help of Meta’s updateTag() method.

Adding Canonical URL in Angular 8|9

SEO is the essential element of any site, and Canonical URLs allow search engines about duplicate content. When the site gets bigger, it becomes tedious to prevent web pages from generating duplicate URLs. This problem might lead to a duplicate content issue. A canonical URL provides a professional solution to get rid from duplicate content issues.

To know more about canonical URL checkout this awesome post: What is a canonical URL?

In Angular, we can set canonical URLs easily and save our site getting penalised.

Run command to create canonical service:

ng g s shared/canonical

Add the following code inside the shared/canonical.service.ts file.

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})

export class CanonicalService {

  constructor(@Inject(DOCUMENT) private dom) { }

  setCanonicalURL(url?: string) {
    const canURL = url == undefined ? this.dom.URL : url;
    const link: HTMLLinkElement = this.dom.createElement('link');
    link.setAttribute('rel', 'canonical');
    this.dom.head.appendChild(link);
    link.setAttribute('href', canURL);
  }

}

Next, go to app.component.ts file and add the following code.

import { Component, OnInit } from '@angular/core';
import { CanonicalService } from './shared/canonical.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private canonicalService: CanonicalService
  ) { }

  ngOnInit() {
    this.canonicalService.setCanonicalURL();
  }

}

November 30, 2020 in Tips and Tricks

how to install loopback adapter windows 10

To install the microsoft loopback adapter on win 10 you must:

1. right click on window start menu icon and select Device manager. Device manager window will immediately open (or you may use any other way how to open device manager window)
2. click on Action, and select Add legacy hardware
3. click Next on welcome screen
4. choose “Install the hardware that i manually select from a list” and click on Next
5. scroll down and select Network adapters from offered common hardware types and click on Next
6. select Microsoft as the manufacturer, and then select Microsoft KM-TEST Loopback adapter card model, click on Next
7. click on Next
8. click on Finish

November 28, 2020 in Tips and Tricks

Cross using CSS

strong::after {
    font-weight: 100;
    content: 'X';
    top: 0;
    position: absolute;
    font-size: 106px;
    left: 145px;
    color: red;
}

November 24, 2020 in Tips and Tricks

Pan Card, MICR, IFSC code Validation Example In JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Example</title>
<script>
function Validation()
{
	//party code
	a=document.getElementsByName("partycode").item(0).value;
var valid=/^[a-zA-Z0-9_]*$/;
if(a.trim().length==0)
{
	alert("party code must be filled out");
	return false;
}
if(!valid.exec(a))
{
alert("only alphanumeric allowed");
return false;
}

//party Name 
	a=document.getElementsByName("partyname").item(0).value;
var valid=/^[a-zA-Z_ ]*$/;
if(a.trim().length==0)
{
	alert("party name must be filled out");
	return false;
}

if(!valid.exec(a))
{
alert("only alpha allowed");
return false;
}


//pan number 
	a=document.getElementsByName("panno").item(0).value;
var valid=/^[a-zA-Z]{5}[0-9]{4}[a-zA-Z]$/;
if(a.trim().length==0)
{
	alert("pan number must be filled out");
	return false;
}

if(!valid.exec(a))
{
alert("ABCDE1234F");
return false;
}


//ifsc code 
	a=document.getElementsByName("ifcscode").item(0).value;
var valid=/^[a-zA-Z]{4}[0-9]{7}$/;
if(a.trim().length==0)
{
	alert("ifsc must be filled out");
	return false;
}

if(!valid.exec(a))
{
alert("NNSB0128051");
return false;
}


}
</script>
<style>
label,input[type="text"]
{
	display:inline-block;
	width:150px;
}

</style>
</head>
<body>
<form name="myForm" method="post" action="" onsubmit="return Validation()">
<div><label>Party code</label>
<input type="text" name="partycode" required="required"></div>
<div><label>Party Name</label>
<input type="text" name="partyname" required="required"></div>
<div><label>PAN No</label>
<input type="text" name="panno" required="required"></div>
<div><label>Bank Account title</label>
<input type="text" name="bankaccounttitle" required="required"></div>
<div><label>Bank Name</label>
<input type="text" name="bankname" required="required"></div>
<div><label>IFCS Code</label>
<input type="text" name="ifcscode" required="required"></div>
<div><label>MICR no</label>
<input type="text" name="micrno" required="required"></div>
<div><button type="submit" name="submit">Kindly Attached a cancel cheque</button></div>
</form>
</body>
</html>

November 24, 2020 in Tips and Tricks

Media Query Example HTML File

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aditya Kumar Singh</title>
<style>
@media (max-width:1900px)
{
	div{
		background-color:#09AD40;
	}
}
@media (max-width:1300px)
{
	div{
		background-color:#787171;
	}
}
@media (max-width:1280px)
{
	div{
		background-color:#D81114;
	}
}
@media (max-width:1024px)
{
	div{
		background-color:#171515;
	}
}
@media (max-width:800px)
{
	div{
		background-color:#18B02E;
	}
}
@media (max-width:768px)
{
	div{
		background-color:#1922C4;
	}
}
@media (max-width:500px)
{
	div{
		background-color:#7A21C5;
	}
}
@media (max-width:300px)
{
	div{
		background-color:#A46804;
	}
}
</style>
</head>
<body>
<div>
<p>
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.


</p>
</div>
</body>
</html>

November 23, 2020 in Tips and Tricks

languages used on internet

All other languages are used in less than 0.1% of websites. Even including all languages, percentages may not sum to 100% because some websites contain multiple content languages.

InternetWorldStats estimates of the number of Internet users by language as of March 31, 2020: