Forem: Kedar

JavaScript apply, call & bind Simplified

Kedar — Sun, 04 Oct 2020 22:25:15 +0000

One of the aspects of mastering scope and the value of this in JavaScript is to understand how apply, call and bind work.
This article aims at simplifying these methods. I'll try to keep the explanation as simple as possible here.

this in JS refers refers to the current context in which a function is being called. Although covering this in detail is a separate article in itself, the main point to remember is that to determine the this object, we need to see where the function is being invoked.

Amongst several possibilities of this, we discuss three of the ways JS allows us to set what this will be for a function.

To call a function in JS (and most other languages), we simply pass the parameters and invoke it. Example:

function logMe(text) {
  console.log(text);
}

logMe('Canada')
// Output: 'Canada'

When apply, call and bind come in the picture, it allows us to also specify the this object for the function.
So, these methods allow us to invoke/call a JS function by specifying:

the scope (this object) and
the params for the function we want to call.

☎️ `apply` and `call`

Both of these methods are similar.
When being used, they both take the scope or the this object as the first param followed by the parameters/arguments for the function.

The only difference is the way the arguments for the function are passed.

function invokeMe(val1, val2) {
  // Note that the first `val` comes from the "this" object
  // that the function is referring to
  // and `val1` and `val2` are the function arguments. 
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

invokeMe.apply(thisObj, [arg1, arg2]); // Output: 'JavaScript Hello World'

invokeMe.call(thisObj, arg1, arg2); // Output: 'JavaScript Hello World'

apply takes the arguments to be passed in a single array.
call takes the arguments to be passed explicitly.

A useful mnemonic I found here is
"a for array and c for comma."

🤝 `bind`

The method bind also has the same calling syntax like call but, the significant difference is that
call calls the function immediately and,
bind only binds the function and creates a new function that can be called later.

function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind1 = invokeMe.bind(thisObj, arg1, arg2); // No Output Yet
// Invoking the function ⬇
bind1(); // Output: 'JavaScript Hello World'

To better understand bind, focus on the fact that it is for binding a function with a this scope and not for immediate invocation.
This means that the arguments that need to be passed are not required when binding the function. They can be passed when invoking the function (usual programming style).

function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind2 = invokeMe.bind(thisObj); // No Output Yet
// Invoking the function ⬇
bind2(arg1, arg2); // Output: 'JavaScript Hello World'

That's it. That covers the key usage guidelines for apply, call and bind. The explanation helps us understand that in OOPS, these methods help us reuse a single function for different objects without having to rewrite it for a new scope object.

JavaScript Closures: A Simple Explanation.

Kedar — Sat, 20 Jul 2019 20:47:36 +0000

Without any fancy intro, let's jump directly to what closure is.

Simply put, Closure is an inner function that remembers the environment it was created in.
Think of it like an aware function has access to the values (and parameters) from an outer function.

What makes a closure powerful is that it is capable of reading and manipulating the data of its outer functions.

Here's a very simple example of a closure.
Think of it as a code from an app. Our goal is to prompt the user to rate the app on every 3rd visit.

function promptRating() {
  var appUsage = 0;

  return function() {
    appUsagae++;
    if (appUsage % 3 === 0) console.log('Please rate the app.');
  }
};

promptRating is a function that returns an inner function. This inner function is a closure. It remembers and has access to the variable appUsage from the outer function.

To see it in action:

// Init the outer function
var prompt = promptRating();

// Call `prompt` in regular workflow.
// If this is a multiple-of-3 visit, the user will be prompted to rate the app.
prompt(); // No Output
prompt(); // No Output
prompt(); // Output: Please rate the app.

Being so simple yet powerful has its trade-offs: most notably when creating closures inside loops. Remember that closures have access to the data of the outer function.
So in a loop based on i, the code inside the closure will execute based on the current value of i. Not the old value of i which existed when the closure was created.
Here's a simple code to explain this:

function arrayOfNums(num) {
  var output = [];
  for (var i = 0; i < num; i++) {
    // Closure being pushed into the output array:
    output.push(function() { return i; }); 
  }
  return output;
}

var arr = arrayOfNums(3);
arr[0](); // Output: 3
arr[1](); // Output: 3
arr[2](); // Output: 3

Another gotcha instance would be creating closures inside a timeout/interval. When run, the code inside the closure will execute based on the current data of the outer function. The values of this data may have gone stale before the timeout was met.

Here's a simple code to explain this:

function countdown(upto) {
  for (var i = 0; i < upto; i++) {
    // Closure set to run after 1000ms
    setTimeout(() => console.log(i), 1000);
  }
};

countdown(5); // Output: 5 5 5 5 5

In conclusion, closures are simple beings. It is always an inner function which has access to the outer function scope.
If the outer function is called multiple times, every call creates a new closure. Closure's existence is dependent on their parent function's existence. Like I said, simple beings.

CSS-Only Multi-Color Backgrounds

Kedar — Fri, 21 Jun 2019 18:21:51 +0000

The Metro design UI brought by Microsoft with Windows 8 may not have been largely received with a positive response (mostly because of the major UI overhaul from Windows 7), but it opened the doors to a new era of User Interface. Other than introducing a beautiful implementation of flat design, thin typography, and expansive images, it brought what I believe was lacking in the traditional Skeuomorph design: colorfulness.

iOS and Android then updated their design standards with iOS 7 and Material design respectively. Both iOS and Material designs also went for flat designs and thin typography: Helvetica Neue (later San Francisco) and Roboto respectively. And both, in their design overhauls, introduced colors and gradients like they were unheard of.

So now that we've established that vibrant colors play a major role in all modern designs today, let's check out a different implementation to the traditional use of CSS background gradients.

In this implementation, we rely on the color-stops parameter in the linear-gradient() (or radial-gradient) property. These stops decide where you want to start a particular color. The boilerplate for the property we'll be using is:

background: linear-gradient(<angle>, color1 color1-stop-at, color2 color2-start-at);

The simple logic here is that we stop the first color at an x% and start the second color at x% or <x%. This removes the "gradient" from the linear-gradient and defines a clear edge between both colors giving the background a multi-colored-material effect.

In Action:

background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);

gets us:

Looks beautiful, doesn't it? Add some text on it and it looks like a nice highlighted element. The above example has some extra CSS style thrown in (like border-radius and box-shadow).

Essentially, the background property can hold two contents one over the other: 2 gradients, 2 images or you can mix-and-match any of those.
To use more than 2 colors (because why not), put the powerful rgba() to use and use 2 gradient parameters.
Here's an example with the background property holding an image and masking some portion of the image with a gradient of orange and transparent.

Use a dominant color from the image or a completely contrast color for the rich look.

Like this:

Sample code for such a banner would be:

background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('planets.jpg');

Here's a codepen with some examples (including the use of radial-gradient).

Re-creating "Google Pixel 3a" Website's Camera Features Demo

Kedar — Tue, 14 May 2019 20:16:36 +0000

Google launched Pixel 3a last week. On its website, it brilliantly demos its camera's features: Depth Editor and Color Pop.

Depth Editor (change the background blur/ bokeh):

Color Pop Demo (change the background color to black & white)

Pixel camera is undoubtedly amazing. And its demo on the website is intriguing.
You can play with the slider under the pictures. Increase or decrease the effect. It's pretty cool.

(Re)Creating that demo:

Let's do the Background-blur or Bokeh effect. I got this amazing image from Unsplash.

Note: This is not a how-to coding article on actually blurring the background or changing the background saturation dynamically. That is not what Google is doing on the website either.

Here's how it's done (And how Google is doing it):

Two images: One with no effect applied, the other with maximum effect applied. One image on top of the other. The slider increases/decreases the opacity of the image on the top.
Smart technique!

Here's how to do it:

Overlapping

The image from Unsplash would be the no effect applied version of our image (version-1).
I blurred the background for that image in Photoshop. (Tip: You can also do this in basic Image Editing apps like Snapseed).
The edited image with the background blurred would be the maximum effect applied version (version-2).
To stack the images, we simply need to specify position: absolute and same position attributes (top, left ...) for both the images.

So, in HTML:

  <div class="images">
    <img src="//version-1">
    <img id="blur-img" class="blur-img" src="//version-2">
  </div>

And in CSS:

  img {
    width: 300px;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  .blur-img {
    opacity: 0;
  }

Now the image with id="blur-img" (specified in HTML) will be placed exactly on top of the version-1 image. And we set the opacity of the version-2 image (the blurred one) to 0.
So, the only image visible would be version-1 (the original one).

Sliding through

The input HTML element with type="range" acts as a slider. It takes in min and max values. For our convenience, we set the min to 0 and max to 100.
With JS, we need to get the value of the range input.
Based on the value of the range input, the opacity of the top image (id="blur-img") will go from 0 (hidden) to 1 (visible).

So, in JS, add a method to handle that:

const changeBlur = (value) => {
  document.getElementById("blur-img").style.opacity = value/100;
}

We divide the value by 100 because the range input will return values between 0 and 100, and the opacity of the image needs to range from 0 to 1.

And in HTML, add the range input:

<input class="slider" type="range" min="0" max="100" value="0"
oninput="changeBlur(this.value)">

🎉 That's pretty much it. It's very few lines of code, but the effect is exceptional.

Here's the CodePen demo for the Background Blur effect:

Here's the CodePen demo for the Color Pop effect:

Creating a Node app with React, Webpack 4, Babel 7, Express and Sass

Kedar — Fri, 10 May 2019 18:35:55 +0000

🏁 Prologue

🆕 Make a new directory. Let's call it react-boilerplate.
mkdir react-boilerplate

And cd into it.
cd react-boilerplate

Make sure you have node and npm installed. Run these commands to make sure:
node -v
npm -v
If you don't have either of it, click here and install them first.

🎬 Now, initialize the node project.
npm init

✨ You will be prompted to enter some basic information. Once that is entered and done, you should have a package.json file in your folder.

🌲 Chapter 1: Tree of Life

1.1 Express

First things first: we make a server. We're using Express.js framework so that we can architect our server, handle our routes and build RESTful APIs.

If handling routes and APIs is not your requirement, you can still use Express or to keep things simpler, you can look into webpack-dev-server.

📦 Install Express.js:
npm install --save express

✨ A folder called node_modules should automatically be created. Anything we install in our project will reside in that folder.

🆕 Time to write the server. Create a new folder called server. In that new folder, create a file index.js. Add this basic minimal code to that file:

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const mockResponse = {
  foo: 'bar',
  bar: 'foo'
};
app.get('/api', (req, res) => {
  res.send(mockResponse);
});
app.get('/', (req, res) => {
 res.status(200).send('Hello World!');
});
app.listen(port, function () {
 console.log('App listening on port: ' + port);
});

This allows the app to run on the specified port.
The code also tells the app that home route: "/" should return a status of 200 (success) and send the text: Hello World. Basic enough!
It also has a route "/api" that returns a dummy JSON object. It shows how fetching data would work.

⭐️ Remember that the order of the routes matters. When a request comes through, Express starts matching routes from the top. When it matches a route, the response is returned and further routes are not checked.

✏️ Now that the server is set up, in the package.json file, under "scripts", add a start command like so:

"scripts": {
  "start": "node server/index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
}

Here, we're telling Node, that to start the project, start with server/index.js.

🏃🏻‍♂️If you run the npm run start command now, you should get a message:
"App listening on port: 3000" on the terminal.

🎉 Now go to http://localhost:3000 on your browser and the "Hello World" message should be showing up there. Go to http://localhost:3000/api and the dummy JSON should show up.

1.2 Webpack

📦 Time to install

webpack (The bundler)
webpack-cli (Command Line Interface to be able to run webpack commands)

npm install --save-dev webpack webpack-cli

In the package.json file, under "scripts", add a build command:

"scripts": {
  "start": "node server/index.js",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
}

🆕 Now, create a folder called src. This is where most of our project's source code will exist. In that new folder src, create a file index.js.
Leave the file empty for now.

🏃🏻‍♂️If you run the npm run build command, it will create a dist folder with a bundled main.js file in it. The code in it will be minified for production use.

🛰️ Chapter 2: Twilight Ozone

2.1 Babel

🤗 React embraces JSX. (Although JS would work perfectly fine too).
Babel helps compile JSX syntax to JS.
♻️ Not just that, but for regular .js files, we can now use the ES6 syntax and Babel will compile that to its equivalent ES5 form.

📦 Install

@babel/core (To transform ES6+ code to ES5)
@babel/preset-env (Preset to allow polyfills)
@babel/preset-react (Preset for React and JSX)
babel-loader (Webpack helper)

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Among these 4 new packages, 2 of them are presets. Babel core needs to know that it has these plugins. They need to be specified.

🆕 On the project's root level, create a .babelrc file. And specify the presets as an array like so:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

If your code needs to be polyfilled, you will also need these Node packages: core-js and regenerator-runtime. More about that here.

2.2 Babel + Webpack

Based on Babel's functionality, Webpack needs to know that .js and .jsx files need to go through Babel before being bundled.
So, we need to configure Webpack for that rule.

🆕 On the project's root level, create a webpack.config.js file. This will be the file for all webpack configs. Add the rule to it like so:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

⭐️ Remember: Since webpack bundles everything and creates a simple browser-readable code, all packages, presets and plugins you install will need to be configured in webpack.

🏖️ Chapter 3: Utopia

3.1 React

Time to install react and react-dom.
npm install --save react react-dom

🆕 In the folder src/, create a new file index.html. This will be the main and the only HTML file in our project.
It would be like any regular HTML file you've made, with one difference: It needs a <div> in the <body> that React can populate.
🔍 And it needs some form of identifier that React can lookup for.
We set id="root" on the div. You can set the id to anything you want.
Here's what a simple index.html with <div id="root"></div> looks like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Boilerplate</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

✏️ Remember that empty src/index.js file we created in Section 1.2?
Time to add code to it:

import React from 'react';
import ReactDOM from 'react-dom';
const Index = () => {
  return <div>Welcome to React!</div>;
};
ReactDOM.render(<Index />, document.getElementById('root'));

⚡️Here, Index is a functional component that returns a React element. And ReactDOM renders it inside the <div id="root"></div> from index.html.

3.2 React + Webpack

Similar to what we did for .js and .jsx files, we need to tell Webpack what to do with the new .html file. Webpack needs to bundle it to the dist folder.

📦 For that we install html-webpack-plugin.
npm install --save-dev html-webpack-plugin

✏️ The webpack config file needs to be updated to handle this plugin. We also tell webpack that the now-coded src/index.js is the entry point.
Here's what the config file looks like after adding that:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html", 
  filename: "./index.html"
});
module.exports = {
  entry: "./src/index.js",
  output: { // NEW
    path: path.join(__dirname, 'dist'),
    filename: "[name].js"
  }, // NEW Ends
  plugins: [htmlPlugin],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

When instantiating htmlPlugin, the template option tells webpack what file to pick and the filename option tells what to name the bundled .html file in the dist folder.

3.3 React + Express

🏃🏻‍♂️ If you run npm run start now, we would still get the "Hello World" message on localhost. That is because the Express server does not know of these new files.

✏️ In package.json, the start script simply starts the server.
We now need the webpack to bundle up our files and then start the server.
Under "scripts", add a new dev command.

"scripts": {
  "start": "node server/index.js",
  "dev": "webpack --mode development && node server/index.js",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
}

We should now update Express and change what the route "/" returns.
It should return the dist/index.html file.

✏️ In server/index.js, make the updates (New parts of code end with a comment: // NEW):

const express = require('express');
const path = require('path'); // NEW

const app = express();
const port = process.env.PORT || 3000;
const DIST_DIR = path.join(__dirname, '../dist'); // NEW
const HTML_FILE = path.join(DIST_DIR, 'index.html'); // NEW
const mockResponse = {
  foo: 'bar',
  bar: 'foo'
};
app.use(express.static(DIST_DIR)); // NEW
app.get('/api', (req, res) => {
  res.send(mockResponse);
});
app.get('/', (req, res) => {
 res.sendFile(HTML_FILE); // EDIT
});
app.listen(port, function () {
 console.log('App listening on port: ' + port);
});

🎉 Now run npm run dev and go to http://localhost:3000 on your browser. The "Welcome to React!" message from src/index.js should be showing up there. The "/api" route still works as before.

🍵 Chapter 4: Bottom Line Green

4.1 Sass

Time to make stuff look good. Time to install node-sass and the required loaders: style-loader, css-loader and sass-loader.

npm install --save-dev node-sass style-loader css-loader sass-loader

🆕 Create a new file styles.scss in the folder src/. Add some styles to that file.

Here's a basic (and popular) code to use system fonts on your page.
We also set its color property.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  Helvetica, Roboto, Arial, sans-serif;
  color: brown;
}

This would be a good file to add top-level and/or global styles.

✏️ Import the new styles.scss file. You can add it either to the index.html or to the index.js file. To plan for consistency, we import it in index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.scss';
const Index = () => {
  return <div>Welcome to React!</div>;
};
ReactDOM.render(<Index />, document.getElementById('app'));

4.2 Sass + Webpack

Like everything else, Webpack needs to know what to do with .scss files to correctly bundle them to a browser-understandable code.

✏️ In webpack.config.js, add the new rule just like the rule we added for babel-loader. So, in the rules array in the module object in module.exports, add:

{
  test: /\.s?css$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

🎉 Now run npm run dev and go to http://localhost:3000 on your browser. The "Welcome to React! message" should show up in the system font in brown.

⌛ Epilogue

🖇️ React Components

React projects are made up of a number of smaller components. The Index in src/index.js is one such component. You will be creating more such components and importing them (into one another 🤨).

📂 I would suggest creating a folder called components/ inside the src/ folder. And store all the other components in that folder.

Ideally, inside of components/, create a sub-folder for every component.
But it's up to the individual preference!

💡 Don't forget that: React component files should export the component Class or function.
Once you add some components to the src/index.js, it would look something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header/index.jsx';
import Content from './components/Content/index.jsx';
const Index = () => {
  return (
    <div className="container">
      <Header />
      <Content />
    </div>
  );
};
ReactDOM.render(<Index />, document.getElementById('app'));

🔧 Additional Webpack Configuration

Like other files, images or any other static files also need to be bundled. Webpack needs to know of that.
📦 Install file-loader as a devDependency (--save-dev) for all of such files.
And add the following rule in webpack.config.js:

{
  test: /\.(png|svg|jpg|gif)$/,
  loader: "file-loader",
  options: { name: '/static/[name].[ext]' }
}

In the above code, the test regex only specifies general image extensions. But, you can add any extensions for other files too (in the same rule object).

✏️ To use an image or any other assets in the components, it needs to be imported in that.js/.jsx file first. So, Webpack can bundle it right and make it available in the bundled folder. You could use the actual [name] of the file or [hash] it up. With or without the file [ext].

// Import
import LOGO from '<path-to-file>/logo.png';

...

// Usage
<img src={LOGO} alt="Page Logo" />

🙅🏼‍♂️ Git, ignore!

For deployment, a Node-compatible platform like Heroku or Netlify, runs the build command in your app. That installs all the node_modules and generates the dist folder and its contents.
So, we don't need to push the local folders: node_modules and dist to remote.

🆕 To let Git know this, create a new file .gitignore on the project root level.
Anything you want Git to ignore can be added here. Here's a basic version:

# Deployment directories
node_modules
dist
# Optional npm cache directory
.npm
# Mac
.DS_Store

🍺 That concludes the setup. This project can act as a great boilerplate for any future React w/ server apps or even for stand-alone Express projects.

👍🏼 Thanks for making it all the way through the long article. Setting up an error-free Node app with Webpack and Babel and Express is definitely not a cakewalk. But I hope this article helped you.

🌏 Go Planet!