DEV Community: Ishaq Nasir

Client-Side and Server-side

Ishaq Nasir — Thu, 13 Apr 2023 12:32:35 +0000

Introduction

when getting deep into JavaScript, the use of frameworks such as React. we'd always see them implementing words like client-side and server-side in their documentation which sometimes makes people new to such words lost.
Two types of code are implemented when creating web applications: client-side and server-side.
A basic understanding of the differences between these two types of code is essential for building high-performance and efficient web applications. In this article, we'll discuss what server-side and client-side development is, and how they differ.

What is client-side

In web development, client-side refers to the interface that is displayed on the web Application. client-side is almost always written in Javascript, HTML, and CSS. Client-side code handles tasks such as user interface components like buttons and forms, as well as logic that handles user interactions and input.

Client-side allows for a faster and more responsive user experience. By performing tasks on the client side, developers can reduce the amount of time for pages to load and respond to user input.

What is server-side

Much like the client side, the server side refers to a piece of code task running on the server. In the past, virtually almost all web Application logic ran on the server side, and this included rendering dynamic web pages, interacting with databases, identity authentication, and push notifications.

server-side allows developers to perform tasks that would be difficult to do on the client side. e.g, server-side code can be used to interact with databases, perform data analysis, or integrate with other systems such as APIs.

Difference between server-side and client-side

Server-side code runs on the server while client-side code runs on the user device, such as mobile phones and computers.
Server-side code can be used to perform complex calculations, interact with databases, and integrate them with other systems while Client-side code, on the other hand, is typically used to handle user interactions and input, as well as to create visual effects and other interactive elements.

Introduction to Zero-Knowledge Proofs

Ishaq Nasir — Mon, 06 Feb 2023 08:41:07 +0000

A zero-knowledge proof ZKP is a method by which one party the prover can authenticate to another party the verifier that a statement is true, without revealing any additional information beyond the fact that the statement is indeed true. In simpler terms, it means the ability to prove honest computation without inputs.

ZKPs == Honest computation

Properties of Zero-Knowledge Proofs

There are three properties that are critical for ZKP to be considered and the combination of the three makes it useful in maintaining privacy, security, and sensitive information.
They are;

Completeness:
The verifier must be convinced of the statement's truth if the prover is indeed an honest authentication.
Soundness:
If the prover is cheating, the verifier should not be convinced of the statement's authentication therefore tends to fail the process of authentication.
Zero Knowledge:
If the statement is true, no verifier learns anything other than the fact that the statement is true and authentic.

Types of Zero-Knowledge Proofs

There are several types of zero-knowledge proofs depending on the use case it’s needed, and here
is a list of the popular ones and what they do:

Interactive-proof-system:

The interactive proof system is a ZKP that allows the prover and verifier to engage in an interactive proof system in order to validate that the statement is true. i.e the prover sends the verifier an encrypted message and in return, the verifier sends messages to challenge the prover.

A real-life use case for an interactive proof system is in digital voting systems.
In these systems, voters want to prove to the voting authority that they have cast their vote, without revealing their actual vote. The voting authority wants to be sure that the voters have cast their votes, without being able to see the vote itself.

An interactive proof system can be used to verify that the voters have cast their vote, without revealing the actual vote to the voting authority. Voters can generate proof that they have cast their vote, and send it to the voting authority. The voting authority can then verify the proof without seeing the actual vote. This way, the voter's privacy is protected, while the voting authority is able to ensure the integrity of the voting process.

Non-Interactive-Proof-system:

This is the process by which the prover generates proof that the verifier can verify without any interaction with the prover. This is useful when the prover and verifier are not active at the same time.

A real-life use case for a non-interactive proof system can be found in supply chain management where a producer and a consumer come into place. In this scenario, the producer wants to prove to the consumer that the product was made using sustainable materials without revealing the material used, On the other hand, the consumer wants to verify that the material used in the product is sustainable without having access to the producer supply-chain information.

A non-interactive proof system is used to create proof that the product is made from a sustainable material and attach it to the product. The consumer can then verify the proof without having to interact with the producer. This way, the manufacturer's supply chain information is protected, while the customer is able to verify the sustainability of the product.

Succinct non-interactive arguments of knowledge (SNARKs):

SNARKS are a type of ZKP that are succinct and non-interactive i.e They have small-size proofs. They’re widely used in blockchain technology and other decentralized systems, where the proof size needs to be small to allow for efficient verification.

An example can be seen in a secure multi-party computation, where different parties want to jointly compute a function, without revealing their inputs to each other.

SNARKs can be used to prove that the function was computed correctly, without revealing the inputs used. This way, the privacy of the parties' inputs is protected, while the accuracy of the computation is ensured.

Proof of Knowledge (PoK):

This is a type of ZKP that proves that the prover knows a secret without revealing the secret itself. PoKs are often used in secure authentication systems and digital signatures.

An example is when a user wants to deploy computations to a cloud provider without revealing the inputs used. SNARK can be used to prove that the computations were performed correctly, without revealing the inputs.

Proof of Confidential Knowledge (PoCK):
The PoCK is a type of ZKP that proves that the prover knows a secret and the secret is encrypted.

An example can be found in the authentication of an online financial transaction.

A user wants to prove to a financial institution that they have the necessary knowledge to perform a transaction, without revealing the actual information.

When a user wants to transfer stock from their account, they need to prove that they know the correct account password. A PoCK can be used to prove that the user knows the password, without actually revealing the password. The financial institution can then verify the PoCK and confirm the authenticity of the user, without having access to the password.

Advantages of Zero Knowledge

Privacy-preserving: ZKPs allows for the verification of information without revealing any additional details about the prover's secret, thus preserving their privacy and data.
Secure verification: ZKPs provide a secure process for verifying information, as the verifier can be sure that the prover knows the secret, without learning the secret themselves.
Scalability: ZKPs can be used to verify large amounts of data, making them suitable for use in decentralised systems and blockchain technology.
Flexibility: ZKPs can be used in a variety of contexts, such as secure identification, privacy-preserving transactions, and more.
Non-interactive: Some ZKPs are Non-interactive, which means that the prover and the verifier do not need to communicate with each other in order to complete the proof.

Application of Zero-Knowledge Proofs

Zero-knowledge proofs have several potentials which include:

Secure identification: ZKPs can be used to verify a person's identity without revealing any additional information about their identity.
Privacy-preserving transactions: ZKPs can be used to verify transactions on a blockchain network while preserving the privacy of the transaction details.
Secure voting systems: ZKPs can be used to verify the validity of votes in a secure and private manner.
Data privacy: ZKPs can be used to protect sensitive information, such as medical records, financial information, and more.

Conclusion

Zero-knowledge proofs are a powerful tool for maintaining the privacy and security of sensitive information, while still allowing for the verification of that information. With their ability to verify information without revealing any additional details, ZKPs have the potential to revolutionize many different areas, from secure identification to privacy-preserving transactions and more. As the use of ZKPs continues to grow, we can expect to see even more innovative applications of this technology in the future.

Build a blog profile in Next using Cloudinary and Xata

Ishaq Nasir — Wed, 30 Nov 2022 22:34:27 +0000

Prerequisite

Javascript
Next | React

Introduction

Building a blog profile using xata as the backend and cloudinary to handle images.
xata is a serverless backend created to connect with your front-end application.

Setting up NextJS

In this section we’ll be building the structure of our front-end application with next js.

N:B at the moment of this article, version 12.2.0 was implemented and there can be slight changes to version 13 which will be out soon.

Installation of NextJS : Before the installation of next, the article assumes we have the node and npm installed https://nodejs.org/en/download/package-manager/

Npm installation.

https://docs.npmjs.com/cli/v6/commands/npm-install

Install NextJS

https://nextjs.org/learn/basics/create-nextjs-app/setup

Upon the successful installation of these tools, we’d have a structure of

In my app folder, we need to create a component folder, the folder will hold every component of our web app.
We’ll be creating files

Header.js
post.js
uploadwidget.js

In our Header.js file, we’re going to build a navigation bar and button that handles our authentication upon signing into the app for us to render in the pages/index.js.

 import { useSession, signIn, signOut } from "next-auth/react";
    import Link from "next/link";
    export default function Header() {
      const handleSignin = (e) => {
        e.preventDefault();
        signIn();
      };
      const handleSignout = (e) => {
        e.preventDefault();
        signOut();
      };
      const { data: session } = useSession();
      return (
        <div className="header">
          <Link href="/">
            <a className="logo">FlauntSpace</a>
          </Link>
          {session && (
            <a href="#" onClick={handleSignout} className="btn-signin">
              SIGN OUT
            </a>
          )}
          {!session && (
            <a href="#" onClick={handleSignin} className="btn-signin">
              SIGN IN
            </a>
          )}
        </div>
      );
    }

We imported the next link and the next-auth for it to handle authentication using third-party (GitHub, google) while we did this, the next auth library gives us the functionality to handle the signing.

Now, we open up our pages/index.js and clear the default code that makes us thinker

import { useSession } from "next-auth/react";

   export default function Home() {
     const { data: session, status } = useSession();
     const loading = status === "loading";

     return (
        <>
          <div className={styles.container}>
            <Head>
              <title>FlauntSpace</title>
              <link rel="icon" href="/favicon.ico" />
            </Head>
            <Header />
          </div>
      </>
      )
    }

We have to style our code to beautify it for a better interface and experience. The next package gives the default styles/global.css

html,
body {
 padding: 0;
 margin: 0;
 background-color: #2d3436;
 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 a {
  color: inherit;
  ext-decoration: none;
 }
    * {
      box-sizing: border-box;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: rgb(110, 90, 90);
      color: #fff;
      padding: 0 2rem;
      width: 100%;
        box-shadow: 0 10px 20px rgba(82, 71, 71, 0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    .logo {
      font-weight: 800;
      color: #fff;
      font-size: 1.8rem;
      font-style: oblique;
    }
    .btn-signin {
       box-sizing: border-box;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      background-color: #000;;
      outline: none;
      border: 0;
      cursor: pointer;
      display: -webkit-box;
      display: flex;
      align-self: center;
      font-size: 1.2rem;
      line-height: 1;
      margin: 20px;
      font-weight: 700;
      padding: 1.2rem;
        width: 14rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      text-align: center;
      font-family: inherit;
      user-select: none;
      color: #000;
      background-color: #353430;  
    }
    .btn-signin:hover {
      background-color: #353430;
      color: #000;  
    }

We’d use this CSS code snippet.
Moving forward that we create our authentication to go into our app profile, and we’re using GitHub and google authentication to bypass this phase.
To create a GitHub client Id and secret key

https://www.knowband.com/blog/user-manual/get-github-client-id-client-secret-api-details/

We’d do the same to google authentication.
https://developers.google.com/adwords/api/docs/guides/authentication

Now we will be creating our .env file in our app, this is for us not to reveal our security keys to users
Our .env file should look like this after following the procedure on
https://next-auth.js.org/providers/github

GOOGLE_ID=<your googleID generated>
GOOGLE_SECRET=<secret key generated by google>
GITHUB_ID=<githubID>
GITHUB_SECRET=<AUTHENTICATION SECRETKEY BY GITHUB USING THE ACTION>
NEXTAUTH_URL=http://localhost:3000

In the pages/api/auth/…nextauth.js file, import the generated authentication from Google and GitHub for our application to interact with API.

    import NextAuth from "next-auth";
    import GitHubProvider from "next-auth/providers/github";
    import GoogleProvider from "next-auth/providers/google";
    const options = {
      providers: [
        GitHubProvider({
          clientId: process.env.GITHUB_ID,
          clientSecret: process.env.GITHUB_SECRET,
          authorization: { params: { scope: "notifications" } },
        }),
        GoogleProvider({
          clientId: process.env.GOOGLE_ID,
          clientSecret: process.env.GOOGLE_SECRET,
          authorization: {
            params: {
              scope: "notifications",
            },
          },
        }),
      ],
    };
 export default (req, res) => NextAuth(req, res, options);

We’ve securely added our authentication and it should allow our app to be displayed when authentication is passed
In our app, we’re to have a display that lets users upload a profile picture and they can also post a mini blog.

Create a post.js file in our components folder that takes in a text area and post button to allow users to post content

    import { useState } from "react";
    import styles from "../styles/Home.module.css";
    export function Post() {
      return (
        <form action="api/form" method="post">
          <label htmlFor="body-content" className={styles.flauntText}>
            Flaunt
          </label>
          <textarea rows="4" cols="50" className={styles.bodyText}>
            Enter text here...
          </textarea>
          <br />
          <button type="submit" className={styles.postbut}>
            Post
          </button>
        </form>
      );
    }

Also, we’d create uploadWidget.js in the components.

 import { useState } from "react";
    import styles from "../styles/Home.module.css";
    export function ImageUpload() {
      const [isImageUploaded, setIsImageUploaded] = useState(false);
      async function handleWidgetClick() {
        const widget = window.cloudinary.createUploadWidget(
          {
            cloudName: "dhpp7gaty",
            uploadPreset: "my upload",
            resourceType: "image",
          },
          (error, result) => {
            if (!error && result && result.event === "success") {
              console.log("Done! Here is the image info: ", result.info);
              setIsImageUploaded(true);
            } else if (error) {
              console.log(error);
            }
          }
        );
        widget.open();
      }
      return (
        <div className={styles.container}>
          <div className={styles.vertical}>
            <button
              className={styles.button}
              type="button"
              onClick={handleWidgetClick}
            >
              Upload image
            </button>
          </div>
          {isImageUploaded ? (
            <>
              <div>Successfully uploaded</div>
            </>
          ) : null}
        </div>
      );
    }

We have our upload button is working using cloudinary upload widget.
https://cloudinary.com/documentation/upload_widget and now we’ll be styling our app.
Let’s create Home.module.css file in the styles folder and we should use this snippet.

    @import url('https://fonts.googleapis.com/css2?family=Island+Moments&display=swap');
    .container {
      min-height: 10vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .main {

    }
    .title {
      border-radius: 50%
    }
    .profile {
      grid-column: 2;
      grid-row: 2;
      background-color: #eef6f8;
    }
    .content {
      display: grid;
      grid-column: 1/3;
      grid-row: 1;
    }
    .uploadsec {
      grid-column: 1;
      grid-row: 2;
      background-color: #ccc;
    }
    .profileimg {
      border-radius: 50%;
    }


    .avatar {
      flex: 1;
      flex-basis: 250px;
    }
    .details {
      flex: 2;
    }
    .button {
      background-color: #449a79; /* Green */
      border-radius: 10px;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .bodyText {
      width: 100%;
      height: 150px;
      padding: 12px 20px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      background-color: #f8f8f8;
      resize: none;
    }
    .post {
      align-items: center;
      justify-content: center;
      display: flex;
    }
    .flauntText {
      font-family: 'Island Moments', cursive;
      font-weight: bold;
      font-size: 40px;
    }
    .postbut {
      background-color: #449a79; /* Green */
      border-radius: 10px;
      border: none;
      color: white;
      padding: 15px 30px;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;  
    }
    .imageCloud {
      /*border: 5px solid #555;*/
      border-radius: 50%;
      display: inline-block;
      justify-content: center;
      align-items: center;
      width: 100px;
      border: 3px solid black;
    }

Now we have to render all those components on pages/index.js file

import Head from "next/head";
import Header from "../components/Header";
import styles from "../styles/Home.module.css";
import { useSession } from "next-auth/react";
import { ImageUpload } from "../components/uploadWidget";
import { Post } from "../components/post";
import { getXataClient, XataClient } from "../src/xata";

export default function Home() {
  const { data: session, status } = useSession();
  const loading = status === "loading";
  // const [url, updateUrl] = useState();
  // const [error, updateError] = useState();

  return (
    <>
      <div className={styles.container}>
        <Head>
          <title>FlauntSpace</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Header />
      </div>
      <main className={styles.main}>
        <div className={styles.user}>
          {loading && <div className={styles.title}>Loading...</div>}{" "}
          {/*authentication process */}
          {/**Renders the home page after authentication passed of third-party */}
          {session && (
            <div className={styles.content}>
              <div className={styles.profile}>
                <>
                  <p>
                    You're logged in as
                    {/**Get's the name and mail from the third-party nextauth and display it as the user name on the home page */}
                    {session.user.name ?? session.user.email}
                  </p>
                  {/**SPLIT spage to two section where one is for the upload preset and the other is for posting blog post */}
                  <form className={styles.post}>
                    <Post />
                  </form>
                </>
              </div>
              <div className={styles.uploadsec}>
                <img
                  src="https://res.cloudinary.com/dhpp7gaty/image/upload/v1667560004/Profile-uploads/jnbkgndxzlnhapxv8eed.jpg"
                  alt="upload here"
                  className={styles.imageCloud}
                />
                <ImageUpload />
              </div>
            </div>
          )}
        </div>
      </main>
    </>
  );
}

Building a Backend with Xata

A quick tour of how xata works on the video.

https://www.youtube.com/watch?v=-KNRS2fIWdA&

https://youtu.be/-KNRS2fIWdA

Initializing the xata our project making it auto-generate the code into an src file either in javascript or typescript.

 xata init

Now,let's import xata into our pages/index.js

import Head from "next/head";
import Header from "../components/Header";
import styles from "../styles/Home.module.css";
import { useSession } from "next-auth/react";
import { ImageUpload } from "../components/uploadWidget";
import { Post } from "../components/post";
import { getXataClient, XataClient } from "../src/xata";

export default function Home() {
  const { data: session, status } = useSession();
  const loading = status === "loading";

  return (
    <>
      <div className={styles.container}>
        <Head>
          <title>FlauntSpace</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Header />
      </div>
      <main className={styles.main}>
        <div className={styles.user}>
          {loading && <div className={styles.title}>Loading...</div>}{" "}
          {/*authentication process */}
          {/**Renders the home page after authentication passed of third-party */}
          {session && (
            <div className={styles.content}>
              <div className={styles.profile}>
                <>
                  <p>
                    You're logged in as
                    {/**Get's the name and mail from the third-party nextauth and display it as the user name on the home page */}
                    {session.user.name ?? session.user.email}
                  </p>
                  {/**SPLIT spage to two section where one is for the upload preset and the other is for posting blog post */}
                  <form className={styles.post}>
                    <Post />
                  </form>
                </>
              </div>
              <div className={styles.uploadsec}>
                <img
                  src="https://res.cloudinary.com/dhpp7gaty/image/upload/v1667560004/Profile-uploads/jnbkgndxzlnhapxv8eed.jpg"
                  alt="upload here"
                  className={styles.imageCloud}
                />
                <ImageUpload />
              </div>
            </div>
          )}
        </div>
      </main>
    </>
  );
}
{
  /**Connecting the xata to our app */
}
const xata = new XataClient();
export const getServerSideProps = async () => {
  const FlauntSpace = await xata.db.items.getAll();
  return {
    props: {
      FlauntSpace,
    },
  };
};

We successfully connected our database of xata to the front-end application and more functionality is querying data from our database to render it on the front-end.

N:B This article intend to add more functionality and would be edited as soon as the changes are made.

Template String in ES6 Javascript

Ishaq Nasir — Mon, 27 Jun 2022 09:59:11 +0000

Using template string is a better form than using string concatenation making your JavaScript more readable and easy to understand.

By the end of this article you'll understand;

How to use Template strings
Why use it over string concatenation

Let's get into it

let lastName = 'John';
let firstName = 'Doe';
let age = prompt('What is your age: '); // prompt user to add his age

Before the advent of ECMA script, to console the output of the above code trying to concatenate them into a piece.

let result = lastName + ' ' + firstName + 'is' + age + ' ' + 'years old';
console.log(result)

output

//output will be after the user has been prompted to add their age

//John Doe is 25 years old

This is a cool way to string variables together, but assume you work on a large code base that has plenty of variables declared.
How you make this shorter and easily readable is by using template strings which can also be termed template literals.

Using the template string

let result = `${lastName} ${firstName} is ${age} years old`;
console.log(result);

output

// same application after prompting user information

// John Doe is 25 years old.

The template string makes code shorter and gives the developer the quickest option to call the variables into action making it readable for the developer or whomsoever is reading the code.

DOCUMENT OBJECT MODEL(DOM)

Ishaq Nasir — Mon, 27 Jun 2022 08:20:48 +0000

INTRODUCTION TO DOM

When a web page is loaded, the browser creates a Document object model(DOM) of the page. which is the tree representation of an HTML document and the DOM tree is modified with JavaScript.

<table>
  <row>
    <tr>
      <td>......</td>
    </tr>
    <tr>
      <td>.....</td>
      <td>.....</td>
   </tr>
  </row>

</table>

JavaScript And DOM

JavaScript can add new HTML elements and attributes.
JavaScript can change all the CSS styles in a page
JavaScript can add and listen to HTML events like onScroll hover onclick, etc.
JavaScript can change any HTML elements and attributes of a page.
JavaScript can remove existing HTML elements and attributes.

Now, how do we add JavaScript to an HTML documents

<script> 
  console.log('active');
</script>

checking your console, would prompt that it is active.

SELECTING HTML DOCUMENTS
This is when selecting HTML with JavaScript, and it provides a DOM method

    getElementById('targeted-html-doc');

getElementById is a DOM method which accepts the HTML elements ID,and returns the HTML elements matching that Id.
example:

   document.getElementById('#navBar');

You need to pass the ID of the elements as an arguments, if no element matches the Id then it returns null.

Query Selector
Query selector allows you to use CSS selector to select HTML elements. It is the new way in JavaScript to select elements. There are two types of query selector;

      querySelector();
      querySelectorAll();

query selector is a DOM method. It's accepts the CSS selectors string and only returns the first HTML elements, matching the query,
example;

    document.querySelector('#footer span');

You need to pass the CSS. Selector strings as an argument,If no elements matches the Selector string, then it returns null.

while
querySelectorall is a DOM method that accepts the CSS selector string, and return all of the HTML elements, matching the query.
example;

    document.querySelectorAll('#footer span');

we need to pass the CSS selector string as an argument, If no element that matches, then it returns an empty array