DEV Community: Bartick Maiti

Unnoticed Memory Leaks in Your JS App: A Guide for Future

Bartick Maiti — Tue, 09 Jan 2024 16:21:25 +0000

As I embarked on my coding journey, the intricacies of memory management always intrigued me. Despite reading numerous articles and heeding warnings from my university professors about the perils of memory leaks, I never had the chance to witness a tangible example. In this article, I aim to demystify memory leaks by presenting a straightforward example using JavaScript.

Decoding the Memory Leak

A memory leak is a form of resource mismanagement wherein a computer program fails to appropriately handle memory allocations, leading to the retention of memory that is no longer required. In the realm of object-oriented programming, a memory leak occurs when an object persists in memory but is inaccessible to the executing code. In other words, the memory is not released, even though it is no longer required.

Crafting a Memory Leak: A Hands-On Demonstration

To illustrate a memory leak, we'll create a function that generates a closure. A closure, in this context, refers to a function that retains access to its parent scope even after the scope has concluded. The parent scope here is the createLeak function, and the child scope is the leak function.

function createLeak() {
  const leaks = [];
  function leak() {
    leaks.push("leak");
  }
  return leak;
}

Subsequently, we'll invoke the createLeak function and store the result in a variable, effectively creating the closure.

const leak = createLeak();

To induce a memory leak, we'll execute the leak function within a loop. This action ensures that the leaks array will never undergo garbage collection.

for (let i = 0; i < 100000; i++) {
  leak();
}

Rectifying a Memory Leak: A Pragmatic Approach

Addressing a memory leak involves eliminating the reference to the closure. In this case, we must nullify the reference to the leak function.

leak = null;

Wrapping Up

This article has provided insights into both the creation and detection of memory leaks, along with practical solutions for rectification. I trust that this exploration has not only been informative but has also enhanced your comprehension of memory leaks.

Empower Your Project: Hosting Your Own Redis Server

Bartick Maiti — Thu, 23 Nov 2023 19:00:06 +0000

As a student, I often find myself in search of free database options, and my go-to choices have always been those that offer a free tier. Many projects, in addition to a primary database, require Redis for streaming fast data. While cloud providers like Redis offer a free tier suitable for small projects or testing purposes, I've always desired more storage and power. This led me to the decision to host my own Redis server.

Hosting Your Own Redis Server

Assuming you already have a VPS account, if not, you can consider providers such as:

Personally, I use Oracle Cloud with a VPS boasting 2GB RAM and 1 vCPU, running Ubuntu 20.04 LTS. You can choose any VPS provider and OS that suits your preferences.

Installing Redis

To begin, we need to install Redis on our VPS. Execute the following commands:

sudo apt update
sudo apt install redis-server

Configuring Redis

Next, we must configure Redis by editing the Redis config file. Run:

sudo nano /etc/redis/redis.conf

Within the file, locate the supervised directive, and change it to systemd:

. . .

# If you run Redis from upstart or systemd, Redis can interact with your
# supervision tree. Options:
#   supervised no      - no supervision interaction
#   supervised upstart - signal upstart by putting Redis into SIGSTOP mode
#   supervised systemd - signal systemd by writing READY=1 to $NOTIFY_SOCKET
#   supervised auto    - detect upstart or systemd method based on
#                        UPSTART_JOB or NOTIFY_SOCKET environment variables
# Note: these supervision methods only signal "process is ready."
#       They do not enable continuous liveness pings back to your supervisor.
supervised systemd
. . .

Save and close the file, then restart the Redis service:

sudo systemctl restart redis.service

Allowing Remote Connections

By default, Redis is only accessible from the localhost. To permit remote connections, bind Redis to your server’s public IP address by editing the Redis configuration file again:

sudo nano /etc/redis/redis.conf

Comment out the bind directive:

. . .
# ~~~ WARNING ~~~ If the computer running Redis is directly exposed to the
# internet, binding to all the interfaces is dangerous and will expose the
# instance to everybody on the internet. So by default we uncomment the
# following bind directive, that will force Redis to listen only on the
# IPv4 loopback interface address (this means Redis will only be able to
# accept client connections from the same host that it is running on).
#
# IF YOU ARE SURE YOU WANT YOUR INSTANCE TO LISTEN TO ALL THE INTERFACES
# JUST COMMENT OUT THE FOLLOWING LINE.
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# bind 127.0.0.1 ::1
. . .

Additionally, change the protected-mode directive to no:

. . .
# The server only accepts connections from clients connecting from the
# IPv4 and IPv6 loopback addresses 127.0.0.1 and ::1, and from Unix domain
# sockets.
#
# By default protected mode is enabled. You should disable it only if
# you are sure you want clients from other hosts to connect to Redis
# even if no authentication is configured, nor a specific set of interfaces
# are explicitly listed using the "bind" directive.
protected-mode no
. . .

Restart the Redis server:

sudo systemctl restart redis.service

Adjusting the Firewall

Now, configure the firewall to allow traffic on port 6379, the default Redis port:

sudo firewall-cmd --zone=public --permanent --add-port=6379/tcp
sudo firewall-cmd --reload

Testing Redis

With Redis configured, test it by connecting to your application. For instance, using mini-redis, a Rust-based Redis client. The URL for the Redis server is redis://<ip>:6379, where <ip> is your VPS's IP.

Wow, it works but what about the security?

Although the Redis server is up, it lacks security. Anyone can connect and use it. To enhance security, follow these steps:

Securing Redis

Connect to the Redis server using the CLI:

redis-cli

Change protected-mode from no to yes:

127.0.0.1:6379> CONFIG SET protected-mode yes
127.0.0.1:6379> CONFIG REWRITE

Now if we try to connect to the Redis server from our application.

cargo run
  Finished dev [unoptimized + debuginfo] target(s) in 0.10s
    Running `target/debug/tiny_redis`
thread 'main' panicked at src/main.rs:11:9:
Failed to set key: DENIED: Redis is running in protected mode because protected mode is enabled and no password is set for the default user. In this mode connections are only accepted from the loopback interface. If you want to connect from external computers to Redis you may adopt one of the following solutions: 1) Just disable protected mode sending the command 'CONFIG SET protected-mode no' from the loopback interface by connecting to Redis from the same host the server is running, however MAKE SURE Redis is not publicly accessible from internet if you do so. Use CONFIG REWRITE to make this change permanent. 2) Alternatively you can just disable the protected mode by editing the Redis configuration file, and setting the protected mode option to 'no', and then restarting the server. 3) If you started the server manually just for testing, restart it with the '--protected-mode no' option. 4) Set up an authentication password for the default user. NOTE: You only need to do one of the above things in order for the server to start accepting connections from the outside.
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

Well, it is throwing an error. Let's add a user and password to the Redis server.

To add a user and password, run:

127.0.0.1:6379> ACL SETUSER blog on >mypassword +@all -@dangerous ~*
127.0.0.1:6379> CONFIG REWRITE

This creates a user blog with the password mypassword and permissions, excluding dangerous commands. Update your URL to redis://blog:mypassword@<ip>:6379.

To know more about the permissions of Redis give it a read here.

Now, attempt to connect to the Redis server:

cargo run
  Finished dev [unoptimized + debuginfo] target(s) in 0.10s
    Running `target/debug/tiny_redis`
thread 'main' panicked at src/main.rs:11:9:
Failed to set key: DENIED: Redis is running in protected mode because protected mode is enabled and no password is set for the default user. In this mode connections are only accepted from the loopback interface. If you want to connect from external computers to Redis you may adopt one of the following solutions: 1) Just disable protected mode sending the command 'CONFIG SET protected-mode no' from the loopback interface by connecting to Redis from the same host the server is running, however MAKE SURE Redis is not publicly accessible from internet if you do so. Use CONFIG REWRITE to make this change permanent. 2) Alternatively you can just disable the protected mode by editing the Redis configuration file, and setting the protected mode option to 'no', and then restarting the server. 3) If you started the server manually just for testing, restart it with the '--protected-mode no' option. 4) Set up an authentication password for the default user. NOTE: You only need to do one of the above things in order for the server to start accepting connections from the outside.
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

Well it is still throwing an error. And it is because we still have the default user unprotected. So we need to protect the default user.

Let's protect the default user by running:

127.0.0.1:6379> ACL SETUSER default on >redis +@all ~*
127.0.0.1:6379> CONFIG REWRITE

Now, attempt to connect to the Redis server:

cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.03s
     Running `target/debug/tiny_redis`
Value: 42

Yay, it works. Now we have a secure Redis server running on our VPS. Now we can use it in our application.

Understanding JavaScript Concepts: CommonJS vs. ECMAScript Modules

Bartick Maiti — Fri, 10 Nov 2023 08:57:40 +0000

Embarking on the journey of JavaScript development often confronts us with the dichotomy of require and import statements, heralding the realms of CommonJS (cjs) and ECMAScript Modules (mjs) respectively. In this exploration, we aim to unravel the enigma surrounding these module systems and delve into the why and how of their existence.

A Prelude to Modules

Before delving into the intricacies, let's grasp the essence of modules. In the JavaScript context, modules are the building blocks that allow developers to compartmentalize code into manageable, reusable units. This not only enhances code organization but also facilitates seamless sharing of functionality across files.

Unveiling CommonJS

CommonJS, initially devised for Node.js, provides a synchronous module format. It facilitates the division of code into multiple files and the sharing of code between them. The require statement takes center stage in CommonJS, synchronously loading modules upon invocation.

Introducing ECMAScript Modules

On the other hand, ECMAScript Modules (mjs), designed for browsers, introduces an asynchronous module format. This means that code within the module doesn't execute until explicitly imported. The import statement becomes the gatekeeper for bringing in modules within the ECMAScript Modules paradigm.

Bridging the Gap: CommonJS vs. ECMAScript Modules

The crux of the distinction lies in the loading mechanism: CommonJS modules load synchronously, while ECMAScript Modules load asynchronously. The former executes code immediately upon loading, while the latter waits for the import trigger.

Choosing the Right Path: CommonJS or ECMAScript Modules?

The choice is dictated by the application environment. CommonJS finds its home in Node.js applications, while ECMAScript Modules cater to browser-based applications. Yet, the evolving landscape has blurred these boundaries.

The Node.js Dilemma

Recent Node.js versions have embraced ECMAScript Modules, causing compatibility headaches for developers reliant on libraries designed for CommonJS. The transition to ECMAScript Modules is not seamless, as older libraries might not offer support, creating a conundrum for developers.

The Unresolved Predicament

The persistence of this predicament arises from the historical lack of ECMAScript Module support in Node.js. Libraries built on CommonJS were essential for legacy versions, and the inertia to migrate to ECMAScript Modules persists, hindering resolution.

Stranded Between Worlds

In this limbo, developers grapple with libraries exclusively supporting one module system. The result? A forced cohabitation of CommonJS and ECMAScript Modules in the same application, each with its peculiarities in importing and exporting modules.

Navigating the Dual Landscape

The dilemma prompts the question: How can one seamlessly utilize both CommonJS and ECMAScript Modules in a single application? Several strategies emerge:

1. Transpile with Babel:

Leverage Babel to convert between the two syntaxes. A configuration file (.babelrc) and a build script can facilitate this transformation.

Install Babel and necessary presets:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

Create a Babel configuration file (.babelrc):

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Add a build script to your package.json:

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

2. Bundle with Webpack:

Webpack emerges as a bundling solution, amalgamating CommonJS and ECMAScript Modules into a cohesive bundle. Configuration involves specifying entry points and output filenames.

Install Webpack and necessary loaders:

npm install --save-dev webpack webpack-cli babel-loader

Create a Webpack configuration file (webpack.config.js):

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

Add a build script to your package.json:

{
  "scripts": {
    "build": "webpack"
  }
}

3. Loader Packages like `esm`:

Specialized packages like esm allow the interoperability of CommonJS and ECMAScript Modules. This involves importing modules dynamically with specific syntax.

Install the esm package:

npm install --save esm

Use esm to load CommonJS modules in ECMAScript Modules:

import esm from 'esm';
const { default: myModule } = esm(module)('./my-module.js');

Use esm to load ECMAScript Modules in CommonJS:

const myModule = require('esm')('./my-module.js').default;

Run your CommonJS modules using the esm package:

node -r esm index.js

4. Split Your Codebase:

Consider segregating your project into CommonJS and ECMAScript Modules segments, communicating between them through inter-process communication or other mechanisms.

5. Native Adoption of ESM:

For projects within your control, consider embracing ECMAScript Modules entirely, either by using the .mjs extension or setting "type": "module" in package.json. Update your CommonJS modules by using the .cjs extension.

These strategies provide a roadmap for navigating the intricate landscape of dual JavaScript module systems, ensuring compatibility and coexistence within your application.

A Resilient JavaScript Journey

As the JavaScript landscape continues to evolve, your mastery of these strategies ensures resilience in the face of change. By embracing the tools and approaches outlined here, you empower yourself to navigate the dual landscape of CommonJS and ECMAScript Modules with confidence.

In conclusion, may your JavaScript journey be marked by adaptability, innovation, and a mastery of the diverse tools at your disposal. As you embark on projects, let the strategies explored here serve as a compass, guiding you through the intricate terrain of JavaScript modules, ensuring a robust and future-proof development experience.

Understanding JavaScript Concepts: prototype vs. proto

Bartick Maiti — Sun, 05 Nov 2023 11:39:07 +0000

When embarking on your JavaScript journey, you may have encountered the terms prototype and __proto__. These terms may appear somewhat interchangeable at first glance, leading to some confusion for newcomers. However, they serve distinct purposes in JavaScript. In this article, we will delve into the differences between these two concepts and explore how they interrelate.

What is a Prototype?

In JavaScript, a prototype is an object that is inherently associated with every function and object by default. It is essentially a property attached to a function or object that enables you to augment new properties and methods to that function or object. Furthermore, it plays a pivotal role in implementing inheritance in JavaScript.

A Closer Look at Prototypes

In a JavaScript context, prototypes serve as blueprints or templates. They define the shared characteristics and behaviors that can be inherited by multiple objects or instances. By attaching properties and methods to a prototype, you create a sort of common knowledge base that can be efficiently shared among objects of the same type.

Consider the following example:

function Animal(name) {
  this.name = name;
}

// Adding a method to the Animal prototype
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
}

const cat = new Animal('Whiskers');
const dog = new Animal('Fido');

cat.speak(); // Output: "Whiskers makes a sound."
dog.speak(); // Output: "Fido makes a sound."

In this example, we've defined an Animal constructor function and added a speak method to its prototype. As a result, any instance created from the Animal constructor can access and utilize this speak method. It illustrates how prototypes facilitate code reusability and object-oriented features in JavaScript.

What is `proto`?

__proto__, on the other hand, is a property specifically used to access the prototype of an object. It is attached to every object in JavaScript and serves as a getter and setter for the object's prototype. It provides a means to modify the prototype of an existing object, allowing you to change its characteristics dynamically.

A Closer Look at `proto`

The __proto__ property enables you to traverse the prototype chain, moving from an object to its prototype and, if necessary, to its prototype's prototype, and so on. This mechanism is instrumental in achieving inheritance and sharing properties and methods among objects.

function Vehicle(make) {
  this.make = make;
}

const car = new Vehicle('Toyota');

// Modifying the prototype dynamically using __proto__
const customFeatures = { color: 'blue', year: 2023 };
car.__proto__ = customFeatures;

console.log(car.color); // Output: "blue"
console.log(car.year);  // Output: 2023

In this example, we've created a Vehicle object and then used __proto__ to augment it with custom features, such as color and year. This flexibility to modify an object's prototype dynamically allows for robust object manipulation and adaptability.

How Are They Related or Different?

To summarize, the key distinctions between prototype and __proto__ are as follows:

Prototype:
- It is a property attached to a function or object.
- It is used to define shared properties and methods for objects created from that function or constructor.
- It plays a central role in enabling inheritance and code reusability.
__proto__:
- It is a property attached to every object in JavaScript.
- It is used to access and modify the prototype of an object.
- It facilitates dynamic changes to an object's characteristics by allowing you to manipulate its prototype chain.

These differences underscore their complementary roles in JavaScript's object-oriented programming paradigm.

Example

Let's explore a practical example that highlights the distinction between prototype and __proto__.

function Square(side) {
  this.side = side;
}

const shape = {};

const square = new Square(5);

shape.__proto__ = square;

shape.area = function() {
  return this.side * this.side;
}

console.log(shape.__proto__ === Square.prototype); // Output: true
console.log(shape.area()); // Output: 25

In this example, we define a Square constructor function and create an empty shape object. By assigning shape.__proto__ to the square object, we effectively set the shape object's prototype to be the same as that of square. Then, we add an area method to the shape object. The console.log statements illustrate the relationship between shape.__proto__ and Square.prototype, both of which are true, and we calculate the area of the square.

Understanding the distinction between prototype and __proto__ is crucial for mastering JavaScript's object-oriented capabilities and enhancing your ability to design and manipulate objects effectively. These concepts are fundamental to writing efficient and maintainable code in JavaScript.

Using Reverse Proxy for multiple backends - Nginx

Bartick Maiti — Tue, 05 Sep 2023 10:27:24 +0000

I work as a backend developer, and that means I handle various backend projects. When these projects go live, we usually need to open specific ports, like 80 or 443, so that users can access them.

As a student, I often have multiple projects to manage, but I don't have the financial means to pay for separate Virtual Private Servers (VPS) to host each project. This dilemma has been on my mind for quite some time.

After doing some research online, I came across a solution: using a reverse proxy. With the VPS I already have, I can now host multiple projects and employ a reverse proxy to guide users to the correct project based on the web address they use. This discovery has opened up a cost-effective way to manage all my projects efficiently.

In this article, I will show you how I use a reverse proxy to host multiple projects on a single VPS. And I will use Nginx as my reverse proxy.

What is a reverse proxy?

A reverse proxy is a server or software application that acts as an intermediary between client devices and one or more backend servers. It receives requests from clients (such as web browsers) and forwards those requests to the appropriate backend server. When the backend server responds, the reverse proxy then sends the response back to the client.

Why use a reverse proxy?

There are many reasons why you might want to use a reverse proxy. Here are some of the most common ones:

Load Balancing: They distribute incoming requests across multiple backend servers, helping to distribute traffic evenly and prevent server overload.
Security: They can hide the internal architecture of a network by only exposing the reverse proxy to the internet. This adds a layer of security, as the backend servers' details are hidden.
Caching: Reverse proxies can cache static content, reducing the load on backend servers and improving performance.
SSL/TLS Termination: They can handle SSL/TLS encryption and decryption, offloading this processing from backend servers.
Content Compression: They can compress responses before sending them to clients, reducing data transfer times.

Let's get started

Prerequisites

A VPS with a static IP address
A domain name
A basic understanding of how to use the command line

Step 1: Install Nginx

Nginx is a popular web server that can also be used as a reverse proxy. It is free and open-source software, and it is available for most operating systems.

To install Nginx on Ubuntu, run the following command:

sudo apt install nginx

Step 2: Start Nginx

Once Nginx is installed, you can start it using the following command and potentially check if it was installed properly or not:

sudo systemctl start nginx
sudo systemctl status nginx

Now go to your browser and type your VPS IP address if Nginx is running properly you should see the following page:

If it's not reachable, you may need to open port 80 on your firewall. You can do this by running the following command:

sudo ufw allow 80

Step 3: Configure Nginx for multiple backends

Before we can use Nginx as a reverse proxy, host your projects on your VPS on internal non-exposed ports (e.g. 3000, 5000, 8000, etc.). Then, create a new file in the /etc/nginx/sites-available directory called yourdomain.com and add the following content:

In this example, I will use the domain yourdomain.com and the port 3000 for the backend server.

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

This configuration tells Nginx to listen on port 80 for requests to yourdomain.com. When it receives a request, it will forward it to the backend server running on port 3000.

Optional: Configure SSL/TLS

If you want to use SSL/TLS encryption, you can add the following lines to the configuration file:

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/yourdomain.com.crt;
    ssl_certificate_key /path/to/yourdomain.com.key;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

To generate an ssl certificate you can use Let's Encrypt. You can find more information about how to do this here.

Step 4: Enable the new configuration

Once you have created the new configuration file, you need to enable it by creating a symbolic link in the /etc/nginx/sites-enabled directory. You can do this by running the following command:

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/

Step 5: Test the configuration

Before you can use the new configuration, you need to test it to make sure it is valid. You can do this by running the following command:

sudo nginx -t

If the configuration is valid, you should see the following output:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

If you see any errors, you will need to fix them before you can continue.

Step 6: Restart Nginx

Once you have tested the configuration, you can restart Nginx to apply the changes. You can do this by running the following command:

sudo systemctl reload nginx

Step 7: Configure your domain name

Now that you have configured Nginx, you need to configure your domain name to point to your VPS. You can do this by adding an A record to your domain name's DNS settings. The A record should point to your VPS's IP address.

Step 8: Test the configuration

Once you have configured your domain name, you can test the configuration by visiting your domain name in your browser. If everything is working correctly, you should see your project running on your VPS.

Conclusion

In this article, I have shown you how to use a reverse proxy to host multiple projects on a single VPS. I hope you have found this article useful. If you have any questions or suggestions, feel free to reach out to me on Twitter.

Autoplay YouTube embed with sound

Bartick Maiti — Sat, 22 Jul 2023 09:28:16 +0000

I have always wondered how can I autoplay youtube embed with sound in my website from the start of my software development career. And I am wondering if you have stumbled upon this article, you might be wondering the same.

So I was fiddling around with HTML and Youtube video embeds to make a CTF challenge for my peers. I was using VSCode's Live Server extension to test my code.

For some reason, it has become my habit for a long time to add ?autoplay=1 whenever I work with YouTube embeds. So I did the same and as usual it didn't work. I was like "What the hell?". I tried to find the solution on the Internet but I couldn't find any. Gave up and went to make the initial challenge.

While working on the challenge after all that hard work the video suddenly autoplayed with sound. Now my curiosity was at its peak. Now I was determined to find the solution no matter what.

On further investigation, I found that the video autoplayed with sound when I changed something on the website using Live Server but it didn't autoplayed with sound when I refreshed the page.

So now lets's google.

Now did I find the solution on the internet? The simple answer is no. But I stumbled upon this StackOverflow question. Is it a solid start? Maybe. Let's see what the accepted answer says.

So the answer says that the browser doesn’t support autoplay with sound. But I have seen it working on my browser, I have also seen Marvel use autoplay for their Secret Invasion and according to the answer the browser should block any autoplay with sound. So I did some more googling and found this article on Google.

Bingo! Found the solution. So I have the solution and now I just need the user to do any action on the website to play the video with sound.

Now let's implement the solution.

Implementation: (Let's mimic the secret invasion website)

Step 1: Create a simple html page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try It</title>
</head>
<body>

</body>
</html>

Step 2: Let us add the text area to add the password

<div class="autoplay">
  <a class="overPassword">
    <input id="password" placeholder="Enter the password">
  </a>
</div>

Step 3: Let's now listen to the keypress event on the input

const passwordForm = document.querySelector(".overPassword");
const passwordInput = document.querySelector("#password");

password_input.addEventListener("keypress", (e) => {
  //TODO: code here
});

Up until now we made sure that the user has somehow interacted with the website. Now let's add the youtube embed with autoplay and see if it works.

Step 4: Add the youtube embed

passwordInput.addEventListener("keypress", (e) => {
  passwordForm.remove();

  let iframe = document.createElement('iframe');
  iframe.setAttribute('src', `https://www.youtube.com/embed/${id}?autoplay=1&rel=0&controls=0&showinfo=0`);
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
  iframe.setAttribute('allowfullscreen', '');
  iframe.setAttribute('width', '1280');
  iframe.setAttribute('height', '620');

  document.querySelector('.autoplay').appendChild(iframe);
});

Boom! It works. Now you can use this trick to make your website more fun to interact with.

Let's see a live demo of the same here: https://tryit.bartick.me/

Conclusion

So we have learned how to autoplay youtube embed with sound in our website. I hope you have enjoyed this article. If you have any questions or suggestions feel free to reach out to me on Twitter.

Extra

All mobile browsers don't support keypress event so you can use the keydown event instead. Keydown will work on both mobile and desktop browsers.

DEV Community: Bartick Maiti

Unnoticed Memory Leaks in Your JS App: A Guide for Future

Decoding the Memory Leak

Crafting a Memory Leak: A Hands-On Demonstration

Rectifying a Memory Leak: A Pragmatic Approach

Wrapping Up

Empower Your Project: Hosting Your Own Redis Server

Hosting Your Own Redis Server

Installing Redis

Configuring Redis

Allowing Remote Connections

Adjusting the Firewall

Testing Redis

Wow, it works but what about the security?

Securing Redis

Understanding JavaScript Concepts: CommonJS vs. ECMAScript Modules

A Prelude to Modules

Unveiling CommonJS

Introducing ECMAScript Modules

Bridging the Gap: CommonJS vs. ECMAScript Modules

Choosing the Right Path: CommonJS or ECMAScript Modules?

The Node.js Dilemma

The Unresolved Predicament

Stranded Between Worlds

Navigating the Dual Landscape

1. Transpile with Babel:

2. Bundle with Webpack:

3. Loader Packages like esm:

4. Split Your Codebase:

5. Native Adoption of ESM:

A Resilient JavaScript Journey

Understanding JavaScript Concepts: prototype vs. __proto__

What is a Prototype?

A Closer Look at Prototypes

What is __proto__?

A Closer Look at __proto__

How Are They Related or Different?

Example

Using Reverse Proxy for multiple backends - Nginx

What is a reverse proxy?

Why use a reverse proxy?

Let's get started

Prerequisites

Step 1: Install Nginx

Step 2: Start Nginx

Step 3: Configure Nginx for multiple backends

Optional: Configure SSL/TLS

Step 4: Enable the new configuration

Step 5: Test the configuration

Step 6: Restart Nginx

Step 7: Configure your domain name

Step 8: Test the configuration

Conclusion

Autoplay YouTube embed with sound

Implementation: (Let's mimic the secret invasion website)

Step 1: Create a simple html page

Step 2: Let us add the text area to add the password

Step 3: Let's now listen to the keypress event on the input

Step 4: Add the youtube embed

Conclusion

Extra

3. Loader Packages like `esm`:

Understanding JavaScript Concepts: prototype vs. proto

What is `proto`?

A Closer Look at `proto`