DEV Community: Shubham Tiwari

2 min read

Shubham Tiwari

Aug 19 '25

Next JS + Express + Mongo + AI stack

#webdev #basic #beginners #learning

2 min read

Shubham Tiwari

Aug 18 '25

From Server to Client: Handling Initial Data Fetching and Infinite Scroll

#react #nextjs #webdev #javascript

Comments 7

4 min read

Shubham Tiwari

Jul 15 '25

Mastering Tailwind CSS: Hidden Gems & Productivity Hacks

#html #css #webdev #beginners

Comments 8

6 min read

5 Essential JavaScript Patterns Every Developer Should Know

Shubham Tiwari — Wed, 20 Aug 2025 10:28:34 +0000

Hello my frontend developers, today i will sharing 5 useful patterns which you could use in your projects using javascript.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.

Lets dive in...
Table of contents

What is tailwind?
1. Module pattern
2. Revealing module pattern
3. Factory pattern
4. Strategy pattern
5. Proxy Pattern

1. Module pattern

Encapsulates code in a private scope, exposing only what’s necessary.

// Module pattern
const Counter = (() => {
  let count = 0;

  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
})();

Counter.increment()
Counter.increment()
scrib.show(Counter.getCount()); // 2

2. Revealing Module pattern

Like module pattern, but explicitly maps private → public methods.

// Revealing module pattern
const User = (() => {
  let name = "Guest";

  function setName(newName) { name = newName; }
  function getName() { return name; }

  return { setName, getName };
})();

User.setName("Shubham");
scrib.show(User.getName()); // Shubham

3. Factory pattern

Creates objects without specifying the exact class/type.

// Factory pattern
function UserFactory(type) {
  switch (type) {
    case "admin": return { role: "Admin", permissions: ["read", "write", "delete"] };
    case "guest": return { role: "Guest", permissions: ["read"] };
    default: return { role: "User", permissions: ["read", "write"] };
  }
}

scrib.show(UserFactory("admin"));

4. Strategy pattern

Defines interchangeable algorithms encapsulated in objects.

// Strategy pattern
const strategies = {
  add: (a, b) => a + b,
  multiply: (a, b) => a * b
};

function execute(strategy, a, b) {
  return strategies[strategy](a, b);
}

scrib.show(execute("add", 2, 3)); // 5
scrib.show(execute("multiply", 2, 3)); // 6

5. Proxy pattern

Intercepts & customizes operations on objects.

// Proxy Pattern
const user = { name: "Shubham", age: 25 };

const proxy = new Proxy(user, {
  get: (target, prop) => prop in target ? target[prop] : "Not Found",
  set: (target, prop, value) => {
    if (prop === "age" && value < 0) throw new Error("Age must be positive");
    target[prop] = value;
    return true;
  }
});

scrib.show(proxy.name); // Shubham
proxy.age = 30;          // ✅ works
// proxy.age = -5;       // ❌ throws error

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript

1 min read

Next JS + Express + Mongo + AI stack

Shubham Tiwari — Tue, 19 Aug 2025 08:17:52 +0000

👨💻 My Daily Tech Stack as a Frontend Engineer

Every day when I sit down to code, I love having a toolkit that feels reliable, efficient, and flexible. Over time, I’ve curated a stack that helps me build everything from small utilities to full-scale applications.

Here’s what my day-to-day stack looks like:

⚡ Frontend essentials

Next.js (with TypeScript) → My foundation for building fast, scalable, and SEO-friendly apps
Zustand → Simple and effective state management without the boilerplate
React Hook Form → Smooth form handling
Zod → Clean validation and error handling
Tailwind CSS → Styling at speed
Shadcn/UI → Ready-to-use yet customizable components
Lucide React → Crisp icons that just fit in any design

🔗 Backend & Data

Node.js + Express → For building APIs when I need flexibility
MongoDB → My go-to database for quick prototyping and scaling

🎯 Extras I use often

NextAuth.js → Plug-and-play authentication (Google, GitHub, etc.)
React Markdown → For rendering content-rich UIs
Recharts → Visualizing data with clean charts
Gemini AI API → Bringing AI into apps is something I’ve been really enjoying lately 🚀

This stack has become second nature to me — I use it almost daily in my projects, and it helps me move fast while keeping things maintainable.

👉 I’m curious, what’s that one tool in your stack you can’t imagine coding without?

✨ Always excited to connect and collaborate on projects using this stack — feel free to reach out!

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript

1 min read

From Server to Client: Handling Initial Data Fetching and Infinite Scroll

Shubham Tiwari — Mon, 18 Aug 2025 10:38:33 +0000

Hello my frontend developers, today i will be sharing a pattern of data fetching and want all of yours suggestions about this and if there is any better way to do this.

Tech Stack - Next JS (frontend) + Express and MongoDB (backend)

Feature:

So i was implementing a feature where the list of data will have infinite scrolling but with with a load more button at the end of the list, showing more data and loading limited data initially

Implementation:

I have loaded the initial data with a limit as page 1 initially on server side to reduce load on the client side, then using client side and useEffect, created infinite scrolling with a load more button which loads more data as click it until we reach the last item in the data and hiding the load more button.

Backend setup

import { Exercises } from '../../schemas/Exercise.js';
import { Request, Response } from 'express';

export const getExercises = async (req: Request, res: Response) => {
    const { user, limit, page } = req.body;

    if (!user)
        return res.status(400).json({ message: 'Bad Request - user is required' });

    try {
        const hasMoreExercises = await Exercises.countDocuments({ "user.email": user.email }) > limit * page;
        const exercises = await Exercises.find({ "user.email": user.email }).limit(limit).skip((page - 1) * limit).sort({ date: -1 });
        if (!exercises || exercises.length === 0) {
            return res.status(404).json({ message: 'No exercises found for this user' });
        }
        res.status(200).json({ exercises, hasMoreExercises });
    } catch (err) {
        console.error(err);
        res.status(500).json({ message: 'Internal Server Error' });
    }
};

Firstly we are extracting out the required data from req.body
Then adding a conditional check for the user object
hasMoreExercises checks if there is more data in the database by checking whether the limit times page is larger than the documents count and return this boolean flag to the client to perform data fetching for the next page until it reached the end and returns false.
Using limit and skip, we send the data in chunks (limit = 50, page = 2 will fetch the data from 51 - 100)
Sorting with date as descendening to show latest data first
In the end, returning the data as well as hasMoreExercises flag.

Frontend (Data Fetching util)

// utils.ts
export const fetchExercises = async ({ user, page }: { user: User | undefined, page: number }) => {
  const response = await fetch("http://localhost:5000/exercises/get", {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ user, limit: 50, page }),
  });
  const data = await response.json();
  return data;
}

This method just takes user and page as params and fetch the data from the api using these params value dynamically.
Using body property, we are passing the required params to the api and perform the data fetching accordingly.

Frontend (Server side fetching)

import { AddExerciseForm } from '@/components/exercise/form/AddExercise'
import ExerciseList from '@/components/exercise/exercise-list/ExerciseList'
import React from 'react'
import { auth } from '../api/auth/nextAuth'
import { redirect } from 'next/navigation'
import { fetchExercises } from '@/lib/utils'

const page = async () => {
    const session = await auth();
    const exercises = await fetchExercises({ user: session?.user, page: 1 });

    if (!session?.user) {
        redirect("/");
    }
    return (
        <main className="font-sans min-h-screen bg-slate-950 text-slate-100 pt-10">
            <div className="max-w-7xl mx-auto px-5 py-20">
                <div className='flex flex-wrap justify-between gap-5 items-center mb-10'>
                    <h1 className="text-3xl font-bold text-center">Exercise Tracker</h1>
                    <AddExerciseForm />
                </div>
                <ExerciseList exercisesData={exercises} user={session?.user} />
            </div>
        </main>
    )
}

export default page

Here we are using the same fetchExercises util with user from next-auth library and page as 1 since it is initial load and we have to show the first set of data.

Frontend (Client side fetching - infinite scrolling)

"use client"
import { ExerciseFormValues, useExerciseStoreList } from "@/store/exercise"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { User as NextAuthUser } from "next-auth"
import { fetchExercises } from "@/lib/utils"

export default function ExerciseList({ exercisesData, user }: { exercisesData: { exercises: ExerciseFormValues[], hasMoreExercises: boolean }, user: NextAuthUser | undefined }) {
    const { exercises, setExercises } = useExerciseStoreList((state) => state)
    const [page, setPage] = useState(1)
    const [hasMoreExercises, setHasMoreExercises] = useState(exercisesData.hasMoreExercises)

    useEffect(() => {
        setExercises(exercisesData.exercises)
    }, [])
    return (
        <section className="grid grid-cols-1 gap-10">

           {/* UI Mapping of data */}

            <div className="flex justify-center mt-5">
                {
                    hasMoreExercises ? (
                        <Button variant="outline" size="default" className="cursor-pointer w-fit text-primary" onClick={() => {
                            fetchExercises({ user: user, page: page + 1 }).then((data) => {
                                if (data && data.exercises.length > 0 && exercises) {
                                    setExercises([...exercises, ...data.exercises])
                                    setHasMoreExercises(data.hasMoreExercises)
                                }
                            })
                            setPage(page + 1)
                        }}>Load more...</Button>
                    ) : null
                }
            </div>
        </section>
    )
}

Here we are loading the states from zustand which is a state management library
useEffect will set the initial state from server side fetching to this component
Load more button will again call the api but with increment of page by 1, so if its page 1, the load more will call the api with page 2 loading next set of data and setting the state by appending the new set of data to the existing set of data.

That's it for this post, Let me know if i could do any improvements or follow a more robust and efficient approach for this feature.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript

1 min read

Mastering Tailwind CSS: Hidden Gems & Productivity Hacks

Shubham Tiwari — Tue, 15 Jul 2025 12:59:27 +0000

Hello my frontend developer friends, today i will be sharing some useful snippets for tailwind css which will help you to create designs, layouts, transition and handling different states like hover, focus, group hover, etc.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.

Lets dive in...
Table of contents

What is tailwind?
1. Use apply derivative
2. Responsive design
3. Group hover
4. Dark mode
5. Line clamp
6. Generating classes dynamically
7. Grid Auto-Fill Magic
8. Theming
9. Has selector
10. Font styling using css variable
Bonus - Card component group

What is tailwind?

Tailwind CSS is a utility-first CSS framework that lets you build custom user interfaces quickly using pre-defined classes directly in your HTML. Instead of writing custom CSS, you style elements by combining small, reusable utility classes like p-4, text-center, or bg-blue-500.
It could be installed via CDN, PostCSS or with frameworks like React or Next JS as a part of their CLI.

1. Use @apply to Reuse Utility Classes

If your classes become too huge to maintain in html tags, you could add those inside a custom class name with @apply directive and use that custom class name to apply the styles which will be readable in html structure.

/* styles.css */
.btn {
  @apply px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700;
}

<button class="btn">Click Me</button>

2. Responsive Design in One Line

Responsive design could be added via breakpoints variants like "sm" for mobile, "md" for tablet, "lg" for laptops, "xl" for larger viewports.
Default viewport targeted:

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

<div class="text-sm md:text-base lg:text-lg">
  Responsive Text
</div>

This text font size will change based on the viewport or device we are using to make it look better on smaller as well as larger screen sizes.
You can do the same for other styles like widths, paddings, margings, spacings, changing layout like flex row to flex col in smaller screen sizes, etc.

3. Group Hover for Parent-Child Effects

Imagine you want to style you child elements based on parent element states like hover or focus, well tailwind helps with these kind of transitions using "group" class.
We could use group class in 2 ways - first way is to use the class as it is "group" and second way is to name the group like this "group/card". Second way is recommended in case if you want to use multiple groups nested within containers.
Target child element styles using group - To change styles on child elements based on group, we could do that like this - "bg-white group-hover:bg-black" and with named groups "bg-white group-hover/card:bg-black". This will change the child element background color to black if the parent is hovered.

<div class="group hover:bg-purple-100 bg-purple-900">
    <h1 class="group-hover:text-purple-600 text-purple-200">Heading</h1>
    <p class="group-hover:text-purple-600 text-purple-200">Some content</p>
</div>

4. Dark Mode Support with Ease

To change the styles on dark mode, we could use "dark:" variant to apply styles separately for dark mode

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Dark mode enabled
</div>

5. Line Clamp Text Truncation

Tailwind includes line-clamping for multi-line text truncation.
Currently line clamp class is not supported in scribbler editor but you can check it out on codepen or in your local dev.

<p class="line-clamp-3">
  This is a very long paragraph that will only show up to three lines...
</p>

6. Generating classes dynamically

Based on "4px" multiplication for numbers. Eg: tailwind has a default class for 20px padding as "p-5" but lets say you want a padding of 22px which is not available as default, you could do some math with floating point numbers and create a class accordingly like this - 22px = p-5.5 (5 x 4 -> 20 + .5 x 4 -> 2 = 22px). So to generate these type of numerical class, just divide the px value by 4 and it will be your class. NOTE: floating point only supports for value 0.25, 0.5, 0.75 since these 3 represent 3px.

// width = 384px, height = 320px
<div class="w-96 h-80 bg-gray-900 border border-2 border-white">
    <p>
    This is a very long paragraph
    </p>
</div>

7. Grid Auto-Fill Magic

Auto-fill responsive layout with no breakpoints!

<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <!-- responsive cards -->
</div>

8. Theming

Tailwind supports themeing from the css file itself, we could create theme variants and use those to style our elements based on the selected theme.
Currently theming is not supported in scribbler editor but you can check it out on codepen or in your local dev.

@custom-variant midnight (&:where([data-theme="midnight"] *));
@custom-variant violet (&:where([data-theme="violet"] *));

This will create 2 theme variants "violet:" and "midnight:"

<div class="midnight:bg-black violet:bg-violet-800" data-theme={theme}>...</div>

Here theme could be a dynamic variable or state, based on this data-theme value, the theme class for the background will be applied.

9. Has selector

This selector is powerful since it allows us to change parent styles based on child elements styles or states
Currently has selector is not supported in scribbler editor but you can check it out on codepen or in your local dev.

<label
  class="has-checked:bg-indigo-50 has-checked:text-indigo-900"
>
  <svg fill="currentColor">
    <!-- ... -->
  </svg>
  Google Pay
  <input type="checkbox" class="checked:border-indigo-500 ..." />
</label>

Here we are checking if the checkbox input is checked then the label background and text color will change. So, its a dynamic styling without JS, pretty cool, right?

10. Font styling using css variable

You could create a custom class with CSS font variables directly

@theme {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem; 
  --text-tiny--letter-spacing: 0.125rem; 
  --text-tiny--font-weight: 500; 
}

This will create a class "text-tiny" with font size 10px, line height 24px, letter spacing, 2px and font-weight 500, all of these with a single class name.
You could do the same for other stylings like color, spacing, shadow, animation, etc. Checkout the tailwind official documentation to learn more about these.

Bonus

I have created a simple card component with some of these features:

Scribbler code - https://app.scribbler.live/?jsnb=github:ShubhamTiwari909/tailwind-tips-tricks-scribbler/tailwind-tips-cards&hide-menu=true&hide-code=false

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript

1 min read

Handling REST APIs Like a Pro: Auth, Headers, and Advanced Fetching

Shubham Tiwari — Sat, 21 Jun 2025 15:08:47 +0000

Hello my frontend developer friends, today i will be sharing some useful snippets for handling apis on frontend.
Interacting with APIs is a core part of any React application. Whether you're building a blog, a dashboard, or an e-commerce app, you'll often need to fetch data, send data, and secure your requests. This post covers everything from basic fetching to advanced topics like authentication and abort controllers

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
I will be using scrib.show from scribbler.live, it is equivalent to console.log

Lets dive in...
Table of contents

HTTP Methods
Types of data fetching
Fetching a single piece of data
Query params
Limit and Skip
Sort and order
Authentication and authorization
Adding a product
Updating a product
Deleting a product
Abort controller
Reference

HTTP methods

HTTP methods define the action you want to perform on a resource. Types of http methods:

GET - Fetch data from the server
POST - Send data to the server to create a new resource
PUT - Update/replace an existing resource entirely.
PATCH - Update part of an existing resource
DELETE - Delete a resource from the server

Types of data fetching

We could fetch the data in 2 ways: Using promises with .then method or using async/await

Promises - Basic data fetching

// Could be GET or POST/PUT/PATCH/DELETE
fetch('https://dummyjson.com/test')
.then(res => res.json())
.then(scrib.show);

Async/await - Basic data fetching, Recommended one as it is more cleaner way for asynchronous data fetching.

// Could be GET or POST/PUT/PATCH/DELETE
const fetchData = async () => {
  const result = await fetch('https://dummyjson.com/test')
  const data = await result.json()
  return data
}
const data = await fetchData()
scrib.show(data)

Fetching a single piece of data

We could pass a data id to fetch a single piece of data like "/products/1" where 1 is the product id we want to fetch

// Fetching a single piece of data
const result = await fetch('https://dummyjson.com/products/1')
const data = await result.json()
scrib.show(data)

Query params

Useful when you need filtering, searching, etc. It is passed by adding a "?" symbol at the end of the url slug, it follows key value pair in this format "?key=value" and separated by "&" for passing 2 query params "?key1=value1&ke2=value2"

// Query params - It wills select all phone products their id and brand name
const result = await fetch('https://dummyjson.com/products/search?q=phone&select=brand')
const data = await result.json()
scrib.show(data)

Limit and Skip using query params

These query params could be used to limit the number of results you want, lets say for pagination or want to skip some of the data

// Limit and skip - Will skip first 10 products and fetch next 10 products in the list of 194 products with their title, id and price
const result = await fetch('https://dummyjson.com/products?limit=10&skip=10&select=title,price')
const data = await result.json()
scrib.show(data)

Sort and order using query params

These are used to sort the data from the backend and then sent it to the frontend in either ascending or descending order.

// Sort and order
const result = await fetch('https://dummyjson.com/products?sortBy=title&order=asc&select=title,stock,weight')
const data = await result.json()
scrib.show(data)

Authentication and authorization

Authentication verifies the identity of the user.
Authorization determine if an authenticated user has permission to access a resource or perform an action.

// Authentication - headers specifies the content type we are passing to the backend which is json
// body refers to the request body which is used to send data to the backend, in this case username and password values will be used
// to authenticate the user on the backend and send a response accordingly
// Check output here - https://dummyjson.com/docs/auth
const result = await fetch('https://dummyjson.com/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    username: 'emilys',
    password: 'emilyspass',
  }),
  credentials: 'include' // Include cookies (e.g., accessToken) in the request
})
const data = await result.json()
scrib.show(data)

// Authorization - A bearer token which you will get when you do the authentication, this could be used to validate the user on the backend
// Check output here - https://dummyjson.com/docs/auth
const result = await fetch('https://dummyjson.com/auth/me', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer /* YOUR_ACCESS_TOKEN_HERE */', // Pass JWT via Authorization header
  }, 
  credentials: 'include' // Include cookies (e.g., accessToken) in the request
})
const data = await result.json()
scrib.show(data)

Adding a product

POST method is used to add a new data

// Adding product
// headers specifies the content type we are passing to the backend which is json
// body refers to the request body which is used to send data to the backend, in this case title to pass the title of the product we want to add
const result = await fetch('https://dummyjson.com/products/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'BMW Pencil',
    /* other product data */
  })
})
const data = await result.json()
scrib.show(data)

Updating a product

PUT method is used to update some data with id as 1

// Update a product
// headers specifies the content type we are passing to the backend which is json
// body refers to the request body which is used to send data to the backend, in this case title to pass the title of the product we want to update
const result = await fetch('https://dummyjson.com/products/1', {
  method: 'PUT', /* or PATCH */
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'iPhone Galaxy +1'
  })
})
const data = await result.json()
scrib.show(data)

Deleting a product

DELETE method is used to perform a delete operation

// Deleting a product - this will delete the product with id as 1
const result = await fetch('https://dummyjson.com/products/1', {
  method: 'DELETE',
})
const data = await result.json()
scrib.show(data)

Abort controller

Sometimes you want to cancel a request in a scenario lets say when a user click a button which makes an api call and then click another button which also makes an api call, in this case, you want to cancel the first button api call and proceed with second api call only. Abort controller helps in this scenario to cancel request which you don't need.
This example is just to show the functionality of abort controller by manully aborting a request, in real world scenarios you will be handling this with some efficient techniques which handles the abort process automatically like react js useEffect hook where the return statement handles the abort process on component unmount automatically.

// Abort controller
const controller1 = new AbortController(); // Controller for first fetch
const controller2 = new AbortController(); // Controller for second fetch

const fetchData = async (url, controller, label) => {
  try {
    const response = await fetch(url, { signal: controller.signal });
    const data = await response.json();
    scrib.show(`${label} Success:`, data);
  } catch (error) {
    if (error.name === 'AbortError') {
      scrib.show(`${label} Aborted!`);
    } else {
      scrib.show(`${label} Error:`, error);
    }
  }
};

// Call first fetch
fetchData('https://dummyjson.com/products/1', controller1, 'Fetch 1');

// Abort the first call before it completes
setTimeout(() => {
  controller1.abort(); // Cancel Fetch 1
}, 100); // Cancel after 100ms

// Start second fetch which will succeed
fetchData('https://dummyjson.com/products/2', controller2, 'Fetch 2');

Reference - Dummy JSON api

I have used this dummy json api in this blog examples, you could checkout this api to learn more about api handling.
Link - https://dummyjson.com/

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript

1 min read

20 Must-Know JavaScript Utility Functions to Boost Productivity

Shubham Tiwari — Mon, 19 May 2025 09:34:33 +0000

Hello my frontend developer friends, today i will be sharing some useful utilities to avoid repeating code and boost productivity. These snippets are often used in many projects and saves a lots of time doing the same thing again and again in multiple files.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
I will be using scrib.show from scribbler.live, it is equivalent to console.log

Code. Hack. Win. Every Idea Starts with a Scribble.

Join the Summer of Scribbling 2025 — a 15-day online JavaScript hackathon where creativity meets code. From AI to XR, build innovative projects using Scribbler's browser-based JavaScript notebooks. Compete for exciting prizes, including Android tablets and internship opportunities. Registration is now open.

Lets dive in...
Table of contents

Generate a random integer between min and max
Get time ago (e.g., "4 hours ago")
Format date to YYYY-MM-DD
Remove duplicates
Flatten nested arrays
Shuffle array
Get the intersection of two arrays
Capitalize first letter
Slugify a string to create a hyphenated url slug
Truncate a string
Validating an email
Check if an object is empty
Get query params from URL
Serialize object to query string
Checking for leap year
Remove Falsy Values
Count Occurrences in Array
Find Duplicates in Array
Check if Value is Numeric
Pick specific keys from an object

1. Generate a random integer between min and max

It is useful if you want to create a random id for some object in the data.

// 1. Generate a random integer between min and max
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
scrib.show(randomInt(100,100000))

2. Get time ago (e.g., "4 hours ago")

It is useful to show when a person was online in a chat app or could be used to show when a file was last updated.

// 2. Get time ago (e.g., "4 hours ago")
const timeAgo = date => {
  const diff = (new Date() - new Date(date)) / 1000;
  const units = [
    ['year', 31536000], ['month', 2592000],
    ['day', 86400], ['hour', 3600],
    ['minute', 60], ['second', 1]
  ];
  for (let [unit, sec] of units) {
    const val = Math.floor(diff / sec);
    if (val >= 1) return `${val} ${unit}${val > 1 ? 's' : ''} ago`;
  }
  return 'just now';
};
scrib.show(timeAgo("2025/05/12"))

3. Format date to YYYY-MM-DD

It is useful to convert the date coming from an api to yyyy-mm-dd format for UI.

// 3. Format date to YYYY-MM-DD 
const formatDate = date => new Date(date).toISOString().split('T')[0];
scrib.show(formatDate("2025/05/12"))

4. Remove duplicates

It could be used to remove duplicate values from an array to make it valid and corrected.

// 4. Remove duplicates
const unique = arr => [...new Set(arr)];
scrib.show(unique([1,1,2,2,2,3,4,5,5,9]))

5. Flatten nested arrays

It could be used to flatten a multi dimensional array to single level array to map over its values.

// 5. Flatten nested arrays
const flatten = arr => arr.flat(Infinity);
scrib.show(flatten([1,1,[2,2,2],[3,4,[5]],5,9]))

6. Shuffle array

It could be used to shuffle the UI list every time a user visit the page.

// 6. Shuffle array
const shuffle = arr => arr.sort(() => Math.random() - 0.5);
scrib.show(shuffle([1,1,2,2,2,3,4,5,5,9]))

7. Get the intersection of two arrays

It could be used to compare 2 lists for a difference.

// 7. Get the intersection of two arrays
const intersect = (a, b) => a.filter(x => b.includes(x));
scrib.show(intersect([1,2,3,4],[1,3,4,5]))

8. Capitalize first letter

Captilizing the first letter of the word in UI

// 8. Capitalize first letter
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
scrib.show(capitalize("mysterio"))

9. Slugify a string to create a hyphenated url slug

Creating a hyphenated slug for the url from strings.

// 9. Slugify a string to create a hyphenated url slug
const slugify = str => str.toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
scrib.show(slugify("products and services")) // products-and-services

10. Truncate a string

It could be used for adding elipsis in UI after a speicific word count reaches in the content

// 10. Truncate a string
const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : str;
scrib.show(truncate("Web development has many frameworks", 25))

11. Validating an email

It could be used to validate an email and return a boolean whether the text passes the validation

// 11. Validating an email
const isEmail = str => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str); // replace regex with your regex
scrib.show(isEmail("mysterio09@gmail.com"))

12. Check if an object is empty

It could be used to add a conditional to check for the empty objects before proceeding with the actual logic.

// 12. Check if an object is empty
const isEmptyObject = obj => Object.keys(obj).length === 0;
scrib.show(isEmptyObject({})) // true
scrib.show(isEmptyObject({ name: "Mysterio" })) // false

13. Get query params from URL

Extracting out query params from url to an object

// 13. Get query params from URL
const getQueryParams = url => Object.fromEntries(new URL(url).searchParams.entries());
const url = "https://example.com/user?name=mysterio&age=24&country=India";
scrib.show(getQueryParams(url)) // { "name": "mysterio", "age": "24", "country": "India" }

14. Serialize object to query string

This is the opposite of above example, here we create a query param from an object.

// 14. Serialize object to query string
const toQueryString = obj => new URLSearchParams(obj).toString();
const person = { "name": "mysterio", "age": "24", "country": "India" }
scrib.show(`https://example.com/user?${toQueryString(person)}`)

15. Checking for leap year

It could be used in the logic where we are applying conditions based on number days like a discount.

// 15. Checking for leap year
const isLeapYear = year => new Date(year, 1, 29).getDate() === 29;
scrib.show(isLeapYear("2025-05-15"))

16. Remove Falsy Values

Removing falsy values like false, undefined, 0, null, "", etc.

// 16. Remove Falsy Values
const compact = arr => arr.filter(Boolean);
scrib.show(compact([false, undefined, null, 0, 1, 2, 3]))

17. Count Occurrences in Array

Categorising values in an array for more than 1 occurence.

// 17. Count Occurrences in Array
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
scrib.show(countOccurrences([1,1,2,2,2,3,4,5,5,9], 2))

18. Find Duplicates in Array

Find duplicates value in an array

// 18. Find Duplicates in Array
const findDuplicates = arr => {
  return [...new Set(arr.filter((item, index) => arr.indexOf(item) !== index))];
};
scrib.show(findDuplicates([1,1,2,2,2,3,4,5,5,9]))

19. Check if Value is Numeric

Useful when we want to add a conditional to check for the type of value and proceed doing numeric calculations if the value is numeric.

// 19. Check if Value is Numeric
const isNumeric = val => !isNaN(parseFloat(val)) && isFinite(val);
scrib.show(isNumeric(NaN)) // false
scrib.show(isNumeric("24s")) // false
scrib.show(isNumeric("24")) // true
scrib.show(isNumeric(24)) // true
scrib.show(isNumeric(24.45)) // true

20. Pick specific keys from an object

Useful when you don't want the entire object and want only specific parts of it

// 20. Pick specific keys from an object
const pick = (obj, keys) =>
  keys.reduce((acc, key) => {
    if (key in obj) acc[key] = obj[key];
    return acc;
  }, {});
const person = { "name": "mysterio", "age": "24", "country": "India" }
scrib.show(pick(person, ["name", "age"]))

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript

1 min read

25 JavaScript Snippets & Best Practices Every Developer Should Know

Shubham Tiwari — Sun, 27 Apr 2025 14:26:05 +0000

Hello my frontend developer friends, today i will be discussing some awesome javascript snippets which you may or may not have used but is very useful and used in almost all the web dev projects.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
I will be using scrib.show from scribbler.live, it is equivalent to console.log

Lets dive in...
Table of contents

Use const and let
Default Function Parameters
Template Literals over String Concatenation
Object Destructuring
Array Destructuring
Optional Chaining (?.)
Nullish Coalescing Operator (??)
Short-Circuit Evaluation
Ternary Operator
Spread Operator for Objects/Arrays
Use Array.map() for Transformation
Use Array.filter() to Remove Items
Use Array.reduce() for Aggregation
Debounce Functions (for Search Inputs, etc.)
Throttle Function
Deep Clone with structuredClone()
Clean try-catch Blocks
Use async/await with Fetch
Memoization with Closures
Readable Conditionals with Guard Clauses
Abort Fetch Requests
Function Composition
Custom Event Emitter
Proxy for Reactive Objects
Tagged Template Literals

1. Use const and let

Using const and let are more safer than var as these are scoped to the block in which they are using. let value could be re-assigned later but cannot be re-initialised in the same scope while const can neither be re-initialised nor re-assigned.

// const and let
const awesome = "javascript"
// awesome = "java" // throws error, value cannot be re-assigned
// const awesome = "java" // throws error, cannot be re-initialized

let trending = "React JS"
trending = "Next JS" // allowed, value can be re-assigned
// let trending = "java" // throws error, cannot be re-initialized

2. Default Function Parameters

This avoids undefined when arguments are missing.

// Default Function Parameters
function awesome(name = "javascript") {
  scrib.show(`Trending language is ${name}!`);
}
awesome(); // Trending language is javascript!

3. Template Literals over String Concatenation

This helps in integrating dynamic values inside strings without using "+" and commas

// Template literal strings
// Without template literal
const framework = "React JS"
scrib.show("Javascript has " + framework + " as framework/library");

// With template literal
scrib.show(`Javascript has ${framework} as framework/library`);

4. Object Destructuring

Allows to extract out the keys from an object to use directly instead of using dot notation or square brackets to access key values from an object.

// Object destructuring
const language = {
  name: "Javascript",
  usedIn: "Web development",
  framework: "React JS, Next JS, Vue JS"
}

const { name, usedIn, framework } = language // destructure the properties you want to use
scrib.show(`${name} is used in ${usedIn} and it has multiple frameworks like ${framework}`)

5. Array destructuring

Just like object destructuring, we could do the same with arrays, extracting out its elements using square brackets

// Array destructuring
const frameworks = ["React JS", "Next JS", "Vue JS"]

const [reactjs, nextjs, vuejs] = frameworks
scrib.show(reactjs, nextjs, vuejs)

6. Optional Chaining (?.)

It prevents runtime errors from accessing undefined.

// Optional Chaining
const languages = { javascript: { ext: ".js" } };
scrib.show(languages?.javascript?.ext); // ".js"
scrib.show(languages?.javascript?.library); // undefined

7. Nullish Coalescing Operator (??)

Only falls back if null or undefined, not 0 or false.

// Nullish coelsing
const language = null;
const library = language ?? "javacript";
console.log(library); // "javacript"

8. Short-Circuit Evaluation

If the value is truthy, evaluates to right side value, if the value is falsy like 0, false, null, undefines, evaluates to left side value.

// Short-Circuit Evaluation
const language = true;
const message = language && `Javascript is used is web development? - ${language}`;
scrib.show(message)

9. Ternary Operator

It is the short form of if-else where ? indicateds if and ":" indicates else

// Ternary operator
const library = "ReactJS"
const isJsLibrary = library === "ReactJS" ? `${library} is a JS library` : `${library} is not a JS library`
scrib.show(isJsLibrary)

10. Spread Operator for Objects/Arrays

It spreads the value of an object or array inside another object or array.

// Spread operator with objects
const language1 = {
  name: "javascript",
  ext: ".js"
}

const languages1Extended = {
  ...language1,
  libraries: "axios, react js"
}


// Spread operator with arrays
const languageSet1 = ["java", "python", "rust"]
const languageSet2 = ["javascript", "go", "c++"]
const languages = [...languageSet1, ...languageSet2]

scrib.show(languages1Extended)
scrib.show(languages)

11. Use Array.map() for Transformation

It helps in mapping over array values and adding transformations to each array value like capitalizing each word.

// Transformations using array map method
const languages = [ "java", "python", "rust", "javascript", "go", "c++" ]
const upperCase = languages.map(language => language.toUpperCase())
const capitalize = languages.map(language => language.split("")[0].toUpperCase() + language.split("").slice(1).join(""))
scrib.show(upperCase)
scrib.show(capitalize)

12. Use Array.filter() to Remove Items

This one doesn't need explaination it just simply checks the elements which we want to remove and won't include in the transformed array.

// Removing item using filter
const languages = [ "java", "python", "rust", "javascript", "go", "c++" ]
const webDevLanguages = languages.filter(language => language !== "rust" && language !== "go" && language !== "c++")
scrib.show(webDevLanguages) // [ "java", "python", "javascript" ]

13. Use Array.reduce() for Aggregation

Reduce method allows us to compute multiple values to a single value like summation of multiple values.

// Aggregation using reduce method
const finances = [908000, 209010,400000]
const total = finances.reduce((acc, val) => acc + val, 0); // 1517010
scrib.show(total)

14. Debounce Functions (for Search Inputs)

The debounce function allows us to call a callback function after a delay like 100ms, 1s, etc. It helps in calling apis for searching purpose with a delay to avoid making api calls on every keystroke.

function debounce(callback, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => callback(...args), delay);
  };
}

15. Throttle Function

Throttle functions allows us to limit the number of times a function can be executed in a given time frame.

// Throttle function
function throttle(callback, delay) {
  let shouldWait = false;
  return (...args) => {
    if (!shouldWait) {
      callback(...args);
      shouldWait = true;
      setTimeout(() => (shouldWait = false), delay);
    }
  };
}

16. Deep cloning

It helps to clone an object with nested properties at multiple levels and it is Ssafer than JSON.parse(JSON.stringify(...)) for deep objects.

const language = { name: "javascript", ext: { js: ".js", jsx: ".jsx" } };
const copyLanguage = structuredClone(language);
scrib.show(copyLanguage)

17. Clean try-catch-finally Blocks

try, catch and finally blocks allows us to handle errors efficiently without breaking or stopping the main thread executions.

// Try catch blocks
try {
  // risky code here that could have errors
  throw Error("This is a custom error")
} catch (error) {
  scrib.show("Something went wrong:", error.message); // Something went wrong: This is a custom error
} finally {
  scrib.show("It will run no matter a error is thrown or not")
}

18. Async await with fetch

async/await is a cleaner and more readable way for asynchronous data fetching using fetch method.

// Async await with fetch
async function getData() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await res.json();
    scrib.show(data); // { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }
  } catch (err) {
    scrib.show("Error:", err);
  } finally {
    scrib.show("Data fetched successfully")
  }
}
getData()

19. Memoization with Closures

It is used to optimize performance by caching the results of function calls.

function memoize(fn) {
  const cache = {};
  return function (n) {
    if (n in cache) return cache[n];
    return (cache[n] = fn(n));
  };
}

20. Readable Conditionals with Guard Clauses

It helps to avoids deeply nested if statements.

// Guard clause to avoid deeply nested if
const language = {
  name: "javascript",
  ext: ".js",
  library: "axio"
}
function checkLanguage(language) {
  if (!language) return "No language found";
  if (!language.name) return "Name required";
  if (!language.ext) return "Extension required";
  if (!language.library) return "A library name is required";
  return "All good"
}
scrib.show(checkLanguage(language)) // All good

21. Abort Fetch Requests

Sometime a user might click another link or button when a fetch call is getting processed, in that case we could use the abort controller to abort the current fetch call and proceed with the next one.

const controller = new AbortController();
const signal = controller.signal;

fetch("https://jsonplaceholder.typicode.com/todos/1", { signal })
    .catch(err => {
    if (err.name === "AbortError") scrib.show("Request aborted");
  });
controller.abort(); // Request aborted

22. Function Composition

It allows us to combine multiple functions into a single function.

// Function composition
const compose = (...fns) => (val) => fns.reduceRight((acc, fn) => fn(acc), val);

// Example usage
const financeBonusQuarted1 = x => x * 1.25;
const financeBonusQuarted2 = x => x * 2;
const result = compose(financeBonusQuarted1, financeBonusQuarted2)(500000);
scrib.show(result) // 1250000

23. Custom Event Emitter

It just mimics Node.js style event systems.

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, cb) {
    (this.events[event] ||= []).push(cb);
  }

  emit(event, ...args) {
    this.events[event]?.forEach(fn => fn(...args));
  }
}

const emitter = new EventEmitter();

const languages = [ "java", "python", "rust", "javascript", "go", "c++" ]

emitter.on("findLanguages", language => scrib.show(languages.filter(lang => lang === language)));
emitter.emit("findLanguages", "java");

24. Proxy for Reactive Objects

It allows us to track property access, validate values before setting them, freeze some properties, etc.

const language = new Proxy({ name: "Javascript" }, {
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
     scrib.show(`Setting ${prop} to ${value}`); 
     if(typeof value !== "string"){
          scrib.show("Value type should be string");
          return false
     } else {
          target[prop] = value;
          return true
     }  
  }
});
scrib.show(language.name) // Javascript
language.name = "Python"
scrib.show(language.name) // Python
language.extension = ".py"
scrib.show(language.extension) // .py

language.library = 100;
scrib.show(language.library) // undefined as the type is number and it didn't set the property on language

25. Tagged Template Literals

In tagged template literals, you call a function on the template literal itself

// Tagged literals
function strong(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<strong>${values[i]}</strong>` : '');
  }, "");
}

const language = "JavaScript";
scrib.show(strong`${language} is trending`)

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript

1 min read

How to Build Interactive Web Pages Without Using JavaScript

Shubham Tiwari — Fri, 04 Apr 2025 08:09:03 +0000

Hello my frontend developer friends, today i will be discussing an awesome thing with you guys which we could help you in writing less javascript code to create interactive elements.

I will be using tailwind css v4 for the styling
I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
I will be using scrib.show from scribbler.live, it is equivalent to console.log

Lets dive in...
Table of contents

How to create interactive elements without JS?
Notification component
Dropdown component
Modal component
Sidebar navigation component
Conclusion

How to create interactive elements without JS?

We will be using few new css selectors which has good browser support now. Using these selectors in a creative way could help in creating many interactive elements like modal, dropdown, popup, sidebar nav, etc.

has() - it allow us to check the states of the child elements and do the styling to the parent or child itself
[&] - parent selector which allow us to select a element or state of element using class, ids, data attributes, etc and style itself or the child elements.
Syntax:

<div class="has-[h2]:bg-slate-900>
   <h2 id="note"></h2>
</div>

<div class="[&_.warning]:bg-warning-600>
   <p id="warning"></h2>
</div>

Notification component

<div class="!p-1 rounded-xl bg-white flex justify-between items-center gap-x-5 has-checked:hidden mb-14">
      <h2 class="!text-slate-900">This notification is interactive and could be closed without Javascript</h2>
      <label for="close-btn" class="text-red-400 text-xl cursor-pointer">
        X
        <input id="close-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
      </label>
</div>

This is a simple logic, here we are checking on the parent element that if it has an input with checked state, then hide the entire element. Clicking the "X" will check the input and hide the element just like a notification element.

Dropdown component

 <div class="!p-2 rounded-xl bg-white h-12 overflow-hidden has-checked:h-fit has-checked:overflow-visible w-fit mb-14">
    <div class="flex justify-between items-center gap-x-5">
      <label for="dropdown-btn" class="text-blue-400 text-xl cursor-pointer">
        Dropdown
        <input id="dropdown-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
      </label>
    </div>
    <ul class="mt-5 space-y-2">
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Content 3</li>
      <li>Content 4</li>
      <li>Content 5</li>
    </ul>
</div>

In the dropdown component, we will have a initial height just to show the dropdown heading, when we check the input, it will increase the height of the parent element showing the dropdown content. On clicking it again will uncheck the input and hide the content.

Modal component

<div class="[&:has(.modal-btn:checked)_.modal-content]:!block [&:has(.modal-btn:checked)_.modal-backdrop]:!block ">
      <div class="flex justify-between items-center gap-x-5">
          <label for="modal-btn" class="text-blue-400 text-xl cursor-pointer">
            <span class="right-arrow">Open modal</span>
            <input id="modal-btn" type="checkbox" class="appearance-none w-0 h-0 hidden modal-btn" />
          </label>
      </div>
      <div class="hidden fixed z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 modal-content bg-white w-1/2 h-40 rounded-xl">
         <div class="absolute right-3 top-3 flex justify-between items-center gap-x-5">
          <label for="modal-btn" class="text-blue-400 text-xl cursor-pointer">
            <span class="text-red-500">X</span>
            <input id="modal-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
          </label>
        </div>
        <div class="p-3 space-y-3">
          <h2>Modal without javascript</h2>
          <p>This modal is created with tailwind css has selector and no javascript is used for the interactivity</p>
        </div>
      </div>
      <div class="hidden fixed z-10 inset-0 bg-slate-900/50 modal-backdrop"></div>
</div>

This one is a bit tricky, here we are combining parent selector and has selector to check if the parent element has an input with class name "modal-btn" and if it is checked then show the content with class name "modal-content".
Inside the modal content, we have another input checkbox with same class name, clicking it will uncheck the input and close the modal.
We also has a backdrop element covering the entire screen when the modal is visible, it is also shown using the same way as modal.
Breakdown of the classname: [&:has(.modal-btn:checked)_.modal-content]
- [&:has(.modal-btn:checked)] - this part is used to check whether the element has input with class name modal-btn with a checked state
- _.modal-content - Here underscore ( _ ) checks the element at nested level, it is checking for the modal-content classname using ".modal-content" dot notation.

Sidebar navigation component

   <div class="fixed top-5 left-0">
      <div class="flex gap-x-5 transition-all duration-200 ease-in -translate-x-24 has-checked:translate-x-4 w-fit has-checked:[&_.left-arrow]:block has-checked:[&_.right-arrow]:hidden">
        <div class="mt-5 space-y-2 bg-slate-100 p-3 rounded-xl">
          <ul class="space-y-5 max-h-60 overflow-auto">
            <li>Content 1</li>
            <li>Content 2</li>
            <li>Content 3</li>
            <li>Content 4</li>
            <li>Content 5</li>
            <li>Content 6</li>
            <li>Content 7</li>
          </ul>
        </div>
        <div class="absolute -right-10 flex justify-between items-center gap-x-5">
          <label for="sidebar-btn" class="text-blue-400 text-xl cursor-pointer">
            <span class="right-arrow text-xl">&#x2192;</span>
            <span class="left-arrow text-xl hidden">&#x2190;</span>
            <input id="sidebar-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
          </label>
        </div>
      </div>
</div>

This one is also a simple one, here we are setting the translate x property with negative value to move it outside the screen on the left side. When we click the right arrow icon, it will check the input and add the positive translate x value to make it visible on the screen.
has-checked:[&_.left-arrow]:block has-checked:[&_.right-arrow]:hidden - These classes just hide and show the left/right arrows based on the sidebar visibility.

Check out all the examples on scribbler.live and run it yourself to see the output from each of the examples above

app.scribbler.live

🎯 Conclusion

Handling interactivity without javascript is kind of difficult task and we should be using javascript in case of complex elements having multiple operations doing with interactivity. We could use no-js approach for simpler elements like dropdown and notification elements.

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Shubham Tiwari

Feb 12 '24

Button Component with CVA and Tailwind

#nextjs #react #webdev #typescript

4 min read

08:22

Shubham Tiwari

Jan 9 '24

MicroFrontend - React | Solid | Vue

#tutorial #webdev #beginners #learning

2 min read

15:48

Shubham Tiwari

Jan 4 '24

Codium | AI Assistant for DEVs

#vscode #learning #tutorial #beginners

1 min read

05:25

Shubham Tiwari

Nov 21 '23

Zustand - A beginners guides

#webdev #tutorial #react #javascript