DEV Community: Midhun

Function Currying In Javascript Get it simple 🍲

Midhun — Mon, 24 Jan 2022 14:07:04 +0000

Hai what is function Currying , Curried Functions 😳 ya ... it's sound like spicy 💁 ,there are actually some useful .

oke .. We will start from the basics what are functions

Function is something they simply take input from one side processes inside give output from another side

                input ->([processes])-> Output

Consider a simple function add two number

let add = (x,y)=>x+y
console.log(add(1,2))

3

Let's curve the function add()

Using currying, a function is transformed from being callable as f(a, b, c) to being callable as f(a)(b)(c).

Is it correct that add(x,y) should be transformed into add(x)(y)? 🥸

Yes 👍 Currying is when you break down a function that takes multiple arguments into a series of functions that each take only one argument.

Lets Code ..

function curry(f) { // curry(f) does the currying transform
  return function(x) {
    return function(y) {
      return f(x, y);
    };
  };
}

function add(x,y){
return x+y;
}

let curriedAdd=curry(add)

console.log(curriedAdd(1)(2))

3

😳 why it called Curried
Maybe fist method you added some salt second one added some spice third some water .. 😂 ya it helps to call a method as multiple parts like

let c =curriedAdd(5)
c(3)
8

You can see that the implementation is straightforward: it's just two wrappers.

The result of curry(func) is a wrapper function(x)
When it is called like curriedSum(1), the argument is saved in the Lexical Environment, and a new wrapper is returned function(y).
The wrapper is then called with 2 as an argument, and it passes the call to the original sum.

Uses of currying function
a) It helps to avoid passing same variable again and again.
b) It is extremely useful in event handling.

9 Useful JavaScript Array Tips and Tricks You Should Know

Midhun — Sun, 23 Jan 2022 15:10:42 +0000

There are several very basic tips about Javascript arrays that will help you improve your Javascript skills. Now let's do a little coding...

1.Reverse an Array

let name = ['Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Carl']
reversed = [...name].reverse()]
console.log(reversed)
['Carl', 'Jenny', 'Adam', 'Nancy', 'Matt', 'Mike']

2.Sort Array

var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
uniq = [...new Set(names)];
console.log(uniq)
['Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Carl']

//method 2

let uniqueArray = names.filter(function(item, pos) {
    return names.indexOf(item) == pos;
})

console.log(uniqueArray)

['Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Carl']

3.Get random value

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();


//Method 2 
let a =[ { firstName: 'John', age: 27 }, { firstName: 'Ana', age: 25 }, { firstName: 'Zion', age: 30 } ];

a.sort((a, b) => {
    return a.age - b.age;
});

4.Intersection,Union,Difference of two arrays

arrA=[1,3,4,5]
arrB=[1,2,5,6,7]
let intersection = arrA.filter(x => arrB.includes(x));
console.log(intersection)
[1, 5]

Union

let union = [new Set([...arrA, ...arrB])]
console.log(Array.from(union[0]));
[1, 3, 4, 5, 2, 6, 7]

Difference

let difference = arrA.filter(x => !arrB.includes(x));
console.log(difference);
[3, 4]

5.Merge Arrays

let fruits = ['banana','mango','apple']
let veggies = ['tomato','potato','onion']
let food = [...fruits,...veggies]
console.log(food)
['banana', 'mango', 'apple', 'tomato', 'potato', 'onion']

6.Fill array with data

var newArray = new Array(10).fill('data');
console.log(newArray)
['data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data']

//Method 2

var newArray = Array.from(Array(10), () => 0 );
console.log(filledArray)
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

7.Empty an array

food =['banana', 'mango', 'apple', 'tomato', 'potato', 'onion']

//Method 1
food.length=0

//Method 2
food = [];

//Method 3

while (food.length) { food.pop(); }

console.log(food)
[]

8.Get random value

var items = [25, 45, 21, 65, 43];
v=items[Math.floor(Math.random()*items.length)];
console.log(v)

9.Convert array to an object

var arr = ["One", "Two", 3];
var obj = {...arr};
console.log(obj);
{0: 'One', 1: 'Two', 2: 3}

//second way

Object.assign({}, ['a','b','c']);
console.log(obj);
{0: 'a', 1: 'b', 2: 'c'}

Is 'metaverse' the future? WHAT DO YOU THINK?

Midhun — Wed, 19 Jan 2022 10:19:40 +0000

Facebook (FB), Microsoft (MSFT) and Nvidia (NVDA) are promoting the "metaverse" as the next-generation way that people will interact online. Can the concept really leap off the pages of science fiction or is it just marketing hype?

Simple web scraper that reads all the links to JSON files in JS

Midhun — Mon, 17 Jan 2022 15:10:35 +0000

I had to get a list of all links on a webpage for a task I was working on. here I am sharing the snippet of code that I used. Let's discuss how to improve it

var tag = document.querySelectorAll("a");
var myarray = []
for (var i = 0; i < tag.length; i++) {
    var nametext = tag[i].textContent;
    var cleantext = nametext.replace(/\s+/g, ' ').trim();
    var cleanlink = tag[i].href;
    myarray.push([cleantext, cleanlink]);
};
function generateJson() {
    var hrefArray = [];
    for (var i = 0; i < myarray.length; i++) {
        let t = {}
        t.n = myarray[i][0]; t.m = myarray[i][1];
        hrefArray.push(t);
    };
    var win = window.open("Json");
    win.document.write(JSON.stringify(hrefArray));
}
generateJson()

Steps

You will need to open the website in your browser to get all links
Go to the console tab in Inspect element
Please paste the above code and press enter. A json file will open in a new window

Screenshots

How to Run

Result

Please let me know your thoughts after reading

Here's how I made a simple Chrome extension for Gmail notifications

Midhun — Sun, 16 Jan 2022 06:23:23 +0000

Blue Bell Gmail™ notification tool

I was searching for a simple extension that would allow me to quickly view new e-mails received. I found some of the greatest extensions. But what impressed me the most is their ability to show my Gmail without asking for my password explicitly. Honestly, this was a real shock to me.

These extensions can display my email without even asking for my password, which made me both fearful and curious. I eventually ended up at Gmail's feed API.

Gmail Inbox Feed

The Gmail Inbox Feed will output your Inbox as an XML document. You can use an RSS aggregator to view this, or you can consume the feed with your own app.

GET https://mail.google.com/mail/feed/atom

Solution

A feed atom API call returns unread emails and total unread emails in an inbox that is logged in.
In order to show an unread email when it is opened, the extension will call api and display it in the proper format
Unread email listeners must notify. It is necessary to have a background script when we want to run anything in the background for an extension.
In that case, the feed API is read every minute if there is an unread email update extension badge with a count.

Permission Required

"content_scripts": [ { "matches": ["*://mail.google.com/*"], "js": ["contentScript.bundle.js"] } ]

Demo 🚀

Feel free to contribute on GitHub

Please comment on your ideas and thoughts, Geeks

Here's how I made a simple Chrome Extension to close all open tabs

Midhun — Sat, 15 Jan 2022 20:02:19 +0000

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.
Chrome Extensions are fairly easy to create, and they can really enhance your browser’s capabilities and solve repetitive tasks.

Demo 🚀

Architecture overview

popup.
Extension UI pages
background.js
The background script is the extension’s event handler; it contains listeners for browser events that are important to the extension
contentscript.js
Extensions that read or write to web pages utilize a content script
Let’s build your Chrome extension now.
Let’s make a Chrome extension to quickly close all open tabs and open a brand new one. It will take less than 10 lines of code.

By clicking the extension icon, we close all open tabs. When you click on the extension, the application should read all open tabs and remove them as well as create a new tab.
We do not need any user interface for this example, and we are not changing or reading from user browser tabs. Therefore, there is no requirement for a content script for a chrome extension. We simply listen for clicks on the extension icon. For this, we need a background.js file.

Source Github.

Step 1:

Create A New Directory

Open terminal, make a new directory called “close-all-tabs” and open your favorite text editor.

mkdir close-all-tabs

In order for Chrome to load your plugin, the extension files need to be pointed to a folder on your computer. In this directory, you can add all of the files you need for your extension.

Step 2
Create a file called manifest.json in the newly created folder.
The manifest.json file contains information about the extension. It is written in JSON format.V3 is used in this example
You can read more about what it contains in Google Chrome developer documentation: Manifest File Format

{ "manifest_version": 3, "name": "Close All Tabs", "description": "Close all open tabs and create an empty tab", "version": "0.0.1", "icons": { "48": "icons/48.png", "128": "icons/128.png" }, "background": { "service_worker": "background.js" }, "action": {} }

Step 3
Create a background.js
it contains listeners for browser events that are important to the extension. It lies dormant until an event is fired then performs the instructed logic. An effective background script is only loaded when it is needed and unloaded when it goes idle.

// toolbar button event listener chrome.action.onClicked.addListener(function (thisTab) { chrome.tabs.create({}, function (newTab) { let querying = chrome.tabs.query({}, function (tabs) { for (let tab of tabs) { if (tab.id !== newTab.id) chrome.tabs.remove(tab.id); } }); }); });

Step 4
Create a folder called icons and keep our extension icon in 3 different sizes in it
manifest.json

"icons": { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" },

Step 5
Load Extention to chrome

1. Go to chrome://extensions in your browser
To enable Developer mode, check the box in the top right-hand corner, as shown above:
To load an unpacked extension, click Load unpacked extension to bring up the file selection dialog.
The extension will be loaded and active as soon as it is valid! A message will appear at the top of the page if it is invalid. Please correct the error and try again.

It’s now time to test our chrome extension

Pin Extension to browser
Open multiples tabs
Click on the extension

Feel free to contribute on GitHub
close-all-tabs

More resources
Google official starter guide — build a browse action chrome extension
Chrome Platform API Reference
Chrome Extension Architectural Overview