DEV Community: Rangga Putra

What is this in Javascript

Rangga Putra — Fri, 02 Jun 2023 06:02:44 +0000

This is confusing

this in Javascript is quirky, unlike in other programming languages where this is usually quite straightforward as it is a reference to the object where the property or method is invoked, in Javascript this's value is varied by its usages. Let's take a look.

This in a regular function

this in regular function refers to the execution context of the codes in the example shown below this value is the Node.js's global object if the function is run in the browser then the value is the browser's window object.

This in strict mode

One thing to keep in mind while working with this is whether you are using the strict mode or not, introduced in ES5, strict mode is a restricted version of JavaScript, it's supposed to help you write secure codes. In strict mode the global execution context is undefined.

This in an event handler

this when evaluated inside the callback of an event listener refers to the element where the event is triggered.

This in an object

In object, this refers to the object which calls the function. In the example below introduce is a method of person object.

This in an arrow function

this inside an arrow function is where it gets confusing. unlike regular function, where this is bound to the object that calls the function, the arrow function uses something called lexical scoping which basically looks for this value in their enclosing parent and inherits it. In the example below, this inside the introduce method inherits its value from the person object which has this value of the window object, while this inside the doIntroduction inherit its value from casualIntroduce method since it's a regular function its bind this value to person object.

This in a constructor function

If you use this in a constructor function and invoke it with the new keyword it will create a new object from this defined inside the function and this will refer to the said object.

This can be whatever you want

But if all of the usages mentioned above are confusing to you and you have had enough of it and don't want to guess what value of this in your codes, you can explicitly set the value yourself using bind, call or apply method. In the examples below you can use bind to create a new function which has this value of the object that you passed as the first argument if you don't want to create a new function you can use call or apply, the difference between the two is that with apply you pass the function's second arguments as an array.

Creating React SPA Boilerplate with Webpack

Rangga Putra — Sun, 15 Jan 2023 16:34:05 +0000

First, initiate the project by running

npm init

After it's done, let's install the packages we need to run a basic React Single Page Application.

npm i react react-dom react-router-dom

For us to be able to use modern Javascript we need babel to compile our codes.

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

create a .babelrc file to place our babel configuration, for now, only set it to use the preset-env and preset-react

// .babelrc

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

Now let's bring webpack into our project

npm i -D webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin

we will use different webpack configurations for the development and production server, so will split our webpack configuration into several files, so later we need to merge it with webpack-merge.

The html-webpack-plugin will generate an HTML5 file for us that includes all your webpack bundles. The webpack-dev-server is required to serve our project in development, and we will use the webpack-cli to build and serve our project.

Now we have to setup the webpack configurations and the app's entry point. First, we create the common webpack configuration in a file named webpack.common.js in there we will set the app's entry point, how files are resolved, and bundles output and we will also configure webpack to handle asset files like images and font.

// webpack.common.js

const path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  output: {
    filename: "[name]-[fullhash].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  optimization: { runtimeChunk: true },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.(svg|ico|png|jpg|jpeg|gif|webp)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name]-[fullhash].[ext]",
            outputPath: "assets/img",
          },
        },
      },
      {
        test: /\.(otf|eot|ttf|woff2|woff)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name]-[fullhash].[ext]",
            outputPath: "assets/font",
          },
        },
      },
    ],
  },
};

Next, let's create a configuration for the development, and name the file webpack.dev.js we will merge the common configration with this development-only configuration in which we set the dev server, and type of source-map and we will also configure webpack to handle CSS files and HTML templates.

// webpack.dev.js

const path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: "development",
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    liveReload: true,
    open: true,
    port: 8080,
    historyApiFallback: true,
    compress: true,
  },
  optimization: {
    minimize: false,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "react app",
      template: "./src/index.html",
    }),
  ],
});

Finally, we create a configuration for the production. for the production build, we want to minimize the bundles so we add additional plugins to optimize our file, for CSS we use css-minimizer-webpack-plugin to minify the CSS using nanocss under the hood and mini-css-extract-plugin to extract our CSS into separated bundle file. so let's install both of them.

npm i -D css-minimizer-webpack-plugin mini-css-extract-plugin

For HTML optimization, we will use the HtmlWebpackPlugin to minify our document, while for Javascript we can use terser which is included in webpack 5 and enabled by default.

// webpack.prod.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");

module.exports = merge(common, {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      `...`,
      new CssMinimizerPlugin(),
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        minify: {
          collapseWhitespace: true,
          removeComments: true,
          removeRedundantAttributes: true,
        },
      }),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
});

For the React app's entry point, first let's create a folder called src inside the folder, create an HTML5 document to attach our React app into

// src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
  </body>
</html>

Let's also create a React component with a little hello world in it

// src/App.jsx

import React from "react";

const App = () => {
  return <h1>Hello World</h1>;
};

export default App;

Finally, create a Javascript to render our main React app and setup react-router routes

// src/index.js

import React from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
]);

createRoot(document.getElementById("app")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Let's also add scripts to run and build our project to the package.json

  "scripts": {
    "dev": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },

Now try running npm run dev command and it should work and launch a development server

Stagger Animation with Vue 3 and CSS

Rangga Putra — Sun, 18 Dec 2022 21:24:26 +0000

Animating your site could make your site looks more polished. one of the popular types of animation is stagger animation it looks cool to watch elements in your site appears one by one. you might think it is difficult to implement stagger animation on your site, but it is not, Using the Vue transition component and modern CSS you can make stagger animation with a few lines of code.

What is the Vue Transition Component?

The transition component is a built-in component in Vue that applies CSS-based enter and leave animations to its children, The transition can be triggered by v-if, v-show or toggling a dynamic component.

According to the documentation, there are six classes applied throughout the cycle of the transition.

.v-enter-from: Added before the element is inserted, removed one frame after the element is inserted.
.v-enter-active: Active state for entering. Applied during the entire entering phase. Added before the element is inserted, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
.v-enter-to: Added one frame after the element is inserted (at the same time v-enter-from is removed), removed when the transition/animation finishes.
.v-leave-from: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
.v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when a leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
.v-leave-to: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave-from is removed), removed when the transition/animation finishes.

most likely you don't need to use all of the six classes, the most important is the .v-enter-from class. for example, if your page is static and you only want to animate elements entering the screen and never remove them, so let's do that and implement it.

Implementation

First, let's create a button to toggle the element's visibility, and then add a few div elements, give it a class of .box and wraps them in the transition component, Then define the element styling, transition properties, duration and timing functions of the element in the .box class and then we define what to animate, in this case, we will set the opacity to 0 and scale to 0 to give it a popup effect in the .v-enter-from .box class.

as you can see when we toggle the element to be visible it animates a popup effect on entering but they are all popping up at the same time, we need to make them pop up one by one so we need to add a transition delay to all of them, We also need to specify the duration as a prop of the transition component, the value should match the transition duration + total delay of all elements combined, In this case, its 500ms + 250ms + 500ms = 1250

but that doesn't look very scalable, what if we have a dynamic number of elements? we don't want to manually specify a delay every time we add a new element. that is when the CSS variable comes into the picture. we can set a CSS variable as an inline style in our element. let's pass it the index of the element. then we can use this index to calculate the transition delay value for each element like this.

but what if we also want to animate when the elements are leaving the screen well it's easy we can just apply our animation above in the .v-leave-to .box class.

and that's about it.