DEV Community: Fidal Mathew

Async vs Defer in JavaScript: Which is Better?🤔

Fidal Mathew — Thu, 29 Feb 2024 14:38:23 +0000

Hi everyone! I hope you’re doing good. This article will explore an interesting Javascript topic. async and defer are attributes used when including external JavaScript files in HTML documents. They affect how the browser loads and executes the script. Let's learn about them in detail.

Default Behaviour

We generally connect our HTML page with external javascript with <script> tag. Traditionally, JavaScript <script> tags were often placed in the <head> section of the HTML document. However, doing so means that the parsing of the HTML is blocked until the JavaScript file is fetched and executed, leading to slower page load times. Nowadays, we mostly prefer to keep the <script> tag after all the contents of the <body> element to the page get loaded first.



<script src="example.js"></script>

Here's how HTML parsing and script execution takes place

Async

When we include a script with the async attribute, it tells the browser to download the script asynchronously while parsing the HTML document. The script is downloaded in the background without blocking the HTML parsing process.

Once the script is downloaded, it's executed asynchronously, meaning it can run at any time, even before the HTML document has finished parsing.



<script src="example.js" async></script>

If multiple scripts are loaded asynchronously, they will execute as soon as they finish downloading, regardless of their order in the document. It is useful when the script doesn't depend on the DOM being fully loaded or other scripts.

Defer

When we include a script with the defer attribute, it also tells the browser to download the script asynchronously while parsing the HTML document.
However, the execution of the script is deferred until after the HTML document has been parsed.



<script src="example.js" defer></script>

Scripts with the defer attribute will execute in the order they appear in the document. It is useful when the script relies on the DOM being fully parsed or when script execution order is important.

Conclusion

Both async and defer allow the HTML parsing process to continue without waiting for the script to be downloaded.

The difference lies in when the script is executed:
With async, the script executes as soon as it's downloaded, potentially before the HTML document is fully parsed. With defer, the script executes only after the HTML document is fully parsed, but before the DOMContentLoaded event.

One of the important things to note is, that we should only use async when we have scripts that can run independently and don't rely on the DOM structure, and we use defer when we need to maintain script execution order or depend on the DOM structure.

I hope you liked this article and if you did don’t forget to give it a like! 😃

Connect with me on-

Throttling ⏱️ vs Debouncing ⏳: Boost Performance for your React app 🚀

Fidal Mathew — Thu, 22 Feb 2024 05:53:40 +0000

Hi everyone! I hope you’re doing good. This article will explore an interesting Javascript topic frequently asked in interviews. In this article, we’ll be covering topics such as throttling and debouncing and learn why and how to implement them. Let's begin.

Why do we need them?

The first question that comes to my mind while hearing about this topic is why? Why do we need it and what is it? Throttling and debouncing are optimization techniques used to control the frequency of executing a function.

Let’s see the problem through an example. Suppose, a user wants to search for some products on an e-commerce website. The user types “IronMan t-shirt”. While typing this, users are accustomed to autocomplete suggestions, so how can we manage that?

If we want suggestions for every input and delete operation the user performs in the search bar, it would result in several API calls which is not good for our backend server. So, to optimize this, we use throttling and debouncing. This is just one case where these methods are used, but they can be implemented in a lot of other use cases while dealing with event listeners.

We’ll look into all the different methods and test them out. We will initialize the input tag with event listeners on “input”.



const input = document.querySelector("input");
const defaultText = document.getElementById("default");
const debounceText = document.getElementById("debounce");
const throttleText = document.getElementById("throttle");


input.addEventListener("input", (e) => {
  defaultText.textContent = e.target.value;
  updateDebounceText(e.target.value);
  updateThrottleText(e.target.value);
});

Here's a sneak peek 👀 at the difference in how text is being processed by each technique.

Feel free to check it out again when you learn more about it in the article.

Debouncing

In the above example of searching 🔍, let’s see how things would change if we used debouncing with our search. Debouncing adds a small delay after the last keystroke before executing the search function. This helps prevent overwhelming the system with unnecessary search requests, especially when the user is typing quickly. It ensures that the search function is only triggered once the user has finished typing or has paused briefly, making for a smoother and more efficient search experience.



const updateDebounceText = debounce((text) => {
  debounceText.textContent = text;
});



function debounce(cb, delay = 1000) {
  let timeout;

  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      cb(...args);
    }, delay);
  };
}

Here, we updateDebounceText is passing a function as an argument to debounce(). The debounce() function takes 2 parameters, first a callback function and the delay (optional).

The debounce() function has a timeout variable, which is used to set the timeout to call the callback function after the delay. The callback function cb(...args); is the function that’ll set debounceText.textContent = text; as it passes (text) as (…args).

So, let’s look at the wider picture. The debounce function is called every time the “input” event listener activates. Every time, it creates a new timeout which waits for the delay time and then it calls the callback function. Suppose, the debounce() gets executed again before the delay time ends due to another keyboard input action, the previous timeout gets cleared and a new timeout for the updated text argument is called.

Throttling

Throttling is another technique used to control the rate at which a function is executed. It calls the callback function and updates the text after a certain interval of time instead of waiting for the last event(keystroke). Let’s learn how to implement it.



const updateThrottleText = throttle((text) => {
  throttleText.textContent = text;
});



function throttle(cb, delay = 1000) {
  let shouldWait = false;
  let waitingArgs;
  const timeoutFunc = () => {
    if (waitingArgs == null) {
      shouldWait = false;
    } else {
      cb(...waitingArgs);
      waitingArgs = null;
      setTimeout(timeoutFunc, delay);
    }
  };


  return (...args) => {
    if (shouldWait) {
      waitingArgs = args;
      return;
    }

    cb(...args);
    shouldWait = true;

    setTimeout(timeoutFunc, delay);
  };
}

The throttle function takes 2 arguments the callback function and the delay(optional).

By default, the shouldWait variable is false. When the event is called the first time, it executes the callback function and then sets the shouldWait to true. We also have waitingArgs which is used to manage the arguments i.e. text that the user enters in the span of delay. Therefore, if shouldWait is true, the waitingArgs are updated with the updated text.

In the timeoutFunc(), the if statement specifies if there’s no new text after the last callback function() was executed which is known by the fact that the waitingArgs is null. Else, since, the user is not typing anymore, the last text is now executed by calling the callback function with the updated text passed through the argument. And, set waitingArgs to null and call the timeout for timeoutFunc() to set the shouldWait back to false.

Note, let shouldWait = false; let waitingArgs; which we set initially, are not reinitialized every time the function is called. Instead, they are captured in the closure of the returned function, meaning their values persist across multiple invocations of the throttled function.

Conclusion

Throttling helps limit the rate of function calls to prevent overwhelming the system while debouncing delays function execution to handle situations where rapid or frequent calls are expected. Both techniques contribute to improving performance, optimizing resource usage, and enhancing the overall user experience in web applications.

Throttling is useful in scenarios like scroll event handlers, resize event handlers, or handling user input events like mousemove or keydown, where frequent calls can lead to performance degradation.

Debouncing is typically used in scenarios where a function is called repeatedly, such as in response to user input like typing.

I hope you liked this article and if you did don’t forget to give it a like! 😃

Comment them down below 👇

Connect with me on-

⏰ Trust issues with setTimeout()🤯 Learn with examples

Fidal Mathew — Mon, 01 Jan 2024 18:22:22 +0000

Hi everyone! Happy holidays, I hope you’re doing well. And yes, you read the title right. If you put a set setTimeout() of 5 seconds, it doesn’t mean you’ll see the output in 5 seconds. Don’t believe me? Let’s learn about setTimeout in detail.

How does JavaScript work?

Javascript operates using a call stack and execution context to manage and execute code.

Call stack:

The call stack is a data structure that records where in the program we are. It keeps track of the functions that are being called from the main execution context down to nested functions.
Whenever a function is invoked, a new frame is pushed onto the call stack to keep track of its execution context (local variables, parameters, etc.).
When a function finishes executing, its frame is popped off the stack, and the control returns to the context that called it.

Execution Context:

Execution context is a wrapper that contains information about the environment in which the current code is being executed.
Global Context: This is the default context where the code runs if it's not inside any function.
Function context: It is formed when a function is called, it contains local variables, parameters, references to its outer environment (for closures), and the 'this' keyword's value.

How does setTimeout work?

setTimeout is not treated as a normal function. They don’t create a function context and get added to the call stack. So, how do they operate?

When setTimeout is called, it becomes a part of the browsers' Web APIs to be executed after the specified time delay. And when it is completed, it doesn’t add itself to the call stack, rather it gets added to the callback queue.

Callback queue:

Also, known as task queue, is where asynchronous tasks, like the ones scheduled by setTimeout(), fetch(), are placed after their execution has finished. And once, the call stack becomes empty, these tasks are pushed into the task for execution.

NOTE: The callback queue waits for all the synchronous tasks to be executed and only then pushes its content.

Examples

Let’s take a look at some interesting examples for setTimeout(). Try guessing the output and maybe you can try it out on your system.

Example 1:

Here’s a code snippet containing setTimeout(0).



console.log("Start");

setTimeout(function timeOut() {
    console.log("timeout");
}, 0);

console.log("End");

From a person, who doesn’t know how JavaScript gets executed, they would probably say the output to be:

But, here’s the correct one:

The reason is simple, when the setTimeout(0) is called, even for 0 secs, it goes to the web APIs to get its tasks completed and then stays in the callback queue until all synchronous tasks are completed such as console.log(). So, after it is completed, we see the output of console.log(“Timeout”).

Example 2:

Here’s a code snippet containing setTimeout(5000) and the code below takes about 10 seconds to execute. Suppose, it is a massive codebase and takes just a lot of time to execute. We won’t be writing it down, but fulfilling the need via a while loop to check the time after 10 seconds.



console.log("Start");

setTimeout(function timeOut() {
    console.log("Timeout -- 5 seconds");
}, 5000);


let startDate = new Date().getTime(); //time in seconds
let endDate=  startDate;

while(endDate < startDate+10000){ // 10 seconds

    endDate =  new Date().getTime();

}
console.log("End -- 10 seconds");

The expected output would be:

But, the actual output is:

So, why does this happen? 🤔
Usually, the lines of code we write get executed in a fraction of a second, and then the setTimeout() function gets loaded in the execution context. But, in this case, the synchronous functions take 10 seconds to execute. The “End” word gets logged out after 10 seconds and we get output “Timeout” after that.

So, I hope you learned about the unique nature of setTimeout() in this article. A simple thing to remember is it always gets executed after all the synchronous tasks. Feel free to share any interesting facts about JavaScript!

Till then, follow me for more Javascript and web-related articles! 😁

Connect with me on-

🔐 Session-Based vs. Token-Based Authentication: Which is better?🤔

Fidal Mathew — Sat, 23 Dec 2023 08:21:52 +0000

Hi fellow readers!✋ I hope you’re doing great. In this article, we will learn about session and token-based authentication methods used in backend applications. Let’s take a look at them.

🔐 Session-based auth

In simple words, session-based authentication uses a special code(session id) stored on your device to remember who you are when you visit a website, keeping you logged in and remembering your information until you leave or log out. Didn’t get it? Don’t worry, let’s take a look step by step.

1. User Login:

Users log in by sending their email and password to the server through a special request.

2. Checking Details:

The server checks if the provided details match what's stored for the user.

3. Creating a Session:

If everything is correct, the server makes a 'session' that holds user info (like user ID, permissions, and time limits). This info is kept safe in the server's storage. Exam or can also be managed using libraries such as express-session.

4. Getting a Session ID:

The server sends this 'session ID' back to the user's device, usually as a cookie in the response.

5. Using the Session ID:

Whenever the user wants something from the server, their device automatically includes this session ID in its requests.

6. Server Checks:

The server uses this session ID to find the stored information about the session user in the session storage.

Here’s a sneak peek at how express-session works:

When the user logs in, the server creates a session for that user and sets a cookie🍪 in the response containing the session ID.
The browser automatically includes this session ID cookie🍪 in subsequent requests to the server.
When the server receives a request, express-session middleware uses the session ID from the cookie🍪 to retrieve the relevant session data.
The data stored in req.session (such as userId) becomes available to handle the request.

7. Access Granted:

If everything matches up, the server knows the user is genuine and responds to them with access to what they asked for.

Example

Here's an example of a Node.js application using Express.js to implement session authentication.

Implementation



const express = require('express');

const session = require('express-session');

const app = express();

// Middleware setup

app.use(session({

  secret: 'your_secret_key',

  resave: false,

  saveUninitialized: false,

  cookie: {

    httpOnly: true, // Set the cookie as HTTP-only, Optional

    maxAge: 60*30 // In secs, Optional

  }

}));

Login route



app.post('/login', (req, res) => {

  const { username, password } = req.body;

  const user = users.find(u => u.username === username && u.password === password);

if (user) {

    req.session.userId = user.id; // Store user ID in session

    res.send('Login successful');

  } else {

    res.status(401).send('Invalid credentials');

  }

});

Protected route



app.get('/home', (req, res) => {

  if (req.session.userId) {

    // User is authenticated

    res.send(Welcome to the Home page, User </span><span class="p">${</span><span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">userId</span><span class="p">}</span><span class="s2">!);

  } else {

    // User is not authenticated

    res.status(401).send('Unauthorized');

  }

});

Logout route



app.get('/logout', (req, res) => {

  req.session.destroy(err => {

    if (err) {

      res.status(500).send('Error logging out');

    } else {

      res.redirect('/'); // Redirect to the home page after logout

    }

  });

});

🔐 Token-based auth

JWT authentication uses digitally signed tokens containing user information to allow secure and verified access to websites or applications without needing to repeatedly log in. Let’s take a look at the step-by-step workflow of token-based authentication.

1. User Login Request:

Users log in by sending their email and password to the server through a specific request.

2. Credential Verification:

The server verifies the provided credentials against the stored user data.

3. Token Generation:

Upon successful verification, the server creates a token (commonly JWT - JSON Web Token). This token holds user information (claims) such as user_id, permissions.

4. Token Signing and Hashing:

The token is signed with a secret key and processed with a hashing algorithm (like SHA256) to create a hash.

5. Sending the Token:

The server sends this token to the client, which stores it, typically in the browser.

6. Token Storage Options:

The client can store the token in different ways like HttpOnly Cookies, Session Storage, or Local Storage. Storing in HttpOnly Cookies is recommended as it prevents JavaScript access, enhancing security against XSS attacks.

7. Token Expiry and Security:

Tokens often have an expiration time to enhance security.

8. Including Token in Requests:

For every request to the server, the client sends the token in the Authorization header.

It's a good practice to prefix the token with "Bearer ".



axios.get(URL, {

    headers: {

        'Authorization': 'Bearer ' + token,

    },

})

Server-Side Validation:

Upon receiving a request, the server retrieves the token.

10. Token Validation and User Authentication:

Using the secret key, the server validates the token and extracts claims from it. If the user information from the claims exists in the server's user table, the server authenticates the user, granting access to requested resources.

Example

Login



app.post('/login', (req, res) => {

const { username, password } = req.body;

  const user = users.find(u => u.username === username && u.password === password);

jwt.sign({ user }, secretKey, { expiresIn: '1h' }, (err, token) => {

    if (err) {

      res.status(500).send('Error generating token');

    } else {

      res.json({ token });

    }

  });

});

Protected route

We are using veriyToken() function as middleware for every route that needs verification. The request passes through the veriyToken() and only if the next() function is called, it passes on to this route and implements the code.



app.get('/dashboard', verifyToken, (req, res) => {

  res.send('Welcome to the Home page');

});

// Verify token middleware

function verifyToken(req, res, next) {

  const token = req.headers['authorization'];

if (typeof token !== 'undefined') {

    jwt.verify(token.split(' ')[1], secretKey, (err, decoded) => {

      if (err) {

        res.status(403).send('Invalid token');

      } else {

        req.user = decoded.user;

        next();

      }

    });

  } else {

    res.status(401).send('Unauthorized');

  }

}

Key differences

Storage Location: Sessions are stored on the server, while tokens (JWTs) are stored on the client side.
Stateful vs Stateless: Sessions are stateful, while tokens are stateless, allowing for better scalability in distributed systems.
Expiry Handling: Session expiry is managed by the server, whereas token expiry is handled by the token itself.
Security Measures: JWTs often include digital signatures and support for encryption, enhancing security compared to typical session mechanisms that use cookies, and can be vulnerable to CSRF attacks if not properly protected.
Usage Flexibility: Tokens (JWTs) offer more flexibility in carrying additional information beyond authentication, useful for authorization and custom data transmission.

Which method should be used?

It depends upon the requirement and nature of the application. Most applications use a hybrid approach, token-based authentication for APIs, and session-based authentication for web-based interactions.

I hope you liked this article and if you did don’t forget to give it a like! Which backend language do you use for your projects? 🤔

Comment them down below 👇

Connect with me on-

Building a Collaborative Whiteboard using ReactJS, Socket.io and NodeJS 🤝

Fidal Mathew — Sun, 17 Dec 2023 13:41:56 +0000

Hi fellow readers! I hope you’re doing great. In this article, we will build our collaborative whiteboard similar to Google Meet’s whiteboard. We are going to use HTML canvas with ReactJS to create our whiteboard and socket.io to implement real-time communication.

Here’s how the project is gonna look when implemented. Let’s get started.

In the project directory, we will create folders, and create the frontend using the command npm create vite@latest and choose ‘react’ and ‘typescript’.

Create Canvas

In the front end, create a component Board. This component will include our Canvas and its functionalities.



import React, { useRef } from 'react';

const Board = () => {

    const canvasRef = useRef<HTMLCanvasElement>(null);


    return (
        <canvas
            ref={canvasRef}
            width={600}
            height={400}
            style={{ backgroundColor: 'white' }}
        />
    );
};


export default Board;

Here, we create a reference of the current state of the canvas using useRef hook which is now known as canvasRef. We have kept the background color to be white to create a whiteboard environment, it could be any color you want or none at all.

Draw on canvas

Now, we created the canvas, let’s see how we can draw/write on it.



    useEffect(() => {


        // Variables to store drawing state
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;


        const startDrawing = (e: { offsetX: number; offsetY: number; }) => {
            isDrawing = true;


            [lastX, lastY] = [e.offsetX, e.offsetY];
        };


        // Function to draw
        const draw = (e: { offsetX: number; offsetY: number; }) => {
            if (!isDrawing) return;


            const canvas = canvasRef.current;
            const ctx = canvas.getContext('2d');
            if (ctx) {
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
            }


            [lastX, lastY] = [e.offsetX, e.offsetY];
        };


        // Function to end drawing
        const endDrawing = () => {
            isDrawing = false;
        };


        const canvas: HTMLCanvasElement | null = canvasRef.current;
        const ctx = canvasRef.current?.getContext('2d');


        // Set initial drawing styles
        if (ctx) {
            ctx.strokeStyle = black;
            ctx.lineWidth = 5;


            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';


        }
        // Event listeners for drawing
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', endDrawing);
        canvas.addEventListener('mouseout', endDrawing);


        return () => {
            // Clean up event listeners when component unmounts
            canvas.removeEventListener('mousedown', startDrawing);
            canvas.removeEventListener('mousemove', draw);
            canvas.removeEventListener('mouseup', endDrawing);
            canvas.removeEventListener('mouseout', endDrawing);
        };
    }, []);

We are managing different mouse events on our canvas using JavaScript event listeners. As soon as the mouse is right-clicked on canvas, we perform the startDrawing() function, and when the mouse moves, draw() is invoked, and as soon as we leave the mouse click, the endDrawing() function is called. Let’s see this in detail.

We use the ctx variable to get the current canvas reference and perform actions on it. We have kept some default properties of our ctx variable, such as strokeStyle to be black, lineWidth is 5, lineCap, and lineJoin to be round.

We setup the event listeners on Canvas and also clean up the event listeners when the component unmounts or runs before the next effect. We are using isDrawing, lastX, and lastY variables to control the drawing state. Initially, isDrawing is set to false, until mousedown occurs. It changes the state of isDrawing to true. When the mouse moves, the ctx variable creates strokes according to the position of our cursor on the canvas. When we stop the right click, or move the cursor out of the canvas, the endDrawing() function is called which sets the isDrawing to false. With this, we can freely draw on canvas :)

Backend

Now, let’s add the feature to allow multiple users to use the whiteboard at the same time. Go to the backend directory, first, execute the command
npm install socket.io, and code the following in an index.js file.



const { Server } = require('socket.io');
const io = new Server({
    cors: "http://localhost:5173/"
})
io.on('connection', function (socket) {


    socket.on('canvasImage', (data) => {
        socket.broadcast.emit('canvasImage', data);
    });
});


io.listen(5000);

Here, we have initialized a new Socket.IO server instance named io. The cors option is set to allow connections from the specified URL (http://localhost:5173/), which is our front-end URL. If we don’t put this, our frontend will not be able to share resources with the backend.

The io.on(‘connection’) sets up an event listener for whenever a client connects to the Socket.IO server. Inside this, we have another event listener listening to the event ‘canvasImage’ from the front end via users.
When a user emits an event from the front end, it will contain the most recent copy of the canvas. We will receive the data using this event and then socket.broadcast.emit(‘canvasImage’, data) broadcasts the received canvasImage data to all connected clients except the client that sent the original 'canvasImage' event. Last, but not least, we start our server using the command node index.js which runs on port 5000.

Client Socket Connection

In Board.tsx, we will now make some changes. Before that, we’ll install 'socket.io-client' package in the frontend directory.



import React, { useRef, useEffect, useState } from 'react';
import io from 'socket.io-client';

const [socket, setSocket] = useState(null);

    useEffect(() => {
        const newSocket = io('http://localhost:5000');
        console.log(newSocket, "Connected to socket");
        setSocket(newSocket);
    }, []);


    useEffect(() => {

        if (socket) {
            // Event listener for receiving canvas data from the socket
            socket.on('canvasImage', (data) => {
                // Create an image object from the data URL
                const image = new Image();
                image.src = data;


                const canvas = canvasRef.current;
                // eslint-disable-next-line react-hooks/exhaustive-deps
                const ctx = canvas.getContext('2d');
                // Draw the image onto the canvas
                image.onload = () => {
                    ctx.drawImage(image, 0, 0);
                };
            });
        }
    }, [socket]);

We’ll create a new useState hook named socket for managing sockets.
const newSocket = io('http://localhost:5000') establishes a connection with the server and client.

To get updates from all users using the whiteboard, we are listening for the ‘canvasImage’ event from the server using the useEffect hook. If we receive an event, we are going to draw that image on our current canvas.

So, shall we send the image to the server? Every time we draw? No, we send the image to the server when we are drawn i.e. once, we lift our right-click. Here’s the updated endDrawing() function.



        const endDrawing = () => {
            const canvas = canvasRef.current;
            const dataURL = canvas.toDataURL(); // Get the data URL of the canvas content


            // Send the dataURL or image data to the socket
            // console.log('drawing ended')
            if (socket) {
                socket.emit('canvasImage', dataURL);
                console.log('drawing ended')
            }
            isDrawing = false;
        };

Simple! With this, we are done with a collaborative whiteboard. But, if you want an option to adjust the color and size of the brush. Hold on, we are going to do it next.

Adjust Color and Size

We are going to use two states for controlling these two brush properties. In App.tsx, we are going to use onChange() function on the inputs to update each state.



import { useEffect, useState } from 'react';
import './App.css';
import Board from './component/Board';

const CanvasDrawing = () => {

  const [brushColor, setBrushColor] = useState('black');
  const [brushSize, setBrushSize] = useState<number>(5);

  return (
    <div className="App" >
      <h1>Collaborative Whiteboard</h1>
      <div>
        <Board brushColor={brushColor} brushSize={brushSize} />
        <div className='tools' >
          <div>
            <span>Color: </span>
            <input type="color" value={brushColor} onChange={(e) => setBrushColor(e.target.value)} />
          </div>
          <div>
            <span>Size: </span>
            <input type="range" color='#fac176'
              min="1" max="100" value={brushSize} onChange={(e) => setBrushSize(Number(e.target.value))} />
            <span>{brushSize}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CanvasDrawing;

Let’s add some CSS in App.css to make it look a bit more pretty.



.App {
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    height: 100vh;
    width: 100%;
    padding: 3em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.tools {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 1em;
    background-color: black;
    color: white;
}


h1 {
    margin-bottom: 1rem;
    text-align: center;
}


input {
    margin: 0 5px;
}


span {
    font-size: 1.3em;
}




@media screen and (max-width: 600px) {
    .tools {
        flex-direction: column;
        align-items: start;
    }


}

Index.css



@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


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

We are passing brushSize and brushColor states as props to the Board component.



interface MyBoard {
    brushColor: string;
    brushSize: number;
}


const Board: React.FC<MyBoard> = (props) => {

    const { brushColor, brushSize } = props;

    useEffect(() => {

// Variables to store drawing state
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        const startDrawing = (e: { offsetX: number; offsetY: number; }) => {
            isDrawing = true;


            console.log(`drawing started`, brushColor, brushSize);
            [lastX, lastY] = [e.offsetX, e.offsetY];
        };


        // Function to draw
        const draw = (e: { offsetX: number; offsetY: number; }) => {
            if (!isDrawing) return;


            const canvas = canvasRef.current;
            const ctx = canvas.getContext('2d');
            if (ctx) {
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
            }


            [lastX, lastY] = [e.offsetX, e.offsetY];
        };


        // Function to end drawing
        const endDrawing = () => {
            const canvas = canvasRef.current;
            const dataURL = canvas.toDataURL(); // Get the data URL of the canvas content


            // Send the dataURL or image data to the socket
            // console.log('drawing ended')
            if (socket) {
                socket.emit('canvasImage', dataURL);
                console.log('drawing ended')
            }
            isDrawing = false;
        };


        const canvas: HTMLCanvasElement | null = canvasRef.current;
        const ctx = canvasRef.current?.getContext('2d');


        // Set initial drawing styles
        if (ctx) {
            ctx.strokeStyle = brushColor;
            ctx.lineWidth = brushSize;


            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';


        }
        // Event listeners for drawing
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', endDrawing);
        canvas.addEventListener('mouseout', endDrawing);


        return () => {
            // Clean up event listeners when component unmounts
            canvas.removeEventListener('mousedown', startDrawing);
            canvas.removeEventListener('mousemove', draw);
            canvas.removeEventListener('mouseup', endDrawing);
            canvas.removeEventListener('mouseout', endDrawing);
        };
    }, [brushColor, brushSize, socket]);

In the useEffect, we are making changes ctx.strokeStyle = brushColor; and ctx.lineWidth = brushSize; and adding brushColor, brushSize, socket in the dependency array.

Responsive Canvas

We are going to make our canvas responsive with a bit of JavaScript. The window object to fetch the width and height of the device and accordingly, we will show the canvas.



    const [windowSize, setWindowSize] = useState([
        window.innerWidth,
        window.innerHeight,
    ]);


    useEffect(() => {
        const handleWindowResize = () => {
            setWindowSize([window.innerWidth, window.innerHeight]);
        };


        window.addEventListener('resize', handleWindowResize);


        return () => {
            window.removeEventListener('resize', handleWindowResize);
        };
    }, []);




    return (
        <canvas
            ref={canvasRef}
            width={windowSize[0] > 600 ? 600 : 300}
            height={windowSize[1] > 400 ? 400 : 200}
            style={{ backgroundColor: 'white' }}
        />
    );

We are using ‘resize’ event listener to update the state of the width and height of the windowSize state. And finally, we have completed our web app.

I hope you liked this project.
Thank you for reading!

If you have any doubts or wanna get a peek at the source code. You can check it out here.

Connect with me on-

Send Files to IPFS using Pinata API in ReactJS

Fidal Mathew — Wed, 01 Jun 2022 03:34:34 +0000

Hi fellow readers, I hope you’re doing good. Web3 is an amazing space and every day there is something new to learn no matter how experienced you are. In this article, I’m gonna talk about how we can upload files to IPFS using Pinata API.

Before moving on, let's talk a little about IPFS. IPFS/ InterPlanetary File System is a protocol and peer-to-peer network for storing and sharing data in a distributed file system. Many companies provide this service, for example: Pinata, which we’re gonna work on in this article.

First, to work with Pinata IPFS, create an account on Pinata. We need API keys to work with their API. Therefore, in the top right corner, click on the profile option and click on the API Keys option.

Now, keep the Admin option on because you’d like to pin files to the IPFS and enter any name you’d like. It will now generate a new API_KEY along with a SECRET_KEY. Store both the details in a ".env.local" file present at the root of the React App folder as:



REACT_APP_PINATA_API_KEY=<your api key>
REACT_APP_PINATA_API_SECRET=<your secret key>

Make sure to install dotenv npm package using: npm i dotenv

So, let's define a useState hook to manage the content of the file.



    const [fileImg, setFileImg] = useState(null);

Note: Don’t forget import {useState} from ‘react’;

The next thing we need is a function to check whether we are having an empty file, if not we will be sending that file using the Pinata API.



    const sendFileToIPFS = async (e) => {

        if (fileImg) {
            try {

                const formData = new FormData();
                formData.append("file", fileImg);

                const resFile = await axios({
                    method: "post",
                    url: "https://api.pinata.cloud/pinning/pinFileToIPFS",
                    data: formData,
                    headers: {
                        'pinata_api_key': `${process.env.REACT_APP_PINATA_API_KEY}`,
                        'pinata_secret_api_key': `${process.env.REACT_APP_PINATA_API_SECRET}`,
                        "Content-Type": "multipart/form-data"
                    },
                });

                const ImgHash = `ipfs://${resFile.data.IpfsHash}`;
             console.log(ImgHash); 
//Take a look at your Pinata Pinned section, you will see a new file added to you list.   



            } catch (error) {
                console.log("Error sending File to IPFS: ")
                console.log(error)
            }
        }
    }

Finally, let's define what we’re gonna return. We are calling a function sendFiletoIPFS() when the form is submitted, and the value of the file is gonna be e.target.files[0].



return(
<form onSubmit={sendFileToIPFS}>
<input type="file" onChange={(e) =>setFileImg(e.target.files[0])} required />
<button type='submit' >Mint NFT</button>            
</form>
)

You can learn more about how to send JSON data, remove files from IPFS, etc in the API documentation by Pinata.
I hope you learned how to send files to Pinata IPFS in a React Application. If you have any queries, feel free to connect with me on:

If you want to mint an NFT with IPFS API, you can take a look at my project page here:
https://github.com/FidalMathew/Voting_system_blockchain/blob/main/client-votingSystem/src/SendNft.jsx

Till then, keep hacking!😊

5 things you need to know about tag

Fidal Mathew — Sat, 28 May 2022 06:03:43 +0000

Hi folks, how are you holding up? I hope you’re doing good. In this blog, I’m gonna share some properties about the <input> tag that I wish I’d known sooner.

1. Focus:

The :focus selector comes into action when we click the input element and we can type content in the input field.

Suppose we don’t have a border in our <input> tag, we can implement this using:

input {
    border: none;
}

But, when we begin to type content in our input label, we get those borders back again. So, a simple solution to this problem will be:

input:focus{
  outline: none;
}

2. Autocomplete:

Autocomplete helps us to complete input fields, but sometimes it becomes irritating and suggests wrong details. A method to turn off autocomplete would be:

React:

<input type=”text” autoComplete="new-off">

HTML:

<input type=”text” Autocomplete="off">

3. File input:

Sometimes, text content is not what we want to send, it might be images, gifs, videos, etc. We can send this type of data using the type="file" attribute.

<input type="file">

Usually, we use e.target.value to access the input value, but here we can access the file data using e.target.files[0]. It contains the details of the file like its name, path, etc in form of an object.

The "no file chosen" text is black by default, you can change this to any color using input[type='file'].

input[type='file'] {
  color: rgb(255, 255, 255)
}

4. Autofocus

The input autofocus attribute specifies that an input field should automatically get focus when the page loads. Example: While editing/making blogs, when we land on the edit blog page, we would want the input to be in focus.

<input type="text" autofocus>

5. Input list attribute

Want the user to choose from a specific list of options? We can use the list attribute. Let’s look at an example.

<form onSubmit={function}>
  <input list="anime" name="anime">
  <datalist id="anime">
    <option value="Naruto">
    <option value="My Hero Academia">
    <option value="Death Note">
    <option value="Dragon Ball Z">
    <option value="Attack on Titan">
  </datalist>
  <input type="submit" >
</form>

That’s it, folks, I hope you enjoyed these tips and would incorporate these small techniques in your next projects :)

If you know of other tips/tricks, let me know in the comments. Thanks for reading :)

Connect with me on -

Tips to improve your CSS skills

Fidal Mathew — Fri, 04 Mar 2022 16:40:06 +0000

Hello fellow readers, in this blog I will be sharing some tips to improve CSS.

I have seen many developers struggling with CSS, and I know CSS can be a little intimidating. Learning about all the properties at once might be difficult. I too felt the same when I was learning CSS. I took some break in between and continued later.

Here’s are some tips on how to improve your CSS:

Make Projects

Yes, you heard it right! Make projects, there is a high possibility that you might not be doing the task in the most efficient or best manner. But, building projects from scratch allows you to think and develop your skills. No matter how many tutorials you binge, unless and until you code it or try it, there’s no way will improve.

Learn Flexbox

So, you might be thinking, why is flexbox on the list and not other CSS properties? The reason is simple, we all learn the basic fundamentals like color, background, padding, margin, etc. But many developers face issues in alignment, adjusting <div>. I love using flexbox, it is simple and easy. Forget about grid and float, you can learn them later. Learning flexbox will save you loads of time and a feeling of control.

Googling is the key

One of the most used things, when I sit down to work on web development projects is to google. Believe me, I literally google how to remove style on <ul> tag. Even though, you might not remember each and every property, Google if you want to find some property before giving up.

Experiment

I feel experimenting with your skills is important. Not just making the copy of websites that a Youtuber or Course teacher taught you, you should try to build websites on your own.
For eg: I tried copying the Youtube website, it was really unique compared to other websites.

During this project, I learned how to style scrollbars and more about position, flexbox, height properties. It was an amazing experience! Once you build something on your own, your confidence increases and you build amazing things.

Youtube and blogs

Previously I told you not to be completely dependent on youtube and blogs. I stand with my previous point, but here’s the catch. Don’t binge watch content! Learning through youtube and blogs is awesome

You see experienced developers code and learn from it
You learn new tricks and tips
You get inspired and try to replicate

Connect

I hope this blog benefited you if you are stuck with CSS or are looking forward to learning it.
It felt great to share my experience with the community and hope we all become better developers 😄!

I would love to connect with you:

Automatic Deployment on React App: Github Actions

Fidal Mathew — Wed, 02 Feb 2022 18:27:35 +0000

Hello developers, hope you are doing good. While using Github pages for deployment, it has been tricky to set up continuous deployment in React Apps, which is automatic in HTML files.

Need for Github Actions

Many people use Netlify to get rid of this problem, but today I’m gonna show you how to set up continuous deployment on Push.

I am also a newbie in Github actions, so pardon me if I say something wrong along the way.
So, let's look at how we want to push the react app to Github.

How to deploy manually

First, we make sure that all the dependent packages are installed. We run npm install to install the packages.

We then have to build the react app so Github pages can deploy the static HTML file inside the build folder. We can do this operation by running npm run build.

Finally, we push it Github after committing changes using git push.

But, what if we have to make more changes? Or what if someone wants to make a PR and contribute to the repository?

We don’t want to manually build the react app, again and again, each time we commit. So let’s ease things out with the help of Github actions.

Continous Deployment using Github Actions

Add a folder named “.github” in the root directory, inside that folder add another folder named workflows. We can have multiple workflows, but in this blog, we only require one.

Inside the workflows folder, make a file named deploy.yml (any name but ext should be “.yml”)
Paste the below code there.



name: Github Page Deploy Workflow

on:

  push:

    branches: [main]

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v2

      - uses: actions/setup-node@v1

        with:

          node-version: "12.x"

      - run: npm ci

      - run: npm run build

      - name: Deploy

        uses: crazy-max/ghaction-github-pages@v1

        with:

          target_branch: gh-pages

          build_dir: build

        env:

          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Explaination

Let’s take a look at how it works.

We are having a Github action named Github Page Deploy Workflow.
The Github action gets triggered on push action on the main branch.
We are having a job named deploy, we are running this on a ubuntu-latest system somewhere using cloud.
Uses refer to the Github repositories we are using to run the commands which we will take a look at soon.
We are using Node.js version “12.x”. We then run the commands
1. npm ci - Equivalent to npm install which installs all the dependencies.
2. npm run build - Which builds the build folder.
We then deploy the project to the gh-pages branch by providing the directory as the build folder.
Last but not the least, we authenticate the Github actions workflow using secret GITHUB_TOKEN.

Here is an example repository where I have implemented the same - https://github.com/FidalMathew/Poke-dex

Thank you for reading, I hope you liked it!😄

I would love to connect with you on -

UseState is asynchronous: Learn how to use useState and useEffect properly

Fidal Mathew — Tue, 25 Jan 2022 04:16:01 +0000

Hello readers, today I’m gonna talk about one of the issues I faced when I was making projects using React js.

UseState is asynchronous, let me show you what I mean via a small example.

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

export default function App() {


    const [val, setVal] = useState(0);

    const addVal = () => {
        setVal(val + 1);
        console.log(val);
    }

    useEffect(() => {

        console.log("effect ", val);

    }, [val]);


    return <div>

        <div>{val}</div>

        <div><button onClick={() => { addVal() }}>ADD</button></div>
    </div>
}

Here we are having a state variable named val initialized with 0.

We also have a button, which on click, calls a function addVal()

addVal() has the following functions -

Set the state of val by incrementing it.
It is done by setVal(val+1)
Console.log(val);

We also have a useEffect that is triggered when state of val changes.

Let’s look at the console after clicking the button once.

1. First - The first console is of useEffect when the page first loads.

2. Second - The second console is due to the addVal function.
After, we update the state of val.

But, the value which gets printed remains the same i.e 0.

So, what happening? The value of val isn’t updated immediately, useState is asynchronous. It takes time to update so it allows rest of the program to continue and updates the value later.

3. Third - The third console log is due to the useEffect, which displays the value of val after the state is updated i.e 1.

I hope you understood the concept and remember to manage your state changes using useEffect. I have made a lot of mistakes, not knowing the concept completely. I hope you don’t make them too.

Keep learning and thanks for reading :)

Feel free to connect with me on -

DEV_Lintree - LinkTree for DEVELOPERS

Fidal Mathew — Thu, 13 Jan 2022 11:47:09 +0000

Overview of My Submission

My project Dev_LinkTree allows its user to share all their links in 1 single page to anyone all around the globe.
Along with this,

If user uses DEV.to, all the person's blogs are automatically
shown as one of the links.
If user uses Github, all the person's hosted projects(link made available in website option) is shown via single link.

The user can add/delete the links they created with secure logins.

The main aim of my project is to help the user organize their portfolio with their blogs/projects all in one place.

Submission Category: Choose Your Own Adventure

Link to Code

FidalMathew / DEV_Linktree

DEV_Linktree - Linktree for Developers

Welcome to DEV_LinkTree Repository

My project Dev_LinkTree allows its user to share all their links in 1 single page to anyone all around the globe.
Along with this,

If user uses Dev.to, all the person's blogs are automatically shown as one of the links.
If user uses Github, all the person's hosted projects(link made available in website option) is shown via single link.

The user can add/delete the links they created with secure logins.

The main aim of my project is to help the user organize their portfolio with their blogs/projects all in one place.

My DEV_LinkTree - https://dev-linktree.herokuapp.com/user/fidalmathew

Create yours here - https://dev-linktree.herokuapp.com/

View on GitHub

Additional Resources / Info

Create your DEV_LinkTree here - https://dev-linktree.herokuapp.com/

My DEV_LinkTree - https://dev-linktree.herokuapp.com/user/fidalmathew

Edit DEV_LinkTree Page

Login Page

Signup Page

Conclusion

This project is my first ever MERN project I have deployed. I learnt a lot while building this project and hope to build more in future.
Thank you DEV Community and MongoDB for organizing this hackathon.

CSS tips on Images you need to know

Fidal Mathew — Sat, 01 Jan 2022 05:01:37 +0000

Hi folks, hope you are doing good. In this blog I'm gonna share 5 properties to keep in mind while working with images -

1. Object-fit : cover -

This property allows the image to fill the entire dimensions while maintaining its aspect ratio. Especially useful for profile images.

2. Transform: scaleX(-1) / scaleY(-1) -
Use transform: scaleX(-1) to flip your image horizontally and scaleY(-1) vertically.

3. Object-fit : contain -

This property is used to contain the entire image in the desired dimension and also maintains the aspect ratio. This property is used a lot in making banners.

4. Filter: drop-shadow -

This property is used to add shadows to images with no background.
Ex: filter: drop-shadow(30px 10px 4px #3a3a3a);

30px indicates its relative position towards the right and a negative value will move the shadow towards the left.

10px indicates its relative position towards the top and a negative value will move the shadow towards the bottom.

4px represents its blur factor

3a3a3a represents its color

5. Filter: opacity -

This property increases the transparency of the image depending upon the percentage.

If you know of other tips/tricks, let me know in the comments. Thanks for reading :)

Connect with me on -

DEV Community: Fidal Mathew

Async vs Defer in JavaScript: Which is Better?🤔

Default Behaviour

Async

Defer

Conclusion

Throttling ⏱️ vs Debouncing ⏳: Boost Performance for your React app 🚀

Why do we need them?

Debouncing

Throttling

Conclusion

⏰ Trust issues with setTimeout()🤯 **Learn with examples**

How does JavaScript work?

Call stack:

Execution Context:

How does setTimeout work?

Callback queue:

Examples

Example 1:

Example 2:

🔐 Session-Based vs. Token-Based Authentication: Which is better?🤔

🔐 Session-based auth

1. User Login:

2. Checking Details:

3. Creating a Session:

4. Getting a Session ID:

5. Using the Session ID:

6. Server Checks:

7. Access Granted:

Example

Implementation

Login route

Protected route

Logout route

🔐 Token-based auth

1. User Login Request:

2. Credential Verification:

3. Token Generation:

4. Token Signing and Hashing:

5. Sending the Token:

6. Token Storage Options:

7. Token Expiry and Security:

8. Including Token in Requests:

Server-Side Validation:

10. Token Validation and User Authentication:

Example

Login

Protected route

Key differences

Which method should be used?

Building a Collaborative Whiteboard using ReactJS, Socket.io and NodeJS 🤝

Create Canvas

Draw on canvas

Backend

Client Socket Connection

Adjust Color and Size

Responsive Canvas

Send Files to IPFS using Pinata API in ReactJS

5 things you need to know about tag

1. Focus:

2. Autocomplete:

3. File input:

4. Autofocus

5. Input list attribute

Tips to improve your CSS skills

Make Projects

Learn Flexbox

Googling is the key

Experiment

Youtube and blogs

Connect

Automatic Deployment on React App: Github Actions

Need for Github Actions

How to deploy manually

Continous Deployment using Github Actions

Explaination

UseState is asynchronous: Learn how to use useState and useEffect properly

DEV_Lintree - LinkTree for DEVELOPERS

Overview of My Submission

Submission Category: Choose Your Own Adventure

⏰ Trust issues with setTimeout()🤯 Learn with examples