DEV Community: Harshal Ranjhani

Taillens: A Tailwind Extension for Real-Time CSS Editing

Harshal Ranjhani — Tue, 18 Nov 2025 07:39:08 +0000

Why I'm sharing this

I work with Tailwind CSS regularly, and one thing I've noticed is how much time I spend switching between my code editor and the browser. I'll change a class, save, refresh, check the result, then go back and adjust again. It's a cycle that adds up, especially when you're fine-tuning spacing or experimenting with layout options.

A few weeks ago I found the taillens extension and decided to give it a try. After using it on a few projects, I wanted to share what it does, how it works, and where it might actually save you some time.

What the taillens extension does

Taillens is a browser tool that works with Chrome, Firefox, Edge, and Brave. It lets you inspect and edit Tailwind CSS classes directly in the browser, with live visual feedback. Instead of editing classes in your code editor and refreshing to see changes, you can hover over class alternatives in the browser and watch the layout update in real time.

It supports both Tailwind CSS v3 and v4, and it recognizes custom configurations. If your project has a custom tailwind.config.js with specific theme values, breakpoints, or utility classes, the extension picks those up and includes them in its suggestions.

You're not replacing your editor, but you're adding another layer of visual feedback that can speed up iteration.

Features that stood out

Here's what I found useful after spending time with the taillens extension:

Live preview on hover

This is probably the most practical feature. When you inspect an element, the extension shows you alternative Tailwind classes. If you have gap-4 applied, it will suggest gap-2, gap-6, gap-8, and so on. When you hover over any alternative, the layout updates instantly in the browser. No saving, no refreshing. You see the change immediately.

This works well when you're dialing in spacing or trying to decide between different size values. Instead of guessing and checking multiple times, you can hover through the options and pick what looks right.

Spacing and layout guides

The extension includes real-time overlays that visualize margin, padding, height, and position values. When you're inspecting an element, you can see exactly how much space it's taking up and how it relates to neighboring elements.

This helps when you're debugging layout issues or trying to understand why elements are positioned a certain way. You don't have to open DevTools and inspect each element individually. The overlay shows you the information right away.

Smart class suggestions

The extension provides autocomplete and intelligent suggestions based on the classes you already have applied. If you're working with a flex container, it will suggest flex-related utilities. If you're adjusting colors, it will show color variants.

It also includes a search function that works across all available Tailwind classes, including any custom utilities you've defined in your config. This is helpful when you can't quite remember the exact class name but know roughly what you're looking for.

One-click class copying

After you've tweaked classes in the browser and found something that works, you can copy all applied classes with one click. Then you paste them into your source code. This removes the friction of manually retyping or remembering what changes you made.

Toggle and undo support

You can toggle classes on and off to test different combinations. There's also undo and redo support with keyboard shortcuts, so if you make a change you don't like, you can step back without losing your place.

The extension also lets you pin popups to inspect multiple components at the same time, and you can navigate nested elements using arrow keys. These are small details, but they add up when you're working through a complex layout.

Custom Configuration support

One of the standout features is how well the extension handles custom Tailwind configurations. If your project has a tailwind.config.js with custom colors, spacing values, or breakpoints, the extension picks those up automatically.

This means that when you're inspecting elements, the class suggestions and live previews reflect your actual design system. You don't have to worry about the extension only showing default Tailwind classes that don't match your project's styles.

When this tool makes sense

The taillens extension is most useful if:

You frequently iterate on layouts and spacing in the browser
You work with custom Tailwind configurations and want tooling that respects those settings
You want faster visual feedback when experimenting with utility classes
You're comfortable with a workflow where you prototype in the browser and then sync changes back to your codebase

If your process is more code-first and you rarely adjust things visually in the browser, the benefit might be less obvious. But if you're someone who clicks around in DevTools and manually edits classes to see what works, this tool streamlines that process.

Pricing structure

The taillens extension is available for a one-time payment of $29 (currently discounted from $59). It's a lifetime license with no recurring subscription. You get unlimited device usage, free updates, and priority email support.

I'm not a fan of subscriptions anyway, and one of the things I really appreciate about this tool is that it's a one-time purchase. You pay once and you're done. No monthly fees, no annual renewals, just a straightforward transaction.

There's also a 14-day refund policy if you try it and decide it's not for you. For developers who use Tailwind regularly, the one-time cost might be worth it compared to subscription-based tools.

If you decide to try it, you can get Taillens here. Full transparency: I'd benefit from referrals through that link, and I'd appreciate the support if you find this review helpful.

Final thoughts

The taillens extension is a practical tool for developers who work with Tailwind CSS and want a tighter feedback loop when adjusting layouts and classes. It does not replace your code editor or eliminate the need for proper version control, but it makes certain tasks faster and less repetitive.

If you spend a lot of time tweaking Tailwind classes and refreshing your browser to check results, this tool can cut down on that friction. The live preview, spacing guides, and class suggestions all contribute to a smoother iteration process.

I'd recommend trying it on a component you're actively working on. Test the hover preview, experiment with class alternatives, and see if the workflow fits. If it saves you time on that one component, it will probably save you time on future projects too.

moodlog: building a mood tracker with iot simulation

Harshal Ranjhani — Sat, 12 Jul 2025 16:31:24 +0000

What I Built

moodLog is a React Native app that tracks your mood using data from a simulated smart ring. The app gets real-time data like temperature and humidity through the DHT22 sensor attached to an ESP32. The data is then sent to a WebSocket server where we ise the openai API to figure out what the mood will be and the app displays it in near real time. It also gives you some song suggestions based on your mood patterns which are pulled from Spotify.

The Idea Behind It

This was for my Wearable Computing class at VIT. Honestly, I was just curious about how those fitness trackers work and thought it would be cool to build something similar but for emotions. And since it was a wearable project, a ring with all these concepts sounded like a cool idea.

The idea came to me when I saw my peers and a few other people constantly complaining about their mood and how they feel at random parts of the day. I thought, there might be a way to track this right?

Disclaimer: Although you might assume that this project will store the data and give insights, but this time I am not storing the data in any database. It's all on the fly, the data is generated, is analyzed via the OpenAI API and instantly sent to all clients on the websocket. It was a 3 credit course lol.

Tech Stack & Architecture

Technologies Used

Frontend: React Native with Expo - I chose this because it's easy to test and I could share the app using just a QR code.
Backend: Node.js with WebSocket support - needed this for real-time data streaming, pretty straightforward.
IoT Simulation: Wokwi Simulator - we didn't have actual hardware, so had to simulate a smart ring.
OpenAI: Used the OpenAI API to analyze the data and give a mood prediction.
Spotify API: Used the Spotify API to get song suggestions based on the mood.

System Architecture

The flow is pretty simple: the fake ring sends sensor data to a server, the server analyzes the data using the OpenAI API (this causes a bit of delay to show the outputs in the app), the server then sends the prediction to all the clients connected to the websocket (which is our react native app). The app then displays the prediction in near-real time.

Technical Decisions & Implementation

Getting real-time data working

Setting up the WebSocket connection was something I was really excited about. I wanted the app to feel alive, like it's actually connected to a real device sending data every second. There's something satisfying about seeing numbers change in real-time on your phone screen.

I built a simple WebSocket server that takes data from Wokwi and pushes it to the React Native app. But man, dealing with connection drops and data loss was way more annoying than I thought it would be. Spent a lot of time debugging why the connection would just randomly fail.

Then, another headache was where to deploy the websocket, since Vercel wasn't working with Websockets at least for me. Ended up using Koyeb. It was an amazing experience, both, my hardware and the app could talk to an actual deployed backend and i did not have to run anything locally for my demo. Felt proud.

You can check out Koyeb btw, its pretty neat, they only give you one instance for free, but it was enough for my use case.

Why I went with React Native and Expo

I picked React Native because I already had some experience with React from other projects. Plus, Expo made my life so much easier - I could test the app instantly.

I used my deployed backend to connect to the websocket as soon as the app was opened, then I kept the connection alive. This meant whatever data was pushed to the socket kept updating in the app and it felt like a real-time connection.

Here I also used the spotify API to get some songs based on the mood that was predicted. Spotify has a nice api where you can specify specific genres and it gives you songs based on that. I got the genres using the OpenAi API again along with the mood data in the same websocket request. It was nice.

I somehow made the app UI, if you know me I'm not very good with frontend lol. But it was fun. I've attached some slides at the end, you can check out the app UI there.

Simulating the Smart Ring

Since we didn't have budget for actual hardware (and building a real smart ring would probably take the entire semester), I had to get creative with Wokwi.

if you don't know, Wokwi is like TinkerCAD but it gave me access to ESP32 which TinkerCAD doesn't have (at least at that time it didn't). The reason I used ESP32 is because it has an inbuilt Wi-Fi module and well, we wanted to communicate via the internet so :)

I set up temperature and humidity sensors in the simulator and programmed it to send data over WiFi to the deployed backend. For the demo, I was manually changing the values on the simulator and it was showing up on the app perfectly. It felt like working with real hardware, which made the whole project more engaging.

Reflections

This project taught me a lot about working with real-time data. The WebSocket part was harder than I expected - handling disconnections and making sure data doesn't get lost required a lot of debugging.

The AI part was the most challenging. Trying to connect body temperature to emotions? That's not easy. I realized I needed way more data and probably some machine learning knowledge to make it work properly.

If I were to do this again, I'd focus more on the data collection part. Maybe add heart rate or sleep data to make the predictions more meaningful. Also, the UI could be prettier - I was more focused on getting the tech to work.

Working with my teammates was fun. We split the work pretty well - I handled the app and server, while they worked on the presentation and business model stuff.

Check It Out

Live Demo: You can try it with Expo Go app (there's a QR code in our presentation although I'm not sure if it's still working)
Wokwi: Wokwi Project
Slides: Slides

I also created a small landing page for the same here.

Lovable AI: Build Apps Without Coding - A Simple Guide

Harshal Ranjhani — Thu, 10 Apr 2025 06:35:34 +0000

In today's world of AI and vibe coding, even non-coders are taking up the challenge of building their own apps. It used to be that you needed to know complex programming languages to create anything useful. But now, things are changing fast. New tools are popping up that let you describe your app idea in simple words, and AI helps turn it into reality. This makes creating apps much more approachable and easy. One such tool is Lovable.AI which helps you create apps from text even without any prior knowledege of how to code.

What is Lovable AI?

Lovable AI is a platform that turns your ideas into actual web applications. You simply tell it what kind of app you want, and it builds it for you - no coding needed!

According to TechCrunch, Lovable recently raised $15 million after showing amazing growth. Why? Because it makes app building possible for everyone.

Here's why you'll love lovable:

Quick App Creation: Just tell Lovable what you want in your own words. It understands your description and quickly builds the first version of your app, often in just seconds. Building for the web becomes much faster.
Easy Improvements: Need to change something? Simply ask Lovable using text prompts. You can ask it to add features, change the design, or fix things without digging into code.
Simple Sharing: Once your app looks good, you can publish it instantly with just one click. Lovable makes it easy to share your creation with others.
GitHub Connection: You own all the code Lovable creates. You can connect your Lovable project to GitHub to automatically sync the code. This is great if you want to edit the code yourself or work with other developers.

Getting Started with Lovable AI

Let's build a simple task manager app together. I'll walk you through each step:

Step 1: Create Your Account

First, visit Lovable.dev and click the "Sign Up" button. After making your account, you'll see something like this:

You'll see all you previous projects (you probably won't see anything there if you're starting out for the first time) and a big text field to get started with.

Step 2: Start Your First Project

In the text box, describe the app you want to build. Let's try this:

Create a task manager app where users can add, edit, and delete tasks. 
Tasks should have a title, description, and due date. 
Make it look clean and simple with a light blue theme.

Click submit and watch as Lovable creates your app!

Here's a quick timelapse of how it went for me:

Here's how my final app works and looks like:

Pretty cool right? As you can see I did not even write a single line of code and my app automatically handles all the edge cases like past dates, dues, toasts etc. How cool is that?

Step 3: Customize Your App

Now this the first version of your app. But let's make it better! Try these improvements:

Click on Edit below the lovable textbox and then click any part of the app to select it
Use the editor to change colors, text, or layout
Add new features through the chat box

For example, let's add a priority feature to our tasks:

Add a priority field to tasks with options for High, Medium, and Low priority. 
Show high priority tasks in red.

Here's how we'll do it:

Step 4: Preview and Test

Click the "Preview" button to see how your app works. Test it by:

Adding some sample tasks
Editing a task
Deleting a task
Checking how priority colors work

This is how my customzied app looked like:

Step 5: Deploy Your App

When you're happy with your app, click "Deploy" to make it live on the internet. Lovable gives you a link you can share with anyone!

Advanced Features

Using the Knowledge Base

The Knowledge Base helps Lovable understand your project better:

Click the + icon below the lovable text input
Select "Knowledge"
Add details about what your app should do

For example:

This task manager is for students to track homework assignments.
Users should be able to sort by due date or by subject.
The app should send notifications one day before a task is due.

Adding Images

Make your app look better with images:

Prepare the images you want to use
Upload them when creating or editing your app
Tell Lovable where to place them

Connecting to GitHub

For those who know some coding, you can connect your project to GitHub:

Set up GitHub integration in your project settings, once you're synced you'll see an option like this:

After transferring, voila! a repository in my account was automatically created:

Make changes directly in GitHub if needed
Push changes back to Lovable

Try It Yourself!

Now that you know the basics, why not try building your own app? Start with something simple like:

A personal blog
A recipe collection
A photo gallery
A workout tracker

Remember, the key is to clearly describe what you want. The more details you provide, the better your app will be!

Conclusion

So, that's Lovable AI! It's a really cool tool that lets anyone build their own web apps without needing to write any code. You just explain your idea, and Lovable builds it quickly. You can easily make changes, add features, and even connect it to GitHub if you want more control.

If you have an app idea, give Lovable a try! It's a fun and fast way to bring your ideas to life. You can start building right away and see how easy it can be.

Whether you're a founder, designer, or just curious, Lovable AI opens up new possibilities. Imagine creating prototypes or even full products faster than ever before, letting you focus more on your ideas.

Here are some links if you want to learn more:

Try Lovable: lovable.dev
Lovable Docs: Find guides and info about this on the Lovable website
More Info: Read the TechCrunch article about their funding.

Happy Coding!

Next.js vs Nest.js: Understanding the Difference

Harshal Ranjhani — Fri, 28 Mar 2025 04:55:05 +0000

Have you ever been confused about the Next.js vs Nest.js comparison? Despite their similar names, these popular JavaScript frameworks serve very different purposes. Let's break down what each one does and when you might want to use them.

What is Next.js?

Next.js is a React framework made for building full-stack web applications. Created by Vercel, Next.js has become super popular with developers for building everything from user interfaces to complete web applications.

Next.js handles a lot of the complicated setup work so you can focus on building your website. It offers features like:

Two routing systems: the modern App Router and the classic Pages Router
Server Components and Client Components for flexible rendering
Automatic route handling based on your file system
Data fetching with async/await and expanded fetch API
Built-in CSS and Sass support
API routes and Server Actions for backend functionality
Image, font, and script optimization
Fast refresh for instant feedback while coding

Next.js is now on version 15 and has a huge community with over 126,000 stars on GitHub.

The App Router vs Pages Router

Next.js now offers two different routing systems:

App Router - The newer system that enables React's latest features like Server Components and Streaming. It uses a file-based system in the /app directory.
Pages Router - The original Next.js router in the /pages directory that continues to be supported for existing applications.

When Would You Use Next.js?

Next.js shines when building:

Full-stack web applications
Content-heavy websites like blogs or news sites
E-commerce platforms
Marketing websites
Dashboards and admin panels
Any site where SEO and performance matter

A Simple Next.js Example with App Router

Here's what a basic page component looks like in Next.js with the App Router:

// app/page.jsx
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to my website!</h1>
      <p>This is built with Next.js App Router</p>
    </main>
  )
}

And here's a layout to wrap around your pages:

// app/layout.jsx
export const metadata = {
  title: 'My Next.js Website',
  description: 'Built with Next.js App Router',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Creating a new route is as simple as adding a new folder with a page.js file in the app directory. Next.js handles all the routing automatically.

What is Nest.js?

Now let's talk about Nest.js - a completely different framework that focuses on building server-side applications. It's built with TypeScript and heavily inspired by Angular's architecture.

Nest.js provides a structured way to build backend services like APIs and microservices. It uses modern JavaScript features and design patterns that make your code organized and maintainable.

Key features of Nest.js include:

Progressive Node.js framework for building efficient and scalable server-side applications
Dependency injection system for better code organization and testability
Module-based architecture to organize components and reuse code
Built-in support for TypeScript with strong typing
Decorators for defining routes, controllers, services, and more
Support for multiple databases through ORM integrations (TypeORM, Mongoose, Prisma, etc.)
Multiple transport layers (HTTP, WebSockets, gRPC, GraphQL, and microservices)
Comprehensive testing utilities
Detailed documentation and active community
CLI tools for rapid development and project scaffolding

Nest.js has over 60,000 stars on GitHub and is widely used for building robust backend applications in enterprise environments.

When Would You Use Nest.js?

Nest.js is great for:

REST APIs with complex business logic
GraphQL APIs with TypeScript type safety
Microservices architectures
Real-time applications with WebSockets
Enterprise-level backend applications
Projects requiring clear, organized structure
Teams transitioning from Angular to full-stack development

A Simple Nest.js Example

Here's what a complete module setup looks like in Nest.js:

// app.module.ts
import { Module } from '@nestjs/common';
import { CatsController } from './cats/cats.controller';
import { CatsService } from './cats/cats.service';

@Module({
  controllers: [CatsController],
  providers: [CatsService],
})
export class AppModule {}

// cats/cats.service.ts
import { Injectable } from '@nestjs/common';
import { Cat } from './interfaces/cat.interface';

@Injectable()
export class CatsService {
  private readonly cats: Cat[] = [];

  create(cat: Cat) {
    this.cats.push(cat);
  }

  findAll(): Cat[] {
    return this.cats;
  }
}

// cats/cats.controller.ts
import { Controller, Get, Post, Body } from '@nestjs/common';
import { CatsService } from './cats.service';
import { CreateCatDto } from './dto/create-cat.dto';
import { Cat } from './interfaces/cat.interface';

@Controller('cats')
export class CatsController {
  constructor(private catsService: CatsService) {}

  @Post()
  async create(@Body() createCatDto: CreateCatDto) {
    this.catsService.create(createCatDto);
  }

  @Get()
  async findAll(): Promise<Cat[]> {
    return this.catsService.findAll();
  }
}

// cats/dto/create-cat.dto.ts
export class CreateCatDto {
  name: string;
  age: number;
  breed: string;
}

// cats/interfaces/cat.interface.ts
export interface Cat {
  name: string;
  age: number;
  breed: string;
}

This structure shows how Nest.js encourages organizing your code with clear separation of concerns, making it easy to maintain and scale as your application grows.

Nest.js Performance Features

Platform-agnostic architecture allowing deployment across different environments
Support for microservices with multiple transport layers (Redis, MQTT, NATS, RabbitMQ, etc.)
Easy horizontal scaling with built-in load balancing capabilities
Efficient request handling with middleware pipeline
Lazy-loaded modules for optimized application loading
Just-in-time compilation to optimize runtime performance
Support for GraphQL subscriptions and federation
Caching mechanisms to improve response times
Optimized for serverless environments

Next.js vs Nest.js: The Main Differences

Now that we understand what each framework does, let's look at their key differences:

1. Purpose

Next.js: Full-stack React framework for building web applications with both frontend and backend capabilities
Nest.js: Backend framework for building server-side applications

2. Technology Foundation

Next.js: Built on React with both Server and Client Components
Nest.js: Built with TypeScript, inspired by Angular

3. Learning Curve

Next.js: Easier to learn if you already know React
Nest.js: Steeper learning curve due to TypeScript requirements and architectural patterns

4. Structure

Next.js: File-system based routing with flexible structure
Nest.js: Highly structured with modules, controllers, and services

Can They Work Together?

Yes! Many modern web applications use Next.js for the frontend and Nest.js for the backend. This combination gives you the best of both worlds - a powerful backend architecture with Nest.js and a smooth frontend experience with Next.js.

Example: Frontend and Backend Communication

Next.js (Frontend with App Router):

// app/users/page.jsx
import { useState } from 'react'

// This is a Client Component, so we need to mark it as such
'use client'

export default function UsersPage() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)

  const fetchUsers = async () => {
    setLoading(true)
    try {
      const response = await fetch('http://localhost:3001/users')
      const data = await response.json()
      setUsers(data)
    } catch (error) {
      console.error('Error fetching users:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      <h1>Users</h1>
      <button onClick={fetchUsers}>Load Users</button>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

Nest.js (Backend):

// users.controller.ts
import { Controller, Get } from '@nestjs/common';
import { UsersService } from './users.service';

@Controller('users')
export class UsersController {
  constructor(private usersService: UsersService) {}

  @Get()
  findAll() {
    return this.usersService.findAll();
  }
}

Performance and Scalability

When evaluating Next.js vs Nest.js performance capabilities, it's important to note that both frameworks are designed to handle high-traffic applications, but they optimize for different aspects:

Next.js Performance Features

Server Components and Client Components for optimal rendering strategy
Automatic code splitting
Server-side rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR)
Partial Prerendering (PPR) for combining static and dynamic content
Image, font, and script optimization
Edge and Node.js runtimes

Nest.js Performance Features

Modular architecture for better code organization as projects grow
Support for microservices architecture
Easy horizontal scaling
Efficient request handling

Making Your Choice: Next.js or Nest.js?

The decision between Next.js and Nest.js really comes down to what you're trying to build:

Choose Next.js if:

You're building a full-stack web application with React
You need good SEO and performance
You want quick setup and deployment
You're already comfortable with React
You need flexible rendering strategies (Server and Client Components)
You want to use the latest React features

Choose Nest.js if:

You're building a backend API or service
You need a highly structured, scalable backend
You value TypeScript and strong typing
You're building microservices
You want clear architecture for a large team

Or use both together for a full-stack JavaScript application with the best tools for both frontend and backend.

Conclusion

Next.js and Nest.js may sound similar, but they serve very different purposes in the web development world. Next.js helps you build complete web applications with React, while Nest.js provides structure and patterns for robust backend applications.

Understanding the strengths of each framework will help you make better decisions about which tool to use for your next project. And remember, they're not competitors - they're complementary tools that can work together to create powerful web applications.

Read more about Next.js here and Nest.js here.

Beyond If-Else: JavaScript's Ternary Operator Explained

Harshal Ranjhani — Sun, 23 Mar 2025 08:29:26 +0000

If you've been coding in JavaScript for a while, you've probably come across situations where you needed to choose between two values based on a condition. The typical way to handle this is using an if-else statement. But what if I told you there's a more concise way to do this? Enter the ternary operator.

The ternary operator (also known as the conditional operator) is one of those little JavaScript features that can make your code cleaner and more readable when used correctly. In this blog post, we'll take a deep dive into what the ternary operator is, how it works, and when you should (and shouldn't) use it.

What is the Ternary Operator?

The ternary operator is a conditional operator that takes three operands:

A condition
A result for when the condition is true
A result for when the condition is false

It's called "ternary" because it uses three operands, unlike most operators which use one or two.

Here's the basic syntax:

condition ? expressionIfTrue : expressionIfFalse

The operator evaluates the condition and returns one of the two expressions based on whether the condition is truthy or falsy.

How the Ternary Operator Works

Let's look at a simple example:

const age = 20;
const canVote = age >= 18 ? "Yes, can vote" : "No, cannot vote";
console.log(canVote); // Output: "Yes, can vote"

In this example:

We check if age is greater than or equal to 18
If it is, we return "Yes, can vote"
If it's not, we return "No, cannot vote"

The value returned by the ternary operator is then assigned to the canVote variable.

Truthy and Falsy Values in JavaScript

Before we dive deeper, it's important to understand what "truthy" and "falsy" mean in JavaScript, as the ternary operator evaluates conditions based on these concepts.

In JavaScript, any value can be used in a condition. Values that evaluate to false are considered "falsy", and values that evaluate to true are considered "truthy".

Falsy Values:

false
0
"" (empty string)
null
undefined
NaN

Truthy Values:

Everything else! Some examples:
- true
- Non-zero numbers (positive or negative)
- Non-empty strings
- Arrays (even empty ones)
- Objects (even empty ones)
- Functions

Let's see this in action with the ternary operator:

const emptyString = "";
const result = emptyString ? "String has content" : "String is empty";
console.log(result); // Output: "String is empty"

const nonEmptyArray = [1, 2, 3];
const arrayResult = nonEmptyArray ? "Array exists" : "Array doesn't exist";
console.log(arrayResult); // Output: "Array exists"

Ternary Operator vs If-Else Statement

The ternary operator is essentially a shorthand for an if-else statement. Let's compare the two:

Using If-Else:

let message;
if (isLoggedIn) {
  message = "Welcome back!";
} else {
  message = "Please log in";
}

Using Ternary Operator:

const message = isLoggedIn ? "Welcome back!" : "Please log in";

As you can see, the ternary operator allows us to accomplish the same thing with much less code.

When to Use the Ternary Operator

The ternary operator shines in situations where:

You need to choose between two values based on a condition
You want to assign a value conditionally
You need to return different values based on a condition
You want to keep your code concise

Let's look at some common use cases.

Assigning Values Conditionally

// Without ternary
let discount;
if (isPremiumUser) {
  discount = 0.2; // 20% discount
} else {
  discount = 0.05; // 5% discount
}

// With ternary
const discount = isPremiumUser ? 0.2 : 0.05;

Returning Values in Functions

// Without ternary
function getGreeting(name) {
  if (name) {
    return `Hello, ${name}!`;
  } else {
    return "Hello, guest!";
  }
}

// With ternary
function getGreeting(name) {
  return name ? `Hello, ${name}!` : "Hello, guest!";
}

Conditional Rendering in React

If you work with React, you've probably used the ternary operator for conditional rendering:

return (
  <div>
    {isLoading 
      ? <LoadingSpinner /> 
      : <UserData data={userData} />
    }
  </div>
);

Chaining Ternary Operators

You can also chain ternary operators to handle multiple conditions, similar to an if-else if-else statement. However, this can make your code harder to read if overused.

// Multiple conditions with ternary operators
const getAge = age => {
  return age < 13 ? "Child" 
       : age < 18 ? "Teenager"
       : age < 65 ? "Adult"
       : "Senior";
};

console.log(getAge(10)); // "Child"
console.log(getAge(15)); // "Teenager"
console.log(getAge(30)); // "Adult"
console.log(getAge(70)); // "Senior"

While this works, it can become confusing quickly. For more complex conditions, consider using if-else or switch statements instead.

Advanced Use Cases

Handling Null or Undefined Values

The ternary operator can be used alongside the nullish coalescing operator (??) or logical OR (||) to provide default values:

// Using ternary with nullish coalescing
const username = userData?.name ? userData.name : "Anonymous";

// A cleaner version using nullish coalescing directly
const username = userData?.name ?? "Anonymous";

Conditional Function Calls

// Call different functions based on a condition
const validateInput = isNumeric 
  ? validateNumber(input) 
  : validateString(input);

// Or execute a function conditionally
isDebugMode ? console.log("Debug info:", data) : null;

In Template Literals

const greeting = `Hello, ${name ? name : "guest"}!`;

// Or even simpler with nullish coalescing
const greeting = `Hello, ${name ?? "guest"}!`;

Performance Considerations

In terms of performance, the ternary operator and if-else statements are pretty similar. The JavaScript engine optimizes both quite well.

However, the ternary operator can potentially be slightly faster in some cases because:

It's an expression rather than a statement, which can be optimized differently
It involves less typing, which means less code to parse and execute

Here's a simple benchmark comparison:

// Testing if-else vs ternary performance
const iterations = 10000000;

console.time('if-else');
let resultIfElse;
for (let i = 0; i < iterations; i++) {
  if (i % 2 === 0) {
    resultIfElse = 'even';
  } else {
    resultIfElse = 'odd';
  }
}
console.timeEnd('if-else');

console.time('ternary');
let resultTernary;
for (let i = 0; i < iterations; i++) {
  resultTernary = i % 2 === 0 ? 'even' : 'odd';
}
console.timeEnd('ternary');

The performance difference is usually negligible for most applications, so readability should be your primary concern.

Common Mistakes to Avoid

Overusing Chained Ternaries

// Hard to understand
const status = 
  type === 'user' ? 'regular' 
  : type === 'admin' ? 'full' 
  : type === 'guest' ? 'limited' 
  : 'none';

// Better as a switch or object lookup
const statusMap = {
  user: 'regular',
  admin: 'full',
  guest: 'limited'
};
const status = statusMap[type] || 'none';

Forgetting That Ternary is an Expression

// This doesn't work as expected
condition ? doSomething() : doSomethingElse();

// You need to use the result or use if-else
const result = condition ? doSomething() : doSomethingElse();
// Or
if (condition) {
  doSomething();
} else {
  doSomethingElse();
}

Conclusion

The ternary operator is a powerful tool in JavaScript that can make your code more concise and readable when used appropriately. It's especially useful for simple conditional assignments, returns, and rendering.

However, like any tool, it's important to use it wisely. When conditions become complex or you need to execute statements rather than just return values, traditional if-else statements might be clearer.

By understanding when and how to use the ternary operator effectively, you'll be able to write more elegant and maintainable JavaScript code.

Happy coding!

NestJS: The Modern Node.js Framework

Harshal Ranjhani — Thu, 20 Mar 2025 11:29:33 +0000

NestJS is a framework for building efficient, scalable Node.js server-side applications. It uses modern JavaScript and TypeScript and is built with a philosophy that embraces both object-oriented programming, functional programming, and functional reactive programming.

In this guide, we'll explore what makes NestJS special, why you might want to use it for your next project, and how to get started building applications with it.

What is NestJS?

NestJS is a framework built on top of Express (though it can optionally use Fastify) that adds a layer of abstraction. It takes inspiration from Angular in its modular architecture and dependency injection system.

Why was NestJS created?

Well, while Node.js offers a lot of freedom, it lacks a consistent architecture for organizing medium to large applications. NestJS provides that architecture, making it easier to build maintainable, testable applications.

The Elegant Three-Tier Architecture of NestJS

One of the most powerful aspects of NestJS is its adherence to a clear three-tier architectural pattern that separates concerns and promotes clean code.

This architecture is specifically designed to solve the "spaghetti code" problem that plagues many Node.js applications as they grow in complexity.

The three-tier architecture, as detailed in this excellent article, consists of:

Controllers Layer - Acts as the entry point for all requests, handling HTTP routes and request/response cycles. Controllers are responsible for receiving user input and delegating to the appropriate services, but should contain minimal logic themselves.
Service Layer - Contains all the business logic of your application. Services implement the core functionality, such as data transformations, calculations, and orchestrating the flow of data between controllers and repositories.
Data Access Layer - Manages data persistence through repositories or data access objects. This layer abstracts away database operations, making it possible to switch database technologies without affecting the rest of the application.

This separation of concerns offers several benefits:

Maintainability: Each layer has a single responsibility, making the codebase easier to understand and modify
Testability: Services can be tested in isolation without the complexity of HTTP or database operations
Scalability: As the application grows, new components can be added within the appropriate layer without disrupting existing functionality

When requests flow through a NestJS application, they move from controllers to services and finally to the data access layer, with each layer focusing on its specific responsibility.

@Controller('users')
export class UsersController {
  constructor(private userService: UserService) {}

  @Get()
  findAll(): Promise<User[]> {
    return this.userService.findAll();
  }
}

@Injectable()
export class UserService {
  constructor(private userRepository: UserRepository) {}

  async findAll(): Promise<User[]> {
    // Business logic here
    return this.userRepository.findAll();
  }
}

@Injectable()
export class UserRepository {
  async findAll(): Promise<User[]> {
    // Database access logic here
  }
}

This architectural approach makes NestJS particularly well-suited for enterprise applications and teams working with complex domains.

Setting Up Your First NestJS Project

Getting started with NestJS is straightforward. First, you'll need to install the Nest CLI:

npm i -g @nestjs/cli

Then, create a new project:

nest new project-name

This sets up a new project with a basic structure. Let's take a look at what gets created. I created a project named nestjs-test and here's what I got when I opened it in my code editor:

The CLI creates several files:

src/app.controller.ts: A basic controller with a single route
src/app.service.ts: A basic service
src/app.module.ts: The root module of the application
src/main.ts: The entry file of the application
test: A directory with testing utilities

Core Concepts in NestJS

Let's dive into some of the core concepts in NestJS:

Modules

Modules are a way to organize your application into cohesive blocks of functionality. Every NestJS application has at least one module, the root module. Here's an example of a simple module:

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Module({
  controllers: [CatsController],
  providers: [CatsService],
})
export class CatsModule {}

Controllers

Controllers handle incoming requests and return responses to the client. Here's an expanded controller example:

import { Controller, Get, Post, Body } from '@nestjs/common';
import { CatsService } from './cats.service';
import { CreateCatDto } from './dto/create-cat.dto';
import { Cat } from './interfaces/cat.interface';

@Controller('cats')
export class CatsController {
  constructor(private catsService: CatsService) {}

  @Post()
  async create(@Body() createCatDto: CreateCatDto) {
    this.catsService.create(createCatDto);
  }

  @Get()
  async findAll(): Promise<Cat[]> {
    return this.catsService.findAll();
  }
}

Providers

Providers are classes annotated with @Injectable() that can be injected into constructors. Services, repositories, factories, and helpers can all be providers. Here's an example service:

import { Injectable } from '@nestjs/common';
import { Cat } from './interfaces/cat.interface';

@Injectable()
export class CatsService {
  private readonly cats: Cat[] = [];

  create(cat: Cat) {
    this.cats.push(cat);
  }

  findAll(): Cat[] {
    return this.cats;
  }
}

Middleware

Middleware functions can perform tasks before a request is processed by a route handler. They can:

Execute code
Make changes to the request and response objects
End the request-response cycle
Call the next middleware in the stack

Here's a simple middleware example:

import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

@Injectable()
export class LoggerMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    console.log('Request...');
    next();
  }
}

Advanced Features

NestJS offers many advanced features that make it powerful for larger applications:

Data Validation

You can use DTOs (Data Transfer Objects) and the built-in validation pipes:

import { IsString, IsNotEmpty } from 'class-validator';

export class CreatePostDto {
  @IsNotEmpty()
  @IsString()
  title: string;

  @IsNotEmpty()
  @IsString()
  content: string;
}

Then use it in your controller:

@Post()
@UsePipes(ValidationPipe)
create(@Body() createPostDto: CreatePostDto) {
  return this.blogService.create(createPostDto);
}

Read more about validation in Nest.js here.

Database Integration

NestJS works well with TypeORM, Mongoose, Prisma, and other database tools. Here's an example of integrating TypeORM:

// app.module.ts
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { BlogModule } from './blog/blog.module';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'postgres',
      host: 'localhost',
      port: 5432,
      username: 'postgres',
      password: 'postgres',
      database: 'blog',
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
    BlogModule,
  ],
})
export class AppModule {}

Authentication

NestJS provides robust authentication capabilities. Here's a simple example with Passport.js:

// auth.service.ts
import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
import { UsersService } from '../users/users.service';

@Injectable()
export class AuthService {
  constructor(
    private usersService: UsersService,
    private jwtService: JwtService,
  ) {}

  async validateUser(username: string, password: string): Promise<any> {
    const user = await this.usersService.findOne(username);
    if (user && user.password === password) {
      const { password, ...result } = user;
      return result;
    }
    return null;
  }

  async login(user: any) {
    const payload = { username: user.username, sub: user.userId };
    return {
      access_token: this.jwtService.sign(payload),
    };
  }
}

Testing in NestJS

NestJS makes testing straightforward with built-in support for unit, integration, and end-to-end testing.

Unit Testing

Unit tests focus on testing individual components in isolation. NestJS provides tools that make it easy to mock dependencies and test service logic.

// blog.service.spec.ts
import { Test, TestingModule } from '@nestjs/testing';
import { BlogService } from './blog.service';

describe('BlogService', () => {
  let service: BlogService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [BlogService],
    }).compile();

    service = module.get<BlogService>(BlogService);
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });

  it('should create a blog post', () => {
    const post = { id: 1, title: 'Test Post', content: 'This is a test post' };
    expect(service.create(post)).toEqual(post);
    expect(service.findAll()).toContain(post);
  });
});

Testing Command-Line Applications

NestJS provides excellent support for building CLI applications with the nest-commander package. When building command-line tools, testing becomes even more important to ensure your commands work correctly.

Let's look at how to test a simple CLI command:

First, create a weather command that takes a city name and returns the weather:

// weather.command.ts
import { Command, CommandRunner, Option } from 'nest-commander';

@Command({ name: 'weather', description: 'Get weather for a city' })
export class WeatherCommand extends CommandRunner {
  constructor(private weatherService: WeatherService) {
    super();
  }

  async run(passedParams: string[], options?: Record<string, any>): Promise<void> {
    const city = passedParams[0] || options?.city || 'New York';
    const forecast = await this.weatherService.getWeather(city);

    console.log(`Weather for ${city}: ${forecast}`);
  }

  @Option({
    flags: '-c, --city [city]',
    description: 'City to check weather for',
  })
  parseCity(val: string): string {
    return val;
  }
}

To test this command, we use the CommandTestFactory from the nest-commander-testing package, which provides a way to execute commands in a test environment:

// weather.command.spec.ts
import { Test } from '@nestjs/testing';
import { CommandTestFactory } from 'nest-commander-testing';
import { WeatherCommand } from './weather.command';
import { WeatherService } from './weather.service';

describe('WeatherCommand', () => {
  it('should return weather for specified city', async () => {
    // Mock the console.log function
    const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();

    // Mock the weather service
    const mockWeatherService = {
      getWeather: jest.fn().mockResolvedValue('Sunny, 75°F'),
    };

    // Create a test command using CommandTestFactory
    const commandInstance = await CommandTestFactory.createTestingCommand({
      imports: [], // Any modules you need to import
      providers: [
        WeatherCommand,
        { provide: WeatherService, useValue: mockWeatherService },
      ],
    }).compile();

    // Run the command with arguments
    await CommandTestFactory.run(commandInstance, ['weather', 'Miami', '--verbose']);

    // Verify the weather service was called with the right city
    expect(mockWeatherService.getWeather).toHaveBeenCalledWith('Miami');

    // Verify the console output
    expect(consoleLogSpy).toHaveBeenCalledWith('Weather for Miami: Sunny, 75°F');

    // Clean up
    consoleLogSpy.mockRestore();
  });

  it('should use default city when none provided', async () => {
    const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();

    const mockWeatherService = {
      getWeather: jest.fn().mockResolvedValue('Partly cloudy, 65°F'),
    };

    const commandInstance = await CommandTestFactory.createTestingCommand({
      providers: [
        WeatherCommand,
        { provide: WeatherService, useValue: mockWeatherService },
      ],
    }).compile();

    await CommandTestFactory.run(commandInstance, ['weather']);

    expect(mockWeatherService.getWeather).toHaveBeenCalledWith('New York');
    expect(consoleLogSpy).toHaveBeenCalledWith('Weather for New York: Partly cloudy, 65°F');

    consoleLogSpy.mockRestore();
  });
});

Testing Interactive CLI Commands

For CLI applications that require user input through prompts, nest-commander-testing provides a way to mock user responses:

// pizza.command.ts
import { Command, CommandRunner } from 'nest-commander';
import { InquirerService } from 'nest-commander';

@Command({ name: 'pizza', description: 'Order a pizza' })
export class PizzaCommand extends CommandRunner {
  constructor(private readonly inquirerService: InquirerService) {
    super();
  }

  async run(): Promise<void> {
    const answers = await this.inquirerService.ask<{
      size: string;
      toppings: string[];
    }>('pizza-questions', undefined);

    console.log(`Ordering ${answers.size} pizza with ${answers.toppings.join(', ')}`);
    return Promise.resolve();
  }
}

Testing this interactive command:

// pizza.command.spec.ts
import { CommandTestFactory } from 'nest-commander-testing';
import { PizzaCommand } from './pizza.command';

describe('PizzaCommand', () => {
  it('should order pizza with selected options', async () => {
    const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();

    const commandInstance = await CommandTestFactory.createTestingCommand({
      providers: [PizzaCommand],
    }).compile();

    // Set mock answers for the inquirer prompts
    CommandTestFactory.setAnswers({
      size: 'large',
      toppings: ['pepperoni', 'mushrooms']
    });

    await CommandTestFactory.run(commandInstance, ['pizza']);

    expect(consoleLogSpy).toHaveBeenCalledWith(
      'Ordering large pizza with pepperoni, mushrooms'
    );

    consoleLogSpy.mockRestore();
  });
});

End-to-End Testing

// app.e2e-spec.ts
import { Test, TestingModule } from '@nestjs/testing';
import { INestApplication } from '@nestjs/common';
import * as request from 'supertest';
import { AppModule } from './../src/app.module';

describe('AppController (e2e)', () => {
  let app: INestApplication;

  beforeEach(async () => {
    const moduleFixture: TestingModule = await Test.createTestingModule({
      imports: [AppModule],
    }).compile();

    app = moduleFixture.createNestApplication();
    await app.init();
  });

  it('/blog (GET)', () => {
    return request(app.getHttpServer())
      .get('/blog')
      .expect(200)
      .expect([]);
  });
});

Conclusion

NestJS is a powerful framework that brings together the best of Node.js and TypeScript in an Angular-like structure. It provides a robust foundation for building server-side applications of all sizes, from small APIs to large-scale enterprise applications.

The learning curve might be a bit steeper than some other Node.js frameworks, but the benefits in terms of code organization, maintainability, and the ability to scale make it worth the investment.

Whether you're building a simple blog API or a complex microservices architecture, NestJS provides the tools and structure to make your development experience more productive and your applications more robust.

Resources for Further Learning

Happy coding with NestJS!

Tamagui: Building Cross-Platform Apps Made Simple

Harshal Ranjhani — Mon, 17 Mar 2025 03:54:05 +0000

Building applications that work seamlessly across multiple platforms has always been a challenge for a long time. The dream of "write once, run anywhere" has led to numerous frameworks and libraries, each with their own strengths and limitations. This is where modern tools like Tamagui enter the picture, offering new approaches to solve these long-standing challenges.

What is Tamagui?

Tamagui is a collection of libraries designed to help developers build user interfaces that work seamlessly across both React (web) and React Native (mobile) platforms. If you've ever struggled with maintaining separate codebases for web and mobile or dealt with performance issues in cross-platform apps, Tamagui might be the solution you're looking for.

At its core, Tamagui consists of three main parts:

@tamagui/core - The foundation style library that expands on React Native's style API
@tamagui/static - An optimizing compiler that improves performance
tamagui - A UI kit with components that adapt to each platform

What makes Tamagui special is that it works both at runtime and compile-time, giving you the flexibility to develop quickly while still achieving excellent performance when you need it.

Why Consider Tamagui?

1. True Cross-Platform Parity

Unlike some solutions that offer limited compatibility between platforms, Tamagui provides 100% parity between React and React Native. This means you can write your UI code once and have it work properly on both web and mobile.

2. Performance Optimization

The optional compiler (@tamagui/static) analyzes your code and optimizes it for each platform. On the web, it converts styled components into simple HTML elements with atomic CSS. On mobile, it hoists style objects for better performance.

3. Familiar Styling API

If you're already familiar with React Native's styling approach, you'll feel right at home with Tamagui. It builds upon that foundation while adding many features from modern CSS.

4. Comprehensive UI Kit

Beyond just the styling system, Tamagui offers a complete UI kit with both unstyled and styled components that you can use to build common UI elements.

Getting Started with Tamagui

The easiest way to start with Tamagui is to use their CLI to create a new project:

npm create tamagui@latest

This command will guide you through setting up a new project with Tamagui already configured.

You will be prompted to select a template from a list of options. I have selected the very first one with Expo and Next.js Monorepo. They have multiple options, you can select the one you feel is suitable for you.

Manual Installation

If you prefer to add Tamagui to an existing project, you can install it manually:

# For just the core styling library
npm install @tamagui/core

# Or for the full UI kit (includes core)
npm install tamagui

After installation, you'll need to set up the TamaguiProvider at the root of your app:

import { TamaguiProvider, View } from 'tamagui'
import config from './tamagui.config' // your configuration

export default function App() {
  return (
    <TamaguiProvider config={config}>
      <View width={200} height={200} backgroundColor="$background" />
    </TamaguiProvider>
  )
}

Understanding Tamagui Configuration

The configuration file is a central piece of Tamagui that defines your design system. It's where you set up your tokens, themes, media queries, and other settings that will be used throughout your application. Think of it as the foundation that ensures consistency across your UI.

A Tamagui configuration file typically includes:

Tokens - These are like CSS variables that define values for things like colors, spacing, font sizes, etc.
Themes - Collections of token values that can be switched between (like light/dark mode)
Media Queries - Definitions for responsive design breakpoints
Shorthands - Aliases for longer style property names (like m for margin)
Animations - Predefined animation configurations
Fonts - Typography definitions

Here's a simple example of a configuration file:

// tamagui.config.ts
import { createTamagui } from 'tamagui'
import { defaultConfig } from '@tamagui/config/v4'

const config = createTamagui(defaultConfig)

// Make imports typed
type Conf = typeof config
declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}

export default config

In this example, we're using the defaultConfig from @tamagui/config/v4, which provides a set of pre-configured tokens, themes, and other settings. This is a great starting point for most applications.

The TypeScript declarations at the bottom ensure that your custom configuration is properly typed throughout your application, providing autocomplete and type checking for your tokens and themes.

How Configuration is Used

When you wrap your application with TamaguiProvider and pass in your configuration, several things happen:

Token Registration - All your tokens become available to use in your components with the $ prefix (e.g., $space.md or $color.blue)
Theme Setup - Your themes are registered and the default theme is applied
Media Query Initialization - Your responsive breakpoints are set up and start listening for screen size changes
Style Processing - Tamagui's style engine is configured to use your settings for processing style props

For example, with the configuration in place, you can use tokens in your components:

<View 
  padding="$4"           // Uses the space token with key "4"
  backgroundColor="$background"  // Uses the theme color "background"
  borderRadius="$2"      // Uses the radius token with key "2"
/>

Creating a Custom Configuration

While using the default configuration is convenient, you'll likely want to customize it for your application. Here's a more detailed example:

// tamagui.config.ts
import { createTamagui, createTokens } from 'tamagui'

// Define your tokens
const tokens = createTokens({
  size: {
    0: 0,
    1: 4,
    2: 8,
    3: 16,
    4: 24,
    // ... more sizes
  },
  space: {
    0: 0,
    1: 4,
    2: 8,
    3: 16,
    4: 24,
    // ... more spaces
    // You can also define negative spaces
    '-1': -4,
    '-2': -8,
  },
  color: {
    primary: '#3498db',
    secondary: '#2ecc71',
    background: '#ffffff',
    text: '#333333',
    // ... more colors
  },
  radius: {
    0: 0,
    1: 4,
    2: 8,
    3: 16,
    // ... more radius values
  },
})

// Create your themes
const themes = {
  light: {
    background: tokens.color.background,
    color: tokens.color.text,
    // ... more theme values
  },
  dark: {
    background: '#121212',
    color: '#ffffff',
    // ... more theme values
  },
}

// Create your configuration
const config = createTamagui({
  tokens,
  themes,

  // Define media queries for responsive design
  media: {
    sm: { maxWidth: 640 },
    md: { maxWidth: 768 },
    lg: { maxWidth: 1024 },
    xl: { maxWidth: 1280 },
    // You can also define other types of media queries
    dark: { colorScheme: 'dark' },
    light: { colorScheme: 'light' },
    hoverNone: { hover: 'none' },
    pointerCoarse: { pointer: 'coarse' },
  },

  // Define shorthands for style properties
  shorthands: {
    m: 'margin',
    mt: 'marginTop',
    mr: 'marginRight',
    mb: 'marginBottom',
    ml: 'marginLeft',
    mx: 'marginHorizontal',
    my: 'marginVertical',
    p: 'padding',
    pt: 'paddingTop',
    pr: 'paddingRight',
    pb: 'paddingBottom',
    pl: 'paddingLeft',
    px: 'paddingHorizontal',
    py: 'paddingVertical',
    // ... more shorthands
  } as const,
})

// Type setup for TypeScript
type Conf = typeof config
declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}

export default config

With this configuration, you can now use your custom tokens, themes, and shorthands throughout your application:

<YStack 
  p="$3"                // Using the padding shorthand with token 3
  bg="$background"      // Using the background color from the current theme
  borderRadius="$2"     // Using radius token 2
  $sm={{ p: "$2" }}    // Responsive styling for small screens
>
  <Text color="$primary">Hello Tamagui!</Text>
</YStack>

Advanced Configuration Options

Tamagui's configuration system is highly flexible and offers many advanced options:

Animations - You can define reusable animations that work across platforms
Fonts - Define font families, sizes, weights, and more
Settings - Control various behaviors like SSR compatibility, theme handling, and style validation

For example, you can add animations to your configuration:

import { createAnimations } from '@tamagui/animations-react-native'

const animations = createAnimations({
  bouncy: {
    damping: 9,
    mass: 0.9,
    stiffness: 150,
  },
  lazy: {
    damping: 18,
    stiffness: 50,
  },
})

const config = createTamagui({
  // ... other config options
  animations,
})

You can read more about all the configuration options in the official documentation.

Basic Components

Tamagui provides all the basic building blocks you need for UI development:

import { View, Text, Stack, XStack, YStack, Button } from 'tamagui'

export function SimpleExample() {
  return (
    <YStack padding="$4" space="$2">
      <Text fontSize="$6" fontWeight="bold">
        Hello Tamagui
      </Text>

      <XStack space="$2">
        <Button theme="blue">Primary</Button>
        <Button theme="gray">Secondary</Button>
      </XStack>
    </YStack>
  )
}

In this example:

YStack is a vertical stack (like a column)
XStack is a horizontal stack (like a row)
$4 and $2 are token values from your design system
theme="blue" applies a predefined color theme

Styling with Tamagui

Tamagui offers multiple ways to style your components:

1. Inline Styles

<View 
  backgroundColor="$background"
  padding={10}
  borderRadius={8}
/>

2. Using `styled()`

import { styled } from 'tamagui'

const Card = styled(View, {
  backgroundColor: '$background',
  padding: 10,
  borderRadius: 8,

  // Variants allow for different styles based on props
  variants: {
    size: {
      small: { padding: 5 },
      large: { padding: 20 },
    },
    outlined: {
      true: {
        borderWidth: 1,
        borderColor: '$borderColor',
      },
    },
  },
})

// Usage
function MyComponent() {
  return (
    <Card size="large" outlined>
      <Text>This is a card</Text>
    </Card>
  )
}

Theming in Tamagui

Tamagui has a powerful theming system that makes it easy to support light/dark modes and custom themes:

import { Theme, Button, Text, YStack } from 'tamagui'

export function ThemeExample() {
  return (
    <YStack padding="$4" space="$4">
      {/* Default theme */}
      <Button>Default Theme Button</Button>

      {/* Blue theme */}
      <Theme name="blue">
        <Button>Blue Theme Button</Button>
      </Theme>

      {/* Red theme */}
      <Theme name="red">
        <Button>Red Theme Button</Button>
      </Theme>

      {/* Dark mode */}
      <Theme name="dark">
        <YStack padding="$4" backgroundColor="$background">
          <Text color="$color">Dark Mode Text</Text>
        </YStack>
      </Theme>
    </YStack>
  )
}

You can also use the useTheme hook to programmatically access or change themes:

import { useTheme, Button } from 'tamagui'

function ThemeSwitcher() {
  const theme = useTheme()
  const [isDark, setIsDark] = useState(false)

  return (
    <Button
      onPress={() => setIsDark(!isDark)}
      theme={isDark ? 'dark' : 'light'}
    >
      Switch to {isDark ? 'Light' : 'Dark'} Mode
    </Button>
  )
}

Responsive Design with Tamagui

Tamagui makes it easy to create responsive layouts using the useMedia hook:

import { useMedia, XStack, YStack, Text } from 'tamagui'

function ResponsiveLayout() {
  const media = useMedia()

  return (
    <YStack padding="$4">
      {/* Stack will be vertical on small screens, horizontal on larger ones */}
      {media.sm ? (
        <YStack space="$2">
          <Text>Item 1</Text>
          <Text>Item 2</Text>
        </YStack>
      ) : (
        <XStack space="$2">
          <Text>Item 1</Text>
          <Text>Item 2</Text>
        </XStack>
      )}
    </YStack>
  )
}

You can also use media queries directly in your styled components:

const ResponsiveCard = styled(View, {
  padding: '$2',

  // Different styles based on screen size
  $sm: {
    padding: '$4',
  },
  $lg: {
    padding: '$6',
    maxWidth: 800,
  },
})

Running the starter app

Sometime back we initialized our starter app with Expo + Next.js template. When I first opened it in Cursor, it looked like this:

As you can see, it's a monorepo with the code for both web and react native combined into one. It's so easy and helpful.

I wanted to run the app on the web for the time being so to do that, while being at the root of the folder, you need to run:

npm run web

and it will automatically spin up a Next.js instance on port 3000.

The template looked like this:

It's already so intuitive with the option to use pages / app router as well, which is insane!

Using Tamagui with Expo

Tamagui works great with Expo, which is a popular framework for building React Native apps. Here's how to set it up:

Create a new Expo project:

npx create-expo-app -t expo-template-blank-typescript

Install Tamagui:

npm install tamagui @tamagui/babel-plugin

Update your babel.config.js:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts',
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === 'development',
        },
      ],
      // If using reanimated
      'react-native-reanimated/plugin',
    ],
  }
}

Create a tamagui.config.ts file as shown earlier.
Load fonts (optional but recommended):

import { useFonts } from 'expo-font'

function App() {
  const [loaded] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  })

  if (!loaded) {
    return null
  }

  return <MyApp />
}

Community and Support

Tamagui has a growing community of developers. If you need help or want to contribute, you can find resources at:

Conclusion

Tamagui offers a powerful solution for building cross-platform applications with React and React Native. Its combination of a familiar styling API, performance optimizations, and comprehensive UI kit makes it a compelling choice for developers looking to share code between web and mobile platforms.

Whether you're building a simple app or a complex application, Tamagui provides the tools you need to create consistent, performant user interfaces across platforms.

The best part is that you can adopt Tamagui gradually - start with just the styling system and add the compiler and UI components as needed. This flexibility makes it accessible for both new projects and existing applications looking to improve their cross-platform capabilities.

Give Tamagui a try on your next project and experience the benefits of true cross-platform development!

Cursor AI: Future Software Engineer?

Harshal Ranjhani — Sun, 09 Mar 2025 09:24:30 +0000

As a developer, I'm always on the lookout for tools that can make my coding experience more efficient and enjoyable. And in this new world of Artificial Intelligence, the tech industry is making insane breakthroughs. One such product that's changing the coding game is Cursor AI. It's a new IDE which uses AI and basically does everything for you.

Let's explore how it works.

What is Cursor AI?

Cursor AI is an AI-powered code editor built as a fork of Visual Studio Code. It's designed to enhance your coding experience by providing intelligent code suggestions, natural language editing capabilities, and a deep understanding of your entire codebase.

Unlike traditional code editors, it integrates advanced AI models like GPT-4o, Claude 3.5 Sonnet, and their custom cursor-small model to provide context-aware suggestions and automate repetitive coding tasks. But what makes it truly unique is how deeply these AI models are woven into the coding experience. Rather than just offering isolated suggestions, Cursor indexes and understands your entire project, allowing it to provide contextually relevant assistance tailored to your specific codebase.

Key Features

1. Tab Completion

Cursor's tab completion is impressively intelligent. It can:

Suggest multiple lines of code at once
Auto-import symbols in TypeScript and Python files
Predict your next cursor position for seamless navigation

As an example, I just wrote a comment (which was also autocompleted btw) to write a program to print all fibonacci numbers and this is how fast it was done:

Did you see how amazing it is, it's my favorite feature from Cursor.

2. Chat with AI

It includes a powerful chat interface (accessible with Ctrl+L) that allows you to:

Ask questions about your code
Get explanations for complex functions
Reference specific parts of your codebase with @ symbols
Include images for visual context

As you can see above, in the chat interface, there are three modes: Agent, Ask, and Edit.

Agent Mode: Has access to your entire codebase, writes into the files on its own, it's literally like a software engineer on your tips.

Ask Mode: Has access to the context you give it, suggests changes in an intelligent manner.

Edit Mode: Edit mode is similar to Agent mode, but only has access to the context you give it.

You can select any of these modes, with almost all majorly used models and do anything you want with it. People have built whole apps using just Cursor and its AI and are making money with it. It's absolutely insane!

3. Code Generation and Editing

With Ctrl+K, you can:

Generate new code based on natural language descriptions
Edit existing code by describing the changes you want
Create entire functions or classes with simple prompts

This feature allows you to make quick changes inline and comes in handy whenever you're dealing with small edits. Even here you can use use multiple models which is also very helpful.

4. Terminal Commands

Cursor can help with terminal commands too:

Use Ctrl+K in the terminal to generate commands from natural language
Execute complex operations without remembering syntax
Automate repetitive terminal tasks

You can use this Ctrl + K mode to also run in the terminal directly. This is very helpful when you forget some terminal commands and want to quickly remember them.

5. Customization with Cursor Rules

You can customize Cursor's behavior using .cursorrules files:

Define project-specific instructions for the AI
Set coding style preferences
Guide the AI to follow your team's best practices

// Example .cursorrules file
Always use strict types instead of 'any' in TypeScript.
Prefer functional programming paradigms over imperative approaches.
Ensure any React components are stateless unless explicitly necessary.

You can save this file in your project directory and cursor will use this information for its outputs.

Getting Started

Download and Install: Visit cursor.com to download the application for your operating system (Windows, macOS, or Linux).
Set Up Your Workspace: Open Cursor and create or open a project. The interface will feel familiar if you've used VS Code before.
Try the Key Features:
- Use Tab for code completion
- Press Ctrl+L to open the chat interface
- Use Ctrl+K to generate or edit code
- Try Ctrl+I for multi-file operations
Customize Your Experience: Create a .cursorrules file in your project root to customize the AI's behavior.

Privacy and Security

Cursor takes privacy seriously:

Enable Privacy Mode to ensure your code is never stored remotely
SOC 2 certified for security compliance
Option to use local models for sensitive projects

All these rules can be configured in the Settings and you will also be prompted to choose a Privacy mode when you first download Cursor.

Conclusion

Cursor AI represents a significant step forward in AI-assisted coding. Its ability to understand your entire codebase, generate complex code structures, and adapt to your coding style makes it a powerful tool for developers of all skill levels.

While it's not perfect—sometimes generating verbose code or taking longer than expected to process complex requests—the benefits far outweigh these minor issues. As AI technology continues to evolve, tools like Cursor will likely become an essential part of every developer's toolkit.

Resources

Exploring Zed: The Lightning-Fast Code Editor Built in Rust

Harshal Ranjhani — Thu, 27 Feb 2025 14:41:12 +0000

Have you ever found yourself waiting for your code editor to catch up with your thoughts? We've all been there - watching that spinning wheel as our editor struggled to open a large file or feeling the lag with each keystroke. That's why I've been exploring Zed, a relatively new code editor that's build in rust.

What is Zed?

Zed is a modern code editor built from the ground up in Rust. If you're not familiar with Rust, it's a programming language known for its performance and memory safety. This foundation gives Zed incredible speed and responsiveness that you can feel immediately when using it.

The team includes the creators of Atom and Tree-sitter, who have taken their 15+ years of experience building developer tools and applied those lessons to create something new and exciting.

Getting Started

It is currently available for macOS and Linux, with Windows support on the roadmap. You can download it directly from zed.dev or install it via your package manager.

When you first open the editor, you'll notice its clean, minimalist interface. There's no clutter - just your code and the tools you need to work with it.

What stands out?

Speed That You Can Feel

The first thing most developers notice is its speed. Everything from startup time to file navigation feels instantaneous. This isn't just marketing talk - the Rust foundation really does make a difference.

Let me share a quick example: I recently opened a project with several large JSON files that made my previous editor choke. It handled them without breaking a sweat. The typing latency is so low that it feels like your thoughts are appearing on screen in real-time.

Collaboration Built-In

One of the standout features is its built-in collaboration tools. You can:

Chat with teammates directly in the editor
Write notes together
Share your screen and project

All of this is included out of the box - no plugins or third-party services required.

Multibuffer Editing

It introduces a concept called "multibuffers" that lets you compose excerpts from across your codebase in one editable surface. This is incredibly useful when you're working on related pieces of code that span multiple files.

Instead of constantly switching between tabs, you can have all the relevant code in one view. It's basically like having the best parts of split views and tabs combined into something more powerful.

Language Support

The editor supports a wide range of programming languages through Tree-sitter, WebAssembly, and the Language Server Protocol. This means you get:

Syntax highlighting
Code completion
Error checking
Go-to-definition
And other language-specific features

The editor feels smart without being intrusive. It gives you help when you need it but stays out of your way otherwise.

Terminal and Task Runner

The built-in terminal is fast and integrates well with the rest of the editor. You can run commands, see the output, and even set up task runners for your project.

I've found this particularly useful for running tests or build commands without leaving the editor. The terminal performance is noticeably better than what you'd find in many other editors.

Vim Mode

If you're a Vim user, you'll be happy to know that they have first-class Vim bindings. These aren't just basic key mappings - they include advanced features like text objects and marks.

The Vim mode feels natural and responsive, making it a viable option for die-hard Vim users who want modern editor features.

How's the Performance?

Language Servers In-Depth

The language support is built on the Language Server Protocol (LSP). Some technical highlights:

Asynchronous Communication: LSP requests happen off the main thread, preventing UI lag.
Document Sync Optimization: Only changed portions of files are sent to language servers.
Multi-LSP Support: It can work with multiple language servers simultaneously for polyglot projects.
Auto-installation: It automatically installs and manages language servers for supported languages.

For advanced users, you can configure custom language servers in your settings:

{
  "language_servers": {
    "rust-analyzer": {
      "command": "rust-analyzer",
      "config": {
        "checkOnSave": {
          "command": "clippy"
        }
      }
    }
  }
}

Multiplayer Technical Implementation

The collaboration feature isn't just a bolt-on - it's deeply integrated into the architecture:

CRDT Synchronization: Uses Conflict-free Replicated Data Types for real-time editing without conflicts.
WebRTC P2P: Direct peer-to-peer connections minimize latency between collaborators.
Encrypted Communication: All collaboration traffic is end-to-end encrypted.
Project Synchronization: File tree changes propagate to all participants in real-time.

Installation Guide

Let's see how we can install our new editor:

macOS Installation

The easiest way to install Zed on macOS is by downloading the .dmg file directly from the Zed website and drag it to your Applications folder.

For Apple Silicon (M1/M2/M3) Macs, it comes with native ARM support for maximum performance.

Linux Installation

On Ubuntu and Debian-based distributions:

# Add the repository
curl -fsSL https://zed.dev/install.sh | sh

For other distributions, you can refer the Zed website.

Configurations

It uses a JSON-based configuration system. To access your settings, press Cmd+, (macOS) or Ctrl+, (Linux).

Here are some useful configurations:

Theme Customization

{
  "theme": "One Dark",
  "ui_font_family": "Inter",
  "ui_font_size": 14,
  "buffer_font_family": "JetBrains Mono",
  "buffer_font_size": 15
}

Key Bindings

Create custom keyboard shortcuts:

{
  "keymaps": {
    "normal": {
      "ctrl-t": "workspace::NewFile",
      "ctrl-p": "workspace::OpenFiles",
      "ctrl-shift-p": "command_palette::Toggle"
    }
  }
}

For more information on configuring Zed, you can refer the documentation.

Extensibility

While Zed comes with a lot of functionality out of the box, it also has a growing extensions ecosystem just like Visual Studio Code. You can add:

Additional language support
New themes
Custom functionality

The extension system is still evolving, but it's already quite capable. The team is actively working on making it even more powerful.

The Open Source Advantage

In early 2024, Zed was open-sourced under a mix of licenses. This move has accelerated its development and allowed the community to contribute improvements.

Being open source means:

You can see exactly how the editor works
You can contribute fixes and features
The editor will continue to improve through community efforts

The GitHub repository is quite active, with regular releases and a growing contributor base.

How Zed Compares to Other Editors

You might be wondering how Zed stacks up against other popular editors like VS Code, Sublime Text, or Atom. Here's a quick comparison:

VS Code: Zed is significantly faster but has fewer extensions (for now). If you find VS Code sluggish, especially with large files, Zed might be a breath of fresh air.
Sublime Text: Both are fast, but Zed offers better collaboration features and a more modern approach to language support.
Atom: Zed feels like the spiritual successor to Atom, built with performance as a priority from day one.

Should You Try Zed?

If you value performance, clean design, and modern features, Zed is definitely worth a try. It's particularly appealing if you:

Work with large codebases or files
Collaborate with others frequently
Appreciate minimalist, distraction-free interfaces
Want an editor that feels responsive and fast

The best way to know if Zed is right for you is to download it and give it a spin. It's free to use, and you might be surprised by how much you enjoy the experience.

Conclusion

Zed represents a fresh approach to code editing - one that prioritizes performance, simplicity, and collaboration. By building on modern technologies like Rust and incorporating lessons learned from previous editors, the Zed team has created something that feels both familiar and revolutionary.

As developers, we spend countless hours in our editors. Having one that feels fast, responsive, and enjoyable to use can make a real difference in our daily work. Zed might just be that editor for you.

QodoAI: Code with an agentic AI

Harshal Ranjhani — Sat, 22 Feb 2025 07:48:14 +0000

In this new era of agentic AI and LLMs, I've been exploring how to use them to help me code. I've been using QodoAI, a tool that's been making waves in the development community. I've been using it for my projects, and I wanted to show you how I've been using it.

What's Qodo AI?

Think of Qodo as your coding buddy that sits right in your IDE. It's not just another AI coding tool - it focuses specifically on helping you write better, more reliable code through testing, reviewing, and generation.

Qodo (formerly known as Codium) is a quality-first generative AI coding platform that integrates directly into your development workflow. What makes it stand out is its focus on code integrity - ensuring your code isn't just written, but is robust, well-tested, and maintainable.

It's available as a VS Code extension and a JetBrains plugin.

They have about 6.9k+ stars on GitHub which is a good sign that it's a tool that people are using and finding value in.

The Three Main Tools

1. Qodo Gen - Your IDE Companion

Qodo Gen is an AI-powered coding assistant that integrates directly into your IDE (VS Code and JetBrains). It's designed to help you write, test, and review code in real-time. What sets it apart is its focus on code integrity and quality-first approach.

I'll be demoing it in VS Code, but it's also available in JetBrains.

Once you have it installed, you'll see an interface like this:

Then you can type away and it will do its best to generate the code you need. You can attach files, images, your git diffs, and more.

To get started and get chatting with Qodo Gen, you might have to sign up for a free account first. Then you have so many models to choose from, it's amazing.

I asked it to create a simple todo app in React. The experience was quite smooth, I really liked the chat UI and the fact that I could see the code changes in real-time. Although, the code it provided was without any good styling, so I had to do that part.

2. Qodo Cover - The Testing Agent

Qodo Cover is a CLI-based tool that helps you automatically generate and improve your test coverage. It's currently available as open source for Python, Java, and PHP projects.

Here's how it works:

Test Generation: It analyzes your code and creates new tests that actually increase coverage. For example, if you have a function without tests, it will generate meaningful test cases that cover different scenarios.
Coverage Validation: After generating tests, it runs them to make sure they actually work and improve coverage. If a test fails or doesn't increase coverage, it tries again with a different approach.
Context-Aware: The tool scans your entire codebase to understand:
- How your code is structured
- What existing tests you have
- What dependencies and frameworks you're using
- What patterns and conventions you follow

Here's a simple example of using Qodo Cover from the command line:

cover-agent \
  --source-file-path "src/app.py" \
  --test-file-path "tests/test_app.py" \
  --desired-coverage 70 \
  --max-iterations 10

You can run it in two main ways:

Local CLI: Run it directly on your machine while developing
CI Integration: Add it to your GitHub Actions or other CI pipelines to automatically generate tests for new code

When running on a Python FastAPI project, it can generate tests like:

def test_create_user_success():
    response = client.post(
        "/users/",
        json={"username": "testuser", "email": "test@example.com"}
    )
    assert response.status_code == 201
    assert response.json()["username"] == "testuser"

The tool will also:

Generate edge cases (like testing with invalid inputs)
Add appropriate assertions
Include docstrings explaining what each test does
Follow your project's existing test patterns

One particularly useful feature is its ability to scan an entire repository and automatically identify test files that need improvement, making it practical for large codebases.

3. Qodo Merge - The PR Assistant

Qodo Merge is a code review tool that works directly in your Git repositories. It helps review pull requests and improve code quality using AI. Here's what it can do:

Main Commands

You can trigger these commands directly in your PR comments:

/describe - Creates PR descriptions and explains code changes
/review - Checks for bugs, issues, and security problems
/improve - Suggests ways to make the code better
/analyze - Shows what code changed and what needs testing
/ask - Let's you ask questions about the code
/similar_issues - Finds related issues
/update_changelog - Updates your CHANGELOG.md file
/add_docs - Creates documentation

How It Works in Practice

During PR Creation:
- Automatically generates PR descriptions
- Creates a walkthrough of your changes
- Checks if your code matches ticket requirements
During Review:
- Spots potential bugs and security issues
- Ranks problems by how serious they are
- Suggests specific code improvements
- Lets reviewers chat with AI about the code
Integration Options:
- Works with GitHub, GitLab, BitBucket, and Azure DevOps
- Can run automatically or when you ask it to
- Comes with a Chrome extension for AI chat in PRs

You can use it two ways:

Free Open Source Version: Available on GitHub for individual developers
Pro Version: For teams, with more features and support

The tool learns from your team's patterns - when you accept its suggestions, it remembers and makes better suggestions next time. It also doesn't store your code or use it to train its models, which is important for privacy.

It's available for all major git providers like GitHub, GitLab, BitBucket, and Azure DevOps.

Conclusion

Qodo is a powerful tool that can help you write better code, test it, and review it. It's a great way to get started with agentic AI in your development workflow.

Give it a try and let me know what you think!

A developers guide to v0.dev

Harshal Ranjhani — Wed, 12 Feb 2025 09:38:04 +0000

Let's talk about v0.dev, a tool that's been making waves in the UI development space. If you've ever found yourself spending hours tweaking CSS or setting up component libraries, this one's for you.

What is v0.dev?

v0.dev is Vercel's AI-powered UI development tool that lets you generate React components using plain English descriptions. Think of it as pair programming with AI, but for UI development.

I was able to pull up an entire todo-list website in seconds with all the functionality working with a clean UI without doing anything at all.

It's Insane!

Why Should You Care?

As developers, we often get caught up in:

Spending hours perfecting layouts
Fighting with CSS
Setting up component libraries
Making things responsive

It helps tackle these common pain points. It's not about replacing developers (trust me, we're still very much needed!) - it's about making the UI development process faster and more efficient.

How It Works

Describe Your UI: Just type what you want in plain English

Create a modern navbar with a logo, navigation links, and a dark mode toggle

Get Generated Code: It returns a complete React component using:
- Tailwind CSS for styling
- Radix UI for accessibility
- shadcn/ui components
Copy & Use: The code is yours to use, modify, and integrate into your projects

Community Templates

v0.dev has a huge community of people using the tool to build all sorts of projects. You can find apps, games, components, blocks, and a lot more.

The best part is that you can fork any of the projects or templates you like and use them as a starting point for your own projects.

You can find the community templates here.

Getting the Most Out of the tool

When using v0, focus on leveraging it for quick prototypes and basic UI components. It excels at generating foundational elements that you can later customize and expand upon, making it perfect for jump-starting your projects or learning new design patterns.

However, this isn't meant to handle complex application logic or produce completely production-ready code. While the generated code is generally good, you'll still need to review and adjust it to match your specific needs and standards.

The tool works best when treated as a collaborative assistant rather than a complete replacement for UI development. Take time to understand the generated code, make necessary modifications, and use it as a starting point for your own creative solutions.

Resources

Conclusion

v0.dev isn't magic - it's a tool that helps speed up UI development. It works best when you understand its strengths and limitations. Give it a try, experiment with it, and see how it fits into your development workflow.

Remember: The best tools are the ones that make you more productive without taking away your ability to think and create. v0.dev is exactly that - a helpful assistant in your UI development journey.

A Guide to Using Windsurf.ai

Harshal Ranjhani — Mon, 03 Feb 2025 06:07:10 +0000

As developers, we're always looking for tools that genuinely enhance our workflow rather than getting in the way. And with advancements in AI and the release of endless AI tools, it's hard to know where to start. Being a developer myself, I love to try out new tools and see how they can help me be more productive. One such tool I came across recently is Windsurf.ai. It's an AI-powered IDE just like Cursor, Copilot and many others but it stands out with some of its unique features. Let's dive in and see how it can help you be more efficient.

What is Windsurf.ai?

Windsurf.ai is fundamentally a VS Code fork that's been re-imagined to create a more natural collaboration between developers and AI. While there are plenty of AI coding assistants out there, Windsurf takes a different approach by focusing on maintaining your development flow rather than just providing code suggestions.

What makes it interesting is how it combines both copilot-style collaboration and autonomous agent capabilities. Instead of just being a chat interface that responds to prompts, it actively maintains awareness of your codebase and your actions. This means when you're working on a feature, it understands the context across multiple files and can help with coherent changes throughout your project.

The core idea behind Windsurf is to reduce the context-switching that often comes with AI coding assistants. Rather than having to stop what you're doing to carefully craft prompts, you can interact with it more naturally through features like inline commands (⌘ + I), code lenses, and its Cascade interface. It's particularly helpful when you're working on larger codebases where understanding the relationships between different components is crucial.

That said, it's worth noting that it's still an AI tool - it's meant to augment your development workflow, not replace your decision-making. Think of it more as a really knowledgeable teammate who has perfect memory of your codebase, rather than a magical code generator.

Getting Started

Let's get started by installing Windsurf.ai and getting familiar with the interface. It's available on Mac, Windows and Linux. Head over to the downloads page and download your preferred version.

Here are a few system requirements you can expect:

Mac: OS X Yosemite or later
Linux: Ubuntu 20.04+ (or equivalent glibc/glibcxx versions)
Windows: Windows 10 64-bit or later

Once installed, you'll be provided with an option to migrate your existing VS Code settings. I recommend doing this as it'll help you get started faster. Great, now you're in!

Core Features

They have a few core features that make Windsurf.ai stand out among other AI-powered IDEs. These were the first ones I directly saw on the website. So let's explore a few of them.

Cascade: Beyond Chat

Cascade is supposed to be a Chat interface but it's more than that. Cascade combines deep codebase understanding, a breadth of advanced tools, and a real-time awareness of your actions into a powerful, seamless, and collaborative flow. It is the most powerful way to code with AI. The best part was that I was able to prompt it to start a project and it was able to generate the entire project structure for me from scratch.

Here's how it went, I asked it to start a new Swift project for a MacOS application, with a menu bar and an about screen. It generated the entire project structure for me from scratch.

They have a "Write" and a "Chat" option and Write is enabled by default. With just a prompt, it started doing it's magic and before I knew it, it had generated the entire project structure for me.

It has two models from what I could see. One is "gpt-4o" and the other is "claude-3.5-sonnet". Which is good because "claude-3.5-sonnet" is known to be better at coding tasks and that's what I used for this project.

So overall when the "Write" option is enabled, it will have write access to your codebase. It will be able to make changes to your codebase and even create new files. It also runs commands in your terminal and shows output in the Cascade interface.

The "Chat" option is more like a traditional chat interface. It's not able to make changes to your codebase but it's able to understand your codebase and help you with coding tasks.

You can additionally also add Images and include specific files in your prompt using the @ mention feature. So to conclude the Cascade feature, these would be the key features:

Deep Context Awareness: Cascade understands your codebase structure and relationships
Multi-file Editing: Make coherent changes across multiple files
Command Suggestions: Get contextual terminal command suggestions
@ Mentions: Reference functions, classes, or files directly in conversations

Supercomplete: Predictive Coding

Supercomplete goes beyond traditional autocomplete by understanding your intent:

I found it to be pretty good. It's at par with Copilot in terms of the suggestions it provides. It's also able to understand your codebase and provide suggestions based on the context of the codebase.

Command Mode (⌘ + I)

Natural language code editing right where you need it.

Sometimes, you just want to make a quick change to your code. You don't want to chat via Cascade and you can't use Supercomplete because you need to do something which it is not aware of. But still you need to do it quick and use power of AI to do it. Command mode is the solution for this.

Just press ⌘ + I and start typing your request. Hit Enter and it'll be able to understand your intent and make the changes for you in-place.

PS: That condition was just for demonstration purposes. Please don't do that in production. Unless you want to summon the code gremlins! 🧙‍♂️👾

Understanding Flows in Windsurf

The concept of Flows in Windsurf represents a significant shift in how developers can work with AI. Unlike traditional AI coding assistants that either wait for prompts or try to work autonomously, Flows creates a real-time collaboration between you and the AI.

The Evolution of AI Coding Assistance

Let's break down how we got here:

Traditional Coding (Pre-2022)
- Just you and your keyboard
- Every line of code required manual input
- Complete control, but also complete manual effort
Copilot Era (2022-2023)
- Line-by-line suggestions
- Chat-based assistance
- Required constant context switching between coding and prompting
Agent Attempts (Early 2024)
- Autonomous code generation
- Tool-based reasoning
- Often resulted in long wait times and code that needed heavy revision
Flows (Current)
- Real-time collaboration
- Continuous context awareness
- Adapts to your coding style and patterns

How Flows Actually Works

Think of Flows as having a pair programmer who:

Watches your code changes in real-time
Understands the context of what you're building
Adapts their suggestions based on your coding patterns
Maintains awareness across your entire codebase

Here's a practical example:

When you're working on a feature, Flows might:

Notice you creating a new API endpoint
Automatically suggest related model changes
Identify necessary updates to existing tests
Propose documentation updates
All while maintaining awareness of your project's architecture

The key difference is that you're not stopping to ask for each of these things - they're suggested naturally as part of your workflow.

Indexing: Understanding Your Codebase

One of Windsurf's most powerful features is its ability to truly understand your codebase through indexing. This isn't just simple code parsing - it's a deep semantic understanding of your code that powers many of Windsurf's intelligent features.

Local Indexing: Your Personal Code Context

Local indexing is enabled by default in Windsurf and works like a really smart code librarian that:

Generates embeddings that capture the meaning of your code
Powers codebase-aware chat and autocomplete
Can retrieve context from your entire codebase, not just recent files
Stores everything locally on your machine for privacy

Here's what you should know about local indexing:

System Impact

Initial indexing takes about 5-10 minutes for a typical codebase
Uses ~300MB RAM for a 5000-file workspace
CPU usage spikes during initial indexing, then returns to normal

What Gets Indexed?

By default, the indexing engine is smart enough to ignore:

Everything in your .gitignore
node_modules directories
Hidden files (starting with ".")

Pro tip: You can create a .codeiumignore file in your repo root to customize what gets indexed, using the same syntax as .gitignore.

Remote Indexing: Team-wide Code Understanding

For teams using Windsurf Enterprise, remote indexing offers additional capabilities:

Index repositories you don't have locally
Share codebase understanding across your team
Support for GitHub, GitLab, and BitBucket repositories
Automatic re-indexing on configurable schedules

Security Considerations

For those concerned about code privacy with remote indexing:

Only embeddings are stored (not the actual code)
Processing happens on isolated tenant instances
Code snippets are deleted after embedding creation
Each team's data remains completely separate

Conclusion

Windsurf.ai is an IDE by developers for developers. It supports features like Cascade, Supercomplete, Command Mode and Flows. It's focused on agent based coding and is a really good tool to have in your workflow. It's still new and they're actively working on improving it. I'm sure they'll be adding more features in the future. If you wish to add any feature requests, you can do so here.