Scenario

Let's think of a scenario where we can use sensors.

We have a web app where we need to display a greeting to the user based on the time of day. The requirements are as follows:

User should be able to see contextual greeting based on time of the day.
1. "morning"
      if the time is between 00:00 to 11:59
2. "afternoon"
    if the time is between 12:00 to 16:59
3. "evening"
      if the time is between 17:00 to 23:59

Let's write some code for this:

Whenever we write code for such requirements, it is better to create a pure function. A pure function provides the same output for the same arguments and does not depend on any global variables.

function giveContextualGreeting(date = new Date()) {
    const hours = date.getHours();
    if(hours >= 0 && hours < 12) 
        return "morning"
    else if(hours >= 12 && hours < 17) 
        return "afternoon"
    else 
        return "evening" 
}

To test if this is working as intended, you can do one of the following:

• Push your code to a source code management tool and ask a teammate in a different location to test it.

• Wait for the relevant time and test the function.

Both methods take a lot of time and can slow down your app development.

To overcome this, you can make use of sensors.

Sensors

The Sensors tab allows you to emulate sensor input from various devices, providing a convenient way to test how your website responds to different sensor data. This is particularly useful when building features that rely on user location, device orientation, or touch input.

We will take a look at how we can override geolocation to simulate the user's location, including custom coordinates or preset cities

Lets run the function in console of the browser.

This returns the result for your location. Now to check for other location, open sensors in devtools.

• Open the "Inspect" window - right click and select inspect from the list or press Command+Shift+I on mac and Control+Shift+I on Windows, Linux or Chromebook.

• Open Sensors - press Command+Shift+P on mac and Control+Shift+P on Windows, Linux or Chromebook.

• You can select one of the options

  

  Lets select "Tokyo"

  

  Lets select "Mountain View"

• 

Now you are done with the testing the function without having to wait for time or someone else in different location to help you out.

That's all for this article. Thanks for reading.

In this article we will discuss and learn about the Function Borrowing methods - call(), apply() and bind(). These are called function borrowing methods because the this context for a function can be modified using these methods. Before we jump into this discussion about what these methods do, I think it is important to understand how this works in JavaScript.

this in JavaScript

The value of this in JavaScript is calculated at runtime i.e. when the code is getting executed. At a global level, this value equals the window object. Inside a normal function in an object, this refers to the enclosing object and inside an arrow function it references the value of this from the enclosing lexical context

Let's understand all these with a simple example

console.log(this); 
/**
 * window object
 */

function normalFunction() {
  console.log(this);
}
normalFunction()
/**
 * window object
 */


const arrowFunction = () => {
  console.log(this); 
};
/**
 * Does not redefine this.
 * Equal to enclosing scope in this case the window object
 */


const objectWhichContainsNormalFunction = {
  name: "tahir",
  printName: function () {
    console.log(this);
  },
};
objectWhichContainsNormalFunction.printName();
/**
 * Points to the object containing the function
 * {
 *    name: "tahir",
 *    printName: f()
 * }
 */

const objectWhichContainsArrowFunction = {
  fname: "tahir",
  lname: "ahmed",
  printName: () => {
    console.log(this);
  },
  printFullName: function () {
    (() => {
      console.log(this);
    })();
  },
};
objectWhichContainsArrowFunction.printName();
/**
 * In this case the value of this will be equal to the window object.
 *  */

 objectWhichContainsArrowFunction.printFullName();
/**
 * `this` will be equal to the object `objectWhichContainsArrowFunction`
 * This is because the `printFullName()` is a normal function and it redefines 
 * `this` value to the object
 */

With this concept being clear, let's dive into the function borrowing methods.

call

call invokes the functions with a this context and arguments provided individually.

Let's understand it with an example. Consider an object person1 which is as below

const person1 = {
  fname: "john",
  lname: "doe",
  printFullName: function () {
    console.log(`${this.fname} ${this.lname}`);
  },
};
person1.printFullName()
// john doe

There is another object person2, which does not have the printFullName() implementation. We can call printFullName() and provide person2 as the context.

const person2= { 
  fname: "Alfred", 
  lname: "Marshall" 
}

/**
 * Invoking call method below
 */

person1.printFullName.call(person2);
// Alfred Marshall

It is a good practice to have these functions outside. We can pass additional arguments to the call function individually.

const person1 = {
  fname: "Justin",
  lname: "Case",
};

const person2 = {
  fname: "Parsley",
  lname: "Montanna",
};

function greetUser(salutation, message) {
  console.log(`${salutation} ${this.fname} ${this.lname}!!! ${message}`);
}

greetUser.call(person1, "Mr", "Good Morning!");
// Mr Justin Case!!! Good Morning!

greetUser.call(person2, "Ms", "Good Morning!");
// Ms Parsley Montanna!!! Good Morning!

In the above example snippet, greetUser() function defined outside. It expects two arguments salutation and message. In call we pass these arguments individually.

apply

apply() is similar to the call() method with the only difference being the way in which additional arguments are passed to the function while it is invoked.

In the case of apply() we pass all our arguments as an array

const person1 = {
  fname: "Justin",
  lname: "Case",
};

const person2 = {
  fname: "Parsley",
  lname: "Montanna",
};

function greetUser(salutation, message) {
  console.log(`${salutation} ${this.fname} ${this.lname}!!! ${message}`);
}

greetUser.apply(person1, ["Mr", "Good Morning!"]);
// Mr Justin Case!!! Good Morning!

greetUser.apply(person2, ["Ms", "Good Morning!"]);
// Ms Parsley Montanna!!! Good Morning!

bind

bind creates a new function and returns the function with the newly bound this context. It attaches the value of this passed as an argument to the function and returns the function.

Let us understand this with an example. We have an object named user and the function greetUser() within the object. Consider we have an admin role too and there is an object for that. Instead of defining a new function altogether, we can bind the greetUser() of the user object to the admin object and create a new function.

const user = {
  fName: "Kevin",
  sName: "Edwards",
}

const greetUser =  function() {
  console.log(`Welcome ${this.sName}, ${this.fName}`)
}

const admin = {
  fName: "John",
  sName: "Doe",
}

const greetAdmin = greetUser.bind(admin)

greetAdmin()
// Welcome Doe, John

Polyfills for call(), apply() and bind()

Polyfill, on its own, is a very vast concept. It would be too much information in a single article. In short, polyfills allow us to provide modern JavaScript functionalities in browsers that don't support them.

call(), apply() and bind() are available on every function that we create in JavaScript. To make our own functions available in the same way, we have to define the functions on Function Prototype. For more information on what prototype is read here.

Polyfill for call()

call() method calls a function with a new this context and other arguments that the function being called expects. The function would look something as below.

Function.prototype.myCall = function(currentContext = {}, ...args) {
  currentContext.fn = this;
  currentContext.fn(...args);
};

Let us go through each line and understand what is happening.

• We are creating a polyfill called myCall and adding it to the Function.prototype so that it is available on all the functions.
  • currentContext is the object we want to call our function with
  • ...args - taking the rest of the parameters
• We then create a property fn on the currentContext object.
• this points to the function that is invoking or calling the myCall() function
• We now call the function with its additional parameters by spreading them

Consider the below example where we are using the above polyfill

Function.prototype.myCall = function(currentContext = {}, ...args) {
  currentContext.fn = this;
  currentContext.fn(...args);
};

const person1 = {
  fname: "Justin",
  lname: "Case",
};

function greetUser(salutation, message) {
  console.log(`${salutation} ${this.fname} ${this.lname}!!! ${message}`);
}

greetUser.myCall(person1, "Mr", "Good Morning!");
// Mr Justin Case!!! Good Morning!

We are assigning the greetUser() function to person1 object and redefining the this context to be the invoking object and calling it with the arguments.

Polyfill for apply()

We have seen that call() and apply() are similar except that apply() accepts all additional arguments to be in an array. So their polyfills are also similar

Function.prototype.myApply = function(currentContext = {}, arg = []) {
  currentContext.fn = this;
  currentContext.fn(...arg);
};

Instead of accepting all other arguments using the rest operator, we use a second parameter that accepts an array.

Function.prototype.myApply = function(currentContext = {}, arg = []) {
  currentContext.fn = this;
  currentContext.fn(...arg);
};

const person2 = {
  fname: "Parsley",
  lname: "Montanna",
};

function greetUser(salutation, message) {
  console.log(`${salutation} ${this.fname} ${this.lname}!!! ${message}`);
}

greetUser.myApply(person2, ["Ms", "Good Morning!"]);

Polyfill for bind()

bind returns a new function with a new this context. Before we delve into writing polyfill for bind, let's explore a bit more about how bind works

const admin = {
  fname: "John",
  lname: "Doe",
};

const printDetails = function (city) {
  console.log(`${this.fname} ${this.lname} resides in ${city}`);
};

const printDetailsOfAdmin = printDetails.bind(admin, "Doha");
printDetailsOfAdmin()

// John Doe resides in Doha

In the above codeblock we have an object admin and a function printDetails. When we write the polyfill we need to keep in mind that we have to return a function that can be called later. This function can take additional arguments which need to be passed on when we are returning the function. With these things in mind, let's get started. We will iteratively improve our bind() polyfill so that things are not confusing.

Basic version of bind() polyfill

Function.prototype.myBind = function (...args) {
  const obj = this;
  return function () {
    obj.call(args[0]);
  };
}

This is a very basic implementation of bind() where we are returning a function that calls the method on which are binding the new object i.e., the new this context.

const printDetails = function () {
  console.log(`${this.fname} ${this.lname}`);
};

const admin = {
  fname: "John",
  lname: "Doe",
};

const printAdminDetails = printDetails.myBind(admin)

Consider the above function and the subsequent call to myBind, then this in line 2 of the polyfill will be equal to the printDetails() function. We need to call the function with the object admin which can be done by accepting arguments using the rest operator and the first argument is the object which we need to pass accessible using args[0]. This version works fine as long as we don`t have any extra arguments.

Avanced version of bind() polyfill

One of the very first changes that we need to do to pass other arguments too, is to replace call with apply the reason being we cannot keep track of how many extra arguments need to be passed. Now we need to pass the rest of the arguments apart from the object i.e., args[0] to the function that is getting returned

Function.prototype.myBind = function (...args) {
  const obj = this;
  const params = args.slice(1);
  return function () {
    obj.apply(args[0], [...params]);
  };
};

Now let's try to see how it behaves when we use it on one of the objects

const admin = {
  fname: "John",
  lname: "Doe",
};

const printDetails = function (city, country) {
  console.log(`${this.fname} ${this.lname} resides in ${city}, ${country}`);
};

const printDetailsOfAdmin = printDetails.myBind(admin, "Doha", "Qatar");
printDetailsOfAdmin()

// John Doe resides in Doha, Qatar

This totally works fine but consider the below scenario where we are passing the arguments when we are calling the printDetailsOfAdmin() function.

const printDetailsOfAdmin = printDetails.myBind(admin, "Doha");
printDetailsOfAdmin("Qatar");

// John Doe resides in Doha, undefined

This is happening because we are not passing the arguments that we are receiving when the returned function gets called inside our polyfill.

Function.prototype.myBind = function (...args) {
  const obj = this;
  const params = args.slice(1);
  return function (...callerFunctionArgs) {
    obj.apply(args[0], [...params, ...callerFunctionArgs]);
  };
};

This version of polyfill will work for all cases.

const printDetailsOfAdmin = printDetails.myBind(admin, "Doha");
printDetailsOfAdmin("Qatar");

// John Doe resides in Doha, Qatar

That's all for this article. Thanks for reading.

You can follow me on my Twitter to be notified whenever I'm writing an article and keep updated with my journey in the world of web dev. Thanks for reading.

Hope you are doing well.

This will be a very small article where I will talk about how to get started with CSS Modules in React Apps. Without wasting much time lets get into it.

Problem with CSS

The CSS defintions in React are global scoped - meaning two or more classes with same name conflict with each other. Handling CSS becomes messy as the size of the project grows.

Why CSS Modules?

A CSS module is .css file where classes behave like Javascript variables. CSS Modules localize the class names and allow the users to use the same class names across the project.

They automatically create unique className for the CSS class using the format [filename]\_[classname]\_\_[hash] and scope the CSS classes locally.

For more information, read the docs.

How to use CSS Modules

Using CSS modules is very easy. We need to name our files in the format *.module.css*. It is considered as a good practice to name the css module file with the same name as the component name in which it will be used.

|__Components
  |__Homepage
      |__Homepage.js
      |__Homepage.module.css

// Define the classes normally as we define in normal css files

.container {
    display:flex;
    flex-direction: column;
    width: min(90vw - 2em, 80em);
    margin: 0 auto;
}

While using these classes we need to use the format {styles.container} where styles is the name which we are using to import and container is the css classname defined in our .module.css file. They are imported and used as shown below.

import styles from "./Homepage.module.css";

export default function Homepage(props) {
    return (
        <div className={styles.container}>....content</div>
    )
}

Using more than one CSS class for a component

It is not likely that all our css is written in one single class. We might have normal CSS classes coming from component libraries and other css module classes too. They can be used as below

    <div 
       className={`${styles.classone} ${styles.classtwo} flex flex-column`}>
        content
    </div>

classone and classtwo are classes defined in *.module.css file and flex and flex-column are normal css classes defined in component libraries.

Here is a link to Code Sandbox where I have created two components and styled them using CSS modules.

That's all for this article.

Thanks for reading.

I'm back after a long time with another article. I had lot of interviews lined up as I was looking for switching job. Finally, accepted a position as Associate 2 at Pricewaterhouse Coopers.

So as one of the first tasks, I was asked to setup testing for react app that we were building using Jest and React Testing Library. I ran into multiple issues with the setup and could not find quick fixes for my problems. Just documenting what I did so that others don't feel or get stuck.

Key Points to be noted

• This solution is for projects being bundled with webpack
• This article is not for people who are bootstrapping the React App with create-react-app (hereby referred in the article as CRA). CRA comes preconfigured with jest and react-testing-library.
• There are few things in this article which even I don't understand like creating stubs and various parameters in jest.config.js file
• You have a basic knowledge of what packages like babel & webpack do
• You have a react project created using webpack. If not start by cloning using below command

git clone -b 01-starter https://github.com/ttahm3d/react-javascript-template.git

Getting started

As is the way with CRA template, most of the react app testing has been moved away from the combo of Jest and Enzyme to Jest and React Testing Library. Most of this due to the fact that enzyme does not support most of the new features of react and the delay in getting apapted to new features.

For someone coming from a Enzyme testing background, there is a complete shift in the testing point-of-view. We test the component for the way it works in React-Testing Library.

Installation

Jest is a javascript testing framework. It acts as a test runner and provides us methods to interact and assert if the expected results are correct or false.

npm install --save-dev jest

Let's check if it works by running the tests specified in the Jest Docs

// Sum.js
function Sum(a, b) {
  return a + b;
}

export default Sum;

// Sum.test.js
import Sum from './Sum';

test('2 and 2 is 4', () => {
  expect(Sum(2, 2)).toBe(4);
});

Add the below settings to package.json

    "scripts": {
        ...,
        "test": "jest",
    },

Now run npm run test.

This test should work as expected. Lets install the other part of testing suite react-testing-library and start writing tests for our React components.

npm install @testing-library/react @testing-library/jest-dom @testing-library/user-event

Configuration

Before we test React components we need to configure jest and react-testing-library. Run the command:

npx jest --init

You will be taken through a series of questions in the command line, answer them as per the applicability. For our instance the response is as below in the screenshot. After this is done, a jest.config.js file is created which has various parameters that are result of your choices.

The Problem

Create a new test file app.test.js and the below contents

import { render, screen } from '@testing-library/react';
import App from './app';

it('should render the app component', () => {
  render(<App />);
  const text = screen.getByText(/React starter/i);
  expect(text).toBeInTheDocument();
});

Now we see an error with error message on the as below

This is because jest cannot parse non Javascript files using babel loader. Files such as images, fonts, css files etc. need to be stubbed as per the jest documentation. We need to use the property called moduleNameMapper to stub these files.

Solution

Create a folder named Mocks and create two files fileMock.js and styleMock.js

Add the below content to respective files

// fileMock.js
module.exports = "test-file-stub";

// styleMock.js
module.exports = {}

Now to the jest.config.js add the below content

module.exports = {
...,
    moduleNameMapper: {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
            "<rootDir>/Mocks/fileMock.js",
        "\\.(css)$": "<rootDir>/Mocks/styleMock.js",
    },
};

There is a new error now which is as below

Create a new file setupTests.js and add the following content

import '@testing-library/jest-dom/extend-expect`

and add the below to jest.config.js

module.exports = {
   ...,
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
}

What this does it it calls the setupTests.js file before jest runs every .test file. Now the tests would run and pass.

Complete soultion is in this Git repo

Thats all for this article. Thanks for reading it through.

Lets dive into the discussion without wasting time.

Primitive and Non-primitive data-types

There are 8 data types in Javascript

• number - numbers of any kind
• bigint - numbers of large length
• string - set of characters wrapped within quotes (" " or ' ') or backticks (` `)
• null - unknown values
• undefined - unassigned values
• boolean - true or false values
• symbol - for unique identifiers
• object - for complex data structures

Refer here for more information.

Except object all others are primitive datatypes. Objects are used to store collections of data in the form of key-value pairs.

Introduction to Objects

A object is as simple as {}

typeof {} //"object"

Object creation

Objects can be created in two ways

1. Object Construtor Syntax

    let person = new Person()
   

2. Object Literal Syntax

    let person = {}
   

Objects usually have properties and methods. We can add properties into a object in the form key:value. Lets add two properties in person object

let person = {
  name: "john",
  age: "24"
}

name and age are the properties and "john" and "24" are their respective values.

Accessing properties

Using Dot (.) notation

We can access the properties in the format <objectName>.<propertyName>

let person = {
  name: "john",
  age: "24"
}

// Accessing name
console.log(person.name) // "john"
console.log(person.age) // 24

Using Square ([]) brackets

The square brackets come in handy when we have multi-word key i.e., object key with more than one word and has a space (' ') in between the words.

let person = {
  name: "john",
  age: "24",
  "favourite language": "javascript" // note the special way in which key is defined
}

console.log(person["name"]) // "john"
console.log(person["favourite language"]) // "javascript"

If we use the dot (.) notation to access multiword properties, JavaScript will throw an error. Javascript searches for property favourite in the object person. and then gives a syntax error when comes across unexpected language.

console.log(person.favorite language)

The square bracket notation is also used to evaluate an expression and find a property of that result

let key = "favourite language"
console.log(person[key]) // javascript

Adding and Deleting properties to objects

We can add new properties to object using the dot notation after object has been created. To the same person object from above, we can add new property called email as below

person.email = "test@xyz.com"

console.log(person.email) // test@xyz.com

You can delete a property by object using delete followed by <objectName>.<propertyName>

delete person.age // deletes age property

References and copying

Most questions in the interviews around the object, if you are beginner, will be around this topic

The key difference between and primitive data types and objects is that Objects are stored and copied by reference

Let us understand the above statement with below example

// consider a variable of primitive type 
let a = 4;

// suppose you want to create a copy of the above variable
let b = a;

console.log(a) // 4
console.log(b) // 4

// at some point later in your code you change the value of a to be something else
a = 5;

console.log(a) // 5
console.log(b) // 4

In the case of primitive data types the values are copied as a whole i.e., each variable has a separate location in the memory and contains its own copy of the value. The above example stands true for all primitive data types.

Now lets check similar scenario with Objects

// consider a object person with name and email properties

let person = {
  name:"john",
  email : "john@xyz.com"
}

// you want to make a copy of this object

let newPerson = person

// you want to change the value of newPerson to be something else

newPerson.name = "doe"

console.log(person.name) // "doe"
console.log(newPerson.name) // "doe"

This happens because Objects are stored as references. There is a single object with parameters name and email in memory and refernced by two varaibles person and newPerson. We are making change to same object, hence those changes are reflected in both the variables.

Copying Objects

As we have seen above, normal copy just creates a refernce to the same object. If we want to create a separate clone of the object, we can loop through the entire object using for...in loop and copy each property.

Using Object.assign()

The other way we can do it is using Object.assign() method. According to MDN documentation, it can be used to copy its own enumerable properties. It cannot be used to copy nested objects. The nested object is still copied as a reference.

let person = {
  name:"john",
  email : "john@xyz.com"
}

let newPerson = {}
Object.assign(newPerson, person)

newPerson.name = "doe"

console.log(person.name) // "john"
console.log(newPerson.name) // "doe"
}

Using Spread Operator (...)

Spread operator was added in ES6. It is used to spread or expand an iterable such as array or object. It can be used to copy objects. This copies without reference.

const user = { name: "john", age: "24" }
const newUser = {...user}
console.log(newUser) // { name: "john", age: "24" }

newUser.name = "lewis"
console.log(newUser.name) // "lewis"
console.log(user.name) // "john"

Deep Copying

Copying using Object.assign() and Spread Operator (...) does not copy the nested object - object which contains object in it. The nested part of object is still copied as a reference.

We can do a Deep Copy of an object using JSON.stringify() and JSON.parse()

const user = {
  name: "john", 
  age: "24", 
  address: {
    state: "Texas",
    country: "USA"
  }
}

const newUser = JSON.parse(JSON.stringify(user))
newUser.address.state="California"

console.log(user) 
// { name: "john", age: "24", address:{ state: "Texas", country: "USA" }}
console.log(newUser) 
// { name: "john", age: "24", address:{ state: "California", country: "USA" }}

Object Methods

Objects along with properties have methods. Lets add a method sayHello() to our userobject.

const user = {
  name:"john",
  age: "24",
  sayHello: function() {
    console.log(`Hello ${user.name}`);
  }
}

user.sayHello() // "Hello john"

The idea behind having methods in objects is to allow only the methods to manipulate the object. The above code would work perfectly fine. But if the object is copied to another object and we call the sayHello() method, it will cause an error as it will try to access the method from another object.

let user = {
  name: "John",
  age: 30,
  sayHi() {
    console.log( user.name ); // leads to an error
  }
};

let admin = {...user};
user = null; // overwrite to make things obvious
admin.sayHi();

To overcome this, we need to use this keyword while refering any property of the object inside its method. this inside the method of an object refers to the enclosing object (the object in which the method is present).

The this behaves differently in JavaScript. Its value is evaluated at the run time depending upon the context. Please do give this article a read. Arrow functions don't have their own this. They derive it from their enclosing Lexical Context

Constructors

So far we have seen how to create objects. What if we need to create multiple objects of the same type for example a list of users, list of todo items, we need to use Constructors along with new keyword to create objects.

Constructors are functions that create new objects - they define both the properties and methods that can act upon these properties. It serves as a blue print to the create objects.

Constructors are functions with just two conventions

1. First letter of function should be capital
2. Constructors should be called only with new keyword

function User(name, age) {
  this.name = name,
  this.age = age
}

The above snippet creates a Constructor with name User. Constructors use this keyword to set the properties of the new object. Here, this refers to the new object being created. The above Constructor defines two properties name and age and sets their values to the parameters in Constructor definition.

const user = new User("john", "24")
console.log(user.name) // "john"

We can create a new user as above. The new operator tells JavaScript to create a new instance of User object. Pass the values for name and age as arguments to the constructor call. We can have the methods in the constuctor function in the same way we have the methods in normal objects.

function User(name, age) {
  this.name = name,
  this.age = age,
  this.sayHi = function() {
    console.log(`Hi ${this.name}`)
  }
}

const user = new User("john", "24")
user.sayHi() // "Hi john"

Instance of

When we create a new object using constructor, the new object is said to be instance of the constructor. This can be verified using instance of operator. It returns true if it is instance of the constructor

function User(name, age) {
  this.name = name,
  this.age = age,
  this.sayHi = function() {
    console.log(`Hi ${this.name}`)
  }
}

const user = new User("john", "24")
console.log(user instanceof User) // true

The instanceof operator can be used to distinguish between normal objects and objects created normally.

Call, apply and bind

The this keyword's value is calculated at the runtime. Inside a event listener or when the Object's method is passed as a callback to setTimeout(), this context is lost. The value of this will be the element that recieved the event in event listener function. I

To overcome this JavaScript provides, with bind() method. Along with bind() it is good to have idea about call() and apply() methods.

call() and apply()

This is a function borrowing method in Javascript. The call() method calls a function with a given this context and arguments provided induvidually.

const user1 = {
  fname: "john",
  lname: "doe",
  getFullName: function() {
    console.log(`Hello ${this.lname}, ${this.fname}`) 
  }
}

user1.getFullName() // "Hello doe, john"

Consider there exists a object user2 which does not have the getFullName implementation. We can call getFullName and provide user2 as the context.

const user2  = { 
  fname: "Alfred", 
  lname: "Marshall" 
}

user1.getFullName.call(user2) // "Hello Marshall, Alfred"

It is a good practice to have these functions outside. We can pass additional arguments to the call function induvidually. Apply works the same way as call but it takes the additional arguments in an array

const user1 = {
  fname: "John",
  lname: "Doe",
}

const greetNewJoiner = function(teamName, location) {
  console.log(`Hello ${this.lname}, ${this.fname}`) 
  console.log(`We are happy to welcome you to our ${location} office and into ${teamName} team`)
}

const user2  = { 
  fname: "Alfred", 
  lname: "Marshall" 
}

greetNewJoiner.call(user1, "Frontend" , "California")
// "Hello Doe, John"
// "We are happy to welcome you to our California office and into Frontend team"
greetNewJoiner.call(user2, "Devops", "California") 
// "Hello Marshall, Alfred"
// "We are happy to welcome you to our California office and into Devops team"

// Apply example
greetNewJoiner.apply(user2, ["Devops", "California"]) 
// "Hello Marshall, Alfred"
// "We are happy to welcome you to our California office and into Devops team"

bind()

Bind creates a new function and returns the function with newly bound this context.

const user = {
  fName: "Kevin",
  sName: "Edwards",
}

const greetUser =  function() {
  console.log(`Welcome ${this.sName}, ${this.fName}`)
}

const admin = {
  fName: "John",
  sName: "Doe",
}

const greetAdmin = greetUser.bind(admin)

greetAdmin()
// "Welcome Doe, John"

Most of the questions in interview will be around these three methods.

That's all for this article. Please let me know if I need to include anything else.

Thanks for reading.

I'm Tahir Ahmed, a frontend developer. This is my first ever article on any blogging platform.

In this article, I would like to let you all know about some of the free resources that are available for web developers for designing the websites, using images, adding gradients, generating color palettes and many such things for websites.

These are the ones that I recommend personally as I use them in my work.

Free Images

Any good website has illustrations or images. It is not easy to find images that are not copyrighted. The following are some resources from where you can use images for free

1 Unsplash:

Unsplash has tons of free images of all the things that you are looking for. They don't have any watermarks on them.

2 Undraw:

Undraw has free illustrations which you can download in any of the formats such as svg, png etc.

Gradients and colors

Have you ever looked at a website and wished that you would also be able to create such good looking colorful websites? You can do it too.

1 CSS Gradient:

CSS Gradient provides an graphical user interface to create Gradients (both Linear and Radial) and allows you to choose from 256M colors. You get a chance to view how the gradient looks before you actually use it in your application.

2 Coolors:

Coolors allows you to create a Color palette for your website. Press space bar, the next palette appears. If you like a color you can lock it and keep changing the other ones.

3 Clippy:

Have you seen websites with skewed divs like the one below. These designs are called as skewed designs. We can achieve similar design by applying clip path to ::after or ::before pseudo elements. With Clippy we can create a clip path easily. It allows use to change shape of clip to such as Polygon, Cross or many such shapes.

4 Tailwind CSS Colors

Tailwind developers have made a collection of colors that attract the human eye.

Thats all for this article.

Thanks for reading.