DEV Community: Haroon Ahmad

How an AI Agent Actually Learns Your Website

Haroon Ahmad — Wed, 05 Aug 2026 04:17:41 +0000

You've probably seen the pitch a hundred times by now: "Train an AI on your website in 30 seconds!" You paste a URL, a progress bar fills up, and suddenly there's a chat bubble that answers questions about your return policy.

It feels like magic. And when something feels like magic, it's hard to trust it with your customers.

So let's open the box. In this article, I'll walk you through exactly what happens between "paste your URL" and "good answers", step by step, with no jargon left unexplained. By the end, you'll understand why AI agents sometimes give brilliant answers and sometimes confidently wrong ones, and, more importantly, you'll know how to fix the wrong ones.

Intended audience: anyone who runs a website, store, or support team. Zero technical background needed. If you know what a web page is, you're qualified.

Step 1: Reading (the crawl)

The first thing an AI agent does is read your website, the same way a very fast, very thorough new employee would on their first day.

A small program called a crawler visits your homepage, writes down everything it finds, then follows every link to your other pages and repeats. Product pages, FAQ, shipping policy, that blog post from 2021 you forgot about. All of it.

Here's the part nobody tells you: the crawler doesn't see your website the way you do. It doesn't see your beautiful design, your brand colors, or your hero animation. It sees text. Headings, paragraphs, lists, tables. Everything else is stripped away.

This has a sneaky consequence: if an important fact only exists inside an image ("Free shipping over $50!" as a banner graphic), the agent never learns it. As far as the AI is concerned, that fact doesn't exist.

Gotcha #1: If your agent doesn't know something that's "on your website", check how it's on your website. Text in images, PDFs behind login walls, and content that only appears after clicking a button are all invisible to a crawler. Put critical facts in plain text, or upload them directly as a document or Q&A pair.

Step 2: Chopping (chunking)

Here's a fun problem. Your website might contain 50,000 words. When a customer asks "do you ship to Canada?", the AI doesn't need 50,000 words. It needs the three sentences about international shipping.

So before anything else, your content gets chopped into bite-sized pieces called chunks. Think of it like tearing a cookbook into individual recipe cards. Each card is small, self-contained, and about one thing.

Why does this matter to you? Because chunking rewards well-organized writing. A page with clear headings ("International Shipping", "Returns", "Warranty") chops into clean, useful cards. A page where five topics swirl together in one giant paragraph chops into confusing cards that are half about shipping and half about your founder's dog.

Gotcha #2: If your agent gives muddled answers that mix two topics together, the source page probably mixes them too. Splitting one messy page into clearly-headed sections often fixes "dumb AI" instantly. The AI was never dumb; the recipe cards were.

Step 3: Filing (embeddings)

This is the genuinely magical step, and it's worth two minutes to understand.

Each chunk gets converted into something called an embedding: a long list of numbers that captures what the chunk means. Not what words it contains. What it means.

Here's the intuition. Imagine a giant library where books are shelved by topic, and the shelving is so precise that "refunds", "money back", and "returning an item" all end up on the same shelf, even though they share almost no words. That's what embeddings do: they give every chunk a precise address in "meaning space", where similar meanings live close together.

This is why you can ask an AI agent "can I get my money back?" and it finds your refund policy, even though your policy never contains the words "money back". A keyword search would whiff. A meaning search doesn't.

This single idea, search by meaning instead of matching words, is most of what separates modern AI agents from those old rule-based chatbots that answered "I don't understand" unless you typed the exact magic phrase.

Step 4: Answering (retrieval)

Now a real customer shows up and asks: "hey, my order arrived damaged, what do I do?"

Here's the full sequence, and it happens in about a second:

The question gets converted into the same kind of "meaning address" as your chunks.
The system finds the shelf neighbors: the handful of chunks whose meaning sits closest to the question. Probably your damaged-items policy, your returns process, maybe your warranty page.
Those chunks get handed to the language model with an instruction that boils down to: "Answer this customer's question using ONLY the following material."
The model writes a reply in natural language, grounded in your actual content.

That last step has a name you may have seen: RAG, or retrieval-augmented generation. Strip away the acronym and it's just: look it up first, then answer. The AI is doing an open-book exam where the book is your website, instead of a closed-book exam where it guesses from memory.

And that distinction is everything. A raw AI model answering from memory will happily invent a return policy for you. It's seen thousands of return policies during training; it'll generate a plausible one. Plausible and yours are very different things. The look-it-up-first step is what keeps the agent saying what you say, not what the average of the internet says.

Gotcha #3: When an agent "hallucinates", it's almost always because retrieval came back empty. The customer asked something your content doesn't cover, and the model filled the silence. The fix isn't a smarter model. It's noticing the gap (good agents show you unanswered questions) and adding the missing content, often as a simple Q&A pair. Each one is like handing your new employee a sticky note: "if anyone asks THIS, say THIS."

Why "training" is really "re-reading"

One more mental-model correction, because this word causes endless confusion.

When a tool says it "trains" an agent on your website, it usually does not mean the underlying AI model is being rebuilt around your data. It means your content is being read, chopped, and filed into that meaning-library so the model can look things up.

This is good news for you, for three reasons:

Updates are cheap. Changed your shipping prices? Re-reading a page takes seconds. Rebuilding a model would take days.
Your data stays yours. Your content sits in a library the agent consults. It isn't melted into the model.
Mistakes are fixable. Wrong answer? Fix the source content, re-sync, done. No mysterious retraining rituals.

The flip side: the library only knows what it was last shown. If you update your website and never re-sync the agent, it keeps answering from the old snapshot, confidently. Stale content is the most boring and most common cause of wrong answers. Look for an agent that re-crawls on a schedule or lets you retrain in one click.

So what should you actually do with this?

If you take away four things:

Write for the crawler too. Critical facts belong in plain text with clear headings, not baked into images.
One topic per section. Clean structure in, clean answers out.
Watch the misses. Unanswered questions are a gift: each one is a gap in your content that a two-line Q&A pair can fill.
Keep it synced. An AI agent is a mirror of your content on a specific day. Keep the mirror fresh.

Notice that none of these are AI skills. They're the same content hygiene that helps your human customers and your Google ranking. The AI just raised the stakes.

Try it on your own website

Everything in this article is exactly how Fetchply works under the hood: it crawls your site, files it by meaning, looks up before it answers, and shows you the questions it couldn't answer so you can fill the gaps with Q&A pairs or file uploads. Then it serves those answers on your website, WhatsApp, Instagram, and Shopify from one inbox, with a human-handoff button for the conversations that need a person.

The free plan includes 200 AI messages a month with no card required, which is plenty to run the fun experiment: train it on your site, then ask it the ten questions your customers ask most. The answers it gets right will impress you. The ones it gets wrong will tell you exactly which page of your website needs love.

Why your AI chatbot is losing leads (and the 3 fixes that actually work)

Haroon Ahmad — Tue, 04 Aug 2026 02:32:21 +0000

Why your AI chatbot is losing leads (and the 3 fixes that actually work)

You deployed an AI chatbot to capture leads. You waited for the numbers to climb. They didn't.

The most likely reason is that your chatbot is acting like a static web form wearing a digital tuxedo. It asks the same boring questions, demands contact information upfront, and fails to pass qualified intent to your sales team when it matters.

According to Salesforce's State of Sales report, 70% of leads are never followed up on. Reps are not ignoring leads out of laziness. They ignore them because there is no signal to tell them which leads are actually worth the call. If your chatbot just collects emails and dumps them into a queue, it is part of the 70% black hole.

If you want your chatbot to generate revenue instead of just taking up space in the corner of your screen, you need to change how it operates. Here are the three structural errors killing your conversion rates and the exact fixes you need to implement.

The structural errors killing your conversion rates

Before fixing the problem, you have to understand why most chatbot deployments fail.

The single most common error in chatbot lead generation is asking for contact details in the first message. The visitor has received nothing in exchange. They close the chat. This is why so many teams conclude that chatbots simply do not work.

Research from Heeya’s lead-gen playbook shows that a chatbot asking for an email first converts at approximately the same rate as a standard web form. The chatbot that delivers value first converts at three to five times that rate.

If your bot is not delivering value, qualifying intent, and routing leads instantly, it is a cost center. Here is how to fix it.

Fix 1: Restructure the conversation to deliver value first

Stop treating your chatbot like a digital receptionist. Treat it like a sales engineer.

You need to restructure the conversation so the bot delivers a relevant insight, recommendation, or incentive within the first few messages. Give before you take. If a visitor asks about pricing, do not ask for their email before showing them a rough estimate or a pricing tier breakdown.

Consider the difference between these two approaches:

The broken approach:

Bot: Hi! Enter your email to learn more about our product.
User: [Closes chat]

The value-first approach:

Bot: Hi! Are you looking for pricing on the solo or enterprise plan?
User: Enterprise, for 50 users.
Bot: For 50 users, the annual plan saves you 20% compared to monthly. Want me to send a custom quote to your email?
User: Yes, me@company.com

Platforms like ChatSales demonstrate this well. You point the AI at your website, and it learns from your existing content to create dynamic questions and answers. By providing a useful answer or offer before requesting an email, this single change can double or even triple your lead capture rate.

Fix 2: Implement real-time AI qualification

Collecting an email is not qualification. You need an AI-powered qualification script that scores intent and fit in real time.

Adapt traditional sales frameworks like BANT (Budget, Authority, Need, Timeline) or MEDDIC to your chat flow. When a user interacts with the bot, the AI should silently score their responses. If a prospect has no budget and no urgency, the bot can route them to a self-serve resource. If they have high intent and clear fit, the bot routes them to a human rep immediately.

Firms that use AI-driven qualification frameworks adapted to chat see up to a 40% lift in high-quality lead capture. This reduces wasted follow-up effort and aligns with the Gartner forecast that 40% of enterprise applications will embed task-specific AI agents by 2026, up from less than 5% in 2025.

To do this right, your AI needs to connect to your actual business data. A tool like Fetchply, for instance, learns from your docs and product data to check orders, inventory, and account details right in the chat. If a customer asks about a specific product, the bot can check stock levels, confirm availability, and qualify the lead based on their specific product interest before handing the chat to a human.

This is where the shift from simple bot to AI agent happens. Generative AI is augmenting chatbots' capacity to comprehend user intent and generate human-like, contextually relevant responses. Your bot should not just read a script. It should understand the conversation and score the lead dynamically.

Fix 3: Kill the handoff delay with CRM integration

You can have the best value-first conversation and a perfect qualification script, but if you fail at the handoff, you lose the deal.

The handoff problem is the silent killer of chatbot ROI. Research shows that booking probability drops by more than 50% when lead time exceeds a day. The longer it takes to get on a call with a prospect after they show interest, the less likely they are to book.

You must integrate your chatbot tightly with your CRM. Whether you use HubSpot, Salesforce, or Pipedrive, the chatbot should trigger instant notifications, schedule calls, or even auto-dial the prospect within seconds of qualification.

If someone asks to speak to a rep, the bot should instantly check the CRM, find the assigned rep, and offer immediate calendar slots. If the lead is highly qualified, an AI agent can even initiate a phone call to the prospect who just submitted their phone number.

This eliminates the batch processing weakness of traditional funnels. Traffic arrives, has a conversation, gets qualified, and is routed instantly. No sitting in a queue. No waiting for a rep to have time to call.

The ROI of getting it right

When you apply these three steps, the chatbot transforms from a cost center into a reliable lead-generation engine. The numbers back this up.

According to Master of Code, 55% of companies employing chatbots for marketing report an increase in high-quality leads. DemandSage notes that chatbots can improve conversion rates for e-commerce by up to 30%. Which-50 reports that AI chatbots yield conversion enhancements of 20% or greater, with proactive chat driving up to a 40% increase.

Customer engagement also spikes. Localiq found that enterprises providing superior chatbot experiences see a 70% increase in customer engagement and responses.

There is also a hard cost benefit. AI chatbots cost roughly $0.50 per interaction compared to $6 or more for human agents. By automating the routine questions and the initial qualification, you save your human reps for the high-value closing conversations.

Stop treating your chatbot like a form

The days of deploying a simple rule-based bot to collect emails are over. By 2026, AI is expected to power 95% of all customer service interactions.

If your chatbot asks for an email before delivering value, fails to qualify intent, and drops leads into a black hole CRM queue, you are losing money.

Fix the conversation flow. Qualify with intent. Integrate the handoff. Turn your chatbot into the hardest working sales development rep on your team.

Why your AI chatbot is losing leads (and the 3 fixes that actually work)

Haroon Ahmad — Tue, 04 Aug 2026 01:47:26 +0000

You deployed an AI chatbot to capture leads. You waited for the numbers to climb. They didn't.

The structural errors killing your conversion rates

Before fixing the problem, you have to understand why most chatbot deployments fail.

If your bot is not delivering value, qualifying intent, and routing leads instantly, it is a cost center. Here is how to fix it.

Fix 1: Restructure the conversation to deliver value first

Stop treating your chatbot like a digital receptionist. Treat it like a sales engineer.

Consider the difference between these two approaches:

The broken approach:

Bot: Hi! Enter your email to learn more about our product.
User: [Closes chat]

The value-first approach:

Bot: Hi! Are you looking for pricing on the solo or enterprise plan?
User: Enterprise, for 50 users.
Bot: For 50 users, the annual plan saves you 20% compared to monthly. Want me to send a custom quote to your email?
User: Yes, me@company.com

Fix 2: Implement real-time AI qualification

Collecting an email is not qualification. You need an AI-powered qualification script that scores intent and fit in real time.

Fix 3: Kill the handoff delay with CRM integration

You can have the best value-first conversation and a perfect qualification script, but if you fail at the handoff, you lose the deal.

The ROI of getting it right

When you apply these three steps, the chatbot transforms from a cost center into a reliable lead-generation engine. The numbers back this up.

Customer engagement also spikes. Localiq found that enterprises providing superior chatbot experiences see a 70% increase in customer engagement and responses.

Stop treating your chatbot like a form

The days of deploying a simple rule-based bot to collect emails are over. By 2026, AI is expected to power 95% of all customer service interactions.

If your chatbot asks for an email before delivering value, fails to qualify intent, and drops leads into a black hole CRM queue, you are losing money.

Fix the conversation flow. Qualify with intent. Integrate the handoff. Turn your chatbot into the hardest working sales development rep on your team.

🚀 Meet Covry — Your New AI Cover Letter Sidekick

Haroon Ahmad — Sun, 01 Jun 2025 09:45:28 +0000

Hey folks! 👋

I just launched Covry, a smart, time-saving tool that helps you generate tailored cover letters in seconds — without the stress.

Whether you're applying on Upwork, LinkedIn, or a job board, Covry makes it easy to stand out with letters that sound like you.

✅ Quick & personalized.
✅ Edit Directly.
✅ Personalized for Shopify, Wordpress, Custom Website etc...
✅ Built for real-world jobs.
✅ No templates. Just results.

🔗 Try Covry Now

Would love your thoughts & feedback!

🧨 Builder.ai’s Fall: A Cautionary Tale for Startups

Haroon Ahmad — Mon, 26 May 2025 07:15:41 +0000

I’m deeply saddened to share that Builder.ai – once a $1.3 billion unicorn backed by Microsoft and other investors – has filed for insolvency in the UK.

Builder.ai (formerly Engineer.ai), founded in 2016, promised to let anyone build custom apps “as easy as ordering pizza” using AI. Over the years, it raised ~$450–500M from big-name backers and promised rapid growth. But in May 2025, the company abruptly ran out of cash, entering bankruptcy proceedings – leaving employees and the tech community stunned.

📅 Timeline of Key Events

2016: Founded by Sachin Dev Duggal as Engineer.ai, offering AI-powered no-code app development
2019: WSJ reports their “AI” was mostly human developers; firm rebrands to Builder.ai
2021–2022: Claims 300% YoY growth; raises Series B & C
May 2023: Raises $250M Series D from QIA, Microsoft joins as investor; valuation hits ~$1.3B
Oct 2024: Takes $50M debt facility from Viola Credit based on inflated forecasts
Early 2025: Revenue restated from $220M → $55M; CEO Duggal steps down
Mar 2025: Emergency $75M raised; 270 layoffs
May 2025: Lenders seize $37M of cash. Builder.ai enters UK insolvency

💣 Why It Collapsed

1. Massively Overstated Revenues

Builder.ai’s internal audit slashed its 2023–2024 sales projections by 75%:

2024 forecast: $220M → $55M
2023 revenue: $180M → $45M

Some insiders claimed previous figures were inflated by 20–300%.

2. Sudden Cash Seizure

Lenders seized $37M out of $42M cash from Builder.ai’s accounts, citing covenant breaches. This left:

~$5M in cash (much locked overseas)
No ability to pay staff or vendors

“Effectively shut down our ability to operate.” – CEO Manpreet Ratia

3. High Burn, Big Debts

Despite raising $500M, cash burned fast:

Owed $85M to AWS, $30M to Microsoft
Only $7M left by early 2025

4. Leadership Instability

Duggal exits in Feb 2025
Replaced by Manpreet Ratia (ex-Jungle Ventures)
Investigations raised concerns of “potentially bogus” sales and shady resellers

🔧 The Business Model

Builder.ai offered a no-code/AI app builder, letting users spec out apps that were assembled by AI + human engineers.

Promised fast, scalable, AI-driven software dev
Reality: heavily reliant on human devs, despite AI claims
Once had 1,000+ employees and clients across media, retail, and sports

💸 Funding & Investors

Round	Year	Lead Investors	Notes
Seed–Series C	2016–2022	Lakestar, Jungle Ventures, Insight, WndrCo	~$195M raised
Series D	2023	Qatar Investment Authority, Microsoft	$250M round, valuation ~$1.3–1.5B
Debt Facility	2024	Viola Credit	$50M loan (later triggered collapse)
Emergency Raise	2025	Existing investors	$75M in Mar 2025 to fix finances

📣 Company & Industry Reactions

🔹 Builder.ai Statement

“Despite the tireless efforts of our team… the business has been unable to recover from historic challenges and past decisions.”

– Company LinkedIn Post

🔹 CEO Manpreet Ratia

“Lenders swept $40M from our accounts… shutting down our ability to operate.”

“We’re working with administrators to protect customers, employees, and any remaining value.”

🔹 Analysts

Phil Brunkard (Info-Tech): AI startups are hitting a “realism check” post-hype
Carrie Osman: A case of “FOMO investing” chasing flashy AI narratives without substance

🧠 Lessons for Startups

1. Be Realistic & Transparent

Don’t overinflate forecasts
Unrealistic growth projections undermine trust

2. Sustainability Over Speed

Growth is great, but runway and cash flow are vital
Builder.ai burned fast and owed massive cloud bills

3. Hype ≠ Product

No-code/AI is promising, but needs solid execution
Don’t build a story that outpaces your capabilities

4. Take Care of People

Employees faced sudden job losses with little warning
Transparency and support during collapse matter

5. There May Still Be Value

Some tech and talent may be acquired
Duggal may even attempt to buy back parts of the company

💬 Final Thoughts

This is a painful reminder that even unicorns can fall – and quickly.

Builder.ai’s story is one of ambition, hype, missteps, and hard lessons. It shows us that AI buzzwords and big funding don’t replace business fundamentals. Let’s learn from this and support the people affected.

The no-code/AI space still holds promise – but it must be built on trust, transparency, and real value.

Sources: Bloomberg, TechCrunch, WSJ, LinkedIn posts from Builder.ai leadership.

Code CSS Directly Inside the Browser (Not Using Inspect Elements) 🔥 🔥

Haroon Ahmad — Wed, 17 Jul 2024 12:02:56 +0000

Copy the code and pase it in your HTML and enjoy live coding :)

<style contenteditable="true" style="display:block; white-space: pre">
body {
background: blue
}
</style>

5 most useful JavaScript Utilities!

Haroon Ahmad — Wed, 17 Jul 2024 11:09:19 +0000

Hi, I'm Haroon, a Senior Full Stack Developer. Today, I'll share some incredibly useful JavaScript functions that you can use in almost every project

1. Tracks the visibility of an element within the viewport

This utility uses the Intersection Observer API to track the visibility of an element within the viewport. It calls a callback function with a boolean value indicating whether the element is visible or not.

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. Reactive viewport breakpoints

This utility allows you to define breakpoints and get notified when the viewport width crosses these breakpoints. It calls a callback function with the current breakpoint value.

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3. Reactive Clipboard API

This utility listens to copy events and reads the copied text from the clipboard, calling a callback function with the copied text.

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. Reactive Screen Orientation API

This utility listens to changes in screen orientation and calls a callback function with the current orientation type.

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5. Reactive state to show whether the mouse leaves the page

This utility tracks when the mouse leaves or enters the page and calls a callback function with a boolean value indicating whether the mouse has left the page.

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

Each of these utilities leverages event listeners and modern APIs to provide reactive behavior in your JavaScript applications.

Thank you for taking the time to explore these powerful JavaScript utilities with me. I hope you find them as useful and exciting as I do. Feel free to experiment with these functions in your projects and see how they can enhance your development process. If you have any questions or want to share your own tips, please write down in comments. Happy coding!

Unraveling the Magic Behind React 18: A Comprehensive Guide🚀

Haroon Ahmad — Mon, 10 Apr 2023 06:26:37 +0000

React 18 is the latest version of the popular JavaScript library for building user interfaces. It comes with several new features and improvements that aim to make the development process faster and more efficient. In this article, we'll take a look at how React 18 works behind the scenes and what makes it different from its predecessors.

Suspense

One of the major new features in React 18 is Suspense, which allows you to defer rendering of a component until some data is loaded. This can be particularly useful for components that rely on external data sources or APIs, where it may take some time to retrieve the necessary data.

With Suspense, you can tell React to wait for the data to arrive before rendering the component. This makes it possible to show a loading indicator or a fallback UI while the data is being loaded. Once the data is available, React will render the component with the updated data.

Here's an example of how Suspense works:

import { Suspense } from 'react';
import { fetchData } from './api';

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent data={fetchData()} />
      </Suspense>
    </div>
  );
}

In this example, we use the Suspense component to defer rendering of MyComponent until the data is available. If the data takes some time to load, the fallback prop will be displayed instead.

Concurrent Rendering

Another major new feature in React 18 is Concurrent Rendering, which aims to improve the performance of React applications by allowing multiple components to be updated simultaneously. In previous versions of React, updates to components were done one at a time, which could lead to slow rendering times for complex applications.

With Concurrent Rendering, React can work on updating multiple components at the same time, making the process much faster and more efficient. This can be particularly useful for large and complex applications where there are many components that need to be updated frequently.

Here's an example of how Concurrent Rendering works:

import { unstable_createRoot as createRoot } from 'react-dom';

const root = createRoot(document.getElementById('root'));

function App() {
  return (
    <div>
      <MyComponent />
      <MyOtherComponent />
    </div>
  );
}

root.render(<App />);

In this example, we use the unstable_createRoot function to create a root for our React application. This enables Concurrent Rendering, which allows multiple components to be updated simultaneously.

Automatic Batching

In previous versions of React, updates to components were batched together manually by the developer. This involved wrapping the updates in a batch function to ensure that they were processed together, rather than triggering a re-render for each update.

In React 18, this process is now automatic, which means that updates are automatically batched together by React. This can lead to significant performance improvements, particularly for applications with a large number of updates.

Here's an example of how Automatic Batching works:

import { useState } from 'react';

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

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

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

In this example, we use the useState hook to update the count state. We call setCount three times in quick succession, but React automatically batches the updates together, so the component is only re-rendered once with the updated count value.

Server Components

Another exciting new feature in React 18 is Server Components, which allows for more efficient rendering of components on the server-side. With Server Components, you can render components on the server without having to render the entire application every time.

This can be particularly useful for applications with a large number of components, where rendering the entire application on the server can be slow and inefficient. With Server Components, you can render only the components that are necessary, which can greatly improve performance.

Here's an example of how Server Components works:

import { ssrComponent } from 'react-ssr';

function MyServerComponent(props) {
  return (
    <div>
      <p>Hello, {props.name}!</p>
    </div>
  );
}

export default ssrComponent(MyServerComponent);

In this example, we use the ssrComponent function to create a Server Component. This component can be rendered on the server without having to render the entire application every time.

Conclusion

React 18 introduces several new features and improvements that make it an even more powerful tool for building user interfaces. With Suspense, Concurrent Rendering, Automatic Batching, and Server Components, you can build applications that are faster and more efficient than ever before.

By understanding how these features work behind the scenes, you can take advantage of them to build better React applications. Whether you're building a small application or a large, complex one, React 18 has the tools you need to succeed.

JS Unique Tricks for Intermediators

Haroon Ahmad — Sun, 09 Apr 2023 15:03:26 +0000

Javascript is a versatile language that allows developers to create powerful and interactive web applications. In this article, we will explore some unique tricks that can be used to enhance the functionality of Javascript.

Trick 1: Using the Ternary Operator for Conditional Statements

The ternary operator is a shorthand way to write conditional statements in Javascript. It is often used to replace if-else statements and can make your code more concise and easier to read.

Here's an example:

// Without ternary operator
if (a > b) {
  result = "a is greater than b";
} else {
  result = "b is greater than a";
}

// With ternary operator
result = a > b ? "a is greater than b" : "b is greater than a";

In this example, we use the ternary operator to check whether a is greater than b and assign the appropriate string to the result variable.

Trick 2: Using Object Destructuring to Assign Variables

Object destructuring is a technique that allows you to extract values from objects and assign them to variables. This can be a useful way to simplify your code and make it more readable.

Here's an example:


const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

// Without object destructuring
const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;

// With object destructuring
const { firstName, lastName, age } = person;

In this example, we use object destructuring to extract the firstName, lastName, and age properties from the person object and assign them to variables of the same name.

Trick 3: Using the Spread Operator to Combine Arrays

The spread operator is a powerful tool in Javascript that allows you to expand arrays and objects. It can be used to combine arrays in a concise and readable way.

Here's an example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Without spread operator
const arr3 = arr1.concat(arr2);

// With spread operator
const arr3 = [...arr1, ...arr2];

In this example, we use the spread operator to combine the arr1 and arr2 arrays into a new array arr3. This is much more concise than using the concat method.

Trick 4: Using Arrow Functions for Concise Functions

Arrow functions are a shorthand way to write functions in Javascript. They can make your code more concise and easier to read.

Here's an example:


// Without arrow function
function add(a, b) {
  return a + b;
}

// With arrow function
const add = (a, b) => a + b;

In this example, we use an arrow function to define the add function. This is much more concise than using the function keyword.

Trick 5: Using Template Literals for Dynamic Strings

Template literals are a powerful feature in Javascript that allows you to create dynamic strings. They can be used to insert variables and expressions into strings.

Here's an example:

const name = "John";
const age = 30;

// Without template literals
const message = "My name is " + name + " and I am " + age + " years old.";

// With template literalz
const message = `My name is ${name} and I am ${age} years old.`;

In this example, we use template literals to create a dynamic string that includes

the name and age variables. This is much more concise and easier to read than using string concatenation.

Trick 6: Using the Nullish Coalescing Operator for Default Values

The nullish coalescing operator is a relatively new feature in Javascript that can be used to provide default values for variables that may be null or undefined.

Here's an example:

const foo = null;
const bar = foo ?? "default value";

console.log(bar); // "default value"

In this example, we use the nullish coalescing operator to assign the value of foo to bar. If foo is null or undefined, the default value of "default value" is used instead.

Trick 7: Using Promises for Asynchronous Code

Promises are a powerful tool in Javascript that allow you to write asynchronous code in a synchronous style. They can be used to make your code more readable and easier to maintain.

Here's an example:


function fetchData() {
  return new Promise((resolve, reject) => {
    // Perform asynchronous operation
    const data = getDataFromServer();

    if (data) {
      resolve(data);
    } else {
      reject(new Error("Unable to fetch data"));
    }
  });
}

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

In this example, we use a promise to fetch data from a server. The fetchData function returns a promise that resolves with the data if the operation is successful or rejects with an error if it fails.

Conclusion

Javascript is a powerful language with many unique features that can be used to enhance the functionality of your code. By using these tricks, you can make your code more concise, readable, and easier to maintain.

Let me know in comments if you know any more :)

💡 50+ JavaScript Project ideas!

Haroon Ahmad — Thu, 26 May 2022 04:42:16 +0000

In this article, I’ve collected 50+ of them, so you can have an easier job choosing your next challenge.

① Modal open & close

② Random Hex Color Generator

③ Random Number Generator

④ Counter Number App

⑤ Border Radius Controller

⑥ Box Shadow Controller

⑦ Image Filter (when we click on the button)

⑧ Border Width Slider

⑨ Background changer using HTML Color Picker

①⓪ Image Position Slider (X and Y Directions)

①① Click To Download Something

①② Background Choosing With Images or Gradients

①③ Auto Year Update In The Footer Section

①④ Date CountDown

①⑤ Time CountDown

①⑥ Sticky NavBar

①⑦ Smooth Scrolling

①⑧ Responsive NavBar(Hamburger Button)

①⑨ Random Password Generator

②⓪ Body Mass Index Calculator

②① Notes App

②② To-Do App

②③ Calculator App

②④ Digital Clock

②⑤ Form Validation

②⑥ Password Hide And Show

②⑦ Password Strength Checker

②⑧ Currency Converter

②⑨ Dark & Light Mode Toggle

③⓪ Alert & Notification

③① Website Preloader Implementation

③② Character CountDown

③③ Temperature Calculator

③④ Age Calculator(Years/Months/Day)

③⑤ Music Player App

③⑥ Number Guessing Game

③⑦ Length Converter App(KM, M, CM, etc.)

③⑧ Auto Image Change Of The Background After A Defined Time.

③⑨ Contact Form

④⓪ Text To Speech

④① Search Something

④② Music Search

④③ Find The Location Of A User

④④ Click To Copy

④⑤ Internet Connection Checker

④⑥ Quiz App

④⑦ Weather App

④⑧ Accordion Open & Close

④⑨ Slider Or Carousel

⑤⓪ Scroll Bottom To Top

⑤① Random Joke Generator

⑤② Ludo Dice Number Generator

⑤③ Alarm App

⑤④ Cards Expand & Collapse

⑤⑤ Blurry Loading

⑤⑥ Toast Notification

⑤⑦ Hidden Search Widget

⑤⑧ Page Progress

⑤⑨ Find Keyboard Keys Name

That's all for now, we will meet in the next post😍

Basics to Master topics in javascript 🔥🔥everyone must know

Haroon Ahmad — Mon, 23 May 2022 17:03:49 +0000

⚡ Important Basic Topics ⚡

👉 Syntax
👉 Variables
👉 If else statements
👉 Operators
👉 Loops
👉 Functions
👉 Events
👉 Cookies
👉 Keywords
👉 Dialogue Boxes

⚡ Javascript Advanced Topics ⚡

👉 Error Handling
👉 Validations
👉 Animations
👉 Multimedia
👉 Debugging
👉 Closure
👉 Scope
👉 IIFEs
👉 Arrow Functions
👉 Async Programming

⚡ JAVASCRIPT OBJECTS ⚡

👉 Numbers
👉 Boolean
👉 Strings
👉 Arrays
👉 Date
👉 Math
👉 RegExp
👉 HTML Dom

⭐ Additional ⭐

⚡ Some famous resources from where you can learn javascript ⚡

👉 freeCodeCamp
👉 Udemy
👉 Scrimba
👉 CodeMentor
👉 Sololearn
👉 W3Schools
👉 Codecademy
👉 GitHub

Let me know any other resources you know :)

Best 7 Platforms to Level Up Your Frontend Skills 🚀

Haroon Ahmad — Fri, 20 May 2022 06:04:12 +0000

In this article, I am sharing best site and apps which are beginner-friendly. This will improve your speed of front-end development to a whole new Level.

inspired and images from @Amit_T18 from twitter

CSS Battles

CSS Battle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.

https://cssbattle.dev/

JavaScript 30

It's a 30-day vanilla JS coding challenge. During these 30 days (more or less — you can binge the tutorials Netflix style to take it as slow as you like because you'll get an instant and free access to all the videos) you'll build 30 different apps using fun and easy video tutorials

https://javascript30.com/

Code Well

Improve your HTML and CSS skills by practicing on real design templates. With Codewell, you can browse high quality Figma templates that you can use to sharpen your HTML and CSS skills.

https://www.codewell.cc/

Frontend Mentor

Frontend Mentor is a platform where you can solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

https:// www.frontendmentor.io/

Frontend Practice

With this, you get a list of websites that look nice to clone and increase your experience and ideas. Take your frontend skills to the next level by recreating real websites from real companies.
The perfect type of practice for developers of all skill levels.

https:// www.frontendpractice.com/

Codewars

Codewars is an educational community for computer programming. On the platform, software developers train on programming challenges known as kata. These discrete programming exercises train a range of skills in a variety of programming languages, and are completed within an online integrated development environment.

https:// www.codewars.com/

Daily UI

Daily UI is a series of daily Design Challenges. Inspiration and Surprise Rewards! Get Started. 100% FREE.

https:// www.dailyui.co/

Summary

Hope you find these sites and apps helpful for your new design at font-end.

If you find this article helpful, then let me know via your comments below.

DEV Community: Haroon Ahmad

How an AI Agent Actually Learns Your Website

Step 1: Reading (the crawl)

Step 2: Chopping (chunking)

Step 3: Filing (embeddings)

Step 4: Answering (retrieval)

Why "training" is really "re-reading"

So what should you actually do with this?

Try it on your own website

Why your AI chatbot is losing leads (and the 3 fixes that actually work)

Why your AI chatbot is losing leads (and the 3 fixes that actually work)

The structural errors killing your conversion rates

Fix 1: Restructure the conversation to deliver value first

Fix 2: Implement real-time AI qualification

Fix 3: Kill the handoff delay with CRM integration

The ROI of getting it right

Stop treating your chatbot like a form

Why your AI chatbot is losing leads (and the 3 fixes that actually work)

The structural errors killing your conversion rates

Fix 1: Restructure the conversation to deliver value first

Fix 2: Implement real-time AI qualification

Fix 3: Kill the handoff delay with CRM integration

The ROI of getting it right

Stop treating your chatbot like a form

🚀 Meet Covry — Your New AI Cover Letter Sidekick

🧨 Builder.ai’s Fall: A Cautionary Tale for Startups

📅 Timeline of Key Events

💣 Why It Collapsed

1. Massively Overstated Revenues

2. Sudden Cash Seizure

3. High Burn, Big Debts

4. Leadership Instability

🔧 The Business Model

💸 Funding & Investors

📣 Company & Industry Reactions

🔹 Builder.ai Statement

🔹 CEO Manpreet Ratia

🔹 Analysts

🧠 Lessons for Startups

1. Be Realistic & Transparent

2. Sustainability Over Speed

3. Hype ≠ Product

4. Take Care of People

5. There May Still Be Value

💬 Final Thoughts

Code CSS Directly Inside the Browser (Not Using Inspect Elements) 🔥 🔥

Copy the code and pase it in your HTML and enjoy live coding :)

5 most useful JavaScript Utilities!

1. Tracks the visibility of an element within the viewport

2. Reactive viewport breakpoints

3. Reactive Clipboard API

4. Reactive Screen Orientation API

5. Reactive state to show whether the mouse leaves the page

Unraveling the Magic Behind React 18: A Comprehensive Guide🚀

Suspense

Concurrent Rendering

Automatic Batching

Server Components

Conclusion

JS Unique Tricks for Intermediators

Trick 1: Using the Ternary Operator for Conditional Statements

Trick 2: Using Object Destructuring to Assign Variables

Trick 3: Using the Spread Operator to Combine Arrays

Trick 4: Using Arrow Functions for Concise Functions

Trick 5: Using Template Literals for Dynamic Strings

Trick 6: Using the Nullish Coalescing Operator for Default Values

Trick 7: Using Promises for Asynchronous Code

Conclusion

💡 50+ JavaScript Project ideas!

That's all for now, we will meet in the next post😍

Basics to Master topics in javascript 🔥🔥everyone must know

⚡ Important Basic Topics ⚡

⚡ Javascript Advanced Topics ⚡

⚡ JAVASCRIPT OBJECTS ⚡

⚡ Some famous resources from where you can learn javascript ⚡

⚡ Some famous youtube Channels to learn web develoopment ⚡

Let me know any other resources you know :)

Best 7 Platforms to Level Up Your Frontend Skills 🚀

CSS Battles

JavaScript 30