DEV Community: Jerry Nwosu

Building a File Utility Tool with Node.js

Jerry Nwosu — Sat, 20 May 2023 12:13:53 +0000

As software developers, we often encounter repetitive tasks that can be automated to improve productivity and reduce errors. In this article, we will explore how to create our own file utility tool using Node.js. This tool will provide functionalities such as file copying, moving and deletion. Let's dive in!

Prerequisites

Before we begin, please ensure that you have Node.js and npm (Node Package Manager) installed on your computer. You can download the latest version of Node.js from the official website

Setting Up the Project

Create a new project folder in your desired location.
Open a command-line interface and navigate to the project folder.
Run the following command to utilize a new Node.js project:

npm init -y

This will generate a package.json file, which tracks the project's dependencies. We will circle back to this file later in the article for further modifications.

Installing Dependencies

Our utility tool will utilize the commander package to handle command-line interactions. To install commander, execute the following command in your project folder:

npm install commander

Implementing the Copy Command

Let's start by implementing the file copying functionality. We will use the fs (File System) module provide by Node.js. Create a new file called index.js in the root directory of your project and add the following code:

const fs = require("fs")
const path = require("path")
const { program } = require("commander")

program.version("1.0.0").description("File Utility Tool")

// Copy command
program
  .command("copy <source> <destination>")
  .description("Copy a file from the source path to the destination path")
  .action((source, destination) => {
    const sourcePath = path.resolve(source)
    const destinationPath = path.resolve(destination)

    const sourceStream = fs.createReadStream(sourcePath)
    const destinationStream = fs.createWriteStream(destinationPath)

    sourceStream.pipe(destinationStream)

    sourceStream.on("end", () => {
      console.log(`File copied from ${sourcePath} to ${destinationPath}`)
    })

    sourceStream.on("error", err => {
      console.error("Error copying file:", err.message)
    })
  })

// Move command

// Delete command

program.parse(process.argv)

In the above code, we import the necessary modules fs and path for file operations, as well as the program object from commander. We define a copy command that takes a source and destination file path as arguments.

Inside the copy command, we resolve the provided paths to their absolute paths using path.resolve(). This ensures that we are working with the correct file locations. We then create readable and writeable streams using fs.createReadStream() and fs.createWriteStream() respectively. By piping the source stream to the destination stream, we copy the file contents. Success and error messages are logged accordingly.

Lastly, the program.parse(process.argv) line executes the utility tool from the command line. It parses the command-line arguments passed to the tools and invokes the corresponding actions defined for each command.

To test our copy implementation, let's create a file source.txt in the project directory and add some content to it. You can use any text editor to create the file and add some text of your choice.

source.txt

This is the content of the source file.

Now, let's run the copy command to copy the contents of source.txt to a new file called destination.txt

node index.js source.txt destination.txt

If everything works as expected, we should have a new file called destination.txt created in the project directory with the same content as source.txt.

Implementing the Move Command

Next, let's implement the file move functionality. Add the code below to index.js:

// Move command
program
  .command("move <source> <destination>")
  .description("Move a file from the source path to the destination path")
  .action((source, destination) => {
    const sourcePath = path.resolve(source)
    const destinationPath = path.resolve(destination)

    fs.rename(sourcePath, destinationPath, err => {
      if (err) {
        console.error("Error moving file:", err.message)
      } else {
        console.log(`File moved from ${sourcePath} to ${destinationPath}`)
      }
    })
  })

In the code snippet above, we define a move command that takes two arguments: the source file path and the destination file path. Similar to the previous command, we resolve the provided paths to their absolute paths using path.resolve(). We then use the fs.rename() function to rename the source file to the destination path, effectively moving the file. Success and error messages are handled accordingly.

To test our move implementation, follow the steps we did for copy command. Create a file called source.txt within the project directory and add some content to it.

Now, run the move command to move source.txt to a new location called destination.txt

node index.js move source.txt destination.txt

If everything works as expected, source.txt should be moved to the new location specified by destination.txt. The original file source.txt should no longer exist in the project directory.

Implementing the Delete Command

Lastly, let's implement the file deletion functionality. Add the following code to index.js:

// Delete command
program
  .command("delete <file>")
  .description("Delete a file")
  .action(file => {
    const filePath = path.resolve(file)

    fs.unlink(filePath, err => {
      if (err) {
        console.error("Error deleting file:", err.message)
      } else {
        console.log(`File deleted: ${filePath}`)
      }
    })
  })

For the delete command, it takes a single argument representing the file path. We resolve the provided path using path.resolve(). Then, we use the fs.unlink() function to delete the file at the specified path.

To test our delete implementation, follow the steps we did for copy command. Assuming you already have a source.txt file in the project directory, run the delete command to delete the file:

node index.js delete source.txt

If everything works as expected, the file source.txt should be deleted from the project directory.

⚠️ Warning: This action is irreversible!

Please note that this action is irreversible, so make sure you have a backup of any important files before running the delete command.

Testing Our Tool 🛠️

You can execute the utility tool by running the following command in your terminal or command prompt:

node index.js [command] [arguments]

Replace [command] with the desired command (e.g., copy, move, or delete) and provide the necessary [arguments] based on the command you choose.

For example, to copy a file from source.txt to destination.txt you would run:

node index.js copy source.txt destination.txt

Similarly, for moving a file, you would run:

node index.js move source.txt destination.txt

And for deleting a file:

node index.js delete file.txt

Adjust the file names and path according to your specific requirements.
The tool will execute the corresponding command and provide feedback in the console, such as success messages or error messages if any issues occur.

What's Next 💡?

That's it! The utility tool is now at your service. But wait, there's a bright idea that just sparked! Remember when I mentioned earlier that we would revisit the package.json file? Well, this is the perfect time. You see, although our tool is capable of some impressive feats, it's currently confined within the boundaries of our project folder. But don't worry, we have a clever solution to overcome this limitation and make our tool more versatile. Let's shed some light on how to expand its reach beyond the boundaries of our project folder

Making Our Tool Accessible Globaly

First, to make the tool work globally, we can package it as a global Node.js command-line tool. This will allow you to run the tool from any directory on your computer without needing to specify the path to the index.js file.

Here's how you can make it work globally:

Update package.json: Open your package.json file make sure it includes the following properties:

{
  "name": "utilz",
  "version": "1.0.0",
  "description": "Utility tool for Copy, Move, and Delete operations",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": " <Your Name>",
  "license": "MIT",
  "bin": {
    "utilz": "./index.js"
  },
  "preferGlobal": true,
  "dependencies": {
    "commander": "^10.0.1"
  }
}

Update the values accordingly, including the name, description, author, and license. I named mine utilz you can name yours whatever you want.

*Add Shebang toindex.js: At the very top of your index.js file, add a shebang line to specify the interpreter for the file. For Node.js use the following line:

#!/usr/bin/env node

This line tells the operating system to use Node.js to interpret the script.

Make index.js Executable: In your terminal or command prompt, navigate to the directory where your index.js file is located. Run the following command to make the file executable:

chmod +x index.js

This command sets the executable permission for the index.js file.

Link the Package: Run the following command to globally link your utility tool:

npm link

This command creates a symbolic link from the globally installed directory to your utility tool's directory.

Test the Global Tool: Now, you can use your utility tool globally from any directory. Open a new terminal or command prompt window, and you can run the tool using command your-tool-name [command] [arguments].

For example, if I want to copy a file from any location, I can run the following command:

utilz copy my_old_file.txt new_destination.txt

VOILA! 🚀

Feel free to customize the tool further and add error handling, additional commands, or any other features to suit your specific needs. If you'd like to connect or have a chat, feel free to reach out to me on Twitter @geekreflex

Check out the repo

Conclusion

In this tutorial, we have built a file utility tool using Node.js and the commander package. Our tool provides commands to copy, move, and delete files. By automating tasks, you can save time and simplify your development workflow, Utility tools like this can be expanded and customized based on your requirements, making you more productive as a programmer. Happy coding!

Creating Helper Functions for localStorage Operations

Jerry Nwosu — Mon, 15 May 2023 16:35:59 +0000

LocalStorage is a powerful feature of modern web browsers that allows web developers to store key-value pairs in the client-side browser storage. This feature is essential for building web applications that require persistent data storage, as it allows developers to store data that persists after the user refreshes the page, navigates away from the website or even closes the browser.

In this article, we'll explore how to create helper functions for localStorage get and set operations, which will simplify our code and make it easier to use localStorage in our web applications.

Understanding LocalStorage

The main features of localStorage are:

Shared between all tabs and windows from the same origin.
Persistent data storage that remains even after the browser or OS is restarted.

Before we dive into creating our helper functions, it's essential to understand what localStorage is an how it works. localStorage is a key-value storage that is implemented in modern web browsers. It allows developers to store data on the user's computer, which can be retrieved and used later by the web application.

localStorage is very simple to use. We can set a key-value pair using the following syntax:

localStorage.setItem("key", "value")

And we can retrieve the value from a key using the following syntax:

const value = localStorage.getItem("key")

If the key doesn't exist in localStorage, the getItem method will return null.

The Problem with Direct Usage

While localStorage is very useful, direct usage of these methods can be cumbersome and error-prone, especially if you need to access localStorage data frequently in your application. This is where helper functions can come in handy.

A helper function is a function that performs a specific task and is designed to be used in conjuction with other functions to make it easier to accomplish a specific task. In the case of localStorage, we can create two helper functions: one for getting a value from localStorage and another for setting a value in localStorage.

Creating the Helper Functions

Let's start with the get helper function. This function should take a key as an argument an return the value for that key from localStorage. If the key doesn't exist, it should return a default value.

function getFromLocalStorage(key, defaultValue = null) {
  const value = localStorage.getItem(key)
  return value ? JSON.parse(value) : defaultValue
}

In this function, we first get the value for the key from localStorage. If the value exists, we parse it from a string to a JavaScript object using JSON.parse. If the value doesn't exist, we return the default value passed to the function.

Next, let's create the set helper function. This function should take a key and a value as arguments and set the key-value pair in localStorage.

function setInLocalStorage(key, value) {
  localStorage.setItem(key, JSON.stringify(value))
}

In this function, we use the setItem method to set the key-value pair in localStorage. We stringify the value using JSON.stringify so that we can store any JavaScript object in localStorage.

Using the Helper Functions

Now that we have created the get and set helper functions, we can use them in our web applications to simplify our code and make it easier to work with localStorage

For example, let's say we have a web application that allows the user to customize the background color. We can use the get helper function to retrieve the background color from localStorage, and the set helper function to set the background color in localStorage.

const defaultBgColor = "#ffffff"

// get the background color from localStorage
const bgColor = getFromLocalStorage("bgColor", defaultBgColor)

// set the background color in localStorage
setInLocalStorage("bgColor", bgColor)

By using these helper functions, we can reduce the amount of code we need to write and make it easier to work with localStorage. This can also make our code more maintainable and less error-prone since we can use the same helper functions throughout our application.

Let's take a look at another example of using our helper functions:

Suppose you're building a todo list application that allows users to add, delete, and modify tasks. To ensure that the user's tasks are persisted even if they close or refresh the page, you decide to use localStorage to store the tasks.

Here's an example using the helper functions for get and set

// Get the user's tasks from localStorage
let tasks = getFromLocalStorage("tasks");

// Add a new task to the user's list
tasks.push("Buy groceries");

// Save the updated task list to localStorage
setInLocalStorage("tasks", tasks);

...

In this example, the getFromLocalStorage function retrieves the user's tasks from localStorage, then push method adds a new task to the list, and the setInLocalStorage function saves the updated task list back to localStorage.

Using helper function for get and set operations can simplify our code and make it more readable, allowing you to focus on building a great user experience for your application.

Error Handling & Type Checking

We can also add additional functionality to these helper functions, such as type checking and error handling, depending on our specific use case. For example, we could modify the setInLocalStorage helper function to throw an error if the key or value is not provided, or we could modify the getFromLocalStorage helper function to check that the value returned from localStorage is of the expected type.

function setInLocalStorage(key, value) {
  if (!key || !value) {
    throw new Error("Key and value are required")
  }
  localStorage.setItem(key, JSON.stringify(value))
}

function getFromLocalStorage(key, defaultValue = null) {
  const value = localStorage.getItem(key)
  if (value && typeof value !== "string") {
    throw new Error("Value must be a string.")
  }
  return value ? JSON.parse(value) : defaultValue
}

By adding these checks, we can ensure that our helper functions are used correctly and prevent potential errors from occuring.

Removing Data from LocalStorage

In addition to storing and retrieving data from localStorage, there may be times when we need to remove data from localStorage. To do this, we can create a helper function that utilizes the removeItem method to remove the data associated with a given key.

function removeFromLocalStorage(key) {
  if (!key) {
    throw new Error("Key is required")
  }
  localStorage.removeItem(key)
}

This function takes a key parameter that identifies the data we want to remove from localStorage. We can then call this function whenever we need to remove data from localStorage.

For example, let's say we have a form that allows users to save their preferences. When the user decides to clear their preferences, we call the removeFromLocalStorage function to remove the preference data from localStorage.

// Remove the preference data from localStorage
removeFromLocalStorage("preferences")

// Reload the page to reflect the changes
location.reload()

Conclusion

Creating helper functions for localStorage get and set operations are a valueable tool for any web developer looking to streamline their workflows and simplify their code. By using these functions, you can reduce the amount of code you need to write and maintain, and eliminate common errors.

In this article we've explored how to create and use these helper functions in your web applications, and have also highlighted some advanced techniques for working with localStorage. By putting these tips and tricks into practice, you can improve the performance and user experience of your applications, while making development process smoother and more efficient.

Automating Node.js Server Start-Up with Bash Script

Jerry Nwosu — Mon, 08 May 2023 12:07:30 +0000

If you're tired of manually starting your server every time you work on your project, you might want to consider using a Bash script to automate the process. In this tutorial, I'll show you how to create a simple Bash script that you can use to start your server with just a few clicks.

Prerequisites

Before we begin, make sure that you have the following:

A Linux machine
Node.js and Yarn installed on your machine
A server project that you want to start using the script

Step 1: Create the Bash script

Open a text editor of your choice and create a new file. You can name the file whatever you like, but make sure to give it a .sh extension to indicate that it's a Bash script. For example, you could name the file start-server.sh.

In the text editor, add the following code to the file:

#!/bin/bash

# Prompt the user to choose the server mode
echo "Enter the server mode you want to run:"
echo "1. Development"
echo "2. Production"
read -r mode

# Set the hyve-api directory path as a variable
API_DIR="/path/to/your/server/project"

# Set the server command based on the chosen mode
if [ "$mode" == "1" ]; then
    SERVER_COMMAND="yarn dev"
elif [ "$mode" == "2" ]; then
    SERVER_COMMAND="yarn start"
else
    echo "Invalid input. Please run the script again and choose a valid option."
    exit 1
fi

# Change to the server directory and start the server
cd "$API_DIR" || exit 1
eval "$SERVER_COMMAND"

In the code above, we're prompting the user to choose whether they want to run the server in development or production mode, and then setting the appropriate server command based on their choice. We're also setting the path to our server project as a variable so that we can easily change it later if needed.

Step 2: Make the script executable

Before we can run the script, we need to make it executable. Open a terminal window and navigate to the directory where you saved the script. Then, enter the following command:

chmod +x start-server.sh

This command will give the script permission to execute.

Step 3: Run the script

To run the script, simply double-click on the file. This will open terminal window and start the server according to the mode you choose earlier.

If you want to run the script from the terminal instead, navigate to the directory where you saved the script and enter the following command:

./start-server.sh

This will start the server according to the mode you chose earlier.

Step 4: Customize the script for your project

If you want to use the script for your own project, you'll need to customize it by changing the API_DIR variable to the path of your project. You may also need to update the server commands if your project uses a different command to start the server.

Thanks for reading, I hope this helps and inspires you to build dope stuffs 🚀. Happy hacking!

Reusable SVG components in React

Jerry Nwosu — Thu, 16 Mar 2023 10:14:40 +0000

One of the key benefits of using SVG in React is that they can be easily integrated into components. By importing the SVG as a component, it can be easily manipulated using React props.

Creating a component for each individual SVG graphic in React is a recommended best practice because it can increase reusability by reducing code duplication, enable easy customization, and maintain a cleaner and more organized codebase. Overall, it can improve the scalability and accessibility of your application, making it easier to manage and maintain in the long run.

import React from "react"

const MoonIcon = props => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 256 256"
      {...props}
    >
      <path
        fill="currentColor"
        d="M233.54 142.23a8 8 0 0 0-8-2a88.08 88.08 0 0 1-109.8-109.8a8 8 0 0 0-10-10a104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88a104.84 104.84 0 0 0 37-52.91a8 8 0 0 0-1.98-7.98Zm-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104a106 106 0 0 0 14.92-1.06a89 89 0 0 1-26.02 31.4Z"
      />
    </svg>
  )
}

export default MoonIcon

To use this in your application, simply import it and render it like any other component.

import React from "react"
import MoonIcon from "./icons/MoonIcon"

function App() {
  return (
    <div>
      <h1>My App</h1>
      <span style={{ fontSize: "20px", color: "orangered" }}>
        <MoonIcon />
      </span>
      <MoonIcon width="200" height="200" fill="orangered" />
    </div>
  )
}

export default App

Applying styles to individual SVG components is simple and can be done similarly to how you would style fonts. This allows for easy customization of their appearance. Additionally, using props in SVG components provides even more flexibility in customization, making it easier to adapt them to fit your specific needs.

How to Capitalize the First Letter in JavaScript

Jerry Nwosu — Sat, 18 Feb 2023 08:01:10 +0000

When programming, it's often necessary to capitalize the first letter of a string. This can be important for formatting names or titles correctly, or for converting user input to a proper format. Luckily, JavaScript offers various approaches for capitalizing the first letter of a string.

The easiest way to capitalize the first letter of a string is to use the toUpperCase() method. This method converts a string to uppercase and returns the result. Here's how you can capitalize the first letter of a string using this method:

let str = "hello world"
let capitalizedStr = str.charAt(0).toUpperCase() + str.slice(1)

console.log(capitalizedStr) // "Hello world"

We declare a variable str with the original string value. Then, we use the charAt() method to select the first letter of the string at index 0 and capitalize it with the toUpperCase() method. Next, we concatenate this uppercase character with the rest of the string, which we extract using slice() method starting at index 1.
Lastly we assign the resulting value to a new variable called capitalizedStr and log it to the console.

Another way to capitalize the first letter of a string in JavaScript is to use the slice() and toUpperCase() methods together. Here's an example of how to use this method:

let str = "hello world"
let capitalizeStr = str.slice(0, 1).toUpperCase() + str.slice(1)

console.log(capitalizedStr) // "Hello world"

This method is similar to the previous one, except we use the slice() method to extract the first character of the string and convert it to uppercase.

Capitalize Function

To streamline the code, we can create a utitlity function for the capitalize method and utitlize it whereever needed.

Here's an example:

function capitalize(str) {
  if (typeof str !== "string") {
    return ""
  }

  return str.charAt(0).toUpperCase() + str.slice(1)
}

// Using the function
capitalize("hello world") // "Hello world" ✅
capitalize(12345) // "" ❌

Similarly to the previous code examples, the above code capitalizes the first letter of a string. However, it differs by introducing a reusable capitalize function that can be called from anywhere in the application. Additionally, it includes error handling to check the type of the input value using the typeof keyword.

Originally published at https://geekreflex.netlify.app

React-Shadow-Component: Add Shadows to Your Components with Ease!

Jerry Nwosu — Sun, 29 Jan 2023 17:49:32 +0000

React-Shadow-Component is an easy-to-use library for adding shadows to your React components. Whether you're creating a website, a mobile app, or any other type of user interface, the ability to add shadows to your components can greatly enhance the visual appeal of your project.

The library has two main export components, BoxShadow and WithShadow, that make it simple to add shadows to your components. In this article, we'll take a closer look at how to use these components to add shadows to your React components.

Installation

To install React-Shadow-Component, simply run the following command in your terminal:

npm install react-shadow-component

or if you prefer Yarn:

yarn add react-shadow-component

BoxShadow Component

The BoxShadow component is used to add a box shadow to your components. It accepts several props, including color, offsetX, offsetY, blur, and spread. These props allow you to customize the shadow to fit your design needs.

The BoxShadow component takes precedence over the WithShadow component when both are used. This means that if you pass props to the BoxShadow component, it will use those props instead of the WithShadow props.

Here's an example of how to use the BoxShadow component:

import React from 'react';
import { BoxShadow } from 'react-shadow-component';

export const MyComponent = () => {
  return (
    <BoxShadow color="#000" offsetX={10} offsetY={10} blur={10} spread={10}>
      <div>My Shadowed Component</div>
    </BoxShadow>
  );
};

WithShadow Component

The WithShadow component is used to wrap any element and add a shadow to it. If the BoxShadow component does not have any props, it will use the props from the WithShadow component if provided.

Here's an example of how to use the WithShadow component:

import React from 'react';
import { WithShadow, BoxShadow } from 'react-shadow-component';

export const MyComponent = () => {
  return (
    <WithShadow color="#000" offsetX={10} offsetY={10} blur={10} spread={10}>
      // This color overrides the color
      // passed to `WithShadow`
      <BoxShadow color="#ff0000">
        <div>My Shadowed Component</div>
      </BoxShadow>
      <BoxShadow>
        <div>My Shadowed Component</div>
      </BoxShadow>
    </WithShadow>
  );
};

In this example, we import the WithShadow component from the react-shadow-component library. Then, we wrap the component we want to add a shadow to with the WithShadow component. Finally, we pass the props we want to use to the WithShadow component. In this case, we're using the color, offsetX, offsetY, blur, and spread props to customize the shadow.

Default Props

React-Shadow-Component also has default props, so you don't have to worry about passing props to the components every time (If you prefer the default shadow 😉). However, if you pass props to the BoxShadow component, it will take precedence over the default props and the WithShadow props. If you pass props to the WithShadow component, it will take precedence over the default props, but only if the BoxShadow component does not have any props.

Got it 🤷‍♂️? If not, don't worry! Just imagine you're playing a game of shadows where BoxShadow is the big boss, WithShadow is the lieutenant, and the default props are just the little minions following orders. If the big boss says jump, they jump, if the lieutenant says sit, they sit 😂.

Conclusion

React-Shadow-Component is a fun and effective way to add shadows to your React components. With its two main components, BoxShadow and WithShadow, and its ability to customize the shadow through props, you have full control over the look of your shadows. So go ahead, give it a try and turn your flat and boring components into a work of shadow art!

You can find the library on Github here: React-Shadow-Component 🚀

Test Post

Jerry Nwosu — Sat, 17 Sep 2022 10:46:33 +0000

This is a test post.