Instead, set up Supabase locally with the CLI. It’s faster, safer, and perfect for version control. Your teammates (and future self) will thank you when everything’s reproducible and just works.

with tiny bit of setup and understanding of how things work you can make your setup solid from day one.

Install Supabase using node

I’m going to keep things simple and install it with node using NPM. if you want install it differently you can check the Supabase CLI install guide.

npm install supabase --save-dev

Initialize Supabase

npx supabase init

Start Supabase

npx supabase start

this will download all the docker images and start your Supabase stack locally. You would see output like this (obviously they are not my real secrets) you would get your own.

Started supabase local development setup.

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eujnsdfnjkafwfnIkpXVCJ9.eyJpc3MiOiJzinjsfjnsfub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WkjnadsfonjdsfonigdDMblYTn_I0
service_role key: eyafsKJsfIgsbks80hinjoUbonCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwichabjfjsa8oIJJnnjnlUHJk5Nn0.EGIM96ajhbjifaoiHIs81IU
   S3 Access Key: 62sdf729ahbsiouhfff351asa23cf
   S3 Secret Key: 85ojsnfosoijwfiowefvs742isdfjnfweu907
       S3 Region: local

Now we can go on Studio URL to get started

Connect to your production env

there are two different ways to connect to the prod environment. either you use a PAT token which you can generate from this link and use the token to login or use browser login.

1. Browser login

   run the following command

    npx supabase login
   

   Output

    Hello from Supabase! Press Enter to open browser and login automatically.
   

   If you are logged into Supabase in your browser you should see this screen on the browser.

   

   now go back to your command line and enter the code. This would automatically create PAT token for you and set it in your local env.

2. Manually generating PAT (Personal Access Token)

   • generate from this link

   • run the following command

       $env:SUPABASE_ACCESS_TOKEN="sbp_a6cc1610147"; npx supabase link
     

     💡

     replace the token with your token.

Link project

npx supabase link

1. select the project.

2. enter the Database password

   1. you can find the password under. Project Settings > Configuration > Database

   2. hit reset password and generate a new password

   3. copy that password

and you are done. now you can sync the database to production database using the following commands.

1. pull configs. this would pull migrations and configs from the production

    npx supabase db pull
   

2. push configs

    npx supabase db push
   

next you run the command.

npx supabase db reset

this will reset the local database and apply all the migrations

for more details check: Supabase CLI reference

If you need to add something custom (like a trigger on auth.users post-signup), it’s better to create a local migration (will see how to do this next), push it to Git, and let your teammates pick it up. Since the base auth schema already exists in production, make sure your migration includes proper checks — e.g., IF NOT EXISTS — to avoid blowing things up.

Migrations

In Supabase we need to create migrations to keep things in sync with local and prod. When we make changes locally we need to create migrations for version control so other devs working on the project are on the same page and also when other people make changes we can get those changes and push it to the production.

There are two ways to create migrations.

1. Create migration file manually

   1. Run the command

       npx supabase migration new <file name>
      

      example:

       npx supabase migration new new_migration
      

   2. Add content in the migration file

      for example lets say we want to add a trigger, this could be anything. such as creating a table

       -- Add trigger to populate `profiles` when a new `auth.users` is created
       do $$
       begin
         if not exists (
           select 1 from pg_trigger where tgname = 'on_auth_user_created'
         ) then
           create trigger on_auth_user_created
             after insert on auth.users
             for each row
             execute function public.handle_new_user();
         end if;
       end
       $$;
      

   3. Apply changes to local Database

       npx supabase db reset
      

   4. Push to git for version control

      this helps other people working on the project get the changes

       git add .
       git commit -m "Add safe trigger on auth.users to populate profiles"
       git push origin main
      

   5. Push to Supabase production

       npx supabase db push
      

   6. Make changes from the dashboard and generate migration

      You can make changes from the dashboard. like creating tables, adding or altering columns, creating functions etc.

      💡

      There are limitation to this though. you cant run alter schema from auth and other protected schemas which are managed by Supabase from the Supabase dashboard directly. in that case you either use the SQL editor in Supabase dashboard or use the first method.

      1. Generate migration content

          npx supabase db diff
         

         if you have made changes related to protected schemas you need to add the schema flag and mention the schemas as Supabase don’t do it by default.

          npx supabase db diff --schema public,auth
         

         this will auto generate the migration based on the changes and give the output in stdout on the terminal. like the following.

         

         just copy this content

         you can use this to create a new migration by creating a new migration file

2. Create migration file

        supabase migration new <migration_name>

e:g

        supabase migration new schema_test

and now copy the migration content into the generated file. the generate file should be inside the migrations folder with name something like this 20250609062017_schema_test

or you can simply use the following command to write the content directly to the file.

        npx supabase db diff --schema public,auth --file migrations/20250609_add_trigger.sql

once this is done you can follow the same process as method one to apply changes changes, push to production and version control

Resources: Supabase docs

What is Deep Live Cam?

It's a tool that lets you transform your face in real time using AI magic. Think FaceSwap, but live. You can prank your friends or just explore the tech, it’s all local (on your computer), so no data is sent anywhere. Your secret's safe.

What You'll Need First

Before installing, let's get the essentials out of the way. It’s like setting the table before a feast.

1. Install Python (3.10 is required)

Head over to python.org and download Python 3.10.

Make sure you check the box that says "Add Python to PATH" during installation.

2. Install Git

Grab it from git-scm.com and install like you would any other app.

3. Install ffmpeg

This tool handles video magic.

• Press Windows + R, type powershell, then hit enter.

• Paste this in and press Enter:

iex (irm ffmpeg.tc.ht)

This command:

• iex = run the downloaded command as a script

• irm = download a script from the web (shorthand for Invoke-RestMethod)

• The rest points to a safe script to auto-install ffmpeg on Windows.

• after the script runs you'll get three options and you need to choose number 3

• still stuck? refer this video: https://www.youtube.com/watch?v=OlNWCpFdVMA

4. Install Visual Studio 2022 Runtimes (Windows only)

Download from: Microsoft Visual C++ Redistributable

Choose the version matching your system (x64 for most users).

Clone & Set It Up

1. Open Terminal / Command Prompt and paste the commands:

git clone https://github.com/hacksider/Deep-Live-Cam.git

cd Deep-Live-Cam

2. Download the Models

Download these two files:

• GFPGANv1.4

• inswapper_128_fp16.onnx

Put them into the models folder inside the cloned Deep-Live-Cam directory. No need to unzip or rename.

3. Set Up Virtual Environment (Optional, but Smart)

Helps prevent your computer from becoming a dependency mess.

For Windows:

python -m venv venv

venv\Scripts\activate

pip install -r requirements.txt

For macOS (Apple Silicon):

brew install python@3.10

brew install python-tk@3.10

python3.10 -m venv venv

source venv/bin/activate

pip install -r requirements.txt

If you get _tkinter errors, reinstall tkinter using brew reinstall python-tk@3.10

For Linux:

python3.10 -m venv venv

source venv/bin/activate

pip install -r requirements.txt

4. Fix Missing Module Error (pygrabber)

You might see an error like ModuleNotFoundError: No module named 'pygrabber' Just run:

pip install pygrabber

Time to Run It!

You can run the tool with this command:

python run.py

This downloads additional files (~300MB), so have your Wi-Fi ready.

GPU Acceleration (If You Want Speed)

CUDA (Nvidia Only)

Only try this if you're feeling adventurous and have an Nvidia GPU.

Steps:

1. Install CUDA Toolkit 11.8 from Nvidia

2. You also need a full Visual Studio 2022 installation with C++ workload enabled.

It didn't work well on a GTX 3050 for me. YMMV.

Then run:

pip uninstall onnxruntime onnxruntime-gpu

pip install onnxruntime-gpu==1.16.3

python run.py --execution-provider cuda

Apple Silicon (M1/M2/M3)

pip uninstall onnxruntime onnxruntime-silicon

pip install onnxruntime-silicon==1.13.1

python3.10 run.py --execution-provider coreml

Windows (DirectML)

pip uninstall onnxruntime onnxruntime-directml

pip install onnxruntime-directml==1.15.1

python run.py --execution-provider directml

Intel (OpenVINO)

pip uninstall onnxruntime onnxruntime-openvino

pip install onnxruntime-openvino==1.15.0

python run.py --execution-provider openvino

Troubleshooting Tips

• If your models don’t load: double-check they’re in the right models/ folder.

• If Python 3.10 isn’t being used:

  • On macOS, always use python3.10, not python

• Conflicting Python versions?

brew list | grep python
brew uninstall --ignore-dependencies python@3.11 python@3.13
brew cleanup

Final Notes

• The tool works fine with just CPU, though it’ll be slower.

• GPU acceleration is cool, but not mandatory.

• If you hit a wall, don’t panic—90% of the time it’s a missing install.

Now go deepfake responsibly.

Credits

Deep Live Cam is created and maintained by hacksider on GitHub.

Make sure you have:

• Node.js (LTS version) installed

• npm or yarn as a package manager

• Git installed (optional but recommended)

Setting Up a Next.js Project

Open your terminal and run:

npx create-next-app@latest my-clerk-app
cd my-clerk-app

or using yarn:

yarn create next-app my-clerk-app
cd my-clerk-app

Start the development server:

npm run dev

or

yarn dev

Now, your Next.js project is ready! Next, we'll integrate Clerk for authentication.

Integrating Clerk

Create an account for clerk by going on https://clerk.com/

Once you sign in you should see this. Select all the forms of authentication you want and click on Create application

I simply follow the clerk’s instructions on how to install clerk and set up the env variables and setup the middle ware.

I usually follow everything as clerk says until setting up the middleware part. for the clerk provider I like to do things slightly differently.

• I like to create a separate folder in my src directory called providers

• There i create a file called index.tsx where I create a component called providers and wrap the children of provider component into all the other providers which I’ll be using.

src/providers/index.tsx

'use client'
import { ClerkProvider } from '@clerk/nextjs'
import { nhost } from '../lib/nhost'

interface ProviderProps {
  children: React.ReactNode
}

const Provider: React.FC<ProviderProps> = ({ children }) => {
  return (
      <ClerkProvider>
        {children}
      </ClerkProvider>
  )
}

export default Provider

• Then I use this provider component to wrap my main content. This helps me keep my code clean

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Provider from "@/providers";

const geistSans = Geist({
    variable: "--font-geist-sans",
    subsets: ["latin"],
});

const geistMono = Geist_Mono({
    variable: "--font-geist-mono",
    subsets: ["latin"],
});

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <body
                className={`${geistSans.variable} ${geistMono.variable} antialiased`}
            >
                <Provider>
                    {children}
                </Provider>
            </body>
        </html>
    );
}

• Then we can simply put the signin button on the app/page.tsx file like this. and run the project using yarn dev or npm run dev

import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";

export default function Home() {
    return (
        <div className="flex justify-center items-center w-full h-svh">
            <div className="text-center flex flex-col items-center justify-center gap-3">
                <p className="text-3xl">Clerk Basic Setup</p>
                <SignedOut>
                    <div className="w-fit px-8 py-2 border border-gray-400 rounded-md">
                        <SignInButton />
                    </div>
                </SignedOut>

                <SignedIn>
                    <div className="w-fit px-8 py-2 border border-gray-400 rounded-md">
                        <UserButton />
                    </div>
                </SignedIn>
            </div>
        </div>
    );
}

You are all set. You have ready to use authentication system on which you can build upon.

Results

• Clicking on signup button will show you this which you can use to sign up

On successful signup you can will be redirected to the same page which you were before than we can see that we can use the clerks in build account management.

we can check the dashboard and we’ll see that new account has been registered.

Thanks for taking the time to read my blog! I’d love to hear your thoughts, feel free to share your feedback or ask any questions in the comments. Your input helps me improve and create better content.

Until next time!

Interfaces works similar to type keyword which we have discussed earlier in the series. Interface allows us to define the structure of the object just like type but there are few differences.

interface User {
    readonly id : number // setting this as readonly field
    name: string 
    age?: number // setting this as optional field
    isLoggedIn(): string // method named isLoggedIn which returns string
    getStatus: () => string // similar methods can also be defined using this syntax
    getName(id:number) : string
}

const user: User = {
    id: 1234321,
    name: "Palash",
    isLoggedIn: ()=>{
        return "YES"
    },
    getStatus: ()=>{
        return "Online"
    },
    getName:(id:2)=>{
        return "usr" + id
    }
}

Reopening of Interface

Sometimes we may want to add some additional properties to our interfaces after they has been defined. For example, if you have imported some library and it has some interfaces which you want to update. You can use the following syntax but this changes the original interface as well so if you are using the original interface in the future you have to add the new property which you have added.

interface User {
    readonly id : number // setting this as readonly field
    name: string 
    age?: number // setting this as optional field
    isLoggedIn(): string // method named isLoggedIn which returns string
    getStatus: () => string // similar methods can also be defined using this syntax
    getName(id:number) : string
}

interface User { // reopening the Interface 
    phone: number
}

const user: User = {
    id: 1234321,
    name: "Palash",
    phone: 9898767852,
    isLoggedIn: ()=>{
        return "YES"
    },
    getStatus: ()=>{
        return "Online"
    },
    getName:(id:2)=>{
        return "usr" + id
    }
}

Inheritance

we just saw how you can reopen an interface and add new properties but the drawback was it changes the original interface as well. So, if you want to update your interface but don't want to change the original one, we can use Inheritance. Inheritance establishes a relation between the parent interface and the child interface and both the interfaces are two separate interfaces. The child interface will have all the properties of the parent interface. One thing to note here is that unlike classes overriding methods of interfaces does not work.

interface User {
    readonly id : number // setting this as readonly field
    name: string 
    age?: number // setting this as optional field
    isLoggedIn(): string // method named isLoggedIn which returns string
    getStatus: () => string // similar methods can also be defined using this syntax
    getName(id:number) : string
}

interface Admin extends User { // extending the Admin interface from user
    role: string
}

const admin: Admin = {
    id: 1234321,
    name: "Palash",
    role: "Admin",
    isLoggedIn: ()=>{
        return "YES"
    },
    getStatus: ()=>{
        return "Online"
    },
    getName:(id:2)=>{
        return "usr" + id
    }
}

}

Interface implements

In TypeScript, the implements keyword is used to enforce that a class must conform to a particular interface or multiple interfaces. When a class implements an interface, it means the class must contain all the members (properties and methods) defined in that interface.

interface MyInterface {
    // Properties or methods defined in the interface
}

class MyClass implements MyInterface {
    // Implementation of the properties or methods defined in the interface
}

interface Printable {
    print(): void;
}

class Document implements Printable {
    print() {
        console.log('Printing document...'); // Implementing the 'print()' method from the 'Printable' interface
    }
}

const document = new Document();
document.print(); // Outputs: Printing document...

Syntax for Implementing Multiple Interfaces:

interface Interface1 {
    method1(): void;
}

interface Interface2 {
    method2(): void;
}

class MyClass implements Interface1, Interface2 {
    method1() {
        // Implementation for method1
    }

    method2() {
        // Implementation for method2
    }
}

Difference between type Aliases and Interface

Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

TYPE

Extending a type via intersections

type Animal = {
  name: string;
}

type Bear = Animal & { 
  honey: boolean;
}

const bear = getBear();
bear.name;
bear.honey;

A type cannot be changed after being created

type Window = {
  title: string;
}

type Window = {
  ts: TypeScriptAPI;
}

 // Error: Duplicate identifier 'Window'.

INTERFACE

Extending an interface

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

const bear = getBear();
bear.name;
bear.honey;

Adding new fields to an existing interface

interface Window {
  title: string;
}

interface Window {
  ts: TypeScriptAPI;
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

Tuple is TypeScript Specific thing and we don’t have tuples in JavaScript. Tuples allow us to enforce order of types in an array.

let UserTuple: [number,string,boolean]
UserTuple = [122,"Palash",true] // valid
UserTuple = [122,"Palash","true"] // not valid

We can define tuples using type as well

type UserTuple = [number,string,boolean] // using type to define tuple
let UserTuple2: UserTuple = [122,"Palash",true] // valid
let UserTuple3: UserTuple = [122,"Palash","true"] // not valid

Bad behavior

Tuple has some bad behavior which it should not do but it is allowed anyways.

// bad behaviour
let UserTuple: UserTuple = [122,"Palash",true]
// since user tuple is just an array we can use array methods on it. 
// which should not happen because the purpose of tuple is to make 
// sure we have all the menthioned data types in order
UserTuple.push("tf")

if you reached till here and you liked what you read don't forget LIKE to SHARE it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

Union enables us to assign two types to a single variable. Sometimes there might arise a situation where we might not know what kind of data will be encountering. In this kind of situation union comes in very handy. syntax for union is fairy straight forward we just use a pipe | between two types.

let height : number | string // value can either be a number of a string
height = 5.2
height = "5 foot 2 inches"

Union in functions

It is very common scenario to use unions in functions. in the example below we are specifying that middle name should wither be string or null but one thing to consider here is we have applied a condition to first check if middle name is not null before calling toUpperCase method. if we did not do it TypeScript would have given us an error.

function getFullName(firstName:string, middleName : string | null, lastName : string): string {
    if (middleName)
        return `${firstName.toUpperCase()} ${middleName.toUpperCase()} ${lastName.toUpperCase()}`
    else
        return `${firstName.toUpperCase()} ${lastName.toUpperCase()}`
 }

we can also make use of Union with type aliases

type User = {
    firstName:string
    middleName : string | null
    lastName : string
}

Using Unions in Arrays

let ages1 : number[] | string[] = [22,24,25] // array can either be of number or string
let ages2 : number[] | string[] = ["22","24","25"] // array can either be of number or string

let ages5 : (number | string)[] = [22,24,"25"] // array elements can be both
let ages3 : Array<number | string> = [22,24,"25"] // Another way of achieving the same results

it works pretty much same in arrays as well. So this is almost everything you have to know about Union in TypeScript for you day to day stuff but if you are more curious and want some more details you can visit the Official Docs

if you reached till here and you liked what you read don't forget LIKE to SHARE it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

Readonly

Readonly feature enables us to make properties of the an object readonly. This means we cannot change the value once it has been set, it can only be read.

type User = {
    readonly id: number, // making id readonly
    name: string,
    age: number,
}

const user1: User = {
    id: 123212,
    name: "Palash Dhavle",
    age: 24
}

user1.id = 31 // this will raise an error

I am using the readonly keyword for the id to make it readonly. Now we restrict changes to id property therefore the last line where I try to modify the id will throw an error. In some scenarios using readonly can make our code prone to less bugs.

Optional

Optional is very self explanatory. Sometimes we might not want to make it compulsory to add each and every property while creating an new instance of an object. So we mark some properties as optional.

type User = {
    readonly id: number, // making id readonly
    name: string,
    age: number,
    address?: string // making address optional
}

const user1: User = {
    id: 123212,
    name: "Palash Dhavle",
    age: 24
}

const user2: User = {
    id: 123213,
    name: "Tony Stark",
    age: 24,
    address:"10880 Malibu Point, Malibu, California"
}

To make a property optional we just have to put a question mark before the colon(:). In this case both user1 and user2 is valid because we have marked the property as optional.

Type mixing

Sometimes we may need an object which is equivalent of combination of two three objects and each object may have more than 10+ keys. So in this situation instead of re-writing all the keys again and defining the type again we use something called type mixing.

type User = {
    readonly id: number, // making id readonly
    name: string,
    age: number,
    address?: string // making address optional
}

type BankInfo = {
    accNo: number,
    accHolderName: string
    branch: string
}

type education = {
    highestDegree: string
    marks: number
}

// Using type Mixing
type userInfo = User & BankInfo & education

let newUser: userInfo = {
    id: 1234321,
    name: "Palash Dhavle",
    age: 19,
    accNo: 3456787653232,
    accHolderName: "Palash",
    branch: "Mumbai",
    highestDegree: "Phd",
    marks: 500

}

This syntax is convenient when we face these kind of situation.

if you reached till here and you liked what you read don't forget LIKE to SHARE it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

Type Aliases allows us to define the structure or shape of the object with the help of type keyword. Lets understand this with an example.

function add({num1, num2}: {num1: number, num2: number}): number  {
    return num1 + num2
}

function sub({num1, num2}: {num1: number, num2: number}): number  {
    return num1 - num2
}

let sum = add({num1: 2, num2: 3})
let diff = sub({num1: 3, num2: 2})
console.log(sum, diff);

In this code we define two functions, add and sub. Both the function accept the same type of object. So we need to define the same structure of object at two different places. Now if i want to add the functions to multiply and subtract I have to define the same thing again.

Type Aliases solves this problem. using type keyword we can define the structure or shape of the object only once and than use that type everywhere else.

type Nums = {num1: number, num2: number}

function add({num1, num2}: Nums): number {
    return num1 + num2
}

function sub({num1, num2}: Nums): number  {
    return num1 - num2
}

function mult({num1, num2}: Nums): number {
    return num1 * num2

}

function div({num1, num2}: Nums): number  {
    return num1 / num2
}

let sum = add({num1: 2, num2: 3})
let diff = sub({num1: 3, num2: 2})
let prod = mult({num1: 10, num2: 2})
let quot = div({num1: 10, num2: 2})
console.log(sum, diff, prod, quot)

Type Aliases make the code much cleaner and easier to maintain. There is also something called interface which is similar to type. We will discuss about interfaces and how they are different from types as we go ahead with this series.

if you reached till here and you liked what you read don't forget to like and share it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

Function Anatomy for typescript

Looking at the above image you can see how we do type checking when we write a function. If you don’t specify any type for the function parameter or function return type it will default to type of any which is not recommended when using type script.

Understating how types work in functions

If you have understood how the type checking is done for a variable understanding this will be very simple. Lets see how the types work in function.

Parameter type

when you specify the parameter type typescript will warn you if you try to perform operation on that particular parameter which is outside the scope of its type. for example if you have specified the type as number and you are trying to apply string methods on the parameter you’ll get a red line.

Return type

when return type of a function is specified, you can’t return a value from the function which is other than the specified type. for example you cant return a string if you have specified the return type as a number.

Arrow Function Anatomy for TypeScript

Every functionality remains the same expect the minor syntax changes

Using types in map or any call back function

it’s the same syntax we use for arrow function with only difference that the function is being placed inside another function.

actually it’s not required to specify the type when we are using the map function because TypeScript is smart enough to know the type value we’ll be having for the parameter by reading the array on which we are using the map.

if you don’t specify the type and hover over the variable you can see that it already knows what type is it (I'm using VS code).

Never Type

We use never when we want to specify that the function should not return anything not even void. This is helpful when we want to call the function which terminates our program or just raises and error.

function rainsError(errMsg: string): never{
    throw new Error(errMsg);
}

if you reached till here and you liked what you read don't forget to share it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

What are types?

To understand Types we can take example of real world Caste System. In Caste system people are divided into different groups based on the work they do and they are treated differently based on their castes. I know its not fair but this is how it used to be in some parts of the world and this system is practiced even today in some rural parts of India and other 3rd world countries.

Just like the Caste system we have different types in Typescript and each type has its own property. Like Type of Number will only accept numbers type of String will only accept string and type of Boolean will only accepts Boolean and so on..

Syntax

const variableName : type = value

Example

const age : number = 24

so this is how we define types for any variable. in this example we have used the number type which is used to represent a number obviously.

let's look at some of the basic types which we have in TypeScript.

1. Number:

   • Represents numeric values (integers or floating-point numbers).

   • Examples: let count: number = 5;, let pi: number = 3.14;

2. String:

   • Represents textual data enclosed within single (') or double (") quotes.

   • Examples: let message: string = 'Hello, TypeScript!';, let name: string = "Alice";

3. Boolean:

   • Represents logical values true or false.

   • Examples: let isValid: boolean = true;, let hasError: boolean = false;

These 3 are primitive types in Plain JavaScript and has a corresponding type in TypeScript which we can use to do type Notations. There are variety of inbuild types and we can also create our own types. we'll Learn about this as we progress in the series.

There is one more important type

4. Any

   • Any means we are telling TypeScript to not do any type checking of the the variable

   • Examples: let car: any = "BMW";, let bike: any = 5;

Inferred types

TypeScript is smart enough to automatically assign the type to the variable looking at the value you have assigned to the variable.

let num : number = 5

you can also write this as

let num = 5

even though you have not mentioned the type, typescript will automatically assign one to it. In future if you try to assign a String or any other value to num TypeScript will warn you automatically.

In many cases its a good practice to rely on inferred types because its obvious of what type the variable should be by looking at the value but there are some exceptions where we should avoid using type inference.

So this post covers the crux of types we'll be looking at different types and how to use them in later as we go further into the series.

You can also checkout TypeScript Docs for more info on types.

if you reached till here and you liked what you read don't forget to share it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

Hey there, happy to have you here! In this section we will see what is TypeScript, why do we use it and bit of it's history. Don't worry I won't bore you much I'm just covering this so you get the context why was TypeScript introduced in the first place.

JavaScript by nature is loosely typed or dynamic programing language which means we don't have to explicitly specify types in JavaScript as we have to do it in statically typed languages like C, C++ or Java. let's see some example to understand it better.

int age = 25
age = "25"

this code is invalid in C++, as its a statically typed language and we have specified age to be an integer so we can't assign a string value to age.

let age = 25
age = "25"

the above code is valid in JavaScript because it's dynamically typed. first we set age as a number than we change it to a string value. JavaScript will internally handle the type change for us unlike C++.

I know this seems pretty convenient now but this behavior can lead to pretty nasty bugs if you don't be careful with it.

Why use TypeScript ?

I'll really dumb down this example for understanding purpose. let's assume two or more people are working on a JavaScript code base and one person got a task to write a function to display age and he stored age as string for some reason.

let age = 25
// 1000 lines of code...
function displayAge(){
    // lines of code...
    age = "26" + " yrs"
    console.log(age)
}

if he tests his function the above code will run fine without any errors. now let's say another person got a task to write a function to check if the user is eligible to vote.

let age = 25
// 100 lines of code...
function displayAge(){
    // lines of code...
    age = "26" + " yrs"
    console.log(age)
}
// 100 lines of code...
function isEligibleToVote(){
    // lines of code...
    if (age > 18){
        return true
    }
    return false
}

Now if he tested his function it will work fine but did you notice the problem here? Until displayAge function is called everything will run smoothly but if we run isEligibleToVote function after displayAge our code will raise an error and our application will crash because age is no longer a number and we can't compare a string with a number.

This is how dynamically typed languages are prone to bugs. The above example was very simple which would most likely not happen in real world production scenario but many more complex and unexpected bugs can arise in production if we don't be very very careful. This is where TypeScript comes into the picture to save the day.

What is Typescript?

TypeScript was developed by Microsoft, led by Anders Hejlsberg. It addresses issues in JavaScript development by adding static typing, enabling better code organization, scalability, and error detection during development.

For the people who don't know. TypeScript is not a new programming language, it's just some syntactical sugar on top of vanilla JavaScript. You can imagine it as a layer of syntax of top of normal JavaScript syntax. TypeScript is just an development tool which makes your life easier by making you write better code. Ultimately the TypeScript code you write will be compiled into JavaScript because the browser/node only understands JavaScript.

Now let's see how can typescript solve the issue we discussed in the above example.

let age: number = 25

so when we are defining age we add a colon followed by number keyword which specifies that age should only contain a numeric value. Now whenever someone tries to store anything other than a number in age an error will get raised so future bugs can be prevented. This is one of the feature of TypeScript which helps us write a better quality code.

As we move on in the series we will see how you can install and use TypeScript in your codebases and we will discuss the following topics in detail.

• Types

• Functions

• Type Aliases

• Read-only, Optional and Type Mixing

• Unions

• Tuple

• Interface

• Public, Private and Protected

• Getters and Setters

• Abstract Classes

• Generics

• Narrowing

if you reached till here and you liked what you read don't forget to share it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

Using gh-pages

Install the package on your local dev environment.

yarn add -D gh-pages

you can also you other package manager such as NPM.

Add these commands under scripts in package.json

"scripts": {
        "predeploy": "yarn run build",
        "deploy": "gh-pages -d dist"
  }

You can use npm or other equivalent commands related to different package managers

Update vite.js.config

• If you are deploying to https://<USERNAME>.github.io/, or to a custom domain through GitHub Pages (e.g. www.example.com), set base to '/'. Alternatively, you can remove base from the configuration, as it defaults to '/'.

    export default defineConfig({
      base: "/",
      plugins: [react()],
    })
  

• If you are deploying to https://<USERNAME>.github.io/<REPO>/ (eg. your repository is at https://github.com/<USERNAME>/<REPO>), then set base to '/<REPO>/'.

    export default defineConfig({
      base: "/portfolio-site/", // portfolio-site is the name of my repo
      plugins: [react()],
    })
  

Run the command to deploy

yarn run deploy

You can use npm or other equivalent commands related to different package managers. This command will build your project and create a new branch called gh-pages in your git repository and push it on GitHub and it will also handle the configuration required to deploy your project.

This is it! Congratulations🎉🎉🎉 your static site will be deployed, to check you can go to your repository’s setting and go in the pages section

Setting custom domain for your

The first thing to do is buy a domain of you choice. you can buy it from GoDaddy Hostinger etc. It’s a very straight forward process you go to their site add domains to your cart and checkout just like any other ecommerce site.

Now for GitHub pages we can set two types of domains

• Apex domain

  e.g.: troncodes.com

• Subdomain

  e.g.: www.troncodes.com or blog.troncodes.com

To point your apex domain to your GitHub page simply go to your domain’s DNS settings on your domain provider’s site. if you can’t find it, a simple google search will help you figure it out. once you get into your domain’s DNS setting you will see a similar table to this.

But you will not have all these A records which you see in the above picture if you have not already set them. the IP’s which you see are of GitHub’s public servers which hosts your page. They are provided by GitHub.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Add four A records as I have added above in your Domain’s DNS setting use the above mentioned IP’s and keep rest of the setting exactly as shown above. What this does is whenever any look up is done for your domain the request will be sent to GitHub’s servers which than will respond back with the content of your GitHub page.

Now the DNS servers knows to forward any requests looking up for your domain should be forwarded to GitHub but GitHub does not know what it should do with this request. So we need to configure that as well.

Configuring GitHub Repo

go to repository settings and navigate to pages just like before. scroll down to see and you’ll see a section for custom domain. Enter the name of your domain, save and you are done.

wait for some time and refresh the page. you’ll see a link which points to your website. Congratulations🎉🎉🎉 your website will now be displayed on your custom domain.

Setting up a sub domain

GitHub recommends also setting up a www subdomain. If you configure the correct records for each domain type through your DNS provider, GitHub Pages will automatically create redirects between the domains. For example, if you configure www.example.com as the custom domain for your site, and you have GitHub Pages DNS records set up for the apex and www domains, then example.com will redirect to www.example.com. Note that automatic redirects only apply to the www subdomain. Automatic redirects do not apply to any other subdomains, such as blog

To set up a subdomain subdomain you just have to add a C record in your DNS setting with the following settings.

www is value of your subdomain and this time instead of using IP’s we give this link yourUserName.github.io that’s it. Don't forget to replace yourUserName with your own user name or organization name.

JSX stands for JavaScript syntax extension. It is a JavaScript extension that allows us to describe React’s object tree using a syntax that resembles that of an HTML template. It is just an XML-like extension that allows us to write JavaScript that looks like markup and have it returned from a component. Its just HTML disguised as JavaScript

function App() {
       let name = "Palash"
       return (  
         <div>
           <h2>Hello {name} Welcome to my Website</h2>
           <p>This is just a demo site</p>
         </div>
       );
     }
 export default App;

Everything which App function is returning is JSX. JSX looks like HTML but actually it we'll be transformed into JavaScript when its being compiled. JSX allows us to write HTML like code inside JS file and everything works without breaking. On line 2 we have defined a variable name and then we are using that name on line 5 inside HTML like syntax which will render the value of name inside h2.

So how does this work. How we can return HTML inside of JavaScript file directly?

JSX UNDER THE HOOD

When we run our react application, react uses transpiler (a compiler that translates one form of syntax into another) called Babel to transform JSX into plain JavaScript code which is understandable by the browser because the browser only understands JavaScript it does not understand what is JSX.

Let's see an example to understand it better

import React from 'react'
function Greet(){
    return <h1>Hello World!</h1>
}

The above component is simple it will just render Hello World and it looks like it is returning h1 tag but actually this code will be converted to JavaScript code by Babel before compiling and will look something like this.

import React from 'react'
function Greet() {
    return React.createElement("h1", {}, "Hello, World!")
 }

HTML like code is being transformed into a JavaScript function call React.createElement(). This is the reason we need to import react in our file so it can be used later on to call this function.

Working of React.createElement

The createElement() function primarily accepts the following parameters and returns a React element(which is a JS object):

React.createElement(
      type,
       [props], //attribiute of the element
      [...children]
    )

Let us see an example of how createElement function will be called, where we have attributes for the elements in JSX.

JSX

<div>
  <h1>Hello JSX</h1>
  <h2 label="screen">Sub heading</h2>
</div>

JavaScript

React.createElement("div", {}, [
React.createElement("h1", {}, "Hello JSX"),
React.createElement(
        "h2",
        {
          label: "screen",
        },
        "Sub heading"
        ),
        ]);

So this is how the actual JSX turns out when its pre-compiled by Babel.

What React.createElement() returns

Js file with JSX

import React from 'react'

function App (){
         return (
           <div>
            <p>This is a list</p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
          </div>
       );
     };

JavaScript after it has been compiled by Babel

import React from 'react';

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "This is a list"),
    React.createElement(
      "ul",
      null,
      React.createElement("li", null, "List item 1"),
      React.createElement("li", null, "List item 2")
    )
  );
}

This is what React.createElement() will return

    {
           "type": "div",
           "key": null,
           "ref": null,
           "props": {
             "children": [
               {
                 "type": "p",
                 "key": null,
                 "ref": null,
                 "props": {
                   "children": "This is a list"
                 },
                 "_owner": null
               },
               {
                 "type": "ul",
                 "key": null,
                 "ref": null,
                 "props": {
                   "children": [
                     {
                       "type": "li",
                       "props": {
                         "children": "List item 1"
                       },
                       // truncated for brevity
                     },
                     {
                       "type": "li",
                       "props": {
                         "children": "List item 2"
                       },
                       // truncated for brevity
                     }
                   ]
                 },
                 "_owner": null
               }
             ]
           },
           "_owner": null
       }

The actual one will look something like this.

Why use JSX?

Now that you understand how to use JSX and how it works. You may wonder why even use JSX why complicate things by adding code transpilers and everything why don't simply use plain HTML, CSS, JS.

Traditionally when we write code for a webpages, HTML CSS and JS are usually located in different files. Where HTML is used to render content CSS handles the styling part and JS handles the logic. But as your project grows bigger and things become more and more interactive. logic starts determining the content this is why in react rendering markup(HTML) and logic(JS) lives in the same place as a component and JSX makes this possible.

Things to remember when using JSX

• We can't return more than one element from a react component when using JSX. you can use react fragment to return multiple elements

• Every tag should have a closing tag. Single tags like image tags can be return as <img/>

• Use camel case when writing HTML attribute names and change some names like class to className and for to htmlFor

That's it! with this knowledge you can get started with JSX and React. I hope you enjoyed reading this article and I made your react journey little bit simpler.

Apollo Server is a community-driven, open-source GraphQL server that simplifies the process of building and serving GraphQL APIs in JavaScript environments. It's often used with Node.js, but it can also be used with other JavaScript runtime environments. Apollo Server is part of the larger Apollo platform, which includes tools for both server and client development.

Installation

google “apollo GraphQL” and open the website. Navigate to developers → docs or simply open this link https://www.apollographql.com/docs/

and scroll down to this section and read few things along the way if you want to.

than click on the highlighted part and which will take you to the following page. this has information on how to install the server

or you can visit this page directly Link

Setting up the Server

create a folder called server navigate inside the folder and run the following commands:

use this command to install apollo server and GraphQL

yarn add @apollo/server graphql

npm install @apollo/server graphql

add body parser, cors, axios, @type/axios as well to your project

yarn add body-parser cors axios @type/axios

npm install body-parser cors axios @types/axios

body-parser

• Role: body-parser is a middleware used in Express.js (a popular Node.js web framework) for parsing incoming request bodies.

• Context with GraphQL: In a GraphQL server, body-parser is often used to parse incoming HTTP POST requests containing GraphQL queries and mutations in the request body. It's responsible for extracting the JSON payload from the request body so that the GraphQL server can process the query.

axios

• Role: axios is a popular JavaScript library for making HTTP requests, both in the browser and on the server-side. It provides a convenient way to send HTTP requests and handle responses.

• Context with GraphQL: In the context of GraphQL, axios can be used in client-side applications to send GraphQL queries and mutations to a GraphQL server over HTTP. It can also be used to handle responses and manage GraphQL API interactions.

CORS (Cross-Origin Resource Sharing)

• Role: CORS is a security feature implemented by web browsers that controls and manages cross-origin requests. It defines how a web server can allow or restrict access to its resources by web pages from other domains.

• Context with Web Development: In the context of web development, CORS plays a crucial role in enhancing security by preventing unauthorized access to resources from different origins (domains). It permits or restricts cross-origin HTTP requests made by client-side scripts in web applications.

Usage

create a filed called index.js and import the following modules

const express = require('express')
const {expressMiddleware} = require('@apollo/server/express4')
const {ApolloServer} = require('@apollo/server')
const bodyParser = require('body-parser')
const cors = require('cors')
const { default: axios } = require('axios')

Next we’ll create an async function named startServer which will have all the code to start and configure our server

async function startServer(){
    const app = express()
    const server = new ApolloServer({})
    const port = 8000
    // using middle ware
    app.use(bodyParser.json())
    app.use(cors())

    await server.start()

    app.use("/graphql", expressMiddleware(server))
    app.listen(port,()=> console.log("server started on " + port))
}
startServer()

in the above code we initialize express and apollo server. Set body parser and cors as middleware and start the server. Finally we tell express if any request comes on /graphql we serve it by using apollo server and we start listening on desired port. what this will do is whenever we enter localhost:8000 on our browser we’ll get the apollo server UI and we can make use of its functionalities.

But if you run this code now it WON’T WORK and you’ll get an error. which says

Error: Query root type must be provided.

there are two more important concepts used when dealing with GraphQL.

• type definitions

• resolvers

In GraphQL, both type definitions (often referred to as "typeDefs") and resolvers are key components that define the structure and behavior of a GraphQL API. They are used to specify the schema and how data is fetched and manipulated. Let's dive into each of these components:

Type Definitions (typeDefs):

Type definitions, or "typeDefs" define the structure and shape of the GraphQL schema. They specify the types of data that can be queried and mutated in your GraphQL API. Type definitions are typically written in the GraphQL Schema Definition Language (SDL), which is a human-readable way to define types, queries, mutations, and relationships.

Here's a basic example of type definitions for a simple GraphQL schema:

type Query {
  hello: String
  getUser(id: ID!): User
}

type User {
  id: ID
  username: String
  email: String
}

In this example:

• We define a Query type with two fields: hello and getUser.

• The User type has three fields: id, username, and email.

Type definitions provide the structure for the available data in your GraphQL API. They serve as the contract between the client and server, outlining what data can be requested. we’ll see later how can we request data from the apollo server UI.

Resolvers

Resolvers are JavaScript functions that define how to retrieve or manipulate the data for the fields defined in the type definitions. Each field in the type definitions corresponds to a resolver function. Resolvers are organized by the types they resolve, and they return the actual data when queried.

Here's an example of resolvers for the type definitions mentioned earlier:

const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
    getUser: (parent, args) => {
      // In a real application, you might fetch the user data from a database or another source
      const { id } = args;
      return fetchUserDataById(id);
    },
  },
  User: {
    id: (user) => user.id,
    username: (user) => user.username,
    email: (user) => user.email,
  },
};

In this example:

• The hello field in the Query type is resolved by a function that returns the string 'Hello, world!'.

• The getUser field in the Query type is resolved with a function that takes an id argument and fetches user data by that ID from a data source (e.g., a database).

Resolvers are crucial for defining how data is fetched, transformed, or computed. They connect your GraphQL schema to the actual data sources and services.

Together, type definitions and resolvers form the backbone of a GraphQL API. The type definitions define the available data and operations, while the resolvers determine how that data is fetched and presented to the client. This clear separation of concerns and self-documenting schema makes GraphQL powerful and flexible for building APIs.

Now that you have good understanding of how type Definitions and Resolvers work, we’ll fix the error which we were getting earlier by entering these two things i our code (index.js).

const express = require('express')
const {expressMiddleware} = require('@apollo/server/express4')
const {ApolloServer} = require('@apollo/server')
const bodyParser = require('body-parser')
const cors = require('cors')
const { default: axios } = require('axios')

async function startServer(){
    const app = express()
    const server = new ApolloServer({
       typeDefs:`
       type Todo {
            id: ID!
            title: String!
            completed: Boolean
            userId: ID!
            user: User
       }

       type User {
        id: ID!
        name: String!
        username: String!
        email: String!
        phone: String!
        website: String!
       }

       type Query {
            getTodos: [Todo]
            getAllUsers: [User]
            getUser(id:ID): User
       }
       ` ,
       resolvers: {
        // todo is the parent which graph QL passes to the function by default
        Todo:{
            user: async (todo) => (await axios.get(`https://jsonplaceholder.typicode.com/users/${todo.userId}`)).data
        },
        Query: {
            getTodos: async () => (await axios.get('https://jsonplaceholder.typicode.com/todos')).data,
            getAllUsers: async () => (await axios.get('https://jsonplaceholder.typicode.com/users')).data,
            getUser: async (parent, {id}) => (await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)).data,
        }
       }
    })
    const port = 8000
    // using middle ware
    app.use(bodyParser.json())
    app.use(cors())

    await server.start()

    app.use("/graphql", expressMiddleware(server))
    app.listen(port,()=> console.log("server started on " + port))
}

startServer()

As you can see in the above code type definitions and resolvers go inside an object which is passed to Apollo Server instance. we area also using axios here to fetch data from an free API. This is the complete code you need to run apollo server using GraphQL.

Requesting data

We just saw how we can configure the server using type definitions and resolvers to serve the data but we haven’t seen yet how the you can request data. GraphQL has an API using which we can send GraphQL queries and request for data. In this post we'll see how to send request to Apollo server using Apollo UI for testing the API.

GraphQL query

In GraphQL, a query is a request made by a client to retrieve specific data from a GraphQL API. Queries are one of the fundamental building blocks of GraphQL and serve as a way for clients to specify exactly what data they need, and in what shape, from the API. Here are the key characteristics of GraphQL queries:

1. Structured Data Retrieval: In GraphQL, a query is a structured request for data. It allows clients to specify the fields and relationships they want to retrieve, making it highly efficient for data retrieval.

2. Declarative Syntax: GraphQL queries are written in a declarative syntax, where clients declare what they want, and the server responds with exactly that data, and nothing more.

3. Hierarchical Structure: Queries have a hierarchical structure, mirroring the shape of the data that's returned. Clients can request nested data structures to retrieve related data efficiently.

4. Strongly Typed: GraphQL is a strongly typed query language. It requires the client to specify the types and fields they want to query, and it enforces a strict schema that defines what is available for retrieval.

5. Single Request: Unlike traditional REST APIs that might require multiple requests to different endpoints to assemble the required data, GraphQL typically requires a single request to retrieve all the requested data.

6. No Over-fetching or Under-fetching: With GraphQL queries, clients can avoid over-fetching (retrieving more data than needed) and under-fetching (making multiple requests for related data) issues, optimizing data transfer.

Here's an example of a simple GraphQL query:

query Query{
  user(id: 123) {
    name
    email
    posts {
      title
      body
    }
  }
}

Breaking down the query:

• query is the keyword that signals the beginning of a query operation.

• user(id: 123) is a field that represents a user query with an id argument.

• name and email are fields on the user object, specifying the data the client wants to retrieve about the user.

• posts is a field that represents a query for the user's posts.

• title and body are fields on the posts object, specifying the data the client wants to retrieve about each post.

The response to this query will be structured in the same hierarchical way as the query, providing the requested user data and their posts with the specified fields.

GraphQL queries allow clients to be very precise in requesting the data they need, reducing over-fetching and minimizing the number of API requests. This flexibility and efficiency are some of the key advantages of GraphQL over traditional REST APIs.

So now we understand how GraphQL works at the server side and client side. we know how a GraphQL query can be structured and sent to the server. So now we’ll see some examples of how this works using apollo UI

Examples

simple query

here you can see the apollo UI which lets us test our API. You can see in the operations tab we have entered our query and to our right is the response tab. lets look at the query now.

query Query{
  getTodos {
    id
    title
  }
}

1. on line one first we have entered the keyword query followed by ‘Query’ this is just a name which i choose you can replace it with anything else. This is the main block inside which we can specify our queries

2. on line 2 we type getTodos. this cannot be named as we like because we have specified this type in our TypeDefs and also we have specified a resolver for this. Whatever key/type we put inside the main block should be present inside the Query root on the server side.

   TypeDefs at server

    typeDefs:`
           type Todo {
                id: ID!
                title: String!
                completed: Boolean
                userId: ID!
                user: User
           }
   
           type User {
            id: ID!
            name: String!
            username: String!
            email: String!
            phone: String!
            website: String!
           }
   
           type Query {
                getTodos: [Todo]
                getAllUsers: [User]
                getUser(id:ID): User
           }
           ` ,
   

   Here we can see that we have mentioned getTodos in the Query root and its suppose to return a list of Todos. Now look at the type for Todos and we can see that it can return id, title, completed, userId, user

   1. So let us look back at the query. in the query we can see that inside getTodos we are specifying the id and title. So we are telling GraphQL for every todo we want only Id and title nothing else and if you look at the response you can see that we have gotten exactly what we have asked for

   2. This shows how GraphQL only sends what we have asked for.

Multiple queries

1. Here we have also added getUser type and as you can observer we are getting list of Todos as well as response for getUser.

2. You may also observe that there is id passed to get user that is because the get user resolver is defined in such a way that it takes an argument. you can look into index.js file

3. So we can see that in single request we can fetch data from two different places

Given arguments through variables

1. sometimes you may want to pass the value to a type through a variable and not hard code the value directly into the query.

you can use the below syntax to pass the value as a variable

query Query($getUserId: ID) {
  getUser(id: $getUserId) {
    id
    email
  }
}

Nested Queries

sometimes we may want to nest queries and access the value of the nested object(type).

1. here we are fetching the all the Todos using getTodos and accessing the user type for each todo which which will be returned by getTodos. please check the resolver definition inside the code of index.js to check how its done.

2. This is how we can make nested queries and get all the required info in single request to the server

So this is it!! These are all the things you need to get started with GraphQL and understand how it works. I know its a long and detailed post and it took me a while to finish it. Soon I'll be posting a new blog explaining how to use GraphQL in Front end to so you can make queries programmatically. Hope you liked this post and it added some value to your coding journey. See you in the next one!

Now we'll see how can we make a better version of the counter which works like an odometer just using some plain HTML, CSS and JS.

What the final result looks like

HTML

First, we will set up a basic HTML structure, I have also added some CSS classes to the elements which we'll see later in the CSS part. We'll name the file index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Counter</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="box">
            <div class="counter-container" id="cc">
            </div>
            <div class="button-container" id="bc">
                <input class="button red" type="button" value="backword" id="b">
                <input class="button green" type="button" value="forward" id="f">
            </div>
        </div>
        <script src="counter_script.js"></script>
    </body>
</html>

We have three things(div) to consider here

• box - div with a class box that holds two other divs counter-container and button-container

• Counter-container - This will be populated using JavaScript later. This will hold the contents of the counter

• button container - This will hold the buttons used to increase and decrease the counter

I have also linked a stylesheet and a script to this document which I'll explain later

CSS

Let's make things look pretty

body,html{
    height: 100%;
    overflow: hidden;
    margin: 0px;
}

.box{
    display: flex;
    background-color: rgb(50, 49, 48);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.counter-container{
    display: flex;
    width: fit-content;
    border: 4px rgb(73, 71, 66) solid;
    overflow: hidden;
    border-radius: 10px;
}

.button-container{
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: rgb(171, 166, 159);
}

.button{
    font-family: 'Consolas';
    font-size: 15px;
    border-radius: 10px;
    width: 80px;
}

.green{
    background-color: rgb(159, 227, 159);
}

.red{
    background-color: rgb(227, 136, 111);
}

.outer-container{
    background-color:rgb(189, 200, 201);
    padding-left: 4px;
    height: 70px;
    border: 2px black solid;
}

.number-container{
    font-family: 'Consolas';
    font-size: 60px;
    width: 0.6em;
    transition: transform;
    transition-duration: 0.2s;
}

.number{
    height: 70px;
}

Here we can see all the definitions of CSS classes that we have used in our HTML. I'll explain this CSS in a brief

• box - this will be applied to the outermost box and we want its content to be at the center of the screen.

• counter-container - This will be applied to the div/container of the counter and its overflow is hidden for a reason which I'll explain later

• button-container - This will be applied to the div/container that holds the buttons

• green, red - these are just class

• body, html - we set the height of this element to 100% so the whole screen is covered

• outer-container - This will be applied to the div that holds the divs representing each digit of the number. This div will be later added to the DOM using JS

• number-container - This will be applied to individual digit divs that will hold the divs of numbers ranging from 0 to 9. This div will be later added to the DOM using JS

• number - this will be applied to the div that holds each number

Don't worry if you find this a little bit confusing you'll understand this later when we talk counter container will be populated using JavaScript

The only thing you need to keep in mind while styling this is the overflow of the counter-container should be hidden as this directly affects the look and functionality of the counter. You need to also maintain the HTML structure as shown above for this to work

JavaScript

I will be explaining this JS code function by function first. Once we know the purpose of each function we will see how we use the functions to get our desired result.

We have three functions

• get_number_digits

• make_number_containers

• counter_setter

get_number_digits

function get_number_digits(number){
    if (number == 0) return 1

    let number_of_digits = 0
    while(number > 0) {
        number = Math.floor(number/10)
        number_of_digits ++
    }
    return number_of_digits
}

This function will return the number of digits in a given number for example if the number is 3432 number of digits will be 4. If the number is 23932 the number of digits will be 5.

make_number_containers

function make_number_containers(number_of_digits) {
    let counter_c = document.getElementById('cc')

    // creating a number container for each digit of the number
    for (let index = number_of_digits; index > 0; index--) {

        // creating outer container and adding the required class
        let outer_c = document.createElement('div')
        outer_c.classList.add('outer-container')

        // creating number container and adding the required class and id
        let num_c = document.createElement("div")
        num_c.classList.add('number-container')
        num_c.id = 'nums' + index

        // adding number div inside number container. one for each from 0-9
        for (let i = 0; i < 10; i++) {
            let num = document.createElement('div')
            num.classList.add('number')
            num.innerText = i
            num_c.appendChild(num)
        }

        outer_c.appendChild(num_c)
        counter_c.appendChild(outer_c)
    }

}

The idea behind this function is that we create an outer-container for each digit of a number inside the counter. Inside it, we create a number-container that has 10 divs. Each div will represent a number from 0-9.

You will understand it better when you see this picture.

Let us assume the number is 0 so the number of digits will be 1 in that case only one container will be created. For the demonstration purpose, I have removed the overflow: hidden property of the counter-container class. This will give you a better perspective of things and now you will also understand the purpose of making the overflow hidden of counter-container.

HTML for the above image will look like this

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Counter</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="box">
            <div class="counter-container" id="cc">
                <div class="outer-container">
                    <div class="number-container" id="nums1" style="transform: translateY(0px);">
                        <div class="number">0</div>
                        <div class="number">1</div>
                        <div class="number">2</div>
                        <div class="number">3</div>
                        <div class="number">4</div>
                        <div class="number">5</div>
                        <div class="number">6</div>
                        <div class="number">7</div>
                        <div class="number">8</div>
                        <div class="number">9</div>
                    </div>
                </div>
            </div>
        </div>
        <script src="counter_script.js"></script>
    </body>
</html>

Here we have only one digit so only one container is created. If we set the overflow: hidden property of the counter-container class as intended we will get the following result

counter_setter

function counter_setter(number,salt) {
    for (let index = 1; index <= number_of_digits; index++) {
        // getting the correct number container
        let id = 'nums' + index
        let div = document.getElementById(id)

        // Geting the last digit of number
        const digit = (number % 10); 
        let value = Math.floor(SLIDE_CONST * digit)
        value = Math.round(value + (salt * digit)) // adding salt to the value

        // updating the translate value of the div after 200ms
        setTimeout(() => { div.style.transform = `translateY(-${value}px)` }, 200)
        number = Math.floor(number / 10); // Remove the last digit
    }
}

Now we have a better picture of how the number divs are stacked on top of each other and because the overflow is hidden we can only see one number at a time. Now to display any number we just have to slide the number container up or down.

We calculate the number of pixels we need to slide the number container using this simple formula

silde_value = slide_constant x digit

where slide constant is the height of the div containing each number. In our case height is 70px. Suppose we have to display the number 7. Using the above formula we have to slide the container that holds the stacked divs of number exactly 490px.

The basic idea of this function is that we simply go through each digit of the given number access its number container and slide it depending on the value of the digit

So now we just have to put all these functions together. Here is what the final js code will look like

function get_number_digits(number){
    if (number == 0) return 1

    let number_of_digits = 0
    while(number > 0) {
        number = Math.floor(number/10)
        number_of_digits ++
    }
    return number_of_digits
}


function make_number_containers(number_of_digits) {
    let counter_c = document.getElementById('cc')

    // creating a number container for each digit of the number
    for (let index = number_of_digits; index > 0; index--) {

        // creating outer container and adding the required class and id
        let outer_c = document.createElement('div')
        outer_c.classList.add('outer-container')

        // creating number container and adding the required class
        let num_c = document.createElement("div")
        num_c.classList.add('number-container')
        num_c.id = 'nums' + index

        // adding number div inside number container. one for each from 0-9
        for (let i = 0; i < 10; i++) {
            let num = document.createElement('div')
            num.classList.add('number')
            num.innerText = i
            num_c.appendChild(num)
        }

        outer_c.appendChild(num_c)
        counter_c.appendChild(outer_c)
    }

}

function counter_setter(number,salt) {
    for (let index = 1; index <= number_of_digits; index++) {
        // getting the correct number container
        let id = 'nums' + index
        let div = document.getElementById(id)

        // Geting the last digit of number
        const digit = (number % 10); 
        let value = Math.floor(SLIDE_CONST * digit)
        value = Math.round(value + (salt * digit)) // adding salt to the value

        // updating the translate value of the div after 200ms
        setTimeout(() => { div.style.transform = `translateY(-${value}px)` }, 200)
        number = Math.floor(number / 10); // Remove the last digit
    }
}

const SLIDE_CONST = 70
let number_counter = 1238
let salt = 0
let number_of_digits = get_number_digits(number_counter)
let btn_c = document.getElementById('bc')


make_number_containers(number_of_digits)
counter_setter(number_counter, salt)

btn_c.addEventListener('click',(event)=>{
    if (event.target.tagName == 'INPUT'){
        if(event.target.id == "f") number_counter ++
        if(event.target.id == "b") number_counter --
        console.log(number_counter);
        counter_setter(number_counter, salt)
    }
})

1. get_number_digits(number): This function calculates the number of digits in a given number. It returns 1 if the number is 0 and counts the digits using a while loop for positive numbers.

2. make_number_containers(number_of_digits): This function creates a set of HTML containers for displaying individual digits of a number. It appends these containers to an element with the id 'cc'.

3. counter_setter(number, salt): This function updates the display of the individual digit containers to simulate a sliding effect. It takes the number and salt as parameters and adjusts the position of each digit container based on these values.

4. Constants and variables: They define a constant SLIDE_CONST with a value of 70 and initializes variables number_counter, salt, and number_of_digits. The number_counter represents the current number, while salt is used for adjusting the sliding effect. The number_of_digits is calculated using the get_number_digits function.

5. btn_c is assigned a reference to an HTML element with the id 'bc', which is expected to be a button.

6. The code calls make_number_containers(number_of_digits) to create the initial digit containers based on the number of digits in number_counter.

7. It calls counter_setter(number_counter, salt) to set the initial display of the digit containers based on the number_counter and salt.

8. An event listener is added to btn_c to listen for click events on its child elements. When a click occurs on an input element inside btn_c, it checks the element's id attribute. If it's "f," it increments number_counter; if it's "b," it decrements number_counter and then logs the updated value to the console. Finally, it calls counter_setter to update the display based on the new number_counter value.

Overall, this code creates a visual representation of a number with sliding digits and allows the user to increment or decrement the displayed number using buttons. The sliding effect is controlled by the counter_setter function and the number of digits in the displayed number is dynamically determined by get_number_digits.

Here's how it looks in action under the hood

Access the code from GitHub repository

If you have reached till here thanks for reading and I hope it helped you in some way. This was my first blog and I hope you guys like it. If you have any suggestions/tips/corrections please feel free to write it down in the comments section.

Happy coding!!!