DEV Community: Pravin Poudel

I joined Behance being not a designer and why you should also?

Pravin Poudel — Fri, 31 Jul 2020 04:16:38 +0000

I joined Behance the day before yesterday. I am happy that I did what I was procrastinating from long days not only long days but also long months.

This is my profile on Behance:

and this is a link to my first post:

https://www.behance.net/gallery/101550015/Personal-Website-Design

I started my career as a web designer for a month and jumped to web development but designing always interests me.

This is not an article about me but about us on why we should join Behance. I know I am not a designer but I definitely make a thing and it is a great way to showcase what I am doing and a pushing factor for me to do things look great.

In addition, make an account and be active in codepen also, post things that you make, or thing that you learn.

Even you don't have anything to post, just, make an account and enable newsletter from that site so that you keep a reminder that you have something on the list to do.

Presenting things make you exposed to the real world and don't worry if you think you are not good enough. Don't worry no one is good enough here, everyone is on the journey here. It is not a good thing only to show your best skill. People love to know your learning journey. This is a great character where a person can learn new things that people often fail to present.

Another advantage of this platform is an interaction where you can get and share your feedback. This is the best way to grow.

We consider learning as an only important aspect of our growth but what I believe is networking is equally important. With networking and exposure, you can go to the limit that only learning may not push you.

There are so many reasons but don't just search for the reason just join it. There are other great spaces like dribble. Look for your convenient option and jump over.

And last but not the least, don't indulge in it with the expectation of followers rather indulge just to present your self. That's the healthy way.

What makes you stop from joining it or if you have already joined what motivated you to join and what is the energy that you brew every day for this?
Remember that this is a good time for starting every good thing in life.

10 Interview Questions for Javascript Developer

Pravin Poudel — Sun, 05 Apr 2020 17:17:42 +0000

This post is on 10 questions for junior developers out there and for those who are looking for or having an interview.

I also have a few articles in detail for an interview on my new Website and Follow me on twitter where i will be posting cool and short programming codes on this quarantine.
Go and read !!! It's always good to learn !!!

https://www.icodeeveryday.com/

Let's Start:

1) How to copy or clone an array?

In the old way, we can copy an array with slice().

const newaaray= oldarray.slice();

In a new way i.e after ES6, we can copy array with the spread operator

        Const newarray = [...sheeps];

2)Why can’t we use = to copy an array like (new_variable = existing_array) ?

Because an array are reference value in javascript. When we write newarray = oldarray, we don’t create new array rather it's reference that point to the same memory location.

3)How do you check if a number is of number type or not in JS?

if(typeof variable === ‘number’ && !isNaN(variable))

Remember that typeof variable ==='number' doesn't guarantee that variable is number because typeof NaN is also a number.

4) What is the output of +‘12’?

The result is number 12 of type number because the unary operator tries to convert all strings, boolean and null to number.

More example,

+‘-3’ gives -3
+’0xFF’  gives output 255
+‘false’  gives 0
+‘Infinity’ gives Infinity
+’infinity’ gives NaN
+’function’ gives NaN

It's also similar to unary + operator

-‘-5’ gives 5
-true gives -1

If the interviewer is freak, the output of code below can be asked:
What does this return

!!hello == true

Answer is true

5)What is the output ?

   var x=9;
   x= x++;
  console.log(x);

Answer is 9

6) Different ways to copy an object into another?

copy mainobj object into copyobj

let copyobj= Object.assign({}, mainobj);

but:this is also a shallow copy.
I don't know if there is another way, for deep copying or cloning i use stringify.

let newObj = JSON.parse(JSON.stringify(obj));

8) Write a code to format the array1 into array2

array1 = [
        {Key:"name", value:"Pravin"},
        {key:"age", value:26},
        {key:"address", value:"Nepal"}
]

and get an output as:

array2 = [
        {name:"Pravin"},
        {age:26},
        {address:"Nepal"}
]

There are a lot of ways to this. I am going to use map() to this array.

let array1 = [
        {key:"name", value:"Pravin"},
        {key:"age", value:26},
        {key:"address", value:"Nepal"}
];

let array2 = array1.map(elem=>{
let temp_obj = {};
temp_obj[elem.key] =elem.value;
return temp_obj;
});

console.log(array2);

9)Create a function filtername with the first parameter array and second parameter search query.

name =[‘Tommy’, ‘Romanu’, Pravin’, ‘Omar'];
filtername(name, 'om');

condition: It should return an array with element of name which has 'om' in it.
In this output must be ['Tommy', 'Romanu', 'Omar'].

10)How do you clone a JSON object?

My answer is stringify.I don’t know if there is another way.Comment your way of doing.

let old_json = old json ;
Let new = JSON.parse(JSON.stringify(old));

Thanks for reading.
Take Care and Stay Safe. Help others in need.
Bye !!! See you soon :D

Cookies and Third-Party Cookies explained in the detailed and easiest way possible for Interview

Pravin Poudel — Fri, 03 Apr 2020 11:08:04 +0000

Cookies, Local Storage, Session Storage, and Session is a favorite topic for Interviews. It's not possible to include all so this is just about cookies. I will post another article as continuity on these topics.

This is not just an article for front end programming rather it is to understand how the web works.

Many developers have sallow knowledge of cookies in general and more importantly third parties cookies which is responsible for all these ads that appear on sites.

Before anything, the only thing that you need to know in order to understand this is that “HTTP protocol which we use to browser internet is stateless”. what this means is that every request is treated and executed independently without knowledge of previous requests executed. Let me try it again in another way, the reason for calling it stateless is that when the transaction between your computer and server ends, the connection between your browser and server also ends.

For example- Suppose you logged into Facebook.

When you enter the username and password and pressed the login button, your browser sends your credentials to the server which verifies you and sends the requested page.

Now, when you make another request to that same server, it has forgotten who are you and asks you again to log in because the HTTP request is stateless. Like I said earlier, it doesn’t remember the last transaction and doesn’t know who are you. Can you imagine how pathetic that can be to log in every time when you click on something on Facebook?

HERE COMES COOKIES TO RESCUE US!!!!

So what are cookies?

A cookie is just a small file containing helpful information about you and your preferences on that website. Here, when you send login credentials to server clicking log in button server not only response with requested content to you rather also sends a cookie to your browser. The cookie is then stored on your computer and submitted to the server with every request you make to the website. A cookie is not only just for login. Let’s illustrate this with another example: You selected a language Spanish on a website. A website will then save your language preference in a small document i.e cookie on browser or computer.

Each time you revisit that same website, your browser sends that cookie along with the web request. On the internet, every request is an independent request to a server. When you revisit that website, the website will read the cookie and send the requested page as per your reference which can be stated in another way that the website remembers your language and let you view the website in Spanish without having you to select the language Spanish again. A cookie is not limited to this, the cookie can store diverse information like the number of times you visited the website, preferred layout to the website, item in your carts, links you clicked on the website. What is saved on the cookie is up to the creator of the website you are visiting.

Another thing that should be known for sure that there are limits to who can read the cookies.

Cookie for one website can’t be read by another website. For example, the language preference you made on the website earlier cannot be known and read by another website that you open in your browser. Only the website that saves the information in the cookie can read or access it. Initially, cookie became so popular to store so much variety of data as it could help the developer to show a website that better suits the need of the users.

With more additional information in the cookie, the size became a big issue so the developer came with an easy solution to store id(identifier) in your cookie and store other information in the server instead. This way website could store an unlimited amount of information or data in the server. Now the cookie will serve as an identifier to your computer. The website sees your computer as a tag and looks up your data on the site or server rather than on your computer. So, a cookie will typically contain the name of the domain from which the cookie has come, the “lifetime” of the cookie, and a value, usually a randomly generated unique number.

This was the breakthrough to the Third-party Cookie

summary of what i said till now:
A cookie can have a simple function like remembering login detail for the specific website so that you can go out and re-enter without login. A common use of the cookie is to store the session id when you log in to a site. Cookie is put on your computer by the site when you first visit it. Then with every click that you make on the site, a cookie with session-id is sent back to the site from your computer and the site uses that to confirm that you are 'logged in'.

The cookie also allows the website owner to track site visitor count because each cookie has a unique id. So, each item you visit the website multiple times in a day, it is counted only once. So, the website owner can count an exact number of website visits data because of cookies.

In the image above a cookie is with id 2976814251 is created in the first visit with the website and when you later visit the website again

Third party Cookies

Now you are here mean you already know that cookie is meant to improve your experience online from the above content. Basically, there are two types of cookies: the first party and the third party (there is also a 2nd party but this is not talked much). There is a difference between first party and third party cookies. At the basic technical level they are both the same i.e they can do the same thing, carry the same kind of information and are intended to perform some kind of function but what they differ is in their application.

A third-party cookie is a non-domain created usually placed by the advertiser for advertising goals so that they can retarget you based on your behavior online i.e those irritating ads that follow you all around the internet. Third-party is a one that contributes some content to the web page like an image that is not located on the same website you are visiting. Third

There are many restrictions on the usage of cookies. Most browsers restrict the number of cookies to 300 and they cannot contain a lot of data which is generally 4096 bytes. The biggest restriction is that cookies set by one website cannot be accessed by another website i.e it is scoped to a domain name.

If cookie set by one website cannot be accessed by another website, how can facebook keep track of what site we visit?

I have seen many developers and interview candidates have no clue of this:

- " Company use Cookies to Track us around the Internet "

Remember that when you visit a website you don’t get the whole web content all at a once. Your browser makes a separate request for each image or anything else embedded in the website. So any request going to the third party may get your cookies from those third parties.

When you go to Amazon.com to shop, Amazon pages refer to DoubleClick.net which is the third party. So, when you load a page from Amazon.com, your browser sees the reference on that page to something on another domain and sends the request. You get back the ads and cookies from DoubleClick.net. Now, let’s say you are searching for information on certain disease condition and you end up visiting a site called diseaseCHECK.com (am just making this name of the website), and they also use a DoubleClick.net, so you get a webpage from diseaseCHECK. Your browser again requests the ads content from DoubleClick sending back the exact cookie that you used while shopping in amazon earlier. If that cookie uniquely identifies you, it nows knows about your disease conditions and your shopping habits.

Third-party cookies can link all that web browsing activity together.
DoubleClick is a subsidy of Google. DoubleClick is used by sites all over the net like youtube, OverStock.com, etc (i am just saying :P).

I am going to giving you another example of a third-party cookie but this time it's more common than DoubleClick.

Suppose you logged into Facebook, it is obvious now that your computer will get cookies from Facebook which will be stored in your computer hard disk. The cookie is bound to Facebook's domain (facebook.com) which means facebook.com can only read what is in that cookie. Let's say you browse away and land into another page. The blog cannot read the Facebook cookie because it is out of the blog's scope. Facebook also can't know that you are in this blog. Let's say that owner of this blog has put Facebook like button in this blog. To render/show like button and make work, the blog should download some code from Facebook servers. Now when it's talking with Facebook, it sends the cookie that Facebook set earlier on your computer. Now Facebook knows who you are and that you visited this blog.

I gave you an example of Amazon and Facebook on how they track us over the internet. This is just two cases, many companies track us on the internet with these techniques.

The logic is simple, to do this convince as many websites to put a piece of your code that makes to connect you. Facebook and other social media have this easy because many websites prefer linkage with them like Facebook like button, share button, etc. Google has an easy job on this because many websites rely on google for advertisement or google analytics.

If you think one website has just one first-party and at max one third party cookie, please have a look at this image above. Visit link https://webcookies.org/ to check more. These lists are the number of third party cookies that are being delivered by sites. Some are sending 140 on this list. This is just a sample list of websites, there are many sites that have set more than that third party cookies. But this means nothing more than that site can link to multiple third-party domains. The site you visit may have more or less than these.

This is an example and I want you to visualize that I said above.
This is the case of dictionary.com.

You can see that dictionary.com itself has 25 third party domain which you don’t know where they are coming from.

Event Bubbling and Capturing explained in the detailed and easiest way possible for Interview

Pravin Poudel — Thu, 26 Mar 2020 13:01:12 +0000

There are a lot of questions and trouble about event handling that new web developers fall into not because they don't know about event handling rather they don't understand how it actually works.

In an interview, it is like a drink in a party that everyone wants to taste. The interviewer just loves it.

This is part 2 of the Javascript interview preparation.

Today, we are going to talk about event bubbling and capturing in javascript and how browser acts so that you can answer the question on the basis of what you learned from here.

Let's Start:

EVENT HANDLER:

Event handlers are the block of codes that are executed in response to the event whenever they occur. You are here mean you already know that Javascript is an event-driven language. This is because after the webpage has loaded the Javascript continues to run waiting for an event. In javascript, the flow of the program is determined by events such as user actions.

Event Handler is assigned as an attribute of the element to which the javascript code is expected to execute. The general syntax is:

example:

<button onclick="getElementById('root').innerHTML ='button clicked'">Click Here</button>

we can also call a function that performs this task.

<button onclick="changetext()">Click Here</button>

<script>
  function changeText(){
     var element = getElementById('root');
     element.innerHTML = 'button clicked';
  }
</script>

List of events and event-handlers that listen to that event.

EVENT PROPAGATION:
It's ubiquitously known thing that elements on a web browser are nested. Event fired on an element will not stop on that element rather it propagates in the tree. Event Propagation is the process of calling all event listeners in a tree attached to that node.
Event Target- Event target is the element where the event happened.
On another note-You may have also come across currentTarget anywhere don't get confused with this. The current target is different than Event target.
We will discuss it later.

Event Propagation occurs in three processes or phases. First is Capture, Second is the event target and the last one is bubbling.
Event Capturing:
The event is first Captured by outer elements and then propagated to inner elements. Capturing is also called as a trickle.

Event target: In this, related event attached to that node is triggered. Each listener will be called with the event objects that gather information relevant to the event.

Event Bubbling: The event is first captured and handled by the inner element and then propagated by the outer elements (from the inner element to all the way up to the body).

There is a popular phrase 'trickle down bubble up'.

Note: JQUERY does not have an option for capturing.

Branch determination is static, which means the branch is established at the initial dispatch of the event. Any modification in the DOM tree while event processing will be ignored.

Summary till now:
It is no doubt that propagation is bidirectional with three-phase i.e
capture phase <-> Target Phase <->Bubble Phase
It occurs with stage one after another.

Please take the time and try to understand what I said looking through the image below.

Note: Image is taken from google: Image source

Here, the event order is of two types- one is in red and others are in blue and green respectively. The number inside the () is to show order. For example, the event capturing process is shown in red color with (1) mean it is performed first in this process. In the image, the red arrow moves all way from top-most dom to inner dom where the event took place or triggered (in our case it is td element) and then phase(2) occurs which is blue color and the last one is event bubbling shown by green place take place which is the exact opposite of Event bubbling.

focus, blur and load and some others don't bubble up. There travel stops after the target phase i.e second phase. During the event bubbling phase, only the non-capturer will be called.

elem.addEventListener(click, function, true); //elem is an element object and function is an event handler function

in this code above the third parameter is for capture. Only capture listeners are called and handled. If it is passed false, event capture is false i.e Capture phase is restricted.

** If the parameter is omitted default value is false. **

We need a proper understanding of this in our daily coding practice.
Let's look through this example:

There is

I have written another demo code leaving the problem above for you. In this code, we have multiple lists and we add another list with add cheese button, please look through the code carefully and try to reason why the newly added list's delete button doesn't delete.

Here you can see the result, here the cheese item is added to the list by clicking Add cheese Button.

When we add the new list HTML element is as same as the existing lists item's HTML.

Though we have attached an event listener with className 'delete' new element is not attached to the event.

What can we do in this? You might have a clue in your mind that why not add an event listener when a new element is created in function(){}? Well, this will not definitely sound engineering solution to the problem compared to the solution that attaches an event listener to the ul rather than li. Since, because of event bubbling the event will be caught by ul element anyhow. This is best for me and I can think of this as a solution not because I have done a lot of this work before but because I can think of a solution with knowledge of event bubbling.

What is the difference between the current target and event target?
The currentTarget is the element that the event listener is attached to. This is 'this' element in the event handling code. The currentTarget is the element that has an event listener. Whereas, event target is the target property of the Event interface which is a reference to the object that dispatched the event. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

summary of the above para is:
target = element that triggered event.

currentTarget = element that has the event listener.

Let's illustrate this with an example.

Code explanation:
function() is an anonymous function that is executed right after it is created.
In JS code line number 3, the event listener for a click is attached to element 1 and the function is passed as the second parameter. When a click event is handled, the result element's text is appended with the event target and the current target. We must be sure from now that though no click event listener is attached with element 2, the event gets bubble up and is handled by click event listener of element 1 since it has an event handler for the click event.

OUTPUT Explained:
When 1 click me is clicked, we get an output as
target: 1
currentTarget: 1

because the event is triggered by div with id 1 and also handled by event listener in the same element i.e 1.

When 2 clicks me as well is clicked we get the output as
target: 2
currentTarget: 1
because here event is triggered in div id 2 but the event is handled by div id 1. Event current target is the element where an event listener for that event is attached whereas the event target is an element where the event is fired i.e 2.

Here, we saw how we can take advantage of event bubbling in the sample code above but event bubbling is trouble sometimes.
For example, there is a table and it has rows with an email and a button with different event handlers. It is intended that when the user clicks on that table user should be redirected to another page but the clicking button shouldn't redirect to the next page. Don't look this as an application rather than a condition. How can you make a button click do nothing since click event on the button bubble up to the table and event listener in the table handle the event of a button which is bubbled up to the table?
To prevent this from happening, we should use stop propagation of the event.

e.stopPropagation()
All the listeners registered on the nodes on the propagation path that follow the current target will not be called.

There is another function that sounds similar:

stopImmediatePropagation (source: Mozilla)
The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.
If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. If stopImmediatePropagation() is invoked during one such call, no remaining listeners will be called.

This is what I have in mind right now. I will add more in the future.
Stay safe and alert.
Thanks for reading and feel free to comment.
Take care.

Closure and its Application in easiest way possible.

Pravin Poudel — Fri, 13 Mar 2020 13:46:03 +0000

+1 like for your willingness to learn closure. Closures can seem really daunting, to begin with, I know they were for me. Once you get the hang of them, you'll instantly be a much better coder.

For more on topics like this, you can visit icodeeveryday.

Every Interviewer's favorite topic is Closure. Let's dive here on What is Closure and why do we need it. Before Jumping into Closure, first, let's find what is Lexical Scoping.

Lexical Scoping :

Lexical Scoping is the popular convention of Variable scoping in many programming languages. Another approach is dynamic scoping which we will not discuss here. Javascript follows the Lexical scoping approach. In Lexical Scoping, the scope of a variable is based on the block where the variable is defined. It can only be called from the block of code where it is defined. Lexical scope is also known as static scope because the scope of a variable is fixed in a block in which it is defined.

In order to resolve variable, javascript starts at the innermost scope and searches outward until it finds the variable it was looking for.

So, the Inner function can access the variable on outer function and global variable whereas outer function can only access its own variable and Global variable.
Let's try with an example:

function outer() {
  let a = 3;
  function inner() {
    console.log(a);
  }
  inner()
}

outer();

The output of the above code is 3.Here outer() function conatain inner function inner()and when outer() is called inner function is executed which can access variable a inside outer function i.e outside inner function block.
This is the output:

Moreover, this is the shortest definition, I could ever think of:

Closure in Javascript :

function outer() {
  let a = 3;

  return function inner() {
    console.log(a);
  }

}

let inner_function = outer();
console.log(inner_function());

In the code above, outer() function return the inner() function without being executed. It is common to think that since the outer function is already executed the variable must have been dropped so, the inner function using variable a in the last line of code must bring error. But, javascript functions form closure. Closure basically means the combo of function and it's Lexical environment when it was created. In the lexical environment, there are variables that were in scope of the function when the closure was created. So, though the function outer() is already called, the closure allows us to use variable a in inner().

Let's see a more beautiful example by Mozilla

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

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

This is not only good code to demonstrate closure, but also a good example to depict one of the major applications of closure. In the code above, we have a function that takes an argument and returns an inner function which also takes an argument.

In the code,

var add5 = makeAdder(5);
var add10 = makeAdder(10);

This creates a closure add5 and add10 when the makeAdder(5) and makeAdder(10) function is called. This return a function and the lexical environment where x is 5 and 10 respectively. What I am trying to advocate is that both closures have separate lexical environment. So, it is not necessary that multiple closures should share same lexical environment.

So, if this is a cool thing in javascript, what might be the possible example or application where you can use closure though not limited.

Application 1 :

Emulate Private scope for variable and functions:

Valuable usage of closure is a hiding variable. Unlike other languages where we can declare private and public variables and function, there is nothing like that to hide function and variable in Javascript. We can hide variables and function in javascript with the help of Closure.

For example:

function Car() {
   var speed = 0;

   return {
      accelerate: function() {
         speed++;
      }
   }
}

var car = new Car();
car.accelerate();

Here, in code above speed is only accessible by accelerate otherwise, it is hidden. It is only exposed to accelerate. In general, closure has allowded to use hidden variable internally.

Another powerful example that present us the way function can be emulated private with help of closure is again taken here from mozilla

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },

    decrement: function() {
      changeBy(-1);
    },

    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counter.value());  // 0.

counter.increment();
counter.increment();
console.log(counter.value());  // 2.

counter.decrement();
console.log(counter.value());  // 1.

In the example code above, three functions counter.increment, counter.value and counter.decrement share same lexical environment. The lexical environment is created when the self-invoking function (anonymous function) is called or executed. There are many functions and variables in the anonymous functions. privateCounter variable and changeBy() function are private where as the object method returned by the anonymous function is public. You can't access either of these private members from outside the anonymous function. You can only access the private function and variable inside it with public functions.

Those three public functions are closures that share the same lexical environment. Thanks to JavaScript's lexical scoping, they each have access to the privateCounter variable and the changeBy function.

Another example is in the counter

<script>
        var updateClickCount=(function(){
            var counter=0;
            return function(){
              ++counter;
              document.getElementById("spnCount").innerHTML=counter;
         }
      })();
 </script>


  <html>
       <button onclick="updateClickCount()">click me</button>
       <div> you've clicked 
        <span id="spnCount"> 0 </span> times!
    </div>
  </html>

Here, in the code counter variable is inaccessible from outside i.e it is a private variable that can be accessed only by updateClickCount which is the reference of the function returned . Since it is a private variable we can stay assured that it cannot be tempered from other parts of code as it isn't exposed globally and vulnerably.

Application number 2:

Closures are very important in functional programming as they are used for two concepts — partial application and currying. :

Providing less argument to a function than the function has expected is a partial application of a function.

  We call a function with fewer arguments than it expects and It returns a 
  function that takes the remaining arguments. And this is called Partial 
  Application of Functions.

There is always a topic of discussion on Partial function and currying. I wanna diminish this with one line definition of both:
# Partial Application :
A function is partially applied when it is given a fewer argument than it expects and returns a new function expecting the remaining arguments. Partial application fixes one or more arguments inside the returned function
# Currying :
A function is curried when it takes one argument at a time and returns a new function expecting the next argument.

let's write a small code first and we will approach how closure is involved in this partial application of a function:

const addFourNumber = (a, b, c, d) => a + b + c + d;

//normal function invocation
const norm_result = addFourNumber(1, 2, 3, 4);

//console output is "The result of normal function invocation is 10"
console.log("The result of normal function invocation is " + norm_result);

//This code will bind 1 and 2 to a and b and return
//partial function and closure with a and b already
//assigned, and c and d are required to be passed.
const partialaddFourNumber = addFourNumber.bind(null, 1, 2);

//PartialaddFourNumber is a reference to the partial function
//returned that is wanting the parameter for c and d. So when 
//partialaddFourNumber is called with partialaddFourNumber(3,4)
//it return the result i.e 1+2+c+d which is 10
const partial_result = partialaddFourNumber(3, 4);

//The result of the console is "The result of a 
//partially applied function is 10" which is the same
//with the previous console output.
console.log("The result of a partially applied function is " + partial_result);

This block of code is an example code to demonstrate currying to the very same function addFourNumber() from the above code. Let's look through the code and try to understand how currying is basically closure.

Before jumping to code, let's remember first that the function is gonna accept each argument one at a time and returning a function each time until it has all the arguments and then return the value of the function body

const addFourNumber = (a, b, c, d) => a + b + c + d;

function add(a) {
  return (b) => {
    return (c) => {
      return (d) => {
        return a + b + c + d ;
      }
    }
  }
}


//invoke a curried function
const result = add(1)(2)(3)(4);
console.log(result); 

//which is same as calling as this below :

const result = add(1);
const result2 = result(2);
const result3 = result2(3);
const result5 = result3(4);
console.log(result5);

If you are confused and can't understand bind() and had hard time to understand chunk of code above currying's section, have a look at the makeAdder() code we went through earlier. Our previous code of adder is :

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

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

This is also a partially applied function example code which is the same as binding in the above code. Here, the code itself has makeAdder() function which returns closure of inner function.

The main benefit to closures is you can "partially apply" a function using a closure, then pass the partially applied function around, instead of needing to pass the non-applied function, and any data you'll need to call it (very useful, in many scenarios).

In Other Words:
Closures are really useful when we are dealing with higher-order functions especially when we want to communicate state.

That's it so when the Interview presents the code with the structure like above, remember what we learned here.

It's what I have right now in my mind. I will update this if anything new comes to my mind. Let me know if I missed something.
Thanks for reading.

Don' forget to follow me on Twitter. I post interesting code and articles there to keep you updated and rejuvenated.
That's it.

Have a good day, Take Care and Cheers !!!!

super(props) in React

Pravin Poudel — Wed, 11 Mar 2020 11:23:56 +0000

I know this is basic but its always good to hear. I prefer this as a discussion rather than a tutorial.

Most people just put super(props) as it will make no harm to code and there is no time in the earth to know the reason why the thing is working, just let it be. Yes, I know that but let's dig deeper into Class Component and find out why do we need super(props) in our constructor.

Q. Why do we need super(props)?

This allow to access this.props in Constructor

Let's explore it:

In fact, the super() function calls the parent class's constructor.

class Clock extends React.Component {
 constructor(props){
   // super(props);       let's put it in comment for now
   console.log(this);
 }
  render() {

        console.log(this.props)

    }
}

In this code, you are creating a Clock component which is inherited from Parent React.Component.

 console.log(this)

Try above code and you will get undefined in console. A child class constructor (which for now is Clock Class) cannot make use of this until super() has been called. Remember I only said constructor

But, there is no effect outside the constructor. it does not affect later rendering or availability of this.props in the render() function.

By calling super(props), you are calling the constructor of React.Component.
Which means that super() is a reference to the parent class constructor() which in the above case is of React.Component which is the base class of Component Clock.

When you pass props to super, the props get assigned to this.

Another thing is that:

If you use super(props), you can call methods that use this.props in from constructor, like this.Home(), without having to pass on the props parameter to those methods/functions.

class Animal {
  constructor(home) {
    this.shelter = home;
  }
}

class Sheep extends Animal {
  constructor(props) {
    super(props);
    this.Home(); 
  }

  Home() {
        console.log('Sheep lives in' + this.shelter);
  }

}

The code explains the statements above code blocks. Here we can call Home() function from the constructor. If you made the close observation, this is just bolstering the things I talked earlier i.e this and remember we are using this.Home() only after we call super().

BONUS and THINK-TANK QUESTION AND ANSWER

Here inside constructor(), we call the super() function with no parameter inside.

  {
    super();
    console.log(this.props); //guess what will be the output here.
  }

Can you guess the output?

Yes, it will give an undefined because we called constructor but props are not associated with this which inhibits us to call this.props.

If you have any different ways to present super() or more info, please comment below.

Thank you,
Have a good day and Take care.

Let's say 'Hello' to HTML

Pravin Poudel — Sun, 26 Jan 2020 08:26:38 +0000

Today is HOWARD'S day. Happy engineer though not from MIT.

This is just an article that is intended to convey 'HELLO' to HTML .
This is not full HTML course rather it is 'hello' course so that you won't find HTML strange member in any further web courses or web development .

First thing first , if you have heard joke about html being programming language , that's true .HTML isnot programming language , it is markup language.

Structure

<!DOCTYPE html>

This must be the very first thing in the HTML and before .This is to inform browser about the version of HTML, the document is. It is not necessary to write 5 after HTML since it's default case in HTML5.

html

This is just another tag that is after the DOCTYPE that tell the browser that it's HTML inside html tag or document is of HTML type.Every thing in the document goes right inside this. It has enclosing tag .Every thing of document is in-between and

head

This section hold tag and metadata that is important for browser and search engine.

title

This tag sets the title of your page.

body

This enclose all the content of HTML documents.

HTML Elements

HTML element usually have starting and ending tag with content to be inserted between them.While, there are elements with no ending tag since they don't have anything to be inserted.

for example:

Heading is here

HTML Attribute

Attribute provide additional information about element.
In above example of image height and width are attribute of the img which specifies the height and width of an image.

 <p style="color:red">This is a paragraph.</p>

<span title="This is an continent">ASIA</span>

ASIA

Remember:Heading is used by search engine to index the structure and content.
Heading is also very important for user to skim contents.

list

HTML offer 3 different way to list an items.Let's list them:

- unordered list

- defination list for list we use tag

and item to be inserted is placed in between
and

HOME
SERVICES
CONTACT




Output is :
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l2toracenutuhjyfallb.png)

while you can see the bullet above is round i.e default is of type disc.
There is also a choice for this with attribute type in <b>ul</b>


```javascript
<ul type = "square">
<ul type = "disc">
<ul type = "circle">

we can also remove that bullet with style code:

ul{
  text-decoration:none;
}

we can align item horzontally rather than vertically with another styling :

li {
   display:inline-block;
}

after this our previous output looks like:

anchor tag / hyperlinks

Click me :

  <a href = "https://www.google.com/">Google</a>

we have another attribute that we can add to it i.e 'title'.
Try this :
New window
Self
can u see the blue colour that come as default in hyperlink ?
You can remove that with styling:

     a{
         text-decoration: none; //this will remove the underline 
         color:#010101;
      }

remember for mail link we should have href attribute as :

<a href="mailto:prvnpoudel4@gmail.com">Mail</a>

Before going forward we must know two different way by which element lies in structural view of page.

Block Elements

A block-level element occupies the entire space of its parent element (container), thereby creating a "block".
Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes. ( source:MDN)

In-line Elements

Object in JavaScript (Event handling intro): JS

Pravin Poudel — Wed, 22 Jan 2020 05:13:14 +0000

What is an Object in JavaScript?

Object is popular data type in javascript.Var can contain single value like :

var address = 'Kathmandu'

but object can contain multiple values.
The values are written as name : value pairs (name and value separated by a colon).

Objects in JavaScript can be created several different ways.

    var person = {
         zone:"bagmati",
         district:"Bardiya",
         muncipality:'kapan',
         tol:"namuna tol"
    };

we can also create object with

var address = new Object();
address.zone = "bagmati";
address.district = "Bardiya";
address.municpality = 'kapan';
address.tol = "namuna tol";

always remember
var x = address;
this will not create new object rather both x and address are same object.

object.prop will access the value of object.

for example,


<p id="demo"></p>

<script>
var address = {zone:"bagmati", district:"Bardiya", muncipality:'kapan', tol:"namuna tol"};
document.getElementById("demo").innerHTML = address.tol + " is in  " + address.zone + " zone  and "+ address.district + "district ";
</script>

Output will be :

Namuna tol is in Bagmati zone and Bardiya district

The block of code inside of the for...in loop will be executed once for each property.

var address = {zone:"bagmati", district:"Bardiya", muncipality:'kapan', tol:"namuna tol"};
for (x in address) {
  result += address[x];
}

document.getElementById("demo").innerHTML = result;

object can have method as its member

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName();

output will be:

 John Doe

In a function definition, this refers to the "owner" of the function.

In the example above, this is the person object that "owns" the fullName function.

In other words, this.firstName means the firstName property of this object.

If a function is not a method of a JavaScript object, it is a function of the global object.

The call() method is a predefined JavaScript method.

With call() an object can use a method belonging to another object.
It can be used to invoke (call) a method with an owner object as an argument (parameter).

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
person.fullName.call(person1);

Next thing is Event and Event Handling :

The interaction of JavaScript with HTML is handled through events. Events are actions that occur when either the user or the browser itself manipulates the page.
An event is fired whenever an action occurs on a page which JavaScript can react to, such as when user clicks on a button (click event) or presses a key (keypress event).
An event handler is a JavaScript function that runs when an event fires.
An event listener attaches responsiveness to a given element, which allows the element to wait or “listen” for the given event to fire.
Events can be assigned to elements via inline event handlers, event handler properties & event listeners. Let’s take a look at each of these methods.

inline method is :

<button onclick="document.getElementById('demo').innerHTML = Date()">
The time is?
</button>

JS code is usually long so writting more managable code here we put the event listener task inside a function.

<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<p id="demo"></p>

// Function to modify the text content of the paragraph
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}

1 more thing (BONUS):

what is let in js :

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar);

  {
    let baz = "Bazz";
    console.log(baz);
  }

  console.log(baz); // ReferenceError
}

run();

why do we have let in js when we already have var ?

The answer is scoping and Reference error in the code above is proof of that .

If you have any problem on understanding it , mail me at prvnpoudel4@gmail.com .I will cover scoping of variables in another article. Since, we are here for react, i suppose u guys can do research on your own and get into track for React soon !!! Good luck !!!!

Day-1:Learn React Everyday

Pravin Poudel — Tue, 21 Jan 2020 17:40:21 +0000

Hello !!!!
Good lord !!! Finally, you are here to learn with me !!!!
I will be posting new article everyday with caculated dosage of knowledge so,keep following and start with me to learn React.

Like the 'young sheldon' said "Let's the learning begin" without wasting time.

Starting with this, i presume that you know

HTML
CSS
JS (more specifically ES6)

If you don't , don't worry !!! i will make another article for you with just information that you will need from JS so that you can carry on learning JS parallelly with React.

Installing React in our local system

First we need to install node in our system before we deal with react .
Go to https://nodejs.org/en/download/ and download the appropriate version of Node .

Mine is windows 64 bit so i downloaded :

Now go to command line and check if node is installed properly.

Note: you need to have version version of Node >= 8.10

Let's create a project :

npx create-react-app my-app
cd my-app
npm start

Before heading forward, let's dissect and understand what this command is and what is this new term npx that look like npm .

create-react-app is an utility to bootstrap a react project

You can find multiple webpage detailing difference between npm and npx but here is a short and maxim information.
https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm

after the above command you will see page opened in your browser

Now you have React project my-app in your local system ...

We will go to the project directory to understand the boilerplate . For now, we need to get through some JS concept before jumping into react:

'this' keyword
let and const
arrow functions
object literals
Rest and spreads operators

'this' keyword :

first what is 'this'?
'this' reference to the object that is executing the current function.

more clearly, if the function is inside the object, 'this' references the object itself .For example :

let's create an object name Laptop

     var Movie = {
                    name:'movie1',
                    play() {
                         console.log(this);
                    }                    
                 };
Movie.play();

result in console should be like this :

let's try this with regular function:

   function playaudio(){
     console.log(this);
    }

   playaudio();

This is because by default 'this' reference global object which is window for now.

Arrow function

First Day Guide to Redux

Pravin Poudel — Thu, 22 Aug 2019 14:35:57 +0000

I just learned Redux , and i am here to share what are the things that made me understand what's going on ...

let's start with why to use Redux:

There is interesting discussion in stackoverflow that explains why and when do we need Redux.

In addition to that :
let's say an app with 50 components with their own states that communicate with each other and update each other's state .

Now , in the first tree , States of the app become so convoluted and confusing , whereas in second tree , it's pretty clean because of the master state . Components send requests to update master state and stage changes of master state flow down to component .

Installation:

Consideration: you are already inside react project and have yarn installed .You can also use npm but i prefer yarn .

 yarn add redux react-redux

Store , Reducer , Action

STORE:
Store is basically where entire state of the app lives . This is just one big object.Only way to change the state is to dispatch an action for it .
Action:
Action is just an object with type and payload that is sent or dispatched from view which are sent to Reducer .
Reducer:
Reducer is a pure function that reads the state and action.It handles how to update the state based on the action props and returns the next state .

Fig: Redux flow

Create Store :

Import createStore from redux in your index.js file .

 import { createStore } from 'redux';

Remember that there is only one store in an Application .

Now create a store .

const store = createStore(
  reducer,
  {
    products: [{ name: "iphone" }],
    user: ["michael"]
  },
  allenhancer
);

createStore() function takes three arguments,first of which is reducer function , second is initial or pre-loaded state and last is store enhancer.

we will talk about store enhancer next time , for now let's write this

const allenhancer = window.devToolsExtension && window.devToolsExtension();

This is for Redux devtools . You can add it on your browser extension. For chrome , you can add it from here .

Create and dispatch an action :

Action is just an object with type and payload , let's create it :

const action = {
type:'changestate' ,
payload:{
    newState:'New state'
 }
};

Now dispatch an action object with store object that we just created above :

store.dispatch(action);

Define a reducer function and handle the action props:

function reducer(state , action){
if(action.type=== 'changeState'){
   return action.payload.newState;
}
return 'default-value';
}

Reducer function takes two arguments , state and action which is dispatched by store and return next state .

you can console the store state with

console.log(store.getState());

where we can see that state has been changed to 'New State' . store.getState() returns the current state tree of your application . It is equal to last value returned by store's reducer.

Dividing state with multiple Reducer :

Putting all your updates or handling logic in single reducer function can become unmanageable . So , what we do is split the logic into multiple functions and call those functions from parent function .
All functions have (state , action) as parameter .
You may be thinking " how to call different reducer if we have multiple one ?" . Well,here comes the rescuer : combineReducers() .
For that , import it from redux . The import line from above looks this :

javascriptimport { combineReducers, createStore } from 'redux'

Refactoring of Reducer function :

This is our reducer function that add user or product into our state , and return new state with payload added to product or user as per 'type' :

function reducer(state = "", action) {
 switch (action.type) {
  case "UPDATE_USER":
    let temp_state_user = Object.assign({}, state);
    temp_state_user.user.push(action.payload);
    return temp_state_user;
  case "UPDATE_PRODUCT":
    let temp_state_product = Object.assign({}, state);       
    temp_state_product.product.push(action.payload);
    return temp_state_product;
  default:
      return state;
   }
  }

Reducer function handles the action on calling dispatch as :

store.dispatch({ type: "UPDATE_USER", payload: "PRAVIN" });
console.log(store.getState());

console.log() gives console output as :

Reducer function above takes switch operation to handle user and products update inside same function .This may be clumsy if this grows . We now want to take slice of this render logic ,and put it inside individual function . combineReducers() provide us this functionality to combine different reducing logic and make parent render function which can be made called by store on dispatch .

Let's refactor above render function

const initialState = null;
function user_reducer(state = initialState, action) {
  switch (action.type) {
    case "UPDATE_USER":
      let users = state;
      users.push(action.payload.user);
      return users;
    default:
      return state;
  }
}
function product_reducer(state = initialState, action) {
  switch (action.type) {
    case "UPDATE_PRODUCT":
      let temp_state_product = Object.assign({}, state);
      temp_state_product.push(action.payload);
      return temp_state_product;
    default:
      return state;
  }
}

combineReducer() combines both reducers and return parent reducer that can be attached with store.

const allReducers = combineReducers({
  products: product_reducer,
  user: user_reducer
});

and now we have store creation code as :

  const store = createStore(
  allReducers,
  {
    products: [{ name: "iphone" }],
    user: ["michael"]
  },
  allenhancer
);

This also gives the same result in console after console.log(store.getState())

That's it for now ,

This is not good way to write all code inside index.js so next time we will start with directory/file hierarchy and about passing this state to view or component .