DEV Community: Opuama Lucky

The rise of Supabase vs Firebase

Opuama Lucky — Sat, 04 Oct 2025 12:34:42 +0000

Every developer wants the same thing from a Backend-as-a-Service (BaaS) platform. You don’t want to spend endless time wrestling with configuration just to get a project done. You need authentication that actually works, a database that makes sense, real-time updates that don’t require a PhD to implement, storage for files, auto-generated APIs, and security rules that protect your users without slowing you down.

The problem is that many platforms give this all-in-one, promising backend experience, but developers often run into complex integrations, vendor lock-in, and performance bottlenecks. Building an outstanding user experience requires a strong backend infrastructure, but building that infrastructure diverts time and resources from actual product development. This tension creates several interconnected challenges that developers face daily.

This is the point where Supabase has risen to challenge Firebase's dominance. Two platforms that attempt to simplify the backend story, but with very different philosophies.

What solutions exist today?

Supabase, an open-source Backend-as-a-Service (BaaS) platform built on PostgreSQL, gives you access to a powerful relational database that makes it easy to manage complex relationships and transactions. Supabase abstracts away backend setup by providing authentication, a relational database, real-time capabilities, auto-generated REST and GraphQL APIs from your schema, edge functions, storage, the freedom to self-host, and a developer-friendly UI.

Firebase, a Google-owned platform, has evolved into a comprehensive ecosystem supported by Google Cloud. With its ability to streamline app development for developers, it has become the go-to plug-and-play option for startups, mobile apps, and prototypes that require speed and scalability. Its solutions abstract away backend setup by offering Cloud Firestore (a document-oriented NoSQL database), Authentication, Cloud Storage for files, Cloud Functions for backend logic, fast static and dynamic site hosting with a global CDN, Analytics and Monitoring for app health, and even pre-built ML models for tasks like text recognition and image labeling.

Tradeoffs

Both platforms have their own tradeoffs, Supabase being open-source and Firebase closed-source are two separate ecosystems with different philosophies. Firebase's main setback is vendor lock-in, meaning migrating would be like rebuilding the whole backend from scratch, which is very painful once your project is deeply integrated. NoSQL promises flexibility and scalability suitable for applications like Facebook and Twitter, but not always suitable for working with applications that involve complex relational data. Firestore doesn’t support running complex queries joining data across multiple collections. Most times, you need a third-party service. Additionally, the pricing model becomes unpredictable as you utilize the platform.

Supabase tends to shine where Firebase struggles, positioning itself as an open-source Firebase alternative. Being built on PostgreSQL, it provides a familiar relational model that handles complexity to your satisfaction and solves the problem of NoSQL, giving developers access to the power of SQL, complex joins, transactions with full ACID compliance, and a strong ecosystem of powerful extensions like PostGIS for geospatial data and pgvector for AI applications.

Every component of Supabase is open source. PostgreSQL for the database, PostgREST for APIs, GoTrue for authentication, Kong for the API gateway, and Realtime for WebSocket connections. This eliminates the need to write and maintain boilerplate API code. With this approach, developers can achieve the rapid development speed of a BaaS platform combined with the power, flexibility, and data integrity of a traditional SQL database.

That said, its openness also comes with tradeoffs. Supabase is still a newer platform with a smaller, evolving ecosystem. While the option to self-host offers control, it also comes with added operational and maintenance costs.

Benefits and Limitations

Reading through this article, you can easily state both the benefits and limitations of each platform. To make things clearer, the table below explains the benefits and limitations of Supabase and Firebase, utilizing their features.

Features	Supabase	Firebase
Database Model	A relational database built on PostgreSQL	A document database built on Cloud Firestore
Authentication	GoTrue handles auth with JWTs, supporting email, social logins, and third-party providers	Full-featured auth, social logins, custom claims, enterprise-ready
Storage	File storage with database integration	Cloud Storage backed by Google Cloud
Vendor lock-in	Provides self-hosting capabilities	Locked into Google’s ecosystem
Learning Curve	Requires SQL knowledge for complex queries	Easy for beginners, minimal database knowledge needed
APIs	Auto-generated REST and GraphQL from schema	Community solution only
Hosting/Functions	Edge Functions for serverless compute	It has Cloud functions, deeply integrated into Google Cloud
Pricing	Predictable, but hosting adds complexity	Pay-as-you-go model that can become expensive at scale
Use Case	Great for apps needing relational data, enterprise-grade, SQL-based workflows	Great for startups, prototypes, mobile apps, and rapid scaling

Conclusion

As the BaaS landscape continues to evolve, the key lies in understanding your application’s specific constraints and choosing the platform that solves your most critical challenges. The rise of Supabase vs. Firebase matters today because it marks an important moment in the growth of developer tools. Both platforms reduce the burden of backend maintenance, but they represent two different philosophies. Firebase offers a fully managed, plug-and-play ecosystem, while Supabase delivers open-source flexibility powered by relational depth.
The rising popularity of Supabase and the sustained dominance of Firebase illustrate how the BaaS market is shaping the future of app development, enabling faster iteration, more accessible tooling, and greater freedom of choice.
In short, the rise of Supabase vs. Firebase highlights not only where backend development stands today but also where it’s heading: toward simplicity, flexibility, and ecosystems that empower developers to build at the speed of modern demand.

How Implement Two-Factor Authentication with Node.JS and otplib

Opuama Lucky — Mon, 05 Aug 2024 05:35:53 +0000

How to Implement Two-Factor Authentication with Node.js and otplib

Have you ever been concerned that hackers might gain access to your internet accounts? With two-factor authentication (2FA), you can put those concerns to rest. 2FA is a secret weapon for adding an additional layer of protection.

This article will show you how to simply integrate 2FA in your Node.js applications with otplib, providing users with effective security and peace of mind. Prepare to increase your app's security and user trust!

Understanding Two-Factor Authentication

Two-factor authentication (2FA), also referred to as two-step verification or dual-factor authentication, is a strong security measure requiring users to provide two different authentication factors to confirm their identity.

When 2FA is activated, you'll be asked to enter an extra code sent to your mobile phone, a token generated by Google, or another designated source, along with your password during the sign-in process. This added step significantly boosts the security of your account, making it far more challenging for hackers to gain access, even if they've obtained your password.

Importance of 2FA

A strong password can assist in protecting your accounts and data security, but in the event of a data breach, you need an additional layer of protection. This is where 2FA comes in. Here are some compelling reasons why you need 2FA:

Safeguards Your Online Accounts: 2FA protects your online accounts from unauthorized access.
Adds an Extra Layer of Security: 2FA goes beyond just a username and password, making it much more difficult for hackers to breach your accounts.
Enhances Consumer Confidence: Implementing 2FA boosts consumer confidence in organizations and their offerings, fostering deeper customer relationships and a favorable brand image.
Offers Heightened Protection Against Evolving Threats: 2FA provides enhanced protection against evolving cyber threats, allowing you to proactively outmaneuver potential attackers.
Provides Peace of Mind: Knowing that your accounts have an additional security measure in place gives you peace of mind.

Now, let's move on to the development phase.

Setting Environment

Run the following command to create and change into a directory:



mkdir 2FA

cd 2FA



npm init

This command prompts you for several things, such as the name and version of your application.



npm install express body-parser otplib qrcode speakeasy

This command installs Express and all the necessary dependencies to run this application, which are explained below:

express: Express is a framework for creating web servers and managing HTTP requests and responses.
body-parser: Body-parser is an Express middleware that parses incoming request bodies before passing them on to handlers, making them available via the req.body property. It is also used to decode JSON and URL-encoded data.
otplib: The OTP (One Time Password) Library allows you to generate and verify one-time passwords.
qrcode: QRCode is a package for creating QR codes. t enables you to generate QR codes that can be used to encode information such as URLs, text, or other data, which can be scanned by a QR code reader or smartphone camera.
speakeasy: Speakeasy is a library that generates and verifies one-time passwords. It also has features like creating backup codes and interacting with other authentication techniques.

User Registration

Now that all our dependencies are successfully installed, create a new folder public with the file index.html and add the following code:



<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>2FA Authentication</h1>
    <h2>Register</h2>
    <form id="register-form">
      <input
        type="text"
        id="register-username"
        placeholder="Username"
        required
      />
      <input
        type="password"
        id="register-password"
        placeholder="Password"
        required
      />
      <button type="submit">Register</button>
    </form>
    <p class="top-p">Have an account? <a href="login.html">Login</a></p>
    <div id="message"></div>
    <div id="qr-code"></div>
    <script src="app.js"></script>
  </body>
</html>

The code above creates a simple registration page for your app. Next, create a new file in the same public directory called login.html and add the following code:



<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2FA Authentication</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <h1>2FA Authentication</h1>
        <h2>Login</h2>
        <div id="message"></div>
        <form id="login-form">
          <input
            type="text"
            id="login-username"
            placeholder="Username"
            required
          />
          <input
            type="password"
            id="login-password"
            placeholder="Password"
            required
          />
          <button type="submit">Login</button>
        </form>
        <script src="app.js"></script>
      </body>
    </html>
  </head>
</html>

The code above creates the login page. One last page is needed to complete your frontend design. Create a new file in the same directory project/verify.html and add the code below:



<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2FA Authentication</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <h1>2FA Authentication</h1>
        <h2>Verify 2FA</h2>
        <div id="message"></div>
        <form id="verify-form">
          <input
            type="text"
            id="verify-username"
            placeholder="Username"
            required
          />
          <input
            type="text"
            id="verify-token"
            placeholder="2FA Token"
            required
          />
          <button type="submit">Verify</button>
        </form>
        <script src="app.js"></script>
      </body>
    </html>
  </head>
</html>

This code creates the page for verifying registered users. Now, enhance your frontend design by adding styles. Create a new file named style.css in your project directory and add the following code:



body {
  font-family: Arial, sans-serif;
  margin: 10rem 25rem;
  justify-content: center;
  text-align: center;
  background-color: snow;
}

form {
  margin-bottom: 10px;
}

input[type="text"],
input[type="password"] {
  border-radius: 10px;
  align-items: center;
  outline: none;
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%;
}

button[type="submit"] {
  position: absolute;
  border-radius: 10px;
  align-items: center;
  outline: none;
  margin: 5px 10px 10px -130px;
  padding: 10px;
  width: 20%;
}

#qr-code {
  margin-top: 10px;
}

p.top-p {
  margin-top: 55px;
}

p {
  margin-top: 5px;
}

#message {
  color: red;
}

Enabling 2FA

To confirm that you have all dependencies installed, open your package.json file and you should see the exact image below:

If you have all of this in your JSON file, you're good to go. Now, create a new file named index.js and paste the following code into it:



const express = require("express");
const bodyParser = require("body-parser");
const otplib = require("otplib");
const qrcode = require("qrcode");
const path = require("path");
const crypto = require("crypto");

const app = express();
app.use(bodyParser.json());

const users = {};

This code sets up the necessary libraries required to handle your 2FA and establishes a local storage to store user information when a user wants to register.

Generating Secret Key

Since you have all the dependencies needed to run this application, you can generate your secret key without any errors. To generate a secret key, add the following code to your index.js file.



app.post("/register", (req, res) => {
  const { username, password } = req.body;
  if (users[username]) {
    return res.status(400).send("User already exists");
  }

  const secret = otplib.authenticator.generateSecret();
  users[username] = { password, secret };
});

The above code generates a secret key using the otplib library in the register endpoint.

Verifying 2FA

To verify your 2FA code, you'll need to extend the current setup to include a route for verifying the OTP (One-Time Password). Now, update your index.js file with the code below:



app.post("/register", (req, res) => {
  const { username, password } = req.body;
  if (users[username]) {
    return res.status(400).send("User already exists");
  }

  const secret = otplib.authenticator.generateSecret();
  users[username] = { password, secret };

  qrcode.toDataURL(
    otplib.authenticator.keyuri(username, "MyApp", secret),
    (err, imageUrl) => {
      if (err) {
        return res.status(500).send("Error generating QR code");
      }
      res.send({ secret, imageUrl });
    },
  );
});

app.post("/verify-2fa", (req, res) => {
  const { username, token } = req.body;
  const user = users[username];

  if (!user) {
    return res.status(400).send("User not found");
  }

  const isValid = otplib.authenticator.check(token, user.secret);
  if (!isValid) {
    return res.status(401).send("Invalid 2FA token");
  }

  res.send("2FA verification successful");
});

The code above accomplishes several tasks: it creates a URI using the secret key, generates a QR code, and converts it into an image with the help of the URI. Also, the verify-2fa endpoint verifies the 2FA token provided by users. It extracts the username and token, retrieves user data, and utilizes otplib to verify the 2FA token.

Utilizing Backup Codes

The backup code serves as an alternative method to authenticate in case a user loses access to their primary 2FA device. These codes are provided to users as a last resort and should be kept confidential. To implement this, navigate to the index.js file and update the code with the following:



function generateBackupCodes() {
  const codes = [];
  for (let i = 0; i < 10; i++) {
    codes.push(crypto.randomBytes(4).toString("hex"));
  }
  return codes;
}

app.post("/register", async (req, res) => {
  const { username, password } = req.body;
  if (users[username]) {
    return res.status(400).send("User already exists");
  }

  const hashedPassword = password;
  const secret = otplib.authenticator.generateSecret();
  const backupCodes = generateBackupCodes();
  users[username] = { password: hashedPassword, secret, backupCodes };

  qrcode.toDataURL(
    otplib.authenticator.keyuri(username, "MyApp", secret),
    (err, imageUrl) => {
      if (err) {
        return res.status(500).send("Error generating QR code");
      }
      res.send({ secret, imageUrl, backupCodes });
    },
  );
});

app.post("/verify-2fa", (req, res) => {
  const { username, token } = req.body;
  const user = users[username];

  if (!user) {
    return res.status(400).send("User not found");
  }

  const isValid = otplib.authenticator.check(token, user.secret);
  if (!isValid) {
    const backupCodeIndex = user.backupCodes.indexOf(token);
    if (backupCodeIndex === -1) {
      return res.status(401).send("Invalid 2FA token or backup code");
    }

    user.backupCodes.splice(backupCodeIndex, 1);
  }

  res.send("2FA verification successful");
});

The updated code generates backup codes and sends a response if user registration is successful.

Integrating User Authentication Flow

To integrate the user authentication workflow, create a file named app.js in your project directory and add the following code:



document.addEventListener("DOMContentLoaded", () => {
  const registerForm = document.getElementById("register-form");
  const loginForm = document.getElementById("login-form");
  const verifyForm = document.getElementById("verify-form");
  const messageDiv = document.getElementById("message");
  const qrCodeDiv = document.getElementById("qr-code");

  if (registerForm) {
    registerForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      const username = document.getElementById("register-username").value;
      const password = document.getElementById("register-password").value;

      try {
        const response = await fetch("/register", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ username, password }),
        });

        if (response.ok) {
          const data = await response.json();
          qrCodeDiv.innerHTML = `
            <img src="${data.imageUrl}" alt="QR Code">
            <p>Secret: ${data.secret}</p>`;
          messageDiv.innerHTML = `
            <p>Registration successful.</p>
            <p>Backup Codes (keep these safe):</p>
            <ul>${data.backupCodes.map((code) => `<li style="list-style-type: none;">${code}</li>`).join("")}</ul>`;
        } else {
          const error = await response.text();
          messageDiv.innerText = `Error: ${error}`;
        }
      } catch (error) {
        messageDiv.innerText = `Error: ${error.message}`;
      }
    });
  }

  if (loginForm) {
    loginForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      const username = document.getElementById("login-username").value;
      const password = document.getElementById("login-password").value;

      try {
        const response = await fetch("/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ username, password }),
        });

        if (response.ok) {
          messageDiv.innerText =
            "Login successful. Redirecting to 2FA verification...";
          setTimeout(() => {
            window.location.href = "verify.html";
          }, 1000);
        } else {
          const error = await response.text();
          messageDiv.innerText = `Error: ${error}`;
        }
      } catch (error) {
        messageDiv.innerText = `Error: ${error.message}`;
      }
    });
  }

  if (verifyForm) {
    verifyForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      const username = document.getElementById("verify-username").value;
      const token = document.getElementById("verify-token").value;

      try {
        const response = await fetch("/verify-2fa", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ username, token }),
        });

        if (response.ok) {
          messageDiv.innerText = "2FA verification successful";
        } else {
          const error = await response.text();
          messageDiv.innerText = `Error: ${error}`;
        }
      } catch (error) {
        messageDiv.innerText = `Error: ${error.message}`;
      }
    });
  }
});

The provided code is designed to manage user interactions on the registration, login, and verification page of your application. It listens for form submissions and executes asynchronous requests to the backend server to handle user registration, login, and 2FA verification processes. Lastly, update your index.js file with the following code:



const express = require("express");
const bodyParser = require("body-parser");
const otplib = require("otplib");
const qrcode = require("qrcode");
const path = require("path");
const crypto = require("crypto");

const app = express();
app.use(bodyParser.json());

const users = {};

function generateBackupCodes() {
  const codes = [];
  for (let i = 0; i < 10; i++) {
    codes.push(crypto.randomBytes(4).toString("hex"));
  }
  return codes;
}

app.post("/register", async (req, res) => {
  const { username, password } = req.body;
  if (users[username]) {
    return res.status(400).send("User already exists");
  }

  const hashedPassword = password;
  const secret = otplib.authenticator.generateSecret();
  const backupCodes = generateBackupCodes();
  users[username] = { password: hashedPassword, secret, backupCodes };

  qrcode.toDataURL(
    otplib.authenticator.keyuri(username, "MyApp", secret),
    (err, imageUrl) => {
      if (err) {
        return res.status(500).send("Error generating QR code");
      }
      res.send({ secret, imageUrl, backupCodes });
    },
  );
});

app.post("/login", (req, res) => {
  const { username, password } = req.body;
  const user = users[username];

  if (!user || user.password !== password) {
    return res.status(401).send("Invalid username or password");
  }

  res.send("Login successful. Please verify with 2FA");
});

app.post("/verify-2fa", (req, res) => {
  const { username, token } = req.body;
  const user = users[username];

  if (!user) {
    return res.status(400).send("User not found");
  }

  const isValid = otplib.authenticator.check(token, user.secret);
  if (!isValid) {
    const backupCodeIndex = user.backupCodes.indexOf(token);
    if (backupCodeIndex === -1) {
      return res.status(401).send("Invalid 2FA token or backup code");
    }

    user.backupCodes.splice(backupCodeIndex, 1);
  }

  res.send("2FA verification successful");
});

app.use(express.static(path.join(__dirname, "public")));

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

The code above presents the complete index.js file in one block for easy reference. Also, a server path was added to access your application.

Testing

Before testing begins, ensure you have Google Authenticator installed on your device.

To start your server, run the following command:



node index.js

The response from the image shows that your server is running successfully. Next, enter http://localhost:3000 in your browser.

The image above demonstrates a successful user registration. You can either scan the QR code or manually input the secret key into your Google Authenticator app. Also, you can use the backup code as a last-resort option.

The image displays the QR code token for tj24. Next, login and input your information as demonstrated in the screenshot below:

The clip above demonstrates a successful verification when using Google Authenticator to scan the QR code. Feel free to try using the setup key and backup code; you'll receive a positive response as well.

Note: The database operates on local storage.

Conclusion

Congratulations you have successfully integrated 2FA with Node.js and otplib. By applying the techniques described in this article, such as QR code-based token generation, secret keys, otplib, and backup codes. You can establish a system that is simple to deploy yet provides significant security benefits. Start building your 2FA system now and take the first step toward a safer digital environment!

How to Build a Chat App with React, Strapi & Firebase

Opuama Lucky — Mon, 08 Apr 2024 08:18:44 +0000

Building a chat application with React, Strapi, and Firebase combines React's frontend strength with Strapi backend data management skills, Firebase's authentication and messaging functionality. In this tutorial, you'll learn how to create a Strapi chat app, integrate Firebase for user authentication, and get real-time updates.

Prerequisites

To follow along with this tutorial, make sure you have:

NodeJs installation.
Basic knowledge of ReactJs.
Basic understanding of Firebase.
Knowledge of Firebase installation on a React app.

Setting up Strapi Backend

To set up the Strapi project, ensure you have Strapi installed on your system, or you can follow up as the tutorial proceeds with the installation process. Navigate to your terminal and run the command below:

npx create-strapi-app@latest my-project

The above command will create a new project named my-project and install Strapi on your system. After a successful installation, use the following command to launch your Strapi application:

npm run develop

Once you have successfully launched your project, copy the URL from your console and paste it into your browser's address bar. If you're new to Strapi, you must log in or sign up to access your project.

Create Collection Types

After successfully logging in, you'll create an Account collection type to store users who newly join your chat room. Navigate to the side navigation bar, select Content-Type Builder, and click Create new collection type.

Clicking Continue will lead you to the next step, where you can add additional fields to your collection. In this step, you'll add three (3) fields to your collection type, each serving a specific purpose as described below:

uid: To create the uid field, choose UID and enter any name you wish; nevertheless, you will use uid as the name. To proceed, click Add Another Field.
Username: For the Username field, select a text field and name it Username. Then, click Add Another Field to continue.

Email: Choose the email field type and name it Email. Afterward, click the Finish button to complete the process. If done correctly, you should see the same image displayed below:

NOTE: Ensure you click save after creating any collection type

To store users' messages, you need to create a new collection type named ChatRoom-Message with the following fields, as displayed in the image below:

Next, go to Settings, Roles, and click on Public. Then scroll down to Permissions, click on Chat-room-message, select all to authorize the application's activity, and click Save.

Make sure you do the same with Account and Save.

Building the Chat Room

Since this project will make use of ReactJs, ensure you have ReactJs installed on your system. If not, you can create a new React app by opening your command prompt and running the following command:

npm create vite@latest my-app

Follow the prompt, then continue with the following command:

cd my-app
npm install
npm run dev

The command above will install and run your React application on your localhost server at http://localhost:5173/.

Styling The User Interface

You'll be using DaisyUI for this project, but before incorporating the DaisyUI library into your chat app, you will first need to install Tailwind CSS in your React app. Follow these steps to proceed:

cd my app
npm install -D tailwindcss
npx tailwindcss init

Then, add this path to your tailwind.config.js file:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, go to the index.css file in your React application and include the following directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Run the command below to install DaisyUI on your ReactJs app:

npm i -D daisyui@latest

Then, update your tailwind.config.js file:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

Now that you have installed React and DaisyUI on your system, start your front-end development by creating the navigation bar. Open the my-app directory in a code editor and navigate to the src folder. Create a new folder called Components, then create a file named nav.jsx, and add the following code:

import React from "react";
import { UserAuth } from "../context/AuthContext";

const Nav = () => {
  const { currentUser, logout } = UserAuth();
  const handleLogout = async () => {
    try {
      await logout();
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className="navbar bg-primary text-primary-content">
      <div className=" container flex justify-between">
        <a className="btn btn-ghost text-xl">Strapi ChatRoom</a>
        {currentUser ? <button onClick={handleLogout}>Logout</button> : ""}
      </div>
    </div>
  );
};

export default Nav;

In the src folder, create a new folder called pages. Inside it, create a new file named Login.jsx and add the following code:

import React, { useEffect, useState } from "react";
const Login = () => {
  return (
    <div className="hero min-h-screen bg-base-200">
      <div className="hero-content text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Welcome to Strapi ChatRoom</h1>
          <p className="py-6">
            Join the conversation, meet new people, and make connections in one
            shared room.
          </p>
          <button className="btn btn-primary">LOGIN WITH GOOGLE</button>
        </div>
      </div>
    </div>
  );
};
export default Login;

Go to your component folder and create a new file named SendMessage.jsx. Add the following code into this file:

import React, { useState } from "react";
const SendMessage = () => {
  const [value, setValue] = useState("");
  const handleSendMessage = (e) => {
    e.preventDefault();
    console.log(value);
    if (value.trim === "") {
      alert("Enter valid message!");
      return;
    }
    setValue("");
  };
  return (
    <div className="bg-gray-200 fixed w-full py-10 shadow-lg bottom-0">
      <form onSubmit={handleSendMessage} className="container flex px-2">
        <input
          className="input w-full focus:outline-none bg-gray-100 rounded-r-none"
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <button className="w-auto bg-gray-500 text-white rounded-r-lg px-5 text-sm">
          Send
        </button>
      </form>
    </div>
  );
};
export default SendMessage;

In this code, when the user submits the form, the handleSendMessage function is triggered. This function stops the form from submitting by default, saves the current message, and checks if it's empty. If empty, it alerts the user to input a message and clears the message input field. Next, create another file named Message.jsx with the following code :

import React from "react";
const Message = ({ message }) => {
  return (
    <div>
      <div className="chat chat-start">
        <div className="chat-image avatar">
          <div className="w-10 rounded-full">
            <img alt="User Avatar" src="" />
          </div>
        </div>
        <div className="chat-header">{message.name}</div>
        <div className="chat-bubble">{message.text}</div>
      </div>
    </div>
  );
};
export default Message;

The above code accepts the message as a prop and renders the username, and message content. Next, create another file named ChatBox.jsx in your Component folder with the following code inside it:

import React from "react";
import Message from "./Message";
import { useState, useRef, useEffect } from "react";
const ChatBox = () => {
  const messagesEndRef = useRef();
  const [messages, setMessages] = useState([]);
  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behaviour: "smooth" });
  };
  useEffect(scrollToBottom, [messages]);
  return (
    <div className="pb-44 pt-20 container">
      {messages.map((message, id) => (
        <Message key={id} message={message} />
      ))}
      <div ref={messagesEndRef}></div>
    </div>
  );
};
export default ChatBox;

This code serves as a container for displaying chat messages. To render the ChatBox and SendMessage components, create a new file named chat.jsx inside your pages folder and include the following code:

import React from "react";
import ChatBox from "../Components/ChatBox";
import SendMessage from "../Components/SendMessage";
const Chat = () => {
  return (
    <>
      <ChatBox />
      <SendMessage />
    </>
  );
};
export default Chat;

Next, create a new folder called Routes . Inside this new folder, create a file named PrivateRoute.jsx, and add the following code inside it:

import React from "react";
import { Navigate } from "react-router-dom";
import { UserAuth } from "../context/AuthContext";
export const PrivateRoute = ({ children }) => {
  const { currentUser } = UserAuth();
  if (!currentUser) {
    return <Navigate to="/" replace={true} />;
  }
  return children;
};

The code above defines a private route component that ensures authentication before allowing access to the specified path. Now, to execute your frontend, navigate to App.jsx and replace the existing code with the following:

import Login from "./pages/login";
import Nav from "./Components/Nav";
import Chat from "./pages/Chat";
import { Routes, Route } from "react-router-dom";
import { PrivateRoute } from "./Routes/PrivateRoute";
function App() {
  return (
    <AuthProvider>
      <Nav />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route
          path="/Chat"
          element={
            <PrivateRoute>
              <Chat />
            </PrivateRoute>
          }
        />
      </Routes>
    </AuthProvider>
  );
}
export default App;

Setting up Firebase

Before diving into Firebase setup, understand what Firebase is and how it fits into this project.

According to Wikipedia, Firebase is a suite of back-end cloud computing services and application development platforms offered by Google. It provides databases, services, authentication, and integration for various apps, including Android, iOS, JavaScript, Node.js, Java, Unity, PHP, and C++.

Firebase is a NoSQL database program that stores data in JSON-style documents. In this project, you will use Firebase for user authentication.

Next, log in to Firebase or create an account if you're new. To create a new Firebase project, go to the Firebase Console, click Add project, and follow the prompts. In this tutorial, you'll name your project strapichat. Disable Google Analytics and click Create project.

Click the Web option to begin setting up Firebase. The third icon, which resembles a code icon, represents this option and register the app.

Perform the following actions when you click on the Web option:

Step 1: Register the app by giving it a nickname and a Firebase hosting which is free.
Step 2: Copy the Firebase configuration given to you.

Afterward, create a file named firebase.jsx inside the src folder and paste all the code provided during the Firebase project creation step:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyCbdtBIaoTLgo1SUEmsfPLHA_4KuptMiTg",
  authDomain: "strapichat.firebaseapp.com",
  projectId: "strapichat",
  storageBucket: "strapichat.appspot.com",
  messagingSenderId: "1025219426688",
  appId: "1:1025219426688:web:912f11e71bb818a6922965",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);

NOTE: Replace the configurations with the one provided to you by Firebase

The code above initializes Firebase in your React app. Next, run the following command to install the latest SDK:

npm install firebase

Click Next.

Step 3: Optionally, you can install the Firebase CLI by running this command in the terminal:

npm install -g firebase-tools

Enable User Authentication

After creating your Firebase project, please navigate to the Firebase Console dashboard and select it. From the left sidebar menu, choose Authentication to access the authentication section. Here, you'll find a list of available authentication methods. Click on Get Started to activate the authentication methods you want for your project.

Firebase offers various authentication mechanisms, including email/password, Google, Facebook, Twitter, and more. You'll be utilizing Google authentication, so select and enable the Google authentication method.

Next, navigate to the firebase.jsx file inside the src folder and replace the code:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyCbdtBIaoTLgo1SUEmsfPLHA_4KuptMiTg",
  authDomain: "strapichat.firebaseapp.com",
  projectId: "strapichat",
  storageBucket: "strapichat.appspot.com",
  messagingSenderId: "1025219426688",
  appId: "1:1025219426688:web:912f11e71bb818a6922965",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

NOTE: Replace the configuration

In the provided code, you imported getAuth from Firebase, which retrieves a reference to the Firebase Authentication service instance. Next, create a folder named context inside the src directory and then create a new file called AuthContext.jsx, and paste the following code inside it:

import { createContext, useState, useEffect, useContext } from "react";
import {
  GoogleAuthProvider,
  onAuthStateChanged,
  signInWithRedirect,
  signOut,
} from "firebase/auth";
import { auth } from "../firebase";
//create context
const AuthContext = createContext();
//provider context
export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUSer] = useState("");
  const [loading, setLoading] = useState(true);
  //   signin with google
  const signInWithGoogle = () => {
    const provider = new GoogleAuthProvider();
    signInWithRedirect(auth, provider);
  };
  // signout from google
  const logout = () => signOut(auth);
  const value = {
    currentUser,
    setCurrentUSer,
    signInWithGoogle,
    logout,
  };
  // set currentUser
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUSer(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);
  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
};
export const UserAuth = () => {
  return useContext(AuthContext);
};

The code above sets up a flexible authentication system using Firebase in your React application. It manages the authentication state, initializes state variables for the current user, a loading status, and provides functions for signing in with Google and logging out.

Integrate Strapi with Firebase

In this phase, you will integrate your Strapi backend with Firebase in your React app. Open the Login.jsx file located in the pages folder within your src directory, and add the following code to it:

import React, { useEffect, useState } from "react";
import { UserAuth } from "../context/AuthContext";
import { useNavigate } from "react-router-dom";
const Login = () => {
  const navigate = useNavigate();
  const { currentUser, signInWithGoogle } = UserAuth();
  const [displayName, setDisplayName] = useState("");
  const [uid, setUid] = useState("");
  const [email, setEmail] = useState("");
  const handleLogin = async () => {
    try {
      await signInWithGoogle();
    } catch (error) {
      console.log("Error signing in:", error);
    }
  };
  useEffect(() => {
    // Check if currentUser exists
    if (currentUser) {
      const fetchUserData = async () => {
        try {
          // Destructure currentUser to get necessary details
          const { displayName, uid, email } = currentUser;
          // Update state with the user details
          setDisplayName(displayName);
          setUid(uid);
          setEmail(email);
          // Send user details to Strapi API
          await fetch("http://localhost:1337/api/accounts", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              data: {
                uid: uid,
                Username: displayName,
                Email: email,
              },
            }),
          })
            .then((response) => response.json())
            .then((data) => {
              console.log("Data from Strapi API:", data);
              // navigate to another page after sending data
              navigate("/Chat");
            })
            .catch((error) => {
              console.log("Error sending user data to Strapi API:", error);
            });
        } catch (error) {
          console.log("Error setting user data:", error);
        }
      };
      // Call fetchUserData function
      fetchUserData();
    }
  }, [currentUser, navigate]); // Include currentUser and navigate in the dependency array
  return (
    <div className="hero min-h-screen bg-base-200">
      <div className="hero-content text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Welcome to Strapi ChatRomm</h1>
          <p className="py-6">
            Join the conversation, meet new people, and make connections in one
            shared room.
          </p>
          <button onClick={handleLogin} className="btn btn-primary">
            LOGIN WITH GOOGLE
          </button>
        </div>
      </div>
    </div>
  );
};
export default Login;

The code above handles the login process using Google sign-in via Firebase authentication. It retrieves the user's information, sends it to Strapi if successfully signed, and redirects the user to the Chat page, where users can start communication.

Read Chat Messages

To read chat messages, you need to send a request to Strapi to retrieve messages. To do this, navigate to the Components/ChatBox.jsx file in your src directory and add the following code:

import React from "react";
import Message from "./Message";
import { useState, useRef, useEffect } from "react";
const ChatBox = () => {
  const messagesEndRef = useRef();
  const [messages, setMessages] = useState([]);
  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behaviour: "smooth" });
  };
  useEffect(scrollToBottom, [messages]);
  useEffect(() => {
    const interval = setInterval(() => {
      fetch("http://localhost:1337/api/chat-room-messages", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((res) => setMessages(res.data));
    }, 5000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div className="pb-44 pt-20 container">
      {messages.map((message, id) => (
        <Message key={id} message={message} />
      ))}
      <div ref={messagesEndRef}></div>
    </div>
  );
};
export default ChatBox;

As explained earlier and as seen in the code above, the ChatBox component displays individual chat messages in the Strapi chatroom, including the username and user photo.

The first useEffect hook is called whenever the messages state changes. It scrolls to the bottom of the chatbox.

The second useEffect hook runs once after the component mounts. It fetches chat room messages from a local server endpoint http://localhost:1337/api/chat-room-messages, every 5 seconds using setInterval. Upon receiving the response, it updates the messages state.

To render your chat messages, navigate to Components/Messages.jsx in your src folder and replace the file with the following code:

import React from "react";
import { UserAuth } from "../context/AuthContext";
const Message = ({ message }) => {
  const { currentUser } = UserAuth();
  return (
    <div>
      <div
        className={`chat ${
          message.attributes.User === currentUser.displayName
            ? "chat-start"
            : "chat-end"
        }`}
      >
        <div className="chat-image avatar">
          <div className="w-10 rounded-full">
            <img alt="User Avatar" src={message.attributes.Photo} />
          </div>
        </div>
        <div className="chat-header">{message.attributes.User}</div>
        <div className="chat-bubble">{message.attributes.message}</div>
      </div>
    </div>
  );
};
export default Message;

Create New Messages

To create and post new messages to Strapi, you must capture user input and send it to your Strapi backend. To accomplish this, navigate to the Components/SendMessage.jsx file in your src directory and insert the following code:

import React, { useState } from "react";
import { UserAuth } from "../context/AuthContext";
const SendMessage = () => {
  const [value, setValue] = useState("");
  const { currentUser } = UserAuth();
  const [displayName, setDisplayName] = useState("");
  const [photoURL, setPhotoURL] = useState("");
  const handleSendMessage = (e) => {
    e.preventDefault();
    console.log(value);
    if (value.trim === "") {
      alert("Enter valid message!");
      return;
    }
    try {
      const { displayName, photoURL } = currentUser;
      if (currentUser) {
        fetch("http://localhost:1337/api/chat-room-messages", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            data: {
              message: value,
              User: displayName,
              Photo: photoURL,
            },
          }),
        })
          .then((response) => response.json())
          .then((data) => console.log(data));
      }
    } catch (error) {
      console.log(error);
    }
    setValue("");
    setDisplayName(displayName);
    setPhotoURL(photoURL);
    console.log(currentUser);
  };
  return (
    <div className="bg-gray-200 fixed w-full py-10 shadow-lg bottom-0">
      <form onSubmit={handleSendMessage} className="container flex px-2">
        <input
          className="input w-full focus:outline-none bg-gray-100 rounded-r-none"
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <button className="w-auto bg-gray-500 text-white rounded-r-lg px-5 text-sm">
          Send
        </button>
      </form>
    </div>
  );
};
export default SendMessage;

The code above allows users to compose and send messages within your chat application. When a user sends a message, the message content, along with the user's display name and photo URL obtained from Firebase authentication, is sent to Strapi using a POST request. This function ensures the message gets stored in the Strapi backend for further processing, retrieval or customization.

Your app should look like this:

Demo Time!

Since your application data depends on Strapi, you must start your Strapi server before your application launches. To accomplish this, open a new terminal window, navigate to the directory of your Strapi app, and launch the application by running the command below:

npm run develop

Open your React app terminal window and run the following command as well:

npm run dev

The image below demonstrates the success of your chat application:

The short clip above shows how users exchange messages, facilitating real-time communication.

Feel free to add more features to enhance the appearance and functionality of your chat app.

Conclusion

Congratulations on fully implementing your Strapi chat app! Building a chat application using React, Strapi, and Firebase combines powerful front-end and back-end technologies. Strapi provides flexibility in handling data and APIs, while React offers a robust foundation for constructing user interfaces. Firebase enhances the application by providing user authentication. With these tools, you can create dynamic and interactive chat applications.

Resources

You can check the complete code here: frontend and Strapi backend.
https://firebase.google.com/docs/auth
https://en.wikipedia.org/wiki/Firebase
https://docs.strapi.io/dev-docs/backend-customization

Top 5 Docker Container Monitoring Tools in 2024

Opuama Lucky — Sun, 24 Mar 2024 16:06:49 +0000

Monitoring tools assist DevOps teams in swiftly detecting and resolving performance issues. As Kubernetes and Docker gain popularity, it becomes imperative to establish robust container monitoring and log management processes from the outset.

However, this task is not without its complexities. Monitoring Docker containers entails a detailed process, starting with the development of a well-thought-out plan and culminating in the implementation of a suitable monitoring system. In this post, we will delve into the fundamentals of container monitoring and highlight its importance. Furthermore, we will conduct a comprehensive analysis of the top container monitoring tools available in the market.

What is container monitoring?

Before digging deeper, it's important to understand the concept of a container.
What is a container? A container is a standardized software unit that encompasses both code and its dependencies. This encapsulation enables software developers to create programmes that can handle the issues that come with running cross-platform apps. In essence, containers are software packages that include all of the necessary components for running applications seamlessly across a variety of settings.

A Docker container image is a standalone, executable software package that includes everything required to run an application. To convert an image into a container, run it through Docker Engine. Programmers who take this approach and avoid unwittingly holding back their applications, create versatile systems.

Container monitoring is a simple procedure for verifying the performance of your apps built on microservice architectures by collecting and analysing your application's performance information. Containers are more difficult to monitor than traditional apps because they are temporary.

Why do we need to Monitor Docker Containers?

Without monitoring, it's difficult to understand how containers use resources efficiently. Monitoring assists resource optimization by identifying performance bottlenecks and ensuring that infrastructure resources are used optimally.

In today's world, achieving user expectations includes providing programmes that work seamlessly. However, ensuring a high-quality user experience necessitates ongoing maintenance and performance monitoring. Monitoring Docker containers is critical because it gives real-time information about the performance, health, and behaviour of containerized applications.

Additionally, monitoring Docker containers allows you to discover and manage any security threats.

How to monitor your containers

Container monitoring is similar to monitoring other types of deployments in that both require metrics, logs, health checks, and service discovery.

Nevertheless, container monitoring is more difficult due to its multi-layered and dynamic nature. However, a user-friendly container monitoring system can help you swiftly navigate through all of its layers. Simply select the best tool for your specific situation.

Here is a list of the top five Docker monitoring tools you should be aware of.

Top 5 Docker Container Monitoring Tools

Prometheus
Datadog
Sumo Logic
Sysdig
Dynatrace

Prometheus

Prometheus is an open-source monitoring and alerting toolkit. It is designed to monitor highly dynamic containerized systems, making it an excellent choice for monitoring Docker containers and Kubernetes clusters.

Prometheus allows you to collect and store metrics as time-series data, which means that each data point is associated with a timestamp and optional key-value pairs known as labels.

Prometheus employs its own PromQL query language, collects time series using a pull model over HTTP, and pushes data through an intermediary gateway. It allows for a variety of ways to visualise data. Prometheus is typically deployed alongside Grafana since it provides out-of-the-box support.

Features of Prometheus

Easily scalable
Integrates with Grafana
Stores time-series data
Supports various service discovery mechanisms, including DNS-based discovery
Follows a pull-based model

Datadog

Datadog is a platform for monitoring applications and services. To create a full-stack monitoring suite, it combines Docker monitoring with application, server, and network monitoring.

The Datadog platform is a good option for a Docker container monitoring system since this application can keep an eye on servers, networks, and apps, giving it a complete picture of everything that goes into a Docker container.

Furthermore, the service may provide application dependency maps indicating which services employ containers and which use Docker. When any component of your IT infrastructure exhibits performance concerns, you may quickly do a root cause investigation using this information.

Datadog NPM helps detect if your network is to blame for slow traffic or low connectivity before your applications are harmed, ensuring a smooth travel experience for you.

Features of Datadog

Supports auto-discovery
Tracks container creation and destruction
Integrations and Ecosystems
Log Management and Analytics
Application Performance Monitoring

Datadog is available in four editions: infrastructure, APM, log management, and synthetics.

Sumo Logic

Sumo Logic offers centralised, container-aware log management, allowing for correlation of container events, configuration data, and host and daemon logs. Sumo Logic's log management system is available in cloud, on-premises, and hybrid settings.

Log centralization allows you to create many dashboards, view all of your monitors at once, correlate issues, and perform root-cause analysis using machine learning.

Furthermore, Sumo Logic provides security and compliance management. Because of its log analysis capabilities, it identifies threats quickly, aids in breach detection, and integrates with other threat intelligence solutions.

Predictive analytics, anomaly detection, and outlier identification provide detailed insights into the performance of your design. Sumo logic provides real-time visibility into cloud apps and infrastructure across AWS, Azure, and GCP.

Features of Sumo Logic

Machine Learning and Anomaly Detection
Log Management
Integration with Cloud Platforms
Real-Time Analytics
Dashboards and Visualizations

Sysdig

Sysdig is a leading container monitoring and security technology that provides detailed visibility into containerized environments. Sysdig provides Docker monitoring, security, and forensics technologies that allow you to obtain a comprehensive understanding of containers, manage vulnerabilities and security risks, and troubleshoot and do forensic analysis. Sysdig provides sight within your containers from the outside, using a single agent per server. It automatically identifies containers and collects metrics and events. Sysdig can scan your photos, identify threats, and monitor compliance.

You can resolve issues faster by utilizing container data from system calls that have been augmented by the Kubernetes context. In addition, Sysdig makes it easier for you to consolidate data across various teams for Docker monitoring. It also provides developers with a familiar tool while eliminating the management issue. Sysdig can measure up to millions of metrics with long-term storage and a single backend. How impressive.

Features of Sysdig

Open-Source Foundations
Forensic Analysis
Container-Level Visibility
Anomaly Detection

Dynatrace

Dynatrace is a full-stack observability solution that provides a user-friendly method for monitoring Docker container metrics and logs. Dynatrace, like the Docker stats tool, allows you to examine the container resource utilization on several hosts. You can also examine Docker data such as RSS, CPU utilization, and the total duration of time that a container's CPU consumption has been attacked.

Dynatrace provides automation and AI technologies for container platforms, including Kubernetes, OpenShift, Cloud Foundry, and Docker. Dynatrace allows you to achieve full-stack observability and monitor the availability, health, and resource utilization of your containerized infrastructure. You can keep track of all the crucial metrics by following pre-defined rules or building your own to monitor specific metrics. All the data collected will be visualised. Dynatraces AI offers continual mapping of dependencies and auto-discovery.

Features of Dynatrace

Application dependency mapping
Container discovery
Highly visual and customizable dashboards
AI-Powered Observability
Real User Monitoring (RUM)

Conclusion

The landscape of Docker monitoring tools features an extensive selection of solutions that adapt to the changing needs of modern IT settings. DevOps engineers want comprehensive monitoring, tracking, and logging systems that include advanced features such as trace, metric, and log correlation.

These technologies are critical in helping organizations gain full visibility, proactive monitoring, and effective Docker container management. The best monitoring solution will be based on the tools we now have, the issues we confront and the needs we have.

Docker vs Kubernetes: What's Your Comment?

Opuama Lucky — Fri, 22 Mar 2024 15:17:44 +0000

Docker and Kubernetes are two standout technologies that offer distinct solutions for streamlining application development and deployment procedures. While Kubernetes and Docker are not identical, they do share some similarities. In this article, we'll explore the differences between Kubernetes and Docker, along with their respective responsibilities in the container ecosystem. Additionally, we'll examine how they collaborate to establish scalable and efficient container-based systems.

Your comments and feedback in the comment section would be greatly appreciated. They contribute to the ongoing discussion and help enhance understanding of these important technologies.

What is Docker?

Docker is an open-source containerization platform used to create, deploy, and manage containers. It allows developers to package applications and their dependencies into loosely isolated environments called containers. By isolating applications from the underlying infrastructure, Docker streamlines the process of application delivery.

Docker's rapid shipping, testing, and deployment capabilities help minimize the time between code production and deployment in production environments.

Additionally, Docker provides a toolkit commonly used to package applications into immutable container images. This process involves creating a Dockerfile, which specifies the necessary instructions to construct the image, and then running commands to build the image on the Docker server. This approach ensures consistency and reproducibility across different environments.

Docker Benefits

Docker is popular and widely used in the software development and deployment environment due to its many benefits, among which are:

Consistency: Docker ensures consistency across different environments by packaging applications and their dependencies into containers. This consistency eliminates the "it works on my machine" problem often encountered in software development and ensures that applications run reliably across various platforms.
Isolation: Docker containers provide isolation for applications, allowing them to run independently of the underlying infrastructure. Each container encapsulates its own runtime, libraries, and dependencies, ensuring that changes made to one container do not affect others.
Modularity: Docker promotes a modular approach to application development, allowing developers to break down monolithic applications into smaller, manageable components. This microservices architecture enables faster development cycles, easier maintenance, and greater flexibility in scaling and updating applications.
Version control: Docker images can be versioned and stored in repositories, facilitating version control and collaboration among team members. This ensures consistency and reproducibility across different environments and simplifies the process of rolling back to previous versions if needed.
DevOps integration: Docker integrates seamlessly with DevOps tools and practices, enabling organizations to automate the entire software development lifecycle, from building and testing to deployment and monitoring. This streamlines the development process, improves collaboration between development and operations teams, and accelerates time-to-market.

What is Kubernetes?

Kubernetes, commonly abbreviated as K8s, is an open-source, scalable container orchestration system that utilizes an API to automate and manage the complexities of running applications across a network. Initially developed by Google and subsequently contributed to the Cloud Native Computing Foundation (CNCF), Kubernetes offers a comprehensive framework for container management, empowering organizations to effectively manage intricate containerized workloads at scale.

Kubernetes Benefits

Let's take a look at the several benefits that you can get from using Kubernetes.

Scalability: Kubernetes facilitates horizontal and vertical scaling of applications, adjusting resources based on utilization and user demand. Essentially, elasticity is a fundamental aspect of Kubernetes clusters.
Availability: Kubernetes boasts high availability, safeguarding applications against single points of failure. By enabling the creation of multiple control plane nodes, Kubernetes ensures that if one master fails, others can sustain the cluster's operation.
Multi-cloud Capability: Kubernetes offers extensive multi-cloud capabilities. Thanks to its portability, it accommodates workloads on a single cloud or across multiple clouds. Moreover, it seamlessly scales its environment from one cloud provider to another.
Flexibility: Kubernetes exhibits remarkable flexibility, compatible with virtually any container runtime. A container runtime serves as the software component that facilitates container execution on a host operating system. Furthermore, Kubernetes seamlessly integrates with various types of underlying infrastructure, including public clouds, private clouds, or on-premises servers.

Docker vs Kubernetes

Docker primarily focuses on containerization, while Kubernetes specializes in container orchestration. Knowing that, let's see other comparisons based on their features:

Features	Docker	Kubernetes
Scaling	Allows for horizontal and vertical scaling of containers	Allows for horizontal scaling of containers
Load balancing	Does not have native load balancing capabilities. It relies on third-party tools like Docker Swarm	Provides internal load balancing
Self-healing	Does not have native self-healing capabilities. It relies on third-party tools like Docker Compose or Docker Swarm	Automatically replaces failed containers with new ones
Containerization	Allows to create and manage containers	Allows to run and manage containers

While Docker and Kubernetes share certain similarities, they cater to distinct needs and use cases within the container ecosystem. Docker is well-suited for containerization and development workflows, while Kubernetes excels in managing complex, production-grade containerized applications at scale. It's common for organizations to utilize both technologies simultaneously, leveraging Docker for containerizing applications and Kubernetes for orchestrating and managing them in production environments.

Conclusion

The Kubernetes vs Docker debate is frequently framed as an either/or decision: should I use Kubernetes or Docker? This example is similar to comparing apples with apple pie, and it reinforces the prevalent idea that one must pick between the two.

A more accurate perspective emerges when Kubernetes and Docker are viewed as complementary technologies rather than mutually exclusive options. You do not need to choose between Kubernetes and Docker; they are fundamentally separate tools that work well together to architect, deploy, and scale containerized systems. Before making a decision, you or your team should carefully assess their needs and weigh the benefits and drawbacks of various tools.

Improving Style Recalculation Speed with CSS

Opuama Lucky — Thu, 21 Mar 2024 01:41:35 +0000

In the fast-paced global landscape of modern web development, the performance of a website is frequently the first and last impression it leaves on its users. As web developers and designers attempt to create visually appealing and feature-rich websites, ensuring optimal speed becomes increasingly important. Improving the speed of style recalculation with CSS is an important part of this performance optimization.

In this article, we'll explore how to improve style recalculation in CSS as well as the significance of this process in modern web development. We will also investigate the effect of style recalculation on web page speed, analyze important CSS performance bottlenecks, and give practical insights and methods for improving the performance of your web projects.

Understanding Style Recalculation

Style recalculation is the process by which a browser calculates the final style of an element. This procedure is initiated anytime the DOM (Document Object Model) is altered, such as when an element is added, removed, or modified. During this process, the browser determines the styles that should be applied to each element. It is the browser's means of ensuring that web pages are displayed to users as intended. It is crucial to establish how elements are styled, positioned, and scaled on a web page. This process ensures that text is legible, graphics are properly aligned, and the overall design is authentically copied.

Let's get started with some real code samples to help you grasp style recalculation.

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 80%;
            height: 80vh
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .box {
            width: 50%;
            float: left;
            padding: 10px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

From the code above, we created a simple layout with three boxes inside a containercontainer. CSS styles define the width, margin, padding, and background colors of these components. The browser calculates the container and box styles, taking into account the width, margin, padding, and background colors. In addition, the browser resolves mismatched styles, ensuring that each element is properly styled, like the image below:

Common CSS Performance Bottlenecks

CSS is the foundation of online design, allowing developers to construct visually appealing and responsive websites. Inefficient or poorly designed CSS, on the other hand, can cause performance bottlenecks, resulting in slow page loading times and a poor user experience. To sustain a fast and efficient website, it's important to understand typical CSS performance bottlenecks and how to avoid them. Let's look at key CSS performance bottlenecks and their wrong and correct solutions in the example code:

Overuse of !important: The !important flag should be used with caution, as it can cause specificity battles and make maintaining your CSS difficult. When everything is designated as !important, managing and debugging styles becomes difficult. ```css /* Avoid overusing !important: */ .title { color: #FF0000 !important; }

/* Prefer specificity: */
.title {
color: #FF0000;
}

* Excessive Use of Complex Selectors: Complex selectors require the browser to scan the whole DOM tree, making matching items with the provided rules slower.  For example, selecting items with deeply nested structures or applying styles based on attributes like data might be time-consuming.
```css
/* Inefficient: */
ul > li > a {
    color: #FF0000;
}

/* Efficient: */
.nav-link {
    color: #FF0000;
}

High Specificity: When many conflicting rules exist, CSS specificity determines which styles are applied to an element. High specificity rules take precedence over lesser specificity rules; however, they can increase calculation time when computing styles. ```css /* High Specificity: */ #main .content .article .title { font-weight: bold; }

/* Lower Specificity: */
.title {
font-weight: bold;
}


## CSS Best Practices for Performance
Regardless of the type of your website or if it operates well in several web browsers, it must load promptly. Your users will leave if it is not fast enough. CSS, on the other hand, can constitute a substantial barrier to web page performance if not improved. It is critical to follow CSS best practices for performance to guarantee that your web pages load quickly and deliver a consistent user experience. we'll consider These essential points to keep in mind:

*  Minimize HTTP Requests: To accomplish this, we must combine and minify many CSS files into a single file to reduce the number of requests performed by the browser.

* Use External Stylesheets: Rather than embedding CSS in HTML files, use external stylesheets. This allows the browser to cache the CSS file, which speeds up subsequent page views.

* Prioritize Critical CSS: Loads critical CSS inline within the HTML section to guarantee that above-the-fold material is styled as soon as possible. Non-critical CSS should be loaded asynchronously or after the page has loaded.

* Optimize CSS Selectors: Use efficient and specific CSS selectors. To improve efficiency, reduce selector complexity, and minimize the use of universal selectors.

* Minify CSS: To reduce the size of your CSS files, remove extraneous characters and whitespace. Many tools and build processes can minify your CSS automatically.

* Use Media Queries Wisely: For responsive design, use well-thought-out media queries. Excessively massive or unoptimized media queries might cause page rendering to lag.

## Profiling and Benchmarking CSS Performance
Benchmarking CSS performance entails running controlled experiments to determine the rendering speed of web pages under various scenarios. This method can assist in determining how different CSS methods affect website load speeds.

### Using the Layout or Reflow Panel
In web development, the Layout or Reflow panel in browser developer tools is a significant resource for spotting style recalculation errors and understanding how changes in your CSS affect the rendering of web pages. This window allows you to view the layout process in action and identify areas where you may improve your CSS. Here's how to utilize it:

1. open the developer tools in your browser.  Developer tools are typically accessed by hitting F12 or right-clicking on a web page element and selecting Inspect.
2. Navigate to the Layout or Reflow panel. The exact location of this panel may differ based on the browser you are using. In Google Chrome, it is found under the **Performance** tab.
```html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Sample CSS for demonstration */
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="changeColor()">Change Color</button>

    <script>
        // JavaScript function to change the box color
        function changeColor() {
            const box = document.querySelector('.box');
            box.style.backgroundColor = '#e74c3c';
        }
    </script>
</body>
</html>

The code above shows a simple HTML document with a box and a button. The background color of the box changes when you click the button, like this:

We'll use the Layout or Reflow panels to check how this change affects the rendering.

Click the Record button to begin a profiling session in the Layout or Reflow panel. You can interact with the web page to cause layout changes. In the example, clicking the button changes the box's background color.
Stop the recording in the Layout or Reflow panel after you've made changes to the page. A thorough report of the layout activity will be displayed. Look for entries indicating style recalculations or layout changes, like the clip below from Google Chrome:

From the example above, you can see the report of the layout and reflow activities and how changing the color of the box changes the layout and causes a reflow. For more details, visit Chrome for Developers Documentation.

CSS Specificity and Efficiency

CSS specificity refers to how browsers assess the importance, relevance, and seniority of CSS styles. It determines which styles take precedence when there are conflicting regulations. CSS specificity is determined by the combination of selectors used to target an element. The more specific a selector is, the higher its specificity.

Specificity is often calculated using the following factors, sorted from highest to lowest specificity which are listed below:

Inline Styles html <p style="color: red;">Hello world</p>
ID Selectors css #container { color: blue; }
Class and Attribute Selectors ```css .highlight { background-color: yellow; }

[data-theme="dark"] {
color: white;
}

* Type Selectors
```css
p {
    font-weight 5px;
}

Universal Selectors css * { margin: 0; } understanding CSS Specificity and Efficiency helps you to design a more maintainable CSS code and avoid typical issues associated with specificity and the abuse of high-specificity rules.

CSS Preprocessors and Performance

What do you think about CSS? Do you believe that all CSS strategies are the same? If so, it's time to reconsider your attitude toward this vital programming language. While implementing CSS code directly within your stylesheets is common when developing a small application, larger projects are a different matter.

CSS preprocessors like Sass, Less, and Stylus have gained popularity among web developers due to their ability to simplify and improve the process of writing and maintaining CSS. CSS preprocessors, on the other hand, are programming languages that enhance the capabilities of regular CSS. They enable developers to employ variables, functions, nested rules, and other capabilities, making complicated stylesheets easy to manage and maintain.

Although CSS preprocessors have many advantages, they might have an impact on web performance if not utilized correctly. Here are some important factors to consider:

Increased File Size: When compared to manually generated stylesheets, preprocessors frequently generate bigger CSS files. This can result in longer download times, which affects page load speed, particularly on slower network connections.
CSS Preprocessor Compilation Overhead: CSS preprocessors must be compiled into regular CSS before they can be sent to browsers.
Complex Selectors: Preprocessor nesting can result in the development of complex and very specific selectors. These selectors have the potential to degrade rendering and selector matching performance.
Unused Code: If variables, mixins, or functions are not carefully maintained, preprocessors can generate unused or redundant code. This can result in bigger CSS files and poorer performance.

Responsive Design and CSS Performance

Responsive design is a web design method that seeks to make online sites look and perform properly across a variety of devices, such as desktop computers, laptop computers, tablets, and mobile phones.

From 2013 to today, the number of people turning to Responsive Web Design as a way to give a consistent experience across multiple screen resolutions has increased significantly.

why?

Web visitors want a consistent experience regardless of device. As a result, if a user views your site and it is not optimized for their machine, she is likely to leave and never return.

To ensure responsive design doesn't compromise web performance, we'll recommend the following:

Aim for clean, brief CSS. Remove any unnecessary rules, and concentrate on maintaining specificity.
Reduce file sizes, and minify and compress your CSS files before publishing.
Use responsive image approaches like srcset and picture elements to provide images that are suitably sized depending on your device's capabilities.
To ensure optimal website load speeds, set and stick to performance goals that include CSS size and rendering times.
Lastly, Frequently monitor your site's performance on different devices and screen sizes, making adjustments as needed.

CSS-in-JS and Runtime CSS Generation

The idea of generating CSS with JavaScript has grown in popularity in recent years, owing partly to the dominance of reactive frameworks such as React and Svelte. These frameworks do not need the use of JavaScript to style components, but they do allow for it. As a result, a variety of CSS-in-JS frameworks have emerged to facilitate the process.

Inline definition and loading from an external file are the only options for old-school CSS. The browser loads the CSS, parses it, and then applies the styles to the markup in both circumstances. CSS-in-JS provides a third option for distributing CSS by producing it programmatically in code.

CSS-in-JS provides a syntax for converting JavaScript into browser-applicable styles.

Listing CSS-in-JS with styled-components:

import styled from 'styled-components';

// Define a styled component
const Button = styled.button`
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

// Render the styled component
function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

From the code above, styles are contained within the component, which improves maintainability and lowers the danger of style conflicts. CSS-in-JS is an attempt to make difficult use cases easier to manage, therefore don't use it in places where it isn't needed. Also, ensure to install styled components like so:

npm install styled-components

Runtime generation with CSS

Runtime CSS generation is a technique that generates a CSS string in JavaScript and then injects it into the document using a style tag. This method generates a Style Sheet, not inline styles.

CSS run-time generation is typically appropriate for apps that lack content that can be used immediately. Typically, such programs, such as Twitter, Facebook, and LinkedIn, require user engagement before they can truly be beneficial to a user. Furthermore, when a user is logged in, no HTML for SEO is required.

Runtime CSS Generation with styled-components:

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${props => props.primary ? "#3498db" : "#e74c3c"};
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.primary ? "#2980b9" : "#c0392b"};
  }
`;

// Render the styled component with dynamic theming
function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

From the code above, the styles are generated at runtime based on the primary prop, allowing for dynamic style changes with no further style recalculation. The perceived performance of such apps can be improved by using placeholders and other methods to make the application appear faster than it is. Such applications are typically data-intensive, thus they will not be as beneficial as an article.

Server-Side Rendering (SSR) and Critical CSS

Server-Side Rendering (SSR) and Critical CSS are two critical strategies for improving the performance of style recalculation in online applications. Let's look at how these strategies operate and why they're so important for improving web performance.

Server-Side Rendering (SSR)

Server Side Rendering (SSR) generates the HTML components of the webpage on the server. When a browser requests an SSR web page, the browser receives a fully completed HTML web page with the HTML components already built.

When you use SSR for server-side style calculation, the server pre-renders the HTML content and applies CSS styles. This means that the critical styles are already applied to the initial HTML response, reducing the requirement for style recalculation on the client side. Like the code below:

// Express.js server
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
  const appHtml = renderToString(<App />);
  res.send(renderFullPage(appHtml));
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

From the code above, we used SSR with React to render the initial HTML on the server, and the key styles are included in the initial HTML response, reducing the need for lengthy style recalculation on the client side.

Critical CSS

Critical CSS is the minimum amount of css required to style a page in its initial state. It's rendered with a style tag in the document's head. Also, it is an approach that identifies and inlines only the CSS styles required for above-the-fold content. By inlining only the styles required for content that is immediately visible in the viewport (above-the-fold), you reduce the initial style computation workload, resulting in a faster-perceived loading speed for your web page.

/* Critical CSS for above-the-fold content */
.header {
  background-color: #3498db;
  color: #fff;
}

/* Non-critical CSS for below-the-fold content */
.button {
  background-color: #e74c3c;
  color: #fff;
}

From the code above, we targeted the critical styles for the header, which is considered above-the-fold information. These styles can be inlined in the HTML to reduce style recalculation for the most critical areas of the page.

Browser Compatibility and Updates

Today, there are numerous browsers, operating systems, and device alternatives, both modern and legacy, including Windows, Linux, Mac, Internet Explorer, Firefox, Chrome, Safari, and Opera. Each browser or system translates and interprets your website code in order to visually display it, and each does it in its way.

What is Browser Compatibility

Browser compatibility refers to whether or not a website or web application works as expected in any given browser version on various devices. A website may work smoothly in one browser but have difficulties and errors in others. A good website is cross-browser compatible, meaning it works on all or the majority of browsers (including mobile/tablet versions), with a consistent layout and functionality. The importance of browser compatibility stems from the broad landscape of web browsers and their rendering engines, each of which may read HTML, CSS, and JavaScript slightly differently.

Browser Compatibility Matrix

During the creation and testing phases of a website, the teams in charge of development and testing frequently have a list of devices and browsers that they expect their sites to perform smoothly with. After it has been established and documented, this list of compatible browsers and devices is been referred to as the browser compatibility matrix or browser support matrix.

Here's a sample of a browser compatibility matrix.

Browser compatibility matrix helps developers make informed judgments about which web technologies and features to include in their projects. This contributes to ensuring that websites and online apps give a uniform user experience across browsers. It also aids in determining whether technologies may necessitate fallbacks or alternate solutions for older or non-compliant browsers.

Browser Updates

Browser updates are releases made regularly by browser vendors (for example, Google, Mozilla, and Microsoft) to improve browser performance, security, and compatibility. Check to see if your browser is up to date.

Why Updates Browser

Updating your web browser is a must for a variety of reasons, which are as follows:

Security: Browser updates often include essential security patches that safeguard users from vulnerabilities and attacks.
Web Standards Compliance: Browser upgrades strive to improve web standards compliance by eliminating rendering disparities between browsers. This helps to improve compatibility.
Feature Support: New web technologies, APIs, and features are routinely added to modern browsers. Staying current ensures access to the most recent web development features.
User Experience: To have the greatest web experience possible, users are urged to utilize the most recent browsers. Outdated browsers may be incapable of supporting advanced web functions, resulting in a poor user experience.
Performance: New browser versions often contain performance improvements, such as streamlining JavaScript execution, rendering speed, and memory utilization. This leads to faster and smoother web experiences.

Wrapping up

Improving style recalculation speed with CSS is a vital part of web development that has a direct impact on the user experience and overall performance of web applications.
By addressing style recalculation speed and embracing the ideas and strategies mentioned in this article, you can design web applications that not only look amazing but also operate extraordinarily well, regardless of the devices and browsers used by your audiences. This user-centric approach to web development is the foundation of a successful and competitive online presence.

Using Sveltris to build interoperable React and Svelte

Opuama Lucky — Fri, 29 Dec 2023 05:55:50 +0000

There are new ways for web developers to boost the flexibility and efficiency of their workflows. Sveltris is one such experimental
framework for developing interoperable apps that is gaining popularity.

in this article, we will delve into the world of Sveltris, examining its purpose, features, and benefits, as well as the advantages and
disadvantages of using various frameworks in a single project.

What is Sveltris?

Sveltris is a complex library that allows for the smooth integration of Svelte components into React projects. This breakthrough technology fusion enables developers to exploit the best features of both Svelte and React, resulting in a harmonious synergy that improves performance and expands the React ecosystem.

At its core, Svelte, known for its remarkable runtime efficiency, enables the building of highly performant components via its compiled methodology, which shifts the heavy lifting from the client to build time. React, on the other hand, has a plethora of tools, frameworks, and community resources that serve as the foundation of modern web development.

Why use Sveltris?

By using Sveltris, developers gain the ability to combine the unparalleled performance gains of Svelte's compilation process with the robustness of React's ecosystem. This combination provides an unparalleled development experience, as developers can craft components using Svelte's elegant syntax and then easily integrate them into React applications.

Svelte is an extremely performant framework, and Sveltris adds no overhead. This means you may get the same Svelte performance benefits in your React apps.

Sveltris also supports server-side rendering (SSR) out of the box, with no further configuration required. This ensures that components operate well in SSR contexts, increasing the versatility and compatibility of Sveltris applications.

React has a vast and active ecosystem, and there are numerous libraries and tools available to you. Sveltris allows you to use these libraries and tools alongside Svelte components, giving you the best of both worlds.

With Sveltris, you can intermix UI primitives like components and state primitives like hooks between frameworks without even noticing. It is simple to use. If you know how to use Svelte, you'll have no trouble using Sveltris.

In addition, when working with teams comprised of members with competence in either React or Svelte, Sveltris improves teamwork. You can construct features in your choice framework and seamlessly connect them with Sveltris, resulting in a more flexible and efficient development process.

Getting started with Sveltris

The combination of the two frameworks guarantees that the finished application benefits from both the runtime efficiency of Svelte and the broad toolset of React, which can be built either on Esbuild, Vite, and Webpack. In this tutorial, we'll be using Vite.

Creating a Svelte-in-React application

We'll begin with creating a svelte in react app. Run the following command to kick start:

npm create vite@latest sveltris-react -- --template react
OR
yarn create vite sveltris-react  --template react

Next, navigate to the app directory and install the default dependencies. Like the code below:

cd sveltris-react
npm install

After that, run the following command to install Sveltris and the Svelte Vite plugin as a dev dependency:

npm install sveltris
npm install --save-dev @sveltejs/vite-plugin-svelte

To start the app run the code below:

npm run dev

If you follow the process very well, you should have your sveltris software successfully installed. Finally, update the vite.config.js file with the code below:

// vite.config.js
import { sveltrisVitePlugins } from "sveltris"
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    ...sveltrisVitePlugins()
  ]
})

We can now develop Svelte components and use them in our React application.
To begin, create a new Hello.svelte file in the default /src directory and paste the following code into it: hello.svelte

    // src/hello.svelte
<div>
        <h1>Hello Svelte</h1>
    </div>
    <style>
        h1{
            border: 5px solid #121110;
            padding: 20px;
        }
    </style>

Next, create a file welcome.svelte in your source directory and paste the following code:

// src/welcome.svelte
<div>
    <h2>Welcome to Svelte</h2>
</div>
<style>
    h2{
        border: 5px solid #121110;
        padding: 20px;
    }
</style>

After that, replace the src/app/jsx file with the following code:

import Hello from "./Hello.svelte?in-react";
import Welcome from "./welcome.svelte?in-react";

function App() {
  return (
    <>
      <Hello />
      <Welcome />
      <h1
        style={{
          padding: " 20px",
          border: "2px solid #bc9aed",
        }}
      >
        greetings with React!
      </h1>
    </>
  );
}

export default App;

The code above integrates Svelte components into a React application. It imports two Svelte components with a React-specific query parameter, and then renders those components alongside a styled React-specific <h1> element using the App component, which is the main entry point for the React app.
This is the output from the code above:

Working with Slot and Children

As the children provided to these components, the default slot of the underlying Svelte component is set. We'll import a Svelte component called "Layout.svelte," and during the import, we'll add a query as a parameter in-react. Like the code below:

import Layout from './Layout.svelte?in-react';

<Layout>
  <h1>Hello world</h1>
</Layout>;

This indicates that a specific interaction or compatibility with React is being evaluated.

Creating a React-in-Svelte application

For us to create react in svelte, we have to go through the installation process again, but we'll be using the react plugin instead. just follow as we continue:

npm create vite@latest sveltris-svelte -- --template svelte
cd sveltris-svelte && npm install

Next

npm install sveltris
npm install --save-dev @vitejs/plugin-react

Now Let's update our vite.config.js file with the code below:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { sveltrisVitePlugins } from "sveltris";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte(), react(), ...sveltrisVitePlugins()],
});

We are done with the installation process. Next, let's create a file in your src directory with the following codes on them. Our first file is tab.jsx:

export default function Tab(title, content) {
  return (
    <div style={{ border: "3px solid #bc9aed", borderRadius: "5px", padding: "10px" }}>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

This code defines a reusable Tab component with a border, rounded corners, and padding. The title and content variables allow dynamic data insertion into the component, making it flexible for displaying varied content within the styled container.

Next, open the default src/App.svelte file and change its content with the following code:

<script>
  import Card from './Tab.jsx?in-svelte';
</script>

<main style="border: 3px solid #FFC107;padding: 25px;">
  <h1>Svelte App</h1>
  <Tab title="React Card" content="Card component created with React and imported to a Svelte app." />
</main>

From the code above, We imported and displayed the previously developed component within our Svelte application. When you launch the program, you should see something like the following:

Working with react Hooks

Sveltris unifies the use of React hooks within Svelte components via the wrapper. This wrapper allows you to interact with React hooks while also taking advantage of Svelte's reactive architecture by returning a read-only store that can be subscribed to by your Svelte components. This integration enhances your development experience by combining the strengths of both frameworks.

Subscribing to the Store: The Svelte store returned by the use function is reactive. This indicates that your Svelte component can receive updates from this store. When the value of the store changes as a result of interactions with React hooks, your Svelte component can immediately react and update.

Here is example code:

<script>
import { useState } from 'react'
import { use } from 'sveltris/svelte'

const counter = use(() => useState(0))
</script>

{#if $counter}
  {@const [count, setCount] = $counter}
  <button on:click={() => setCount(c => c + 1)}>
    {count}
  </button>
{/if}

From the above code, we use the useState hook to initialize a counter state, bind the state and setter to Svelte variables, and render a button that increments the counter when clicked, all while seamlessly merging React and Svelte concepts with the help of Sveltris. Here is the output:

## Building an interoperable social app with Sveltris
The convergence of Svelte and React, facilitated by the emerging concept of "Sveltris," presents an exciting opportunity to build a truly interoperable social media dashboard. This dashboard combines the reactive power of Svelte with the extensive ecosystem of React components, offering developers a novel approach to crafting comprehensive and feature-rich user interfaces.

We're using Sveltris to design an interoperable social media dashboard that includes Svelte and React components. We'll also make use of third-party packages from these libraries.

To display the bar chart and add a new post, we'll use the react-apexcharts package and the svelte-svoast package, respectively. Also, to avoid mistakes, make sure you thoroughly follow the method. Now, let us install the packages required to develop our application.

NB: We are expanding on the previous section's Svelte-in-React app.

yarn add react-apexcharts apexcharts svoast
or 
npm install react-apexcharts apexcharts svoast

The command above will install both react-apexcharts svelte-svoast libraries.

Next, paste the following code below in your src/index.css file to give the necessary style to your application:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Polysans, sans-serif;
}

main .header {
  text-align: center;
  margin: 10px 0;
}

.container {
  display: flex;
  justify-content: space-between;
  padding: 40px;
  height: 87vh;
}

.first-row {
  border: 3px solid #1a50e6;
  padding: 40px;
  width: 45%;
  height: 100%;
  overflow: auto;
}

.add-btn {
  cursor: pointer;
  font-size: 12px;
  padding: 10px 10px;
  margin-top: 10px;
  background-color: rgb(23, 57, 47);
  color: white;
  border: none;
  border-radius: 5px;
}
.add-btn:hover {
  background-color: rgb(44, 215, 166);
  color: black;
}
.posts-wrapper {
  margin-top: 40px;
}

.post-card {
  padding: 20px;
  border-radius: 5px;
  border: 2px solid #368be0;
  margin-bottom: 20px;
}

.post-card p {
  margin: 20px 0;
  color: #393e43;
}

.post-card img {
  max-width: 100%;
  border-radius: 5px;
}

.sec-row {
  border: 3px solid #51dc6d;
  padding: 40px;
  width: 50%;
}

Creating post cards and toast notifications

The toast and card notifications Contribute to improving the user experience in both scenarios by providing clear and succinct ways to deliver information and connect with users. They are critical tools for modern application design because they enable effective communication while retaining a visually appealing and user-friendly interface.

First, create a file named PostCard.svelte inside the src/ folder and paste the code below:

<script>
  export let id, author, content;
</script>

<div class="post-card">
  <h4>{author}</h4>
  <p>{content}</p>
  <img src={"https://source.unsplash.com/random/?beach," + id} alt="" />
</div>

The code above displays information about a post, such as the author's name, the content text, and an image that was dynamically obtained. Reactive updates from Svelte enable dynamic content modification based on values given to the component.

Next, create a file named Toast.svelte and paste the following code:

<script>
  export let showToast, toastMessage;
  import { Toasts, toast } from "svoast";

  $: if (showToast) {
    launchToast();
  }

  async function launchToast() {
    toast.success(toastMessage);
  }
</script>

<Toasts position="top-left" />

From the code above, the Svelte component handles the display of toast notifications. When showToast becomes true, the launchToast function is triggered. The toast.success() method from the "svoast" library is used to display a success toast notification with the message specified in toastMessage. The <Toasts> component is used to render and manage the toast notifications, with its position set to top-left.

Listing and adding random posts

To list and add random posts, replace the code below in the src/App.jsx file:

import React, { useState } from "react";
import Chart from "react-apexcharts";
import Toast from "./Toast.svelte?in-react";
import PostCard from "./PostCard.svelte?in-react";

const initialPosts = [
  {
    author: "Sam Tems",
    content: "Hi! Setting up my Otter account!",
  },
  {
    author: "John Tems",
    content: "Hello, Setting up teta account",
  },
];

const getPostCount = (posts, author) => {
  return posts.filter((post) => post.author === author).length;
};

const App = () => {
  const [posts, setPosts] = useState(initialPosts);
  const [showToast, setShowToast] = useState(false);

  const addRandPost = () => {
    const randPost = posts[Math.floor(Math.random() * posts.length)];
    const updatedPosts = [...posts, randPost];
    setPosts(updatedPosts);
    setShowToast(true);
  };

  return (
    <>
      <Toast showToast={showToast} toastMessage="New post added successfully!" />
      <main>
        <div className="header">
          <h1>Teta 🦦</h1>
          <button className="add-btn" onClick={addRandPost}>
            Add Random Post
          </button>
        </div>
        <div className="container">
          <div className="first-row">
            <div className="posts-wrapper">
              {posts.map((post, id) => (
                <React.Fragment key={id}>
                  <PostCard id={id} author={post.author} content={post.content} />
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </main>
    </>
  );
};

export default App;

Let's get an understanding of what each of the functions and code does from the code above:

Import Statements: imports React, the useState hook, and the Chart component from "react-apexcharts." Additionally, the Svelte components Toast and PostCard are imported using the React-specific query option "?in-react."
Initial Data: An initialPosts array holds a collection of sample posts with author and content.
getPostCount Function: This function figures out how many posts have been made by a particular author.
App Component: The primary App component manages posts and toast display state using React's useState hook.
addRandPost Function: This function updates the state and sends a toast notification when it adds a random post from the list of posts.
Return Statement:The component renders a toast notification using the Toast Svelte component and delivers JSX along with a header section and a button to add random posts. svelte PostCard.

We are Partially done with the app. Here is the output of the first stage of our Sveltris application

Visualizing post counts with a bar chart

We're going to add some code to the App.jsx file to create a bar chart showing how many posts each user has made.

Create a new state called chartData and fill it with the following default information:

const [chartData, setChartData] = useState(() => {
  const samPostsCount = getPostCount(posts, "Sam Tems");
  const johnPostsCount = getPostCount(posts, "John Tems");

  return {
    options: {
      chart: {
        id: "basic-bar",
      },
      xaxis: {
        categories: ["no of posts"],
      },
    },
    series: [
      { name: "Sam", data: [samPostsCount] },
      { name: "John", data: [johnPostsCount] },
    ],
  };
});

The code above uses React's useState hook to initialize and manage the state of a chartData object. The object holds the necessary data for rendering a bar chart, including chart options and series data based on calculated post counts. This setup enables the dynamic rendering of the chart as the post data changes.

To automatically update the chart data whenever a new post is made, modify the addRandPost() code with the code below:

const addRandPost = () => {
  const randPost = posts[Math.floor(Math.random() * posts.length)];
  const updatedPosts = [...posts, randPost];
  setPosts(updatedPosts);

  setChartData((prevChartData) => {
    const samPostsCount = getPostCount(updatedPosts, "Sam Tems");
    const johnPostsCount = getPostCount(updatedPosts, "John Tems");

    return {
      ...prevChartData,
      series: [
        { name: "Sam", data: [samPostsCount] },
        { name: "John", data: [johnPostsCount] },
      ],
    };
  });

  setShowToast(true);
};

Finally, modify the JSX code to display the bar chart using the chartData:

<div className="container">
  <div className="first-row">
    {/* ... */}
  </div>
  <div className="sec-row">
    <h3>Post Trends</h3>
    <Chart
      options={chartData.options}
      series={chartData.series}
      type="bar"
      width="500"
    />
  </div>
</div>

If you follow this tutorial, You should have the following output display on your screen

This app illustrates the potency of Sveltris by merging React and Svelte to construct potent applications.

We fashioned the Toast and PostCard components with Svelte, and for the Toast element, we utilized an external Svelte component. Moreover, within our App.jsx file, we also highlighted Svelte's capability to exchange responsive data between Svelte and React, underscoring Svelte's remarkable adaptability across frameworks.

Conclusion

Harnessing the capabilities of Sveltris to construct interoperable applications that seamlessly integrate React and Svelte brings forth a new realm of possibilities for modern web development. By combining the strengths of these two frameworks, developers can create versatile and dynamic user interfaces that leverage the unique features of each technology.

In this process, we've demonstrated how to create components that bridge the gap between React and Svelte, showcasing Svelte's remarkable compatibility and flexibility. As we've explored the seamless integration of functionalities such as toast notifications, post cards, and data sharing, it becomes evident that Sveltris is a powerful tool for promoting collaboration between React and Svelte, transforming them into complementary technologies rather than isolated choices.

Deep dive into React: State Management Types and its Importance

Opuama Lucky — Sun, 23 Apr 2023 20:41:00 +0000

Introduction

State management is a key concept in React, a popular JavaScript library for creating user interfaces. The data that changes within a component or application is referred to as its state. It entails handling an application’s state in a way that ensures consistency and avoids bugs.

State management in React can be accomplished using various techniques such as React’s built-in useState hook or external libraries such as Redux or MobX. It also provides a simple and flexible API to support state management in a React component. The useState hook is the most straightforward way to manage state within a component. It enables us to declare a state variable and update it as required.

In this article, you will understand in detail how the various type of state management operate and also the importance of state management

Outline:

What is a State
What is State Management
What is State Management in React
Types of State Management in React
Top 5 State Management Libraries
Importance of State Management

what is a state

State represents the value of a dynamic property of a React component at a given instance. React provides a dynamic data store for each component. The internal data represents the state of a React component and can be accessed using ‘this.state’ member variable of the component. Whenever the state of the component is changed, the component will re-render itself by calling the render() method along with the new state.

What is State Management in React

State management is the process of managing and maintaining an application’s data or state. An application’s state in software development refers to the current values and configurations of all its variables, objects, and components. State management is the process of managing an application’s state so that it can be easily accessed and manipulated by different components of the application.

State management is very important in modern web development, where complex applications are built with multiple interconnected components. A centralized state management system makes it easier to keep track of the application’s state, synchronize it across components, and manage state changes over time. React allows developers to update the state of a component and trigger a re-render of the component.

Types of State Management in React

The type of state management to manage a React app depends on the size and complexity of the application.
There are four main types of state you need to properly manage in your React app:

Local state
Global state
Server state
URL state

Local State

Local state in React refers to a state that is managed within a component and is not accessible to other components. It is the most straightforward type of state to manage in React.

Local state is defined using the useState hook, which is a built-in React hook that allows you to add state to a functional component. The useState hook returns an array with two elements: the current state value and a function to update that value.

Here’s an example of how to use the ‘useState’ hook to manage local

import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}


return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}

From the above code, The ‘useState’ hook is used to manage the count state variable. The handleClick function uses the setCount function to update the count variable, which causes the component to be re-rendered with the updated state.

But useReducer is more dynamic than useState because it includes a built-in way to perform a variety of different state operations with the help of the reducer function.

Global State

Global state in React refers to state data that is shared by multiple components in an application. This is useful for managing application-wide data, such as user authentication status, theme settings, or API data.

There are several approaches to implementing global state in React, but one popular method is to use a state management library such as Redux, MobX, or Context API.

Here’s an example of how to implement global state in a React application using the Context API:// App.js

import React, { useState } from ‘react’;
import { UserContext } from ‘./UserContext’;
import Header from ‘./Header’;
import MainContent from ‘./MainContent’;

function App() {
const [user, setUser] = useState(null);

return (
<UserContext.Provider value={{ user, setUser }}>
<Header />
<MainContent />
</UserContext.Provider>
);
}

The useState hook is used in the code above to define a user state variable and a setUser function to update it. Then, we create a UserContext object using the Context API’s create Context function and use the same API’s Provider component to make the user and setUser values available to all child components wrapped by the Provider.

We can use the useContext hook in the child components to get the user value from the global state. This value, is then used to display a welcome message in the application’s header. Like the code below:

// Header.js
import React, { useContext } from ‘react’;
import { UserContext } from ‘./UserContext’;

function Header() {
const { user } = useContext(UserContext);

return (
<div>
<p>Welcome, {user ? user.name : ‘Guest’}!</p>
</div>
);
}

Server State

Server state is generated or fetched on the server side and then passed down as props to the client-side React application. It can be useful for improving application performance and reducing the amount of work required by client-side JavaScript code.

Here’s an example of how to use server state in a React application:

// server.js (Node.js example)

const express = require(‘express’);
const React = require(‘react’);
const ReactDOMServer = require(‘react-dom/server’);
const App = require(‘./App’);

const app = express();

app.get(‘/’, (req, res) => {
const initialState = { count: 0 };
const appString = ReactDOMServer.renderToString(<App {…initialState} />);
res.send(
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id="app">${appString}</div>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
</script>
<script src="/bundle.js"></script>
</body>
</html>
);
});

app.listen(3000, () => {
console.log(‘Server started on port 3000’);
});

The code above creates a simple Node.js server that will convert a React application to an HTML string and send it to the client. We also define an initial state object with a count property set to zero.

Using the spread operator, we then pass this initial state object to the App component as props. The initial state object is also embedded in a script> tag, which sets a global variable called INITIAL STATE.

In the client-side JavaScript code, we import the useState hook and define a count state variable and a setCount function to update it. We also use the initial count value passed down as props to set the initial state of the component. Like the code above:

// App.js

import React, { useState } from ‘react’;

function App(props) {
const [count, setCount] = useState(props.count);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}

export default App;

URL State

URL state refers to storing and managing the application state via the browser’s URL. This can be useful for creating shareable links containing information about the application’s current state, as well as allowing users to bookmark specific states of the application.

There are several approaches to implementing URL state in React, but one popular method is to use a third-party library, such as React Router.

Here’s an example of how to use React Router in a React application to implement URL state:

// App.js
import React from ‘react’;
import { BrowserRouter as Router, Switch, Route, Link } from ‘react-router-dom’;
import Home from ‘./Home’;
import ProductList from ‘./ProductList’;
import ProductDetail from ‘./ProductDetail’;

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to=”/”>Home</Link>
</li>
<li>
<Link to=”/products”>Products</Link>
</li>
</ul>
</nav>

<Switch>
<Route path=”/products/:id” component={ProductDetail} />
<Route path=”/products” component={ProductList} />
<Route path=”/” component={Home} />
</Switch>
</div>
</Router>
);
}

The preceding code defines a basic React application with three pages: Home, ProductList, and ProductDetail. To wrap up our application and provide routing functionality, we use the BrowserRouter component from React Router.

We also define two links in a navigation bar that use the React Router Link component to navigate between pages. The Link component creates an HTML link that updates the browser’s URL without reloading the entire page.

In the ProductList component, we use the useParams hook from React Router to access the current URL parameter. By defining a list of products and using the Link component to generate links that include the id of each product in the URL.

// ProductList.js
import React from ‘react’;
import { Link } from ‘react-router-dom’;

function ProductList() {
const products = [
{ id: 1, name: ‘Product 1’ },
{ id: 2, name: ‘Product 2’ },
{ id: 3, name: ‘Product 3’ }
];

return (
<div>
<h2>Product List</h2>

<ul>
{products.map(product => (
<li key={product.id}>
<Link to={/products/${product.id}}>{product.name}</Link>
</li>
))}
</ul>
</div>
);
}

export default ProductList;

The useParams hook is used in the ProductDetail component to access the current URL parameter and to fetch and display the details of the selected product:

// ProductDetail.js
import React, { useEffect, useState } from ‘react’;
import { useParams } from ‘react-router-dom’;

function ProductDetail() {
const { id } = useParams();
const [product, setProduct] = useState(null);

useEffect(() => {
// Fetch product details based on the URL parameter
fetch(/api/products/${id})
.then(response => response.json())
.then(data => setProduct(data));
}, [id]);

if (!product) {
return <div>Loading…</div>;
}

return (
<div>
<h2>{product.name}</h2

Top 5 State Management in React

A state management library is a tool or framework that helps developers manage and maintain application state in a structured and efficient manner. It provides a centralized store or mechanism for storing and updating this data, and it frequently includes tools for managing the complexity of state changes in larger applications.

state management libraries for React:

state management library is a tool or framework that helps developers manage and maintain application state in a structured and efficient manner. It provides a centralized store or mechanism for storing and updating this data, and it frequently includes tools for managing the complexity of state changes in larger applications.

Here are five popular state management libraries for React:

Redux:

Redux is a well-known state management library in the React ecosystem. It provides a centralized store for managing the application state and employs a unidirectional data flow architecture that makes reasoning about your application’s state simple. Redux also has a robust ecosystem of plugins and extensions, making it an extremely versatile tool for managing state in React applications.

MobX:

MobX is another popular React state management library, that offers a simple and more intuitive way of managing state than Redux. It employs a reactive programming model that automatically updates the state of your application whenever data changes, making it easier to write and maintain code.

Vuex:

Vuex is a Vue.js state management library that provides a centralized store for managing application state. It also has features like state snapshots, time-travel debugging, and a module-based architecture.

Recoil:

Recoil is a newer React state management library that aims to be easier and more intuitive than Redux. It employs a “recoil” model that allows you to define state atoms and selectors while providing a set of hooks that make reading and writing to those atoms simple.

Zustand:

Zustand is a lightweight React state management library that provides a simple and intuitive way of managing states by utilizing the React hooks API. It has a small API surface area and is simple to learn and use, making it an excellent choice for smaller projects or simple state management requirements.

Importance of State Management in React

State management is an important concept in modern web development because it allows web applications to keep their data and user interface up to date in response to user actions and events. Here are some of the key reasons why state management is important:

Helps manage application complexity: As the size and complexity of web applications grow, maintaining and updating state can become difficult. By providing a centralized mechanism for managing application state, state management techniques and tools aid developers in managing this complexity.
Enables dynamic user interfaces: Web applications can use state management to create dynamic user interfaces that respond to user interactions, events, and data changes. A dynamic user interface is critical for providing a consistent user experience and increasing user engagement.
Improves application performance: Efficient state management can improve application performance by reducing the number of unnecessary updates and data transfers between the client and server.
Enables application testing and debugging: Testing and debugging web applications make effective state management critical. State management techniques can help developers identify and resolve bugs and other issues more quickly and efficiently by providing a clear, and predictable way to manage the application state.
Facilitates collaboration: More than one developer can work on the same application without interfering with each other’s work. Thanks to state management. State management can help developers avoid conflicts and ensure that everyone is working toward the same goals.

Conclusion

State management in React is an important and ongoing challenge for any React project. Managing it effectively requires not only the right state management tool but also a clear understanding of the various types and having the right people on your team to build a healthy react project.

How to Create a Yearly Count Down Timer

Opuama Lucky — Fri, 07 Apr 2023 18:33:04 +0000

Introduction

Countdown timers have been around since the early twentieth
The development of digital electronics in the 1950s resulted in the development of electronic countdown timers. These have been used in a wide range of applications, including scientific experiments, space missions, and sporting events.
Digital timers became more widely available in the 1970s and were used in consumer products such as microwave ovens and alarm clocks.
Countdown timers have become increasingly popular in the digital realm in recent years, appearing in online games, apps, and websites. Countdown timers are now widely used in a wide range of applications, from cooking and fitness to business and education.Countdown timers have been around since the early 1900s. Countdown timers were first used in aviation, where pilots used them to time flights and monitor fuel consumption.In this article i we will be creating a simple yearly count down timer with html, css, and javascript

What is a Count Down Timer

A countdown timer is a tool that displays the amount of time until a specific event or deadline. It is commonly used to help keep track of time to avoid missing a significant event or deadline. Countdown timers are found in various contexts, such as sporting events, concerts, and online meetings. They are viewable on smartphones, computers, and dedicated digital clocks. Countdown timers can help people stay on track and manage their time more effectively.

Prerequsite

Before getting started with this tutorial, you need to have basic knowledge of the following:

Html
CSS
Javascript

Developing the Frontend

creating our frontend with just html and css. copy and paste the following.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>New Year Eve</h1>

    <div class="container">
      <div class="count-hours">
        <p class="big-text" id="days">0</p>
        <span>days</span>
      </div>
      <div class="count-hours">
        <p class="big-text" id="hours">0</p>
        <span>hours</span>
      </div>
      <div class="count-hours">
        <p class="big-text" id="mins">0</p>
        <span>mins</span>
      </div>
      <div class="count-hours">
        <p class="big-text" id="seconds">0</p>
        <span>seconds</span>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Adding style to our html design

*{
    box-sizing: border-box;
}
body{
    background-size: cover;
    background-position: center, center;
    min-height: 100vh;
    font-family: "poppins" sans-serif;
    margin: 0;  
    display: flex;
    flex-direction: column; 
    background-image: url(time.jpg);
    align-items: center;
    justify-content: center;

}
.container{
    display: flex;
}
h1{

    color:white;
    font-size: 5rem;
    padding-top:20px ;


}
.count-hours{
}
span{
    color: white;
    padding-left:40px;
}

.big-text{
    color: azure;
    font-size: 70px;
    padding: 10px;
    margin: 0 2rem;
}

Now that we are done with our frontend design, let's head straight to adding functionality to our work.

const day = document.querySelector("#days");
const hour = document.querySelector("#hours");
const min = document.querySelector("#mins");
const sec = document.querySelector("#seconds");
const newYear = "1 jan 2024";

function countDown() {
  const newYearDate = new Date(newYear);
  const currentDate = new Date();
  const totalSeconds = (newYearDate - currentDate) / 1000;
  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const mins = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds % 60);

  day.innerHTML = days;
  hour.innerHTML = hours;
  min.innerHTML = mins;
  sec.innerHTML = seconds;
  // console.log(days, hours, mins, seconds);
}
countDown();

setInterval(countDown, 1000);

From the code above, Firstly, we get all html documents needed for the id attribute. Then, declare the variable for the new year in anticipation.
The countdown() performs all the activities, like getting the total number of seconds, days, hours, mins, and seconds remaining in the new year(1 jan 2024). And displaying the data to our frontend using the innerHTML property

Conclusion

We have been able to create a simple countdown timer using html, css, and javascript. If u follow this tutorial, your project should be working fine without any errors.
Thanks for reading. Please like and add your comments in the comment session

Text to Speech Powered by Google Api

Opuama Lucky — Mon, 07 Mar 2022 20:40:17 +0000

Introduction

The Web Speech API is used to integrate voice data into web applications. It enables developers to generate text-to-speech output, continuous dictation, and control using scripting. Web pages can use the JavaScript API to control activation in order to handle results and alternatives.
In this tutorial, we will create a simple webpage and convert our text to speech using a Google API. You can check the browser compatibility for the Web Speech API Here

Text To Speech

Text-to-speech (TTS) is a type of assistive technology that reads digital text aloud. It's sometimes called “read aloud” technology. TTS can take words on a computer or other digital device and convert them into audio.

Prerequisites

Basic understanding of Html,Bootstrap and javascript
A code editor. I’ll be using Visual Studio Code
Web browser. I recommend using Google Chrome or Mozilla Firefox.

Important Factor

Speech Synthensis: is the artificial production of human speech. It is used to translate written information into aural information where it is more convenient, especially for mobile applications such as voice-enabled e-mail and Unified messaging.
Speech Synthensis Utterance: it represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)

Building our Font-end
First, make a folder or directory Text-speech and create two new files called index.html and index.js. The body section includes a form, textarea, input, and a button.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>type and speak</title>
</head>

<body  class=" text-center d-flex justify-content-center ">
    <div class="container text-center">
        <img src="image/dul.png" class=" mb-5 col-4 opacity-90 ">  
        <div class="row">   
            <div class="col-md-6 mx-auto">
                <form> 
                    <div class="form-group">
                        <textarea name="" id="text-input"  class="form-control form-control-lg" placeholder="Type Anything Here... "></textarea>
                    </div>
                    <div class="form-group">
                        <label for="rate">Rate</label>
                        <div id="rate-value" class="badge badge-primary float-right">1</div><br>
                        <input type="range" id="rate" class="custom-range" min="0.5" max="2" value="1" step="0.1">
                    </div>
                    <div class="form-group">
                        <label for="pitch" >Pitch</label>
                        <div id="pitch-value" class="badge badge-primary float-right">1</div><br>
                        <input type="range" id="pitch" class="custom-range" min="0.5" max="2" value="1" step="0.1">
                    </div>
                    <div class="form-group">
                        <select  id="voice-select" class="form-control form-control-lg mb-2"></select>
                    </div>
                    <button class="btn btn-primary btn-lg btn-block" id="speak">speak it</button>
                    <button class="btn btn-warning btn-lg btn-block" id="pause">pause</button>
                </form>

        </div>      
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
     integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" 
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
 integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="js/file.js"></script>

</body>
</html>

Output

Next is our javascript.
We will go through the process step by step so that everyone understands. Enter the index.js file.
The first step is to initialize all variables required by all DOM elements involved in the front-end.
Then, set a variable synth = window.speechSynthesis.

//Dom Element
let textForm = document.querySelector("form");
let textInput = document.querySelector("#text-input");
let vioceSelect = document.querySelector("#voice-select");
let rate = document.querySelector("#rate");
let rateValue = document.querySelector("#rate-value");
let pitch = document.querySelector("#pitch");
let pitchValue = document.querySelector("#pitch-value");

let synth = window.speechSynthesis;

Following that, we begin to synthesize voice. getVoice() returns a list of all available voices represented by Google Api SpeechSynthesisVoice objects. Then, if there are no voices, set a conditional statement to get the voicechanged listener.
Then, for each option, create data- attributes containing the name and language of the associated voice so that we can easily grab them later on, and append the options as children of the select.

let voices = synth.getVoices();
if (voices.length !== 0)  
} else {
  synth.addEventListener("voiceschanged", function () {
    voices = synth.getVoices();
    //lets loop through voice and create an option for each one
    voices.forEach((voice) => {
      //lets create option element
      let option = document.createElement("option");
      //lets fill option with voice and language
      option.textContent = voice.name + "(" + voice.lang + ")";
      //lets set needed option atributes
      option.setAttribute("data-lang", voice.lang);
      option.setAttribute("data-name", voice.name);
      vioceSelect.appendChild(option);
    });
  });
}

List of voices generated

)
Next, let's create a speak function called speak and add a conditional statement that says if textinput is not equal to zero, initailize speak text to new SpeechSynthesisUtterance and pass it to textInput.value.
Then, to end and detect errors, create speakText.onend and speakText.error functions respectively.
next, we add selectedVoice to the attribute data-name and loop through the voice, then set the pitch and rate.

let speak = () => {
  if (textInput.value !== "") {
    // get speak text
    speakText = new SpeechSynthesisUtterance(textInput.value);
    //speak end
    speakText.onend = (e) => {

    };
    //speak error
    speakText.error = (e) => {

    };
    //selected voice
    const selectedVoice =
      vioceSelect.selectedOptions[0].getAttribute("data-name");
    //lets loop through voices
    voices.forEach((voice) => {
      if (voice.name === selectedVoice) {
        speakText.voice = voice;
      }
    });
    // set pitch and rate
    speakText.rate = rate.value;
    speakText.pitch = pitch.value;
    synth.speak(speakText);
  }
};

Let's add a submit listener to the submit button in order to activate the submit function when it is submitted.

textForm.addEventListener("submit", (e) => {
  e.preventDefault();
  speak();
  textInput.blur();
});

Next add a 'change' listener to the rate and pitch range sliders and their properties as the slider's value changes. We've already specified the minimum, maximum, and default values for the slider in the HTML tag.

rate.addEventListener("change", (e) => {
  rateValue.textContent = rate.value;
});
pitch.addEventListener("change", (e) => {
  pitchValue.textContent = pitch.value;
});

Lastly let's add a change listener to voiceSelect to activate the speak function when changed.

vioceSelect.addEventListener("change", (e) => {
  speak();
});

Conclusion

We have now completed the tutorial on creating and converting text to speech using Google API. If you follow this tutorial from beginning to end, you should be able to get it right.

The tutorial's repo is available here. You can fork it and modify it to suit your needs.

Top 10 Web Development Tools For Fullstack Developers

Opuama Lucky — Fri, 24 Dec 2021 20:08:54 +0000

Introdction

Since the birth of the internet, web development tools have come a long way. To begin with, we no longer require refrigerator-sized computers to create basic web pages, We can use the power of well-tested libraries to optimize our process and gain more options for flexible design. Yet, with the number of web development tools expanding practically daily, it might be difficult to choose the finest software to get the task done.
To assist you, we've compiled a list of crucial frontend and backend development tools to get you started. If you want to learn more about one in particular, please choose it from the list below.

Jquery
Grunt
Sass
Mysql
Code pen
TypeScript
NPM
Chrome Development Tool
Visual Studio Code
Github

Jquery

Jquery is a compilation of the most important online user interface components. These are tabs, accordions, tooltips, overlays, exposing effects, and scrollables. They can significantly improve the usability and responsiveness of your website and It is one of the most popular front end development tools. HTML document manipulation, traversal, and Ajax are quite simple with these JavaScript libraries.
This library is not a framework with a steep learning curve, extensive pre-work, and rigid code guidelines. There are no predefined HTML or CSS structures to follow. You can instantly begin utilizing the library by including it on your pages and you can freely design the look and feel of your site.

Download link (https://jquery.com/download/)

Grunt

Grunt is a task-based command-line tool that accelerates workflows by minimizing the amount of time spent preparing assets for production. It accomplishes this by breaking down jobs into tasks that are automatically compiled as you go. Essentially, you can use Grunt to automate most operations that you would normally have to configure and run manually.
If you can't find a suitable grunt plugin for your application, you can create your own.

Download link (https://gruntjs.com/)

Sass

Sass is the world's most mature, stable, and powerful professional-level CSS extension language. It is a css preproccessor and it is compatible with all versions of CSS.
Sass is ideal for working with CSS because of advanced features such as control directives for libraries, autoformatted outputs, and external libraries.
Furthermore, it is an excellent tool for front-end design. It provides access to a plethora of useful features for manipulating colors, fonts, and other UI components.

Download link (http://sass-lang.com/)

Mysql

MySQL is an open-source relational database management system that is widely use. It's simple to use and is frequently referred to as a component of the LAMP web development stack, which stands for the letter 'M' in the acronym of popular tools Linux, Apache, and PHP/Perl/Python.
MySQL is free, simple to set up and learn, and scales quickly, making it a popular choice for most backend developers looking for a database management system.

download link (https//https://www.mysql.com)

Codepen

CodePen is a collaborative development platform for front-end designers and developers. Create and publish a website, display your work, create test cases to learn and debug, and find inspiration.
It serves as an online code editor and open-source learning environment where developers can create and test code snippets known as "pens."

Download link (https://codepen.io/)

TypeScript

TypeScript is a strongly typed programming language based on JavaScript that provides better tooling at all scales.It extends JavaScript syntax to allow for tighter integration with your editor. Errors should be caught early in the editing process.

Download link (https://www.typescriptlang.org/index.html#download-links)

NPM

Npm is the JavaScript package manager for Node.js. It aids in the discovery of reusable code packages and their assembly in powerful new ways. This web development tool is a command-line utility for interacting with a repository that aids in the package's development.
Npm is the largest Software Registry in the world.

Download link (https://https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

Chrome DevTool

Chrome DevTools are a set of web developer tools that are integrated directly into the Google Chrome browser.These tools enable developers to perform a wide range of testing, and saving significant time.

Download link (https://developer.chrome.com/devtools)

Visual Studio Code

Visual Studio Code is a simplified code editor that supports development operations such as debugging, task execution, and version control. It aims to provide only the tools a developer requires for a quick code-build-debug cycle, leaving more complex workflows to full-featured IDEs like Visual Studio IDE.
It is an intelligent code editor with many features such as code completion, refactoring, syntax highlighting, embedded Git, and testing support.

ddownload link (https://https://code.visualstudio.com/)

Github

Today, GitHub is the most powerful tool for software developers. It can be viewed as a vast repository of coding knowledge.
GitHub is one of the best web application development tools, allowing developers to review code, manage projects, and build software.
You can use it to version control your own project or to build your developer profile by contributing to other people's projects.

Download link (https://github.com)

Conclusion

Web development is a thriving community of hardworking developers, coders, and designers. A wide variety of web development frameworks and tools are being created to meet their every need. From the above list of the top Web Development Tools jquery, Grunt, Sass, Mysql, Code pen, TypeScript, NPM, Chrome Development Tool, Visual Studio Code, and Github are licensed tools, which are best of the best and recommended for all developers, whether experience or novice.

Vanilla XMLHttpRequest method without using jquery

Opuama Lucky — Sat, 23 Oct 2021 00:34:06 +0000

Introduction

Ajax is short for "Asynchronous JavaScript and XML", it is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications without interfering with the display and behaviour of the existing page.
Ajax is a mechanism for making partial page updates. It enables you to update sections of a page with data that comes from the server, whilst avoiding the need for a full refresh. Making partial updates in this way can be effective in creating fluid user experiences and can decrease the load put on the server.

Anatomy of a basic Ajax request:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'send-ajax-data.php');
xhr.onreadystate = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};
xhr.send(null);

Here, we are declearing a variable of the required class to make an HTTP request to the server. We are then calling its open method, specifying the HTTP request method as the first parameter and the URL of the page we’re requesting as the second.
The onreadystate is asynchronous, which means it gets called at any time. These types of functions are callbacks — one that gets called once some processing finishes.
Finally, we call its send method passing null as a parameter. If POST-ing the request, this parameter should contain any data we want to send with the request.
There are more detailed explanation
Lets start coding and see the outcome and beauty of vanilla js

Create a login form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" csontent="width=device-width, initial-scale=1.0">
    <title>pratical login page</title>
    <link rel="stylesheet" href="fontawesome-free-5.15.4-web/css/all.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
   <div class="wrapper">
        <section class="form login">
            <header>Login</header>
            <form action="#" method="POST" enctype="multipart/form-data" id="myForm">
                <div class="error-txt"></div>
                    <div class="field input">
                        <label >Username</label>
                        <input type="text" name = "username" placeholder="Enter username">
                    </div>
                    <div class="field input">
                        <label >Password</label>
                        <input type="password" name ="password" placeholder="Enter your password">
                        <i class="fas fa-eye"></i>
                    </div>
                    <div class="field button">
                        <input type="submit" value="continue to chat" >
                </div>
            </form>
            <div class="link">Not yet signup? <a href="index.php">Signup now</a></div>
        </section>
   </div>
   <script src="login.js"></script>

Style login page if neccesary

Lets add css (cascading stylesheet) to structure and beautify the page.

*{
    margin: 0 ;
    padding: 0 ;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'poppins',sans-serif;
}
body{ 
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f7f7f7;
}
.wrapper{
background: rgb(172, 224, 87);
width: 450px;
border-radius: 16px;
box-shadow: 0,0,128px,0 rgba(0, 0, 0, 0.1),
            0 32px 64px -48px rgba(0, 0,0,0.5);
}
/* signup form css code */
.form{
    padding: 25px 30px;
}
.form header{
    font-size: 25px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}
.form form{
    margin: 20px 0 ;
}
.form form .error-txt{
    color: #721c24;
    background: #f8d7da;
    padding: 8px 10px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #f5c6cb;
    display: none;
}
.form form .field{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

    .form form .name-details{
display: flex;
}
form .name-details .field:first-child{
    margin-right: 10px;
}
form .name-details .field:last-child{
    margin-left: 10px;
}
.form form .field input{
    outline: none;
}
.form form .input input{
    height: 40px;
    width: 100%;
    font-size: 16px;
    padding: 0 10px;
    border: 1px solid #ccc;
}
.form form .image input{
    font-size: 17px;
}
.form form .button input{
    margin-top: 13px;
    height: 45px;
    border: none;
    font-size: 17px;
    font-weight: 400;
    background: #333;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.form form .field i{
    position: absolute;
    right: 10px;
    color: #ccc;
    top: 58%;
    transform:(-50%);
    cursor: pointer;
}
.form form .field i.active::before{
    content: "\f070";
    color: #333;
}
.form .link{
    text-align: center;
    margin:10px 0;
    font-size: 17px;

}
.form .link a{
    color: #333;
}
.form .link a:hover{
    text-decoration: underline;
}

Create connection to database

<?php
$conn = mysqli_connect("localhost","root","","a_database");
if ($conn) {

}else{
    echo "Not connected ";
}
?>

Create a php file connecting to the database

<?php
include "connection.php";

    $username =   $_POST['username'];
    $password =   $_POST['password'];

    if (! empty($username) && ! empty($password)){
//lets check if user entered email and password matched database and table
      $sql = mysqli_query($conn, "SELECT * FROM users WHERE username = '$username' AND password = '$password '" );
      if (mysqli_num_rows($sql) > 0 ) {//check if user credential matched
       echo "success";

      }else {
        echo "Username and Password incorrect";
      }
    }else {
      echo "All field are required";
    }


?>

In the above code we include the connection script and ensure the username and password is correct if not the page should echo the Else statements

Using the vanilla javascript to fetch data from the database

const form = document.querySelector("#myForm"),
  errorText = form.querySelector(".error-txt");

form.onsubmit = (e) => {
  e.preventDefault();//preventing form from submitting
  //start with ajax

  let xhr = new XMLHttpRequest();// creating xml object
  xhr.open("POST", "get.php", true);
  xhr.onload = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {//status 200 is a successful return.
        let data = xhr.response;

        if (data == "success") {

          location.href = "logout.php";

        } else {
          errorText.textContent = data;
          errorText.style.display = "block";

        }
      } 
    }
  }
  // sending form from ajax to php
  let formData = new FormData(form); // creating new form object.
  xhr.send(formData);//sending the  form data to php

}

Here is the image of the login form

Output after submitting the form

Conclusion

In this article we have been able to create a simple login page that accept a username and password and then send to the backend(Database) for authentication without loading the entire page using Vanilla Ajax.
I hope you’ve enjoyed bench press of vanilla Ajax. In fact, we’ve covered most of the basics of Ajax without the crutches, ahem shackles, of jQuery.

I’ll leave you with this concise way of making Ajax calls: