DEV Community: Vikas Choubey

🤖 Build a Weather Search Agent (LangChain + Ollama)

Vikas Choubey — Fri, 20 Mar 2026 11:25:33 +0000

In this tutorial, we’ll build a simple AI agent that can fetch real-time weather information for a given country.

We’ll keep it:

💻 Fully local (LLM via Ollama)
🌐 Real-time (weather via API)
🧠 Agent-based (tool usage with LangChain)

🎯 What You’ll Build

An agent that can answer:

“What’s the weather in India?”

Flow:


User → Agent → Tool (Weather API) → Agent → Response

⚠️ Important Reality

Local models (via Ollama) cannot browse the internet.

So we solve this by:

👉 Giving the agent a tool that calls a real API

👉 The agent decides when to use that tool

🧱 Project Structure


root/
│
├── main.py
└── projects/
└── search_agent/
├── app.py
└── tools.py

🔑 Step 1: Get Free Weather API

Use: https://openweathermap.org/api

Sign up
Get API key

📦 Step 2: Install Dependencies

pip install langchain langchain-ollama requests python-dotenv

🔐 Step 3: Add ".env"

WEATHER_API_KEY=your_api_key_here

🛠 Step 4: Create Tool (REAL API)

📄 projects/search_agent/tools.py

import requests
import os
from langchain.tools import tool


@tool
def get_weather(city: str) -> str:
    """
    Fetches real-time weather data for a given city.
    """
    api_key = os.getenv("WEATHER_API_KEY")

    url = f"http://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}&units=metric"

    response = requests.get(url)

    if response.status_code != 200:
        return "Could not fetch weather data."

    data = response.json()

    weather = data["weather"][0]["description"]
    temp = data["main"]["temp"]

    return f"The current weather in {city} is {weather} with temperature {temp}°C."

🧠 What is `@tool`?

The @tool decorator converts a Python function into a LangChain Tool.

Without `@tool`:

def get_weather(city):
    ...

Just a normal function.

With `@tool`:

@tool
def get_weather(city):
    ...

Now it becomes:

Discoverable by the agent
Has a name + description
Callable by LLM reasoning

Internally, it gives the agent:

Tool name: get_weather
Description (docstring)
Input schema

So the agent can decide:

Thought: I need weather info
Action: get_weather
Action Input: India

⚙️ Step 5: Build the Agent

📄 `projects/search_agent/app.py`

from langchain_ollama import ChatOllama
from langchain.agents import initialize_agent, AgentType
from .tools import get_weather


def search_agent():
    print("🌦 Weather Agent Started")

    llm = ChatOllama(
        model="llama3",
        temperature=0
    )

    tools = [get_weather]

    agent = initialize_agent(
        tools,
        llm,
        agent=AgentType.ZERO_SHOT_REACT_DESCRIPTION,
        verbose=True
    )

    response = agent.run("What is the weather in India?")

    print("\nFinal Answer:")
    print(response)

🧾 Step 6: Root Entry Point

📄 `main.py`

from projects.search_agent.app import search_agent
from dotenv import load_dotenv

load_dotenv()


def main():
    print("Hello from LangChain Course!")
    search_agent()


if __name__ == "__main__":
    main()

▶️ Step 7: Run the Project

python main.py

🔄 Agent Flow Diagram

User Question
     ↓
LLM (Reasoning)
     ↓
Decides Tool → get_weather
     ↓
API Call (OpenWeather)
     ↓
Returns Data
     ↓
LLM formats answer
     ↓
Final Output

🧠 What’s Happening Under the Hood

The agent follows ReAct pattern:

Thought → Action → Observation → Thought → Final Answer

Example:

Thought: I need weather info
Action: get_weather
Action Input: India
Observation: The weather is 30°C, cloudy
Final Answer: The weather in India is...

⚠️ Common Mistakes

❌ Expecting LLM to fetch real-time data
❌ Not using tools
❌ Missing API key
❌ Weak tool descriptions

🚀 Improvements You Can Add

🌍 Country → City mapping
🧠 Multi-step queries (forecast + humidity)
💬 User input instead of hardcoded query
📡 Add caching layer
🧪 Add error handling + retries

🎯 Key Learnings

Agents don’t “know” real-time data
Tools bridge LLM → real world
@tool is the gateway to agent capabilities
ReAct loop powers decision making

🔥 What Next?

You can now build:

🔎 Search agent (Google / Tavily)
💻 Coding agent (file tools)
📄 RAG agent (documents)
🧠 Multi-agent system

You’ve officially moved from:

👉 LLM user → AI Agent builder 🚀

Ollama phi3 based text summarizer

Vikas Choubey — Sun, 01 Mar 2026 18:40:58 +0000

🧠 Build a Text Summarizer Using Local Ollama (phi3) + LangChain

In this tutorial, we’ll build a text summarizer using:

🦙 Ollama (running locally)
🤖 phi3 model
🔗 LangChain
🐍 Python

By the end, you’ll have a working CLI-based text summarizer that runs fully offline.

📌 What We’re Building

Input: Long text

Output: Clean summarized text

Model: phi3 running locally via Ollama

🖥️ Step 1: Install Ollama

Linux / macOS

curl -fsSL https://ollama.com/install.sh | sh

Windows

Download installer from:
https://ollama.com

🚀 Step 2: Pull the phi3 Model

After installation:

ollama pull phi3

Test it:

ollama run phi3

Type something like:

Summarize: Artificial Intelligence is transforming the world...

If it responds → ✅ Ollama is working.

Exit with:

/exit

🐍 Step 3: Create Python Environment

mkdir text_summarizer_project
cd text_summarizer_project

python -m venv venv
source venv/bin/activate  # Linux/macOS
# OR
venv\Scripts\activate     # Windows

📦 Step 4: Install Required Packages

pip install langchain langchain-ollama langchain-core

📁 Step 5: Project Structure

Create this structure:

text_summarizer_project/
│
├── main.py
└── utils/
    ├── loader.py
    ├── write_output.py
    └── constants.py

🧱 Step 6: Create Supporting Files

📝 utils/constants.py

information = """
Artificial Intelligence (AI) is a branch of computer science
that aims to create systems capable of performing tasks
that normally require human intelligence...
"""

summary_template = """
You are a helpful AI assistant.

Summarize the following text in a concise paragraph:

{information}
"""

💾 utils/write_output.py

def write_output(text, filename):
    with open(filename, "w", encoding="utf-8") as f:
        f.write(text)

⏳ utils/loader.py (Simple Terminal Spinner)

import sys
import threading
import time

class Loader:
    def __init__(self, message, success, fail, color="cyan"):
        self.message = message
        self.success = success
        self.fail = fail
        self.done = False

    def spinner(self):
        while not self.done:
            for char in "|/-\\":
                sys.stdout.write(f"\r{self.message} {char}")
                sys.stdout.flush()
                time.sleep(0.1)

    def __enter__(self):
        self.thread = threading.Thread(target=self.spinner)
        self.thread.start()

    def __exit__(self, exc_type, exc_value, traceback):
        self.done = True
        self.thread.join()
        if exc_type:
            print(f"\r❌ {self.fail}")
        else:
            print(f"\r✅ {self.success}")

🧠 Step 7: Create main.py

from langchain_core.prompts import PromptTemplate
from langchain_ollama import ChatOllama
from utils.loader import Loader
from utils.write_output import write_output
from utils.constants import information, summary_template


def text_summarizer():
    print("🧠 Local Text Summarizer Using phi3")

    summary_prompt_template = PromptTemplate(
        input_variables=["information"],
        template=summary_template
    )

    llm = ChatOllama(
        model="phi3",
        temperature=0
    )

    chain = summary_prompt_template | llm

    try:
        with Loader(
            message="Agent is thinking...",
            success="Response received!",
            fail="Model crashed!"
        ):
            response = chain.invoke({"information": information})

        write_output(response.content, "output.txt")
        print("📄 Summary written to output.txt")

    except Exception as e:
        print("Error:", e)


if __name__ == "__main__":
    text_summarizer()

▶️ Step 8: Run the Project

Make sure:

Ollama is installed
phi3 is pulled
Your virtual environment is activated

Run:

python main.py

You should see:

Agent is thinking...
✅ Response received!
Summary written to output.txt

Open output.txt to see the result.

🧪 How It Works

1️⃣ PromptTemplate

Formats the user input into a proper instruction.

2️⃣ ChatOllama

Connects to locally running Ollama model.

3️⃣ LCEL Operator (`|`)

This line:

chain = summary_prompt_template | llm

Means:

Prompt → LLM → Response

🔥 Optional Improvements

You can extend this project by:

Accepting user input dynamically
Adding a CLI argument parser
Building a FastAPI wrapper
Converting into a web app
Streaming responses instead of waiting

⚠️ Troubleshooting

❌ ModuleNotFoundError

Check:

You activated virtual environment
All files exist
You are running from correct directory

❌ Model not found

Run:

ollama pull phi3

🎯 Final Result

You now have a fully offline:

LLM-powered
Terminal-based
Extensible text summarizer

Running locally on your machine 🔥

Building an Infinite Scroll Component with Intersection Observer 🚀

Vikas Choubey — Sat, 02 Mar 2024 14:06:56 +0000

Demo here

In the realm of web design, user experience is paramount. Enter infinite scroll – a game-changing solution that seamlessly loads content as users scroll, eliminating the need for traditional pagination and offering a frictionless browsing experience.

HTML Structure:

We have a <div> element with an id="content" that contains some initial items (e.g., "Item 1", "Item 2", ...).
At the end of the content, there's a sentinel <div> with the class sentinel. This sentinel div is used as a trigger point for loading more items when it comes into view.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pagination with Intersection Observer</title>
  </head>

  <body>
    <div id="content">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="sentinel"></div>
      <!-- we will observe this element -->
    </div>
  </body>
</html>

CSS Styling:

Basic styling to remove default margin and padding, and to define the appearance of items and the sentinel div. 🎨

    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      .sentinel {
        height: 20px;
        background-color: transparent;
      }

      .item {
        border: 1px solid #ccc;
        padding: 20px;
        margin-bottom: 10px;
      }
    </style>

JavaScript:

We select the sentinel element using document.querySelector('.sentinel'). 🎯
We define options for the Intersection Observer:
- root: The viewport. We set it to null to observe the document's viewport. 👀
- rootMargin: Margin around the root. We set it to 0px. 📏
- threshold: The percentage of the target element which should be visible before triggering the callback. We set it to 0.8, meaning the callback will be triggered when the sentinel element is 80% in view. 🚦
We define the handleIntersection function, which will be called when the sentinel element intersects with the viewport.
- It checks if the sentinel element is intersecting with the viewport using entry.isIntersecting. 🛑
- If it is intersecting, it calls the loadMoreItems function and stops observing the sentinel element. 🔄
We define the loadMoreItems function, which simulates loading more items:
- It creates new <div> elements with the class item and adds them to the content area before the sentinel. 📦
- After loading more items, it re-observes the sentinel element. 🔄
We create a new IntersectionObserver instance, passing in the handleIntersection function and options. 🕵️‍♂️
Finally, we observe the sentinel element using observer.observe(sentinel). 🚀


    <script>
        const content = document.getElementById("content");
        const sentinel = document.querySelector(".sentinel");
        const options = {
            root: null,
            rootMargin: "0px",
            threshold: 0.8, // Trigger when the sentinel is 80% visible
        };

        function handleIntersection(entries, observer) {
            entries.forEach((entry) => {
            if (entry.isIntersecting) {
                setTimeout(loadMoreItems, 500); // mimic async call
            }
            });
        }

        function addElements(min, max){
            for (let i = min; i <= max; i++) {
                const newItem = document.createElement("div");
                newItem.classList.add("item");
                newItem.textContent = "Item " + i;
                content.appendChild(newItem);
            }
        }
        function loadMoreItems() {
            // Simulate loading more items
            const len = content.children.length;
            content.removeChild(sentinel); // remove from current position
            addElements(len, len+5)
            content.appendChild(sentinel); // add before last 4 elements
            addElements(len+6, len+10)
        }

      const observer = new IntersectionObserver(handleIntersection, options);
      observer.observe(sentinel);
    </script>

How it Works:

Initially, the Intersection Observer is set up to observe the sentinel element.
As the user scrolls down the page, when the sentinel element comes into view (i.e., when it intersects with the viewport), the handleIntersection function is called.
Inside handleIntersection, we load more items and stop observing the sentinel to prevent multiple triggerings.
After loading more items, we re-observe the sentinel so that the process can repeat when the user scrolls further down.
This setup allows for a smooth and efficient implementation of pagination or infinite scroll on a web page. 🌟

Note: We removed the sentinel from its previous position and added it just before the last 4 new items, this way when user scrolls down our sentinel will be in viewport before the user sees the last 4 items and we will have time to load our next new items before user reaches the end of the list, this helps us make the user experience a little better as the user never has to wait for the next new items to load.

Demo here

Connect with me on my:

LinkedIn
GitHub
Twitter

🌟5 Star Rating component: A Step-by-Step Guide 🌟

Vikas Choubey — Thu, 29 Feb 2024 08:20:33 +0000

Feedback forms are essential for businesses to gather valuable insights from their users. Adding star ratings to feedback forms can make the process more engaging and intuitive for users. In this guide, we'll walk through the process of creating a feedback form with star ratings using HTML, CSS, and JavaScript.
Demo here

Step 1: HTML Structure ☠

First, let's define the structure of our feedback form in HTML. We'll create a simple form with star ratings and a textarea for additional comments.



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback Form</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="feedback-form">
        <h2>Feedback Form</h2>
        <form id="feedbackForm">
            <div class="rating">
                <!-- Notice that the stars are in reverse order -->

                <input type="radio" id="star5" name="rating" value="5">
                <label for="star5">&#9733;</label>
                <input type="radio" id="star4" name="rating" value="4">
                <label for="star4">&#9733;</label>
                <input type="radio" id="star3" name="rating" value="3">
                <label for="star3">&#9733;</label>
                <input type="radio" id="star2" name="rating" value="2">
                <label for="star2">&#9733;</label>
                <input type="radio" id="star1" name="rating" value="1">
                <label for="star1">&#9733;</label>
            </div>
            <div class="comment">
                <label for="comment">Tell us more:</label><br>
                <textarea id="comment" name="comment"></textarea>
            </div>
            <button type="submit" class="submit-btn">Submit</button>
        </form>
    </div>

    <script src="./script.js"></script>
</body>

</html>

Step 2: CSS Styling 💅

Next, let's add some CSS styles to make our feedback form visually appealing. We'll style the star ratings and the textarea.



body {
  font-family: Arial, sans-serif;
}

.feedback-form {
  max-width: 400px;
  margin: 0 auto;
}

.rating {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row-reverse; /* this is the magic */
  justify-content: flex-end;
}

.rating input {
  display: none;
}

.rating label {
  font-size: 24px;
  cursor: pointer;
}

.rating label:hover,
.rating label:hover ~ label { /* reason why the stars are in reverse order in the html */
  color: orange;
}

.rating input:checked ~ label {
  color: orange;
}

.comment {
  margin-bottom: 20px;
}

.comment textarea {
  width: 100%;
  height: 100px;
  resize: none;
}

.submit-btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

Note: "~" is the Subsequent sibling combinator a CSS selector, which only allows us to select the subsequent siblings in the html order, there is no selector or combinator which lets us select the preceding siblings and this is why we wrote the stars in reverse order in the HTML file.

Step 3: JavaScript Functionality 🧩

Finally, let's add JavaScript code to handle the form submission.



document.getElementById("feedbackForm").addEventListener("submit", function (event) {
    event.preventDefault();
    var rating = document.querySelector('input[name="rating"]:checked').value;
    var comment = document.getElementById("comment").value;

    // Here you can handle the submission, for now just logging the values
    console.log("Rating: ", rating);
    console.log("Comment: ", comment);

    // You can send this data to the server using AJAX or other methods
    // For simplicity, I'm just logging it here
});

Conclusion 🎉
In this tutorial, we've learned how to create a feedback form with star ratings using HTML, CSS, and JavaScript. By following these steps, you can easily implement a user-friendly feedback mechanism on your website or web application, allowing users to provide valuable input in a visually appealing way.

Feel free to customize and expand upon this template to fit the specific requirements of your project. Happy coding! 😊
Demo here

Connect with me on my:

LinkedIn
GitHub
Twitter

Scaling Web Development: Insights from David Malan's Lecture

Vikas Choubey — Mon, 26 Feb 2024 13:15:08 +0000

Watch the complete lecture

Introduction:

Scaling web applications to accommodate growing user bases and increased traffic is a crucial aspect of web development. 🌐💡 In a lecture by David Malan, a renowned Harvard web developer, various concepts related to scalability, including caching, sessions, load balancing, and database technologies, are discussed. This blog will delve into the key points raised in the lecture and provide insights into the challenges and solutions associated with scaling web development.

1) Understanding Scalability:

The lecture begins with an overview of factors to consider when scaling a web application, including web hosting and virtual private servers. 🏢🔍
David Malan explores different scaling methods, including vertical scaling, and emphasizes the importance of considering real-world constraints. 📈💻
The evolution of scalability over the years and the advent of cloud computing are discussed, along with the concept of horizontal scaling using multiple servers. ☁️🔄
The introduction of load balancers to distribute requests among multiple servers is highlighted as a solution to scalability issues. ⚖️🔄

2) Horizontal Scalability and Round Robin DNS:

Malan discusses a model where every server in a web application must be identical for horizontal scalability. 🔄🖥️
Limitations of this model, such as increased disk space requirements, are acknowledged, leading to the suggestion of a simpler approach using round-robin DNS for load balancing. 🔄🔄
However, concerns about the susceptibility of cookies and HTTP sessions in this model are raised, prompting the need for a more sophisticated approach. 🍪🔄

3) Addressing Scalability Issues:

Scalability issues when horizontally scaling applications are explored, with suggested solutions like man-in-the-middle and file servers for session data. 🔄🔧
Malan touches upon different RAID types and their advantages and disadvantages, emphasizing their role in preventing data loss in the event of server failure. 💽🛡️
The video delves into the use of technologies like the axle proposal, Fibre Channel, and RAID to achieve scalability. 🔄💽

4) Caching and Sessions:

The scalability of web development is further discussed, focusing on the use of file-based caching, MySQL's query cache, and memcache. 🗄️🔄
Malan provides insights into how these caching mechanisms can enhance performance but cautions about potential drawbacks. ⚠️🔄

5) Database Technologies and Load Balancers:

The lecture covers the benefits and drawbacks of memcache, MySQL, and load balancers, with a specific focus on Facebook's use of memcache for scalability. 👍💻
Different scalability options for databases, such as MySQL's replication feature, are explained by Malan. 🔄💽
Load balancers, including their benefits, drawbacks, and potential single points of failure, are discussed in detail. ⚖️🔄

Conclusion:

David Malan's lecture offers a comprehensive exploration of scalability issues in web development, covering topics ranging from caching mechanisms and load balancing to database technologies. As web applications continue to grow in complexity and user engagement, understanding these scalability concepts becomes essential for developers aiming to build robust and responsive systems. 🚀👨‍💻

Debouncing in React: A Custom Hook Example 🚀

Vikas Choubey — Sun, 15 Oct 2023 18:18:37 +0000

This is the part 2 of Designing an autocomplete UI component

Debouncing is like that friend who waits for you to finish talking before they chime in with their brilliant ideas. It's all about giving your app a breather, ensuring it doesn't go berserk with every keystroke. In this blog, we're going to have a hilarious look at implementing debouncing in React using a custom hook that we've aptly named "useDebouncedValue." 🤪

Understanding Debouncing 🤔

Before we dive into the code (cue the drumroll 🥁), let's wrap our heads around this concept. Debouncing is the art of delaying the execution of a function until a certain amount of time has passed since the last event. Why? Well, because we don't want our app to freak out and do a gazillion things per second. That would be pure chaos! 🙃

The Custom Hook: useDebouncedValue 🎣

Let's not keep you in suspense any longer. Here's our superhero custom hook: useDebouncedValue. It takes an initial value and a delay as parameters, and it returns a debounced value that only updates when the user stops typing for the specified delay period. Ta-da! 🦸‍♂️

import { useEffect, useState } from "react";
import { DEFAULT_DELAY } from "../constants";

const useDebouncedValue = (
  value = "",
  delay = DEFAULT_DELAY
): string | number => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
};

export default useDebouncedValue;

Using the Custom Hook: DebounceExample Component 🎉

Now, let's introduce you to the DebounceExample component which shows us how to use the our star custom hook, DebouncedValue. This component allows you to set a delay and input a value. The debounced value is displayed after the magic of debouncing has worked its charm. 🪄✨

import * as React from "react";
import { DEFAULT_DELAY } from "./constants";
import useDebouncedValue from "./hooks/useDebouncedValue";
import "./style.css";

export default function DebounceExample() {
  const [value, setValue] = React.useState("");
  const [delay, setDelay] = React.useState(DEFAULT_DELAY);
  const debouncedValue = useDebouncedValue(value, delay);

  return (
    <span>
      <h4>Debouncing Example 😄</h4>
      <hr />
      <div>
        <label htmlFor="delay">Delay:</label>
        <input
          name="delay"
          type="number"
          min="0"
          step="100"
          value={delay}
          onChange={(e) => setDelay(parseInt(e.target.value))}
        />
        ms
      </div>
      <div>
        <label htmlFor="value">Type in:</label>
        <input
          name="value"
          onChange={(e) => setValue(e.target.value)}
          placeholder="debounce 🤓"
        />
      </div>
      <div
        style={{
          border: "2px solid grey",
          height: "20px",
          padding: "10px",
        }}
      >
        <span>You have typed: 📝</span>
        <span style={{ fontWeight: "700" }}>{debouncedValue}</span>
      </div>
    </span>
  );
}

How It Works 🛠

useDebouncedValue is our secret sauce. We use it within the DebounceExample component to create a debounced value based on the user's input and the specified delay.

Users can adjust the delay value to control how quickly the debounced value updates. It's like being in control of a time machine for your app! 🕰️

As users type into the input field, the debounced value stays quiet until the specified delay has passed since the last keystroke. No more app freak-outs; just smooth sailing. ⛵

Practical Usecases of Debouncing in web development

Debouncing is a technique used in web development to control or limit the frequency of certain events, typically user-initiated events like keypresses, mouse movements, and resizing the browser window. It helps to optimize performance and prevent unnecessary or overly frequent event triggers. Here are some common use cases for debouncing in web development:

Input Fields and Search Bars 🔍: When a user is typing in an input field, you might want to perform an action (like sending an API request for search suggestions) only after they've stopped typing for a brief moment, rather than with every keystroke. Debouncing helps in waiting for a pause in typing.
Resize Events 🖥️: When a user resizes their browser window, this event can fire rapidly. You might use debouncing to trigger an action after the user has finished resizing, preventing excessive re-rendering of the page.
Scroll Events 📜: Scrolling can generate a large number of scroll events, especially when the user rapidly scrolls. Debouncing helps in triggering actions like lazy-loading images or infinite scrolling after the scrolling activity has settled.
Mousemove Events 🐭: Tracking the mouse's position can generate a lot of events. Debouncing can be useful when you want to update an element's position or appearance based on the mouse position, but only when the mouse has stopped moving.
Button Clicks 🖱️: In some cases, you might want to limit how quickly a user can trigger a particular action, such as submitting a form or saving data.
Autosave 💾: In forms and text editors, it's common to implement an autosave feature. Debouncing can be used to trigger an autosave action after the user has stopped typing for a moment, reducing the number of saves and potential server requests.
Infinite Scrolling 🔄: When implementing infinite scrolling in a web page, you can use debouncing to control when the next set of data should be loaded as the user approaches the bottom of the page.
Delaying API Requests 🌐: If you need to fetch data from an API based on user input (e.g., searching for products), debouncing can ensure that you only send requests to the server once the user has paused their input.
Validation and Error Checking ✅❌: When validating user input, such as email addresses or passwords, you might want to perform validation after the user has finished typing, rather than after every character input.
Autocomplete and Dropdowns 🌟: Implementing auto-suggestions in search boxes or dropdown menus can benefit from debouncing to prevent unnecessary or rapid updates to the suggestion list.

Debouncing is an essential tool for improving user experience and optimizing performance in web development. It ensures that actions are only taken when they are truly needed, reducing unnecessary processing and preventing "noisy" event handling.

Conclusion 🎊

Here's a stackblitz codeflow for you to test Debouncing
Debouncing is the superhero your app needs to maintain peace and order in the chaotic world of rapid user input. By creating a custom hook like useDebouncedValue, you can easily implement debouncing in your React applications, making your UI responsive and ensuring your app doesn't lose its marbles. 🚀🙌

Connect with me on my:

LinkedIn
GitHub
Twitter

Demystifying the Critical Rendering Path: A Deep Dive into Web Page Loading

Vikas Choubey — Fri, 08 Sep 2023 17:09:13 +0000

🚀When you visit a website, you expect it to load quickly and display content seamlessly. Behind the scenes, the browser goes through a complex process known as the Critical Rendering Path (CRP) to achieve this. Understanding how CRP works is crucial for web developers and designers to optimize web page loading times. In this blog, we'll dissect the CRP, discussing various elements like regular/async/defer attributes, DOM, CSSOM, render tree, layout and paint, incremental and non-incremental parsing of HTML and CSS, and multiple render tree layers due to special tags.

The Critical Rendering Path (CRP) Unveiled 🚧

Parsing HTML and CSS 🧩

The journey of a web page begins with the parsing of HTML and CSS files. When the browser encounters an HTML document, it starts parsing it from top to bottom. However, it can be categorized into two types: incremental and non-incremental parsing. 📝

Incremental HTML Parsing: Browsers achieve this by recognizing and parsing the HTML in chunks, rather than waiting for the entire document to be parsed. 🔄
Non-Incremental CSS Parsing: Browsers recognize and wait for the entire CSS file to be downloaded and then parsing of that file starts. A good practice is to split a large CSS file into multiple smaller ones so that, in a way, incremental parsing can be achieved.🚫

Building the DOM and CSSOM 🏗️

As the HTML and CSS are parsed, the browser constructs two essential structures: the DOM and the CSSOM. 🏢

DOM (Document Object Model):

The DOM represents the hierarchical structure of the web page and its content, allowing JavaScript to access and manipulate the elements. During parsing, the browser creates a DOM tree, which is the foundation for rendering content. 🌲
CSSOM (CSS Object Model):

The CSSOM represents the styles and layout information for the web page. It's essential for rendering the page correctly. When parsing CSS, the browser creates a CSSOM, which is later combined with the DOM to produce the render tree. 🎨

Render Tree Construction 🌌

The render tree is a critical step in the CRP as it determines what is displayed on the screen. It's a combination of the DOM and CSSOM, but it excludes elements that are not intended for rendering, such as hidden or off-screen elements. This optimized tree is used to perform layout and paint operations. 🖌️

Multiple Render Tree Layers 📦

Some HTML tags and CSS properties introduce multiple render tree layers. For instance: 🏛️

iframe: Iframes create separate browsing contexts, essentially embedding another web page within the main page. Each iframe generates its own render tree layer. This allows for the isolation of content and independent scrolling and interaction within the iframe. 🌐
object: The object element is used for embedding external resources, such as multimedia files or interactive content. Like iframes, it can introduce its own render tree layer. 🎥
embed: Similar to the object element, embed is used for embedding external content like multimedia files. It also creates its own render tree layer. 📺
video: The video element is used for embedding video content in web pages. It creates a separate render tree layer to manage video playback and controls. This allows for seamless video rendering and interaction. 🎬
audio: Similar to the video element, the audio element is used for embedding audio content and generates its own render tree layer for audio playback and controls. 🎵
canvas: The canvas element provides a drawing surface for JavaScript to render graphics and animations. It creates a unique render tree layer for dynamic rendering operations. 🎨
svg: Scalable Vector Graphics (SVG) elements, such as circle, rect, and path, generate their own render tree layers when used for vector-based graphics and animations. 🖼️
math: The math element is used for rendering mathematical equations and formulas using MathML (Mathematical Markup Language). It creates a specific render tree layer for mathematical content. ➗
iframe: Although mentioned earlier, it's worth reiterating that iframes are commonly used for embedding external content and always create their own independent render tree layers. 🌐

These elements introduce complexity to web page rendering, and web developers need to consider their behavior when designing and optimizing web pages. Careful handling of these elements can lead to better performance and user experiences. 🚀🖥️

Layout and Paint 🖼️

Layout:

After the render tree is constructed, the browser calculates the layout of each element, determining its position and size on the screen. Layout can be a resource-intensive operation and should be minimized by avoiding layout-thrashing JavaScript code. 📏
Paint:

Once the layout is calculated, the browser proceeds to paint the pixels on the screen, applying colors, images, and styles to the appropriate locations. This process is also known as rasterization. 🎨

Synchronous, Async, and Defer Attributes 📜

HTML script elements often include attributes like async and defer that affect how JavaScript is loaded and executed. ⚙️

Synchronous:

<script src='./script.js'>

Scripts without the async or defer attribute block the HTML parsing process and execute immediately. This can lead to slower page rendering if scripts are placed in the head of the document. 🚀

Async:

<script src='./script.js' async>

Scripts with the async attribute are loaded asynchronously while HTML parsing continues. They execute as soon as they're downloaded, which can lead to scripts executing out of order, potentially causing issues. 🏎️

Defer:

<script src='./script.js' defer>

Scripts with the defer attribute are also loaded asynchronously, but they execute in the order they appear in the document, after the HTML parsing is complete. This often results in a smoother user experience. 🕰️

Conclusion 📝

Understanding the Critical Rendering Path is crucial for optimizing web page loading performance. By comprehending the impact of regular/async/defer attributes, DOM, CSSOM, render tree, layout and paint operations, incremental parsing, non-incremental parsing, and the presence of multiple render tree layers due to special tags, web developers can make informed decisions to enhance user experience and page load times. In an increasingly competitive digital landscape, mastering the CRP is a must for creating fast and responsive web applications. 🚀🌐

Designing an Autocomplete UI Component 🔍

Vikas Choubey — Sun, 20 Aug 2023 11:55:19 +0000

In the ever-evolving landscape of web development, creating intuitive user interfaces is paramount. One such interface element that has become indispensable is the autocomplete component. In this blog post, we'll explore the process of designing an autocomplete UI component that enables users to effortlessly enter a search term, presents a list of search results in a convenient popup, and empowers them to select a result.
Let's dive in! 🚀

The Magic of Autocomplete✨

Autocomplete UI components have revolutionized user experiences by making search more efficient and user-friendly. Before we delve into the nuts and bolts of implementation, let's establish the essential features that constitute an effective autocomplete:

Text Input Box 🎹: This familiar text input field serves as the gateway for users to enter their search queries.

Search Results Popup ⚡: A dynamic popup or dropdown that appears as soon as users start typing. It showcases a list of suggested results, providing instant feedback.

Search Result Items 🎯: Each item in the popup should be informative, with a clear indication of the matched portion of the result. Visual cues like distinct text colors or background shades aid in result differentiation.

Navigation 🏹: Users should be able to navigate through the search results using keyboard arrows (up and down) and mouse clicks for a seamless experience.

Selection 👉: When a user selects a search result, it should fill the text input field, making it easy to confirm the selection. This interaction should feel intuitive.

Dismissal ❌: The popup should vanish when users click outside it, press the 'Esc' key, make a selection, or clear the input field.

Real-time Filtering ⏰: Results should update in real-time as the user types, eliminating the need for a manual search button. Implement a slight delay before making a new request to the server to reduce unnecessary requests.

The Code Unveiled 💻👨‍💻

Demo the code here.

Now, let's take a look at a simplified implementation using HTML, CSS, and JavaScript:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Example</title>
 <link src='./styles.css' rel='stylesheet'/>
</head>
<body>
    <div id="autocomplete-container">
        <input type="text" id="search-input" placeholder="Search...">
        <div id="search-results"></div>
    </div>

    <script src='./script.js></script>
</body>
</html>

CSS

 /* Basic CSS styles for the autocomplete */
 #autocomplete - container {
     position: relative;
     width: 300 px;
 }
 #search - input {
     width: 100 % ;
     padding: 10 px;
 }
 #search - results {
         position: absolute;
         width: 100 % ;
         border: 1 px solid #ccc;
         max - height: 150 px;
         overflow - y: auto;
         display: none;
     }
     .result - item {
         padding: 5 px;
         cursor: pointer;
     }
     .result - item: hover {
         background - color: #f0f0f0;
     }

Javascript

 // Sample data (replace with your actual data source)
const data = [
    "Apple",
    "Banana",
    "Cherry",
    "Date",
    "Fig",
    "Grape",
    "Lemon",
    "Mango",
    "Orange",
    "Peach",
    "Pear",
    "Pineapple",
    "Strawberry",
    "Watermelon"
];

// Input element
const searchInput = document.getElementById("search-input");

// Results popup
const searchResults = document.getElementById("search-results");

// Function to filter and display results
function updateResults() {
    const query = searchInput.value.toLowerCase();
    const filteredData = data.filter(item => item.toLowerCase().includes(query));

    // Clear previous results
    searchResults.innerHTML = "";

    // Display new results
    filteredData.forEach(item => {
        // Create a div to hold each result
        const resultItem = document.createElement("div");
        resultItem.className = "result-item";
        resultItem.textContent = item;

        // Handle click on result item
        resultItem.addEventListener("click", () => {
            searchInput.value = item;
            searchResults.style.display = "none";
        });

        // Add each result div to the popup
        searchResults.appendChild(resultItem);
    });

    // Show/hide results popup
    searchResults.style.display = filteredData.length ? "block" : "none";
}

// Event listeners
searchInput.addEventListener("input", updateResults);
document.addEventListener("click", (event) => {
    if (event.target !== searchInput) {
        searchResults.style.display = "none";
    }
});

Wrapping It Up 🎁

Implementing an autocomplete UI component from scratch is a rewarding endeavor that enhances the usability of web applications. By adhering to these design principles and dissecting the code, you can craft a potent and user-friendly autocomplete component. Feel free to customize and expand upon this example to cater to your project's unique requirements. 🛠️

So, why wait? Begin your journey to create an autocomplete component today, and provide your users with a delightful search experience! 🌟

Part 2 of this series: Debouncing

Connect with me on my:

LinkedIn
GitHub
Twitter

Building an Efficient MinStack in JavaScript🚀

Vikas Choubey — Tue, 15 Aug 2023 14:01:56 +0000

In the world of computer science and programming, data structures play a pivotal role in solving complex problems efficiently. One such problem is designing a specialized stack known as the MinStack. This stack not only supports standard push and pop operations but also provides constant-time access to the minimum element within the stack. In this blog, we'll explore a clever implementation of the MinStack in JavaScript that meets the stringent O(1) time complexity requirements for each function.
Leetcode Question

Understanding the Problem

The problem statement calls for the design of a MinStack that supports the following operations:

push(val): Adds an element to the top of the stack.
pop(): Removes the element from the top of the stack.
top(): Returns the element at the top of the stack.
getMin(): Retrieves the minimum element in the stack.

The key challenge here is to maintain the minimum element efficiently while performing all these operations in constant time O(1).

The MinStack Implementation

To implement the MinStack, we can make use of two separate stacks:

The main stack: This stack holds all the elements in the order they were pushed onto the stack.
The minimum stack: This stack keeps track of the minimum elements encountered at each step.
Let's break down the implementation step by step:

Initialization



class MinStack {
  constructor() {
    this.stack = [];
    this.minStack = [];
  }
}

We initialize two empty arrays, stack and minStack, to hold our data.

Push Operation



push(val) {
    // If the minStack is empty or the new value is smaller than or equal to the current minimum,
    // push the new value onto the minStack.
    if (this.minStack.length === 0 || val <= this.minStack[this.minStack.length - 1]) {
        this.minStack.push(val);
    }
    // Push the new value onto the main stack.
    this.stack.push(val);
}

When pushing a new value onto the stack, we compare it with the current minimum stored in the minStack. If the new value is smaller than or equal to the current minimum, we also push it onto the minStack. This ensures that we always have the correct minimum value at the top of the minStack.

Pop Operation




pop() {
    // Retrieve the top elements from both stacks.
    const stackTop = this.stack.pop();
    const minStackTop = this.minStack[this.minStack.length - 1];

    // If the top elements are equal, pop from the minStack as well.
    if (stackTop === minStackTop) {
        this.minStack.pop();
    }
}

When popping an element from the main stack, we compare it with the top element of the minStack. If they are equal, it means the minimum element is being removed, so we also pop from the minStack.

Top (Peek) Operation



top() {
    return this.stack[this.stack.length - 1];
}

The top() function simply returns the element at the top of the stack.

GetMin Operation




getMin() {
    return this.minStack[this.minStack.length - 1];
}

The getMin() function returns the top element of the minStack, which is the minimum value in the stack at any given point.

Conclusion

In this blog post, we explored the concept of the MinStack, a specialized stack that efficiently supports operations such as push, pop, top, and retrieving the minimum element, all in constant time. By employing two separate stacks, the main stack and the minimum stack, we can maintain the minimum element while performing other operations without sacrificing efficiency. This elegant solution showcases how clever data structure design can lead to remarkable performance improvements in solving real-world problems.

Connect with me on my:

LinkedIn
GitHub
Twitter

Mastering Stacks: Simplifying Problem Solving 🚀

Vikas Choubey — Thu, 10 Aug 2023 20:28:25 +0000

The Power of Stacks 📚:

A stack is a linear data structure that follows the Last-In-First-Out (LIFO) principle. Imagine a stack of plates/books 🍽️/📚 - you can only add or remove plates/books from the top. Similarly, in programming, the last element added to the stack is the first one to be removed. This unique behavior lends itself to solving problems that involve tracking a sequence of items and require maintaining order and accessibility to the most recently added elements.

Stacks are particularly useful in situations where:

Parentheses Matching: Stacks are often employed to validate expressions involving parentheses, ensuring that each opening parenthesis has a corresponding closing parenthesis. 🧮
Function Call Management: During function execution, the current context and return addresses are managed using stacks. When a function is called, its execution context is pushed onto the stack, and when it completes, the context is popped off. 📞
Infix to Postfix Conversion: Stacks are used to convert mathematical expressions from infix notation to postfix notation, simplifying their evaluation. ➗

Solving the "Next Greater Element" Problem 🔄:

Leetcode Question
To showcase the application of stacks and maps, let's consider the "Next Greater Element" problem. Given two arrays, nums1 and nums2, we want to find the next greater element for each element in nums1 in the corresponding index of nums2.

var nextGreaterElement = function (nums1, nums2) {
    const stack = [-1];
    const map = new Map();
    nums2.forEach(n => {
        while (n > stack[stack.length - 1]) {
            map.set(stack.pop(), n);
        }
        stack.push(n);
    });
    return nums1.map(n => {
        if (map.has(n)) {
            return map.get(n);
        }
        return -1;
    })
}
const nums1 = [4, 1, 2], nums2 = [1, 3, 4, 2];
console.log(nextGreaterElement(nums1, nums2)); // [-1, 3, -1]

The provided code snippet offers an efficient solution to this problem using a stack and a map. Here's a breakdown of the code:

We iterate through nums2, and for each element x, we use a while loop to find the next greater element. If we encounter an element smaller than x on the stack, we map it to x and remove it from the stack.
After iterating through nums2, we handle the remaining elements on the stack by mapping them to -1.
Finally, we iterate through nums1 and use the map to find the next greater element for each element.

Conclusion 🎉:

Stacks are an indispensable asset in a programmer's toolkit, offering elegant solutions to a variety of problems. The Java programming language provides built-in collections like Stack and Map that simplify the implementation of these solutions. By mastering the concepts of stacks and maps, you'll equip yourself with the skills to tackle intricate challenges effectively. As demonstrated through the "Next Greater Element" problem, the combination of stacks and maps proves to be a powerful approach to problem-solving in the realm of computer programming. 🚀

Keep coding, keep stacking, and keep problem-solving! 🧙‍♂️👩‍💻📚

Connect with me on my:

LinkedIn
GitHub
Twitter

Implementing a Queue Data Structure using Two Stacks in JavaScript :rocket:

Vikas Choubey — Sun, 06 Aug 2023 09:43:53 +0000

LeetCode Question
In this blog post, we will explore how to implement a Queue data structure using two Stacks in JavaScript. Queues and stacks are fundamental data structures used in computer science to manage collections of elements. A Queue follows the First-In-First-Out (FIFO) principle, whereas a Stack follows the Last-In-First-Out (LIFO) principle. By using two stacks, we can achieve the FIFO behavior required for a Queue. 🧱

Understanding the Code 🤔

Let's start by understanding the code provided above. The code defines a constructor function for the MyQueue class, which will be our Queue data structure implemented using two stacks. Here's the code snippet for reference:

var MyQueue = function() {
    this.pushStack = [];
    this.popStack = [];
};

How the Implementation Works ⚙️

The implementation of the Queue using two Stacks is achieved through the following methods:

enqueue(x):

MyQueue.prototype.enqueue = function(x) {
    while (this.popStack.length) {
        this.pushStack.push(this.popStack.pop());
    }
    this.pushStack.push(x);
};

This method is used to add an element x to the Queue. To maintain the FIFO behavior, it first transfers all elements from the popStack to the pushStack (in reverse order) and then pushes the new element to the pushStack.

dequeue():

MyQueue.prototype.dequeue= function() {
    while (this.pushStack.length) {
        this.popStack.push(this.pushStack.pop());
    }
    return this.popStack.pop();
};

This method is used to dequeue and return the front element of the Queue (the oldest element). To do this, it transfers all elements from the pushStack to the popStack (in reverse order) and then pops and returns the top element of the popStack.

peek():

MyQueue.prototype.peek = function() {
    while (this.pushStack.length) {
        this.popStack.push(this.pushStack.pop());
    }
    return this.popStack[this.popStack.length - 1];
};

This method is used to retrieve the front element of the Queue without removing it. Like the dequeue() method, it transfers all elements from the pushStack to the popStack (in reverse order) and returns the top element of the popStack without popping it.

empty():

MyQueue.prototype.empty = function() {
    return !this.popStack.length && !this.pushStack.length;
};

This method checks whether the Queue is empty or not. It returns true if both the pushStack and popStack are empty; otherwise, it returns false.

Let's test the code

// Create a new instance of MyQueue
const queue = new MyQueue();

// Push elements into the Queue
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);

// Pop an element from the Queue
const poppedElement = queue.dequeue();
console.log("Popped element:", poppedElement); // Output: Popped element: 1

// Peek at the front element of the Queue
const frontElement = queue.peek();
console.log("Front element:", frontElement); // Output: Front element: 2

// Check if the Queue is empty
const isEmpty = queue.empty();
console.log("Is Queue empty?", isEmpty); // Output: Is Queue empty? false

Advantages and Limitations ✔️ ❌

Using two Stacks to implement a Queue provides several advantages:

It allows us to achieve the FIFO behavior of a Queue while still leveraging the efficient push and pop operations of Stacks.
The code is simple and easy to understand, making it suitable for educational purposes and small-scale implementations.

However, this implementation has some limitations:

The peek(), dequeue(), and enqueue() methods have a time complexity of O(n) in the worst case, where n is the number of elements in the Queue. This is due to the need to transfer elements between the two stacks.

Optimised implementation for enqueue operation

MyQueue.prototype.enqueue = function (x) {
  this.pushStack.push(x);
};

MyQueue.prototype.dequeue = function () {
  while (this.pushStack.length) {
    this.popStack.push(this.pushStack.pop());
  }
  const poppedItem = this.popStack.pop();
// move elements back to pushStack
  while (this.popStack.length) {
    this.pushStack.push(this.popStack.pop());
  }
  return poppedItem;
};

MyQueue.prototype.peek = function () {
  while (this.pushStack.length) {
    this.popStack.push(this.pushStack.pop());
  }
  const peekedItem = this.popStack[this.popStack.length - 1];
// move elements back to pushStack
  while (this.popStack.length) {
    this.pushStack.push(this.popStack.pop());
  }
  return peekedItem;
};

MyQueue.prototype.empty = function () {
  return !this.pushStack.length;
};

This implementation optimizes the enqueue operation by keeping all the elements in the push stack after every operation.

Optimised implementation for dequeue operation

MyQueue.prototype.enqueue = function (x) {
  while (this.popStack.length) {
    this.pushStack.push(this.popStack.pop());
  }
  this.pushStack.push(x);
// move elements back to popStack
  while (this.pushStack.length) {
    this.popStack.push(this.pushStack.pop());
  }
};

MyQueue.prototype.dequeue = function () {
  return this.popStack.pop();
};

MyQueue.prototype.peek = function () {
  return this.popStack[this.popStack.length - 1];
};

MyQueue.prototype.empty = function () {
  return !this.popStack.length;
};

This implementation optimizes the dequeue operation by keeping all the elements in the pop stack after each operation.
It also optimizes the peek operation as a by product.

The empty() method has a time complexity of O(1), as it only checks if both stacks are empty.

Conclusion 👏

In this blog post, we learned how to implement a Queue data structure using two Stacks in JavaScript. We explored the code that enables us to maintain the FIFO behavior of a Queue by utilizing the LIFO property of Stacks. While this implementation provides a simple and intuitive way to create a Queue, it's important to keep in mind the potential performance impact, especially in scenarios with a large number of elements.

As a software developer, understanding data structures and their implementations is essential for writing efficient and optimized code. Implementing data structures from scratch can also improve your problem-solving skills and enhance your ability to design more complex algorithms. 💪

Feel free to experiment with the code and explore further optimizations to create an even more efficient Queue implementation. Happy coding! 💻

Connect with me on my:

LinkedIn
GitHub
Twitter

Closures🚀

Vikas Choubey — Sat, 18 Mar 2023 09:23:05 +0000

A closure is a powerful concept in JavaScript that enables an inner function to remember and access the variables of its outer function, even after the outer function has finished executing. In simpler terms, a closure allows a function to retain access to variables from its parent scope even after the parent function has returned.

🎬Behind🎬 the scenes:

Closures in JavaScript work by creating a special relationship between a function and the variables in its outer lexical environment (also called the closure's environment). The lexical environment is essentially the set of variables, functions, and other objects that are in scope for a particular function at the time it is defined.

When a function is defined, it creates a closure over its lexical environment, which means that the function has access to the variables and other objects in its lexical environment, even after the outer function has finished executing. This is what allows inner functions to "remember" the variables of outer functions.

Here's an 💻example💻 that demonstrates how closures work:

function outer() {
  let name = "JavaScript";
  return function inner() {
    console.log(name);
  };
}

const printName = outer();
printName();

In the above code, the outer() function returns a reference to the inner() function, which is assigned to the variable printName. When printName() is called, it logs the value of the variable name that was defined in the outer() function.

Behind the scenes, when a function is defined that contains a reference to a variable outside of its own scope, the JavaScript engine creates a closure that contains a reference to the variable, as well as a reference to the function itself. This closure is essentially an object that "closes over" the variable, keeping it alive and accessible to the inner function.

🚀Application of closures:

🔒Private variables

Closures are a powerful feature of JavaScript that enable developers to create private variables within functions. Private variables are variables that cannot be accessed or modified from outside the function, which can be useful for creating more secure and encapsulated code.

Here's an 💻example💻 of how closures can be used to create private variables:

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
}

const counter = createCounter();
count = count + 1 // throws Uncaught ReferenceError: count is not defined
counter.increment(); // logs 1
counter.increment(); // logs 2
counter.decrement(); // logs 1

In this 💻example💻, the createCounter() function creates a private variable count and returns an object with two methods, increment() and decrement(), that modify the value of count. Because count is defined inside the createCounter() function and not returned directly, it remains private and cannot be accessed from outside the object.

The 🔑key to this pattern is the use of closures to "close over" the private variable count. When the increment() and decrement() functions are defined inside createCounter(), they have access to the count variable because they are defined in the same scope. When the createCounter() function returns the object with these methods, they still have access to the count variable even though they are now defined outside the original scope of createCounter().

This pattern of using closures to create private variables can be applied in many different ways, and is a powerful tool for writing clean and maintainable code. By creating private variables with closures, you can limit the scope of your variables and functions, reducing the risk of conflicts or unexpected behavior caused by external code modifying your variables.

📈State management

Closures are a powerful feature of JavaScript that enable developers to manage state within functions. State is any data that changes over time, and can be anything from a simple counter to a complex object that tracks the state of an entire application.

Here's an 💻example💻 of how closures can be used to manage state:

function createState() {
  let state = 0;

  function getState() {
    return state;
  }

  function setState(newValue) {
    state = newValue;
  }

  function increment() {
    state++;
    console.log(state);
  }

  function decrement() {
    state--;
    console.log(state);
  }

  return {
    getState: getState,
    setState: setState,
    increment: increment,
    decrement: decrement
  };
}

const myState = createState();
myState.increment(); // logs 1
myState.increment(); // logs 2
myState.decrement(); // logs 1
myState.setState(5);
console.log(myState.getState()); // logs 5

In this 💻example💻, the createState() function creates a private variable state and returns an object with four methods, getState(), setState(), increment(), and decrement(). The getState() and setState() methods allow external code to access and modify the value of state, while the increment() and decrement() methods modify state directly.

Because state is defined inside the createState() function and not returned directly, it remains private and cannot be accessed from outside the object. The increment() and decrement() methods modify state directly, while the getState() and setState() methods provide a way to access and modify state indirectly.

This pattern of using closures to manage state is a powerful tool for writing complex applications with many different components and variables that need to interact with each other. By creating private variables with closures and providing public methods to access and modify them, you can create a modular and maintainable codebase that is easy to reason about and debug.

In summary, closures can be used for state management by creating private variables within functions and providing public methods to access and modify them. This pattern can be applied in many different ways, from simple counters to complex objects that track the state of an entire application.

Connect with me on my:

LinkedIn
GitHub
Twitter

DEV Community: Vikas Choubey

🤖 Build a Weather Search Agent (LangChain + Ollama)

🎯 What You’ll Build

⚠️ Important Reality

🧱 Project Structure

🔑 Step 1: Get Free Weather API

📦 Step 2: Install Dependencies

🔐 Step 3: Add ".env"

🛠 Step 4: Create Tool (REAL API)

📄 projects/search_agent/tools.py

🧠 What is @tool?

Without @tool:

With @tool:

Internally, it gives the agent:

⚙️ Step 5: Build the Agent

📄 projects/search_agent/app.py

🧾 Step 6: Root Entry Point

📄 main.py

▶️ Step 7: Run the Project

🔄 Agent Flow Diagram

🧠 What’s Happening Under the Hood

⚠️ Common Mistakes

🚀 Improvements You Can Add

🎯 Key Learnings

🔥 What Next?

Ollama phi3 based text summarizer

🧠 Build a Text Summarizer Using Local Ollama (phi3) + LangChain

📌 What We’re Building

🖥️ Step 1: Install Ollama

Linux / macOS

Windows

🚀 Step 2: Pull the phi3 Model

🐍 Step 3: Create Python Environment

📦 Step 4: Install Required Packages

📁 Step 5: Project Structure

🧱 Step 6: Create Supporting Files

📝 utils/constants.py

💾 utils/write_output.py

⏳ utils/loader.py (Simple Terminal Spinner)

🧠 Step 7: Create main.py

▶️ Step 8: Run the Project

🧪 How It Works

1️⃣ PromptTemplate

2️⃣ ChatOllama

3️⃣ LCEL Operator (|)

🔥 Optional Improvements

⚠️ Troubleshooting

❌ ModuleNotFoundError

❌ Model not found

🎯 Final Result

Building an Infinite Scroll Component with Intersection Observer 🚀

How it Works:

Connect with me on my:

🌟5 Star Rating component: A Step-by-Step Guide 🌟

Step 1: HTML Structure ☠

Step 2: CSS Styling 💅

Connect with me on my:

Scaling Web Development: Insights from David Malan's Lecture

Introduction:

Debouncing in React: A Custom Hook Example 🚀

Understanding Debouncing 🤔

The Custom Hook: useDebouncedValue 🎣

Using the Custom Hook: DebounceExample Component 🎉

How It Works 🛠

Practical Usecases of Debouncing in web development

Conclusion 🎊

Connect with me on my:

Demystifying the Critical Rendering Path: A Deep Dive into Web Page Loading

The Critical Rendering Path (CRP) Unveiled 🚧

Parsing HTML and CSS 🧩

Building the DOM and CSSOM 🏗️

Render Tree Construction 🌌

Multiple Render Tree Layers 📦

Layout and Paint 🖼️

Synchronous, Async, and Defer Attributes 📜

Conclusion 📝

Designing an Autocomplete UI Component 🔍

The Magic of Autocomplete✨

The Code Unveiled 💻👨‍💻

Demo the code here.

🧠 What is `@tool`?

Without `@tool`:

With `@tool`:

📄 `projects/search_agent/app.py`

📄 `main.py`

3️⃣ LCEL Operator (`|`)