Forem: Hasidic Development Group

How to Install Node.js as a Non-Root User Using NVM: A Step-by-Step Guide

Yosi Leyid — Fri, 03 Mar 2023 16:34:42 +0000

Node.js is a popular open-source JavaScript runtime environment that allows developers to build fast and scalable web applications. Installing Node.js as a non-root user can be challenging, especially if you don't have administrative privileges on your server. However, using Node Version Manager (nvm), you can easily install and manage multiple versions of Node.js as a non-root user.

In this article, we will guide you through the process of installing Node.js using nvm as a non-root user.

What is Node Version Manager (nvm)?

Node Version Manager (nvm) is a command-line tool that allows you to easily manage multiple versions of Node.js on your system. With nvm, you can install and switch between different versions of Node.js without affecting the system-wide installation.

Why install Node.js as a non-root user?

By default, Node.js is installed as a system-wide package, which means that it requires administrative privileges to install or update. This can be problematic if you don't have root access to your server or if you're working on a shared server.

Installing Node.js as a non-root user allows you to install and manage multiple versions of Node.js without needing administrative privileges. It also ensures that your Node.js installation does not interfere with other users or applications on the system.

Installing nvm

The first step in installing Node.js as a non-root user is to install nvm on your system. To install nvm, follow these steps:

Open a terminal window on your system.

Download the nvm installation script using curl or wget:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

This will download the nvm installation script from the official nvm GitHub repository and execute it.

Close and reopen your terminal window or run the following command to apply the changes:

source ~/.bashrc

This command will load the nvm script into your current shell session.

Verify that nvm has been installed correctly by running the following command:

nvm --version

This command should return the current version of nvm installed on your system, which should be v0.39.3

Installing Node.js

Now that nvm is installed on your system, you can use it to install any version of Node.js as a non-root user. To install a specific version of Node.js, follow these steps:

List the available Node.js versions by running the following command:

nvm ls-remote

This command will display a list of all available Node.js versions that you can install using nvm.

Choose the version of Node.js that you want to install and run the following command:

nvm install <version>

Replace with the version of Node.js that you want to install (e.g., nvm install 14.17.0).

This command will download and install the specified version of Node.js on your system.

Verify that Node.js has been installed correctly by running the following command:

node --v

This command should return the version of Node.js that you just installed.

Switching between Node.js versions

With nvm, you can easily switch between different versions of Node.js on your system. To switch to a different version of Node.js, follow these steps:

List all installed versions of Node.js by running the following command:

nvm ls

This command will display a list of all installed versions of Node.js on your system.

Choose the version of Node.js that you want to use and run the following command:

nvm use <version>

Replace with the version of Node.js that you want to use (e.g., nvm use 14.17.0).

This command will switch your current shell session to use the specified version of Node.js.

Verify that you are now using the correct version of Node.js by running the following command:

node --version

This command should return the version of Node.js that you just switched to.

Conclusion

In conclusion, installing Node.js as a non-root user using nvm is a straightforward process that allows you to install and manage multiple versions of Node.js on your system without needing administrative privileges. With nvm, you can easily switch between different versions of Node.js, ensuring that your Node.js installation is always up-to-date and compatible with your application's requirements.

When working with Node.js applications, it's essential to keep your Node.js installation up-to-date and secure. With nvm, you can easily upgrade to the latest version of Node.js or switch back to an earlier version if necessary.

Remember to always verify the integrity of the Node.js installation and only install versions from trusted sources. With these precautions in place, you can enjoy the full benefits of Node.js and build fast, scalable, and secure web applications.

Client-Side vs. Server-Side Scripting: Understanding the Differences for Web Development

Yosi Leyid — Wed, 22 Feb 2023 02:16:30 +0000

In web development, there are two primary methods of processing and delivering data: client-side and server-side. Each approach has its unique advantages and limitations, and understanding the difference between the two is essential for creating efficient and effective web applications.

Client-side scripting refers to the code that runs on the user's computer or device in a web browser. Client-side scripts are written in languages such as JavaScript, which is commonly used to manipulate and modify the user interface and interact with server-side scripts. In contrast, server-side scripting refers to code that runs on the server, which receives client requests, processes them, and returns a response to the client. Server-side scripts are typically written in languages like PHP, Python, Ruby, or Java.

The primary difference between client-side and server-side scripting is the location where the code runs. Client-side scripts are executed on the user's computer, while server-side scripts are executed on the server. This fundamental difference affects how each type of script handles tasks such as data processing, user interaction, and security.

Client-side scripting

Client-side scripting is used to improve the user experience by providing dynamic and interactive web pages. Some common examples of client-side scripting include form validation, AJAX, and dynamic page updates.

Form validation

Form validation is a process where user inputs are checked for accuracy and completeness before they are submitted to the server. Client-side scripting is commonly used for form validation because it provides immediate feedback to the user, without requiring a round-trip to the server. The following example uses JavaScript to validate a form field for a valid email address:


function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

AJAX

AJAX stands for Asynchronous JavaScript and XML and is a technique used to load content into a web page without refreshing the entire page. This method improves the user experience and reduces server load by making small requests for data as needed. The following example shows how to load content using AJAX:

$.ajax({
  url: 'data.php',
  type: 'GET',
  success: function(response) {
    $('#content').html(response);
  }
});

Dynamic page updates

Dynamic page updates allow web pages to change content without requiring a full page reload. This feature improves the user experience by providing fast and smooth transitions between different states of a web page. The following example shows how to use jQuery to update content dynamically:

$('#button').click(function() {
  $('#content').html('New content');
});

Server-side scripting

Server-side scripting is used to perform tasks that require data processing, database access, and user authentication. Server-side scripts can interact with the file system, databases, and other system resources that are not available to client-side scripts.

Data processing

Server-side scripts are commonly used to process and manipulate data before returning it to the client. For example, a server-side script might process data from a form, validate it, and insert it into a database. The following example shows how to use PHP to process a form and insert the data into a database:

$name = $_POST['name'];
$email = $_POST['email'];

// Insert data into the database
$query = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
$result = mysqli_query($conn, $query);

Database access

Server-side scripts are also used to interact with databases, retrieving data and performing queries. Database queries can be complex and require a lot of processing power, making it more efficient to handle them on the server side. The following example shows how to use Python to access a MySQL database:

import mysql.connector

Connect to the database

mydb = mysql.connector.connect(
  host="localhost",
  user="yourusername",
  password="yourpassword",
  database="mydatabase"
)

# Execute a query

mycursor = mydb.cursor()
mycursor.execute("SELECT * FROM customers")
result = mycursor.fetchall()

User authentication

Server-side scripts are also used to perform user authentication, ensuring that only authorized users can access restricted areas of a web application. User authentication is a critical security feature that helps protect sensitive data and resources. The following example shows how to use Ruby on Rails to implement user authentication:


class SessionsController < ApplicationController
  def new
  end

  def create
    user = User.find_by(email: params[:session][:email].downcase)
    if user && user.authenticate(params[:session][:password])
      log_in user
      redirect_to user
    else
      flash.now[:danger] = 'Invalid email/password combination'
      render 'new'
    end
  end

  def destroy
    log_out
    redirect_to root_url
  end
end

Conclusion

In conclusion, client-side scripting and server-side scripting are two fundamental approaches to web development that have distinct advantages and limitations. Client-side scripting is used to enhance the user experience, providing dynamic and interactive web pages that respond to user input in real-time. Server-side scripting is used to perform data processing, interact with databases, and implement security features such as user authentication. Understanding the difference between client-side and server-side scripting is crucial for creating efficient and effective web applications.

Creating a Gemfile for a Jekyll Plugin: A Step-by-Step Guide

Yosi Leyid — Wed, 22 Feb 2023 01:10:17 +0000

If you are new to Jekyll, it is a popular static site generator that is used to build websites. Jekyll is built on Ruby, which means that you can write plugins for Jekyll using the Ruby programming language.

Before we dive into creating a Gemfile for a Jekyll plugin, let's first talk about what a Gemfile is. A Gemfile is a file that lists the gems, or Ruby packages, that your application or plugin depends on. Gems are packages of Ruby code that can be installed on your computer and used in your Ruby projects. A Gemfile makes it easy to manage your project's dependencies, so you don't have to worry about installing and updating each gem manually.

Now that we have a basic understanding of what a Gemfile is, let's talk about how to create one for a Jekyll plugin.

Step 1: Create a new directory for your Jekyll plugin

The first step in creating a Gemfile for a Jekyll plugin is to create a new directory for your plugin. You can name this directory whatever you like, but it's a good idea to name it something descriptive of your plugin.

For example, if you are creating a plugin that adds social media sharing buttons to your Jekyll site, you might name your directory "jekyll-social-sharing". To create a new directory in your terminal, navigate to the directory where you want to create the new directory, and type the following command:

mkdir jekyll-social-sharing

Step 2: Initialize a new Git repository

Next, you will want to initialize a new Git repository in your plugin directory. This will allow you to easily track changes to your code and collaborate with other developers.

To initialize a new Git repository, navigate to your plugin directory in your terminal and type the following command:

git init

Step 3: Create a new Gemfile

Now that you have a directory for your plugin and a Git repository initialized, you can create a new Gemfile for your plugin. To do this, navigate to your plugin directory in your terminal and type the following command:

touch Gemfile

This will create a new file called "Gemfile" in your plugin directory.

Step 4: Add dependencies to your Gemfile

Once you have created a Gemfile for your plugin, you can start adding dependencies to it. Dependencies are gems that your plugin relies on to function correctly. You can add dependencies to your Gemfile by specifying the gem name and version number, like this:

source "https://rubygems.org"
gem "jekyll"
gem "sass"

In this example, we are adding two dependencies to our Gemfile: "jekyll" and "sass". The "source" line specifies where to download the gems from (in this case, the official RubyGems repository), and the "gem" lines specify the names and versions of the gems to install.

Step 5: Install dependencies

Once you have added dependencies to your Gemfile, you need to install them. To do this, navigate to your plugin directory in your terminal and type the following command:

bundle install

This will install all of the gems specified in your Gemfile, as well as any dependencies that those gems rely on. If this is the first time you have run "bundle install" in your plugin directory, it may take a few minutes to download and install all of the necessary gems.

Step 6: Use dependencies in your plugin code

Now that you have installed your plugin's dependencies, you can start using them in your plugin code. For example, if your plugin relies on the "jekyll"

require "jekyll"

This will allow you to use the functionality provided by the "jekyll" gem in your plugin code.

Here is an example of a simple Jekyll plugin that uses the "jekyll" and "sass" gems:

# jekyll-social-sharing.rb

require "jekyll"
require "sass"

module Jekyll
  class SocialSharing < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @text = text
    end

    def render(context)
      "<div class='social-sharing'>
        <a href='https://twitter.com/share' class='twitter-share-button'>Tweet</a>
        <a href='https://www.facebook.com/sharer/sharer.php?u=#{context['page']['url']}' class='facebook-share-button'>Share on Facebook</a>
      </div>"
    end

    Liquid::Template.register_tag "social_sharing", self
  end
end

In this example, we are creating a new Liquid tag called "social_sharing" that generates social media sharing buttons for Twitter and Facebook. We are using the "jekyll" gem to access the Liquid template engine and the "sass" gem to style the buttons.

Step 7: Test your plugin

Once you have written your plugin code and installed all of the necessary gems, it's a good idea to test your plugin to make sure it works as expected. To do this, you can run your Jekyll site with the "jekyll serve" command and check that your plugin is working correctly.

jekyll serve

If everything is working correctly, you should be able to see the social media sharing buttons on your Jekyll site.

Step 8: Publish your plugin

Once you have tested your plugin and made sure it works correctly, you may want to publish it so that others can use it. You can publish your plugin to the official RubyGems repository by creating a new account on https://rubygems.org and following the instructions for publishing a gem.

Conclusion

Congratulations! You have now learned how to create a Gemfile for a Jekyll plugin. By following these steps, you can easily manage your plugin's dependencies and ensure that your plugin works correctly. Remember to test your plugin thoroughly before publishing it, and to follow best practices for writing and publishing Ruby gems. Good luck!

Build Your Own API with Hoppscotch: Tips and Best Practices

Yosi Leyid — Mon, 20 Feb 2023 18:40:42 +0000

Creating a new API can be a complex process, involving many different steps and technologies. However, with the right platform, this process can be made much simpler. Hoppscotch is an open-source API development platform that simplifies the entire API development process, allowing developers to create, test, and document APIs quickly and easily.

Getting started with Hoppscotch

To get started with Hoppscotch, the first step is to sign up for an account. Once you have signed up, you will be taken to the Hoppscotch dashboard, where you can create a new project.

To create a new project, click on the "New Project" button on the dashboard. You will be prompted to enter a name for your project and a description. Once you have entered this information, click on the "Create Project" button.

Creating a new API endpoint

With your project created, you can now create a new API endpoint. To do this, click on the "New API" button on the project dashboard. You will be prompted to enter a name for your API and a description.

Once you have entered this information, you will be taken to the API editor, where you can start building your API endpoint. The editor is divided into three sections: Headers, Body, and Tests.

Headers

In the Headers section, you can add any headers that you want to include in your API request. Headers are used to provide additional information about the request, such as the content type or authorization credentials.

Here is an example of how to add a header to an API request using Hoppscotch:

GET /api HTTP/1.1
Host: example.com
Authorization: Basic YWRtaW46cGFzc3dvcmQ=
Content-Type: application/json

To add a new header in Hoppscotch, click on the "Add Header" button. You will be prompted to enter the name and value of the header. Once you have entered this information, click on the "Add" button to add the header to your API request.

Body

In the Body section, you can add the data that you want to send with your API request. This can include JSON data, form data, or any other type of data that your API endpoint requires.

Here is an example of how to add JSON data to an API request using Hoppscotch:

POST /api HTTP/1.1
Host: example.com
Content-Type: application/json

{
    "name": "John Smith",
    "age": 30,
    "email": "john.smith@example.com"
}

To add a new data field in Hoppscotch, click on the "Add Field" button. You will be prompted to enter the name and value of the data field. Once you have entered this information, click on the "Add" button to add the data field to your API request.

Tests

In the Tests section, you can write tests that will be run after your API request has been sent. These tests can be used to verify that your API endpoint is working correctly.

Here is an example of how to write a test using Hoppscotch:

tests["Status code is 200"] = responseCode.code === 200;
tests["Response time is less than 500ms"] = responseTime < 500;
tests["Response contains expected data"] = responseBody.has("Hello, World!");

To add a new test in Hoppscotch, click on the "Add Test" button. You will be prompted to enter a name for the test and the test code. Once you have entered this information, click on the "Add" button to add the test to your API request.

Testing your API endpoint

Once you have created your API endpoint, you can test it using Hoppscotch's built-in testing tools. To do this, simply click on the "Send" button in the API editor.

Hoppscotch will then send your API request and display the response in the "Response" section of the editor. If there are any errors or issues with your API request, Hoppscotch will display an error message.

If your API request was successful, you can use the response data to further develop and refine your API endpoint.

Documenting your API endpoint

Finally, once you have created and tested your API endpoint, you can document it using Hoppscotch's documentation tools. To do this, click on the "Docs" button on the project dashboard.

In the documentation editor, you can enter information about your API endpoint, such as its purpose, expected inputs and outputs, and any other relevant information.

Here is an example of how to document an API endpoint using Hoppscotch:

## API Endpoint: /api

### Purpose

This API endpoint is used to retrieve data from the server.

### Inputs

- None

### Outputs

- Data (JSON)

### Example

Request:

GET /api HTTP/1.1
Host: example.com

Response:

HTTP/1.1 200 OK
Content-Type: application/json

{
    "name": "John Smith",
    "age": 30,
    "email": "john.smith@example.com"
}

Once you have entered this information, click on the "Save" button to save your API endpoint documentation.

Conclusion

With Hoppscotch, creating a new API endpoint is a simple and straightforward process. By using Hoppscotch's API development, testing, and documentation tools, you can quickly and easily create a robust and reliable API endpoint that meets your organization's needs.

With its intuitive user interface, powerful testing tools, and comprehensive documentation features, Hoppscotch is an essential tool for any developer looking to create high-quality APIs. So why not give it a try today and see how easy it can be to create a new API endpoint using Hoppscotch!

Resources

Introducing PolygonDB: A Modern and Flexible Alternative to MongoDB with Advanced Data Management Features

Yosi Leyid — Sun, 19 Feb 2023 19:15:44 +0000

PolygonDB is an open-source database management system that is designed to be a modern alternative to MongoDB. It's built in Rust, a programming language known for its speed and reliability, and it boasts a number of features that make it a compelling choice for developers who need to store and manage data.

One of the key features of PolygonDB is its support for complex data types. Let's say, for example, that you're building an e-commerce site and you need to store information about each product. In MongoDB, you might create a collection for products and store each product as a document, like this:

{
  "_id": ObjectId("612f4a4d9a4ce4d4a3a0e3fe"),
  "name": "iPhone 13 Pro",
  "description": "The latest and greatest iPhone",
  "price": 999.99,
  "color": "Graphite",
  "storage": "128GB"
}

This works fine, but what if you need to store additional information about each product, such as customer reviews or a list of related products? In MongoDB, you would have to store this information as nested documents or arrays, which can get messy and difficult to work with.

With PolygonDB, you can store each product as a YAML or TOML file, like this:

name = "iPhone 13 Pro"
description = "The latest and greatest iPhone"
price = 999.99
color = "Graphite"
storage = "128GB"
reviews = ["612f4ad69a4ce4d4a3a0e4ff", "612f4ae69a4ce4d4a3a0e54c"]
related_products = ["612f4b099a4ce4d4a3a0e5c4", "612f4b209a4ce4d4a3a0e60f"]

This makes it much easier to work with complex data types, since you can use familiar file-based operations to read, write, and manipulate data.

Another key feature of PolygonDB is its support for transactions. Let's say, for example, that you're building a banking app and you need to ensure that transfers between accounts are atomic and consistent. With PolygonDB, you can use transactions to ensure that all changes are committed or rolled back together, so that you don't end up with inconsistent or corrupted data.

Here's an example of how you might use transactions in PolygonDB:

let mut txn = db.transaction().unwrap();

let account_a = txn.get_document("accounts", "account_123").unwrap();
let account_b = txn.get_document("accounts", "account_456").unwrap();

if account_a["balance"] >= transfer_amount {
    let new_balance_a = account_a["balance"] - transfer_amount;
    let new_balance_b = account_b["balance"] + transfer_amount;

    txn.update_document("accounts", "account_123", |doc| {
        doc["balance"] = new_balance_a;
    });

    txn.update_document("accounts", "account_456", |doc| {
        doc["balance"] = new_balance_b;
    });

    txn.commit().unwrap();
} else {
    txn.rollback().unwrap();
}

This code retrieves two documents from the "accounts" collection, checks that there is enough money in one account to make a transfer, and then updates both documents atomically. If there is not enough money, the transaction is rolled back.

Finally, PolygonDB has built-in support for indexing, which makes it easy to perform complex queries and sort data. You can create indexes on one or more fields, and PolygonDB will automatically maintain the index as you add, remove, or modify documents. This can greatly improve the performance of your queries, especially for large collections.

Here's an example of how you might create an index in PolygonDB:

db.create_index("products", "name").unwrap();

This code creates an index on the "name" field in the "products" collection. Now, when you perform a query that includes the "name" field, PolygonDB will use the index to quickly find matching documents.

In summary, PolygonDB is a modern and flexible database management system that offers a number of features that make it a compelling alternative to MongoDB. Its support for complex data types, transactions, and indexing make it a powerful tool for developers who need to store and manage data. If you're interested in learning more, I encourage you to check out the PolygonDB code base and documentation on GitHub.

Mastering Object-Oriented Programming in JavaScript: Best Practices and Examples

Yosi Leyid — Sun, 19 Feb 2023 16:28:18 +0000

Object-Oriented Programming (OOP) is a popular programming paradigm that allows developers to create modular, maintainable, and reusable code. JavaScript, a programming language that has become ubiquitous in web development, also supports OOP. In this blog post, we will explore OOP in JavaScript and how it can be used to write more organized, efficient, and scalable code.

What is Object-Oriented Programming?

Object-Oriented Programming is a programming paradigm that is based on the concept of objects. An object is a collection of data and behaviors that are defined by a set of properties and methods. OOP is centered around the idea that software systems are composed of objects that interact with each other to achieve a common goal.

OOP has four fundamental concepts that make it a powerful tool for software development: Encapsulation, Abstraction, Inheritance, and Polymorphism.

Encapsulation: Encapsulation is the process of hiding the internal details of an object and exposing only the necessary information to the outside world. This is achieved by defining the properties and methods of an object as public or private. Private members are only accessible within the object, while public members can be accessed from outside the object.

Abstraction: Abstraction is the process of simplifying complex systems by creating models that capture the essential features of the system while hiding unnecessary details. In OOP, this is achieved by defining abstract classes and interfaces that define the common properties and behaviors of a group of objects.

Inheritance: Inheritance is the process of creating new classes from existing classes. The new class inherits the properties and behaviors of the parent class, and can add new properties and behaviors or override existing ones.

Polymorphism: Polymorphism is the ability of objects to take on multiple forms or behaviors. In OOP, this is achieved by using interfaces and abstract classes to define the common properties and behaviors of a group of objects, while allowing each object to implement them in its own way.

JavaScript and OOP

JavaScript was originally designed as a scripting language for web pages. However, with the advent of Node.js, JavaScript has become a full-fledged programming language that can be used to create complex systems.

JavaScript supports OOP, but in a different way than other programming languages like Java or C++. In JavaScript, objects are created using a constructor function or an object literal.

Constructor Functions

A constructor function is a special function that is used to create new objects. It is called using the "new" keyword, which creates a new object and assigns it to the "this" keyword. The constructor function can define properties and methods on the object using the "this" keyword.

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.greet = function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

var john = new Person("John", 30);
john.greet(); // outputs "Hello, my name is John and I am 30 years old."

In the above example, we define a constructor function called "Person" that takes two parameters, "name" and "age". We define two properties, "name" and "age", and a method called "greet" that logs a message to the console.

We create a new object called "john" using the "new" keyword and pass in the arguments "John" and 30. We then call the "greet" method on the "john" object.

Object Literals

Object literals are a shorthand notation for creating new objects. They are created using curly braces and can define properties and methods on the object.

var john = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
}
};

john.greet(); // outputs "Hello, my name is John and I am 30 years old."

In this example, we define an object called "john" using object literal notation. We define two properties, "name" and "age", and a method called "greet" that logs a message to the console.

We then call the "greet" method on the "john" object.

Classes in JavaScript

In ES6, JavaScript introduced the class syntax, which provides a simpler and more structured way of defining objects and their behavior. Classes in JavaScript are still based on the prototype inheritance model, but they provide a more familiar syntax for developers who are used to classes in other programming languages.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

var john = new Person("John", 30);
john.greet(); // outputs "Hello, my name is John and I am 30 years old."

In this example, we define a class called "Person" that has a constructor function that takes two parameters, "name" and "age". We define two properties, "name" and "age", and a method called "greet" that logs a message to the console.

We create a new object called "john" using the "new" keyword and pass in the arguments "John" and 30. We then call the "greet" method on the "john" object.

Inheritance in JavaScript

Inheritance in JavaScript is achieved using the prototype chain. Each object in JavaScript has a prototype object, which it inherits properties and methods from. The prototype object, in turn, has a prototype object, and so on, until the top of the chain is reached, which is the Object prototype.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }

  displaySalary() {
    console.log("My salary is " + this.salary);
  }
}

var john = new Employee("John", 30, 50000);
john.greet(); // outputs "Hello, my name is John and I am 30 years old."
john.displaySalary(); // outputs "My salary is 50000"

In this example, we define a class called "Person" that has a constructor function that takes two parameters, "name" and "age". We define two properties, "name" and "age", and a method called "greet" that logs a message to the console.

We then define a class called "Employee" that extends the "Person" class. We add a new property called "salary" and a method called "displaySalary".

We create a new object called "john" using the "new" keyword and pass in the arguments "John", 30, and 50000. We then call the "greet()" method and the "displaySalary()" method on the "john" object.

The "Employee" class inherits the properties and methods of the "Person" class using the "extends" keyword. The "super" keyword is used to call the constructor of the parent class and initialize the "name" and "age" properties of the "Employee" object.

Conclusion

Object-oriented programming is an important paradigm in software development, and JavaScript provides various ways to implement OOP concepts. In this blog post, we covered the basics of OOP in JavaScript, including object literals, classes, and inheritance.

It's important to note that OOP is just one approach to programming, and there are other paradigms such as functional programming and procedural programming. Developers should choose the appropriate approach based on the problem they're trying to solve and the requirements of the project.

By understanding OOP concepts in JavaScript, developers can write code that is more organized, modular, and reusable. This can result in more maintainable code that is easier to debug and extend over time.

Resources

Object Cheat Sheet c/o Reddit:

JavaScript Classes 101: A Beginner's Guide to Object-Oriented Programming

Yosi Leyid — Fri, 17 Feb 2023 20:15:21 +0000

Introduction

JavaScript is one of the most popular programming languages in use today. It is a versatile language that is used for a variety of purposes, including web development, game development, and server-side scripting. One of the most important features of JavaScript is its support for object-oriented programming (OOP), which allows developers to create classes that represent real-world objects and encapsulate their behavior and data.

In this blog post, we will explore the concept of classes in JavaScript, and how they can be used to create reusable and maintainable code. We will cover the syntax and semantics of classes, as well as their relationship with objects and inheritance. We will also discuss some best practices for using classes in your code.

What are classes in JavaScript?

A class in JavaScript is a blueprint for creating objects. It defines the properties and methods that an object will have, as well as any behavior that the object should exhibit. Classes can be thought of as templates or prototypes for objects, which are instantiated (i.e. created) based on their class definition.

Classes were introduced in ECMAScript 6, the latest version of the JavaScript language, as a way to make OOP in JavaScript more intuitive and easier to use. Prior to ECMAScript 6, developers used a combination of constructor functions and prototype chains to achieve OOP in JavaScript. Classes provide a more structured and organized way to define objects, and are designed to be more familiar to developers who are used to OOP in other programming languages.

The syntax of a JavaScript class

The syntax of a JavaScript class is relatively simple. Here is an example of a class definition:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

This class is called Person and has two properties, name and age, as well as one method, sayHello(). The constructor() method is a special method that is called when an object is created based on the class. It sets the initial values of the object's properties. The sayHello() method is a regular method that can be called on an instance of the class.

To create an object based on a class, you use the new keyword, like this:

let person1 = new Person("John", 30);
let person2 = new Person("Jane", 25);

person1.sayHello(); // Output: "Hello, my name is John and I am 30 years old."
person2.sayHello(); // Output: "Hello, my name is Jane and I am 25 years old."

In this example, we create two objects based on the Person class, and call the sayHello() method on each object.

The relationship between classes and objects

In JavaScript, classes and objects are closely related. A class defines the properties and methods that an object will have, but an object is an instance of a class that has its own unique values for those properties. When you create an object based on a class, you are creating an instance of that class, which inherits all the properties and methods of the class.

For example, if we create a class called Car:

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  start() {
    console.log("The " + this.make + " " + this.model + " is starting.");
  }

  stop() {
    console.log("The " + this.make + " " + "is stopping.");
  }
}

Inheritance in JavaScript classes

Inheritance is an important concept in OOP, and JavaScript classes support inheritance. Inheritance allows you to create a new class based on an existing class, which inherits all the properties and methods of the parent class. The new class can then add its own properties and methods, or override the properties and methods of the parent class.

To create a subclass, you use the extends keyword, like this:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + " makes a noise.");
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + " barks.");
  }
}

let dog = new Dog("Fido");
dog.speak(); // Output: "Fido barks."

In this example, we create a class called Animal that has a name property and a speak() method. We then create a subclass called Dog that extends the Animal class using the extends keyword. The Dog class overrides the speak() method of the Animal class, so that it now outputs "barks" instead of "makes a noise".

When we create an instance of the Dog class, it inherits the properties and methods of the Animal class, and we can call the speak() method on the Dog object.

Best practices for using classes in JavaScript

Here are some best practices for using classes in your JavaScript code:

Use classes for creating complex objects with multiple properties and methods. If you only need a simple object with a few properties, a plain object literal may be sufficient.
Use meaningful names for your classes, that describe the objects they represent. For example, if you're creating a class for a car, use the name Car.
Use proper indentation and formatting to make your code more readable. This is especially important when working with classes, which can have many properties and methods.
Keep your class definitions short and focused. If a class has too many properties and methods, it may be a sign that it needs to be refactored into multiple smaller classes.
Use inheritance sparingly, and only when it makes sense for your use case. Overusing inheritance can lead to complex and difficult-to-maintain code.
Use access modifiers such as public, private, and protected to control access to the properties and methods of your class. This can help prevent unintended changes to the state of your objects.

Conclusion

JavaScript classes are a powerful feature that allow developers to create reusable and maintainable code. Classes provide a structured and organized way to define objects, and make it easier to implement OOP in JavaScript. With their support for inheritance and access modifiers, classes in JavaScript provide a flexible and powerful way to create complex and extensible code.

By following best practices and using classes in a thoughtful and intentional way, you can create code that is easy to read, understand, and maintain, even as your codebase grows in complexity.

React States: Best Practices for Managing State in Your Applications

Yosi Leyid — Thu, 16 Feb 2023 20:16:25 +0000

React is a popular JavaScript library used for building user interfaces. One of the key concepts in React is state, which is used to manage data and make components interactive. In this blog post, we'll dive into what React states are, how they work, and how they can be used to build powerful and dynamic applications.

What is a React state?

In simple terms, a state is an object that holds data and determines how a component should behave and render. It is like a memory that keeps track of the changes in a component's properties and allows it to be responsive to user interactions. A state is mutable and can be updated using the setState method, triggering a re-render of the component and its children.

How do React states work?

To create a state in React, we need to first define an initial state value in the constructor of our component class. The state can be a primitive data type, such as a string or number, or an object that contains multiple key-value pairs.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      message: 'Hello, world!'
    };
  }
  // ...
}

In the above code, we've defined an initial state for a component called MyComponent. It has two properties, count and message, with initial values of 0 and 'Hello, world!' respectively. To update the state, we can call the setState method, passing in an object that contains the updated key-value pairs. For example, to increment the count property by 1, we can do:

this.setState({ count: this.state.count + 1 });

When setState is called, React will compare the new state with the previous state and make necessary updates to the component and its children. This includes updating the virtual DOM, diffing the changes, and rendering the updated component to the real DOM.

Why use React states?

React states are useful for building dynamic, interactive UIs that respond to user inputs and events. They provide a way to manage and update data within a component without requiring a full page refresh or server call. States can be used to create controlled components, which are components that have their values controlled by React, rather than the user. This allows for better data validation and error handling. For example, if we have an input field that only accepts numbers, we can use a state to validate the input and prevent the user from submitting invalid data.

States can also be used to create unidirectional data flow, where the data flows in a single direction from parent to child components. This makes it easier to reason about the data and reduces the likelihood of bugs caused by conflicting state changes.

Best practices for using React states

To use React states effectively, it's important to follow some best practices that will ensure optimal performance and maintainability of your code.

Keep states minimal

States should only contain data that is essential for rendering the component. It's important to avoid putting too much data into a state, as this can cause performance issues and make the code harder to maintain.

Avoid cascading states

Cascading states occur when a state is passed down through multiple levels of components, resulting in the need for multiple props and setState calls. This can lead to code that is hard to read and maintain. To avoid cascading states, consider using a state management library like Redux or MobX.

Use functional components

Functional components are simpler and easier to read than class components, and they provide better performance. Since functional components don't have a state, they rely on props to render. This makes it easier to reason about the data and ensures that the data flows in a unidirectional way, from parent to child components. Functional components are also easier to test, since they are pure functions that only take in props and return a JSX element. This makes it easier to write unit tests and ensure that the component behaves as expected.

Functional components can also use hooks, which are a powerful mechanism for managing state and other side effects in React. Hooks allow us to use state and other React features without the need for a class component. They provide a simple and intuitive way to manage state, handle effects, and perform other common tasks in React. Overall, functional components are a great choice for building simple, reusable, and performant components in React. They provide a simpler and more intuitive way to build components and help ensure that our code is maintainable, scalable, and easy to test

Use immutability

When updating a state, it's important to do so immutably. This means creating a new object with the updated data, rather than directly modifying the existing state. This ensures that React can detect the changes and re-render the component and its children as needed.

Optimize re-renders

Since re-rendering a component can be a performance-intensive operation, it's important to optimize the re-renders as much as possible. One way to do this is to use the shouldComponentUpdate lifecycle method, which allows us to determine if a component should re-render or not. By implementing this method, we can skip unnecessary re-renders and improve the overall performance of the application.

Conclusion

React states are an essential part of building dynamic, interactive user interfaces. By managing data and allowing components to respond to user interactions, states provide a powerful mechanism for building robust and responsive applications. By following best practices and optimizing our code, we can ensure that our React applications are performant, maintainable, and scalable.

Using React "States"

Yosi Leyid — Thu, 16 Feb 2023 01:13:02 +0000

React states are a fundamental concept in React programming. They are used to store and manage data that changes over time, such as user input, API responses, or component updates. In this article, we'll explore what React states are, how they work, and how to use them in your React projects.

What are React States?

React states are JavaScript objects that hold information about a component's state. They are used to store and update data that can change over time, such as a component's user interface or its data model. States are essential for building interactive and responsive user interfaces in React, and they allow developers to manage complex application logic with ease.

How do React States Work?

When a component's state changes, React automatically re-renders the component and its child components. This ensures that the user interface reflects the current state of the application. States are typically initialized in the component's constructor, and they are updated using the setState method. The setState method is used to update the component's state, and it takes an object as an argument. The object can contain one or more key-value pairs, where the key represents the state property, and the value represents its new value. When setState is called, React updates the component's state and re-renders the component.

Here's an example of a simple React state:

jsx

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

In this example, the Counter component has a state property count, which is initialized to 0 in the constructor. The render method displays the current count value, and the onClick event handler updates the count state by calling the setState method.

How to Use React States in Your Projects

To use React states in your projects, you'll need to follow these steps:

Create a new React component and import the React and Component modules.
Define the component's state properties in the constructor method.
Render the component's user interface using the state properties.
Add event handlers to update the component's state when necessary.

Here's an example of a more complex React state:

jsx

import React, { Component } from 'react';

class LoginForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
      rememberMe: false,
      loading: false,
      error: ''
    };
  }

  handleInputChange = event => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit = event => {
    event.preventDefault();

    this.setState({ loading: true });

    // Call API to submit form data
    submitLoginForm(this.state)
      .then(response => {
        // Handle success response
      })
      .catch(error => {
        this.setState({ loading: false, error: error.message });
      });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input
            type="text"
            name="username"
            value={this.state.username}
            onChange={this.handleInputChange}
          />
        </label>
        <br

To see a working example of React states go over to my "CodeFolio" repo and browse the react apps folder, in there you will find an app called "tic-tac-toe" which is using react states in a very simple way to run a tic tac toe game. Comment below and let me see what you have been working on, drop by my discord server and lets work on some apps together!

Using A Custom Domain With Github Pages

Yosi Leyid — Mon, 06 Feb 2023 03:45:23 +0000

I use Google Domains for my own domains so I will be using that in my example. The process is pretty simple if you are comfortable with configuring things like DNS Records, A Names, CNAME records etc. Nothing more complicated that that. The first step is to purchase your domain name. After that is done navigave to the DNS section on your account.

Custom CNAME Records
Custom A Records
Head Over To Github
Potential Errors

Custom CNAME Records

Now we are going to add a CNAME, during the process of setting up your custom domain in Github settings it will create a CNAME file in the root directory of your github pages site to compare to the CNAME here. For the CNAME we will add it like the image below. Set up both your Apex domain sitename.domain and a www subdomain. Set them both for your username <your-domain-name>.com.

Custom A Records

Then we will add 4 A records in the same panel.

Head Over To Github

Once you have all of that set up you will head over to GitHub and go to the repository you want to serve up. It is common for most github users to have a repo named {username}.github.io which will be served up on github.io as a subdomain using your username. Once you have made that repo (follow this tutorial to accomplish that if you don't have one) click on settings and head down to "Pages". In there scroll down to custom domain name settings and add your domain name. After it passes the checks click on "Enforce HTTPS" and you should be all set. If you run into any issues feel free to reach out to me. My contact info can be found in my GitHub profile.

Potential Errors

If you do not have everything set up exactly as it should be Github will throw you an error:

Both <your-domain-name>.com and its alternate name are 
improperly configured

Domain does not resolve to the GitHub Pages server. For 
more information, see (NotServedByPagesError). We recommend
you add an A record pointed to our IP addresses, or an ALIAS
record pointing to <your-username>.github.io.

If you run into this, check your DNS settings over where you manage those settings and make sure everything is set correctly.

Creating Discord Bots in 2023

Yosi Leyid — Fri, 03 Feb 2023 05:00:46 +0000

I recently wrote a "Blog" on GitHub about how to set up Discord bots in seconds using Node.js and Discord.js using Gists. I want to create a series here on how to create bots and implement new features using the Discord Developer Documentation.

If you want to read this on Github where you can view the repo and contribute, you can view the source code needed here, and the Gist walking you through the process is here. I will update this post and include more images and code as it expands in this series.

Forem: Hasidic Development Group

How to Install Node.js as a Non-Root User Using NVM: A Step-by-Step Guide

What is Node Version Manager (nvm)?

Why install Node.js as a non-root user?

Installing nvm

Download the nvm installation script using curl or wget:

Installing Node.js

Conclusion

Client-Side vs. Server-Side Scripting: Understanding the Differences for Web Development

Client-side scripting

Form validation

AJAX

Dynamic page updates

Server-side scripting

Data processing

Database access

Connect to the database

User authentication

Conclusion

Creating a Gemfile for a Jekyll Plugin: A Step-by-Step Guide

Step 1: Create a new directory for your Jekyll plugin

Step 2: Initialize a new Git repository

Step 3: Create a new Gemfile

Step 4: Add dependencies to your Gemfile

Step 5: Install dependencies

Step 6: Use dependencies in your plugin code

Step 7: Test your plugin

Step 8: Publish your plugin

Conclusion

Build Your Own API with Hoppscotch: Tips and Best Practices

Getting started with Hoppscotch

Creating a new API endpoint

Headers

Body

Tests

Testing your API endpoint

Documenting your API endpoint

Conclusion

Resources

Introducing PolygonDB: A Modern and Flexible Alternative to MongoDB with Advanced Data Management Features

Mastering Object-Oriented Programming in JavaScript: Best Practices and Examples

What is Object-Oriented Programming?

JavaScript and OOP

Constructor Functions

Object Literals

Classes in JavaScript

Inheritance in JavaScript

Conclusion

Resources

JavaScript Classes 101: A Beginner's Guide to Object-Oriented Programming

Introduction

What are classes in JavaScript?

The syntax of a JavaScript class

The relationship between classes and objects

Inheritance in JavaScript classes

Best practices for using classes in JavaScript

Conclusion

React States: Best Practices for Managing State in Your Applications

What is a React state?

How do React states work?

Why use React states?

Best practices for using React states

Keep states minimal

Avoid cascading states

Use functional components

Use immutability

Optimize re-renders

Conclusion

Using React "States"

What are React States?

How do React States Work?

How to Use React States in Your Projects

Using A Custom Domain With Github Pages

Table of Contents

Custom CNAME Records

Custom A Records

Head Over To Github

Potential Errors

Creating Discord Bots in 2023