DEV Community: Engr. Promise

Adding Electronic Signatures to a Rails 8 App

Engr. Promise — Sat, 29 Mar 2025 01:10:31 +0000

Integrating an electronic signature feature can be a great addition when building applications that require document signing. In this tutorial, we will walk through how to add a signature pad to a Rails 8 app using Tailwind CSS, PostgreSQL, and Importmap. We'll leverage the signature_pad JavaScript library to enable users to draw their signatures directly within a form.

Step 1: Install Signature Pad

Rails 8 with Importmap allows us to pin JavaScript libraries easily. Start by running the following command to install signature_pad:

bin/importmap pin signature_pad

This command will pin signature_pad and update the importmap.rb file with:

pin "signature_pad" # @5.0.4

Step 2: Create a Stimulus Controller

Next, we will create a Stimulus controller to handle the signature pad interactions. Run the following command:

bin/rails generate stimulus signature_pad

Now, open the generated signature_pad_controller.js file and replace its contents with:

import { Controller } from "@hotwired/stimulus";
import SignaturePad from "signature_pad";

export default class extends Controller {
    static targets = ["canvas", "input"];

    connect() {
      this.signaturePad = new SignaturePad(
        this.canvasTarget,
        { dotSize: 3, minWidth: 1, maxWidth: 3 }
      );
      console.log("Please add signature before saving.");
    }

    disconnect() {
      this.signaturePad.off();
    }

    clear() {
      this.signaturePad.clear();
    }

    submit(event) {
      event.preventDefault();

      this.canvasTarget.toBlob((blob) => {
        const signatureFile = new File([blob], "signature.png", { type: "image/png" });
        const dataTransfer = new DataTransfer();

        dataTransfer.items.add(signatureFile);
        this.inputTarget.files = dataTransfer.files;

        event.target.submit();
      });
    }
}

Explanation of the Stimulus Controller

static targets = ["canvas", "input"]: Defines the elements our controller interacts with.
connect(): Initializes signature_pad on the canvas element.
disconnect(): Cleans up the signature pad instance when the controller is removed.
clear(): Clears the signature from the canvas when the clear button is clicked.
submit(event):
- Prevents the default form submission.
- Converts the signature drawn on the canvas to a blob.
- Creates a File object and adds it to a DataTransfer instance.
- Assigns the file to the hidden input field so it gets submitted with the form.

Step 3: Set Up the Model

To start, let’s assume we have a Consent model. We will now add an attached signature:

class Consent < ApplicationRecord
  belongs_to :employee

  has_one_attached :signature #Add this line

  validates :first_name, :last_name, :phone_number, :email, :date_signed, presence: true
  validates :accepted, inclusion: { in: [ true ], message: "must be accepted" }
  validates :advisor_authorization, :consent_persistence, :information_confirmation, inclusion: { in: [ true ], message: "must be checked" }
end

Step 4: Update the Form

Now, let's update the consent form to include the signature pad:

<%= form_for @consent, url: wizard_path, method: :put, class: "space-y-6 mb-12", data: { controller: "signature-pad", action: "submit->signature-pad#submit" } do |form| %>

  <div>
    <%= form.label :signature, class: "block text-sm font-normal text-slate-700 mt-8 mb-2" do %>
      Client Signature <span class="text-purple-500">*</span>
    <% end %>
    <% if consent.persisted? && consent.signature.attached? %>
      <%= image_tag consent.signature, class: "max-w-[300px] rounded border border-gray-300 mb-2" %>
    <% end %>
    <%= form.file_field :signature, data: { signature_pad_target: "input" }, accept: "image/png", hidden: true %>
    <%= tag.canvas width: 950, height: 150, data: { signature_pad_target: "canvas" }, class: "rounded-lg border border-gray-300 mb-2 hover:bg-gray-50 cursor-pointer" %>
    <%= tag.div class: "flex justify-between" do %>
      <%= tag.button "Clear", type: "button", data: { action: "signature-pad#clear" }, class: "bg-gray-200 hover:bg-gray-300 text-gray-500 px-2 py-1 rounded" %>
    <% end %>
  </div>

  <div class="w-1/2 mt-2">
    <%= form.label :date_signed, class: "block text-sm font-normal text-slate-700" do %>
      Date signed <span class="text-purple-500">*</span>
    <% end %>
    <div class="mt-1">
      <%= form.date_field :date_signed, class: "block w-full rounded-lg border-slate-200 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
      <% if consent.errors[:date_signed].any? %>
        <p class="mt-2 text-sm text-red-600"><%= consent.errors[:date_signed].join(", ") %></p>
      <% end %>
    </div>
  </div>

  <div class="flex justify-between mt-16">
    <%= link_to "Go back", previous_wizard_path, class: "px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-md hover:bg-gray-100" %>
    <%= form.submit "Next step", class: "px-6 py-2 text-sm font-medium text-white bg-purple-500 rounded-md hover:bg-purple-600 focus:outline-none focus:ring focus:ring-purple-300 cursor-pointer" %>
  </div>
<% end %>

How the Form Uses the Stimulus Controller

data: { controller: "signature-pad", action: "submit->signature-pad#submit" }: Attaches the Stimulus controller to the form and links the submit action to the submit method in the controller.
Canvas Element (data: { signature_pad_target: "canvas" }): This allows the controller to find the canvas for drawing signatures.
Hidden File Input (data: { signature_pad_target: "input" }): Stores the converted signature as an image file for form submission.

Step 5: Testing the Signature Pad

Start your Rails server:

bin/rails server

Navigate to your form page and test drawing a signature. When you submit, the signature should be stored as an attached file in your database.

Conclusion

In this tutorial, we integrated signature_pad into a Rails 8 application using Stimulus, Tailwind CSS, and PostgreSQL. We built a consent form where users can draw their signatures, store them in Active Storage, and submit them as part of their agreement. This approach can be extended to any document signing feature in a Rails app!

Happy coding! 🚀

Sending Emails in Rails Applications with Resend and Devise.

Engr. Promise — Mon, 13 Nov 2023 11:53:43 +0000

In one of the projects I worked on for a client, I needed to configure an email service for the Rails application, and I wanted to try something different than the standard SendGrid or Gmail smtp configurations.
My client had already provided domain-specific emails from Namecheap, and I wanted to set up the configuration using those customized domain emails.

I asked a coworker, who suggested I try Resend. I wasn't sure if it offered any Rails assistance, so I read through the documentation and was surprised to find a Rails section. It was extremely simple to set up with minimal configuration.

For the purposes of this article, I'm assuming you've already configured user authentication with devise.

Resend is a powerful email service that can handle transactional emails, such as password reset emails or email confirmations, which are often required in a Devise setup. In this article, we'll walk you through how to integrate Resend with Devise in a Rails application.

You can visit Resend and sign up for an account.

Step 1: Install Resend Gem

First, you need to install the Resend gem. You can do this by running the following command:

gem install resend

Step 2: Configure Resend

Next, you need to configure Resend with your API keys. This is typically done in an initializer, create a resend.rb file inside the config/initializers :

# config/initializers/resend.rb
Resend.api_key = "your-api-key"

To generate your api_key, you can navigate to the API key section and create an api_key, kindly copy it and save it somewhere.

Replace "your-api-key" with the API key you received from Resend. You can find your API key in the Resend dashboard.
This would be bad practice to push our api_key to github, so we would be using the rails credentials.

EDITOR="code --wait" rails credentials:edit

This would open the credentials.yml file in your vscode, simple add your api_key like this:

resend:
  api_key: your_api_key_goes_here

Step 3: Set Up Email Delivery Method

After that, you need to set up the email delivery method in your Rails application. This is done by configuring the action_mailer settings in your environment configuration files. Here's how you can do it:

# config/environments/production.rb
config.action_mailer.perform_deliveries = true
config.action_mailer.raise_delivery_errors = true
config.action_mailer.default_url_options = { host: "this_is_your_domain.com", protocol:"https" }
config.action_mailer.delivery_method = :resend

Step 4: Configure Devise

In order to use Resend with Devise, you need to configure Devise's mailer to use the correct delivery method. This is done in the Devise initializer:

# config/initializers/devise.rb
config.mailer_sender = 'promise@this_is_your_domain.com'

Replace the email address with the email address you want to use for sending emails.

For my case i have my domain from Namecheap, so let us do some more settings to make this work.
On the domain section on Resend, let us add our domain.

After adding a domain, you would need to verify it by setting up MX record and TXT record on your Namecheap Advanced DNS settings. Resend would provide this records and you only need to copy to your Namecheap Advanced DNS.

Once it is all green, then it should work as expected. You can test and see it works great.

Finally, you can test if the email sending works by triggering an email send. For example, you can try resetting a user's password, which should send a password reset email to the user's email address.

Conclusion
In this article, we went through how to set up Resend with Devise in a Rails application. While this guide should cover most use cases, always refer to the official documentation of Resend and Devise for the most accurate information. If you encounter any issues during the setup process, don't hesitate to leave a comment or ask a question. We're here to help!
If this was helpfull, kindly leave a comment.

Consuming Other APIs in a Rails App.

Engr. Promise — Sat, 22 Apr 2023 16:51:48 +0000

Ruby on Rails is a popular web framework for building web applications and APIs. It is widely used by developers due to its ease of use, convention over configuration approach, and robust features. Rails is known for its quick development time, which makes it a go-to framework for startups and developers who want to build prototypes quickly.

Rails is also used extensively for building APIs. APIs are essential for applications that require integration with other services or applications. A well-designed API makes it easy to interact with the application or service programmatically. Rails has built-in support for building APIs, which makes it a popular choice for developers.

However, consuming other APIs in a Rails application can be challenging compared to JavaScript, React, or Node applications. The challenges are primarily due to the differences in the way these frameworks handle asynchronous requests and data processing.

JavaScript and React are known for their ability to handle asynchronous requests and data processing seamlessly. This is because JavaScript and React use client-side code to handle these requests, making it easy to build fast and responsive web applications. Node, on the other hand, is known for its ability to handle large-scale applications that require a lot of data processing.

Rails, on the other hand, is a server-side framework that relies on traditional server-side processing. This means that Rails applications need to send requests to other APIs and wait for the response before processing the data. This can slow down the application and make it less responsive.

Another challenge of consuming other APIs in Rails applications is the need to parse and transform data into the required format. Unlike JavaScript and React, which can handle JSON data easily, Rails requires more effort to parse and transform data. This is because Rails relies on Ruby's built-in parsing libraries, which may not be as efficient as JavaScript's parsing libraries.

To overcome these challenges, Rails developers can use libraries and gems that simplify the process of consuming APIs. Some popular gems for consuming APIs in Rails include HTTParty, Faraday, and RestClient. These gems provide a simple and easy-to-use interface for sending requests and processing responses.

In conclusion, while Rails is an excellent framework for building web applications and APIs, consuming other APIs in Rails applications can be challenging compared to JavaScript, React, or Node applications. However, by using the right libraries and gems, Rails developers can overcome these challenges and build fast and responsive applications that integrate seamlessly with other services and applications.

If you have never implemented an external API in your rails Application, then you are in the right place as i will be showing you just how to work with other APIs in your Rails APP.
For this tutorials, We will be working with the popular News API that i can across while learning NextJs by building a Daily News web App.

You can signup at News API and get a free API key that we will be using for this tutorial.

Create a new Rails app using the following command:

rails new news-api-app

Go into the newly created app directory:

cd news-api-app

Open the Gemfile and add the 'news-api' gem:

gem 'news-api'

Run bundle install to install the new gem:

bundle install

Create a new file named 'news_api.rb' in the 'config/initializers' directory. This file will be used to initialize the News API object:

# config/initializers/news_api.rb

NewsApi = News.new("YOUR_API_KEY")

Replace "YOUR_API_KEY" with your actual News API key.

Create a new model named 'news_article' using the following command:

rails g model news_article title:string description:text url:string source:string published_at:datetime

Run rails db:migrate to create the news_articles table in the database.

Edit the 'news_article.rb' file and add the following line at the top to include the NewsApi module:

require_relative '../../config/initializers/news_api'

class NewsArticle < ApplicationRecord
    def self.get_news_articles
        # Use the NewsApi class here
        NewsApi.get_news
    end
end

Create a new controller named 'news_controller' using the following command:

rails g controller news index

This will create a controller file and a view file for the index action.

Edit the 'news_controller.rb' file and add the following code to the index action:

class NewsController < ApplicationController
  def index
    articles = NewsApi.get_top_headlines(country: 'us')
    @news_articles = articles.map do |article|
      NewsArticle.create(title: article.title, description: article.description, url: article.url, published_at: article.publishedAt)
    end
  end
end

This code fetches the top headlines for the country 'us' using the News API, creates a new news article object for each article, and stores it in the @news_articles instance variable.

Edit the 'index.html.erb' file and add the following code to display the list of news articles:

<% @news_articles.each do |article| %>
  <div>
    <h2><%= article.title %></h2>
    <p><%= article.description %></p>
    <p>Source: <%= article.source %></p>
    <p>Published at: <%= article.published_at %></p>
  </div>
<% end %>

This code loops through the @news_articles instance variable and displays the title, description, source, and published date of each news article.

Run rails server to start the app, and navigate to http://localhost:3000/news to see the list of news articles fetched from the News API.

That's it! You now have a simple Rails app that fetches a list of news from the News API and displays them on a web page.

You can also test it out in your rails console to see just how the data looks. In your terminal, run:

rails c

Then run this line of code:

articles = NewsApi.get_top_headlines(country: 'us')

irb(main):017:0> articles = NewsApi.get_top_headlines(country: 'us')
=> 
[#<Everything:0x000000010b37b3b8
...
irb(main):018:0>

if you run "articles" in your rails console, you should get an array of news articles.

I hope this was helpful.
Happy Coding!!!

Build Your First Rails API

Engr. Promise — Thu, 05 Jan 2023 00:52:43 +0000

In this article i am going to quickly show you how you can build a simple rails api. This will give you an idea of what building API entails.
I am going to make this as simple as possible so that you understand the basics.
The api end point that we will be building will get us a random greetings.
Lets dive in and get our hands dirty.
First, you will need to create a Rails API app by running the following command:

rails new my_api --api --database=postgresql

We will need to create the database by running

rails db:create

Next, you will need to create a model for your greetings table by running the following command:

rails g model Greeting content:string

Run the following command to create the table in your database:

rails db:migrate

Next, you will need to seed your database with some greeting data. You can do this by adding the following lines of code to the db/seeds.rb file:

Greeting.create(content: "Hello")
Greeting.create(content: "Hi")
Greeting.create(content: "Good morning")
Greeting.create(content: "Good afternoon")
Greeting.create(content: "Good evening")

Run the following command to seed your database:

rails db:seed

Now you can create your API endpoint. In your config/routes.rb file, add the following line of code:

get '/random_greeting', to: 'greetings#random'

Create a GreetingsController by running the following command:

rails g controller Greetings

In your app/controllers/greetings_controller.rb file, add the following action:

def random
  greeting = Greeting.order("RANDOM()").first
  render json: { greeting: greeting.content }
end

Now when you make a GET request to the '/random_greeting' endpoint, it will return a JSON response with a random greeting from your table.
I hope this helps! Let me know if you have any questions.

How to save to Local storage

Engr. Promise — Sat, 31 Dec 2022 10:59:06 +0000

Introduction

Saving data to local storage is a useful way to persist data in a web application. Local storage allows you to store data in the user's browser, which means that the data is available even if the user closes the browser or navigates to a different website. This can be useful for storing user preferences, temporary data, or any other information that you want to make available across sessions.

In this article, we will look at how to save data to local storage using JavaScript. We will start by looking at the basics of local storage, including how to set and get values. We will then explore some more advanced techniques, such as storing complex objects and handling errors.

Basics of Local Storage

To use local storage in JavaScript, you first need to check if the browser supports it. You can do this using the following code:

if (typeof(Storage) !== "undefined") {
  // local storage is supported
} else {
  // local storage is not supported
}

If local storage is supported, you can use the following methods to set and get values:

// set a value
localStorage.setItem("key", "value");

// get a value
var value = localStorage.getItem("key");

You can also remove a value from local storage using the removeItem method:

localStorage.removeItem("key");

You can also clear all values from local storage using the clear method:

localStorage.clear();

Storing Complex Objects

Local storage only allows you to store strings, so if you want to store complex objects (such as arrays or objects), you will need to serialize them first. You can use the JSON.stringify method to serialize an object, and the JSON.parse method to deserialize a string back into an object.

For example, to store an array in local storage, you could do the following:

var array = [1, 2, 3];

// serialize the array
var serializedArray = JSON.stringify(array);

// store the serialized array in local storage
localStorage.setItem("array", serializedArray);

To retrieve the array from local storage, you would do the following:

// get the serialized array from local storage
var serializedArray = localStorage.getItem("array");

// deserialize the array
var array = JSON.parse(serializedArray);

Handling Errors

There are a few potential errors that you may encounter when working with local storage. One common error is trying to store too much data. Local storage has a limited size (usually around 5MB), and if you try to store more data than the available space, you will get a QuotaExceededError.

To handle this error, you can catch it using a try/catch block and display an error message to the user:

try {
  localStorage.setItem("key", "value");
} catch (e) {
  if (e.name === "QuotaExceededError") {
    alert("Error: Local storage is full.");
  }
}

Another potential error is trying to access local storage when it is disabled. This can happen if the user has disabled

A Quick Overview of TypeScript

Engr. Promise — Fri, 30 Dec 2022 10:44:06 +0000

TypeScript is a programming language that is a super set of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. TypeScript was developed and is maintained by Microsoft and was first released in 2012. It has gained widespread adoption in the developer community due to its ability to add type checking and other features to JavaScript.

One of the main benefits of using TypeScript is that it can catch errors before you even run your code. This is because TypeScript has a type system that allows you to specify the data types of variables and function parameters, and the compiler will check your code to ensure that you are using the correct types. For example, consider the following JavaScript code:

function greet(name) {
  return "Hello, " + name;
}

console.log(greet(10));

In this code, we are passing a number to the greet function, which expects a string. When this code is run, it will output "Hello, 10", but this is likely not what we intended. With TypeScript, we can specify the type of the name parameter as a string, and the compiler will throw an error if we try to pass anything other than a string:


function greet(name: string) {
  return "Hello, " + name;
}

console.log(greet(10));  // This will cause a TypeScript error

Another benefit of using TypeScript is that it can provide improved code completion and suggestion features in your editor or IDE. This is because the TypeScript compiler has information about the types of variables and functions, and can use this to provide better suggestion when you are writing code.

In addition to adding type checking to your code, TypeScript also includes features such as classes, interfaces, and modules, which are not available in standard JavaScript.

For example, here is how you can define a class in TypeScript:

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeNoise() {
    console.log("Some generic animal noise");
  }
}

const animal = new Animal("Fluffy");
console.log(animal.name);  // Outputs: "Fluffy"
animal.makeNoise();  // Outputs: "Some generic animal noise"

You can also define interfaces in TypeScript, which are contracts that specify the shape of an object. For example:

interface Point {
  x: number;
  y: number;
}

const point: Point = { x: 0, y: 0 };

Modules in TypeScript allow you to organize your code into logical units and can help to prevent naming conflicts. You can define a module like this:

module Shapes {
  export class Triangle {
    // ...
  }
  export class Square {
    // ...
  }
}

const triangle = new Shapes.Triangle();
const square = new Shapes.Square();

In addition to these features, TypeScript also includes support for decorators, which are functions that can be used to modify the behavior of a class or its members. For example:

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(

Why You haven't landed the Tech Job yet!

Engr. Promise — Mon, 24 Oct 2022 12:04:17 +0000

This post is for you if you are just starting out in tech or if you have already begun but haven't landed your first job yet. I was ecstatic when I wrote my first lines of code. I had the idea that I could completely remake the cosmos with just a few lines of code. I've always wanted to have an impact on my community, so discovering how to instruct the computer on what to do, when to do it, and exactly how to do it made me extremely happy.

Seek Mentors

I had the foresight to ask knowledgeable computer experts for advice on which aspects of tech would best suit and appeal to my spirit. After much consideration and researching, I ultimately decided to pursue a career in full stack development, which I did after completing a three-month comprehensive course in UI/UX design. I got off to a good start by looking for and finding a mentor. He explained what it took to become a Fullstack Developer; nevertheless, he did not provide me with enough information to secure my first position.

Learn and Keep Learning.

After dedicating myself to intense personal study and development for almost five months (with only four hours of sleep each day), I felt confident using HTML, CSS, and JavaScript and that I could defy the laws of physics. I had completed 100 hours of Udemy coursework and over 1,000 hours of YouTube videos, and I felt like the King of the North getting ready to sit on the Iron throne made of a thousand blades of algorithms and Data Structures, which I had never been told about.

Stay Positive While learning.

I started applying for tech jobs in front-end development right away, but I was told I wasn't qualified because the position required someone with React experience. I subsequently enrolled in a ReactJS course to further improve my chances of landing the dream position, only to hear that I still needed to learn how to use GitHub and git.
As time went on, I continued to receive rejection emails based on the fact that I lacked other essential abilities. Because I was so concerned, I had to talk to my mentor about it. Before I reveal the answer to your question regarding what happened to the throne of a thousand blades of algorithms and data structures, there is something you should know.

Let's get back on track. Disgusted, defeated, and on the verge of giving up, I made the decision to go meet my mentor to find out why finding a job seemed to be tougher for me than it had been for him. Was he lying to me? Will $5,000 per month ever be mine?

Easy way Out! Join Microverse.

The discussion with my mentor was very different this time. He informed me that although I had a basic understanding of the necessary tools, I still needed to learn about industry standards, which I might only do so through working in the tech industry because numerous YouTube videos could never teach you that. He basically introduced me to Microverse on that crucial day.

Microverse provides a full-time remote web development bootcamp to help graduates prepare for careers in technology. This program emphasizes pair programming and real-time collaboration with students, simulating workplace team dynamics.
Microverse provides each student with an accountability partner and a global support network. Students learn technical skills like JavaScript and HTML and soft skills like cross-cultural communication and remote work best practices.
Microverse full-time web development bootcamp helps students learn practical skills in coding and full-stack development. The program also provides career support services that cover job search skills, interviewing, and resume building.

Learn Algorithm and Data Structures

That day, I returned home and applied for the Microverse program. Since then, Microverse has been the best decision I've ever made in terms of getting into tech.
Learning and solving Algorithms and Data Structures was one of the weekly core activities at Microverse. When I first heard about Algorithms and Data Structures , I was skeptical about why I should try to understand it. Building websites or web applications should not rely solely on my understanding of algorithms and data structures (a misconception I am yet to forgive myself for ). I simply took it for granted and I paid dearly for it.

Build a Great Resume and a good Social Media Presence.

I had already written a good resume by the time I finished the third module of the Microverse curriculum, so I decided to try my luck by applying for jobs on LinkedIn. At this point, I knew I'd improved far beyond my wildest expectations.
I received an email a few days ago with a link to a test for the role I had previously applied for. The test would last for 24 hours. I saw this as an opportunity to land my first job, so I jumped in to take the test without adequate preparation, only to run into algorithms and data structures. The test came with instructions that prevented me from switching browser tabs. I knew exactly what that meant because I once wrote an application that tracks when a user leaves and returns to a browser tab. There was no assistance from KingsLanding (Google) or Dragon Stone (Stack overflow). I did the best I could with what I was knew. I was only able to eventually finish four of the six activities. Algorithms and data structures humble me. At that point, I had figured out what I had been missing all this time. I want to take my algorithm and data structure courses seriously at Microverse.

This was the missing link that has kept many junior and mid-level developers from getting a job. Nobody is going to tell you about it. This is why you will never be able to sit on the Iron Throne.
There are hundreds of resources available to help you learn algorithms and data structures. To begin, you must master the art of problem solving. I urge you to continue working on your data structures and algorithms. Join platforms such as coderbyte, leetcode, and hackerrank. Solve as many as you can as they are building blocks for becoming a better developer.

If you really want to pass coding interviews and land your first job, then you should spend a good amount of time working on data structures and algorithms. It won't only help you ace interviews but it will also make you a better software developer.
I have taken my time to prepare this list of resources to help you get started with data structures and algorithms.

The common sense guide to Data Structure and Algorithm also known as the pragmatic programmer
Master the coding Interview
Top 45 Data Structure
Interview Questions and Answers for 2023
Frontend developer Interview Questions
Frontend Masters

See you at the top.

JavaScript concepts to know before building your First React App

Engr. Promise — Fri, 30 Sep 2022 22:40:15 +0000

There are some important concepts you need to understand before starting out to learning react. They are arrow functions, template literals, object destructuring, fetch, async functions, promise, callbacks, array functions and many more.

The intention of this article is to highlight the JavaScript fundamentals that aspiring React developers should master before actually getting into React. Modern JavaScript features, which were mostly introduced with ES2015, are built upon in React.
React is a library for creating UI components that may be the foundation of both web and mobile applications, as you probably already know. React stands out from some of its rivals since all of its code is written in JavaScript. Even the HTML-like templates are created in JS using JSX, a JS language extension for UI component organization.

Let's move on from the definitions and discuss the JavaScript fundamentals you must master before studying React.
Variables
You must understand how to declare a variable in JavaScript before beginning to use React. There are three ways to declare variables in JavaScript. using const, let, or var. They each have benefits and drawbacks.

Functions
The primary tenet of React is to split large projects into smaller parts or components. And either functions or classes make up those components. Therefore, it is crucial to understand how to declare a function in JavaScript. Similar to variables, a function can be declared in more than two different methods. However, these two are regular function syntax and arrow functions.
Modern codebases almost always use the arrow function, a new ES6 feature that makes the code more clear and succinct. We can use this capability to write functions with a more concise syntax.

Template Literals.
When creating a web application, working with strings is typical. In prior JavaScript (ES5) versions, you had to use the + operator to concatenate (append) a string to a variable. Additionally, it has a poor aesthetic and is challenging to understand. However, using an ES6 template literal, you may now concatenate strings with variables.

Destructuring Assignment
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

let a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: Array [30,40,50]

Array Methods
Array methods in JavaScript are methods for working with arrays. Future usage of these tactics will benefit from understanding how they work. Since you'll find yourself utilizing them regularly once you begin using React to build projects.

Fetch
The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.

fetch('url') //api for the get request .then(response => response.json()) .then(data => console.log(data));

I advise gaining a solid understanding of JavaScript principles before learning React because writing vanilla JavaScript code makes up the majority of React development. You will get off to a much better start with this study approach, I guarantee you.

Meet The Tech Bro

Engr. Promise — Sat, 30 Jul 2022 19:42:49 +0000

When I finished the last Algorithm task for the week, I felt this joy all around me. It was the only task left for me to complete this week in Microverse's first module. DSA (Data Structure and Algorithm) has become a challenge that I must master (Yes, I have, to pass coding interviews). I was relieved when I finally got around to answering the question and having my code pass the auto-grading workflow.

Let me briefly recount my experience at Microverse.
Before Microverse, I had taken HTML CSS and JavaScript courses on Udemy and YouTube. I ended up drowning in tutorial Hell. I was unsure of my ability to create something with what I had learned. I found myself leaping from one YouTube video to another.

AltSchool's participation was appreciated because it helped me develop my thinking and confidence. A turning moment for me was having to review HTML, CSS, and JavaScript once more. The JavaScript tutor( A.K.A Rising) at AltSchool was excellent, and I eventually grasped the fundamentals that I had found difficult to grasp.

At Microverse, the first day was enjoyable. I had a champion's zeal and was prepared to rule the tech world. The true trouble began at this point. I wasn't prepared for Microverse. No, way! I was telling myself that "the is too hard."

The first task at Microverse was unlike anything I'd ever seen. For our project, we needed to set up linters. The Linter test and checks must be passed by the project. In addition, for each project, I had to create a pull request and submit the link for review. If the code does not meet the requirements, a code reviewer will go over it and request changes.

My project kept failing the linter test, and the reviewer kept requesting that I make changes and correct the errors. I became extremely frustrated and wanted to give up. I had used up all of the reviews for that project, and I had already used two of the extra reviews I had. I was only left with one more review request. This was a watershed moment for me. I started looking for help through the various channels that were available to me. I tried numerous solutions until I was able to resolve the issues.

Week two brought its own set of difficulties and challenges, but I persevered. The same goes for weeks three, four, and five. I've learned a lot and improved my problem-solving abilities. My HTML and CSS have improved. I am now completely confident in my abilities. A few things I learned at Microverse have helped redefine my character and technical skills.

The first is learning how to work remotely. Every week, the morning session activity is followed by a stand-up meeting and peer programming activities with a different coding partner. I've had the opportunity to meet people from all over the world.

The use of best practices for HTML, CSS, and JavaScript is the second. Additionally, I've learned how to deploy web pages using Github Pages, greatly enhanced my ability to create user interfaces (UIs) that can adapt to various screen sizes using Media queries, and used JavaScript to manipulate the DOM.

My experience has truly been amazing, wow. I've been gaining knowledge at AltSchool and boosting my self-confidence at Microverse.

I'm eager to learn what the upcoming Microverse module will bring. Additionally, I am ready to begin the new phase with AltSchool. I'm going to pick up a new programming language.
Yes, I forgot to mention that at AltSchool, I switched to the backend. For the backend, I'll be leaning toward Python.

Don't worry about me. I pick things up very quickly. Do not bother asking me how I intend to accomplish this. With God on my side, I know I will, and I am prepared to do anything to succeed.

If you're a total beginner and you're reading this and want to get into tech, I'd suggest checking out AltSchool . If you have some prior experience, you could try Microverse

I welcome new connections and opportunities to succeed. I will be posting tech articles frequently, so you can follow me on LinkedIn and Twitter .

Cheers to a new adventure!

How to fix `create-react-app` 4.0.3, which is behind the latest release (5.0.0)

Engr. Promise — Mon, 21 Mar 2022 10:17:03 +0000

Good day, guys!. I'm attempting to make a new rectjs project using npx create-react-app my-app today. However, I am experiencing the following issue: You're using create-react-app 4.0.3, which is older than React-most recent release (5.0.0).
If you started learning React last year, you may have encountered this issue when using 'npx create-react-app' to build a react app as a result of the recent change from 4.0.3 to 5.0.0. You'll most likely see a message on your terminal stating that you're running 'create-react-app' 4.0.3, which is older than the most recent release (5.0.0). As a newbie, this would put you on edge and cause you to be concerned about how to remedy it.
Even after attempting to uninstall the previous version several times, it continues to throw back the same error. Here is an easy fix for you to consider. I'll go over the options with you here.
Let's get started on fixing this error without spending any time.
So, here's the problem you're seeing on your computer: You're using version 4.0.3 of 'create-react-app,' which is out of date (5.0.0)

Solution 1
First of all clear cache by running this command: npx clear-npx-cache or try the command npm cache clean --force using administrator mode in your terminal. Finally delete everything left (that is if there is any) from this path: C:\Users\Your_user_name\AppData\Roaming\npm-cache.
Solution 2
Create your app with the latest version of 5.0.0 with this command: npx create-react-app@5.0.0 my-app. Now, Your error must be solved.
Hope this solution was helpful a lot. Comment below Your thoughts and your queries. Also, Comment below if this solution worked for you.

Blockchain Technology: Web 3.0 Developer Roadmap

Engr. Promise — Wed, 10 Nov 2021 14:11:45 +0000

What is Blockchain technology? Have you ever used Google docs or Google sheets? Well if you have then you might as well be able to understand what Blockchain technology is all about. Try not to get this all confused as I will elaborate more on the comparison.

Google Sheet is an excellent contrast for a better grasp of what blockchain technology is. When we generate a document and share it with a group of individuals, it is disseminated rather than replicated or moved. This results in a decentralized distribution network in which everyone has simultaneous access to the document. While another party adds changes to the document, no one is locked out, and all changes are monitored in real-time, making them entirely transparent.

Blockchain is more involved than a Google Sheet, and it highlights three key concepts. The first important concept is that Blockchain is a database for storing encrypted data blocks and connects them to create a chronological single-source-of-truth for the data. Secondly, digital assets are disseminated instead of duplicated or moved, producing an immutable record of the various resources and lastly the asset is decentralized, allowing for real-time public accessibility and transparency. A visual record of alterations protects the document's integrity, fostering trust in the asset. Blockchain's inherent security characteristics, as well as the fact that it is a public ledger, make it a perfect option for almost any business.

Blockchain technology is a promising and revolutionary technology because it minimizes risk, eliminates fraud, and enables transparency for many applications. An organized method will greatly accelerate your learning if you want to become a Web 3.0 Blockchain developer. Allow me to provide you with a road map that will undoubtedly guide you to your destination!

Web 3.0 Blockchain developer Requirements

Learn a Programming Language

To begin your journey as a blockchain developer, you should be familiar with JavaScript as well as web development in general. If you don't have this prerequisite don’t panick. This is a good time to take a step back and learn about web programming. There are a plethora of excellent courses and tutorials available. You won't have any trouble locating suitable course. JavaScript is a very powerful language that allows you to make your website more interactive by adding functionality to you web applications. JavaScript is a versatile, beginner-friendly, and compact scripting language with a lot of flexibility. A very good place to start is at freecodecamp. and W3schools.

Learn the fundamentals of blockchain technology.

Blockchains are a fantastic piece of technology, but they aren't easy to understand. To comprehend what you'll subsequently build on, you'll need to devote some time to it. Starting here is an excellent idea. To further understand check here

After learning this, you should have a basic understanding of blockchain technology. This is a fantastic starting point for your future studies.

Learn Smart Contracts and Learn Solidity

The blockchain is programmed using smart contracts. They are pieces of code that have been distributed on the blockchain and are written in a language that blockchain nodes can execute.
Smart contracts can accomplish practically everything from fungible and non-fungible coins to the backend of your next decentralized app. They're not like the code you're used to writing, though. They'll account for a significant percentage of your future job, so get to know them. Here's a decent primer on Solidity.

There are a lot of blockchains out there, and practically every one of them has its manner of creating smart contracts. On the other hand, Solidity is the programming language of the Ethereum virtual machine, which is used in several other blockchains.
Solidity isn't only useful for Ethereum. It will also assist you in the development of smart contracts on other blockchains. Solidity developers have by far the most job opportunities. Many companies are building or planning to develop on Ethereum.
You need to know how gas works and how each line of code you write in Solidity influences the price of your smart contract's execution. There's no getting around it. Unfortunately, some businesses optimize their gas use aggressively.
You'll need to understand how to optimize your code if you want to work in this profession because proper optimization may save millions of dollars each year for a frequently utilized app or contract. It will be a component of your work and a big part of individual interviews.
Curious? Crypto Zombies is a fantastic way to get started with Solidity. You learn by playing a game. Is there anything greater than this?

Learn how to use the blockchain as an interface

Your frontend and smart contracts implemented on the blockchain are the two components of decentralized apps. You'll have to interface with the blockchain for your frontend to communicate with it. Libraries come in handy in this situation.
There are two important basic ways to interface with Ethereum API-based blockchains, and these:
• Web3.js
• ethers.js
Choose one and master it thoroughly. It'll come in handy. From now on, it will be one of your most useful tools.

Conclusion

It may appear not easy to learn Web3.0 and blockchain programming, but everyone can accomplish it. While rapid adoption of Web 3.0 is still a long way off, we can see the beginnings of its potential. The internet uses blockchain to advance towards the subsequent development of the web, from bitcoin to smart gadgets. While some of these developments may appear perplexing to people outside the technology industry, there is no need to be concerned about all of them happening at once. Changes to the internet take time and money to produce, so they are frequently slow and incremental, giving the ordinary user time to learn and adapt.
Start with the basics of computer science, JavaScript, Solidity, and cutting-edge DeFi applications.
Blockchain Development is not something you can learn in a week, but you can learn in a year if you put in the effort.

Props and State in React Components

Engr. Promise — Sat, 06 Nov 2021 14:57:03 +0000

It is essential you have a good understanding of props and States in both functional and class components. props influences what is rendered in the screen. props are optional input that your components can accept and allows the components to be dynamic.
Props and State holds information that influences the UI in your browser.
Props is just an object that contains the attributes and their values which has been passed from their parent components.
Props are immutable. Since they are immutable how do we maintain components data that might change over time? The answer lies in using State.

Components States.
Another way to influence what is rendered on the screen is the state of the components.

✓Props get passed to the components while state is managed within the component.
✓Props are functions parameters whereas the state are variables declared in the function body.
✓Props immutable Warehouse States can be changed.
✓In functional components props are assessed using the "props" parameter and in-class components using "this.props", where is estate they are assessed using the useState Hook in functional components and "this.state" in class components.