Forem: Rahul Nagarwal

Stop the Scroll: Build a "Psychic" Client-Side Recommender 🚀

Rahul Nagarwal — Fri, 27 Mar 2026 07:25:19 +0000

We’ve all been there: staring at a dropdown with 50+ options, wishing the app would just know what we want. Usually, we solve this with a heavy backend search API. But what if you could build a lightning-fast, "psychic" recommendation engine entirely on the client side?

Here’s how to build a smart template recommender that anticipates user needs with zero latency.

The Core Logic: Context is King 👑

Most search bars look at the whole text. To make recommendations feel intentional, we focus only on the intent. We extract the first line or sentence the user types, strip out the "noise" (stop words like the, a, with), and break it into tokens.

If a user types: "Create a new React component for the login page," our engine sees: ["Create", "React", "component", "login"].

The Brain: The Bitap Algorithm 🧠

To handle typos and partial matches, we use Fuse.js. Under the hood, it utilizes the Bitap algorithm, which uses bitmasking to find matches within a specific "fuzziness" threshold. It treats text not just as strings, but as bit patterns, allowing it to be incredibly fast for client-side operations.

Ranking: Hits vs. Quality

A single "perfect match" isn't always the best result. We use a two-tiered scoring system to rank templates:

Hit Count (Quantity): How many search tokens matched the template name?
Average Score (Quality): How "fuzzy" were those matches?

The Scoring Formula

We calculate the relevance of a template using:
Average Score = {Sum{Bitap Scores}}/{Hit Count}

The Ranking Priority:

Higher Hit Count always wins (matching "React" and "Component" is better than just matching "React" perfectly).
Lower Average Score acts as the tie-breaker for quality.

Clean TypeScript Implementation

import Fuse from 'fuse.js';

export const getRecommendations = (input: string, list: any[]) => {
  const tokens = input.split(/[\n.!?;]/)[0].toLowerCase()
    .split(/\s+/).filter(w => w.length > 2);

  const fuse = new Fuse(list, { 
    keys: ['name'], 
    threshold: 0.45, // Bitap fuzziness threshold
    includeScore: true 
  });

  const scoreMap = new Map();

  tokens.forEach(token => {
    fuse.search(token).forEach(({ item, score }) => {
      const entry = scoreMap.get(item.id) || { item, totalScore: 0, hitCount: 0 };
      entry.totalScore += (score ?? 1);
      entry.hitCount += 1;
      scoreMap.set(item.id, entry);
    });
  });

  return Array.from(scoreMap.values())
    .map(m => ({ ...m, avg: m.totalScore / m.hitCount }))
    .filter(m => m.avg < 0.4)
    .sort((a, b) => (b.hitCount - a.hitCount) || (a.avg - b.avg))
    .slice(0, 5).map(m => m.item);
};

Why This Works

Zero Latency: No API calls means the UI updates as fast as the user types.
Deduplication: Move the top 5 matches to a "Recommended" section and hide them from the main list to keep the UI clean.
Privacy: No user data ever leaves the browser.

By combining Bitap-powered fuzzy matching with a "hit-heavy" ranking logic, you create a UX that feels less like a tool and more like an assistant.

React Debugging: Stop Guessing, Start Building!

Rahul Nagarwal — Mon, 16 Feb 2026 08:14:03 +0000

Frontend development with React can be a thrilling experience. You're building dynamic user interfaces, composing reusable components, and bringing designs to life. But let's be honest, it can also be frustrating. Bugs happen. Components don't render as expected. Data doesn't flow correctly. And when these issues arise, a solid debugging strategy is your best friend.

Why is debugging so crucial in React development?

Efficiency: Debugging helps you pinpoint the exact source of a problem quickly, saving you valuable time and preventing you from chasing down rabbit holes. Instead of randomly changing code and hoping for the best, you can identify the root cause and implement a targeted solution.
Code Quality: A well-debugged application is a more stable and reliable application. By systematically identifying and fixing bugs, you improve the overall quality of your codebase and reduce the likelihood of future issues.
Learning: Debugging isn't just about fixing problems; it's also a powerful learning tool. By stepping through your code, examining component state, and understanding data flow, you gain a deeper understanding of how your application works.
Collaboration: When working in a team, clear and consistent debugging practices make it easier to understand and resolve issues collaboratively.

React Debugging Tips and Tricks

console.log() is your friend (but use it wisely): The simplest and most common debugging technique. Sprinkle console.log() statements throughout your code to inspect variable values, component props, and the flow of execution. However, avoid leaving excessive console.log() statements in your production code.
```
function MyComponent(props) {
  console.log("Props received:", props);
  return (
    <div>{props.name}</div>
  );
}
```
React DevTools: This browser extension is a must-have for React developers. It allows you to inspect the component tree, examine component state and props, profile performance, and track events. Download it for Chrome or Firefox.
The debugger statement: This statement pauses the execution of your code at a specific point, allowing you to step through the code line by line and inspect variables in the browser's developer tools.
```
function handleClick() {
  debugger; // Execution will pause here
  setState(prevState => prevState + 1);
}
```

Error Boundaries: Wrap potentially problematic components with error boundaries to catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Error caught:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Use it like this:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

CSS Debugging Tips and Tricks

Browser DevTools: The browser's developer tools are invaluable for CSS debugging. You can inspect the computed styles of elements, toggle CSS rules on and off, and experiment with different values.
CSS Linting: Use a CSS linter (like Stylelint) to catch potential errors and enforce coding standards.
Visualize the Box Model: In your browser's developer tools, you can often visualize the CSS box model (content, padding, border, margin) to understand how elements are positioned and sized.
Use Comments: Comment your CSS to explain the purpose of different styles and make it easier to understand your code later.
```
/* Style for the main header */
.header {
  font-size: 24px;
  font-weight: bold;
}
```

Conclusion

Debugging is an essential skill for any React developer. By mastering the techniques and tools discussed in this article, you can become a more efficient, productive, and confident developer. So, embrace the debugging process, learn from your mistakes, and keep building amazing React applications!

Stop Ignoring Portrait Mode: 5 CSS Fixes Web Devs Ignore

Rahul Nagarwal — Sun, 15 Feb 2026 10:37:10 +0000

Stop Ignoring Portrait Mode: Web's Missing Responsive Piece

Web developers, portrait mode is sabotaging your mobile sites—and most of us are sleeping on it. Phones rule web traffic (60%+ per StatCounter), and users default to portrait for reading articles, emails, and social scrolls. That's a tall, skinny viewport begging for love. Ignore it, and your hero images crop weird, nav turns microscopic, and users bounce faster than you can say "media query."

We've nailed desktop responsiveness, but portrait? It's the overlooked dimension. With screens like the iPhone 16 Pro Max stretching 21:9 ratios, your flexbox rows stack into awkward towers. Let's change that with practical CSS that works today.

Why Portrait Demands Web Attention

Picture this: A user opens your portfolio in portrait. The sticky header hogs 25% of the screen. Body text starts below the fold. They pinch-zoom, frustrated, and hit back.

Real stats: Portrait sessions crush landscape 3:1 on mobile. Foldables like Galaxy Z Flip4 take it extreme—portrait there is basically a vertical strip. Your web app, blog, or e-comm site loses if it doesn't adapt.

Quick reality check: Open Chrome DevTools. Toggle device mode. Rotate to portrait. Scroll. Cringe yet?

Top Portrait Killers on Web

Spot these before they kill conversions:

Viewport height fails: height: 100vh ignores dynamic browser UI (Safari's shrinking address bar).
Header hogs: Fixed/sticky navs eating prime real estate.
Horizontal flex bias: Rows that force horizontal scroll in portrait.
Touch target tragedy: Buttons under 44px (Apple's guideline).
Image distortion: Wide media that squishes tall.

Fix 1: Dynamic Viewport Units (The Hero Savior)

Ditch brittle vh. Use these modern heroes—95%+ browser support (CanIUse):

.hero {
  height: 100dvh;     /* Dynamic: adapts to chrome */
  min-height: 100svh; /* Smallest viewport: safe floor */
  max-height: 100lvh; /* Largest: caps overflow */
}

Result: Full-bleed sections that actually fill the view, no JS hacks.

Fix 2: Orientation Media Queries (Precision Targeting)

Call out portrait explicitly. Combine with height for phone-specific magic:

@media (orientation: portrait) and (max-height: 800px) {
  .header { 
    height: clamp(50px, 10dvh, 80px); 
  }
  main { padding-block-start: 10dvh; }

  /* Vertical nav for tall screens */
  .nav {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Fat-finger friendly */
  .button { 
    min-height: 3rem; 
    min-width: 3rem;
    font-size: clamp(1rem, 5vw, 1.25rem);
  }
}

Pro move: Add prefers-reduced-motion to skip animations on flip.

Fix 3: Container Queries (Component Superpowers)

Forget global breakpoints. Query inside your cards:

.article-card {
  container-type: inline-size;
}

@container (max-width: 400px) {  /* Portrait card width */
  .card-image {
    flex-direction: column;
    aspect-ratio: 3/4;  /* Tall-first */
  }
  .card-content { order: -1; }  /* Text over image */
}

Chrome 105+, Firefox 110+. Polyfill if needed. Scales infinitely.

Fix 4: Logical Properties + Fluid Scaling

Future-proof with flow-relative CSS:

.header {
  inset-block-start: 0;  /* Top in LTR, logical in RTL/portrait */
  block-size: 10dvh;
}

body {
  font-size: clamp(16px, 4vw + 0.5vh, 24px);  /* Portrait breathes */
  line-height: 1.6;
}

Fix 5: Smart Media Aspect Ratios

img, video, iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;  /* Landscape default */
}

@media (orientation: portrait) {
  img, video, iframe { 
    aspect-ratio: 3/4;  /* Portrait priority */
  }
}