DEV Community: Vincent Kipyegon

USING JAVASCRIPT CLOSURES IN REACT

Vincent Kipyegon — Mon, 15 Jul 2024 12:04:31 +0000

A Closure is a Javascript feature where a function,enclosed inside another function (outer function), is returned and invoked outside of the outer function.

A closure is formed when the inner function maintains access to variable outside its scope aka lexical scope; access to variables and arguments of the outer function even after the outer has executed.

Let's create a tax calculator closure function to calculate taxes for alcoholic and non-alcoholic drinks based on their tax rates.

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

As you can see, each drink will always remember their tax rate based on the whether it is alcoholic drink or non-alcoholic i.e the returned function is invoked outside of taxCalculator and is able to retrieve the value vat parameter even though the main function taxCalculator had been executed.

In react js, JavaScript UI library, event handlers are declared inline on the JSX as such.


<button  onClick={handleClick}>Click me</button>

If the event handler has an argument, it will then be invoked inside a function as such.

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 ">
  { actions.map(action => 
<button 
className="w-full md:w-60" 
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
onClick={()=>handleAction(action)}>{action}</button>)}
  </div>)
}

Note the handleAction is encapsulated by an arrow function when assigning it to the onclick event handler.

With closure we can simply call handleAction with a action argument then return an inner function that grabs the action argument and performs the rest of the actions like so.


function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    <div className="flex flex-col md:flex-row  w-full p-4 gap-4 justify-between">
      {actions.map((action) => (
        <button 
className="w-full md:w-60"
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
 onClick={handleAction(action)}>
          {action}
        </button>
      ))}
    </div>
  );
}

Notice how we invoke the handleAction directly on the OnClick event? also notice we have refactored the handleAction function so that it returns a function performing the necessary actions wity a switch ?

The handleAction is invoked when the component mounts, a closure occurs when the function returned by handleAction grabs and holds onto to the value of the argument on handleAction even though it (handleAction) executed during the first render.
It is a neat way of handling events in Javascript.what do you think?

Boost User Experience with HTML autocomplete Attribute for Form Inputs

Vincent Kipyegon — Mon, 03 Jun 2024 05:15:27 +0000

Applications developed for the web will eventually run on the web and the browser vendor will always enforce its default user agent settings for HTML and CSS before being overridden by developer settings.

Have you ever tried filling out a form on a website only to have the fields instantly filled in for you by the browser? Most browser vendors have capability to save user input such as password,email and address for later use. The browser will automatically fill in saved details in form inputs the next time a user tries to fill out a form.

For example, for email addresses, the browser detects type="email" and prefills it with a saved email address. Fortunately HTML has a less known handy autofill feature to assist users auto-fill HTML forms with saved values.

Autofill is a form feature attribute that lets the browser suggest and automatically form fields with previously saved values as a user fills out a form. It can also disable the auto filling process.

It is the most overlooked yet versatile HTML feature that has been around for several years . When the user puts text into HTML input elements, the browser can easily save form information and attempt to autocomplete or suggest input the next time.

The autocomplete keyword can be used to add to the autofill keyword to HTML elements <form> and HTML input elements (<input/>, <textarea> <select/>).

Autocomplete can take one or more possible values referred to as tokens. There is a wide range of possible values for autocomplete attribute depending data type the user is expected to enter. It is supported by all browser vendors. It initially emanated from the Safari browser.

Importance of autofill

Enhances websites/web app user experience - A user avoids repetitions and simplifies filling of form fields. When a user types input, the form automatically fills in the input fields making data entry easier and faster.
Formatting - Autofill ensures a form field always hints at the intended input type. An email field ,for example, will always hint an email address while a telephone field will always hint digit values.
It complements the type attribute – If the type is not present on the HTML input, the browser will infer input type by using the value of autocomplete attribute. It will format digits where autofill is telephone or one-time-code.

On Visual studio code editor, you can see available autofill values by pressing ctrl/cmd + space bar on the autocomplete value field.

NB: React , JavaScript UI library, uses the camel case as autoComplete (and not autocomplete) attribute when rendering in react elements.

Let's examine some frequently used autofill values.

1. on/off

The autofill feature initially started with two values: on and off. By default, the autocomplete attribute is set to on which means that the browser is free to retain values submitted and to autofill them for the user.
The autofill feature initially started with two values: on and off. By default, the autocomplete attribute is set to on which means that the browser is free to retain values submitted and to autofill them for the user.

    <section>
      <!-- Autocomplete off, will not autofill values to form fields-->
      <form autocomplete="off">
        <div>
          <label for="username">Username</label>
          <input type="" id="username"  />
        </div>
        <!-- new password-->
        <div>
          <label for="password">Password</label>
          <input type="password" id="password"  />
        </div>

        <button>Login</button>
      </form>
    </section>

2. Email

The email value instructs the browser that an input field expects a valid email address. A browser will detect the type="email" and suggest stored email addresses. Additionally, if the required attribute is present on the type="email", the browser will require a valid email.

<div>
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email" />
</div>

3. Password: new-password and current-password

The password value provides a formatted password with asterisks to indicate the password entry field. There are two possible values; new-password when a user wants to enter a new password and current-password for existing password.

The browser will recommend saved passwords when the value is current-password and it will generate a new password when the value is new-password.

    <!-- current password-->
        <div>
          <label for="current-password">Password</label>
          <input type="password" id="current-password" autocomplete="current-password" />
        </div>
<!-- new password-->
        <div>
          <label for="new-password">Password</label>
          <input type="password" id="new-password" autocomplete="new-password" />
        </div>

4. Name

The following possible values are supported by the autofill when entering name variations.
a.) name for full name,
b.) given-name for first name,
c.) username,
d.) additional-name for middle name,
e.) nickname
f. family name for last name.

<div>
<label for="username">Username</label>
<input type="text" id="username" autocomplete="username" />
</div>

5. one-time-code

Majority of web apps use one-time password codes (OTPs) sent by email or SMS to validate user account registration, sign-ins, and online transactions.

Using autocomplete value one-time-code provides a clue to the useragent to accept OTP , which consists of 4 to 6 letters and numbers. Note that one-time codes are helpful for suggesting fields like phone numbers, but they should not be used in situations where there is a constant supply of fresh one-time codes.

<div>
<label for="otp">Verification code</label>
<input type="text" id="otp" autocomplete="one-time-code" />
</div>

6. Date of birth

The date of birth value has multiple possibilities and lets the user agent hint to the date of birth field.
a.) bday for day,month and year of birth
b.) bday-day for day of the month of birth
c.) bday-month for month of birth
d.) bday-year for year of birth

<div>
<label for="dob">Date of birth</label>
<input type="date" id="dob" autocomplete="bday" />
</div>

7. Telephone

The user can enter a phone number in the input field of type "tel". You can indicate to the browser which phone number components the user needs to enter. There are multiple token values associated with the telephone value. Here are a few of these.

a.) tel for telephone

b.) tel-area-code
c.) tel-country-code
d. tel-extension
e.) tel-local

    <div>
          <label for="telephone"> Telephone</label>
          <input type="tel" autocomplete="tel"  id="telephone"/>
        </div>

8. Organization

The organization autofill value has 2 values for representing the organization name and organization title as **organization** and **organization-title**.

    <div>
    <label for="org">Organization name</label>
<input  type="text" id="org" autocomplete="organization"/>
</div>

9. Country

The country autofill value takes two possible values country and country-name.

<div>
<label for="country">Country</label>
<input  type="text" id="country" autocomplete="country-name"/>
</div>

10. Address and postal code

The user agent can determine the address value of an input field by using autofill address value . There are multiple versions available for address levels that begin with address-level-*.

a.) address-level1,address-level2,address-level3 ,address-level4 for representing administrative addresses based on province,county,city, town or village levels.
b.) address-line1,address-line2,address-line3 ,for representing physical street address.

<div>
    <label for="address">Address</label>
<input  type="text" id="address" autocomplete="address-level1"/>
</div>

11. Credit card

Autofill shines in credit card payment transactions because it makes it simple for the browser to submit credit card information. It contains multiple values that correspond to credit card information prefixed “cc-”.
a.) **cc-exp* for card month and year of expiry.
b.) cc-exp-month for card expiry month.
c.) cc-exp-year for card expiry year.
d.) cc-name for the full name as it appears on the credit card
e.) cc-number for the credit card number.
f.) cc-type for type of card; visa or master card.
g.) cc-family-name for first name on the card.
h.) cc-given-name for last name on the card.
I.) cc-additional-name for middle name on the card.
j.) cc-csc for the security code on the credit card.

<div>
    <label for="card-number">Card number</label>
<input  type="text" id="card-number" autocomplete="cc-number"/>
</div>

12. Sex

Sex value is used to suggest gender identity and gender expressions in the select field and the expected value is sex.

    <select autocomplete="sex">
    <option>Male</option>
    <option>Female</option>
</select>

In conclusion, you should consider the wide list of autocomplete fields on MDN to be your daily cheat sheet. You should always consider autofill when developing your form input as it is an essential feature that improves user experience. In my opinion, forms and their input fields can be enhanced by autofill.

Further references

Artificial Intelligence: Building an image-to-text React application with firebase and Google Gemini API.

Vincent Kipyegon — Sat, 03 Feb 2024 09:15:38 +0000

On December 6th 2023, Google unveiled Gemini, one of the most powerful AI models of recent times. It is the largest and most capable model with the ability to read and interpret multiple modals; videos, audio and images.

Currently, there are two ways to use Gemini , 1.) It is integrated to Google Bard, Google's artificial intelligence chatbot, 2.) Google made it commercially available for application developers to incorporate into their applications via REST API.

Gemini API currently supports images only and the images must be 4MB and below. It is available in 3 sizes;Gemini ultra,Gemini pro and Gemini nano.

I recently developed a small image-to-text application Image reader using React js,Vite and tailwind css that consumes Gemini API by taking in images and prompts and responding with text based on the given prompts.

The website application enables users to upload photos or capture pictures with their webcams and then prompts them to describe what they would like to see in the photograph. After receiving the text response, the user can copy it to use later.

Additionally, the application has a capability to compare images; upload two images and ask Gemini to differentiate or compare the images. The API has a comprehensive documentation here Docs

In conclusion, AI is becoming more and more accessible to web developers through the API frontierand tooling for libraries and frameworks like Github Co-pilot, codium AI and prompt engineering chatbots (chat GPT, Google bard and claude AI).

The source code is available here on Github and the app is hosted here on Firebase

Understanding how centering of HTML div element works with some help from AI

Vincent Kipyegon — Fri, 12 Jan 2024 08:10:17 +0000

In the world of CSS, centering an HTML div element seems like a simple task but how to precisely centre a div element in the middle of a web page has drawn an unending debate. Like myself, most developers have memorised every technique for centering a div just in case it comes up during an interview. In any case, where is centred division applicable? How does it operate?

The picture above shows how Twitter/X uses a centered div when your lose your internet connection on its web application. Here is the CSS declaration for centering a div:

 #centerDiv {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

The CSS declaration above is straight-forward, we set position of the div to absolute so as to remove from normal document flow, we set top and left properties to 50% so that div is centered on the middle of the page. The last declaration transform:translate(-50%,-50%) is the critical in centering the div.

Lets dive deeper

Here is a a web page with two grid lines elements, intersecting at the center of the document. The point of intersection is where the div should be centered.

This how it looks without the last transform declaration: transform:translate(-50%,-50%);

I asked Google Bard AI to explain what transform:translate(-50%,-50%) does exactly and here is the explanation I got:

In conclusio, centering a div means positioning it perfectly to the middle of the web page and then ensuring the center of the div itself is aligned to the center of the web page i.e the intersection lines.

Here is the final code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Center Div</title>
    <style>
      body {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        border: 1px solid green;
      }
      #centerDiv {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* we use flex box to center elements inside the div*/
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .vertical-line {
        height: 1px;
        border: none;
        transform: rotate(90deg);
      }
      .horizontal-line {
        position: absolute;
        top: 50%;
        height: 1px;
        width: 100%;
        border-collapse: collapse;
        border: none;
      }
    </style>
  </head>
  <body>
    <hr class="vertical-line" style="background-color: green; z-index: 100" />
    <hr class="horizontal-line" style="background-color: green; z-index: 100" />

    <div id="centerDiv">
      <span
        style="
          color: white;
          text-align: center;
          font-size: 1.5rem;
          font-weight: bold;
        "
      >
        I am centered div</span
      >
    </div>
  </body>
</html>

Detecting Changes on JavaScript Object values using Sets

Vincent Kipyegon — Wed, 29 Nov 2023 10:09:16 +0000

Most a times in Javascript you want to know if the contents of an object literal have changed i.e when a user updates/edits their information. Most developers will simply save the information to the server without necessarily finding out if user really changed a thing or two.

Javascript sets are a collection of ordered unique values and are helpful for eliminating duplicate values. Sets are essential when dealing with discrete data.

let nums=[4,4,4,4,2,2,2,3,3,3]
let distinctNums=new Set(nums)

// Set(3) {4,2,3}
// convert set to Array using spread operator
nums=[...distinctNums]    // [4, 2, 3]

The example above is an array with duplicate values 2 and 3 ,when you initialize a new set with the array as an argument it returns set of 7 distinct values. That’s how it works.
You can read more about sets here on MDN

lets move on now; imagine, Ygritte is a beautiful single lady from Westeros North of the wall; here is a bio-data.

let user={name:"Ygritte",married:false,home:"North of the wall"}

Then all over sudden, she meets the love of her life, Jon Snow, she gets married,relocates to Winterfell and lives happily thereafter,did they? You know nothing Jon Snow. So here is how her bio-data will look after marriage.

let user={name:"Ygritte Snow",married:true,home:"Winterfell"}

But how will our Javascript detect that there are change of values on object literal?
Here is how we will do it

Convert the object values of before and after marriage of Ygritte to an iterable in this case 2 arrays using Object.values()
Merge the two arrays using spread operator
Create a set of merged array as well as a set of initial before object
Compare there sizes of before set and merged set.

let  before={name:"Ygritte",married:false,home:"North of the wall"}
let after={name:"Ygritte Snow",married:true,home:"Winterfell"}

let beforeArr=Object.values(before) //['Ygritte', false, 'North of the wall']
let afterArr=Object.values(after) //['Ygritte Snow', true, 'Winterfell']
let merged=[...beforeArr,...afterArr] //['Ygritte', false, 'North of the wall', 'Ygritte Snow', true, 'Winterfell']
// create sets
let mergedSet=new Set(merged)
let beforeSet=new Set(beforeArr)
if(mergedSet.size >beforeSet.size){
console.log('change detected')}
else{console.log('No change')}

Whoa! I can explain what is happening here....

We merge our 2 arrays, create a merged set that will only return unique values and also create a set of before array. We then use the size property of Set to compare the sizes of before set (which are values of before object) and the merged set ( values of before and after objects).Typically we converted the values an object literal to an array then converted the array to a set.

If the size of mergedSet is bigger than beforeSet it means we have a new unique value on the after object, or simply the user info has been updated/modified.

Caveat

Most object literals have dynamic properties that are automatically generated by the database such as updated_at,created_at, the values of these properties will give a result that the object has been updated even though it has not.

To get around them, you can either delete the dynamic object property before creating arrays or taking them into account during comparison.

let  before={name:"Ygritte",married:false,home:"North of the wall",created_at :"11/09/2023"}
let after={name:"Ygritte Snow",married:true,home:"Winterfell",created_at:"27/11/2023"}

delete before.created_at;
delete after.created_at;

How to Fix the Problems with JavaScript Array Methods -Splice,Sort,Reverse

Vincent Kipyegon — Sat, 18 Nov 2023 10:07:27 +0000

Most JavaScript beginners move fast breaking things while learning data structuresin JavaScript,stumbling on the bad parts of the language. Javascript is a dynamic and versatile programming language. easy to learn but understanding its deeper intricacies requires time and practice.

In JavaScript, arrays are an object type that contain unordered elements and can be modified once they are declared. There are numerous array methods (built-in functions) available in arrays for performing operationsincluding: sort, slice, reduce, filter, map, splice,some,find etc. There is even an entire lodash library with other helpful array methods.

Basically, an array method should not change or mutate the original array declaration instead it should always return a duplicate of the original.

For example, the following filter should only return numbers more than five without modifying the original array.

let nums=[1,2,3,4,5,6,7,8,9,10]
let moreThanFive=nums.filter(num=>num>5)
// [6, 7, 8, 9, 10]
console.log(nums)
// [1,2,3,4,5,6,7,8,9,10]

As you can see, we have created a copy of array moreThanFive with numbers more than 5 without modifying the original nums array.

However there are useful array methods that does the job but also cause side effects by modifying the original array. That alone causes unnecessary side effects in our app; application performs poorly.

Lets look at reverse method which should basically get a copy of nums in reverse wuthout modifying it.

let nums=[1,2,3,4,5,6,7,8,9,10]
Let reverseNum=nums.reverse()
// [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log(nums)
// [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

What happened? Original array nums is also reversed! Why? It turns out some Javascript array methods modify an original array instead of simply grabbing a copy and that is detrimental in programming. Splice, Sort, and Reverse are three effective Javascript array methods that modify an original array. Let us examine them and explore ways to use them without modifying the original array.

I want you to pay attention to changes in the original variable nums; our objective is keeping the original array unmodified.

Splice

Splice ,as the name suggests, splits a section of array and optionally inserts an array element. It takes 3 arguments; the first one is required the rest are optional,

1.The index where splice should start

  let nums=[1,2,3,4,5,6,7,8,9,10]
let spliced = nums.splice(4) // get elements from index 4 to end
console.log(nums)  // [1, 2, 3, 4]
//5 to 10 have been removed

2.The number of array elements to be removed (optional)

 let nums=[1,2,3,4,5,6,7,8,9,10]
let let spliced = nums.splice(4,2) // get  2 elements from index 4 onwards
console.log(nums) // [1, 2, 3, 4, 7, 8, 9, 10]
// 5,6 have been removed

3.Array elements to add from where you splice (optional)

let spliced = nums.splice(4,2,10,15) // get 2 elements from index 4 then add 10,15
console.log(nums)  // [1, 2, 3, 4, 10, 15, 7, 8, 9, 10]
// 5 and 6 have been removed but  10 and 15 have been added.

As you can see this method is really useful in creating new arrays but destroys the original array.

The fix

1.The old way; using array slice() method
The slice Method is friendly method that preserve the original array and creates a copy. Combining it with Splice does the same as above but original array remain unmodified.
Calling the slice method without arguments creates and return a copy of original array then splice that copy like so

 let nums=[1,2,3,4,5,6,7,8,9,10]
let spliced = nums.slice().splice(4) // get elements from index 4 to end
console.log(nums)  // [1,2,3,4,5,6,7,8,9,10] //nums is untouched

let nums=[1,2,3,4,5,6,7,8,9,10]
let let spliced = nums.slice().splice(4,2) // get  2 elements from index 4 onwards
console.log(nums) // [1, 2, 3, 4, 7, 8, 9, 10] //nums is untouched

2.ES2023 toSpliced() method

EcmaScript 2023 aka ES2023 introduced the array toSpliced() method which simply splices an original array and return a copy without modifying it.

let nums=[1,2,3,4,5,6,7,8,9,10]
let spliced = nums.slice().toSpliced(4) // get elements from index 4 to end
console.log(nums)  // [1,2,3,4,5,6,7,8,9,10] //nums is untouched

Sort

The sort method arranges elements in ascending or descending order depending on the data type.
Let's shuffle and sort our numbers array. I'll just use my hands to shuffle because Javascript, unlike PHP, doesn't provide a shuffle array function.

let nums=[1,7,3,10,5,6,2,8,9,4]
let sorted=nums.sort()
console.log(nums) //  [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]

Our original array nums is modified even though the sort() method failed miserably.
It turns out Javascript has a problem sorting arrays, so we have to pass in a callback function telling it how to sort our array.

let nums=[1,7,3,10,5,6,2,8,9,4]
let sorted=nums.sort(((a,z)=>a-z) //ascending order
console.log(nums) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // It modified nums but sorted correctly

The fix

1.The old way; using array slice
We slice the whole original array using the slice method once more, then we sort it explicitly.

let nums=[1,7,3,10,5,6,2,8,9,4]
let sorted=nums.slice().sort() // [1, 7, 3, 10, 5, 6, 2, 8, 9, 4]

Mission accomplished, nums is untouched but sorted array is incorrectly sorted, can you figure out how to do that?

2.ES2023 toSorted() method
ES2023 added another Javascript array method,a friendly sister to sort, toSorted() sorts an array without modifying the original.

let nums=[1,7,3,10,5,6,2,8,9,4]
let sorted=nums.toSorted((a,z)=>a-z) // ascending order
console.log(nums) // [1, 7, 3, 10, 5, 6, 2, 8, 9, 4] // untouched
console.log(sorted) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]  //sorted correctly

Reverse

Array reverse method does what it does, it reverses an array forward-back or back-forward but it leaves the original array in wrecked state.

let nums=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
let reversed=nums.reverse()
console.log(nums) // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

As you can see nums is also reversed, let fix that.

the fix

1.The slice method
The slice method is a must have tool in javascript, be it strings or arrays, it copies and leaves no damage behind.

let nums=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
let reversed=nums.slice().reverse()
console.log(nums) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2.ES2023 toReversed() method
EcmaScript 2023 introduced a polite toReversed method, a friendly sister of reverse

et nums=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
let reversed=nums.toReversed()
console.log(nums) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(reversed) // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

Don’t break the internet!!

Be careful not to break the internet as ES2023 features are supported by latest browser versions; Google Chrome 110 and above support it, latest versions of Mozilla,Safariand edge offer support.

Here is the error that occurs when you try toReversed() on Mozilla Firefox version 78.

The work around for this scenario is to run feature detection on the browser before using the feature else fallback to the old ways.You that by checking if Array prototype has the new method.

if(Array.prototype.toReversed){
console.log(" toReversed() is supported, use ES2023")

let nums=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
let reversed=nums.slice().reverse()
}else{
console.log(" toReversed() is not supported, use the old tricks")
let nums=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
let reversed=nums.slice().reverse()
}

A word on React Library

React, a JavaScript UI library, understands the impact of this methods on data transformation and thus uses map,filter and reduce methods incessantly as workhorses as they do not have side effect to app performance.

In conclusion, some array methods perform the expected functions but also give unusual side effect which can hurt the performance of an application.

React useEffect Hook: Use cases

Vincent Kipyegon — Sat, 29 Jul 2023 09:21:05 +0000

React useEffect is a react hook function that was introduced in React version 17; used for executing side effects following the mounting of a React component or as a result of changes in state declared variables. The hook expects 2 arguments; A callback function and an optional array of dependencies,it optionally return a function.

Visually, the useEffect function was developed by the React team with its functionality abstracted away and only the business logic (arguments, and return function) accessible to end users.
Here is a React function component we will be using for our use cases:

function BlogPosts() {
  const [posts, setPosts] = React.useState([]);
  const [error, setError] = React.useState("");
  const [pending, setPending] = React.useState(false);
  const textInput = React.useRef(null);
  const form = React.useRef(null);

  const getPosts = async () => {
    let url = `https://jsonplaceholder.typicode.com/posts/`;
    try {
      setPending(true);
      const response = await fetch(url);

      if (response.ok) {
        const payload = await response.json();
        setError(""); //clear previous error message if any
        return payload;
      } else throw new Error("Something went wrong....");
    } catch (error) {
      setError(error.message);
      return error;
    } finally {
      setPending(false);
    }
  };

 /*we will add a useEffect hook here*/

  // render some jsx
  if (pending) return <p>Loading Posts...</p>; // pending state

  if (error.length > 0) return <p>{error}</p>; // rejected
  // you can create a <PostsComponent/>  of your own
  if (posts.length > 0) return <h3>Received {posts.length} posts.</h3>; // resolved

  return null;  /* just before we fetch posts show blank screen*/


}

Use cases:

Performing side effects
Tracking dependencies
Setup and tear down processes
Manipulating the DOM
UseEffect can NOT be converted to async function.

1. Performing side effects

The hook can be used to perform executions after a component is mounted. This includes: network requests by fetch data from a rest API, initializing animations,setting up app related event listeners, setting timeouts and intervals.

Add this piece of code below the getPosts function

React.useEffect(() => {
    // fetch data
     getPosts().then((res) => {
      setPosts(res);
    })


    // start timers
    setTimeout(() => {
      console.log("I am executed after 5 seconds");
    }, 5000);
    setInterval(() => {
      console.log("I am executed after every 5 seconds");
    }, 5000);
    // app event listeners
    addEventListener("resize", () => {
      console.log("Window resized");
    });
    addEventListener("offline", () => {
      console.log("App is offline");
    });
    addEventListener("online", () => {
      console.log("App is back online");
    });

  });

2. Tracking Dependencies

Our Our useEffect function up there runs every time there is a render introducing something that looks like a bug.

UseEffect hook runs everytime the UI is rendered and when the component unmounted. The UI is always re-rendered whenever a state variable (variable declared by useState hook) changes.
Sometimes, though, you only want to run useEffect once or when a particular state variable changes.

The second optional argument supplied to useEffect is an array of dependencies, it determines how the useEffect hook is called; an empty array triggers the useEffect during initial render and when the component is unmounted while an array with elements will trigger the hook whenever there are changes are in one of the array elements.

we add an empty array as our second argument so that our hooks runs once

React.useEffect(() => {
    // fetch data
     getPosts().then((res) => {
      setPosts(res);
    })


    // start timers
    setTimeout(() => {
      console.log("I am executed after 5 seconds");
    }, 5000);
    setInterval(() => {
      console.log("I am executed after every 5 seconds");
    }, 5000);
    // app event listeners
    addEventListener("resize", () => {
      console.log("Window resized");
    });
    addEventListener("offline", () => {
      console.log("App is offline");
    });
    addEventListener("online", () => {
      console.log("App is back online");
    });

  },[]);

Primitive data types such as numbers,strings and booleans, UseEffect can easily track their changes while non-primitives such as as objects and arrays are mutable data types stored by reference, useEffect has a problem tracking their changes since “non-primitives refer to the same instance” that is they always look identical.

To make useEffect track changes in non primitivies:

UseMemo hook can be used in conjuction with useEffect to track changes in an array. It calcualates changes between elements previous array and the next array through memoization.

// useMemo will trigger useEffect if posts array has changed
Const _postChanges=React.useMemo(()=>posts,[posts]) /*return the posts array inside useMemo hook*/
/* now the useEffect will be able to listen to changes on posts array by tracking _postChanges array from useMemo */
React.useEffect(()=>{
console.log('you have changes in your array')
},[_postChanges])

Tracking an object property instead, we assume every object always has a unique property mostly id property.

const [post,setPost]=React.useState({id:1,title:"UseEffect hook"})
const nextPost={id:2,"UseReducerHook"}

React.useEffect(()=>{
console.log(`The new post id is ${post.id}`)
},[post?.id]) // runs whenever post id changes

return(<div>
<p>The current post is {post?.title} </p>
<button onClick={()=>setPost(nextPost)}>Next Post</button> </div>)

3. Setup and tear down processes

UseEffect hook comes in handy when setting up processes that can be used when the components mounts and removed when it unmounts, e.g setTimeout, setInterval, adding and removing event listeners.
The hook returns a function that can be used to perform these tear down processes.

_ we now declare two new variables for clearing setInterval and setTimeout, we then return a teardown function_

React.useEffect(() => {
    // fetch data
     getPosts().then((res) => {
      setPosts(res);
    })
let timeout,interval; // for clearing intervals and timeout

    // start timers
    timeout=setTimeout(() => {
      console.log("I am executed after 5 seconds");
    }, 5000);
   interval= setInterval(() => {
      console.log("I am executed after every 5 seconds");
    }, 5000);
    // app event listeners
    addEventListener("resize", () => {
      console.log("Window resized");
    });
    addEventListener("offline", () => {
      console.log("App is offline");
    });
    addEventListener("online", () => {
      console.log("App is back online");
    });
return function(){
// tear down events and intervals
 if(timeout)clearTimeout(timeout);
if(interval)clearInterval(interval)

removeEventListener("resize", () => {
      console.log("Window event removed");
    });

}


  },[]);

4. Manipulating the DOM

React implements a virtual DOM before reconcilling changes to the real DOM on the browser. Most a times you want to access to a DOM element such as form or form input elements. We can gain access to the DOM using useRef hook then manipulate it inside the useEffect hook. Sometimes you can use DOM API methods such as document.getElementById() since we know the DOM is always mounted. It is not advisable though; go for useRef hook.

React.useEffect(() => {
    // fetch data
     getPosts().then((res) => {
      setPosts(res);
    })
let timeout,interval; // for clearing intervals and timeout

    // start timers
    timeout=setTimeout(() => {
      console.log("I am executed after 5 seconds");
    }, 5000);
   interval= setInterval(() => {
      console.log("I am executed after every 5 seconds");
    }, 5000);
    // app event listeners
    addEventListener("resize", () => {
      console.log("Window resized");
    });
    addEventListener("offline", () => {
      console.log("App is offline");
    });
    addEventListener("online", () => {
      console.log("App is back online");
    });
/*MANIPULATE THE DOM */
 // access the input on the DOM and make put placeholder after 2 seconds
    setTimeout(
      () => {
        if (textInput.current) {
          textInput.current.setAttribute("placeholder", "Enter post title....");
          textInput.current.focus();
        }
      },

      3000
    );
    // manipulate the DOM, give some time out to make sure its there
    setTimeout(() => {
      const formWrapper = document.getElementById("form-wrapper");
      if (formWrapper) formWrapper.style.backgroundColor = "red";
    }, 100);
    // use DOM API to change background to light gray
  }, []);
/*CLEAN UP THE COMPONENT*/
return function(){
// tear down events and intervals
  if(timeout)clearTimeout(timeout);
if(interval)clearInterval(interval)
removeEventListener("resize", () => {
      console.log("Window event removed");
    });

}
   // Also update the jsx returned
  let style = { display: "block", width: 200, padding: 5 };
  let btnStyle = {
    ...style,
    background: "hotpink",
    padding: 5,
    borderRadius: 5,
    marginTop: 10,
    color: "white",
  };
// render components
  if (pending) return <p>Loading Posts...</p>; // pending state

  if (error.length > 0) return <p>{error}</p>; // rejected 

  return (
    <div style={{ padding: "1rem" }} id="form-wrapper">
      <form onSubmit={handleSubmit} ref={form}>
        {posts.length > 0 && <h3>Received {posts.length} posts.</h3>}
        <div>
          <label htmlFor="username" style={style}>
            Enter Post Title
          </label>
          <input id="username" style={style} ref={textInput} />
        </div>

        <button style={btnStyle}>Submit</button>
      </form>
    </div>
  );

  },[]);

5. UseEffect can NOT be converted to async function.

React hook has few special rules;
1.) React hooks only work inside React components.
2.) React hooks can only be declared on top level scope inside a react component. They cannot be declared conditionally.

Const [deadline,setDeadline]=React.useState(true);
// DON’T
if(deadline){

useEffect(()=>{},[])
}
// DO
useEffect(()=>{
if(deadline){
// do something about it
}
},[])

Most React beginners are always eager break these rules with ease.
There is another unwritten rule that React frowns upon; making the callback provided to useEffect as async/await function.

// DON'T
React.useEffect(async()=>{
const payload=await getPosts();
setPosts(payload);
},[])

When callback used as an async/await function it becomes a promise that blocks the main thread until it settles instead of simply running effects and returning a function.

We run async functions inside useEffect this way:


React.useEffect(()=>{
 getPosts().then(res=>setPosts(payload)).catch(err=>console.error(err.message));
},[])

Alternatively we can use an immediately invoked function expressions (IIFE) inside useEffect like so:

React.useEffect(()=>{
(async()=>{
const payload=await getPosts();
if(payload) setPosts(payload)
})()

},[])

How to Detect Slow Internet Connection using JavaScript Async/await

Vincent Kipyegon — Fri, 21 Jul 2023 07:08:12 +0000

A slow internet connection is a mind-boggling experience in areas with slow internet connectivity. Sometimes you may have a highly performant app but your users’ internet connection hinders them from enjoying experience of your website/web app. As such, it is important to build resilient applications that can quickly detect slow internet connection and notify the users promptly.

In JavaScript, a slow connection is a promise, or network request, that doesn't settle (resolve or reject) at a specific time and instead stays in the pending state indefinitely.

Remember there is a difference between a slow network (a promise that doesn't settle for a while) and a no network (a promise that settles with rejection), which typically returns error 404.

You can detect ‘no network’ using javascript offline and online events before making a request. Read this online/offline events article here

Javascript is a single threaded and non-blocking language.

Before I show you how to detect slow network on your website/web app, lets understand some JavaScript concepts; Javascript is a single threaded and non-blocking language.

It is single threaded as it only processes one item at a time running a script line by line from top to bottom.

It is a non-blocking language in that when a Javascript interpreter encounters a lengthy process, it doesn't wait for it to finish but instead it delegates a callback function that will handle when the process completes then continues to the next line.

Async/await functions were introduced in JavaScript Ecmascript 2017 (ES2017), allowing Javascript interpreter to use the keyword await inside a function to wait for an asynchronous operation to finish before moving on to the next line. In other words, async/await functions violate Javascript's non-blocking nature inside a function.

Lets now implement single threaded and non-blocking nature of JS to detect slow network and here is how we will do it:

Determine the time to deem an internet connection as slow. (for our test we will use 500ms and throttle the network).Normally it could 30 seconds to a minute.
Declare an async/await data fetching function .
Declare a payload variable as null and later assign data from network request.
Set up a setTimeout method inside of async/await function just before await keyword, the method takes a callback function that will check if a promise has settled at a given time by checking if payload is still null or received data from REST API.

Callback function is a function given to another function as an argument.it is a powerful feature in JavaScript and work horse of node JS. Read More the difference between callback functions and high order functions

Our HTML code



<button id="network-btn"  style="padding:0.5rem;
          background:rebeccapurple;
          color:white;
          border-radius:8px;
          outline:none;
          width: 150px;
          margin:5rem;"> Get Posts <button>

Our Javascript code



const networkBtn = document.getElementById("network-btn");
let timeout = 500; // let assume its too slow at 500ms
let payload = null;
let clearTimer=null /* to clear our setTimeout, initialised as null */

const checkNetwork = () => {
  /* if after half a second payload  variable is still null, 
it means we are still awaiting the promise to settle */
  if (payload === null) {
    alert("Your internet connection is slow");
  }
};

async function getPosts() {

  let url = `https://jsonplaceholder.typicode.com/posts/`;
/*  we clear any timeout*/
if(clearTimer !== null) clearTimeout(clearTimer) 
  try {
/*the callback in setTimeout will be executed regardless of the await keyword below it*/
    clearTimer=setTimeout(checkNetwork, timeout);
    const response = await fetch(url);
    payload = await response.json();
    return payload;
  } catch (error) {
    console.error(error.message);
  }
}

const handleNetwork = () => {
  getPosts();
};

networkBtn.addEventListener("click", handleNetwork);

We have assummed that half a second (500ms) is a slow connection for our testing purposes,Open devtools newtork tab ctrl+shift+I to throttle network to slow 3G, when you run that code you should see an alert saying _ your internet connection is slow _.

We can cancel the request and ask the user if they wish to retry the request, abort request with AbortController then call getPosts function again. Read how to cancel an AJAX request with AbortController



const networkBtn = document.getElementById("network-btn");
let timeout = 500; // let assume its too slow at 500ms
let payload = null;
let abortController=null
 let recalled = 0; /* we want to only retry calling the function once to avoid infinite function calls*/

const checkNetwork = () => {
  /* if after half a second payload  variable is still null, 
it means we are still awaiting the promise to settle */
  if (payload === null) {
    if (confirm("Your internet connection is slow, do you wish to retry?")) {
      abortController.abort();
       if (recalled <= 1) getPosts(); 
      recalled++;
    };
  }
};

async function getPosts() {
  abortController = new AbortController();
  let signal = abortController.signal;
  let url = `https://jsonplaceholder.typicode.com/posts/`;
  try {
    setTimeout(checkNetwork, timeout);
    const response = await fetch(url, { signal });
    payload = await response.json();
    return payload;
  } catch (error) {
    console.error(error.message);
  }
}

const handleNetwork = () => {
  getPosts();
};

networkBtn.addEventListener("click", handleNetwork);

To summarise, async/await gave javaScript functions a blocking aspect that developers can use to their advantage by pausing everything while they wait for an action to finish while on the other end manipulating with callbacks.

Resources:
MDN Async function
A Beginner’s Guide to JavaScript async/await, with Examples

5 JavaScript Web APIs To Boost Mobile User Experience For Web Apps

Vincent Kipyegon — Wed, 19 Jul 2023 09:51:10 +0000

In this article we will look at some JavaScript APIs that can bolster web applications leverage mobile native features. Additionally, these APIs have a simple and straightforward syntax implementation. We will use WhatsApp as a point of reference between native apps and web apps.

The web APIs in question include:

Vibration API
Contact picker API
Web Share API
Media devices
Web OTP

1. Vibration API

Vibration provides a haptic trigger that notifies a user of certain call to action or feedback. This API is dominant across most mobile OS. On WhatsApp, Vibration can be felt whenever a new message arrives, on the web, vibration is only supported on mobile device operating systems and ignored in computer OS.

The syntax is one line of code that gets your device vibrating.

navigator.vibrate(300) //vibrates for 3 milliseconds
navigator.vibrate([200,100,200])// vibrates for 2 milliseconds, pauses for a millisecond then vibrates for another 2 milliseconds

Feature detection is not necessary as the API is ignored on devices that do not support it

Resources:
use Vibration API in your website
MDN Vibration API

2. Contact Picker API

The contact picker API allows a user to access, select and share one or multiple contacts from the phone’s contact book. The API picks the users phone name, telephone,email, address and icons. This is a common feature available on mobile device OS, WhatsApp allows users to share contacts or create chats by selecting users from the contacts list.

Its usage on the web begins with feature detection then opening of the contact book; the contact object of the navigator window object has a select method that takes 2 parameters (an arrays of values to return from contact book and optional object for indicating whether to return single or multiple contacts) and returns a promise when invoked.


const getContacts= async ()=>{
const info = ['name',  'tel', 'address', 'icon'];
const options = {multiple: false};
try {
if("contacts" in navigator){
  const contacts = await navigator.contacts.select(info, options);
  console.log(contacts);
/*
[{
  "email": [],
  "name": ["John DOe"],
  "tel": ["+254-790-377-7301"]
}]*/
return contacts
}
} catch (error) {
  console.error(error.message)
}
}

Resources:
Contact Picker API
How to access contacts from the address book
MDN:Contact picker

3. Web Share API

Mobile operating systems have robust capabalities of sharing content from one platform to another. The web share api is a seamless feature available for browsers on mobile devices that allows users to share content from a web page to other platforms such as social media, email or even other websites. It is similar to share feature on WhatsApp that allows users to share files,text and links outside of WhatsApp.

const shareBlog = async () => {
  let title = `5  javascript web apis to improve user experience for web apps on mobile devices`;
  let text = `check out the blog`;
  let link = `https://dev.to/kipyegonline/5-javascript-web-apis-to-boost-mobile-user-experience-for-web-apps-5h8d-temp-slug-2587123`;
  try {
    if ("share" in navigator) {
    }
    const response = await navigator.share({ title, text, url: link });
    console.log("Blog shared successfully!");
  } catch (error) {
    console.error(error.message);
  }
};

Resources:
web dev
MDN web share

4. Media devices

Another capability provided by mobile devices operating system access to device hardware such as the camera and microphone. The media devices allows an application to receive media stream from device microphone and camera as well as sharing the screen.

On the web; the MediaDevices API requests permission from the user to access either camera or audio or the both. The API returns a promise which if it resolves returns media streams or simply blocked if rejected. As usual we perform feature detection on the window navigator object.

// assuming we have the HTML elements in place
const video = document.getElementById("video");
const myCanvas = document.getElementById("pic-canvas");

let tracks = null;

async function getUSerMediaDevices() {
  let props = { video: true, audio: false, width: 300, height: 400 };

  try {
    if ("mediaDevices" in navigator) {
      const stream = await navigator.mediaDevices.getUserMedia(props);

      video.srcObject = stream;
      tracks = stream.getTracks();
    }
  } catch (error) {
/* the user blocked the camera or their device does not support media devices */
console.error(error.message)
}
}

function stopStreamedVideo() {
  if (tracks !== null) {
    tracks.forEach((track) => {
      track.stop();
    });
    video.srcObject = null;
  }
}

startBtn.addEventListener("click", getUSerMediaDevices);
stopBtn.addEventListener("click", stopStreamedVideo);

There exists libraries that wraps around this API only exposing the necessary properties for streaming video and audio, e.g react-webcam for React applications.

Web dev
MDN Media devices

5. Web OTP

The best is saved until last! One Time Passwords are a type of application communication that sends users a verification code by SMS. OTPs are helpful for two-step verification, user phone number verification, and online payment confirmation.

Majority of mobile applications send SMS codes to users where they can input them manually,however, some apps can automatically detect,extract and input the OTP without requiring manual input. WhatsApp sends OTP when verifying the user phone number and the OTP is automatically populated to the input field.

This is possible on the web, web application can implement this feature for mobile web apps/website to automatically autofill SMS OTPS.

The Web OTP API is simple to use and begins by detecting the OTPCredential object on the window and executing the code from navigator.credential.get window method , setting the autocomplete attribute on HTML input to "one-time-code".

Here is a comprehensive code documentation on implementation and the best practices of web OTP by the Google Chrome team

Resources:
MDN Web OTP

This is just the tip of the iceberg; there are countless ways in which a web application might benefit from native features of mobile operating systems and hardware.
Read more JavaScript Web APIs for mobile OS devices here on web Dev by Google Chrome team

How To Cancel an AJAX Request in JavaScript Using the AbortController

Vincent Kipyegon — Mon, 17 Jul 2023 07:50:30 +0000

A traditional website or web app always loads the entire page content on page refresh/reload. Sometimes, though, you need to just load content for a particular section of a web page. Asynchronous JavaScript and XML (AJAX), a http approach that conducts a background network request without requiring a complete page refresh but rather in response to user interaction with a web page or app-related events, was introduced in 2006 to address this need.

Why cancel AJAX requests?

Slow internet connection, cancel a request that takes a long time to complete and retry.
User interaction events; when a user’s mouse enters a menu item fetch some data then cancel it if they leave the menu item before the request is complete.
App related events; when the page unloads cancel all pending requests, cancel requests when offline event is fired
A dynamic search box where you need to fetch data as the user types the input; cancel the previous request.

Meet Abort Controller

An AbortController is a Javascript built-in object that gives developers the ability to stop asynchronous actions in their program.

Every time a request is performed, the object instance is created, the object has signal property used as signal for aborting operations and a abort method that is called to cancel an operation.

HTTP requests made using Fetch API can optionally by supplied with an object that takes a signal property for cancelling a request. In case it is necessary, the process can be stopped, the signal can then be used elsewhere in the program. The abort method of the AbortController is used to cancel a request.

The API is quite straight forward.

Our HTML code

<button id="cancel-btn"  
style="   padding: 0.5rem;
          background: hotpink;
          color:white;
          border-radius: 8px;
          outline: none;
          border:none;
          width: 150px;
          margin: 5rem;
        ">Initiate Request<button>

Our JavaScipt code

let btn=document.getElementById("cancel-btn")
let ac = null;
let pending=false /* track when the promise is is pending and settled*/
/* we will use this function to update the DOM during http request*/
const updateDOMChanges=(message="Initiate Request")=>{
 btn.innerHTML=message;
 }

async function getUsers() {
  let url = `https://jsonplaceholder.typicode.com/posts/`;
    ac = new AbortController(); // we a new instance every time there's a request
    let signal=ac.signal
    try {
      pending=true
   updateDOMChanges("Cancel Request")  // lets update the button status
    const response = await fetch(url, { signal }); // we attach signal to our request
const payload=await response.json();
  } catch (error) { 
updateDOMChanges(error.message) 
}
  finally {
      pending=false
updateDOMChanges("Initate request again")  // lets update the button status again
    }
}

const handleButton = () => {
    // if the promise is not settled and we have an instance of abort controller, then cancel the request
    if (pending) {
        if(ac !==null) ac.abort(); 
      alert("Request cancelled")
    }else{
getUsers();
}
}

btn?.addEventListener("click",handleButton)

To test this code,
1.copy the code and create an html page with a button with an id of cancel-btn

Open chrome devtools by pressing ctrl +shift +i then find a drop-down on the top-left corner and change from no throttling to slow 3G.
When the button text changes to Cancel Request, click it and you should see an alert that the request was cancelled.

With that knowledge, you can check out how to detect and cancel slow internet connect with abort controller and async/await

Resources:
MDN AbortController
Dev To: How to cancel Javascript API request

Using HTML attribute `inert` to disable copy paste and user events on a web page/elements

Vincent Kipyegon — Wed, 01 Mar 2023 15:41:34 +0000

Have you ever tried to choose and copy text from a webpage but it wouldn't go to the clipboard or copy with the right click? Most organizations choose to limit user access to certain web pages on their site; their privacy policies, disclaimer, and terms of use pages are made "read only."

Over time, most web developers use various techniques to mask their content preventing users from copy-pasting, but in 2022, HTML attribute inert was introduced to assist web developers disable copy-paste functionality and user events on web pages or certain elements on the web page. All that is required is the addition of the attribute inert to an HTML element that contains the material. It is compatible will all browsers except Firefox.

<body>
    <section>
        <!-- Insert inert as an attribute to parent div or p themselves -->
      <div inert>
         <h3> Inert HTML attribute is here</h3>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        <p>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        </p>
      </div>
</section>
</body>

1. Using a transparent div over content.

This is done by absolutely position a transparent div over you content. This prevent users from selecting the content.

 <div class="content">
            <div class="cover"></div> 
         <h3> Content is covered</h3>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        <p>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        </p>
      </div>

Then add the following css styles

 .content{
position:relative;
padding:1rem;
      }
   .cover{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        background:transparent;
       z-index:100;

      }

2. Using CSS pseudo elements to generate content.

CSS pseudo elements allow us to select alter elements or content that are not directly related to the HTML. ::before and ::after pseudo element are used to add generated content to HTML; the content is only visible,cannot be copied.

<div class="content"></div>

Then add the following styles

.content::before{
        content: "Privacy policies hereein attached";

      }

.content::after{
        content: "These are terms and conditions here in attached";

      }

3. Using JavaScript to disable content menu

Context menu is menu that appears whenever a user clicks right click option. Disabling it is done by add a contextmenu event to the element holding the content then disabling it when the event is fired; calling e.preventDefault() on it.

 const content=document.querySelector(".content");
        if(content){
            content.addEventListener("contextmenu",(e)=>e.preventDefault())
        }

4. Using css property user-select

CSS has a property called user-select which disables user selection of content from an HTML element.It can take one of the following 5 values: none,text,all,auto,contain.
Setting the value of none disables text selection from an HTML element or entire web page.

// disables selection of text from a web page
body{user-select:none;}

Difference between callback functions and high order functions in JavaScript

Vincent Kipyegon — Mon, 20 Feb 2023 09:08:50 +0000

Functions in Javascript are a piece of self-contained code tat performs a given task. Most JavaScript interviews put off potential employees with a difference between callback function and high order functions.

These 2 concepts are powerhouse of JavaScript and work horse of node.js; understanding them is not only key to writing scalable code but also key to having comprehensive knowledge of how JS language and node.js works under the hood.

Lets first look at types of JS functions.

There are 3 types of functions in JavaScript:

Function declarations are functions that starts with function keyword followed by an optional name, parenthesis and body enclosed by curly braces.

function myFunc(){}

Function expression is a function declaration without a name declaration but assigned to a variable. Like so

const myFunc=function(){}

Arrow functions are function expression that have a neat and clean syntax; a variable is assigned a parenthesis, followed an arrow sign and a body enclosed with curly braces.

const myFunc=()=>{}

Callback functions and high order functions are features of JavaScript functions; a Callback is a function passed to another function as an argument while a high order function is a function that accepts another function as argument (callback) and/or returns a function. They are used simultaneously;where there is a callback there is a high order function or vice versa.

Let's look at an example:

// call back
const PopulateDom = () => {
  console.log("Call back invoked");
};

function mainFunction(callback) {
  // assume you want to perform an asunchronous operation; say data fetching from the server...

  // then when data arrives, just call callback function to handle
  callback();
}
// then invoke main function and pass PopulateDoM function as argument without invoking it

mainFunction(PopulateDom);

The MainFunction above takes a parameter called callback which is reference to a function that will be passed during invocation.The populateDom is therefore a callback function supplied to mainFunction.

An anonymous function is just a function declaration without a name; they are typically used as callbacks and are defined inline with the function that will receive them as arguments when they are invoked.

/** Invoke main function with an anonymous arrow function */
mainFunction(() => {
  console.log("Call back invoked");
});
/** Invoke main function with an anonymous function declaration */
mainFunction(function () {
  console.log("Call back invoked");
});

Main function above is a high order function; as it receives a callback. Javascript has a lot of inbuilt high order functions that receive functions as argument.

Array methods: map,filter,reduce,find,some,every,forEach etc are high order array functions that take a callback function and performs some given operations.

array map

Map method loops though each item in an array,takes a callback, then returns the whole array.

// lets get  the powers of two of array elements above
const nums = [3, 4, 6, 7, 8, 10];
const powersOfNums = nums.map((num) => num ** 2);
// alternative 1
const _powersOfNums = nums.map(function (num) {
  return num ** 2;
});
// alternative 2
function getPowers(num) {
  return num ** 2;
}
const __powersOfNums = nums.map(getPowers); // another alternative

array filter

Filter method filters out items in array depending on given condition.

const nums = [3, 4, 6, 7, 8, 10];
// lets get numbers divisible by 2 from the array above

const divisibleByTwo = nums.filter((num) => num % 2 === 0);
// alt 1
const _divisibleByTwo = nums.filter(function (num) {
  return num % 2 === 0;
});

// alt 2
const getDivisibles = (num) => {
  return num % 2 === 0;
};

const __divisibleByTwo = nums.filter(getDivisibles);

Array reduce

Reduce array method takes 2 arguments; a callback function and an optional initial value, then iterates through an array of elements; performs a sum if its number or concatenation if its a string or a returns an object.

const nums = [3, 4, 6, 7, 8, 10];
// lets get them sum  all numbers in the array above
const initial = 0;
const sumNums = nums.reduce((a, b) => a + b, initial);

Javascript setTimeout, setInterval and addEventListener are also in-built high order functions;setTimeout and setInterval functions perform a given over a given period of time;

setTimeout executes once at a given timeout while setInterval executes continously over given time; They take 2 arguments; a callback function and time in milliseconds. Note these functions return a value that can be used to cancel them from executing.

const time = 5000;

const timeoutFunction = () => {
  console.log(`I only run once after ${time} seconds.`);
};

const intervalFunction = () => {
  console.log(`I run after every ${time} seconds.`);
};

setTimeout(timeoutFunction, time);

setInterval(intervalFunction, time);

AddEventListener is a function used to attach event handlers to listen to events on DOM elements; it takes 3 arguments: an event type (string), a callback function and an optional boolean as third argument,defaults to false.

const element=document.getElementById("someElement")
function handleClick(e){
// perform some action}

if(element) element.addEventListener("click",handleClick)

React, a JavaScript UI library, also uses callbacks and high order functions incessantly in its react hooks.

React useState hook takes an optional callback used whenever you want to track the state of a variable where the next value relies on the previous value.

function CounterComponent() {
  const [counter, setCounter] = React.useState(0);
  const handleClick = () => {
    // set counter takes a callback that uses the previous value to calculate the next value
    setCounter((prev) => {
      const next = prev + 1;
      return next;
    });
  };

  return (
    <div>
      <p>
        {" "}
        The count is: <b>{counter}</b>
      </p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

React useEffect hook is a high order function that takes a callback and an option dependency array for watching variable changes. The callback returns an optional function.
The hook performs side effect actions after a component renders and clean up actions just before it unmounts.

function CounterComponent() {
  const [counter, setCounter] = React.useState(0);
  const handleClick = () => {
    // set counter takes a callback that uses the previous value to calculate the next value
    setCounter((prev) => {
      const next = prev + 1;
      return next;
    });
  };

  /** for reseting the counter to zero when component unmounts */
  const cleanUpFunction = () => {
    setCounter(0);
  };
  // run after a component mounts and before a component unmounts;
  React.useEffect(() => {
    if (counter === 100) {
      setCounter(0);
    }

    return cleanUpFunction;
  }, [counter]);

  return (
    <div>
      <p>
        {" "}
        The count is: <b>{counter}</b>
      </p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Understanding callback and high order functions is a gateway to endless possibilities in function programming paradigm.