DEV Community: Ayushman Bilas Thakur

JWT Authentication Concepts

Ayushman Bilas Thakur — Mon, 25 Jan 2021 17:50:52 +0000

Recently I could not get any idea, what to write a post about. Simultaneously I was working on how to do JWT authentication. It took a lot of time for me to figure out how to do JWT authentication properly. So, in this series of posts, I'm going to talk about how to do JWT authentication in a proper way.

Did you know? JWT stands for JSON Web Token

Basics of Access and Refresh Token

There are two kinds of token - Access Token and Refresh Token. Access Token is the main JWT token. It is used to authenticate the user and give the user access to protected routes.

As you can tell, Access Token is pretty powerful. So, keeping it permanently active is not a good idea. Hackers can use that access token and do malicious requests to our server. Generally, we add expiry to our access tokens so that, the tokens are invalid after some time.

But this causes a new problem. Whenever the access token expires our authenticated user will no longer be authenticated. This causes a new problem. Every time, the access token expires the user needs to be unauthenticated. While this might be good for some specific scenarios, but most of the time you want your user experience to be seamless once they have logged in.

In such a condition, refresh token comes in. It will automatically refresh the access token, without the user even knowing that their token has expired. Refresh tokens generally have a longer lifespan than access token. However, they are not as powerful as an access token as they can only be used to generate a new access token.

Basic Workflow

So, let's talk about the basic workflow of JWT Authentication. The frontend makes a request with the username and password. Then that username and password are checked against the database. If the username and password match a user then an access token and a refresh token are generated with any unique information from the user(which can later be used to identify the unique user).

Now, the tokens are sent to the frontend and stored for future use. This access token will be sent with every request to obtain sensitive data from the backend. The tokens need to be stored properly so that they are not lost after a page reload. The main question now arises how to store these tokens. There are three options for storage -

Localstorage: The first option to store tokens will be to use localstorage of the browser. However, these tokens are not secure enough and vulnerable to XSS attacks.
Cookie: HTTP only Cookie is a good option to avoid XSS attack. But in that case, the tokens are vulnerable to CSRF attacks.
A mix of Cookie and runtime variable: According to me this is by far the best method to store the tokens. In this method, you store the access token inside a JS variable in the frontend while you store the refresh token in HTTP Only Cookie. In that way, your cookie if compromised will leak only the refresh token which alone can not do any damage to the system. Every time your page refreshes you have the refresh token to generate a new access token.

That will be it for this post. In the next post, I will discuss how I implemented this concept with express and vue.js.

A story I wanted to tell...

Ayushman Bilas Thakur — Mon, 24 Aug 2020 20:07:37 +0000

I know what I'm going to write is maybe a controversial post, but this one thing bugs me down. I want to tell my own story.

But before starting this post I need to make some confessions. Yes, I'm studying in a Tire 3 engineering college in India. Yes, I might be jealous of the tier 1 students. But what I'm going to tell is true and truth is often harsh. Another disclaimer, I'm a Computer Science student. So, I can't advocate for any other field of study in engineering. And a final disclaimer: this post might be rude, but this is what I wanted to tell for the past two years.

First of all let me clear some things for you. In India IIT's and NIT's are often called Tire 1 colleges. Some exceptionally renowned govt. and Private colleges are Tire 2 colleges and the rest of them are tire 3.

Now let's come to this - how students get admission in top tire computer science colleges. JEE Mains and JEE Advanced examinations. This exams test your skills in Physics, Chemistry and Mathematics. Now just step back 1 step and read that again - for admission in "Computer Science and Engineering" people are tested for their skills in Physics and Chemistry. I know mathematics is really useful for the core concepts of Computer Science. But Physics? Chemistry? Yeah, there might be some field specific cases, but in general, I don't think so.

Now, these experts in physics chemistry and mathematics get a chance to get to the tier 1 colleges. And they study computer science. And the kid who did not like chemistry and struggled to accumulate 1 - 2 hours a day just to learn game development (which is actually doing some programming related work) is thrown away in a tire 3 college. Yes, I appeared for JEE, both mains and advanced but Chemistry always backstabbed me. I got 72 in mathematics but in physics and chemistry I was in 30s and 20s. And in advanced I managed a score around 90 with mathematics and physics alone, in chemistry I got something near to 0(I can't remember, or maybe I never wanted to remember).

I know this is getting personal, but I want every reader reading this post, feel the discomfort, the sadness, the emotional pain I went through. Yes, after all this I was heartbroken enough to abandon game development completely. You can tell me, there is nothing to be sad about, or you can bounce back from here. But no, a kid stepping just into 18 is not adult enough to realize the "other" ways. Since my childhood I have been told one thing, "better college = better opportunities". And, yes it is totally true in India.

Remember the just adults getting admission in tire 1 colleges with computer science? Yes, in their colleges the MNCs and the best of the best companies go to find students. Yes, among those who are just interacting with computers on a deeper level for only 3 years(yes, in the 1st year you are given general Science subjects to study). Meanwhile, me and people like me who are tinkering with computers for more than 5 years often have to go to these MNCs to 'beg' for a job. And after every well trained 'robots' from IITs getting a job in these MNCs, thousands of students compete in ridiculous coding contest with more ridiculous coding challenges, just to get a job where they make a REST API calls to save form data. I can do that in 5 minutes. But the tire 1 student you are getting has to even be trained for doing that. Because, previously they knew Physics, Chemistry while coming into Computer Science, and now they know how to solve riddle like competitive coding problems in a whiteboard without an IDE and Google, which is just the opposite to solving competitive coding problems. I will talk more about competitive coding and DS Algo problems from a web dev perspective in a different post.

Sorry, I got a bit off-track. So, my point on that paragraph above was that, the students knowing physics and chemistry get better training, better opportunities and all that. While someone thriving on their passion since class 10, gets mediocre(compared to the IITs) guidance and chances, clinging on to which can be really considered as lucky.

So my question at the end is: should we follow the system or the passion? Should I study hard to get in a dream institute which may lead me to a dream job. Or, live with my true passion and climb my way there.

React for Vue.js Devs: My Experience

Ayushman Bilas Thakur — Sun, 02 Aug 2020 15:16:12 +0000

Recently I was having a look at the online job and internship situation online. Though I started with React, soon Vue.js became my preferred frontend framework. So, when I discovered that most of the online jobs and internships look for React developer, rather than Vue.js developer, I found myself re-learning react from the ground up. Today, in this post I'm going to talk about the points I noticed as a vue.js developer learning react.

Note: All the comparisons are done here based on the "base code" provided by their individual CLIs. So, the simple component structure by importing scripts is not discussed.

0. The CLI:

Both React and Vue.js provide a CLI to set up the projects in an optimal way. In vue.js the CLI takes care of some extra setups like Typescript selection, CSS pre-processor selection, Vuex(state management) setup, Vue Router setup and all that. For doing all those setup in react you need to do it manually separately.

One more advantage of vue CLI over React is that vue CLI also provides a GUI to setup projects.

While the vue CLI being really big it is recommended to install it instead of using it with npx, you can use react CLI with npx directly.

For vue.js you need to install the CLI with this command:

npm i -g @vue/cli

Warning: The old vue CLI is known as vue-cli. So, if you have that uninstall that and install this new CLI.

Once installed you can use this CLI to create a new Vue.js application:

vue create new-project

However, if you don't want to go through all this slow setup process you can use vite to create vue app in no time, but it is not for production-level apps yet.

npm init vite-app test

On the other hand, to set up a react project with CLI you can use this command:

npx create-react-app test

Or, you can first install this CLI globally and then use it:

npm install -g create-react-app
create-react-app test

Did you know? you can use vite for creating react apps quickly as well? Well the command for that will be:

npm init vite-app react-app --template react

1. The component structure:

In vue.js we generally work with components with .vue extension. These files have three parts:

a. The HTML layout in <template></template> part.
b. The CSS part in <style></style> tags.
c. The logical JavaScript part in <script></script> tags.

Example Vue component:

<template>
  <h1>Hello World</h1>
</template>

<script>
    export default {
        name: "HelloWorld",
        props: {},
        data() {
            return {
                //if any data is required then it is passed here
            }
        },
        methods: {
            //all the required methods go here...
        }
    }
</script>

<style scoped>
    h1 {
        text-align: "center" 
    }
</style>

While in react we work with components delivered by plain Javascript files, sometimes .jsx files. According to the modern react function based component structure, you will need a function returning HTML like markup(JSX) from a JS function. A typical react function based component looks like:

import react from 'react';

function HelloWorld(props){
   //all the component based state/varibales/data and methods can go here

   return(
      <h1>Hello World</h1>
   )
}

export default HelloWorld;

2. The HTML/Markup

For any webpage, the most important thing is the markup. In Vue.js you can write your component's markup directly in normal HTML inside the <template></template> tags.

But in React as your component is returned by a JavaScript function via jsx, so there are some small changes:

a. You can't use class and similar reserved words in JavaScipt. So you will need to use some alternatives provided in jsx like className instead of class
b. pretty much all the HTML element properties are to be written in "camelCase"

3. Dealing with style

In vue.js the style can be defined directly inside the component. It can be written in normal CSS syntax easily the <style></style> tags. From here you can easily change the language used for styling(SCSS, LESS etc., if it is configured) or you can simply change the scope of the stylesheet.

In React.js there are two ways to define styles:

a. You can write a CSS in a separate .css file and can easily import it in your react component like so:

import "./app.css"

However, this styling is globally applied.

b. You can write CSS as a JavaScript object using JSS

import React from "react";
import injectSheet from "react-jss";

const styles = {
  center: {
    textAlign: "center"
  }
};

const HelloWorld = ({ classes }) => (
  <h1 className={classes.center}>
    Hello World
  </h1>
);

const StyledWorld = injectSheet(styles)(HelloWorld);

export default StyledWorld

I avoided the inline CSS part as I don't prefer it as a good method to write CSS

4. Dynamic Variables:

In vue.js the data is normally managed using the data() method where we define a function which returns all of our required data. Then using the methods we define the functions we can call later to modify the values of the defined data.

But in react you need to use hooks to define both the required data as well as the main method which need to be called to change that data.

To render the value of these dynamic variables directly in the website in Vue we use the {{variable name}} template literal:

<template>
  <h1>
    {{requiredVariable}}
  </h1>
</template>

<script>
  export default{
     data(){
        return(
          requiredVariable: "Hello"
        )
     },
     methods: {
        //...
     }
  }
</script>

While in React we can do the same by using {variable_name} template literal:

import React, {useState} from 'react'

function Home() {
  const [requiredVariable, setRequiredVariable] = useState("Hello");

  //any function which might dynamically update the link by calling setRequiredVariable inside it

  return (
    <h1>
      {requiredVariable}
    </h1>
  );
}

export default Home;

4-a Getting and Passing props to elements

In both vue.js and react the props are generally passed directly to the element. Example (with an element named ChildComponent):

<ChildComponent message="Hello" />

Now you can also pass any dynamic data from the parent to the child component. For vue.js, that can be easily done by using the v-bind or : directive. Example:

<ChildComponent :count="count"/>

Note: Here a data needs to be predefined with the variable name count so that you can bind it.

If you want to do the same thing with react it would look like:

<ChildComponent count={count}/>

Note: Similar to the vue.js disclaimer, you need a count variable predefined in your component to be used here

Now, how to receive the props? For that, in vue.js in the export part of the <script> we need to define the props key with an object with details of the props received by that element, with the prop type and the prop name. That will look somewhat like this for a component receiving "message" as a prop:

export default {
  name: "ChildComponent",
  props: {
    count: Number
  },
  data() {
    return {
      //other data for this component
    };
  },
  methods: {
    //methods for this component
  }
};
</script>

In react the same thing will be received in a functional component like this:

import React from "react";

export default function ChildComponent(props) {
  //this is extracting all the props from the general prop object passed. Here I have used object restructuring for that. This can also be done in the function arguments. 
  const { message } = props;
  return(
    <div>
      <h1>{props.message}</h1>
      {/* The same thing done with the pre extracted variable */}
      <h1>{message}</h1>
    </div>
  )
}

Note: If you are using react route then you get extra information in the props. While using vue.js router you get similar router related information in the special $route.params variable. This is important info for doing routing in vue.js and react

5 Using Dynamic Variable for HTML Element properties:

If you want to set HTML element properties like href value of a link or src value of an image element (i.e where you need only one-way data binding, as they can't be directly changed in the frontend) you can use v-bind or its shorthand : to bind their values to the dynamic data we have in the element. Example:

<template>
  <div>
    <a v-bind:href="aLinkDynamicallySet">Dynamic link by v-bind</a>
    <a :href="linkDynamicallySet">Dynamic link by :</a>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // other data
      linkDynamicallySet: "https://dev.to/ayushmanbthakur"
    }
  },
  methods: {
    //required methods
  }
}
</script>

If you want to do the same in the react, you can directly use the template syntax. Example:

import React, {useState, useEffect} from 'react'

function Home() {
  const [linkDynamicallySet, setLinkDynamicallySet] = useState("https://dev.to/ayushmanbthakur");

  //any function which might dynamically update the link by calling setLinkDynamicallySet inside it

  return (
    <a href={linkDynamicallySet}>Dynamic link</a>
  );
}

export default Home;

6. Calling the DOM events like "onclick":

React is different from vue.js in the aspect of calling DOM events like "onclick" and others. While in react you can call any DOM events using their "camelCased" version, in vue.js you can call these events using the v-on directive or the shorthand of that i.e @ to call the methods defined in script on DOM events.

In vue calling an onclick event on a button looks like:

<button @click="updateNum">click me</button>

In react calling onclick event on a button looks like:

<button onClick={updateNum}>click me</button>

Here I have presumed all the other functions are defined properly and accordingly

Did you know? In vue.js v-on directive you can call .prevent to execute the e.preventDefault without dealing with the event object directly in your method

7. Handling form input:

In vue.js you can use the already available v:model for a direct both way binding to update your predefined "data" easily.

While in react, due to the absence of such directive you need to define how to update your state according to the change of your input field and set the value of the input field according to the state variable.

A simple Vue based form will look like:

<template>
  <form v-on:submit="sub">
    <input type="email" v-model="email">
    <input type="submit" value="Subscribe" />
  </form>
</template>

<script>
  export default{
     data(){
        return(
          email: ""
        )
     },
     methods: {
        sub(){
           //all the required subtask
        }
     }
  }
</script>

Same code in react will look like:

import React, { useState } from "react";

export default function App() {
  const [email, setEmail] = useState("");

  const sub = (e) => {
    //all required task
  }

  return (
    <div>
      <form onSubmit={(e) => sub(e)}>
        <input 
           type="email" 
           value={email} 
           onChange={(e) => setEmail(e.target.value)} 
        />
        <input type="submit" value="Subscribe" />
      </form>
    </div>
  );
}

Conclusion

Well, this is just the tip of the iceberg. There are a lot of things which I left untouched, most notable among them is state management. I have my very first blog post discussing redux vs context API. I would like to do a similar post about vuex and redux in a separate post. Until then stay home, and keep coding😉.

A New Secret of GitHub

Ayushman Bilas Thakur — Fri, 10 Jul 2020 00:07:10 +0000

Before starting this post, huge thanks to Dipan Roy(github and Twitter) for making me aware of this new feature. The design I have gone for in my own homepage is inspired by his design as well.

If you visit someone's GitHub profile you could only see their profile picture, a description they provided, their popular/pinned repositories, and some links and details like - location, company, twitter link. Here is how my profile used to look like(maybe yours look like this as well):

But, now with this new secret feature, you can add a custom intro to your page. Mine looks like this:

So how to get that special README on your GitHub profile?

What to do to make that special README?

Remember that special repository you needed to make to get your portfolio page at your_github_username.github.io. Yes, the repository with your username. Now, this repository if now is public and has a README.MD can use that README file to create that special introduction README.

But as I did not have that repository, so I went to create a new one and was greeted with this message:

And now, make your README as you wish and create a nice intro.

To take reference from my README file check out my repository

Special Note: I have used shields.io for the badges on the top of my introductory README.

Different Ways to Center a Div in a Webpage

Ayushman Bilas Thakur — Sat, 04 Jul 2020 21:01:08 +0000

One of the most common things you might be doing as a web developer is to centre a div on a webpage. So, in this small post, I'm going to discuss 3 different ways to centre a div on a webpage.

Disclaimer: Some of these methods are not optimal, it is just like a test how far my creative mind can go.

For each and every solution here this will be our starter code. We will be starting with a hypothetical card which welcomes to a blog. (I have used the br tags to just decease a few lines of CSS)

<div class="card-holder">
  <div class="card">
     <h1>Hello There👋</h1>
    <br>
     <p>Welcome to my blog</p>
    <br> 
    <button>Get Started!</button>
  </div>
<div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }

.card-holder{
  width: 100vw;
  min-height: 100vh;
}

.card{
  background: #45CE30;
  padding: 20px;
  width: 80%;
  max-width: 500px;
  text-align: center;
  font-family: Arial;
}

The CSS written here is simply resetting the margin and padding for all elements. Setting the box-sizing to "border-box" makes it easier to deal with CSS as it includes all the margins and padding of an element within its width. After that, I set the div with class card-holder to take full available width and height of the viewport. This will be helpful; for positioning the inner div. Finally, there are some styles applied to the card giving it a background and some padding, then I specified width and max-width so that it doesn't look that big in big screens. Then I have aligned all the text to the center, and given them a font family of Arial.

After all this adjustment, our card will look somewhat like this.

The result we are trying to achieve:

1. The Flexbox way:

I generally use the flexbox way to centre a div on a webpage. For this, we need to modify the CSS of the outer div(i.e. the card-holder) to display it as flex and then we need to justify-content and align-items to be in the "center". So the code changes for that:

.card-holder{
  /* other base styles go here */
  display: flex;
  justify-content: center;
  align-items: center;
}

After these changes, the card will be centred.

2. Absolute positioning:

For this, we need to position of the parent element to be relative. Setting this would let us position the child element as absolute. Then we can shift the child element by 50% from top and 50% from left. So, at this stage, the CSS will look like:

.card-holder{
  /* other base styles go here */
  position: relative;
}

.card{
  /* other base style */
  position: absolute;
  top: 50%;
  left: 50%;
}

But, after all this, the div won't be centred. It will look like:

If you look minutely, you will notice that the top left corner of our card is centred in the page. So, we need to move the card now. One of the easiest ways to move the card irrespective of its size is to use the transform CSS property. Now, there are many things we can set with this CSS transform property, one of which is translate, which moves this element without changing other elements surrounding it. One of the best thing about this transform translate is that it can receive percentage values and these percentages are calculated according to the width and the height of the element on which we are applying this style.

So, setting the transform translateX and translateY to -50% each will make the card to move to left and up making its centre to come to the position where its top left corner was before. So that line of code looks like:

.card{
  /* other base style */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

3. Using Grid Template and Positioning:

When CSS grids and flexboxes came, they were a game-changer. They were introduced to save web developers from the hassles of using the "then-popular" floats and clearing floats. Using grid one can create almost any layout.

So our concept will be to declare a 3X3 grid and place our card in the middle grid. For that, we need to make the card-holder display as a grid and then we need to template that grid with three rows and 3 columns. For that the CSS required will be like:

.card-holder{
  /* other base styles go here */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

Now after doing this, you might not see any changes other than the change of height and width of the card. But if you use the dev tools you will be able to see the grid created like this:

Now, we need to get our card to the center grid. For that, we can use grid-row and grid-column properties to select between which grid lines should our grid item stay. The grid-line numbers look somewhat like this:

So, if you have a proper look at the line numbers then you will instantly notice that we need to place our card at grid line number 1 to 2 in the column and as well as in the row. So, that code will look like:

.card{
  /* other base style */
  grid-row: 2/3;
  grid-column: 2/3;
}

Now, at this point, you will see that this div is not properly centered. For that, we can use: margin: 0 auto; to center the card. But still, after that, the content inside the card won't be vertically aligned.

For this, we need to change the HTML to have the content of the card in another div. Then we need to divide our card into 3 columns and place the div inside the card in the middle column. So the HTML and CSS changes look like:

<body>
    <div class="card-holder">
        <div class="card">
            <div>
                <h1>Hello There👋</h1>
                <br>
                <p>Welcome to my blog</p>
                <br> 
                <button>Get Started!</button>
            </div>
        </div>
    <div>
</body>

  .card{
    /* other default style */
    grid-row: 2/3;
    grid-column: 2/3;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 1fr 6fr 1fr;
  }

  .card div{
    grid-row: 2/3;
  }

Now this method, will need some tinkering for smaller screen sizes, which can be done easily with media query and setting the grid-template-columns in .card-holder to be something like "1fr 5fr 1fr". In my case Setting it like this made it look like this on mobile devices:

To achieve this I used this piece of code:

  @media (max-width: 768px){
    .card-holder{
      grid-template-columns: 1fr 6fr 1fr;
    }
    .card{
      padding: 20px;
    }
  }

Some more tinkering might be needed for squarer devices. So this method is not all reliable.

Honorable mention 1: The very first approach I tried

In this approach, I just thought to set the margin of the card to "auto" thinking that setting the margin auto on horizontal centres it, then it will do the same for vertical margin. But alas, the case was not like that. Setting vertical margin to 0 defaults them to 0

Honorable mention 2: If you are just centering a text and you need nothing else

In this case, our HTML looks somewhat like this:

<body>
    <div class="card-holder">
        <h1>Hello World!</h1>
    <div>
</body>

And our initial CSS for card-holder and the h1 looks like:

  .card-holder{
    width: 100vw;
    min-height: 100vh;
  }

  h1{
    font-size: 4rem;
    font-family: Arial, Helvetica, sans-serif;
  }

This will look like this:

Now we can change this with just two lines of CSS in h1:

h1{
  font-size: 4rem;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 100vh;
}

This will look like:

Final Verdict

This was just a fun post just testing my CSS skills. If it was a practical project I would have used method 1 for centering the div. If you know any other methods please comment down below and let me know.

ES6 Module Based Javascript in Browser

Ayushman Bilas Thakur — Fri, 22 May 2020 15:16:17 +0000

I have been recently developing a game using vanilla HTML, CSS and JavaScript. (If you want to try the game out you can check out this site.) When I was initially developing the game, I took the "spaghetti code" approach. That means all of my code was crammed into a single javascript file which at the end of my first test release became almost 500 lines. Now, as I have coded it fresh it is really easy for me just to navigate the file and find out and edit things. I tried to be organized in the beginning but as time passed by, I was a little uncautious about the placement of the code. This created an utter mess. But then I found out, there is a better solution, currently supported by all the major browser - ES6 modules

Support

If you are using any feature in your latest vanilla web app(if you are using frameworks then the frameworks generally take care of those files) then make sure to check out the Can I Use website. So, before using ES6 in my game I went to Can I Use and searched the feature I was going to use - ES6 import. The result looked something like this:

So, as you can see, most of the mainstream modern browsers support es6 modules(90% devices overall). Now, production-level apps need to support almost all of the devices. But for your hobby projects, it is not so important. As chrome, safari and firefox (the major 3 browsers in the desktop and android world) can support ES6 modules so there is no reason for not using it.

Advantages

Using ES6 modules keeps your code short and clean for future use. Instead of cramming hundreds of lines of code into one file, it can be distributed into different files and thus the code will be readable for others using it later.

Moreover, unit testing can be done easily on this kind of code.

Project

I don't feel my posts are complete until I make a project using the technology I'm talking about. So, let's make a simple TODO app with CRUD functionality. The app will be using JavaScript variables to store the TODOs, so there is no permanence of data in this app.

Folder Structure

To start with I will keep my HTML and my CSS at the root of the project and the javascript will be kept in the js folder. So the initial folder structure will look like this:

Getting the basic HTML done

So, to start with I will be using the bolierplate code created by emmet and change the title to be modualrized todo. Meanwhile, I also linked the CSS to my HTML. So the initial code looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modularizeed todo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  </body>
</html>

Now let me explain the design I have used for the app and the markup will be really easy to understand. So I have taken a container, where on the top portion I have an h1 and a form, and on the bottom half I have the todos shown as an unordered list. Inside the list elements I have the name of the todo and each todo has two buttons, one for showing that the todo is done and another one is for deleting the tode. So the HTML inside the body looks something like this:

<div class="container">
    <div class="topbar_holder">
        <h1>TODO List</h1>
        <form id="add_todo" class="add_todo">
            <input type="text" id="todo_input" placeholder="Type your todo" />
            <input
            type="submit"
            id="submit_button"
            class="action_button green_button special"
            value="&gt;"
            />
        </form>
    </div>
    <ul class="todo_list">
        <li class="todo_card">
            <h3 class="todo_title">Test todo 001</h3>
            <div class="buttons_container">
            <button class="action_button green_button">
                &checkmark;
            </button>
            <button class="action_button">
                &cross;
            </button>
            </div>
        </li>
    </ul>
</div>

The list items in the ul are just temporary right now, we will be creating them via javascript, that is why we have given an id to the ul to populate it in javascript.

The styling

A small disclaimer before diving into the CSS, as this is not a CSS tutorial I have not explained that much CSS. if you want your app to look exactly like my app, use the styles or you can skip to the javascript part straight.

The styling of this app starts with the usual resets, and then I give the body and the div with the class container such styles that the container div is centred on the page and when it increases with the amount of todos added, it does not touch the edge:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.container {
  width: 90%;
  max-width: 500px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 20px;
}

In the next step I centered the h1 and stylized the topbar to have the form front and center:

.container h1 {
  text-align: center;
  margin-bottom: 20px;
}

.topbar_holder {
  border-radius: 20px 20px 0 0;
  padding: 20px;
  background-color: #00d87e;
}

.add_todo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

#todo_input {
  padding: 7px 15px;
  border-radius: 10px;
  outline: none;
  border: none;
  background: none;
  margin-right: 10px;
  font-size: 1rem;
  display: block;
  border: 2px solid black;
  transition: border 0.3s linear, color 0.3s linear 0.3s;
}

#todo_input:focus {
  border: 2px solid #003800;
  color: #003800;
}

#submit_button {
  border-radius: 100%;
  background-color: #ffdea1;
  color: black;
  font-weight: bold;
}

Next step was to implement the style for the todo list and the list items, so that each item shows the todo, the checkmark button and the cross button in a flex properly:

.todo_list {
  list-style: none;
  padding: 20px;
}

.todo_card {
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 2px solid black;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.buttons_container {
  display: flex;
}

.action_button {
  padding: 10px 15px;
  border-radius: 20px;
  margin: 0px 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #ff2a2a;
  color: #fff;
  font-size: 1.2rem;
  outline: none;
  border: none;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

Next I defined the style for the buttons on hover:

.action_button:hover {
  background-color: #be0404;
}

.action_button .button_text {
  font-size: 0.8rem;
  display: block;
}

.green_button {
  background-color: #05dd6a;
  color: black;
}

.green_button:hover {
  background-color: #077a2d;
  color: white;
}

Meanwhile I defined some style for displaying the todos marked as done differently:

.done h3 {
  color: red;
  display: block;
  position: relative;
}

.done h3::after {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  left: 0;
  right: 0;
  height: 3px;
  background-color: black;
}

Remember this class name done, it will come in use later.

Finally, I have defined some CSS to make the website responsive:

@media only screen and (max-width: 400px) {
  .add_todo,
  .todo_card {
    flex-direction: column;
  }

  .container h1 {
    margin-bottom: 5px;
  }
  .buttons_container {
    margin-top: 10px;
  }

  #todo_input {
    margin-bottom: 20px;
  }
}

JavaScript

Now let's get to the meat part of this tutorial, JavaScript. So, the first thing to note, while you are working with javascript modules you can not use the onclick methods to call some javascript functions. So I will be using addEventListener to listen to the click method.

The first thing will be to link our main JavaScript file to the HTML, and here is the first thing to note - we need to import as module. So the linking the main JavaScript file will be done this way:

<script type="module" src="./js/main.js"></script>

In this specific project, I will be using two classes. One class will be for declaring a todo and all its functionalities. So, let's just define the todo class. So I will be creating a new file in the js folder named todo.js

So, what properties do we need for a todo? We will need an id and a name and its status(to determine whether it is done or not). so that will be defined in a class like this:

export class Todo {
  id = "";
  name = "";
  status = false;
}

Now just having a class is not enough, we need to have a constructor function to create an object which we will be using to interact with one todo. So, the constructor function for this class will be to get the id of the todo and the name of the todo and initiate it. So the constructor for this will be:

export class Todo {
  id = "";
  name = "";
  status = false;
  constructor(id, name) {
    this.id = id;
    this.name = name;
    //false means not done and true means done
    this.status = false;
  }
}

Now, we will also need another function to deal with changing the status of our todo. Technically, as the status is a public variable so we can edit it directly, but I want to show how to work with member functions of a class. So, let's just define our function. So with all this code our todo class will be:

export class Todo {
  id = "";
  name = "";
  status = false;
  constructor(id, name) {
    this.id = id;
    this.name = name;
    //false means not done and true means done
    this.status = false;
  }

  toggleStatus() {
    this.status = !this.status;
  }
}

Now the next thing will be to define the todoManager. For that we will be using a new file named todoManager.js The todoManager will be class which will be keeping a list of the todos, adding them, updating them and deleting them. So the properties we need will be: a list of todo, a constructor function, a function to create and add todos to the list(this function will take the todo name and generate an id and will create the todo object), a function to find and update the status of a todo, a function to delete the todo. So, as per the explanation, we will need to import the todo class definition to create todo objects. So, with all of the things explained above the code in our todoManager.js will look like:

import { Todo } from "./todo.js";

export class TodoManager {
  todoList = [];

  constructor() {
    this.todoList = [];
  }

  addTodo(todoName) {
    this.todoList.push(new Todo(this.todoList.length, todoName));
  }

  removeTodo(id) {
    this.todoList = this.todoList.filter((todo) => todo.id !== id);
  }

  updateTodo(id) {
    this.todoList = this.todoList.map((todo) => {
      if (todo.id === id) todo.toggleStatus();
      return todo;
    });
  }
}

Now we can code in the main JavaScript file - main.js. So, in this file we need to first import our todoManger and initiate it:

import { TodoManager } from "./todoManager.js";

let todoHandler = new TodoManager();

Now the first thing will be to get the form and the input and on submission of the form, we need to get the input, create a new todo in our todoManager and clear our input. This will look like:

//after importing and initializing todoManager

//getting the input element
const todoInput = document.getElementById("todo_input");

//getting the add todo form and listne for the submit
document.getElementById("add_todo").addEventListener("submit", (e) => {
  e.preventDefault();
  if (todoInput.value === "") return;

  todoHandler.addTodo(todoInput.value);
  todoInput.value = "";
});

Now, this code can officially add a todo to the managing list, but we need to show the todos. For that, we need to get the ul inside which we are going to place the li elements. In the HTML we already made some dummy code. We are going to use a similar code here. For that we need to get the reference of ul then and update its innerHTML:

//initialization of todoManager

const todoList = document.querySelector(".todo_list");
todoList.innerHTML = "";

const updateTodoView = () => {
  todoList.innerHTML = "";
  todoHandler.todoList.forEach((e) => {
    todoList.innerHTML += `<li 
        class="todo_card ${e.status ? "done" : ""}" 
        id="${e.id}"
    }>
          <h3 class="todo_title">${e.name}</h3>
          <div class="buttons_container">
            <button class="action_button green_button" id="button_done_${e.id}">
              &checkmark;
            </button>
            <button class="action_button" id="button_delete_${e.id}">
              &cross;
            </button>
          </div>
        </li>`;
  });
};

//the form submission handling

In this case, we are simply giving each todo a class of done based on its status and id based on its ID. Then again we are adding ids to our check button and cross button so that we can reference them later to add event-listeners to them and handling their mark as done and delete events.

Now this app will be able to show the todos we add, once we call this updateTodoView function in our from submission handler:

document.getElementById("add_todo").addEventListener("submit", (e) => {
  //other code
  updateTodoView();
});

Next, our final task will be to make the &checkmark; and &cross; buttons work. For that, the best case will be to add those event listeners after we have rendered the todos in the list. And for that, we will be using the ids we provided to the specific button.

const updateTodoView = () => {
  // all of the rendering code

  todoHandler.todoList.forEach((e) => {
    document
      .getElementById(`button_done_${e.id}`)
      .addEventListener("click", () => {
        todoHandler.updateTodo(e.id);
        document.getElementById(e.id).classList.toggle("done");
      });

    document
      .getElementById(`button_delete_${e.id}`)
      .addEventListener("click", () => {
        todoHandler.removeTodo(e.id);
        updateTodoView();
      });
  });
};

We are simply using the ids we gave to each todo and its button and for the &checkmark; button we are toggling the status of the todo and instead of re-rendering the whole list, we are adding the class of done to the individual todo. And for the &cross; button we are getting the todo and removing it and then re-rendering the whole todo list.

And now, the app works completely fine. It can add remove and update the todo.

Conclusion

So this was just a basic app to bring up the module based javascript approach. There can be a lot more we can do with this approach. The final project code is available at GitHub. You can also see the hosted app here

What did I Learn While Making a Game with vanilla HTML, CSS and Javascript

Ayushman Bilas Thakur — Thu, 14 May 2020 18:47:38 +0000

Those of you who don't know, I recently made a game with the vanilla stack, i.e pure HTML, CSS and JavaScript. You can give the game a go at oddneven.netlify.app. After launching this game I came to know about some vulnerabilities of a web app made with pure HTML, CSS and JavaScript.

A. People can change the code: The bug which mostly annoyed me after releasing the game is that using the really powerful Chrome Dev Tools, people can access and change my code really easily. What people were using this for is:

a. Making the score variable to increment by a huge number for a correct answer, so that they can claim to get a ridiculously high score and flex on the others. In my game, this is more prominent as there is a global leaderboard.

This can also be done by the debugger tools provided by Google Chrome which can insert a breakpoint in the code at a certain line(specifically where the score is being incremented) and can change the variable from the console simply.

b. This one is not really related to changing the code, but, as people could see my JavaScript so it was easy for them to get the backend URL and send a request via any REST client like postman or insomnia and set their high score even without playing the game.

The solutions I came up with can't completely ensure that your code will be completely secure, but it can throw off such "hackers":

a. Minifying the code: Minifying the JavaScript code will make it to appear on one line. But Chrome has a tool to beautify the minified JavaScript:

So, Chrome Dev Tools apparently allow you to pretty-print the minified code, which defeats the purpose of the minifying for discouraging "hackers". But you should always minify your code for the production of big apps for faster loading time.

b. Obfuscating the code: One of the biggest mistakes I made after the first beta release of my code is to switch to a module-based approach for coding this game(a post on module based javascript on the web by me is under process😁) and I found it a bit difficult and not worth it to obfuscate my code without breaking it in some way or other. That thing aside, let's see how an obscurification looks like:

Normal code:

  let a = 10
  let b = 20
  c = a+b
  console.log(`${a},${b},${c}`)

obfuscated code:

const _0x53bb=['constructor','^([^\x20]+(\x20+[^\x20]+)+)+ [^\x20]}','test','return\x20/\x22\x20+\x20this\x20+\x20\x22/','compile','log'];(function(_0x4d6512,_0x53bbe2){const _0x2b6b66=function(_0x1bdf38){while(--_0x1bdf38){_0x4d6512['push'](_0x4d6512['shift']());}};const _0x138d55=function(){const _0x40964d={'data':{'key':'cookie','value':'timeout'},'setCookie':function(_0x35726b,_0x1009c9,_0xd473e1,_0x1f728d){_0x1f728d=_0x1f728d||{};let _0x4290f7=_0x1009c9+'='+_0xd473e1;let _0x254c28=0x0;for(let _0x68403e=0x0,_0x1b5f7e=_0x35726b['length'];_0x68403e<_0x1b5f7e;_0x68403e++){const _0x587822=_0x35726b[_0x68403e];_0x4290f7+=';\x20'+_0x587822;const _0x47187f=_0x35726b[_0x587822];_0x35726b['push'](_0x47187f);_0x1b5f7e=_0x35726b['length'];if(_0x47187f!==!![]){_0x4290f7+='='+_0x47187f;}}_0x1f728d['cookie']=_0x4290f7;},'removeCookie':function(){return'dev';},'getCookie':function(_0x5dbc77,_0x25358c){_0x5dbc77=_0x5dbc77||function(_0x3b38b8){return _0x3b38b8;};const _0x1a3408=_0x5dbc77(new RegExp('(?:^|;\x20)'+_0x25358c['replace'](/([.$?*|{}()[]\/+^])/g,'$1')+'=([^;]*)'));const _0x1acab6=function(_0x2d5f8a,_0x52a994){_0x2d5f8a(++_0x52a994);};_0x1acab6(_0x2b6b66,_0x53bbe2);return _0x1a3408?decodeURIComponent(_0x1a3408[0x1]):undefined;}};const _0x5b82c4=function(){const _0x1937bb=new RegExp('\x5cw+\x20*\x5c(\x5c)\x20*{\x5cw+\x20*[\x27|\x22].+[\x27|\x22];?\x20*}');return _0x1937bb['test'](_0x40964d['removeCookie']['toString']());};_0x40964d['updateCookie']=_0x5b82c4;let _0x41990b='';const _0x2bffd2=_0x40964d['updateCookie']();if(!_0x2bffd2){_0x40964d['setCookie'](['*'],'counter',0x1);}else if(_0x2bffd2){_0x41990b=_0x40964d['getCookie'](null,'counter');}else{_0x40964d['removeCookie']();}};_0x138d55();}(_0x53bb,0x1a9));const _0x2b6b=function(_0x4d6512,_0x53bbe2){_0x4d6512=_0x4d6512-0x0;let _0x2b6b66=_0x53bb[_0x4d6512];return _0x2b6b66;};const _0x40964d=function(){let _0x4290f7=!![];return function(_0x254c28,_0x68403e){const _0x1b5f7e=_0x4290f7?function(){if(_0x68403e){const _0x587822=_0x68403e['apply'](_0x254c28,arguments);_0x68403e=null;return _0x587822;}}:function(){};_0x4290f7=![];return _0x1b5f7e;};}();const _0x1bdf38=_0x40964d(this,function(){const _0x47187f=function(){const _0x5dbc77=_0x47187f[_0x2b6b('0x1')](_0x2b6b('0x4'))()[_0x2b6b('0x5')](_0x2b6b('0x2'));return!_0x5dbc77[_0x2b6b('0x3')](_0x1bdf38);};return _0x47187f();});_0x1bdf38();let a=0xa;let b=0x14;c=a+b;console[_0x2b6b('0x0')](a+','+b+','+c);

This might look gibberish, but if you minutely check it, trained eyes can still find the original code and change it. But obfuscation can be done to protect your Javascript code from others. If you want to know more about obfuscating code you can use obfuscator.io

c. Another solution to this client-side vulnerability will be to use some backend to process and store the score, which will:

Make a ton of request to the backend which is not acceptable for any production level app.
Will make the game unusable offline, which I don't want to happen.

d. To prevent the high score from being a ridiculous amount sent by the client using the exploits, I set up a barrier for the high score so that any score above that will be rejected by the system.

B. People can get your API and randomly request your backend to store new things: In this app, I relied on a small express based backend to store the scores from people. So, once they know the URL of the API they can use an API client to send the result to the server and store it. For larger apps having an API key in the client-side can cause data leak from your database.

The potential solution will be to keep a secret as HTTP only cookie and ask for it on each POST request so that it can validate if the connection is from an actual browser or not. Or otherwise, you can have a look at the user-agent header which often contain the details of the browsers being used.

From Angular to React to Vue - My Experience with the Major Frontend Frameworks

Ayushman Bilas Thakur — Mon, 11 May 2020 13:53:48 +0000

I have been learning web development for the past 2 years and I have worked with all the three most popular frontend web frameworks. Here is my experience with all of them. But before I start I would like to mention that, these are entirely my personal experience and don't choose any framework just because this post tells you that "X framework" is the best try all the three frameworks and choose what is the best for you.

A. Angular- I have made a web app where people can share quotes, like and copy quotes. So this was made by me in 2019 using the Angular version 7. You can have a look at the code at here. I find the Angular Projects a bit overwhelming to start with and I can ensure you that typescript is not the reason. The things I noticed were:

Angular comes in with a heavy boilerplate (Sometimes you won't need all that code but that will be present)
All the core things are maintained in Angular by the angular core team.

B. React- After being a little bit thrown off guard by the boilerplate code provided by Angular I tried out React. Now, react is not actually a framework it is actually a library. But from the very beginning, I was not a huge fan of the JSX concept of React. But over the time I accepted the JSX structure. However, React seemed much simpler than angular and hence I switched to react. Now, during this time I was having some issues with my computer so I don't have any react based code to show, but the website of one of the clubs of our college had some contributions from me and it was written in react. The website : http://dc.kgec.ac.in/.

Meanwhile, I had started writing posts so one of my first posts was about Redux vs Context API. These two are centralized state management system for React. So, you can tell, I was getting used to the workflow of React, but I was also introduced to Vue as well.

In this time spent with react my observations were:

It is a bit less complicated but equally powerful as Angular.
The styling of elements is a bit messed up in React. I love to write custom CSS a lot, so this is an important point for me.
The state management with the industry-standard - Redux is a bit complex to start with.

C.Vue- In November 2019, I decided to redesign my portfolio and I also wanted to introduce a blog in my portfolio. As I was using React at that moment my first point was to try Gatsby to static generate my blog. But I was a little bit startled by the things happening with GraphQL. At this very moment, I discovered a Vue based rather non-popular static site generator with in-built support of markdown based blogging. That framework is Saber.
And after two days of fiddling with it, I fell in love with Vue and Saber. Vue has everything I could have wished for:

It is not as bulky as Angular Starter Code as well as it was not as lightweight and lacking as React.
The HTML, CSS and JavaScript parts of the code are separated(though in the same file), unlike the JSX which throws a slightly modified HTML inside JavaScript file.
The state management system of Vue - Vuex follows the flux pattern(followed by Redux as well) but does the process much simpler than redux. The main reason might be it is developed and maintained by the core team of Vue.js.

Currently, I'm using both React and Vue alternatively in my workflow, but I'm a little bit biased towards Vue. The one thing I learnt through this process is that frameworks do not matter. Frameworks are just tools to make the process easier. Once you have learnt one framework it is really easy to switch to the other. I would love to hear others opinion on this topic.

How to Make a Basic Progressive Web App

Ayushman Bilas Thakur — Fri, 08 May 2020 00:00:00 +0000

So, in a previous post I made a bookmarking application, which used the localStorage of the browser to store bookmark app. But what happens if there is no internet connection? So, I hosted my app on GitHub and in the developer tools(ctrl + shift + i) in the network tab set the network to offline like this:

Which, makes the app go offline.

But does this app really need to be online to show all the list of your bookmarks? Absolutely not. So let's make this app to work offline with the progressive web app feature.

Technically, only having a service worker can make our website cache data and be available offline. But making our website a PWA has its perks like providing install features on android devices.

Things required to make a PWA

So, to turn an app into a PWA we need to tick a few checkmarks. There is a utility called lighthouse in chrome dev tools. There is a test for PWA there. The setup looks like this:

After running the test in the Installable section, you will find the required things to turn your app into a PWA. So, according to that result, the things we require are.

A Service Worker: Service Worker is a javascript file which works on a different thread rather than the main javascript of the webpage. This service worker has the power to intercept the requests going off the webpage to the server and responses coming from the server.

As service workers are such powerful, so having https:// is a must for sites with service worker to make that work. The only http:// URL allowed to use service worker is localhost. This is for testing purpose.

manifest.json: If you have ever worked on making a native app then you know that those apps require some unique info like app_name, app_icon, theme_color etc. for the app. Manifest will be hosting all these information needed for our app.

Creating and initializing the service worker

So, to start with I will create an sw.js denoting a service worker. Now we need to register the service worker. It takes only a few lines of code. In the main script or in the HTML script tag we can have the service worker registered.

To start with we need to check if the serviceWorker service is available in the browser, and if available, then we need to register the service worker to the navigator. This registration function takes in the path to the service worker and returns a promise. With that promise we can, on success console log the success and also can throw an error.

This code looks like this:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register("sw.js")
        .then(sw => console.log("Service work registration successful"))
        .catch(err => console.log("Error"))
} else {
    console.log("Service Worker not supported!")
}

So, if everything goes right and we now have a look at our console, then we will see the message of "Service work registration successful.

Now, if we head to the Application and have a look at the Service Workers, we will be able to see the service worker:

So, we have successfully set up our service worker. Now the next step will be to cache our required files and serve them when required and provide less load time.

Caching the files

To create cache storage specific to this app, we need some code in sw.js. In this file, there will be the logic, which will make our app to be able to render when offline.

So to start with, we need a name for the cache. In this case, I have declared the name to be: bookmark-app-cache. This naming is important is to locate your files and also with some coding, you can make the app to give an update button to tell the cache to automatically update.

Next, we need to declare the files we want to cache. This is the simplest way to cache, just by providing the names of the files & routes to cache and caching them. There is also another approach to caching where you can dynamically cache your data. In this case, we need to cache the "/" route, i.e. the main route. The actual files we need to cache in this case are available at "/index.html", "/style.css","/script.js","/icon.png" and "iconx512.png" respectively.

Combining all the things discussed above the code will look like:

const CACHE_NAME = "bookmark-app-cache-v2";

const assets = [
  "/",
  "/index.html",
  "/style.css",
  "/script.js",
  "/icon.png",
  "iconx512.png",
];

In browser-based javascript, you can add event listeners to DOM elements. Like that, in the service worker file(here sw.js) we can add some event listeners to the "self" available in sw.js. Some events this event listener can listen to are -

Install: This event is fired as soon as the service worker thread is installed i.e. as soon as the code navigator.serviceworker.register() is executed in our browser facing JavaScript file. We will be using the Install event to cache all the required files with the help of the array we already declared.
Activate: Just after installation if there is already a service worker working for that site, the new service worker doesn't do a hot-swap with the old service worker. It waits for a page reload to do this task. When the service worker is active after the reload, then this event listener triggers. And if there is no previous service worker then the activate event is triggered as soon as install is done. In the case of my recent game OddNEven I used this event to update my cache with game updates and remove the old unnecessary cache. We are not using this process here in this app.
Fetch: This is another important event of the service worker. This event is triggered if some request fires from frontend to the server. This event has the power to intercept the request and returning custom value without the request even reaching the server.

There are also events like push, sync and message which I have no deep knowledge about.

As I told before we need to cache our files just after installation. To do that, we need to make the install event to wait for a function to run. This function will open our cache with the name we provided and will use our array of assets to cache the required assets and route responses. So that part will look like:

//the cache name and asset declaration

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(assets);
    })
  );
});

Now the main part of making our app PWA comes in. We need to intercept the fetch event and make it respond with either the cache(if available) or continue with the request. The code will simply look like this:

self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then((res) => {
      return res || fetch(e.request);
    })
  );
});

Now If you go to the Network tab and make the app offline, you will not see the dinosaur, instead, you will have the page served. It might be just enough to just make your app work offline, but we can go one step better by creating a manifest.json for our app and making it installable.

Creating manifest.json

The few properties we need in the manifest.json are:

Name: This will be the name of the app
Short Name: This is the name shown when the app is installed.
icons: This is a list of icons to be used when the app is installed. Icons of 192 x 192 and 512 x 512 are required.
start_url: This is the url to start the app on.
background_color
theme_color
display: This sets the display of the app when installed on a mobile device.

Want to know more about manifest.json, read here

So, for this app the manifest.json I wrote looks like this:

{
    "short_name": "Bookmarks",
    "name": "Bookmark App",
    "icons": [{
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "iconx512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "background_color": "#000000",
    "theme_color": "#ffa500",
    "display": "standalone"
}

So, now it was the time to link this manifest.json to our app and set up a few properties, and run the app for one last time. The HTML tags added were:

<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#ffa500">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

These are three tags required to turn your app into a PWA. The first one connects the manifest.json to our page. The second one sets the theme color for our app. The last one sets the viewport size for the app, making it responsive for any device.

Conclusion

The app is finally converted into a PWA. You can see the final code here. If you want to try or install the app visit this link. GitHub was not letting me have the PWA activated,(due to the base route not being "/" ) so I chose glitch to host my app. But there are many topics about PWA which I could not cover in this post. Some of these topics are:

Caching requests to API
Rendering different views based on if the app is offline or online
Manually prompting the users to install the app. In my hosted version of the app I have a custom install button on the navbar, it has some CSS and HTML involved but the javascript is not too difficult, it looks something like this:

let haltedPrompt;
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault();
  haltedPrompt = e;
  installButton.style.display = "block";
});


installButton.addEventListener("click", () => {
  if (!haltedPrompt) return

  haltedPrompt.prompt();
  haltedPrompt.userChoice.then((result) => {
    console.log("userChoice", result);
    haltedPrompt = null;
    installButton.style.display = "none";
  });
});

At first, I declared a global variable to store the event of install prompt fired automatically. Then I selected the button to make appear once the app is available for installation(by default the display property of the install button is set to none). So, there are two steps in this process:

Storing the automatic install prompt from the browser. For that, I added an event listener to the window object to listen to the beforeinstallprompt event and once that event is fired I stopped the default event, stored the event in the haltedPrompt and made the button visible.
Triggering the stored event on click. For that, I added an event listener to the button. Then I perform a check if the stored event is valid and if it is valid I prompt the user and if the choice is accepted then I clear the variable and hide the install button.

Once again the code for this project is available at GitHub and the project is hosted at glitch

I made a Game with vanilla HTML CSS and JavaScript

Ayushman Bilas Thakur — Tue, 05 May 2020 22:04:01 +0000

Recently I have not been writing posts. The reason is I had been developing a simple game using vanilla HTML, CSS and JavaScript (no framework used). The game is available as a PWA at https://oddneven.netlify.app/

If you want to check out the frontend code go to https://github.com/AyushmanBilasThakur/Odd_N_Even

I will write posts about my experience developing this game if I get positive responses. Also, there is a small backend managing the leaderboard. I will be unveiling that code after editing some things out.

Comment your high scores and what do you want to learn about the project.

Mobile First Design with Swipe controls in website

Ayushman Bilas Thakur — Sun, 12 Apr 2020 22:37:08 +0000

Nowadays more and more people are using Android and iOS devices to access websites more than they use their desktop devices. So, the mobile-first design is recently coming to our attention a lot. But one thing got me thinking, if we can create websites keeping smaller handheld devices in mind, then we should use some mobile-specific features to give the users some cool experience.

In most of the websites, I have seen that a hamburger menu is implemented to hide the navigations and save some space. But they just provide a button to click to open up the hamburger menu. That just does not feel good to me. It was also the same case on my website as well. Recently I implemented a swipe action that can open and close the menu, which feels more natural thing to do in a mobile, touchscreen device. And it looks like this:

Is not it cool? The circle shows the touch position and on touch, it disappears.

Most of you who follow me know that I love to make tutorials, and you won't be let down in this post as well, as we will be implementing a todo card where swiping will reveal the delete button for that card. So without further adieu let's jump right into coding.

But before starting if you want to check out this code this will be available on github or glitch. and the hosted version of this will be available here. You should really go and check out the hosted version from your phone to just get the feel. Here is a gif to show this swipe open working:

The folder setup

There is no fancy setup required for this project, you will just need an HTML file a CSS file and a JavaScript file all linked up to the HTML file and put into one folder. And obviously you should use a code editor to code rapidly.

Writing up the initial HTML

So, our app doesn't need any fancy HTML layout to do stuff. It will be very simple with a div of class container wrapping everything. Inside that div, there will be a div with a class of card and inside that div we will have an h3 with a class of todo_essentials which will be having our todo text, just to keep the code simple. You can make this todo_essentials a div and make this layout complicated.

After that, we need to get that delete button its own space in a button with the class of delete, inside which we will be putting a button with a delete icon. I have used a material design icon here. To place this icon we need to import the material design icons:



<link
    rel="stylesheet"
    href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css"
/>

Then we have to use a span with class mdi and mdi-trash-can-outline to make the icon.

So now our HTML file looks something like this:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />

    <title>Swipe Open Controls</title>

    <link rel="stylesheet" href="./style.css" />

    <link
      rel="stylesheet"
      href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css"
    />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <h3 class="todo_essentials">
          Todo 001
        </h3>
        <button class="delete_button">
          <span class="mdi mdi-trash-can-outline"></span>
        </button>
      </div>
    </div>

    <script src="./app.js"></script>
  </body>
</html>

Now let's just make the site beautiful.

CSS

As this is not a CSS tutorial so we won't be focusing much on the CSS and just will be focusing on the required stuff:

So at first we will be resetting the margin and padding. And then we will be setting the positions using the .container, the fonts, shadows, font size, margins and padding:



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-color: #e9e9e9;
}

.container {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 80%;
  /* border: 2px solid black; */
  display: flex;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  background-color: aliceblue;
}

.todo_essentials {
  padding: 10px 20px;
}

.delete_button {
  margin-left: auto;
  display: block;
  height: match-parent;
  padding: 5px 20px;
  background-color: #da0d25;
  color: white;
  outline: none;
  border: none;
  font-size: 1.3rem;
}

Now this will be the time to discuss how this sliding mechanism works. So, here I simply set the the transform-origin to the right(as our button is on the right side of the screen) then set the scaleX to 0 using the transform property. Then I set a few animations and set the cursor to a pointer, for desktop view.



.delete-button{
    /* rest of the stuff */
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    cursor: pointer;
}

Talking about desktop views, here are some settings I used to show the delete button on hover for desktops:



.delete_button:hover,
.delete_button:focus {
  background-color: #9c0315;
}

@media only screen and (min-width: 600px) {
  .container {
    min-width: 0;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 900px) {
  .card:hover .delete_button {
    transform: scaleX(1) !important;
  }
}

Next, we will be jumping into the meat of the project i.e the JavaScript stuff. But before that, let me tell about the available touch events and how we will be using them.

The touch events available in the browsers

There are mainly four touch events for which you can listen to:

1. touchstart: This detects the start of touch/touches and fires eventlistener. If you see the event object available in the callback to eventlistener, we get a list of touches, each one containing some x and y co-ordinates with respect to the screen, window, page and etc. The object for a touch looks something like this:



{
    identifier: 0
    target: div.card
    screenX: 2661
    screenY: 471
    clientX: 273
    clientY: 336
    pageX: 273
    pageY: 336
    radiusX: 11.5
    radiusY: 11.5
    rotationAngle: 0
    force: 1
}

2. touchmove: As the event name suggests it fires when one of the started touches is moved.

3. touchend: As the event name suggests it will fire once a touch is ended i.e. your finger is moved out of the screen.

There is also one more touch event there, about which I don't have much knowledge.

4. touchcancel

Each of the above events yields out an object, where according to me the most important things are touches, targetTouches and changedTouches. I am still exploring the touch events and will be exploring and sharing more in future.

With the basics of touch events covered I will now be diving into coding our main swipe, which will be relying on a simple concept: when the touch starts we will note the initial touch x of touch[0] the user. Then on the move of touch, we will take the x position of touch[0] and will find the difference between the initial touch x and this touch. And when the touch ends, if the difference of the final position x and initial x is less than 0 then we can say that there was a left swipe, and otherwise, we can say there was a right swipe. The explanation can be found using the diagram below:

So, let's just code the touch handling.

JavaScript

To start things off we will need the reference of the card and our delete button. We need the reference to the card to add touch event listeners. Then we need a reference to the button to show and hide it accordingly. We also will need a boolean to store whether the button is shown or not. Then we need a variable to store the initial x position and the movement in x. I also create a constant to create a small threshold to eliminate accidental swipe detection. So far this code will look like this:



const card = document.querySelector(".card");
const theDeleteButton = document.querySelector(".delete_button");

const MOVE_THRESHOLD = 100;

let initialX = 0;
let moveX = 0;
let isDeleteButtonOpen = false;

So, the next thing will be to add event listeners to the card. As told before, on touch start we will get the initial x position of touch in our initialX variable:



card.addEventListener("touchstart", e => {
    initialX = e.touches[0].pageX;
});

Now, at movement we were to get the current position and calculate the movement. This is done so as sometimes the position is not found properly at the end of the touch(at least for me it as not working properly). So the code for touchmove will look like:



card.addEventListener("touchmove", e => {
  let currentX = e.touches[0].pageX;
  moveX = currentX - initialX;
});

Now, at the touchend event we need to check if it was left swipe and or a right swipe by checking if our moveX amount was less than or greater than the MOVE_THRESHOLD multiplied by the sign of the moveX. If our value of moveX is less than the calculated MOVE_THRESHOLD then as explained before we can say that the swipe was a left swipe otherwise, if our value of moveX is greater than the calculated MOVE_THRESHOLD then we can say it was a right swipe. Then we have the isDeleteButtonOpen boolean which says whether the button is visible or not.

So, if the swipe was left and the button was not open we set the scaleX of the button to 1(as by setting scaleX 0 we hid the button) and also set the isDeleteButtonOpen to true. and if the swipe was right and the button was open we set the scaleX to 0. At the end don't forget to reset the variable storing the movement, otherwise it may cause wierd behaviour. So the final code for touchend will be like:



card.addEventListener("touchend", e => {
  if (moveX < MOVE_THRESHOLD * Math.sign(moveX) && !isDeleteButtonOpen) {
    theDeleteButton.style.transform = "scaleX(1)";
    isDeleteButtonOpen = true;
  } else if (moveX > MOVE_THRESHOLD * Math.sign(moveX) && isDeleteButtonOpen) {
    theDeleteButton.style.transform = "scaleX(0)";
    isDeleteButtonOpen = false;
  }

  moveX = 0;
});

So the final project will be working properly now.

Conclusion

So, this was a simple tutorial for using swiping gestures on a webpage. But you can build a lot on this, like adjusting the x scale according to the movement, or doing something cooler with different swipe gestures - maybe a small game. The creativity is endless. Until my next post stay happy and keep coding. And keeping in the current condition in mind, stay home, stay safe.

Getting Started with TypeScript by making an Express REST API

Ayushman Bilas Thakur — Sat, 04 Apr 2020 20:34:34 +0000

I don't want to convince people to use TypeScript. I just was recently using TypeScript and that's why I wanted to build a simple Transaction Tracker Application. As the scopes of a blog post are not enough so I will be building the simple version of this app, with just the CRUD functionality in a REST API. There will be no database involved to keep this post within limits. So, without further adieu let's start rolling. But just before starting all the code in this project is available in this github repository.

Setting up the development environment

Maintained by Microsoft, TypeScript is a superset of JavaScript and our browsers can not understand this language. So, Typescript needs a compiler to compile it down to plain old JavaScript, understood by the browsers. To get started with TypeScript, you will need node.js installed on your computer. You can download node.js from nodejs.org. After having node.js installed you will need the TypeScript compiler. To have this, just type this command:

npm install -g typescript

At this point, TypeScript compiler is installed, and you can check that via this command:

tsc -v

For me, the output looks like this: Version 3.8.3. As long as a version is shown after this command, you are good to go. I am using Visual Studio Code to write the code for this project.

Starting the Project

Though I have recently found npm packages which can set up Express + TypeScript projects for us, that gives an overwhelming amount of code. So we will be setting up the app from scratch. Trust me it is not that much difficult. But first, let me tell you how our app will work:

So, we will be implementing the basic CRUD operations for adding, editing, reading and deleting transactions done by the user. As I said before, we won't be using any database. That means the data will be stored in the program itself using an array of JavaScript objects. Now talking about the routes, there will be five routes there. I have listed them with the type of requests they will be accepting.

GET Request /api/transactions : Gives out a list of all the transactions added to the list.
GET Request /api/transactions/:id : Gives the single transaction with that id.
PUT Request /api/transactions/:id : Updates the single transaction with that id.
POST Request /api/transactions : Creates and adds a new post
DELETE Request /api/transactions/:id : Deletes the single transaction with that id.

Now let's get into setting up the folder structure.

So, First thing I did is created a new folder and initialized a node app with the command:

npm init -y

quick tip: using -y with npm init lets us skip all the questions.

Now we need to install some packages to get started. First of all, we obviously need express and I will recommend having UUID for creating id for our expenses.

So, having these dependencies only is not enough, we will need some dev dependencies as well:

@types/express: for express specific type definition in typescript, which is known as interfaces in TypeScript.
nodemon: nodemon is an extension used to check for javascript code changes. It will keep our server code updated after each save.
concurrently: concurrently lets us run multiple commands together. In this app we will need concurrently to run tow commands together, which brings us perfectly to the next point, declaring the scripts.

The required Scripts:

So we will need two main scripts and one more to run these two scripts together. These are mainly for development purpose, this is not a production app. The required scripts are:

"start:dev": This script will be used to start the main development related stuff with nodemon, which will actually watch changes in the index.js, which will be created by our TypeScript file. As I told before, TypeScript needs to be compiled to JavaScript to be useful. So the script for start:dev will be like:

nodemon dist/index.js

build:dev: This script will be used to build/compile the TypeScript files to JavaScript files. Later in this post, I will be discussing how the build will work and how to write the configuration for that. But for now, let's have a look at the script/command we will be using:

tsc --watch --preserveWatchOutput

So, let me explain this command a bit. tsc is for TypeScript Compiler, then there are two flags -

a. watch: this makes the compiler to watch for any changes in the typescript files according to the configuration file we are going to write soon.

b. preserveWatchOutput: normally what tsc does is it clears the console on each code change, which actually removes important info from the console. That's where this flag comes in. This will keep all console outputs untouched.

dev: This will be the script which runs both the nodemon script for compiling TypeScript to Javascript and then serving the JavaScript. Here, we will be using concurrently to run two scripts together. The script/command will look like:

concurrently 'npm:build:dev' 'npm:start:dev'

So altogether the package.json will look something like this(note: the versions may vary):

{
  "name": "transaction-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start:dev": "nodemon dist/index.js",
    "build:dev": "tsc --watch --preserveWatchOutput",
    "dev": "concurrently 'npm:build:dev' 'npm:start:dev'"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "uuid": "^7.0.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.3",
    "concurrently": "^5.1.0",
    "nodemon": "^2.0.2"
  }
}

Now, let's create our configuration for TypeScript.

Configuring the TypeScript Compiler

There are a few things we need to configure to get started with this project. In the project root directory(i.e where the package.json is) we need a tsconfig.json to configure our TypeScript Compiler.

I have kept the compile settings really simple. to learn more about how to write tsconfig properly check out this link. But for now let's go with the config I have written and tested:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "baseUrl": "./src"
  }
}

This will set up the compiler properly. Here we basically set the compilerOptions here we set several properties:

target: This sets the target version for the compiled JavaScript. Here I have set the version to es6. It can be set to es5,es6 and many more. Reference the documentation to know more.
module: This declares how to handle the imports and exports of modules. In ES6, the import and export statements were introduced. So by declaring that to commonjs, TypeScript compiler will change our import-export statement to module import and module.exports.
outDir: As the name suggests, this sets up the output directory for the compiled JavaScript. Here I have set the ./dist directory as the output directory.
baseUrl: Base URL is the property which sets/points to the base directory, where we will be storing base URL. Here I have set the ./src directory as the output directory.

Now, with that out of the way, we can start developing our app.

Starting with the index.ts

So according to our setup, everything in the ./src directory with .ts as the extension will be compiled to JavaScript and will be stored in ./dist. In our nodemon we have set dist/index.js as our entry point, so we must need an index.ts compiled to index.js to get started. So let's make our index.ts in the src directory.

To start off with we need to import express. But there is the package @types/express which makes the direct import 'express' to throw errors. So the proper way to import express:

import * as express from "express";

Now we need to properly use the main feature of TypeScript, i.e using the types. So let's just import our types:

import { Request, Response, Express } from "express";

Now to initialize our app we need this code:

const app: Express = express();
const PORT: number = 4000;

app.listen(PORT, () => {
  console.log(`Listening to http://localhost:${PORT}`);
});

As you can see, I have used the types by using a : after the variable name, and that is how to declare a type of a variable in TypeScript.

Let's add a test route to check if I did everything properly:

app.get("/", (req: Request, res: Response) => {
  res.json({ msg: "api working properly" });
});

So, let's run our code for the first time. We need to just write npm run dev to start. If everything goes right the last line of the console will be:

Listening to http://localhost:4000

Now if we go to the address then we will get a response like this:

{
  "msg": "api working properly"
}

Now, it is really easy to do GET requests from our browsers, but we will soon be doing POST requests to our server. But it is not possible for us to do a POST request to the route directly from a browser. So, it will be the high time to use any REST client. The two best REST clients according to me are Insomnia and Postman.

With that part aside we can now start coding the rest of our REST API.

In this part, we will be making our API routes. To keep our code clean I will be keeping all the Transaction related code in a separate file. So in the ./src folder, we will be creating a new file transactionHandler.ts. Now let's start coding in transactionHandler.

The first thing to do will be to initialize and export the express router:

import * as express from "express"

const transactionRouter = express.Router();

export default transactionRouter;

Now, as you can remember TypeScript earns its name for the types it provides. So it will be proper to import the types:

import * as express from "express"
import { Router } from "express";

const transactionRouter = express.Router();

export default transactionRouter;

Let's now import this router and use it with our app. So in index.ts file:

//the import statement
import transactionRouter from "./transactionHandler"; 

//using the router for /api/ endpoints
app.use("/api", transactionRouter);

Now one thing to do at this point will be to make our app use the express.json() middleware. So in our index.ts file:

//before defining the routes 
app.use(express.json())

Now, if you can remember the routes we talked about while starting, let's just implement those routes. Here, I will be defining the route handling functions separately. So after defining all the routes and their function the code will look like(in transactionHandler.ts ):

//initiation of router here

transactionRouter.get("/transactions", getAllTransactions);
transactionRouter.get("/transactions/:id", getOneTransaction);
transactionRouter.post("/transactions", createTransaction);
transactionRouter.delete("/transactions/:id", deleteTransaction);
transactionRouter.put("/transactions/:id", updateTransaction);

//export syntax here

So, from this code, you can get that getAllTransactions will be responsible for the response made when GET request is made to the "/transactions" router. Similarly, getOneTransaction will response to GET request to "/transactions/:id" where the :id is responsible for dynamic routing i.e. we can access the value of id provided in the route and response accordingly. Then there are POST, DELETE, and PUT request at routes "/transactions" and "/transactions/:id" respectively to perform create, delete and update operations for this CRUD app using the functions createTransaction, deleteTransaction and updateTransaction function.

One thing to note here is that we are using this router for "/api" route in the index.ts file. So all these routes with respect to base URL will look like

http://localhost:4000/api/transactions
http://localhost:4000/api/transactions/:id

Talking about CRUD functionalities, we have not thought about how an object containing all the data about transactions will look like. Now, the advantage of TypeScript is that we can create our custom data type i.e interface for any object we are going to work with. Having this interface declared helps us with suggestions in some properly configured IDEs and also prevents us from forgetting what properties we require for that object. So, let's create the interface for representing a single transaction. For defining the interface we will be creating a new file transaction.ts in a folder called interfaces in the src directory.

Our transaction will require an id, a name, an amount and a property denoting if it was a credit or a debit. Now there is another feature in TypeScript which lets us use enumerators. The enum will be useful to adjudge the transaction type. So, the enum will look like(in transaction.ts):

export enum TransactionType {
  Expense = -1,
  Earning = +1
}

Here two main things to notice are:

exporting the transaction type enumerator, as this will be useful for creating and updating transaction.
The values of these enumerators are set to +1 and -1 as if we do calculations in future then just multiplying with these values will be enough. One thing to note about enumerators is that enumerators place the values they are representing instead of their names, enumerators just are there for making the code easy to understand.

Now, let's create the interface for transaction and export it(in transaction.ts):

//after defining the enum
export interface Transaction {
  id: String;
  name: String;
  amount: Number;
  type: TransactionType;
}

One thing which I have not done for this application but I felt like the readers of this post should be informed about is, in TypeScript interface definition you can make a field optional by adding a ? after its name. For example

interface human{
  firstName: String;
  middleName?: String;
  lastName: String;
}

This piece of code makes the middle name not required.

As I told before, we won't be using a database to store our data. So, let's get back to our transactionHandler.ts and create an array consisting of data of type Transaction only.

/*
first we need to import our interface and I'm also importing
the enum here for future use
*/
import { Transaction, TransactionType } from "./interfaces/transaction";

//creating the list of transactions
let transactions: Transaction[] = []

//rest of the code

As you can perceive from the above code is that having [] after an interface denotes that the variable will contain a list of that instance. In our case, it denotes transactions is an array/list containing objects strictly following the interface of Transaction.

So, now it is the time to implement all the functions we have used for handling routes and never defined. But before that let's just have a small function which will find a transaction with a specific id in the array. This helper will be useful to get one transaction and delete one.

So that helper function will look like this:

const findOneOfID = (id: String): Transaction => {
  const toBeFound: Transaction = transactions.find(t => t.id === id);
  return toBeFound;
}

Here the TypeScript speaks for the code. This function named findOneOfID will take a parameter of type String which is named as id and will be returning an object of our defined type/interface Transaction.

The function body is really simple and consists of only 2 lines of code. In the first line, we use a higher-order array method find to loop through all the transactions in the transactions variable and return the one where the id of that transaction is equal to the id passed to the function. This found value is stored in a variable called toBeFound(of interface Transaction). The value in toBeFound is returned.

Now, let's start with the easiest one defining the getAllTransactions method. As this method handles request and response so let's bring in those interfaces and let's return the json form of this array attached to a name 'data':

//other imports
//before defining the routes and everything
import { Request, Response, Router } from "express";

//initiation of express router, transactions array and findOneOfID

const getAllTransactions = (req: Request, res: Response) => {
  res.json({'data': transactions});
};

//all the route handling

So this code is quite self-explanatory and I won't be diving deep into this code.

Next, let's define getOneTransaction:

//all the imports

//all the initializations

const getOneTransaction = (req: Request, res: Response) => {
  const id = req.params.id;
  let targetTransaction = findOneOfID(id);
  if (!targetTransaction) {
    res.status(404).json({ message: "Not found" });
  } else {
    res.json({ transaction: targetTransaction });
  }
};

//all the router handling

Here, at first, we extract the id from request parameters. After that, we use our helper function findOneOfID to get our targetTransaction. If the id is not found then our function will return NULL which will be treated as falsy value by JavaScript/TypeScript and then we will send a status of 400(not found, know more about status codes here) and a JSON containing the message "not found" . Otherwise, we will send a JSON with the transaction object labelled as transaction.

Now, both these functions are invalid until we create a transaction with a POST request to the "/transactions/:id" route. And if you can recall, the function handling this request to this route was createTransaction. So, let's just go through this:

//all the imports
import { v4 } from "uuid";

//all the initializations

const createTransaction = (req: Request, res: Response) => {
  if (!req.body.name || !req.body.amount) {
    res.status(400).json({ message: "The required fields are not there" });
  } else {
    const amountPassedIn = req.body.amount
    const new_transaction: Transaction = {
      id: v4(),
      name: req.body.name,
      amount: Math.abs(amountPassedIn),
      type: amountPassedIn >= 0? TransactionType.Earning : TransactionType.Expense
    };

    transactions.push(new_transaction);

    res.status(201).json({
      message: "added successfully",
      transaction: new_transaction
    });
  }
}

//all the router handling

At the very beginning, we are checking if the required fields i.e the name or the amount are passed or not. If not passed then we send a 400 status code(BAD REQUEST) and return a message of "required fields are not there". If both the values are passed then at first we extract the amount given in the request body, then we create a new transaction where we use the v4 function provided by UUID to create a unique id for the transaction. Then we provide the name and the absolute value of the amount passed in. Next in the type field, we use a ternary operator to determine whether the amount passed in the body was greater than or equal to 0 or less than 0. If it is greater than or equal to 0 then using the ternary statement we set the type to be TransactionType.Earning(that's why we brought in our TransactionType enumerator). Otherwise, it is set to TransactionType.Expense.

Later I have extracted this functionality of determining the transaction type to another function named determineTransactionType like so:

const determineTransactionType = (amount: Number): TransactionType => {
  return amount > 0? TransactionType.Earning : TransactionType.Expense
}

After all this new transaction is pushed to the list and with 201 status(CREATED) we return the object.

Let's now handle an easy part of deleting this newly created transaction with DELETE request to '/transactions/:id' handled by the function deleteTransaction. Let me write the code first and then I will explain:

const deleteTransaction = (req: Request, res: Response) => {
  const id = req.params.id;
  const toBeDeleted = findOneOfID(id);
  if (!toBeDeleted) {
    res.status(404).json({ message: "Not Found!" });
  } else {
    transactions = transactions.filter(t => t.id !== id);
    res.json({ message: "Deleted Successfully", transaction: toBeDeleted });
  }
}

Here, in the beginning, we fetched the id from request parameters and used the findOneOfID() to find the one the user has requested to delete. The result was stored in toBeDeleted. If the response was null then the 404 status code is sent with the message not found. And if it is found then we update the transactions array with the higher-order array function filter, which filters the array based on the return value of these function passed in. If the return value is false then the item is kept in the new array to be returned by this function. Thus we filter the array based on the id. Then we send the response with the message "Deleted Successfully" and the deleted transaction is also passed in.

Now, let's implement the function handling the updating the stored value i.e. updateTransaction. So, once again let's just write the code and go through it:

const updateTransaction = (req: Request, res: Response) => {
  const id = req.params.id;
  if (!findOneOfID(id)) {
    res.status(404).json({ message: "Not Found!" });
  } else {
    transactions = transactions.map(t => {
      if (t.id == id) {
        return {
          id: id,
          name: req.body.name ? req.body.name : t.name,
          amount: req.body.amount ? Math.abs(req.body.amount) : t.amount,
          type: req.body.amount? determineTransactionType(req.body.amount) : t.type
        };
      } else return t;
    });
    res.json({
      message: "Update successful",
      transaction: findOneOfID(id)
    });
  }
}

In this function alike the deleteTransaction() function we initially take the id passed in the URL, then check if it exists or not with the help of findOneOfID(). After that, if the id is found then we can use the map function to recreate the array with some editing on the required element. There sure might be better ways but this is what I did. I mapped through each element in the array of transaction and for the transaction(written in short as t here) with the id matching the id we are looking for we will be updating the values if passed in, otherwise will keep the old values. Here we will be using the previously defined determineTransactionType() function. So after updating the value we again use the findOneByID() to return the updated object.

Conclusion

Well, this was a really long post but I'm putting an end to this post here. If you want the source code of the app then it is hosted on GitHub. There is still a lot to improve in this app still. In this app, you can add a frontend, or you can add user authentication or maybe more routes giving the total balance. The possibilities are endless. Until next time stay happy and keep coding.