DEV Community: Avinash Tare

How to Detect if a User is in Dark Mode In Js

Avinash Tare — Sat, 24 Aug 2024 12:36:35 +0000

Introduction

Have you ever wondered how websites seamlessly switch between light and dark modes based on your preferences? It’s not magic—it's a clever use of modern web technologies. In this post, I'll reveal the simple yet powerful technique behind detecting whether a user prefers dark mode and how you can use this information to enhance the user experience on your website.

Understanding Dark Mode Detection

With the popularity of dark mode, many websites and applications now offer themes that align with the user's system preferences. This feature is achieved using the matchMedia API in JavaScript, which allows web applications to respond to changes in media queries, such as the user's color scheme preference.

How it's works

The matchMedia API

The window.matchMedia method provides a way to evaluate media queries and adapt your site's appearance based on the user's preferences. To check if dark mode is enabled, you can use the following JavaScript function:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

Practical Implementation

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode Demo</title>
    <style>
        .dark {
            background: black;
            color: white;
        }
        .light {
            background: white;
            color: black;
        }
    </style>
</head>
<body>

    <h1>Hello, World!</h1>

    <!-- scripts -->
    <script>
        // Function to check if dark mode is enabled
        function isDarkMode() {
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        }

        // Function to update the theme based on the user's preference
        function updateTheme() {
            if (isDarkMode()) {
                document.body.classList.add("dark");
                document.body.classList.remove("light");
            } else {
                document.body.classList.add("light");
                document.body.classList.remove("dark");
            }
        }

        // Initial theme setup
        updateTheme();

        // Listen for changes in the color scheme preference
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
    </script>
</body>
</html>

updateTheme Function: This function checks the dark mode preference and updates the class accordingly. Real-Time Updates: Added an event listener to matchMedia to detect changes in the color scheme preference and call update theme to adjust the appearance in real-time.

When you change your system's color scheme, the website will automatically adapt to reflect your preference without needing to refresh the page.

Follow Me on GitHub Avinash Tare

How to create own URL Protocol In Windows

Avinash Tare — Mon, 05 Aug 2024 20:33:30 +0000

Creating your own URL protocol in Windows allows you to define custom behavior when a specific protocol is used in a URL. Here's how to create one:

Steps to Create a Custom URL Protocol

1. Open the Windows Registry Editor:

* Press Win + R, type `regedit`, and hit Enter.

2. Navigate to the Protocols Section:

Go to HKEY_CLASSES_ROOT in the registry.
Right-click on HKEY_CLASSES_ROOT and select New > Key.

Name this key after your custom protocol (e.g., myapp).

3. Define the Default Value:

Double clickon (Defualt).
Write any thing about you protocol (e.g,. my app protocol)
press ok.

Create New string value.

add value URL Protocol it's required.

Now Your app is ready you can check on google chrome but we have add .exe file corresponding to our URL.

4. Create a Shell Subkey:

Inside your protocol key (e.g., myapp), right-click and create a new key named shell.

name of the key is shell:

5. Create an open Key Inside the shell Key:

Right-click the shell key, select New > Key, and name it open.

6. Create a command Key Inside the open Key:

Right-click the open key, select New > Key, and name it command.

7. Define the Command to Execute:

Click on the command key, and in the right-hand pane, double-click the (Default) entry. Set the value to the path of the executable you want to run, followed by "\"%1\"" (including the quotes). For example:

press ok, you protocol created successfully.

8. Creating Test Program

Creating a program using c to get arguments. you can use any langualge. ```c

include

int main(int argc, char *argv[])
{
printf("Argument: \n%s", argv[1]);

getch();
return 0;

}


 * Convert Into Exe using `c++ myapp.c -o myapp.exe`;
 * now you add this exe into command defualt value.

## 9: Test Your Protocol
 * goto chrome and write you *myapp://hello*

![Chrome url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sobu5lmupyk24d3olxrw.png)

 * it's open a modal to open url.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btpf5an364vyu9fkpm4g.png)

 * OUTPUT:- 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bg60pf6r3u1fmwbggtj.png)

 * Now you can parse this url and do anyting what you want.

Follow Me on GitHub [Avinash Tare](http://github.com/avinashtare/)

How to Publish an npm Package

Avinash Tare — Sun, 28 Jul 2024 13:34:00 +0000

Publishing an npm package allows you to share your code with the world, making it accessible to other developers who can use it in their projects. Whether it's a utility, a library, or a tool, npm makes the process straightforward. In this guide, I'll walk you through the steps to publish your npm package.

Step 1: Set Up Your Project

Before you can publish a package, you need to have a Node.js project set up. If you haven't done so already, create a new directory for your project and navigate into it:

mkdir my-awesome-package
cd my-awesome-package

Step 2. Initialize the Project:

npm init

This command creates a package.json.
also you have to choose the unique name of your package in this file.
also configure your package version.

{
  "name": "random-number-package",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "random": "index.js"
  },
  "keywords": [
    "add",
    "numbers",
    "utility"
  ],
  "author": "",
  "license": "ISC",
  "description": "simple node package"
}

Step 2: Create Your Package
Create the main file for your package. For this example, let's create a simple utility that adds two numbers. Create a file called index.js:

function add(a, b) {
    return a + b;
}

module.exports = add;

Next, create a test file to demonstrate how your package works. Create a file called test.js:

const add = require('./index');

console.log(add(2, 3));  // Output: 5

Step 3: Add a README File
A README file provides users with information about your package, including what it does and how to use it. Create a file called README.md:

this is a simple nodejs package

Step 4: Publish Your Package

Go to npmjs website and login first.
Ones,Login go cmd or cli and login locally using this command:

  npm login

now publish you package:

npm publish

congratulations,now you package on npm you can check using go npmjs check your profile.

Step 5: Update Your Package
If you make changes to your package and want to publish a new version, update the version number in package.json. For example, if your current version is 1.0.0 and you've made a small change update it to 1.0.1.
Then, publish the new version:

npm publish

How to create a global package using Node.js

Avinash Tare — Sun, 28 Jul 2024 13:00:07 +0000

Creating a global package with Node.js allows you to use your custom scripts and tools from any directory on your system. This can be extremely useful for developing command-line tools or other utilities that you want to be easily accessible. I'll walk you through creating a global Node.js package in this guide.
For this project, we make a random number generator package.

Step 1: Set Up Your Project

First, create a new directory for your project and navigate into it:

mkdir random-number-package
cd random-number-package

Next, initialize a new Node.js project:

npm init -y

This command will generate a package.json file with the default configuration.

Step 2: Create Your Script

Create a new JavaScript file that will serve as the entry point for your package. For this example, let's create a file called index.js.
This file will first execute when you call your package & name of the file anything.

#!/usr/bin/env node

let defualtValue = 100;
console.log(Math.floor(Math.random() * defualtValue) + 1);

The #!/usr/bin/env node line add at the top of the code, which tells the system to use Node.js to run this script.It's required.
This js code will generate a number between 1 to 100.

Step 3: Update package.json

{
  "name": "random-number-package",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "random": "index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

The bin field maps the command name (random) to the script file (index.js).

Step 4: Install your the Package Globally

npm install -g ./

it will install your current package globally

Step 5: Run Globally

random

output:
34

How I Build a Scratch Proxy Server Using Node.js

Avinash Tare — Tue, 09 Jul 2024 21:29:43 +0000

You might be curious about how proxy servers work and how they serve data over the internet. In this blog, I am going to implement a proxy server using core NodeJs.I achieved this using a core NodeJs package called net which already comes with NodeJs.

How Proxy Works

a proxy server is an agent between the client and the server. When a

client sends a request to a server it is forwarded to a target proxy
server. The targeted proxy server processes the request and sends it
to the main server and the main server sends the back request to the
proxy server and the proxy server sends the request to the client.

Set up Proxy Server

Before, starting programming you know little about socket and NodeJs.You know what a is socket and how they work.
In NodeJs There are two methods to implement a proxy server. First I custom method and second in-build. Both are easy to understand.

To test your proxy server you can run your local HTTP serve on your local machine and then target the host machine.

Now, I will define the net package and then write the target server and port number.

const net = require('net');

// Define the target host and port
const targetHost = 'localhost'; // Specify the hostname of the target server. For Ex: (12.568.45.25)
const targetPort = 80; // Specify the port of the target server

Creating and listening TCP server.

const server = net.createServer((clientSocket) => {

});

// Start listening for incoming connections on the specified port
const proxyPort = 3000; // Specify the port for the proxy server
server.listen(proxyPort, () => {
    console.log(`Reverse proxy server is listening on port ${proxyPort}`);
});

we have created a server using the net package. it's a TCP server which is running port number 3000 as we define in using the proxyPort variable. if the server starts it will show the Reverse proxy server is listening on port 3000 message on the console.
when the client tries to connect the proxy server it runs the callback function which is inside createServer.
In server function callback we have one parameter clientSocket it's the user connection that we received for the connection.
accept and receive data from the user

const targetHost = 'localhost'; // Specify the hostname of the target server. For Ex: (12.568.45.25)
const targetPort = 80; // Specify the port of the target server

// Create a TCP server
const server = net.createServer((clientSocket) => {
    // Establish a connection to the target host
    net.createConnection({host: targetHost, port: targetPort}, () => {

        // When data is received from the client, write it to the target server
        clientSocket.on("data", (data) => {
            targetSocket.write(data);
        });

        // When data is received from the target server, write it back to the client
        targetSocket.on("data", (data) => {
            clientSocket.write(data);
        });
    });
});

When a client tries to connect proxy server we will create a temporary connection to the server using create createConnection
createServer have 2 arguments
- 1st Host where we want to connect in this case we have to connect to our server host which is defined in targetHost variable.
- 2nd Port where we want to connect in this case we have to connect to our server port which is defined in targetPort variable.
Now, When user send data I will pass this data to server. using this code js clientSocket.on("data", (data) => { targetSocket.write(data); });
Then, the Server sends data I will send this data to the user, using this code js targetSocket.on("data", (data) => { clientSocket.write(data); });
Congratulations! you successfully created your proxy server.

Error Handling

While exploring the functionality of the proxy server is exciting, ensuring reliability requires robust error-handling methods to handle unexpected issues gracefully. To handle those types of errors we have an event called an error. It's very easy to implement.

    const server = net.createServer((clientSocket) => {
     // Establish a connection to the target host
     const targetSocket = net.createConnection({host: targetHost,port: targetPort}, () => {

       // Handle errors when connecting to the target server
       targetSocket.on('error', (err) => {
         console.error('Error connecting to target:', err);
         clientSocket.end(); // close connection
       });

       // Handle errors related to the client socket
       clientSocket.on('error', (err) => {
         console.error('Client socket error:', err);
         targetSocket.end(); // close connection
       });
     });
   });

when any error occurs we will console the error and then close the connection.

ALL Code

replace host name and port number according to your preference. ```js const net = require('net');

// Define the target host and port
const targetHost = 'localhost'; // Specify the hostname of the target server
const targetPort = 80; // Specify the port of the target server

// Create a TCP server
const server = net.createServer((clientSocket) => {
// Establish a connection to the target host
const targetSocket = net.createConnection({
host: targetHost,
port: targetPort
}, () => {
// When data is received from the target server, write it back to the client
targetSocket.on("data", (data) => {
clientSocket.write(data);
});

  // When data is received from the client, write it to the target server
  clientSocket.on("data", (data) => {
     targetSocket.write(data);
  });

});

// Handle errors when connecting to the target server
targetSocket.on('error', (err) => {
console.error('Error connecting to target:', err);
clientSocket.end();
});

// Handle errors related to the client socket
clientSocket.on('error', (err) => {
console.error('Client socket error:', err);
targetSocket.end();
});
});

// Start listening for incoming connections on the specified port
const proxyPort = 3000; // Specify the port for the proxy server
server.listen(proxyPort, () => {
console.log(Reverse proxy server is listening on port ${proxyPort});
});


# Built Method
To reduce client and server connection complexity we have built-in method `pipe`.I will replace this syntax 
```js
// Handle errors when connecting to the target server
targetSocket.on("data", (data) => {
   clientSocket.write(data);
});

// When data is received from the client, write it to the target server
clientSocket.on("data", (data) => {
   targetSocket.write(data);
});

Into this syntax

// Pipe data from the client to the target
clientSocket.pipe(targetSocket);

// When data is received from the client, write it to the target server
targetSocket.pipe(clientSocket);

Here is all code

const net = require('net');

// Define the target host and port
const targetHost = 'localhost';
const targetPort = 80;

// Create a TCP server
const server = net.createServer((clientSocket) => {
   // Establish a connection to the target host
   const targetSocket = net.createConnection({
      host: targetHost,
      port: targetPort
   }, () => {
      // Pipe data from the client to the target
      clientSocket.pipe(targetSocket);

      // Pipe data from the target to the client
      targetSocket.pipe(clientSocket);
   });

   // Handle errors
   targetSocket.on('error', (err) => {
      console.error('Error connecting to target:', err);
      clientSocket.end();
   });

   clientSocket.on('error', (err) => {
      console.error('Client socket error:', err);
      targetSocket.end();
   });
});

// Start listening for incoming connections
const proxyPort = 3000;
server.listen(proxyPort, () => {
   console.log(`Reverse proxy server is listening on port ${proxyPort}`);
});

A Working Proxy Server!

Follow Me On GitHub avinashtare, Thanks.