DEV Community: Kurapati Mahesh

Unlocking the Power of Functional Programming in JavaScript: A Comprehensive Guide

Kurapati Mahesh — Mon, 14 Aug 2023 17:58:34 +0000

Introduction:

A functional programming(FP) is paradigm, means a way of thinking about software construction based on some principles like Pure functions, Immutability, First class and higher-order functions, Function composition, Closure, Declarative Programming, Recursion, Referential Transparency, Currying and Partial Application

These principles, when applied effectively in JavaScript, can lead to code that is more modular, maintainable, resilient, more understandable, testable, and capable of elegantly handling complex problems.

This article looks quite long but not theoretical as such.

Let's start experimenting each item:

1. Pure Functions:

Two Rules

Given the same input, always return same output.
Produces no side effects

Use: Easy to refactor, makes code more flexible and adaptable.

Example 1:

// Impure function.
let a = 4;
const multiplyNumbers = (b) => a *= b;

multiplyNumbers(3);
console.log(a); // first time: 12
> 12
multiplyNumbers(3);
console.log(a); // second time: 36
> 36

// Mutates external variable so it isn't pure.

// Pure function.
const multiplyNumbers = (x,y) => x * y;

multiplyNumbers(2, 3);
> 6

Example 2:

// Impure function.
addNumberarr = (arr, num) => {
arr.push(num);
};
const testArr = [1,2,3];
addNumberarr(testArr, 4);

console.log(testArr);
> [1, 2, 3, 4]

// Mutates input array so it isn't pure.

// pure version of above.
addNumberarr = (arr, num) => {
return [...arr, num];
};
const testArr = [1,2,3];
addNumberarr(testArr, 4);
> [1, 2, 3, 4]

JS Built-in Pure functions:

arr.reduce()
arr.map()
arr.filter()
arr.concat()
arr.slice()
arr.each()
arr.every()
... - spread syntax

JS Built-in Impure functions:

arr.splice()
arr.push()
arr.sort()
Math.random()

2. Immutability:

Objects whose state can't be altered once it is created.

A simple example would be using the slice method to help you easily grasp the meaning.

const arr = [1,2,3,4];

const slicedArray = arr.slice(1,2);

slicedArray
> [2]

arr
> [1, 2, 3, 4]

If you see above example, slice didn't alter or modify or mutate original array arr. Whereas, if you see below example:

const arr = [1,2,3,4];

arr.push(5);
> 5

arr
> [1, 2, 3, 4, 5]

original array arr has been mutated. It's not that we shouldn't use push but we can avoid in most of the situations. Simple example would be:

const arr = [1,2,3,4];

const newArr = [...arr, 5];

arr
> [1, 2, 3, 4]

newArr
> [1, 2, 3, 4, 5]

The above all are simple examples and won't create any issues possibly. But, situations where we keep on modifying same object wherever possible across whole file will create many issues. As we need to maintain the track as how many times and ways that object has been altered.

So, to solve this issue we need to avoid mutating the object.

3. First Class functions

First-class functions refer to the concept of treating functions as first-class citizens, which means they are treated as regular variables or values. It enable functions to be manipulated and used in the same ways as other data types like strings or numbers. This allows functions to be passed as arguments to other functions, returned as values from other functions, and assigned to variables. Javascript supports this.

It opens the door to powerful programming techniques, such as higher-order functions, function composition, and the creation of abstractions.

4. Higher-Order Functions:

A function can take a function as an argument or can return a function as a value is called a higher-order function.

A function that returns a function

const higherOrderFunc = function() {
    return function() {
        return 12;
    }
}

// which returns below function hence it is higher order function.
higherOrderFunc(); 
> ƒ () {
        return 12;
    }

higherOrderFunc()();
> 12

A function that takes a function as an argument

const testFunc = function(x) {
    return x + 12;
}

//which takes function as an argument.
const higherOrderFunc = function(testFunc) {
    return testFunc(8);
}

higherOrderFunc(testFunc);
> 20

Example 1:

function calculate(operation, numbers) {
    return operation(numbers);
}

function addition(numbers) {
    let sum = 0;
    for (const number of numbers) {
        sum+=number;
    }
    return sum;
}

function multiply(numbers) {
    let sum = 1;
    for (const number of numbers) {
        sum*=number;
    }
    return sum;
}

const numbers = [1,2,3,4,5];
console.log(calculate(addition, numbers));
> 15

console.log(calculate(multiply, numbers));
> 120

calculate(multiply, numbers) - Don't append parenthesis while sending function as an argument.

Benefits of higher-order functions:

Reduces code duplication
Single responsibility

In Javascript, functions can take arguments as primitives or objects and return the same called first-order functions.

JS built-in higher order functions are:

arr.reduce(), arr.forEach(), arr.filter(), arr.map()

5. Functional Composition:

It is an approach where result of one function passed on to next function.

const add = (x, y) => x+y;

const subtract = (x) => x-4;

const multiply = (x) => x * 8;

// result of `add` is passed to `subtract` and its result passed to `multiply`.
const result = multiply(subtract(add(2, 3)));

result;
> 8

That looks readable but what if we have more functions to call one after other. Let's try little cleaner approach.

const compose = (...functions) => x => functions.reduceRight((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

compose(multiply, subtract, add)(2);
> 24

We can also use reduce to implement:

const pipe = (...functions) => x => functions.reduce((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

pipe(add, subtract, multiply)(2);
> 24

pipe - performs from left-to-right.
compose - performs from right-to-left.

6. Declarative Programming:

Declarative: tells What to do

Imperative: tells How to do

Example: Find the employees with dept 'justCode' and summation of their salary.

Imperative Style:

const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

const justCodeDept = [];

// filter employees based on dept name.
for (let i=0; i<employees.length; i++) {
  if (employees[i].dept === 'justCode') {
    justCodeDept.push(employees[i]);
  }
}

// summation of justCodeDept employees.
let summation = 0;
for (j = 0; j<justCodeDept.length; j++) {
  summation = summation + justCodeDept[j].salary;
}

console.log(summation);

Declarative Style:

const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

console.log(employees.filter(item => item.dept === 'justCode').reduce(((previousValue, currentValue) => previousValue += currentValue.salary), 0));

7. Currying:
Splitting up function that takes multiple arguments into a sequence of functions that each take its individual argument (only one).

Example 1:

Generally, we write:


function addition(x, y, z) {
    return x + y + z;
}

addition(1, 2, 3);
> 6

Currying:

function addition(x) {
    return function addY(y) {
        return function addz(z) {
            return x+y+z;
        }
    }
}

addition(1)(2)(3);
> 6

Using arrow functions:

addition = (x)=>(y)=>(z)=>x + y + z;

addition(1)(2)(3);
> 6

Example 2:

function formWelcomNote(name) {
    name = `Hello ${name}, `;
    return function(location) {
        location = `Welcome to ${location},`;
        return function(section){
            return `${name}${location} Please visit ${section} section`
        }
    }
}

formWelcomNote('Yester')('VK Just Code Articles')('JS Articles');
> 'Hello Yester, Welcome to VK Just Code Articles, Please visit JS Articles section'

We can also write as:

formWelcomNote = (name)=>{
    name = `Hello ${name}, `;
    return (location)=>{
        location = `Welcome to ${location},`;
        return (section)=>{
            return `${name}${location} Please visit ${section} section`
        }
    }
}

formWelcomNote('Yester')('VK Just Code Articles')('JS Articles');
> 'Hello Yester, Welcome to VK Just Code Articles, Please visit JS Articles section'

Example 3:

function calculation(fn) {
    switch (fn) {
        case 'add': return (a, b) => a + b;
        case 'sub': return (a, b) => a - b;
        case 'mul': return (a, b) => a * b;
        case 'div': return (a, b) => a / b;
    }
}
console.log(calculation('mul')(4, 2));

8. Partial Application:

You fix a certain number of arguments for a function and generate a new function with fewer parameters. This new function can be called with the remaining arguments at a later time. Partial application helps in creating more specialized and reusable functions.

Example:

function add(a, b) {
  return a + b;
}

// Partially apply the first argument
const add2 = multiply.bind(null, 2);

console.log(add2(5));  // Output: 7 (2 + 5)
console.log(add2(8));  // Output: 10 (2 + 8)

9. Referential Transparency:

An expression in javascript can be replaced by its value is called referential transparency.

const add = (x,y)=>x + y;

const multiply = (x)=>x * 4;

// add (3, 4) can be replaced by 7. - Referential Transparency.

multiply(add(3, 4)); 
> 28

multiply(add(3, 4));
> 28

const arr = [];
const add = (x,y)=>{
    const addition = x + y;
    arr.push(addition);
    return addition;
}

const multiply = (x)=>x * 4;

// Here, we can't replace add(3,4) with 7 as it affects the program
multiply(add(3, 4));
> 28

> multiply(add(3, 4));
28

10. Closure:

Closure gives you access to an outer functions scope from inner function.

function outer() {
    const name = 'test';
    function inner() {
     // 'name' from outer function is accessible inside inner function
     console.log(name);
    }
    inner();
}
outer();

> test

function outerAdd(x) {
    return function(y) {
        return x + y;
    };
}

const outer12 = outerAdd(12); // x as 12.
const outer14 = outerAdd(14); // x as 14.

const outer12Result = outer12(12); // y as 12.
console.log(outer12Result);
> 24

const outer14Result = outer14(14); // y as 14.
console.log(outer14Result);
> 28

Alternatively, you can use arrow functions as well like below.

outerAdd = x => y => x + y;

const outer12 = outerAdd(12);
const outer14 = outerAdd(14);

const outer12Result = outer12(12);
console.log(outer12Result);
> 24

const outer14Result = outer14(14);
console.log(outer14Result);
> 28

Counter example using closure:

function outer() {
    let counter = 0;
    return function inner() {
        counter += 1;
        return counter;
    }
}
const out = outer();

console.log(out());
console.log(out());
console.log(out());

> 1
> 2
> 3

11. Recursion:

Recursion is a programming technique in which a function calls itself to solve a problem.

Example:

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5));  // Output: 120 (5 * 4 * 3 * 2 * 1)
console.log(factorial(0));  // Output: 1 (by definition)

In this example, the factorial function calculates the factorial of a given number n. It uses the base cases of n === 0 and n === 1, where the factorial is defined to be 1. For any other value of n, the function recursively calls itself with n - 1 and multiplies the result by n.

When you call factorial(5), the sequence of recursive calls looks like this:

factorial(5)
  -> 5 * factorial(4)
       -> 4 * factorial(3)
            -> 3 * factorial(2)
                 -> 2 * factorial(1)
                      -> 1
                 <- 2 * 1 = 2
            <- 3 * 2 = 6
       <- 4 * 6 = 24
  <- 5 * 24 = 120

please do comment any examples on any concept.

Thanks.
urstrulyvishwak

The Art of Debugging: Mastering JavaScript Troubleshooting

Kurapati Mahesh — Sat, 12 Aug 2023 08:04:16 +0000

Debugging - The process of identifying errors in programming code is called debugging.

Debugging is inevitable when you start writing the code. It is the very much next act for the line of code you write.

Until you get the expected behavior what you are actually doing is coding & debugging. Hence knowing different debugging techniques is very much important.

Javascript is the underlying language for all front-end libraries and knowing how to debug is very much useful.

There are three main types of errors that occur while coding in javascript. Those are:

Syntax Errors: These are the mistakes in source code like spelling mistakes, punctuations, incorrect labels, which can cause error messages generated at compile time.

Most of these are visible in your IDE and we can easily correct and resolve them.

Runtime Errors: Occurs during the runtime of the program after being interpreted by the compiler.

Before compilation, there is no error but while running it has thrown an error.

Logical Errors: Program executes successfully but generates unintended results.

You intended to compare but you assigned. Hence first became 20.

Ok.

Without the knowledge of errors, there is no point in discussing debugging. Hence that part is over and let's start debugging now.

Syntax errors can be resolved upfront as such no techniques are needed. Run-time errors are usually logged in browser console with very much possible stack trace and can be resolved easily.

The tricky part is logical errors where we are really required to apply debugging techniques.

1. console.log

The primary technique is to log the result of your logic to see whether the result is intended or not. This will log to your browser console.

Follow the below steps to open the browser developer tools (which includes console) in the browser:

example:

<html>

<body>
    <p id="arr">
    </p>
    <script>
        const arr = [1, 2, 3, 4, 5];
        arr.push(6);

        // Print in console to validate.
        console.log(arr);
        document.getElementById('arr').innerHTML = arr;
    </script>
</body>

</html>

The above one is a simple example though whenever you see that your result is not intended you can log and verify in the same way. Ensure to remove console log statements once you resolve the issue from code.

2. debugger;

It is a keyword that is used to stop the execution of javascript and calls the debugging function. You can use browser debugging options to validate the result. This also works only when you restart the application by opening browser developer tools.

<html>

<body>
    <p id="arr">
    </p>
    <script>
        const arr = [1, 2, 3, 4, 5];
        arr.push(6);

        // stops execution at below line.
        debugger;
        document.getElementById('arr').innerHTML = arr;
    </script>
</body>

</html>

3. Browser Debugging Options

Same as debugger;, browser breakpoint also stops execution and lets you walk through each line of code to validate the result.

Open developer tools -> Navigate to sources -> Click on left nav on line numbers to add breakpoint -> reload the application

4. Use Sources tab
There might be situations where you want to verify some code snippet even while debugging the main application code.

Open developer options -> Go to Sources tab -> Click on New Snippet in left nav -> new file added in mid pannel -> write another program -> Click enter to run program.

5. Device Mode in browser

You can also verify how your UI looks in different devices in UI. Not technically a debugging code but if you are setting elements based on the resolution using javascript then you can use this feature.

Open developer tools -> Click on the 'Toggle Device Toolbar' option (shown in below screenshot) -> Your application is shown in device -> You can also switch to different devices using the top dropdown.

6. Watch Expressions feature

Watch expression feature in browser developer tools used to instantly validate the JS expression result over time while debugging the code.

See the arr values at breakpoint#8 and breakpoint#9. Over the period arr has been updated.

This watch expression is handier when you are dealing with complex logic.

7. Event Listener Breakpoints
Just below of watch expressions feature there is Event Listener Breakpoints there you can have many actions to use as breakpoints.

Open Mouse triangle and check the 'click` event which lets you stop execution on click.

Not just mouse events, every other interaction with the application is listed there. We can use any event as a breakpoint.

8. Use Debug from console
Manually type debug(function_name) in the console which lets you stop execution wherever the function executes.

Reload the page and observe that execution stopped at the mentioned function.

Thank you. Happy debugging.

Git - Is just this.

Kurapati Mahesh — Fri, 02 Jun 2023 10:51:31 +0000

First install Git. Google will tell you that.

Clone the project that you want to work on using command:

git clone <project_url>

It is recommended to create new branch before you start coding:

git checkout -b <branch_name>

Question 1: My colleague created a branch and pushed but couldn't get that in my local. How can I do that?

Use below command to fetch changes from remote.

git fetch

then try checking out to the branch that your colleague shared as

git checkout <branch_name>

You have done some changes and want to push them to your branch then follow below steps:

git add -A // to add all changes called staging
git add <specific_file_name> // to add file by file.

it is an optional - git reset // if you want to avoid pushing any file

git commit -m "<ticket_number><message>" // to commit

git push // to push to your repository.

Question 2: My colleague and I are working on same branch. We are pushing our changes as soon as we are done. How we can manage to not to miss any of our changes while pushing?

Best way: Avoid.
Approach 1: Always pull latest changes from branch (which have been pushed by your colleague) and resolve any conflicts and push all of your changes.

Question 3: I did couple of changes but I don't want to push them as of now for some reason but need these details to be present somewhere. How can I achieve it?

Best Way: Push your changes to separate branch and remember that branch name.
Approach 1: You can use stashing feature of git to temporarily stash the changes and apply whenever required.
Below commands are useful for same purpose:

git stash // whatever changes you did so far are stashed.

git stash apply // to apply stashed changes whenever you need.

git stash apply stash@{1} // to apply first record of stash.

stash stores all the stashed files like a stack. By default 0th item is applied as soon as you hit git stash apply but if you want specific record of stash then specify that number and apply like shown above.

I stashed some changes and forgot what changes I did then how can see them without applying those changes.
You can use below command:

git stash show // shows the list of changed files from recent stash

git stash show -p // shows changes in files

**Question 4: **What are all possible push rejections?

You remote branch has new changes that your local doesn't have that means your colleague has pushed few changes to your branch.

so, as mentioned - pull his changes first and then apply changes and push all changes together.

You might not have permission to push. Check admin to get access.

Question 5: I want specific changes of one commit of some other branch in my current branch. How Can I achieve that?
Using cherry-pick as:

git cherry-pick <commit_id>

Question 6: How can I merge my changes with master branch before creating pull request(PR)?

Several ways are there:

git pull origin master

git merge master

git rebase master

Resolve any merge conflicts and push. Done.

There were several other features that git provides. Just read carefully the error or exception you see while using git. Search the same error in Google. Done.

I covered mostly used commands in this article and is pretty much enough to do day to day activities of Dev.

Please do comment your questions. I am always happy to help.

Thanks.

Promise: any vs race vs all in simple terms

Kurapati Mahesh — Thu, 18 May 2023 13:43:22 +0000

In short:

Promise.all: Returns all resolved values or first rejected.

Promise.any: Returns first resolved or aggregated all errors

Promise.race: Returns first resolved or rejected

Example1:

const promise1 = Promise.resolve("Hello");
const promise2 = Promise.resolve("World");
const promise3 = Promise.resolve("!");

Promise.all([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Success:Hello,World,!

Promise.any([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Success:Hello

Promise.race([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Success:Hello

Example2:

const promise1 = Promise.resolve("Hello");
const promise2 = Promise.resolve("World");
const promise3 = Promise.reject("!");

Promise.all([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Error:!

Promise.any([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Success:Hello

Promise.race([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Success:Hello

Example3:

const promise1 = Promise.reject("Hello");
const promise2 = Promise.resolve("World");
const promise3 = Promise.resolve("!");

Promise.all([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Error:Hello

Promise.any([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Success:World

Promise.race([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Error:Hello

Example4:

const promise1 = Promise.reject("Hello");
const promise2 = Promise.reject("World");
const promise3 = Promise.reject("!");

Promise.all([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Error:Hello

Promise.any([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Error:AggregateError: All promises were rejected

Promise.race([promise1, promise2, promise3])
  .then((results) => console.log("Success:" + results))
  .catch((error) => console.log("Error:" + error));

> Error:Hello

Please do add any more scenarios you came across.

Thanks.

Why transform:translate(-50%, -50%) to center element?

Kurapati Mahesh — Sun, 01 Jan 2023 13:48:34 +0000

Centering div or any element is the mostly asked question in CSS interviews. I am not going to write what are the different ways to achieve this. But, While I was doing this I observed that transform:translateY(-50%, -50%) is used. I was little curious and wanted to know what it is actually doing.

Here is what I observed:

centering any element includes parent and child elements where child element is centered w.r.t parent.


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

.parent {
    position: relative;
    border: 1px solid green;
    display: inline-block;
    padding: 25px;
  }

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

Without transform: translate(-50%, -50%);

Here parent div is circle and the child is number 1.

As we set top and left is 50% for child resulting in placing 50% from parent top and 50% from parent left. It will show like above because starting of child starts after 50%, 50% but to make it center we need to apply transform: translate(-50%, -50%);. This moves the child element back up a distance of half of the height and width. As it will make child element matches exactly to the middle of parent.

After adding transform: translate(-50%, -50%);

Thanks,
Vishwak

CSS Variables end to end

Kurapati Mahesh — Sun, 01 Jan 2023 09:33:08 +0000

-> var() used to insert CSS variables.
-> we can create local and global variables.
-> CSS variables can have access to DOM.
-> We can change variables with javascript.
-> We can change local and global variables based on media queries.
-> Good Example: Creating variables for colors used across application.
-> Syntax: var(--var_name, default_value);
-> variable name must starts with (--) dash dash.
-> Local variables overrides global variables.

Example:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Project</title>
  </head>
  <body>
    <div class="first" id="first">1</div>
    <div class="second" id="second">2</div>
    <script src="script.js"></script>
  </body>
</html>


/* styles.css */

/* Creating Global variable */
:root {
  --blue: lightblue;
  --black: black;
}

.first {
  --color: red; /* local variable */
  border: 4px var(--blue) solid; /* global variable used */
  background-color: var(--black);
  padding: 20px;
  margin: 10px;
  color: var(--color); / * local variable used */
}

.second {
  --blue: blue; / * global variable is overridden by local variable */
  --color: cyan;
  border: 4px var(--blue) solid; /* overridden global variable used */
  background-color: var(--black);
  padding: 20px;
  margin: 10px;
  color: var(--color);
}

@media screen and (max-width: 580px) {
  .first {
    --color: white; /* local variable updated inside media query */
  }
  .second {
    --color: green;
  }
  :root {
    --blue: gray; /* global variable updated inside media query */
  }
}


//script.js

const first = document.getElementById("first");
const second = document.getElementById("second");

first.addEventListener("mouseover", () => {
  let r = document.querySelector(":root");
  r.style.setProperty("--blue", "yellow");
});

second.addEventListener("mouseover", () => {
  let r = document.querySelector(":root");
  r.style.setProperty("--black", "pink");
});

Initial:

Media query: at 580px width

Mouse Over on First:

Mouse Over Second:

Thanks,
Vishwak

Interview: Basic Horizontal Nav Bar

Kurapati Mahesh — Mon, 19 Dec 2022 04:11:26 +0000

It's like this:

Here is the code:

Mostly self explanatory:

<ul class="list">
    <li *ngFor="let item of list">{{item}}</li>
</ul>

.list {
    list-style-type: none;
    margin: 0;
    padding: 10px 0;
    border: 1px solid grey;
    margin: 5px 5px 0 5px;
    > li {
        display: inline;
        padding: 11px;
        border-right: inherit;
        opacity: 0.7;
        &:hover {
            background-color: grey;
            opacity: 1;
        }
    }
}

Thanks,
Vishwak

Simple Search box with icon

Kurapati Mahesh — Sat, 17 Dec 2022 12:28:08 +0000

It's like this:

Here is the code:




<input class="search" type="search" placeholder="Search...">



    input.search {
        width: 260px;
        border: 1px solid #555;
        display: block;
        padding: 9px 4px 9px 40px;
        background: transparent url("/assets/search.svg") no-repeat 13px;
    }

padding top, left, bottom, right - Places placeholder named Search just beside icon inside input.

download svg from any icon store say bootstrap and place inside folder.

background property - color, image, repeat, position - Places search icon in proper place in search box.

Thanks.

U can follow me here: urstrulyvishwak

Angular: Creating Angular Client Library

Kurapati Mahesh — Fri, 18 Nov 2022 15:56:59 +0000

Download and install Node.js

⬇

Open Terminal or Command Prompt and check node version using command node -v

⬇

Now, type in npm install -g @angular/cli to install CLI

⬇

Check CLI version using ng --version

⬇

Create Angular workspace using ng new <app_name>

⬇

app_name consider as libraryApp

⬇

To create library init, use ng g library <library_name>

⬇

library_name consider as myLib

⬇

Inside the projects folder, go to mylib component inside myLib library.

⬇

Design reusable component in it.

⬇

Now, build that library using ng build <library_name>

⬇

Library gets generated in dist folder

Using this library in same application.

Import myLib module in app.module.ts of application

⬇

Access components or services of myLib library inside application and use wherever required in application

⬇

Now, do ng serve to check the application

Using in external application

ng new externalApp - Create new external application

⬇

In the ng build myLib log, dist folder locations are shown

⬇

take lib path and do npm i <path> inside new external application

⬇

Import myLib module in app.module.ts of application

⬇

Access components or services of myLib library inside application and use wherever required in application

⬇

Now, do ng serve to check the application

Typescript: What is the output?

Kurapati Mahesh — Wed, 16 Nov 2022 12:16:03 +0000

Enum with expressions resulting in NaN and Infinity.

What is the output and also mention your typescript version?

Thanks.

You can follow me here: twitter

All about Enum in Typescript

Kurapati Mahesh — Tue, 15 Nov 2022 15:51:10 +0000

Enums are used to define named constants in Typescript. It's the typescripts own feature which is not a type level extension of javascript. It is defined using enum keyword.

Typescript has three types of enums:

Namely,

Numeric Enums
String Enums
Heterogeneous Enums

Numeric Enums.

enum Numeric {
    First,
    Second,
    Third,
    Fourth
}
console.log(Numeric.Second); // 1

A numeric enum's first member is not initialized then it starts from 0 and Second becomes 1.

enum Numeric {
    First = 1,
    Second,
    Third,
    Fourth
}
console.log(Numeric.Second); // 2

Numeric enum is now initialized with 1 hence starts from 1 and Second becomes 2.

String Enums

An enum which is initialized with string literal is called String enum.

enum StringEnum {
    A = "a",
    B = "b",
    C = "c",
    D = "d",
}

Heterogeneous enums

Mix of numeric and string enums.

enum HeterogeneousEnum {
    No = 0,
    Yes = 'YES'
}

Duplicate Identifier is not allowed in Enum.

Using an enum

i. Access any member as the property of enum itself.

console.log(Numeric.Second); // 1

ii. Declare types using the name of the enum.

(function myFunc(word, number: Numeric) {
    console.log(word + ' ' + direction);
})('word', Numeric.Second);
// word 1

Enum without initializers need to be first.

function getConstantValue() {
    return 1;
}

enum Numeric {
    first,
    second = getConstantValue(),
}
// first & second shouldn't be upside down.

Enums without initializers should come after initialized enums with numeric constants or other enum constants.like below:

enum Numeric {
    first = 2,
    second = A,
    third
}

But not like below.

enum Numeric {
     first = 2,
     second = getConstantValue(), 
     third
 }

Each enum member has a value associated with it which can be either constant or computed.

enum constNComputeEnum {
    first = 1,
    second = first, // reference to previously defined constant enum member.
    third = (1 + 2), // parenthesized constant enum expression,
    fourth = +true, // Unary operator applied.
    fifth = 1 & 2 // binary operator applied.
}

In All other cases enum member considered computed.
Computed values are not permitted in an enum with string valued members.
like below:

enum constNComputeEnum {
     first = 1,
     second = 'second',
     third = constNComputeEnum.first, // not allowed
 }

It is a compile time error for constant enum expressions to be evaluated to NaN or Infinity.

Ideally, below is not accepted but somehow not throwing any error. I checked with latest typescript and is not throwing any error.

enum NaNNInfinity {
    first = 0 / 0, // Result in NaN
    second = 1 / 0, // Result in Infinity
}

Reverse Mapping

Numeric enum members can get a reverse mapping from enum values to enum names.

enum reverseMappingEnum {
    first
}

const firstItem = reverseMappingEnum.first;
console.log(reverseMappingEnum[firstItem]); // first

const enums.

To avoid generating extra js code we can declare any enum as const. These are completely removed after compilation and can't have computed members.
It is recommended to not use const enums at all.

const enum constEnum {
    first
}

Compile above and check its corresponding js file and you find nothing.

Ambient Enums

Regular Enums: Member that doesn't have initializer will be considered const if its preceding enum member considered const.
Ambient Enums: Member that doesn't have initializer will be considered as computed.

enum AmbientEnum {
    first = 1,
    second,
    third = 2,
}

Object vs Enums

Typescript Enum exactly equal to object with as const.

const enum Numeric {
    first,
    second,
    third,
    fourth,
  }

  const Numeric = {
    first: 0,
    second: 1,
    third: 2,
    fourth: 3,
  } as const;

Literal Enum

A literal enum member is a constant enum member with no initialized value, or with values that are initialized to

any string literal (e.g. "first", "second")
any numeric literal (e.g. 1 to 100)
a unary minus applied to any numeric literal (e.g. -2, -4)

Enum members also become types as well!

enum Numeric {
    thirty,
    forty,
  }

  interface Person {
    age: Numeric.thirty;
    id: number
  }

  let c: thirty = {
    age: Numeric.forty,
    id: 100,
  };

Shows compilation error as: Type 'Numeric.forty' is not assignable to type 'Numeric.thirty'.

Enum types themselves effectively become a union of each enum member.

  enum Numeric {
    first,
    second,
  }

  function myFunc(type: Numeric) {
    if (type !== Numeric.first || type !== Numeric.second) {
    }
  }

Shows compilation error as: This condition will always return 'true' since the types 'Numeric.first' and 'Numeric.second' have no overlap.

Role of CSS in form validation

Kurapati Mahesh — Fri, 11 Nov 2022 18:33:08 +0000

:valid selector - selects elements with a value that validates as per the element settings

:invalid selector - selects elements with a value that won't validates as per the element settings

Both works on form input elements like

Input elements with min & max are applied
Email type input with legal email
Number fields with numeric value etc.

<style>
    * {
        box-sizing: border-box;
    }

    .html-validation {
        margin: auto;
        width: 30%;
        border: 1px solid green;
        box-shadow: 5px 5px 8px green;
        border-radius: 5px;
        padding: 20px;
    }

    label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        text-align: center;
    }

    input {
        width: 100%;
        padding: 10px;
        margin: 10px 0px;
        border-radius: 10px;
    }

    input:invalid {
        border: 1px solid red;
    }

    input:valid {
        border: 1px solid green;
    }

</style>
<form class="html-validation" action="#0" method="post">
        <label for="firstName">First Name</label>
        <input name="firstName" type="text" required>
        <input type="submit">
</form>

Styles are applied as soon as the input becomes valid or invalid.

There are few other CSS selectors which does similar kind of work are:

:optional - Selects all non-required elements in form and if we apply styles using this selector then applied to all optional elements in the form.

:required - Opposite to optional and selects all required elements in the form.

:in-range - selects elements with value specified is within the range - mostly applicable for input elements with max and min specified.

:out-of-range - Opposite to in-range.

:readonly - selects elements which are specified with readonly attribute

:read-write - selects elements which are readable and writable. As such not mentioned as disabled and readonly.

:checked - Selects all checked elements. Checkboxes and radio buttons, options.

:hover - selects any element when user hovers over it

:visited - applicable for links when user clicked and visited it.

:active - selects when user selected it.

:disabled - selects all elements with attribute mentioned as disabled

:focus - Selects focused element

:empty - selects elements with no children