Find lost Android Mobile’s location

 Find lost Android Mobile’s location

You have Android mobile and suddenly you lost it then how to find it’s location and Play sound in it so you can find it. here is the some steps:

1- Log on using laptop or any other device at https://www.google.com/android/find

2- After login you will see all the lists of Mobile Devices.

3- Now you can choose any one mobile device which is lost

4- Now you will see 3 options:

A- Play sound
B- Secure device
C- Factory reset device

5- Click on anyone which is suited for you.

Fore more, continue here...

Simple Class in JavaScript

Simple Class in JavaScript

Here is the below code that demonstrate that how to create class and how to use it.

<script>
class WORKER {
    #step1(){console.log("RUN step1");}
    #step2(){console.log("RUN step2");}
    #step3(){console.log("RUN step3");}
    #step4(){console.log("RUN step4");}
    #step5(){console.log("RUN step5");}
    init() {
        this.#renderHTMLFromURL();
    }
    #renderHTMLFromURL = () => {
        this.#step1();
    this.#step2();
    this.#step3();
    this.#step4();
    this.#step5();
    }
}
new WORKER().init();
</script>

Fore more, continue here...

Run multiple tasks one by one in javascript

 Run multiple tasks one by one in javascript

 

 Here is the code in JavaScript code that demonstrate how to run multiple tasks one by one.

<script>
const one=()=>{console.log(“I am function One”);}
const two=()=>{console.log(“I am function Two”);}
const three=()=>{console.log(“I am function Three”);}
const four=()=>{console.log(“I am function Four”);}
const yieldToMainThreadWork =()=> {
return new Promise(resolve => {
setTimeout(resolve, 2500);
});
}
//async function runAll () {
const runAll = async ()=>{
const tasks=[one,two,three,four];
while (tasks.length > 0) {
const task = tasks.shift();
task();
await yieldToMainThreadWork();

}
}
runAll();
</script>

 

Fore more, continue here...

Add Dependent Scripts

 

 here is the code that allow to add dependent script :

 

 

    <script>
        const addDependentScripts = async function( scriptsToAdd ) {
        const s=document.createElement('script')
        for ( var i = 0; i < scriptsToAdd.length; i++ ) {
            let r = await fetch( scriptsToAdd[i] )
            s.text += await r.text()
        }
        document.querySelector('body').appendChild(s)
        }
         </script> 

Uses as below :

       <script>

    try {
        addDependentScripts( [
            "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
            "https://cdn.mywebshopapp.com/test/a1.js",
            "https://cdn.mywebshopapp.com/test/a2.js",
            "https://cdn.mywebshopapp.com/test/a3.js",
            "https://cdn.mywebshopapp.com/test/a4.js"
        ] );
        }
        catch (err) { }

       </script>

Fore more, continue here...

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll

 

 
Here I am demonstrating code to how to pass multiple attributes in querySelectorAll.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple attribute passing in querySelectorAll</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="mydiv1" width="200" height="200";> MyDiv1 </div>
<div id="mydiv2" width="200" height="200";> MyDiv2 </div>
<div id="mydiv3" width="200" height="200";> MyDiv3 </div>
<div id="mydiv4" width="200" height="200";> MyDiv4 </div>

<div id="mydiv6" class="class1" width="200" height="200";>My Divclass1</div>
<div id="mydiv6" class="class2" width="200" height="200";>My Divclass2</div>
<div id="mydiv6" class="class3" width="200" height="200";>My Divclass3</div>

<div id="myid1">myid1</div>
<div id="myid2">myid2</div>
<div id="myid3">myid3</div>

<div id="myid4" class="myclass1 myclass2 myclass3">
myid4 myclass1 myclass2 myclass3
</div>

<script>
const Test1=()=>{
 document.querySelectorAll("div[id=mydiv1],div[id=mydiv2],div[id=mydiv4]").forEach((elem)=>{
   console.log(elem.innerHTML);
 });
}
Test1();

function Test2(){
 document.querySelectorAll("div[class=class1],div[class=class3]").forEach(function(elem){
   console.log(elem.innerHTML);
 });
}
Test2();


const Test3=()=>{
 document.querySelectorAll("#myid1,#myid2,#myid3").forEach((elem)=>{
   console.log(elem.innerHTML);
 });
}
Test3();

const Test4=()=>{
 document.querySelectorAll(".myclass1.myclass2.myclass3[id=myid4]").forEach((elem)=>{
   console.log(elem.innerHTML);
 });
}
Test4();
</script>

</body>
</html>

 

 

Fore more, continue here...

How to make load image fast

How to make load image fast

Images are main parts of any website, Because It says lots of things than text. So it is important to load it fast as much as fast.

To load image fast use below attributes

<link rel="preload" as="image" href="https://site.com/imgs/image.jpg">


<img fetchpriority="high" decoding="async"
src="https://site.com/imgs/image.jpg"
class="myclass" alt="myimage"
width="765"
height="599">

Fore more, continue here...

Enable or Disable files folder structure in website domain

 Enable or Disable files folder structure in website domain

Sometime when you type the url or website domain then files and folder structure show. This is normally for the test servers with no security.
Sometime it is useful for testing of different pages and folder etc, because all files and folder show and user can test any files etc. But if you want to apply the security that no any files and folders show then use below code in .htaccess file. if you have no .htaccess files create it. Code is for show files and directory is :
Options +Indexes
This is for show files and folders.
For do not show files and folders use below code:
Options -Indexes

Fore more, continue here...

Apply CSS via JavaScript

 

Here is the example where apply css via JavaScript

<script>

const mstyle = document.head.appendChild(document.createElement(‘style’));
style.textContent = /*this is the css*/`

.myclass {
aspect-ratio: 16 / 9; background-color: #000;
position: relative; display: block; contain: content;
background-position: center center;
background-size: cover;

}

#mydivid {
color:green; opacity: 0;
}
`;

</script>

Fore more, continue here...

Define own custom HTML element

 Define own custom HTML element

Here I am demonstrating how to define your own custom HTML element or control and how to use it.

Define is as <my-test-element-one> </my-test-element-one>
and then use my JavaScript. The complete code it below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
<my-test-element-one>
</my-test-element-one>
<script>
class my_test_element_one extends HTMLElement{
  connectedCallback(){
    this.innerHTML=`  <div class="myclass" style=" width:600px;height:500px; background-color:green">
            <img src="https://images.pexels.com/photos/267415/pexels-photo-267415.jpeg?auto=compress&cs=tinysrgb&w=300" />
    </div>`
  }
}
customElements.define('my-test-element-one', my_test_element_one);
</script>
</body>
</html>

 

 

Fore more, continue here...

Show array data without for loop in javascript

 Show array data without for loop in javascript

 

Use below code  

<script>

const strs1 = ["one ", "two", "three"];
const newst1 = strs.map(st => { console.log(st)});

const mynum = [1, 2, 3];
const newnum = mynum.map(num =>  { console.log(num)});
</script>

Fore more, continue here...