I've been working with technology for over six years now, but I've never tried building a game that many of us loved during our childhood. So, this weekend, I decided to create this classic Snake game using web technologies, specifically ReactJS.

Before proceeding further, let me clarify what we are building. As we know, there are various versions of the Snake game available on the internet. What we are building is a game board where the snake will move at a constant speed in the user-selected direction. When it consumes a food ball, its length will increase, and a point will be scored. If the snake's head touches the wall boundary or any part of its own body, the game is over.

Github: https://github.com/bibekkakati/snake-game-web

Demo: https://snake-ball.netlify.app

Game Design

Components in the game

• Snake

• Food Ball

• Game Board

• Boundary Walls

Approach

• The game board is a 2D matrix with multiple rows and columns.

• The intersection of rows and columns forms a cell.

• A cell can be identified by its row number and column number.

• The snake's body parts will be represented by these cell numbers on the board.

• When the snake moves, the cell number (i.e., row and column number) will be updated for the body part cell based on the direction. For example, if the snake is moving to the right, the cell's column number will be incremented by 1.

• Before rendering the snake's position after each movement, we also need to perform these steps:

  • Check if this movement results in any collision with the boundary wall or its own body. If there is a collision, stop the game and show "game over"; otherwise, continue.

  • Check if the snake's head cell number is the same as the food ball's cell number. If they match, update the score and place a new food ball on the board.

Implementation

We are writing all the logic and UI code in a single file, App.jsx, and using index.css for the styling. In this implementation, we will not be discussing the styling.

Constants

First, we will declare the constants before the component function definition.

const COLs = 48; // Number of columns on board
const ROWs = 48; // Number of rows on board

// Default length of snake i.e, it will consume 10 cell by default
const DEFAULT_LENGTH = 10;

// Declaring directions as symbol for equality checks
const UP = Symbol("up");
const DOWN = Symbol("down");
const RIGHT = Symbol("right");
const LEFT = Symbol("left");

State and Reference

Declare the reference and state variables.

const timer = useRef(null);
const grid = useRef(Array(ROWs).fill(Array(COLs).fill("")));
const snakeCoordinates = useRef([]);
const direction = useRef(RIGHT);
const snakeCoordinatesMap = useRef(new Set());
const foodCoords = useRef({
    row: -1,
    col: -1,
});
const [points, setPoints] = useState(0);
const [gameOver, setGameOver] = useState(false);
const [isPlaying, setPlaying] = useState(0);

• The timer variable stores the instance of setInterval that we use to automate the snake's movement. This instance will be used to clear the interval when the game is over.

• The grid variable stores the empty 2D array used to render the game board.

• The snakeCoordinates variable stores the indexes of the snake's body parts, i.e., cell numbers. The 0th index value is the snake's tail, and the last value is the snake's head.

  • The value of snake coordinates will look like { row: [Number], col: [Number], isHead: [Boolean] }.

• The direction variable stores the user-selected direction. This value will be the same as the declared constant direction symbols.

• The snakeCoordinatesMap variable stores the set of snake body parts, i.e., cell numbers. This helps in the render method to check which part of the board (grid) we need to render a snake body part on. The variable name includes the word map, but the value is of type Set.

• The foodCoords variable stores the position of the food ball's cell number.

• The points, gameOver, and isPlaying are state variables used to store the score, game over status, and game play status, respectively.

You might have noticed that isPlaying is a number, not a boolean. This is due to a specific bypass mechanism we will discuss in the coming sections.

Functionality

Let's discuss the implementation of snake's body movement along with collision check and food ball consumption.

We are writing a function moveSnake to handle the snake movement logic.

const moveSnake = () => {
        if (gameOver) return;

        setPlaying((s) => s + 1);

        const coords = snakeCoordinates.current;
        const snakeTail = coords[0];
        const snakeHead = coords.pop();
        const curr_direction = direction.current;

        // Check for food ball consumption
        const foodConsumed =
            snakeHead.row === foodCoords.current.row &&
            snakeHead.col === foodCoords.current.col;

        // Update body coords based on direction and its position
        coords.forEach((_, idx) => {
            // Replace last cell with snake head coords [last is the cell after snake head]
            if (idx === coords.length - 1) {
                coords[idx] = { ...snakeHead };
                coords[idx].isHead = false;
                return;
            }

            // Replace current cell coords with next cell coords
            coords[idx] = coords[idx + 1];
        });

        // Update snake head coords based on direction
        switch (curr_direction) {
            case UP:
                snakeHead.row -= 1;
                break;
            case DOWN:
                snakeHead.row += 1;
                break;
            case RIGHT:
                snakeHead.col += 1;
                break;
            case LEFT:
                snakeHead.col -= 1;
                break;
        }

        // If food ball is consumed, update points and new position of food
        if (foodConsumed) {
            setPoints((points) => points + 10);
            populateFoodBall();
        }

        // If there is no collision for the movement, continue the game
        const collided = collisionCheck(snakeHead);
        if (collided) {
            stopGame();
            return;
        }

        // Create new coords with new snake head
        coords.push(snakeHead);
        snakeCoordinates.current = foodConsumed
            ? [snakeTail, ...coords]
            : coords;
        syncSnakeCoordinatesMap(); // Function to create a set from snake body coordinates
    };

• The first check ensures that if the game is over, we don't need to move the snake. It's just an extra precaution.

• Next, we derive the current snake coordinates, the snake tail position, and the snake head position.

• We then check if the food ball is consumed, meaning the snake head position should match the food ball position.

• After that, we iterate over the body parts, excluding the snake head, to determine the new coordinates of the snake body.

  • The position of each snake body part depends on the position of the next part, as the snake's body parts move in the same path as the head. So, we replace the current body part coordinates with the next body part's coordinates.

  • If the body part is the last one, i.e., the neck, it will take the coordinates of the current snake head.

• We then update the new snake head position based on the selected direction.

• Finally, we check for food consumption and collisions and update the new snake coordinates if there is no collision.

Let's talk about how we populate the food ball.

    const populateFoodBall = async () => {
        const row = Math.floor(Math.random() * ROWs);
        const col = Math.floor(Math.random() * COLs);

        foodCoords.current = {
            row,
            col,
        };
    };

We generate a random row and column number based on our constants and set them in the reference variable foodCoords.

Now, let's discuss the collision check function.

    const collisionCheck = (snakeHead) => {
        // Check wall collision
        if (
            snakeHead.col >= COLs ||
            snakeHead.row >= ROWs ||
            snakeHead.col < 0 ||
            snakeHead.row < 0
        ) {
            return true;
        }

        // Check body collision
        const coordsKey = `${snakeHead.row}:${snakeHead.col}`;
        if (snakeCoordinatesMap.current.has(coordsKey)) {
            return true;
        }
    };

The function will receive the new snake head coordinates as a parameter.

First, we check for boundary collisions. If the new snake head's coordinates are greater than the respective constants or less than 0, it means the snake head is going out of range, which is a collision.

Next, we check for self-collision, meaning the snake head colliding with its own body. We do this by checking if the snake head coordinates are already present in the snake coordinates map.

Then we have the startGame and stopGame functions to control the gameplay.

    const startGame = async () => {
        const interval = setInterval(() => {
            moveSnake();
        }, 100);

        timer.current = interval;
    };

    const stopGame = async () => {
        setGameOver(true);
        setPlaying(false);
        if (timer.current) {
            clearInterval(timer.current);
        }
    };

startGame triggers a setInterval with a 100ms interval. After each interval, the moveSnake method is called.

stopGame sets the game over state, updates the gameplay status, and clears the interval instance.

Then, we have the render method.

    const getCell = useCallback(
        (row_idx, col_idx) => {
            const coords = `${row_idx}:${col_idx}`;
            const foodPos = `${foodCoords.current.row}:${foodCoords.current.col}`;
            const head =
                snakeCoordinates.current[snakeCoordinates.current.length - 1];
            const headPos = `${head?.row}:${head?.col}`;

            const isFood = coords === foodPos;
            const isSnakeBody = snakeCoordinatesMap.current.has(coords);
            const isHead = headPos === coords;

            let className = "cell";
            if (isFood) {
                className += " food";
            }
            if (isSnakeBody) {
                className += " body";
            }
            if (isHead) {
                className += " head";
            }

            return <div key={col_idx} className={className}></div>;
        },
        [isPlaying]
    );

    return (
        <div className="app-container">
            {gameOver ? (
                <p className="game-over">GAME OVER</p>
            ) : (
                <button onClick={isPlaying ? stopGame : startGame}>
                    {isPlaying ? "STOP" : "START"} GAME
                </button>
            )}
            <div className="board">
                {grid.current?.map((row, row_idx) => (
                    <div key={row_idx} className="row">
                        {row.map((_, col_idx) => getCell(row_idx, col_idx))}
                    </div>
                ))}
            </div>
            <p className="score">SCORE {points}</p>
        </div>
    );

The getCell method checks if the cell is empty, part of the snake's body, or food, and updates the CSS class name accordingly.

We use the useCallback hook in the getCell method, with isPlaying as a dependency. This isPlaying variable is a number that increases by 1 with each snake movement.

Here's why we did this:

1. Stale State Issue:

   • Initially, many variables were state variables.

   • The snake movement logic didn't work well because setInterval was calling moveSnake but the state values inside moveSnake weren't updating properly.

2. Switch to Reference Variables:

   • To fix this, we changed those state variables to reference variables.

   • This allowed moveSnake to access the latest values.

3. Re-rendering Problem:

   • Reference variables don't trigger re-renders when they change.

   • To solve this, we used the isPlaying state variable which increments by 1 with each snake movement.

   • This increment ensures the getCell method has access to the updated reference variable and the component re-renders correctly.

Github: https://github.com/bibekkakati/snake-game-web

Demo: https://snake-ball.netlify.app

Works best on desktop web.

I hope this tutorial helps you understand the concept behind implementing a snake game. There are a few alternative approaches as well, but I found this method easier to understand and implement. Please feel free to share your feedback and suggestions.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

Embarking on the journey of launching CoderKit, a React.js application, brought with it the daunting challenge of Search Engine Optimization (SEO). This blog recounts the SEO hurdles faced and the inventive solutions employed to ensure visibility on Google.

The SEO Conundrum:

Post-launch, the realization struck that the application wasn't making its way to Google search results. Traditional solutions pointed toward static site generators or frameworks like Next.js, but migrating the project wasn't an option. Delving into SEO implementation nuances and website essentials, initial efforts to update meta descriptions in index.html proved futile.

Discovering the Power of Sitemap.xml:

A breakthrough emerged with the revelation of the significance of sitemap.xml. Creating a script to automatically generate this file based on known routes, devoid of dynamic backend-driven URLs, became pivotal. Configuring the Search Console to index these pages marked progress, but a notification soon arrived—indexing failure.

Addressing Redirection Woes:

Upon inspection, the issue lay in redirection. React applications default to landing on index.html, hindering search engines from indexing individual pages. An innovative solution materialized: generating HTML pages for each known route during the pre-build phase. These pages mirrored index.html structure but contained distinct meta tags and content pulled from the route config.

Making Redirection Seamless:

Concerns about server-level configurations were assuaged by platforms like Netlify, which inherently checked for file name matches with requested URLs. If found, they returned the file; otherwise, they defaulted to redirecting requests to index.html. This seamless redirection is crucial for React applications, ensuring that custom error components function effectively.

Testing and Triumph:

With all configurations updated in the Search Console, the real test began. After a day, a notification arrived—success! All pages were now indexed. However, the ranking was modest due to the application's novelty. A search appended with "coderkit" yielded optimal results, but there was room for improvement.

Conclusion:

This SEO journey with CoderKit reflects the iterative and adaptive nature of problem-solving in the tech realm. While the current approach has yielded positive results, the ever-evolving landscape of SEO beckons exploration. Feedback and alternative approaches are welcomed. Check out CoderKit to witness these strategies in action.

As a developer, I've been there, facing those repetitive coding tasks day in and day out. That's when the spark ignited. I asked myself, "How can we make this easier?"

💡 The Eureka Moment

And just like that, CoderKit was born. I dreamt of a toolbox filled with developer-friendly utilities. A JSON formatter, a text case converter, a code minifier and more – all at your fingertips.

🛠️ Building the Arsenal

The journey was a rollercoaster, crafting tools, and making them work seamlessly. It was just me and my code, hours upon hours. The tools became my coding companions.

👥 Inviting You to the Journey

Today, we're launching CoderKit Beta. It's about time we made your coding life simpler. These tools are designed to make your day-to-day coding tasks a breeze.

🤝 Your Feedback, Our Fuel

CoderKit isn't complete without you. Your feedback, and your insights – they're our guiding stars. This Beta launch is the beginning, and your suggestions will shape the future.

🔮 The Future of Coding

CoderKit is not just about tools; it's about coding with confidence. We're here to empower you – whether you're a pro or just starting.

🌐 Join the Journey

Come, and explore CoderKit Beta with us. Try out the tools, and share your thoughts. Let's make coding a bit more exciting.

🔧 Meet the Tools

• JSON Formatter: Tame unruly JSON data with ease, ensuring readability and error-free code.

• Text Case Converter: Convert text between various cases (e.g., CamelCase, snake_case) effortlessly.

• JavaScript Minifier: Reduce file size and boost website performance by minifying your JavaScript code.

• HTML Minifier: Optimize your HTML code for faster loading times and improved user experience.

• CSS Minifier: Streamline your stylesheets to enhance website performance.

• JavaScript Beautifier: Make your JavaScript code more readable and consistent.

• HTML Beautifier: Elevate the aesthetics of your HTML code for better readability.

• CSS Beautifier: Improve the structure and presentation of your CSS styles.

• Base64 Encoder/Decoder: Encode and decode data with this versatile utility.

• JWT Decoder: Decode JSON Web Tokens to inspect and verify their content.

• Lorem Ipsum Generator: Generate placeholder text for content drafting and design prototyping.

👉 Get Started

Visit coderkit.dev and see how CoderKit can simplify your coding journey. Welcome to a world where coding just got a whole lot easier.

Here's to coding adventures with CoderKit! 🎉

One of the main use cases for GPT is text generation. Given a prompt, GPT can generate human-like text that is coherent and flows naturally. This has a wide range of applications, including generating news articles, creating social media posts, and even writing code.

Another use case for GPT is language translation. By training GPT on a large dataset of parallel text in two different languages, it can learn the relationship between the languages and generate translations that are accurate and fluent.

GPT can also be used for summarization, by generating a shorter version of a long piece of text that retains the main points and ideas. This can be useful for creating summaries of news articles, research papers, and other lengthy documents.

One of the most notable use cases for GPT is chatbots. By training GPT on a large dataset of conversation transcripts, it can learn how to carry on a conversation with a user naturally and coherently. Chatbots powered by GPT has been used for customer service, providing information and assistance to users, and even for entertainment.

Aside from these specific use cases, GPT has also been used for a wide range of other natural language processing tasks, including question answering, text classification, and even creating music.

Overall, GPT is a powerful and versatile tool for natural language processing, with a wide range of use cases and applications. Its ability to generate human-like text and understand the context of a conversation makes it a valuable asset for a variety of industries and purposes.

Benefits or advantages of using chat GPT:

• Efficiency: Chatbots powered by GPT can handle a large volume of conversation without getting tired or needing breaks, which can be useful for customer service or other applications where there is a high demand for conversation.

• Personalization: GPT can generate personalized responses based on the input it receives, allowing it to have unique conversations with different users.

• Cost-effectiveness: Using chatbots powered by GPT can be more cost-effective than hiring human employees to handle conversation tasks.

• 24/7 availability: Chatbots powered by GPT can be available to chat with users around the clock, which can be convenient for users who need assistance outside of regular business hours.

• Language support: GPT can be trained in multiple languages, allowing it to carry on conversations with users in different languages.

Drawbacks or disadvantages of using chat GPT:

• Limited understanding of context: While GPT can generate text that flows naturally and considers the input it receives, it is ultimately limited in its understanding of context and may not be able to fully understand the nuances and subtleties of human conversation.

• Lack of empathy: As a machine learning model, GPT cannot feel empathy or understand the emotions of others. This can make it difficult for it to fully engage in empathetic or emotional conversations.

• Limited creativity: GPT is limited by the data it was trained on and the algorithms that power it, which means it may not be able to come up with creative or original responses to certain prompts.

• Lack of accountability: As a machine, GPT cannot take responsibility for its actions or hold itself accountable in the same way a human would. This can be a concern in certain applications, such as customer service.

• Dependence on data quality: The quality of the responses generated by GPT is largely dependent on the quality of the data it was trained on. If the training data is biased or contains errors, the responses generated by GPT may also be biased or inaccurate.

~ This article was written by Chat GPT.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

In this article, I will share the implementation that I used to check the system theme.

• We will use the method matchMedia() provided by the browser's window interface.

• matchMedia method expects a mediaQueryString as a parameter and it will return a MediaQueryList object.

• MediaQueryList object will have a property called matches of Boolean data type.

Code

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Dark Mode
}

prefers-color-scheme is a CSS media feature used to detect the system color theme.

We can also have a listener, if user changes the theme in-between.

window
   .matchMedia("(prefers-color-scheme: dark)")
   .addEventListener("change", (event) => {
       const theme = event.matches ? "dark" : "light";
   });

Let me know in the comments if you are aware of any other way to detect the system theme in web.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

In this short article we will see an alternative way of storing coordinates in MySQL database using the spatial data types like POINT.

Create a table

• Let us create a table named locations.
• Field coordinates of data type POINT.

CREATE TABLE locations (
      id INT(11) NOT NULL AUTO_INCREMENT,
      coordinates POINT,
      PRIMARY KEY (id)
);

Insertion of coordinates

• To insert/update the field coordinates, we need to prepare a string like this 'POINT(latitude longitude)'.
• Then we will use the in-built function called ST_GeomFromText to create a geometry in given SRID from WKT specification.
• Pass the prepared string of points into ST_GeomFromText function.

INSERT INTO 
     locations (coordinates) 
VALUES 
     (ST_GeomFromText('POINT(21.67890 91.54789)');

Table will store and display the data in the following way

id        coordinates
1         POINT(21.67890 91.54789)

Also, check this out to know how to capture user's geo-location in web browser.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

A CDN is a system of multiple servers distributed geographically which works together to provide fast delivery of Internet content like HTML pages, javascript files, stylesheets, videos and images etc.

Why do we need CDN?

• It reduces latency, thus it improves the website load time. Since the contents are distributed globally, the distance between clients and the content also gets reduced, resulting in faster access to the content.

• Minimize downtime and increases availability due to their distributed nature.

• Improves website security by providing DDoS mitigation and using secured and updated SSL/TLS certificates.

• It also helps in reducing bandwidth consumption costs of the origin server.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

Introducing SURL 🎊

You can try it out here: surl.bibekkakati.me

- What is SURL
- Why I created SURL
- How to use
- Current Features
- System Overview
- Project Code
- Tech Stack
- Upcoming Features
- Challenges
- Live Demo

What is SURL? 🔗

It is a web-based URL shortening service where user can generate a shorter form of their long URL.

Why I created SURL? ✨

The reason behind creating this service is that I have always been fascinated with the working, implementation and management of this kind of services because of its backend engineering, system design, scalability related complexities.

How to use? 📙

• Go to surl.bibekkakati.me

• Paste your long URL

• Once a short URL is generated, it will be shown on the screen

• Click it to copy to clipboard

Current Features 💡

• Generate a short URL instantly.

• Most important feature 😉 dark and light mode.

• Check the total URL hits by going to the /hits path of your short URL.

If your short URL is https://surl.bibekkakati.me/h0QuiOk, then go to https://surl.bibekkakati.me/h0QuiOk/hits.

System Overview 👀

Two services are there:

• SURL service is the main client-facing service, which is responsible for serving static files and issuing a short URL against a provided long URL by the user with the help of an API. The service is built by keeping scalability in mind so we can deploy multiple instances of this service without any issue to balance the incoming request load.

• KeyGen service is a standalone service that is responsible for generating unique keys for all the active SURL service. It generates 100,000 unique keys on request from any SURL service and returns the keys in response. Both the service communicate using gRPC.

Caching is used for faster access and to reduce the load on the database.

Project Code 👨‍💻

• SURL service: https://github.com/bibekkakati/surl

• KeyGen service: https://github.com/bibekkakati/surl-key-generator

Tech Stack 💻

• Node.js (Express.js) - Backend framework

• HarperDB - Database

• Nginx - Proxy Server

• Azure Cloud - Deployment

Upcoming Features 🔮

• User authentication

• Dashboard

• Custom short URL.

• Analytics like unique visits, visitor's country, city etc.

• QR-Code for short URL

• Private URL i.e, a visitor needs permission to access it or an access code.

Challenges

• Building a reliable and fast system.

• Tuning the server to handle larger concurrent users. Still trying to get a better result.

• Generating unique keys (short URL), which I achieved with the counter based approach.

KeyGen service assures that the same key will not be generated more than once.

Live Demo 👇

https://surl.bibekkakati.me

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

I am assuming, you have some experience with JavaScript and you are aware of the issues with error handling like throwing an exception to the parent method from try-catch block or chaining multiple then-blocks and implementing logic inside it. These things can easily mess up with the code making it difficult to read.

Golang avoids these type of problems by handling errors/exceptions atomically.

Error handling in Golang

result, err := methodCall()
if err != nil {
  // handle error
}
// do something with the result

We can use a similar pattern in JavaScript with the help of a try-catch block like this.

const getData = async () => {
  try {
    const result = await methodCall();
    return [result, null];
  } catch(error) {
    return [null, error];
  }
}

If any error occurs, we are returning the error in the second position of the array and the result as null in the first position.

If there is no error, we are returning the result in the first position and error as null in the second position.

Now we can call the getData method then handle the result and error like this.

const [result, error] = await getData();
if (error !== null) {
  // handle the error
}
// do something with the result

This pattern of error handling makes it very easy to read and understand the code.

Let me know what do you think about this pattern.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

Let's directly jump onto the code part.

I am assuming you have some basic knowledge of HTML, JavaScript and DOM manipulation.

👨‍💻 Code

We will write a very simple HTML code to display the paragraph content and a copy button.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body align="center">
    <p id="content">The text to be copied.</p>
    <button id="copy">Copy Text</button>
    <script src="./script.js"></script>
</body>

</html>

script.js

// Reference of the paragraph tag
const content = document.getElementById("content");

// Reference of the copy button
const copyBtn = document.getElementById("copy");

// Copy button's onclick handler
copyBtn.onclick = copyToClipboard;

// Method responsible for copying the content
function copyToClipboard() {
    navigator.clipboard
        .writeText(content.innerText)
        .then(() => alert("Copied to clipboard"))
        .catch((e) => alert(e.message));
}

So first we are getting the reference of the paragraph tag and the copy button, then assigned the onclick handler to the copy button.

On clicking the copy button, the copyToClipboard method will get invoked.

Copy To Clipboard

Inside the copyToClipboard method we are using the Clipboard API.

The Clipboard API can be used to implement cut, copy, and paste features within a web application.

• The system clipboard is exposed through the global navigator.clipboard property.

• The writeText method of the clipboard object expects a string value as an argument, which will be written to the clipboard.

• It returns a promise which is resolved once the clipboard's contents have been updated. The promise is rejected in case of any kind of error.

...
navigator.clipboard
    .writeText(content.innerText)
    .then(() => alert("Copied to clipboard"))
    .catch((e) => alert(e.message));
...

So we are passing the inner text of the paragraph tag to the writeText method and if the promise is resolved i.e, the text has been copied.

✨ Bonus

Similarly, we can implement cut functionality.

After the text has been copied to the clipboard, just overwrite the inner text of the paragraph tag with an empty string.

navigator.clipboard
    .writeText(content.innerText)
    .then(() => {
        // Overwriting with an empty string
        content.innerText = "";
        alert("Copied to clipboard");
    })
    .catch((e) => alert(e.message));

🔗 Demo

Github Repo: Link

Try It Out: Link

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

In this article, we are going to see how we can generate a PDF of any HTML element in the browser i.e, entirely client-side.

We will use the package html2pdf to generate the PDF.

html2pdf is using html2canvas to convert the HTML element to canvas and then into an image. Then it generates the PDF of the image with the help of jsPDF.

If you want to know more about html2canvas, check out this article.

Implementation

Let us see a small implementation of the package html2pdf.

index.html

A basic HTML page, where the package's bundle link is included.

Created a div block of simple content and a export PDF button. We will be generating a PDF of the div whose id is view on clicking the export PDF button.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML2PDF</title>
    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js" defer></script>
    <script src="./script.js" defer></script>
</head>

<body onload="main()" align="center">
    <div id="view" align="center">
        <h1>Export PDF</h1>
        <h3>Using HTML2PDF</h3>
    </div>
    <button id="export-pdf">Export PDF</button>
</body>

</html>

script.js

JavaScript file containing the main method which will be invoked once the site loads and listening for the onclick event on the export PDF button.

On clicking the export PDF button, the html2pdf method will be called which takes the reference to the element (div) as its argument.

function main() {
    var view = document.getElementById("view");
    var exportPDF = document.getElementById("export-pdf");
    exportPDF.onclick = (e) => html2pdf(view);
}

After clicking the button, the PDF will be generated and downloaded directly to your system.

We can also pass some configuration options in the html2pdf method to handle image type, quality, filename etc. To know more about it, check here.

Note: Image-based PDF's are non-searchable.

Github repo: PDF-Generator

Try it out: Live

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

Before proceeding, I am assuming, you are aware of the request-response architecture of a basic web application. To build a real-time application like a chat application we can't use the basic request-response architecture, but we can use it with a polling mechanism to achieve the real-time behaviour. Apart from the polling mechanism we also have SSE(server-side event) and WebSocket to achieve real-time behaviour.

In this article, I am going to discuss two types of polling techniques i.e, long polling and short polling.

First, we need to know, what is polling?

Polling

Polling is a technique in which the client sends a request to the server asking for data in an interval of time.

The response from the server can be empty or any kind of data.

Short Polling

Short Polling is a technique in which the client sends a request to the server asking for data at fixed delays after getting a response from the previously sent request.

• Client sends a request to the Server.
• Server responds with an empty response or data, if available.
• Client will wait for the specified delay after receiving the response and continues the same request-response process again.

This technique is very simple and doesn't consume server resources, but event notifications are not so instant and there will be some delay.

Example

A client sends a request to the server asking for data, but the data is not available at that time and the server responds with an empty response.

The client will wait for 5 seconds before sending the next request. That means if, in that interval of time (5 seconds), any data is available the client will not be notified about this.

The client will be able to get the data when it sends the next request.

So this technique is not so instant, and there will some delay.

Long Polling

Long Polling is a technique in which the client sends a request to the server asking for data, but the server doesn't respond instantly if no data is available, rather it waits for a specific amount of time. If in that interval of time, any event happens or data become available, the server will respond with that data and in case of no events or data, the server will respond with an empty response after the specified timeout.

This technique is more complex and does consume server resources, but it can notify the client without any delay so it can give a better real-time experience.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

If you are a JavaScript developer, I am pretty much sure that you have used the npm package UUID at least once in your development journey.

For those who don't know what is UUID. It is an npm package to generate a unique string ID. Similar packages are available in other languages too.

But in this article I am not going to discuss UUID, rather I will discuss another awesome npm package to generate a unique ID known as NanoID.

What is NanoID?

A tiny, secure, URL-friendly, unique string ID generator for JavaScript.

Why NanoID?

• It is smaller in size as it has no dependencies.
• It is 60% faster than UUID.
• It uses cryptographically strong random APIs.
• It uses a larger alphabet than UUID (A-Za-z0-9_-).

We can control the behaviour of alphabets to be used.

NanoID is available in almost all the most used programming languages.

Disclaimer: All the above claims are picked from the package's docs itself. 😉

Implementation

It is very easy to implement. Will write the code in a Node.js environment using CommonJS import.

Basic Way

It will generate the ID synchronously.

// Importing
const { nanoid } = require("nanoid");

// It will generate and return an ID with 21 characters
const id = nanoid();

Async way

It will generate the ID asynchronously.

// Importing async API
const { nanoid } = require("nanoid/async");

// It will generate and return an ID with 21 characters
const id = await nanoid();

Custom Size

You can also pass the required ID's size as an argument.

// Importing
const { nanoid } = require("nanoid");

// It will generate and return an ID with 10 characters
const id = nanoid(10);

Reducing the size will increase the collisions probability.

Non-Secure

If you want performance and not concerned with security, then you can use the non-secure way.

// Importing non-secure API
const { nanoid } = require("nanoid/non-secure");

const id = nanoid();

Custom Character or Size

You can control what characters you want to be included in your ID.

// Importing customAlphabet API
const { customAlphabet } = require("nanoid");

// First Param: Characters
// Second Param: ID size
const nanoid = customAlphabet("123456789qwerty", 8);

// Generated ID would be like: "q15y6e9r"
const id = nanoid();

You can also use the customAlphabet with async way and non-secure way.

// Importing async API
const { customAlphabet} = require("nanoid/async");

// Importing non-secure API
const { customAlphabet} = require("nanoid/non-secure");

You can also check for the ID collision probability here.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

Technology has evolved in different ways and in the same way the concepts of building products or tools. Frontend web development is one of the domains which is changing rapidly with the growing community and requirements of faster development. Many libraries and frameworks have been introduced to the developers starting from jquery to react, angular etc. Every technology, concept, library and framework have its own pros and cons but they know how to stand out as per the requirement.

In this article, I am going to discuss different methods of creating frontend sites.

Topics

- Vanilla HTML Websites
- Client-Side Rendering
- Server-Side Rendering
- Static-Site Generator

Vanilla HTML Websites

Vanilla HTML or Static Websites are the raw form of websites that we build using HTML, CSS, JavaScript. They are directly served from a web host or CDN.

Pros

• It is easy to get started with.
• Generally, not so complex.
• SEO optimization can be done.

Cons

• Less modularity; Hard to update/maintain pages as we need to rewrite a lot of the same code for every page.
• New request to the server for every page.
• Generally, do not contain dynamic data.

Client-Side Rendering

You may have heard this term many times, it is also known as CSR in short. So what happens in Client-Side Rendering?

When we build a site with React, Angular or Vue, it creates a SPA (Single Page Application) that doesn't have any pre-rendered HTML pages. When the browser requests the server for the site, the initial request is for a blank HTML page and then it fetches the JS scripts that manipulate the DOM and render the pages. Routing, data handling etc., are also done within the browser itself.

Pros

• Easy to maintain codebase.
• Modular approach.
• It's fast except for the initial request.

Cons

• It is not SEO friendly.
• It can become complex.

React.js, Angular, Vue can be used to build SPAs.

We can optimize these kinds of sites with Server-Side Rendering.

Server-Side Rendering

In Server-Side Rendering, the pages are rendered on the server on every request for it. The server aggregates the data from its source like a database and fed it to the templates to render the requested HTML pages. And rendered pages are then sent back to the browser, to display to the user.

Pros

• Easy to maintain codebase.
• Modular approach.
• SEO friendly.

Cons

• Network latency can impact.
• New request for every page.

Next.js for React and Nuxt.js for Vue can be used for Server-Side Rendering.

There is a hybrid approach to get benefits of both CSR and SSR which we will be discussing next.

Static-Site Generator

In Static-Site Generator, the static pages are compiled at the build-time i.e, before deployment with some initial data. The static pages are then deployed to a web server. After the initial request, the site behaves more like a Single-Page Application.

Pros

• Easy to maintain codebase.
• Modular approach.
• SEO friendly.

Cons

• It can become complex.

Gatsby.js with React can be used for Static-Site Generator.

Conclusion

There is no hard and fast rule on which one you should use. It depends on your application and its usage.

In my opinion, Client-Side Rendering is suited for applications where users will stay for a longer time and will interact often and want a user experience similar to a desktop application. For example, a trading platform.

Server-Side Rendering is good for applications like Hashnode, a blogging platform.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

In this article, I will try to explain the behaviour of the boolean data type of JavaScript.

We often use if statements in JavaScript to check if a value, that can be of any data type is true or false. But do you know that these values are not really true or false, rather they are considered as truthy or falsy values?

Explanation

Let's understand this with an example.

var val = "blog";
if (val) {
  console.log(true);
}

So in the above code snippet, we declared a variable val which is storing a string "blog".

In general, if statements expect a boolean expression or a boolean condition but here we are passing the variable val directly without any boolean expression.

And this if statement evaluates the value of val to true and execute its block. But why?

Why

In JavaScript, any non-zero number including the negative numbers and non-empty strings are termed as truthy values and the truthy values are translated to boolean true when evaluated in a Boolean context.

So in our example, as the value of the variable val is a string with data i.e, not empty, it is considered as a truthy value which evaluates to true in the if statement condition.

And the values other than the truthy values are termed as falsy values.

falsy values in JavaScript.

• false
• null
• undefined
• 0
• NAN
• ''
• ""
• 0n
• -0
• ``
• document.all

Conversion

Convert the truthy and falsy values to boolean true or false.

You can pass the truthy or falsy value to the Boolean() and it will return true or false.

var val = "blog";
if (Boolean(val)) {
  console.log(true);
}

Or you can use the following syntax to convert it to a pure boolean value.

var val = "blog";
if (!!val) {
  console.log(true);
}

We know this truthy or falsy concept is not so impacting but it is always better to handle pure boolean values.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

In this article, we will see how applications like zoom use Screen Capture API provided by the browsers to capture your screen and stream it to the other end.

We will see a basic implementation of capturing the screen just to get an idea.

Screen Capture API

The Screen Capture API let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.

Implementation

First, we will create a simple HTML web page to show the captured screen's stream and buttons to start and stop capturing.

Filename: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Screen Share</title>
  <script src="./script.js" defer></script>
</head>
<body align="center">
  <h2>Screen Capture</h2>
  <p>
    <button id="start">Start Sharing</button>
    <button id="stop">Stop Sharing</button>
  </p>
  <video id="video" width="800" height="680" autoplay></video>
</body>
</html>

I am assuming you have some basic knowledge of HTML and CSS.

Now we will create the JavaScript file where we will implement the main logic part.

Filename: script.js

function main() {
  const video = document.getElementById("video");
  const start = document.getElementById("start");
  const stop = document.getElementById("stop");

  var displayMediaOptions = {
    video: {
      cursor: "always",
    },
    audio: false,
  };

  start.onclick = function (e) {
    startSharing();
  };
  stop.onclick = function (e) {
    stopSharing();
  };

  async function startSharing() {
    try {
      video.srcObject = await navigator.mediaDevices.getDisplayMedia(
        displayMediaOptions
      );
      } catch (error) {
        console.log(error);
      }
    }

    function stopSharing() {
      let tracks = video.srcObject.getTracks();
      tracks.forEach((track) => track.stop());
      video.srcObject = null;
    }
}

main();

• At first, we are assigning the reference of the video element and button elements.

• Listening on the start and stop button for an onclick event, which will invoke the startSharing and stopSharing method respectively.

• displayMediaOptions is a kind of config option which we are passing when capturing the stream.

  • audio: false as we are not capturing the audio.
  • video.cursor: always means the cursor will always be visible on the stream.

Check the official docs for other options.

Start Sharing Function

To start capturing video from the screen, we are using the getDisplayMedia method on the instance of navigator.mediaDevices.

The Promise returned by the getDisplayMedia method resolves to a media stream that streams the captured screen which we are setting into the video.srcObject.

Stop Sharing Function

To stop capturing the screen, we are fetching the list of all the tracks using the getTracks method of video.srcObject. Then looping through the track list and calling its stop method. This will stop the stream.

After that, we are setting the video.srcObject to null.

Example✨

Github Repo: Screen Capture

Try it out: Live

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

In this article, we are going to learn how can we detect the internet connection state on our website.

This can be very useful to improve user experience by showing snack messages or pop-ups when the browser is not able to connect to the internet.

Implementation

We can get the current state of the connection by using window.navigator.onLine, which will return a boolean value.

• true if connected.
• false if not connected.

const online = window.navigator.onLine;
if (online) {
  // Is connected to internet
} else {
  // Not connected to internet
}

If the browser doesn't support window.navigator.onLine the above example will always come out as false or undefined.

Connection State Changes Listener

We can also detect the connection state by listening for network state change events i.e, online and offline.

window.addEventListener('offline', function(e) {
    // Network disconnected
  }
);

window.addEventListener('online', function(e) {
    // Network connected
  }
);

It's very easy to implement but there are some side cases where it might give a false-positive result.

• The computer is connected to a mobile hotspot, but mobile internet is not working then also you can get an online status.

• The computer is running a virtualization software that has virtual ethernet adapters that are always "connected".

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

In this short article, I will discuss how can we get unlimited email addresses with a single Gmail account.

Some of you might be using this feature already but I got to know about this recently so I thought of sharing.

Many times we create multiple email accounts to sign up on websites, to avail free services or for testing purpose. We have some services like temp-mail but those are accessible to the public so we can't use them for personal accounts.

If you have a Gmail account then you have access to unlimited email addresses using that one account.

How

Let say your Gmail address is username@gmail.com.

Then you can use your Gmail address like this too.

• username+1@gmail.com
• username+string@gmail.com

Just add any random string or number followed by a + sign to your Gmail username.

It will deliver all the emails of these Gmail addresses to your primary Gmail address, so no need to worry about handling multiple accounts and you can use your mail address on any website as they will treat it as a different mail address.

Use Case

Suppose you are creating a banking account, then you can use username+bank@gmail.com. Now you can filter your emails easily by using this Gmail address.

It is also useful to track down any compromised accounts and spammers.

Some websites do not accept this format of mail address or they just trim it down.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

A few months back, I was working on a web-based project where a feature was required that is to take a screenshot of an HTML div in the browser and show it to the user. I was like, sorry this is not possible. Then I did some research and got to know about this library called html2canvas.

So in this article, I will show how can we capture a screenshot of a web page or any element of it using html2canvas.

Implementation

• Download the javascript file: html2canvas

Code

Include the html2canvas.min.js file in your HTML file.

...
<script src="./html2canvas.min.js" defer></script>
...

Now we will use the html2canvas method to capture the screenshot of our web page or the HTML element.

html2canvas(document.getElementById("main"), {
  allowTaint: true,
  useCORS: true,
})
.then(function (canvas) {
  // It will return a canvas element
  let image = canvas.toDataURL("image/png", 0.5);
})
.catch((e) => {
  // Handle errors
  console.log(e);
});

The html2canvas method takes two arguments

• first is the HTML element whose screenshot you want.
• second is a configuration object.

In the configuration object, we are using

• allowTaint to allow cross-origin images to taint the canvas.
• useCORS to attempt to load images from a server using CORS.

You can find the available configuration options here.

Then we are converting the returned canvas into a base64 image URL using the toDataUrl method which expects two arguments

• type : image format.
• encodingOptions : number between 0 and 1 indicating the image quality.

And that's it, we captured the screenshot of our HTML element.

Important

This library has some issues, some of them are mentioned in the docs. I recommend going through it and understand it before using it in any production-based environment.

If you are aware of other ways to achieve a similar kind of result, please feel free to share.

Example

Check out the GitHub Repo.

Try it out here: Live.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

Obviously, I am not going to implement everything from scratch and why should one do that when we have a plethora of useful libraries in JavaScript.

I came across this awesome lightweight library or you can say a simple script qrcodejs. It is very easy to use and is reliable too.

Implementation

• Download this zip file: qrcodejs

• Extract it.

• Now you can use the qrcode.js and qrcode.min.js file in your project.

Code

Include the qrcode.js file in your HTML file.

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

Give an id to the div where you want to show the generated QR Code. Here I have used "qrcode" as my id.

...
<div id="qrcode"></div>
...

Now we will create an object from the QRCode function. Need to pass the id of the output div which is "qrcode" in this case.

var QR_CODE = new QRCode("qrcode", {
  width: 220,
  height: 220,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H,
});

correctLevel: L for low, M for medium, H for high.

Generate QRCode by calling the makeCode method of the QRCode object, which expects the data as its argument.

QR_CODE.makeCode("https://buymeacoffee.com/bibekkakati");

It will automatically insert the generated QRCode in the div whose id has been provided while creating the QRCode object.

Example✨

Check out the GitHub Repo.

Try it out here: Live.

Screenshot is taken from Google Lens while scanning.

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn