Forem: Saloni Agrawal

I Tried Windsurf — An AI Native Coding Environment

Saloni Agrawal — Wed, 04 Mar 2026 17:35:12 +0000

VS Code has been my primary editor for years, especially for React and React Native development.

With Agent Mode and GitHub Copilot getting stronger, I wanted to test something specific:

Does an AI-native editor like Windsurf actually change the workflow — or is it just a different packaging of similar capabilities?

After using it and going through the docs, here’s the breakdown.

What Windsurf Actually Is

Windsurf is an AI-native code editor built by the team behind Codeium.

Unlike VS Code (where AI comes through extensions), Windsurf is architected around AI at the core.

Its system, called Cascade, provides:

Codebase-wide understanding
Multi-file edits
Structured task execution
Terminal interaction
Persistent memory
Fast context retrieval
Multi-model comparison (Arena)

If you already use VS Code with Agent Mode, the capability overlap is significant.

The difference is mostly architectural and workflow-oriented.

These are the few features I tried while exploring Windsurf so far, and I’m keen to explore more.

1️⃣ Request Queueing (This Is Genuinely Useful)

This is the feature I liked most.

In Windsurf, you can submit multiple instructions while one is still executing.

Example:

Windsurf:

Accepts all requests
Queues them
Executes them sequentially
Moves automatically to the next task

You don’t have to wait between prompts.

This isn’t parallel execution — it’s sequential execution.

VS Code Agent Mode is more conversational. You typically wait for completion before issuing the next instruction. There’s no formal task queue system.

2️⃣ Cascade Memory (Persistent Agent Context)

Windsurf includes Cascade Memory, which acts as a persistent context layer.

It can:

Retain architectural understanding
Preserve project-level awareness
Maintain continuity across sessions

VS Code Agent Mode provides strong session-level context and shows:

Step-by-step execution
File edits
Tool calls
Terminal logs

But it does not expose a dedicated persistent agent memory system.

This makes Windsurf feel slightly more stateful over time.

3️⃣ Fast Context (Important for Large Projects)

Windsurf includes something called Fast Context.

Fast Context focuses on:

Retrieving only relevant files
Reducing unnecessary token usage
Improving response speed
Increasing signal quality

In VS Code, context is usually based on:

Open files
Visible code
Workspace scanning

Fast Context is more explicit and retrieval-optimized.

This matters more in medium-to-large repositories and is quite helpful.

4️⃣ Arena (Strongest Differentiator)

Windsurf includes Arena, which allows you to:

Run the same prompt across multiple AI models
Compare outputs side-by-side
Select the best result

You can compare GPT-4, Claude, Gemini, etc., for:

Refactoring
TypeScript migration
Performance optimisation
Architecture changes

VS Code + Copilot do not offer built-in model comparison.

Arena is one of Windsurf’s clearest differentiators.

5️⃣ Worktrees (Execution Isolation)

Cascade Worktrees allow:

Isolated working environments
Safer large refactors
Controlled AI-driven changes

In VS Code, isolation is managed manually through Git branches or worktrees.

Windsurf integrates isolation directly into AI execution.

Windsurf vs VS Code + Copilot

Feature	VS Code + Copilot	Windsurf
Multi-step Tasks	Yes	Yes
Structured Execution Logs	Yes	Yes
Request Queueing	No formal queue	Yes
Persistent Memory Layer	No explicit system	Yes
Fast Context Retrieval	Implicit	Explicit
Execution Isolation	Manual (Git-based)	Yes (Worktrees)
Model Comparison	No	Yes (Arena)
Ecosystem	Massive	Limited
Stability	Very high	Good

The raw capability gap isn’t huge.

So Is It Worth Switching?

If you already use VS Code with Agent Mode and Copilot, Windsurf may not feel revolutionary.
You’re not suddenly going to build 10× faster overnight.

However, during my use, I noticed a few subtle differences.

In multi-file changes, Windsurf produced slightly cleaner imports and more consistent updates across files. This likely stems from its stronger context handling and structured execution flow, though this observation is based on personal experience rather than formal benchmarks.

What Windsurf does introduce is a different development workflow:

Structured request queueing
Persistent agent memory
Explicit context optimisation
Multi-model comparison

VS Code is still more mature and widely adopted.
Windsurf, on the other hand, feels designed around AI workflows from the start.

If you’ve used Windsurf, I’m curious:

Which feature actually changed your workflow?
Did you notice improvements in context handling or imports?
Or did it feel similar to your current setup?

Would love to hear what stood out for you.

Debugging with AI: Chrome DevTools MCP + Copilot

Saloni Agrawal — Tue, 10 Feb 2026 18:44:12 +0000

This article shows how Chrome DevTools MCP bridges the gap between browser debugging and AI assistance, and how you can use it with VS Code Copilot using a real demo site.

When used correctly, this setup is genuinely powerful.

I was able to clean up console warnings, understand hidden issues, and improve overall code quality in my own project using a single prompt. The result: less time fixing errors manually, and a noticeable boost in productivity.

What is Chrome DevTools MCP

Chrome DevTools MCP (Model Context Protocol) allows Chrome DevTools to expose runtime debugging context directly to AI tools like VS Code Copilot.

This context includes:

Console logs and warnings
Network requests
Performance traces
DevTools state

The key idea is simple: Copilot can reason over real browser runtime data instead of relying only on static code.

The mental model

Chrome DevTools → MCP Server → VS Code Copilot

We’ll use the official DevTools demo site: Demo Site

This site is specifically designed for experimenting with Chrome DevTools features in a safe environment.

Setting up the Chrome DevTools MCP server

To set up the MCP server, visit the official repository:

Chrome Devtools MCP Official Repo

From there:

Choose your editor (VS Code in this case)
Install using the provided button or
Install manually using the listed command

Once installed, the MCP server will appear in your VS Code MCP list:

After that, simply start the MCP server.

Example 1: Performance analysis

Check the performance of https://chrome.dev/devtools-times/

Copilot responds with performance insights directly from DevTools, without any manual context sharing.

Example 2: Console analysis

Step 1: Open Chrome DevTools

Open https://chrome.dev/devtools-times
Open Chrome DevTools
Navigate to the Console tab

Step 2: Ask Copilot to analyse the Console

In VS Code Copilot Chat, ask:

Explain the issues visible of https://chrome.dev/devtools-times/ Chrome DevTools console

Copilot can now:

Read console output directly
Explain warnings or errors
Suggest possible causes or improvements

How I personally use this in my workflow

This is my preferred way to use Chrome DevTools MCP in real projects.
I let the app run, open Chrome DevTools, and allow all console warnings and errors to surface. Instead of fixing issues one by one, I ask Copilot to analyze everything together.

For example:
Analyze all console errors and warnings and suggest fixes
Copilot reviews the entire console output, explains what actually important, and proposes fixes. I don’t blindly apply them — I review, validate, and implement what makes sense.
This approach helps me clean noisy consoles quickly, catch issues I might otherwise ignore, and spend more time reviewing solutions instead of hunting problems.

Example 3: Seeing network issues without digging

Open the Network tab
Reload the page
Observe requests

Ask Copilot:

Analyze the network requests and point out anything inefficient or unusual

Copilot may highlight:

Duplicate requests
Timing issues
Payload size problems
Caching behavior

At this point, the advantage of working with a real runtime context becomes clear through the examples above.

What to keep in mind

This works best for browser-based debugging
It doesn’t replace understanding fundamentals, but it speeds up diagnosis
System design and architectural decisions still need human judgment
React Native debugging does not fully map to Chrome DevTools (yet)

Closing thought

Debugging is moving from searching to conversing.

Chrome DevTools MCP provides the context.
VS Code Copilot provides the solution.

Together, they make debugging and fixes faster.

Figma + VS Code using MCP server

Saloni Agrawal — Sun, 08 Feb 2026 13:31:27 +0000

I recently shared about MCP servers and how they help AI get better context from real systems.

Now, here’s one way I’ve actually seen them used in frontend workflows.

By connecting Figma and Visual Studio Code using MCP servers, you can select a Figma component, generate a structured prompt from its design context, and paste that prompt directly into VS Code Copilot.

Instead of screenshots or long explanations:

🔹 MCP reads the Figma component structure, spacing, tokens, and variants.
🔹 A prompt is generated from that context
🔹 Copilot uses it to generate UI code that’s much closer to the design

🎦 This tutorial shows the workflow clearly : Workflow Link

For frontend developers, this feels like a much more realistic way to use AI day to day — less guessing, more context. 🚀

What Are MCP Servers? (And Why They’re So Powerful)

Saloni Agrawal — Thu, 18 Dec 2025 10:11:27 +0000

In today’s AI-driven world, workflows still feel messy because all your tools live in separate environments. Your editor runs on its own, your APIs and database sit somewhere else, your local files stay isolated, and AI is usually trapped inside a single tool with no visibility into the rest. Hence, your AI assistant keeps asking you to paste the context again because it can’t access anything directly.

AI-powered MCP servers change that entire story.

Model Context Protocol (MCP) is a new open standard that allows your tools to talk to each other in a structured, permission-based way. Instead of sending screenshots, copying tokens, or rewriting the same notes for the AI, an MCP server lets AI pull exactly the data it needs… at the moment it needs it.

🧩 How MCP fits into the system

              ┌──────────┐
              │   MCP    │
              └────┬─────┘
                   │
        ┌──────────┴──────────┐
        │                     │
   ┌────┴────┐           ┌────┴────┐
   │ AI Chat │           │   Tool  │
   └─────────┘           └─────────┘

AI doesn’t need more prompts.

It needs more access. MCP delivers that.

What is an MCP Server? 🔌

In simple terms:

An MCP server is a bridge that exposes your tool’s data (Figma, VS Code, Git, APIs, databases, etc.) to an AI system in a safe, consistent, structured format.

It defines:

what resources the AI can access
what actions the AI can perform
what context it can read or write

Think of it as giving AI a properly documented, real-time API for your tools — finally bringing order to the chaos of vibe coding, where AI used to guess what you meant.

Why MCP Servers Are So Powerful ⚡

MCP isn’t a feature — it’s the missing infrastructure layer AI always needed.

1. AI finally gets structured, real context 🧠

No more:

dumping long prompts
pasting files manually
re-explaining design tokens or folder structures

MCP servers let AI pull:

project files
design metadata
APIs
local folders
documentation

This turns AI from a guessing partner into a reliable engineering collaborator.

2. Consistency across design, code, and documentation 🎯

MCP eliminates the classic “design said X, code shows Y” problem.

AI can retrieve:

spacing rules
color tokens
component structures
text styles
UI variants

Consistency becomes automatic instead of a constant back-and-forth.

3. AI workflows become automated, not manual ⚙️

With MCP, AI can:

generate React / React Native components directly from designs
update tokens across your codebase
validate accessibility
create full UI scaffolds
review PRs with actual project context

AI handles the repetitive work so developers can stay in their flow state.

4. Tool-agnostic and extendable 🧰

You can build MCP servers for:

Figma
VS Code
GitHub
SonarQube
Databases
REST APIs
CMS systems
Internal tools

MCP is a protocol, not a product. It adapts to whatever stack you already use.

5. A shared language between tools 🔗

Before MCP, every tool used its own formats and APIs.

Now they connect through:

standardized resource access
structured data
predictable commands

Your workflow becomes a connected ecosystem instead of scattered plugins and workarounds.

Before MCP vs After MCP 🔍

Before MCP	After MCP
AI guesses context	AI pulls context directly
Manual prompting	Structured access
Tool silos	Connected ecosystem
Repeated explanations	Single source of truth

What This Means for Teams 🚀

Sick of rewriting designs as code? MCP fixes that.
Tired of explaining your folder structure to AI? MCP fixes that.
Want AI to actually understand your project? MCP fixes that.
Scaling a design system across apps? MCP fixes that.

For the first time, AI becomes a real engineering layer, not a sidekick.

Final Thoughts ✨

AI-powered MCP servers are the foundation for the next generation of UI engineering. They reduce friction, eliminate repetitive tasks, and help teams build with clarity instead of chaos.

The future isn’t “AI replacing developers.”

It’s developers who use MCP replacing developers who don’t.

If you work with React, React Native, or large UI systems, adopting MCP early gives you a real edge.

Stop Making Boring UIs: Advanced React Native Animations with Reanimated

Saloni Agrawal — Tue, 09 Dec 2025 11:32:32 +0000

Modern apps rely on motion to guide attention, signal state changes, and make interactions feel naturally connected.

This part will deep dive into real-world patterns used inside popular mobile apps.

This includes:

Text transitions (single-word cycling, staggered lines)
Gesture animations (drag, swipe-to-dismiss)
Sequencing (delays, chained animations)
A combined onboarding example
Performance rules that actually matter

1. Text Animations in React Native

Text is one of the most expressive elements in any interface.
With animation, even a single line can set tone, build anticipation, or pace the user’s reading experience.

Seen commonly in:

Notion’s rotating value statements
Headspace and Calm onboarding
Airbnb’s welcoming slides
Slack’s product hero screens

Below are two foundational text animation patterns.

1.1 Cycling Words (Slide + Fade)

A rotating headline allows an app to communicate multiple ideas without overwhelming the layout.
Each word appears with a soft fade and lift, maintaining clarity and visual interest.

Used heavily by Notion, Slack, Duolingo, and similar modern apps.

const WordCycle = ({
  words = ["Design", "Build", "Ship"],
}) => {
  const [index, setIndex] = useState(0);
  const anim = useSharedValue(1);

  const cycle = () => {
    anim.value = withTiming(0, { duration: 180 }, () => {
      runOnJS(setIndex)((index + 1) % words.length);
      anim.value = withTiming(1, { duration: 350 });
    });
  };

  const style = useAnimatedStyle(() => ({
    opacity: anim.value,
    transform: [{ translateY: (1 - anim.value) * 10 }],
  }));

  return (
    <View style={{ alignItems: "center" }}>
      <Animated.Text style={[styles.word, style]}>
        {words[index]}
      </Animated.Text>

      <Pressable style={styles.triggerBtn} onPress={cycle}>
        <Text style={styles.triggerText}>Next Word</Text>
      </Pressable>
    </View>
  );
};

Why this matters

The fade-out → swap → fade-in sequence keeps the transition soft.
It mirrors how a narrator would switch topics: gracefully, not abruptly.

📝 A Quick Note on runOnJS

If you noticed runOnJS(setIndex) inside the word cycling animation and wondered why it's needed, here’s the simple reason:
Reanimated runs its animations on the UI thread, not the JavaScript thread.

But React state updates (like setIndex) only work in JavaScript.
Since you can’t call React state directly from a UI-thread worklet, runOnJS acts as the safe bridge.
anim.value = withTiming(0, { duration: 180 }, () => {
  runOnJS(setIndex)((index + 1) % words.length);
  anim.value = withTiming(1, { duration: 350 });
});

1.2 Staggered Multi-line Text

Staggered text reveals information line-by-line, establishing pacing.
This pattern is so effective that apps like Airbnb, Calm, and Spotify rely on it constantly.

Staggering creates a natural reading sequence — a simple but powerful storytelling device.

const StaggeredLine = ({ text, index }) => {
  const anim = useSharedValue(0);

  const reveal = () => {
    anim.value = withDelay(index * 120, withTiming(1, { duration: 350 }));
  };

  const style = useAnimatedStyle(() => ({
    opacity: anim.value,
    transform: [{ translateY: (1 - anim.value) * 10 }],
  }));

  return (
    <View>
      <Animated.Text style={[styles.staggerText, style]}>
        {text}
      </Animated.Text>

      {index === 0 && (
        <Pressable style={styles.triggerBtn} onPress={reveal}>
          <Text style={styles.triggerText}>Reveal Text</Text>
        </Pressable>
      )}
    </View>
  );
};

Why this works

Staggering creates hierarchy and guides attention intentionally — line → pause → line → pause.

This instantly gives your UI that “premium onboarding” feel.

2. Micro-Interaction: The CTA Button Animation

A button may look simple, but it’s one of the most emotionally sensitive elements in UI.
When it responds instantly and physically, users feel the interaction was registered.

This pattern appears in Instagram, YouTube, Cash App, and nearly every major product.

const AnimatedButton = () => {
  const scale = useSharedValue(1);

  const animate = () => {
    scale.value = withSequence(
      withTiming(0.9, { duration: 120 }),
      withSpring(1)
    );
  };

  const style = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Animated.View style={style}>
      <Pressable style={styles.cta} onPress={animate}>
        <Text style={styles.ctaText}>Get Started</Text>
      </Pressable>
    </Animated.View>
  );
};

Why this matters

The 0.9 scale gives the sense of a real button press
The spring back makes the button feel responsive and alive
This tactile micro-interaction creates trust and momentum

It’s not decorative — it’s feedback.

3. Bringing It All Together: A Complete Onboarding Screen

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <WordCycle words={["Design", "Build", "Ship"]} />

      <StaggeredText lines={["Welcome", "Let’s build something great"]} />

      <AnimatedButton />
    </SafeAreaView>
  );
}

This layout mirrors the emotional arc used in onboarding for Calm, Duolingo, Headspace, and other thoughtfully designed apps.

The headline shifts gently
The message unfolds with clarity
The button reacts with personality

This creates a beginning → middle → call-to-action story.

4. Performance Choices That Actually Matter

✔ Prefer transforms over layout changes

Transform animations (translate, scale, opacity) stay on the GPU.
Layout animations force recalculation, making them stutter on mid-range devices.

✔ Keep Android shadows subtle

Android recalculates shadows on every frame.
Heavy shadows cause jank during animations.

✔ Test on mid-range Android hardware

90% of animation bugs never show up on iPhones or flagship devices.

✔ Isolate animated components

Wrap animated elements in their own container so React doesn’t re-render unrelated UI.

✔ Use consistent timing

A cohesive animation system feels intentional rather than “random”.

These rules dramatically improve smoothness with minimal effort.

What to Explore Next

Once these foundational text and micro-interaction patterns feel familiar, the natural next step is motion driven by touch. Gesture-based animations form the backbone of many modern app experiences: swiping cards, pulling panels, sorting lists, revealing drawers, or dismissing notifications. They’re expressive, intuitive, and a big part of how mobile interfaces feel alive.

Exploring gestures opens the door to richer interactions such as:

drag-driven transitions
swipe-to-dismiss patterns
Tinder-style stacked cards
pull-to-reveal surfaces
scroll-linked effects

These patterns build on the same principles used in this guide; they simply add user input into the mix. Studying them provides a deeper understanding of how motion supports usability and emotion in mobile products.

Closing Thoughts

Motion isn’t a layer applied at the end of a design.
It’s part of how an app speaks.

Even small, subtle animations contribute to the feeling that an interface is thoughtful and alive. Mastering these foundations makes it easier to design onboarding flows, product moments, and micro-experiences that feel coherent and intentional.

Mastering UI Animations in React Native Using Reanimated — A Practical Guide

Saloni Agrawal — Mon, 24 Nov 2025 18:36:05 +0000

Animations are often treated as an optional enhancement in mobile apps. Many developers open a Figma file, inspect layout spacing, apply colors, build screens, and move on — without ever thinking about motion.

But animations are not decoration. They are communication. They guide attention, improve perceived performance, and make the UI feel natural. Without them, interfaces feel abrupt and lifeless.

There are multiple animation libraries in the React Native ecosystem — the built-in Animated API, Moti, LayoutAnimation, and Reanimated. Each works differently and serves different use cases, but in this guide, we’ll focus specifically on the Reanimated library.

Why Developers Should Care About Animations

Animations improve the UX in four major ways:

They explain UI changes

They reduce perceived waiting time

They make transitions smoother and more intuitive

They create a premium experience that keeps users engaged

Too much animation can slow down devices, especially low-end Android phones. Good animation is subtle, intentional, and efficient.

Why Reanimated?

Reanimated is preferred for modern animation work because it runs animations on the UI thread, not the JavaScript thread.

UI Thread vs JS Thread

┌──────────────────────────┐      ┌───────────────────────────┐
│      JavaScript Thread   │      │         UI Thread         │
│--------------------------│      │---------------------------│
│ Runs business logic      │      │ Draws UI elements         │
│ API calls                │      │ Handles layout & paint    │
│ React state updates      │      │ Runs Reanimated frames    │
│ Event handlers           │      │ 60fps rendering           │
└──────────────────────────┘      └───────────────────────────┘

If animations run here → ❌ can stutter (JS thread can get busy)

If animations run here → ✅ smooth, stable, 60fps

This separation between threads is the foundation of Reanimated’s performance model.

1. What an Animation Represents

An animation is simply a value changing over time:

opacity: 0 → 1
position: 20px → 0px
scale: 0.9 → 1

2. Shared Values (`useSharedValue` — Hook)

Shared values are the foundation of Reanimated.

import { useSharedValue } from 'react-native-reanimated';

const opacity = useSharedValue(0.5);

Shared values:

Live on the UI thread
Update at 60fps
Do NOT trigger React re-renders
Drive animations without JS slowdowns

They’re like animation‑friendly state variables.

3. Timing Animations (`withTiming` — Animation Function)

opacity.value = withTiming(1, { duration: 400 });

Meaning:

“Animate opacity from current value → 1 in 400ms.”

Used for:

fades
sliding transitions
smooth, predictable motion

4. Spring Animations (`withSpring` — Animation Function)

scale.value = withSpring(1, { damping: 8, stiffness: 100 });

This creates:

bounce
natural easing
gesture‑friendly interactions

Perfect for:

button presses
cards
playful UI

5. Animated Styles (`useAnimatedStyle` — Hook)

useAnimatedStyle takes your shared values and turns them into renderable UI styles that the native thread can animate smoothly.

const animatedStyle = useAnimatedStyle(() => ({
  opacity: opacity.value,
  transform: [
    { translateY: translateY.value },
    { scale: scale.value }
  ],
}));

Runs on the UI thread and updates without React re-renders.

Putting It All Together

Now that we understand each piece, here’s how they form a complete animation workflow.

Step 1: Create Shared Values

const opacity = useSharedValue(0);
const translateY = useSharedValue(20);
const scale = useSharedValue(0.9);

Step 2: Trigger Animations

useEffect(() => {
  opacity.value = withTiming(1, { duration: 400 });
  translateY.value = withTiming(0, { duration: 400 });
  scale.value = withSpring(1);
}, []);

Step 3: Create Animated Styles

const animatedStyle = useAnimatedStyle(() => ({
  opacity: opacity.value,
  transform: [
    { translateY: translateY.value },
    { scale: scale.value }
  ],
}));

Step 4: Apply to UI

<Animated.View style={animatedStyle}>
  <Text style={{ fontSize: 28, fontWeight: '600' }}>
    Design.
  </Text>
</Animated.View>

Animated.View is required for animated styles.

Working Example

Complete Code Example

import React, { useEffect } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
} from "react-native-reanimated";

export default function AnimatedWordCard() {
  // Shared values (animation state)
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(20);
  const scale = useSharedValue(0.9);

  // Trigger animation on mount
  useEffect(() => {
    opacity.value = withTiming(1, { duration: 400 });
    translateY.value = withTiming(0, { duration: 400 });
    scale.value = withSpring(1);
  }, []);

  // Animated styles (applied directly to UI)
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ translateY: translateY.value }, { scale: scale.value }],
  }));

  const handleOnPress = () => {
    // Reset animation values
    opacity.value = 0;
    translateY.value = 20;
    scale.value = 0.9;

    // Trigger animation again
    opacity.value = withTiming(1, { duration: 400 });
    translateY.value = withTiming(0, { duration: 400 });
    scale.value = withSpring(1);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#0D0D0D",
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: 20,
      }}
    >
      {/* Card Container */}
      <View
        style={{
          width: "90%",
          backgroundColor: "#1A1A1A",
          paddingVertical: 50,
          borderRadius: 24,
          alignItems: "center",
          borderColor: "#2A2A2A",
          borderWidth: 1,
        }}
      >
        <Animated.View style={animatedStyle}>
          <Text
            style={{
              fontSize: 42,
              fontWeight: "700",
              color: "white",
              letterSpacing: 1,
            }}
          >
            Design.
          </Text>
        </Animated.View>
      </View>

      {/* Button */}
      <TouchableOpacity
        style={{
          marginTop: 40,
          backgroundColor: "#4A6CF7",
          paddingVertical: 14,
          paddingHorizontal: 50,
          borderRadius: 30,
        }}
        onPress={handleOnPress}
        activeOpacity={0.8}
      >
        <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
          Get Started
        </Text>
      </TouchableOpacity>
    </View>
  );
}

Do’s and Don’ts for Smooth Animations

✅ Do:

animate small components
use opacity and transform for best performance
test UI on low-end Android devices
keep transitions subtle and intentional

❌ Don’t:

animate large layout containers
animate width/height/layout properties
trigger too many animations at once
use heavy shadows & blurs

Final Thoughts

This guide covered the core pieces of Reanimated — shared values, timing, springs, and animated styles — and how they work together on the UI thread to create smooth, modern UI motion.

If you want to go deeper, the next step is exploring text animations, gesture-driven UI, sequencing multiple transitions, and advanced performance techniques.

Stand out from an Average Developer

Saloni Agrawal — Wed, 10 Jul 2024 16:06:10 +0000

The insights mentioned are drawn from my experience working in a corporate environment and can help you excel and improve as a developer:

Be Curious: Curiosity fuels learning and innovation. Always seek to understand why things work the way they do and explore new ideas and technologies.
Understand Before Fixing: Take the time to fully understand the root cause of an issue before jumping into fixing it. Sometimes, the problem may not require a fix at all, or there might be a more efficient solution than initially apparent.
Encourage Reusability: Identify opportunities to refactor code into reusable methods, functions, or components. This reduces duplication, promotes consistency, and simplifies maintenance across the project.
Optimize Code: Minimize the number of loops and iterations in your code to improve performance and readability. Look for opportunities to use efficient data structures and algorithms to achieve the desired outcome with fewer iterations.
Optimize Memory Usage: Be mindful of memory usage in your code. Reduce the number of variables and allocate memory efficiently to optimize performance and resource utilization.
Keep Code Simple: Complex code is difficult to understand, maintain, and debug. Strive to keep your codebase simple, clear, and easy to follow, even if it means sacrificing some cleverness for readability.
Continuous Learning: Invest time in learning advanced skills and techniques relevant to the project you're working on. This enables you to deliver higher-quality solutions and stay competitive in your field.
Focus on Best Practices: Instead of settling for code that merely works, aim to write code that follows best practices and coding standards. This ensures maintainability, scalability, and reliability of your codebase over time.
Consider Impact on Common Areas: When making changes, consider how they might affect other parts of the codebase, especially common or shared components. This helps prevent unintended consequences and promotes code consistency.
Review with Requirements in Mind: When reviewing pull requests, ensure that the changes align with the project requirements and goals. This helps maintain consistency and clarity in the codebase.

By adhering to these principles, you not only become a more effective developer but also contribute to the overall quality and sustainability of the codebase.

Boost Productivity & Quality: Essential VS Code Extensions

Saloni Agrawal — Mon, 15 Apr 2024 20:53:53 +0000

Visual Studio Code is a highly popular and user-friendly code editor currently available in the market. If you’re focusing on frontend development using JavaScript frameworks, these extensions can greatly improve productivity and save your time.

In a sea of similar articles, what sets this one apart? Well, it's based on my personal developement experience. Colleagues often ask about the extensions I use, and this article shares insights from them. If you're looking for tried-and-tested extensions to enhance your coding experience, you've found them here.

Text Formatting and Readability

Prettier — Code formatter

This extension automatically formats your code to make it look neat and consistent. It’s like having a personal assistant for tidying up your code, which can save you a lot of time and effort. It can be configured according to the requirement of our project.

Color Highlight

This extension is such a underrated and useful tool specially for UI development. It highlights colors within your code editor, making it effortless to work with color codes and ensuring a polished visual presentation. In the screenshot below, the color #43feee is highlighted, reducing the chance of mistake.

indent-rainbow

It improves code readability by visualizing indentation levels with indent-colors. This extension adds subtle color variations to each level of indentation, making nested code structures easier to parse at a glance.

change-case

It provides intuitive shortcuts for converting between camelCase, CONSTANT_CASE, or snake_case, making case conversions seamless and effortless.

Code Spell Checker

It helps in catching spelling mistakes and typos in your code, ensuring cleaner and more readable code. It’s a useful tool for maintaining code quality and avoiding unintentional errors.

Code Quality and Improvement

ESLint

ESLint is a valuable tool for ensuring the quality of your JavaScript code. It scans your code for errors, style inconsistencies, and common mistakes, which helps you maintain cleaner and more reliable code. You can configure ESLint for your project by creating a custom set of rules in a configuration file.

For instance, if your project prohibits nested ternary expressions, ESLint will flag them in your editor. Similarly, if a variable like DDMMYYYY is not defined, ESLint will highlight it. You can even specify the severity level for each type of issue, allowing you to prioritize and address them accordingly. This proactive approach to code quality helps prevent bugs and maintain consistency throughout your project.

Error Lens

It is a VS Code extension that enhances error highlighting within the code editor. It provides immediate feedback on common errors and warnings, allowing developers to quickly address issues as they write code.

JS Refactoring Assistant

This is an essential tool for developers working with JavaScript, TypeScript, React, and Vue.js. It offers over 120 code actions to efficiently edit, modernize, and refactor code, making code maintenance and optimization easier.

SonarLint

It offers more comprehensive code analysis beyond simple linting. SonarLint not only detects coding issues but also provides deeper insights into code quality, security vulnerabilities, and potential performance bottlenecks.

It leverages rulesets based on industry best practices and can integrate with SonarQube or SonarCloud for centralized code quality management. This is highly recommended for larger projects.

Development Tools and Utilities

Console Ninja

It improves JS development workflows by displaying console.log output and runtime errors directly next to your code. This extension offers convenient access to debugging information, enhancing code comprehension and problem-solving.

Turbo Console Log

It accelerates the process of writing meaningful log messages. This extension automates the insertion of console.log statements, saving time and effort during debugging and troubleshooting tasks. This is one of the most frequent used extension in my list and often get asked about it a lot.

Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)
Pressing ctrl + alt + L(Windows) or ctrl + option + L(Mac)

The log message will be inserted in the next line relative to the selected variable.

GitLens

It is a must-have extension for developers who rely on Git for version control. With GitLens, you can easily visualize code authorship, navigate through Git repositories, and gain valuable insights into your project’s history and evolution.

One of the key features of GitLens is its ability to display detailed annotations, or “blame” information, directly inline with your code. This allows you to see who last modified each line of code, as well as when the change was made. By providing this level of visibility into code authorship, GitLens helps you understand the context behind each line of code and collaborate more effectively with your team.

Mintlify Doc Writer

It is an AI-powered documentation tool for VS Code. It offers smart suggestions and auto-completion for writing documentation in various programming languages.

With support for markdown formatting and seamless integration with VS Code, it helps developers create professional documentation effortlessly.

Import Cost

This extension will display the size of the imported package inline in the editor. The extension utilizes webpack in order to detect the imported size.

It helps in improving performance by identifying heavy libraries used in your project.

Language-specific Tools

Auto Close Tag

It automatically add HTML/XML closing tag when you type in the closing bracket of the opening tag. This time-saving feature reduces manual effort and streamlines coding, leading to faster and more efficient development.

Auto Rename Tag

It automatically rename the paired HTML/XML tag when we rename one tag. This small but useful feature saves time, making coding more efficient and enjoyable.

CSS Converter

It converts HTML CSS to JS CSS for styled components and vice-versa.

Select the CSS text you want convert
Enter Shift + Command + V (mac), Shift + Ctrl + V (windows/linux)

Testing and Test Coverage

Jest

It helps developers to run and debug Jest tests directly within the editor. With inline test results and intuitive navigation, it simplifies the testing workflow for JavaScript projects.

Coverage Gutters

It helps in displaying test coverage data generated by lcov or xml reports directly within your code editor and offers insights into code coverage, helping you assess the effectiveness of your test suites. It saves time by eliminating the need to switch to another window.

Bonus

WakaTime

It automatically tracks your coding time across different programming languages, providing valuable insights to optimize your productivity.

Auto Save VS Code Setting

A time-saving tip I’ve found useful is configuring Auto Save VS Code setting to onFocusChange. This means that whenever I switch to a different file or application, my changes are automatically saved. This eliminates the need to manually save files and risk losing any modifications. Additionally, for mobile or web applications, this setup allows me to see updated changes immediately when switching to the browser or simulator, speeding up the development process.

Final Words

These above mentioned tools significantly improve the development experience by automating tasks and simplifying workflows. They save developers considerable time and effort by providing features such as code formatting, error detection, and version control integration within code editor.

Unlocking Dynamic Features: GrowthBook’s Feature Flagging in React App

Saloni Agrawal — Mon, 02 Oct 2023 17:00:19 +0000

What is GrowthBook?

Growthbook is an open source library specially used for feature flagging and A/B Testing.

Here we are going to discuss how we can integrate it with React JS Application.

GrowthBook provides cloud hosted environment for quick start and we are going to use it in this example.

STEP 1 :

Let's create a feature flag in the GrowthBook App. Go to GrowthBook https://app.growthbook.io and just register yourself in the website.

Create a SDK Connection and generate your client key to integrate it in the App.

STEP 2 :

Let's integrate in the App:

Installation:

For npm :

npm install @growthbook/growthbook-react

For yarn:

yarn add @growthbook/growthbook-react

After successful installation, let's write some code:

In your App.js File , create a new GrowthBook instance with your host and generated API key. We have to wrap our app around GrowthBookProvider.
To load all the features created in your GrowthBook app, we can add loadFeatures method from growthBook object.
This will handle network request with the given host and key and initialize the SDK.

import { useEffect } from "react";
import { Header } from "./Header";
import "./styles.css";
import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react";

const gb = new GrowthBook({
  apiHost: "https://cdn.growthbook.io",
  clientKey: "key-123"
});

export default function App() {
  useEffect(() => {
    gb.loadFeatures();
  }, []);

  return (
    <GrowthBookProvider growthbook={gb}>
      <div className="App">
        <Header />
      </div>
    </GrowthBookProvider>
  );
}

Make sure you will replace your clientKey here.

STEP 3 :

We can create the flag in features tab in GrowthBook App as shown in the snapshot.

Let's start using feature flagging:

Go to your Header.js file :

import { useFeatureIsOn } from "@growthbook/growthbook-react";

export function Header() {

  // Boolean on/off features
  const enabled = useFeatureIsOn("show-header");

  if (enabled) {
    return <div>This is the Header</div>;
  } else {
    return <div>This is a different Header</div>;
  }
}

You can see the visible Header:

And you are good to go!! Link to this project

Integration using Fetch API:

If you pass an apiHost and clientKey into the GrowthBook constructor, it will handle the network requests, caching, retry logic, etc. for you automatically but if you want to handle them on your own you can do it by simply writing a fetch API call.
This can be used if you are hosting on your own and need to pass additional headers including token through the App.

Let's see the implementation here:

import { useEffect } from "react";
import { Header } from "./Header";
import "./styles.css";
import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react";

const gb = new GrowthBook({
  attributes: {
    country: "Spain"
  }
});

const API_ENDPOINT =
  process.env.REACT_APP_GROWTH_BOOK_API_HOST +
  "api/features/" +
  process.env.REACT_APP_GROWTH_BOOK_KEY;

const getFeatures = () => {
  fetch(API_ENDPOINT)
    .then((response) => response.json())
    .then((data) => {
      gb.setFeatures(data.features);
    })
    .catch((err) => console.error(err));
};

export default function App() {
  useEffect(() => {
    getFeatures();
  }, []);

  return (
    <GrowthBookProvider growthbook={gb}>
      <div className="App">
        <Header />
      </div>
    </GrowthBookProvider>
  );
}

This will handle your network request in the same way, make sure that you append api/features/ to the host URL.
It's always a good practice to keep all the url and keys in the .env file. Sample Project Link

Setup Rules over Feature Flags:

We can also add condition to our flags. In the growthbook app, go to Override Rules and add force rule according to your condition. Here I have added a condition that specifies the header should only be displayed if the country is Spain.

Attributes can be configured at the default level.

const gb = new GrowthBook({
  attributes: {
    country: "Spain"
  }
});

If attributes change, you can call setAttributes() to update. This will completely overwrite any existing attributes.

 useEffect(() => {
    gb.setAttributes({
      country: user.country
    });
  }, [user.country])

Final Words:

We have explored how the basic implementation of Growthbook works in integration with React. Now we can go ahead and implement it.

Read more about it here DOCS
Also, try to work around A/B Testing
Sample Project link using default load features method Project Link
Sample project using fetch API call Project Link

Forem: Saloni Agrawal

I Tried Windsurf — An AI Native Coding Environment

What Windsurf Actually Is

1️⃣ Request Queueing (This Is Genuinely Useful)

2️⃣ Cascade Memory (Persistent Agent Context)

3️⃣ Fast Context (Important for Large Projects)

4️⃣ Arena (Strongest Differentiator)

5️⃣ Worktrees (Execution Isolation)

Windsurf vs VS Code + Copilot

So Is It Worth Switching?

If you’ve used Windsurf, I’m curious:

Debugging with AI: Chrome DevTools MCP + Copilot

What is Chrome DevTools MCP

The mental model

Setting up the Chrome DevTools MCP server

Example 1: Performance analysis

Example 2: Console analysis

How I personally use this in my workflow

Example 3: Seeing network issues without digging

What to keep in mind

Closing thought

Figma + VS Code using MCP server

What Are MCP Servers? (And Why They’re So Powerful)

What is an MCP Server? 🔌

Why MCP Servers Are So Powerful ⚡

1. AI finally gets structured, real context 🧠

2. Consistency across design, code, and documentation 🎯

3. AI workflows become automated, not manual ⚙️

4. Tool-agnostic and extendable 🧰

5. A shared language between tools 🔗

Before MCP vs After MCP 🔍

What This Means for Teams 🚀

Final Thoughts ✨

Stop Making Boring UIs: Advanced React Native Animations with Reanimated

1. Text Animations in React Native

1.1 Cycling Words (Slide + Fade)

📝 A Quick Note on runOnJS

1.2 Staggered Multi-line Text

Why this works

2. Micro-Interaction: The CTA Button Animation

Why this matters

3. Bringing It All Together: A Complete Onboarding Screen

4. Performance Choices That Actually Matter

What to Explore Next

Closing Thoughts

Mastering UI Animations in React Native Using Reanimated — A Practical Guide

Why Developers Should Care About Animations

Why Reanimated?

UI Thread vs JS Thread

1. What an Animation Represents

2. Shared Values (useSharedValue — Hook)

3. Timing Animations (withTiming — Animation Function)

4. Spring Animations (withSpring — Animation Function)

5. Animated Styles (useAnimatedStyle — Hook)

Putting It All Together

Step 1: Create Shared Values

Step 2: Trigger Animations

Step 3: Create Animated Styles

Step 4: Apply to UI

Working Example

Complete Code Example

Do’s and Don’ts for Smooth Animations

✅ Do:

❌ Don’t:

Final Thoughts

Stand out from an Average Developer

Boost Productivity & Quality: Essential VS Code Extensions

Text Formatting and Readability

Code Quality and Improvement

Development Tools and Utilities

Language-specific Tools

Testing and Test Coverage

Bonus

Auto Save VS Code Setting

Final Words

Unlocking Dynamic Features: GrowthBook’s Feature Flagging in React App

What is GrowthBook?

STEP 1 :

STEP 2 :

Installation:

📝 A Quick Note on `runOnJS`

2. Shared Values (`useSharedValue` — Hook)

3. Timing Animations (`withTiming` — Animation Function)

4. Spring Animations (`withSpring` — Animation Function)

5. Animated Styles (`useAnimatedStyle` — Hook)