DEV Community: Bibek

Simplify Phone Screening with Twilio and AI Automation

Bibek — Sun, 23 Jun 2024 22:52:58 +0000

This is a submission for the Twilio Challenge

What I Built

I explored several ideas for this challenge and did some research. Then, I found a LinkedIn post about how recruiters handle phone interviews for screening and the problems they face, like coordinating schedules between recruiters and candidates. Often, these calls are unplanned for the candidates, causing nervousness and a poor first impression. This inspired me to create a product that automates the process using IVR to conduct phone interviews for screening. The product would evaluate the call recordings and provide a summary of the entire conversation to the recruiter.

Flow of the system:

The recruiter will enter the candidate's details into the system through a form.
The candidate will receive an SMS notification with a link included in the message.
When the candidate clicks the link, the system will automatically dial their phone number.
An IVR call will guide the candidate through the interview and ask the necessary questions.
The candidate's responses will be recorded and transcribed by the system. AI will then use the transcription to provide context for the call recording.

Future Scopes/Improvements:

Develop a comprehensive multi-tenant dashboard for recruiters to manage records efficiently.
Integrate the system with job boards for seamless operation.
Implement an AI model to evaluate candidates' responses and rank them based on job requirements.

Demo

Walkthrough video

Demo application link

Application URL is https://ai-interview-call-8568-dev.twil.io/add-candidate.html
IVR call might not work for you as it is a demo account and only verified phone numbers are allowed.

Github link
https://github.com/bibekkakati/ai-interview-call

Twilio and AI

Let's discuss how I used Twilio and AI in the project.

Twilio Verify is used to validate the candidate's phone number and provide an internationally formatted result.
Twilio Programmable Messaging is used to send an SMS to the candidate with the interview call link.
Twilio Voice is used to make a call to the candidate, gather information, and record the candidate's responses.
Twilio Voice Intelligence is used to transcribe the call recordings.
Gemini AI is used to extract key points from the candidate's responses (transcriptions).
Twilio Serverless functions are used to deploy the functions and assets (a form to capture candidate details).

Additional Prize Categories

My submission qualifies for the following additional prize categories:

Twilio Times Two: Multiple Twilio features are used in the project.
Impactful Innovators: This product will greatly help recruiters and companies manage their time and resources better.

How to Build a Classic Snake Game Using React.js

Bibek — Tue, 04 Jun 2024 10:41:45 +0000

Hello folks! Welcome to this tutorial on developing the classic Snake game using ReactJS.

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.

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:

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.

Switch to Reference Variables:

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

* This allowed `moveSnake` to access the latest values.

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

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

Navigating React.js SEO Challenges: A Case Study with CoderKit

Bibek — Sun, 19 Nov 2023 16:19:19 +0000

Introduction:

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.

Unleash Your Coding Superpowers with CoderKit! 🚀

Bibek — Fri, 03 Nov 2023 19:34:28 +0000

🚀 The Spark of Inspiration

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 https://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! 🎉

What is Chat GPT

Bibek — Sat, 07 Jan 2023 15:30:09 +0000

GPT, or Generative Pre-training Transformer, is a type of language model developed by OpenAI that has been widely used for various natural language processing tasks. Language models are algorithms that are trained to predict the next word in a sequence of text, based on the words that came before it. GPT takes this a step further by using an attention mechanism, which allows it to consider the entire input context when making predictions.

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

If you like my work and want to support it, you can do it here. I will really appreciate it.

System Color Theme Check In JavaScript

Bibek — Sat, 23 Jul 2022 05:23:27 +0000

A few days back, I was wondering how to know if the system theme is dark or light in web using JavaScript and I found a way to detect that.

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

If you like my work and want to support it, you can do it here. I will really appreciate it.

How to store coordinates in MySQL

Bibek — Mon, 25 Apr 2022 16:05:00 +0000

Many times we capture the geo-location of users and store in the database for different use cases.
I have seen that most of the developers use multiple fields to store the latitude and longitude separately like
Table_name(field1, field2, ..., latitude, longitude).

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

If you like my work and want to support it, you can do it here. I will really appreciate it.

What is CDN?

Bibek — Tue, 29 Jun 2021 19:51:05 +0000

CDN stands for Content Delivery Network.

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

If you like my work and want to support it, you can do it here. I will really appreciate it.

Error Handling in JavaScript (Golang Style)

Bibek — Fri, 18 Jun 2021 19:00:16 +0000

In this short article, we are going to see how we can handle error in JavaScript in Golang style.

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

If you like my work and want to support it, you can do it here. I will really appreciate it.

How to Implement Copy to Clipboard on a Website

Bibek — Sat, 12 Jun 2021 12:41:15 +0000

In this article, we are going to see how we can implement a copy to clipboard functionality on our website. On clicking the Copy button, the content/text of a paragraph tag should be copied to the clipboard which we can paste anywhere in our system.

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 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

If you like my work and want to support it, you can do it here. I will really appreciate it.

Generate PDF of HTML Element in Browser

Bibek — Fri, 04 Jun 2021 20:20:32 +0000

Hello everyone👋

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.

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.

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

If you like my work and want to support it, you can do it here. I will really appreciate it.

Short Polling vs Long Polling

Bibek — Fri, 28 May 2021 14:28:12 +0000

Hello everyone👋

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.

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 like my work and want to support it, you can do it here. I will really appreciate it.