DEV Community: Domenico Tenace

Why I Switched to pnpm and Never Looked Back 🚀

Domenico Tenace — Thu, 19 Mar 2026 09:03:03 +0000

Overview

Hey everyone 👋

For years, I used npm without questioning it. It's the default, it comes with Node.js, everyone uses it, why change? But after switching to pnpm a few months ago, I genuinely can't imagine going back.

This isn't about being trendy or jumping on the latest bandwagon. pnpm solves real problems I didn't even realize I had with npm. Let me explain why making the switch was one of the best development decisions I've made this year.

Let's start! 🤙

What's the Actual Difference? 🤔

Before we get into why pnpm is better, let's understand what makes it fundamentally different from npm.

npm's Approach: Flat and Duplicated

When you run npm install, npm creates a flat node_modules structure. This means all your dependencies and their dependencies end up in the same folder, flattened out. While this solved some earlier problems with nested dependencies, it created new ones:

Phantom Dependencies:
You can import packages that aren't listed in your package.json because they happen to be installed as someone else's dependency. This works until that dependency changes, and suddenly your code breaks.

Disk Space Waste:
If you have 10 projects on your machine and they all use Express, npm downloads and stores Express 10 times. Same for React, Lodash, or any other common package.

Slow Installations:
Every project needs its own copy of everything, which means longer install times and more network usage.

pnpm's Approach: Smart and Efficient

pnpm takes a completely different approach using something called a content-addressable storage system. Here's how it works:

Single Global Store:
pnpm keeps one copy of each package version in a global store (usually ~/.pnpm-store). When you install a package, pnpm creates hard links from this store to your project's node_modules.

Strict Dependency Tree:
Instead of flattening everything, pnpm maintains a proper nested structure using symlinks. You can only import packages that are explicitly listed in your package.json or their dependencies.

Shared Across Projects:
If 10 projects use Express version 4.18.0, pnpm stores it once and creates 10 hard links. No duplication, massive disk space savings.

This isn't just a minor optimization, it's a fundamentally better architecture.

Why pnpm Wins: The Real Benefits 🏆

Let me share the concrete improvements I've experienced since switching.

Speed That Actually Matters

pnpm is noticeably faster than npm. We're not talking marginal gains, we're talking "wait, it's already done?" levels of speed.

Cold Installs:
When installing a package for the first time, pnpm downloads it once to the global store. Every subsequent project that uses it just creates a hard link, which is nearly instantaneous.

Warm Installs:
If you've already got the packages in your global store (which you probably do if you work on multiple projects), installations are blazingly fast. What took npm 2-3 minutes might take pnpm 10-20 seconds.

In Practice:
Running pnpm install on a fresh clone of a project feels almost magical. The speed difference is real and noticeable every single day.

Disk Space Savings Are Huge

This one surprised me the most. After switching my entire workspace to pnpm, I freed up over 15GB of disk space. That's not a typo, 15 gigabytes.

Here's why: with npm, if you have 20 projects and 15 of them use React, you have 15 copies of React sitting on your disk. With pnpm, you have one copy with 15 hard links pointing to it.

For common dependencies like:

React and React DOM
Lodash
TypeScript
ESLint and Prettier
Testing libraries

The savings add up fast. And this isn't just about disk space, it's about principle. Why should my machine store the same exact files hundreds of times?

Strict Dependencies Prevent Bugs

This is the feature I didn't know I needed until I had it.

With npm, you can accidentally import packages that aren't in your package.json because they're installed as transitive dependencies. This creates hidden coupling that breaks when those dependencies update.

pnpm's strict mode prevents this entirely. If it's not in your package.json, you can't import it. Period.

Real Example:
I had a project using a utility function from Lodash, but Lodash wasn't in my package.json. It worked because another package happened to depend on Lodash. When that package updated and removed Lodash, my build broke.

With pnpm, this would have failed immediately, forcing me to add Lodash explicitly. The error is caught early instead of in production.

Monorepo Support Is First-Class

If you work with monorepos (and increasingly, who doesn't?), pnpm's workspace support is excellent.

Built-in Workspaces:
Define your workspace structure in pnpm-workspace.yaml, and pnpm handles linking between packages automatically.

Efficient Sharing:
Shared dependencies across workspace packages are stored once and linked everywhere they're needed.

Better Than Alternatives:
I've used npm workspaces and Yarn workspaces. pnpm's implementation feels cleaner and more efficient in practice.

The Lock File Is Better

pnpm's pnpm-lock.yaml is more deterministic than npm's package-lock.json. It stores more information about dependency relationships and produces more consistent results across different environments.

I've had fewer "works on my machine" issues since switching to pnpm. The lock file format just seems more robust.

The Migration: Easier Than You Think 🔄

I was worried about migrating, but it turned out to be trivial.

How to Switch

For an existing project:

# Install pnpm globally
npm install -g pnpm

# Navigate to your project
cd my-project

# Import your package-lock.json
pnpm import

# Install dependencies
pnpm install

That's it. pnpm even converts your package-lock.json to pnpm-lock.yaml automatically.

Commands Are Nearly Identical

If you know npm, you already know pnpm:

# npm commands
npm install package-name
npm uninstall package-name
npm run build
npm test

# pnpm equivalents
pnpm add package-name
pnpm remove package-name
pnpm run build
pnpm test

The only real difference is add instead of install and remove instead of uninstall. Everything else is identical.

Create Aliases If Needed

If you want even less friction:

alias npm=pnpm

Though honestly, once you start using pnpm, you'll appreciate the distinct commands.

The Gotchas (Yes, There Are Some) 😬

Let's be honest, pnpm isn't perfect. Here are the issues I've encountered:

Some Packages Don't Play Nice

Occasionally, you'll find a package that assumes npm's flat structure and breaks with pnpm's strict linking. This is rare, but it happens.

The Fix:
pnpm has a .pnpmfile.cjs where you can configure workarounds. Or you can use the shamefully-hoist flag to flatten dependencies like npm does (though this defeats some of pnpm's benefits).

In practice, I've only hit this issue twice in several months, and both times the package maintainers fixed it quickly.

Smaller Community

While pnpm's adoption is growing rapidly (Vue, Vite, Astro, and other major projects use it), it's still smaller than npm's massive ecosystem.

This means:

Fewer Stack Overflow answers
Less extensive documentation for edge cases
Occasional confusion when following tutorials that assume npm

That said, the community is active and helpful, and most npm knowledge transfers directly.

Initial Learning Curve

Understanding hard links, symlinks, and the global store takes a minute. The first time you look at node_modules in a pnpm project, it looks weird.

But once you understand the model, it makes perfect sense and you appreciate the elegance.

When npm Still Makes Sense 🎯

To be fair, there are scenarios where sticking with npm is reasonable:

You're Brand New to JavaScript:
If you're just learning, start with npm. It's the default, and you'll find more beginner-friendly resources. Switch to pnpm once you're comfortable.

Company Policy:
Some organizations have standardized on npm, and switching requires buy-in. Don't fight that battle unless the benefits are worth it for your specific situation.

Compatibility Concerns:
If you're working on legacy projects with lots of old dependencies that have quirks, npm's more permissive structure might save headaches.

You Don't Care About Disk Space or Speed:
If you have unlimited disk space and don't mind waiting for installations, npm works fine. Some people genuinely don't care about these optimizations.

But for most modern development, pnpm is simply better.

Real-World Impact 💪

Let me share some concrete numbers from my own experience:

Before pnpm (npm):

npm install on a typical Next.js project: ~90 seconds
Disk space for 20 active projects: ~42GB in node_modules
Frequent phantom dependency issues
Occasional lock file conflicts between team members

After pnpm:

pnpm install on the same projects: ~15-20 seconds
Disk space for the same 20 projects: ~27GB total
Zero phantom dependency issues
More consistent installations across the team

The time savings alone add up. If you run install 20 times a day (between switching branches, pulling updates, etc.), pnpm saves you about 20-25 minutes daily. That's over 2 hours per week.

The Broader Ecosystem Is Adopting It 🌍

pnpm isn't just a niche tool anymore. Major projects have switched:

Projects Using pnpm:

Vue 3 and the entire Vue ecosystem
Vite (one of the fastest build tools)
Astro (my personal site's framework)

When tools and frameworks this significant adopt pnpm, it's a strong signal that it's production-ready and worth considering.

My Recommendation 💡

If you're still using npm and any of these apply to you:

You work on multiple projects
You care about build speed
Disk space is a concern
You work with monorepos
You want stricter dependency management

Switch to pnpm. The migration takes 5 minutes, and the benefits are immediate and ongoing.

Will you encounter the occasional quirk? Probably. Is it worth it? Absolutely.

The JavaScript ecosystem moves fast, and package managers are evolving. npm was great for its time, but pnpm represents a better approach to dependency management. It's faster, more efficient, and more correct.

Conclusion 🚀

Here's my challenge: pick one project and try pnpm for a week. Just one week.

npm install -g pnpm
cd your-project
pnpm import
pnpm install

Use it like you'd use npm. Notice the speed. Check your disk space savings. Experience the strict dependency resolution.

After a week, if you genuinely prefer npm, switch back. But I'd bet that like me, you won't want to.

Sometimes the best tools are the ones that just work better in ways you didn't realize you needed. For me, pnpm is one of those tools.

Happy coding! ✨

Hi 👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my links and to check out Domenico Tenace Open Labs for my open-source projects! 🫰🏻

🌲 Linktree: https://linktr.ee/domenicotenace
🐙 Domenico Tenace Open Labs: https://github.com/Domenico-Tenace-Open-Labs

Follow me on dev.to for more articles 👇

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work, you can support me with a small donation. I would be grateful 🥹

Rebuilding domenicotenace.dev: How Pure Astro and CSS Reminded Me That Simple Is Better 🌟

Domenico Tenace — Thu, 12 Mar 2026 16:52:57 +0000

Overview

Hey everyone 👋

I recently did something that felt almost rebellious in today's web development landscape: I completely refactored my personal website using only Astro and vanilla CSS. No React, no Vue, no Tailwind, no animation libraries, no component frameworks. Just HTML, CSS, and a bit of JavaScript where absolutely necessary.

And you know what? It was the most refreshing development experience I've had in years.

Let's start! 🤙

The Decision: Back to Basics ✨

The turning point came when I was helping a friend debug their website. They'd built it with pure HTML and CSS, no build step, no dependencies. When they made a change, they just refreshed the browser. No waiting for compilation, no hot module replacement issues, no dependency conflicts.

It was fast. Not just the website itself, but the entire development experience.

That's when I decided: my personal website doesn't need all this complexity. It's time to simplify.

Why Astro? 🚀

I chose Astro for one simple reason: it lets you write components and modern syntax while outputting pure static HTML. No JavaScript runtime, no virtual DOM, no hydration overhead. Just good old HTML, CSS, and minimal JS where needed.

Astro's philosophy aligned perfectly with what I wanted:

Zero JavaScript by default: Pages are pure HTML unless you explicitly opt-in
Component-based: I can still organize my code cleanly without shipping React
Fast builds: Seriously fast, we're talking seconds
No lock-in: If I want to switch frameworks later, I can easily migrate

The best part? Astro doesn't force you into any particular way of doing things. Want to use vanilla CSS? Great. Want to sprinkle in some JavaScript? Cool. Want to stay 100% static? Perfect.

The Refactoring Process 🔧

The migration was surprisingly straightforward. Here's what I did:

Step 1: Stripped Everything Down

First, I removed all the dependencies. Every single one. The package.json went from 40+ dependencies to just Astro itself. It felt liberating, like decluttering a messy room.

Step 2: Rebuilt the Structure

I created a simple Astro project structure:

src/
├── components/
│   ├── Header.astro
│   ├── Footer.astro
│   └── ProjectCard.astro
├── layouts/
│   └── BaseLayout.astro
└── pages/
    ├── index.astro
    ├── blog/
    └── projects/

Clean, minimal, easy to understand.

Step 3: Pure CSS, No Frameworks

This is where it got interesting. Instead of reaching for Tailwind, I wrote vanilla CSS. And honestly? It was fun.

I created a simple global.css file for handle all CSS.

No build tools, no purging, no configuration. Just CSS that works.

Step 4: Animations in Pure CSS

Here's where I had the most fun. Instead of importing animation libraries, I wrote CSS animations from scratch:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1;  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

Simple, performant, and I have complete control over every detail.

Step 5: JavaScript Only Where Needed

I added minimal JavaScript for interactive features:

Theme toggle (dark/light mode)
Mobile menu toggle
Smooth scroll behavior

Total JavaScript: less than 100 lines. No frameworks, no bundlers, just plain vanilla JS.

What I Rediscovered 💡

This process taught me (or reminded me) of several important lessons:

CSS Is Actually Powerful

Modern CSS is incredibly powerful. Grid, flexbox, custom properties, container queries, scroll-driven animations, we have everything we need to build beautiful, responsive websites without frameworks.

I'd forgotten that. Years of using Bulma, Tailwind, ecc made me think I needed utility classes for everything, but honestly? Writing semantic CSS felt more natural and resulted in cleaner markup.

Less Is Genuinely More

The final bundle size? Tiny. We're talking kilobytes, not megabytes. The Lighthouse score? 100 across the board. The build time? Under 3 seconds.

None of this would be possible with my previous stack. All that complexity was weighing the site down, literally and metaphorically.

Development Can Be Simple

There's something deeply satisfying about opening a file, changing some CSS, refreshing the browser, and seeing the change instantly. No build process, no hot module replacement quirks, no "hmm, why isn't this updating?"

The tight feedback loop made development enjoyable again.

You Don't Need a Framework for Everything

This is the big one. I'd internalized the idea that "professional" websites require modern frameworks. But that's not true. Frameworks solve specific problems, and if you don't have those problems, you don't need the framework.

My personal website doesn't need client-side routing, state management, or component reactivity. It's content, presented nicely. HTML and CSS do that perfectly well on their own.

The Results 📊

Let me share some concrete improvements:

Performance:

Initial load time: 0.3s (down from 1.8s)
Total bundle size: 45KB (down from 380KB)
Lighthouse score: 100 across all metrics
Time to Interactive: instant

Developer Experience:

Build time: 2.4s (down from 28s)
Hot reload: instant
Dependency updates: basically none
Mental overhead: significantly reduced

Maintenance:

Breaking changes: none (it's just HTML/CSS)
Security vulnerabilities: none (no dependencies to patch)
Complexity: minimal

What About the Trade-offs? 🤔

Let's be honest, there are some trade-offs:

No Component Reactivity:
Astro components are static by default. If I need interactivity, I have to add it manually. But for a content site, this is rarely an issue.

Less Tooling:
No automatic CSS optimization, no tree-shaking, no hot module replacement for styles. But honestly? I don't miss it. The simplicity makes up for the lack of bells and whistles.

Manual Responsive Design:
Without Tailwind's responsive utilities, I write media queries by hand. It takes slightly longer, but the CSS is more maintainable and semantic.

More CSS to Write:
No utility classes means writing more CSS. But the total amount of CSS is actually less than my Tailwind config generated, and it's more readable.

These trade-offs are worth it for me. Your mileage may vary.

Who Should Consider This Approach? 🎯

Pure Astro and CSS isn't for everyone, but it's perfect if:

You're building content sites:
Blogs, portfolios, documentation, marketing pages, anything that's primarily content benefits from this approach.

You value simplicity:
If you're tired of complex build processes and dependency management, going minimal is refreshing.

You want to learn the fundamentals:
Writing vanilla CSS makes you a better developer. You understand what your tools are doing under the hood.

Performance matters:
If you need the absolute fastest site possible, less code wins every time.

You don't need heavy interactivity:
If your site is mostly static content with occasional interactive elements, you don't need a full framework.

When You Still Need Frameworks 🔄

To be clear, I'm not saying frameworks are bad. They're excellent tools for the right jobs:

Complex web apps:
If you're building a dashboard, SaaS platform, or interactive application, React/Vue/etc. make total sense.

Teams with existing expertise:
If your team knows React and you're building something quickly, use React. Don't reinvent the wheel.

Lots of client-side state:
When you need to manage complex client-side state, frameworks provide the structure to do it well.

Rapid prototyping:
Component libraries and frameworks can speed up initial development significantly.

The key is choosing the right tool for the job, not defaulting to the most popular stack.

The Bigger Picture 🌍

This refactoring taught me something important about modern web development: we've collectively become a bit obsessed with complexity.

We reach for frameworks by default, even when they're overkill. We add dependencies without thinking. We over-engineer simple problems because that's what "professional" developers do.

But sometimes, the best solution is the simplest one.

HTML and CSS have been around for decades because they're good. They're stable, they're fast, they're simple. Modern CSS is powerful enough to build beautiful interfaces without frameworks.

Astro lets us use modern development practices (components, TypeScript, etc.) while outputting pure, simple code. It's the best of both worlds.

My Challenge to You 💪

If you're reading this and thinking "hmm, maybe I've over-engineered my site too," I challenge you:

Try building something with pure HTML and CSS. No frameworks, no libraries, just the fundamentals. See how it feels.

You might be surprised at how freeing it is.

And if you need a static site generator, give Astro a shot. It's genuinely excellent at letting you write simple code that performs beautifully.

Conclusion 🌟

Rebuilding domenicotenace.dev with pure Astro and CSS reminded me why I fell in love with web development in the first place: the joy of creating something that works, that's fast, that's simple.

We don't always need the latest framework or the trendiest library. Sometimes, the best code is the code we don't write.

If you take one thing from this article, let it be this: question your stack. Ask yourself if you really need all those dependencies. Challenge the assumption that complexity equals professionalism.

Often, the simplest solution is the best one.

Happy coding! ✨

🌲 Linktree: https://linktr.ee/domenicotenace
🐙 Domenico Tenace Open Labs: https://github.com/Domenico-Tenace-Open-Labs

Follow me on dev.to for more articles 👇

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work, you can support me with a small donation. I would be grateful 🥹

Adding Capacitor to Glif with Antigravity: The Good, The Bad, and The Reality Check 📱

Domenico Tenace — Thu, 26 Feb 2026 17:46:28 +0000

Overview

Hey everyone 👋

I recently decided to take Glif, my minimalist QR code generator web app, and turn it into a proper mobile app using Capacitor. For those who don't know, Glif is a simple Nuxt app that lets you create and download customizable QR codes, nothing fancy, just clean and functional.

Since I've been using Google Antigravity for various projects, I figured: why not let it handle the Capacitor integration? It's supposed to be great for frontend work, and mobile development is definitely frontend territory, right?

Well... let me tell you about that experience. Spoiler alert: Antigravity helped, but it wasn't the smooth ride I expected.

Let's start! 🤙

What Is Capacitor and Why Add It to Glif? 🤔

First, a quick explainer for anyone unfamiliar. Capacitor is Ionic's cross-platform runtime that lets you turn web apps into native mobile apps for iOS and Android. Think of it as a bridge: your web code (HTML, CSS, JavaScript) runs inside a native container, and Capacitor provides APIs to access device features like the camera, filesystem, notifications, etc.

For a tool like Glif, going mobile made perfect sense:

Why Glif Needs Mobile:

QR codes are inherently mobile-first (people scan them with phones)
Users might want to generate QR codes on the go
Having a native app feels more legitimate than "just a website"
Access to device features like sharing, saving to photos, etc.
Potential for offline functionality

The web version works fine, but a native mobile app would be the natural evolution. Capacitor seemed like the obvious choice, it's well-maintained, works great with Vue/Nuxt, and doesn't require rewriting the entire app.

The Plan: Let Antigravity Handle It ⚡

I've had good experiences using Antigravity for frontend work (I literally built an entire Material Design CSS library with it), so I was optimistic. My thinking was:

Capacitor integration is well-documented
It's mostly configuration and boilerplate
Antigravity should be able to follow the Capacitor docs
The agent can test the mobile build in the browser
This should be straightforward

So I fired up Antigravity in Planning mode and gave it the task:

"Integrate Capacitor into this Nuxt 4 project to create iOS and Android builds. Configure all necessary plugins for a QR code app including Filesystem."

The agent created a plan, I reviewed it, and we were off to the races.

What Went Well ✅

Let me start with the positives, because Antigravity did help in several areas:

Initial Setup Was Smooth

The agent handled the initial Capacitor installation perfectly:

Installed @capacitor/core and @capacitor/cli
Ran npx cap init with correct project details
Added Android platforms
Created the capacitor.config.ts file with proper configuration

All the boilerplate stuff that's tedious but straightforward worked flawlessly. This is exactly what AI assistants should excel at.

Plugin Installation

Antigravity correctly identified and installed the necessary plugins:

@capacitor/filesystem for saving QR codes
@capacitor/splash-screen for native app experience
@capacitor/status-bar for handle status bar
@capacitor-community/media for handle media files (like images)

It even configured them properly in the Capacitor config, which saved me from reading documentation.

Build Configuration

The agent modified the Nuxt config to work with Capacitor:

Set up the correct output directory
Configured SSR settings (disabled, since Capacitor needs SPA)
Adjusted router settings for mobile
Created proper build scripts in package.json

This was actually helpful because the Nuxt + Capacitor combo has some quirks that the agent navigated correctly.

Where Antigravity Struggled 😬

Now for the part where things got messy. Antigravity wasn't terrible, but it definitely wasn't at 100% performance:

Native Platform Specifics

The agent struggled with Android-specific configurations. For example:

AndroidManifest.xml permissions were incomplete
Didn't configure proper app theming
Missed some required Gradle configuration
Icons and splash screens needed manual adjustment

Again, the agent knew what needed to be done but couldn't execute it properly.

Build Errors and Debugging

This is where Antigravity really fell short. When builds failed, the agent struggled to:

Diagnose Real Errors:
The first Android build threw a Gradle error. I asked Antigravity to fix it, and it suggested changes that didn't address the actual issue. After three attempts, I just Googled the error myself and fixed it in 5 minutes.

Understand Native Tooling:
Antigravity doesn't actually run Android Studio, so when I pasted error messages from those tools, its suggestions were hit-or-miss. It could recognize common errors but anything specific required me to debug manually.

Handle Version Conflicts:
Dependency conflicts between Capacitor plugins and Nuxt modules were a pain. The agent suggested version combinations that didn't work, and I ended up trial-and-error fixing them myself.

Performance Optimization

The agent successfully integrated Capacitor, but the resulting app wasn't optimized:

Bundle size was larger than necessary
Some Nuxt modules loaded unnecessarily in mobile context
Animation performance on lower-end devices was choppy
Initial load time was slower than it should be

When I asked Antigravity to optimize, it made generic suggestions (tree-shaking, lazy loading, etc.) but couldn't implement them effectively for the Capacitor + Nuxt combo.

Mobile-Specific UI Issues

The web version of Glif looked fine, but mobile had problems:

Touch targets were too small in some places
Bottom navigation issues with Android gesture navigation
Keyboard behavior wasn't optimized for mobile

Antigravity suggested CSS fixes, but many required understanding native mobile behavior that it just didn't grasp well enough.

The Reality: Manual Work Was Necessary 🔧

Here's what I ended up doing manually:

Fix AndroidManifest.xml completely
Configure proper app theming and colors
Set up icons and splash screens correctly
Adjust Gradle dependencies to resolve conflicts

Code Optimization:

Manually remove unnecessary Nuxt modules for mobile
Optimize bundle size by tree-shaking unused code
Improve touch interactions with mobile-specific CSS
Fix status bar and safe area issues with custom code

Testing:

Test on actual devices (simulator isn't enough)
Fix device-specific bugs Antigravity couldn't predict
Optimize performance on lower-end hardware

Honestly, I'd estimate Antigravity handled about 60% of the work. The other 40% required manual intervention, native tooling knowledge, and debugging skills.

Why Antigravity Wasn't at 100% 🧠

After reflecting on the experience, I think I understand why Antigravity underperformed:

It Can't Actually Run Native Tooling

Antigravity's browser integration is great for web testing, but it can't Android Studio. This means:

It can't validate native builds
It can't see build errors in native IDEs
It can't test on actual devices or simulators

For truly mobile-native work, this is a significant limitation.

Capacitor Is a Bridging Technology

Capacitor sits at the intersection of web and native, which means you need knowledge of both worlds. Antigravity is strong on the web side but weak on the native side. When problems arise in the native layer, the agent struggles.

Documentation Isn't Enough

The agent can read Capacitor docs, but implementing best practices requires experience. Things like:

Proper safe area handling
Performance optimization for mobile devices
Platform-specific UI patterns
Native permission flows

These require knowing mobile development, not just reading about it.

Nuxt + Capacitor Is a Niche Combo

Most Capacitor tutorials focus on React, Angular, or vanilla JS. The Nuxt integration has specific quirks and gotchas that aren't as well-documented. Antigravity didn't have enough training data on this specific stack.

What I Learned 💡

This experience taught me some valuable lessons:

Antigravity Is Still Best for Pure Web:
When the work is 100% web-based (HTML, CSS, JavaScript, Vue components), Antigravity excels. The moment you cross into native territory, its effectiveness drops significantly.

Hybrid Frameworks Need Hybrid Knowledge:
Using Capacitor effectively requires understanding both web and native development. An AI that's strong in one but weak in the other will struggle with the integration layer.

Boilerplate vs. Implementation:
Antigravity is excellent at boilerplate and initial setup. But when things go wrong or need optimization, you still need traditional debugging skills.

Testing Matters:
The agent can't test on actual devices, which is critical for mobile development. Until AI can actually run apps on phones and see visual/performance issues, it'll miss important problems.

Documentation Has Limits:
Reading docs doesn't replace experience. Mobile development has countless edge cases and platform quirks that you only learn by doing.

The Current State of Glif Mobile 📱

Despite the struggles, Glif now has working Android builds! The apps:

Generate QR codes with custom colors and sizes
Save QR codes to the device photo library
Work offline (since it's all client-side)
Have proper icons, splash screens, and native feel

It's not perfect, there are still optimizations I want to make, but it's functional and feels like a real mobile app.

Antigravity got me maybe 60-70% of the way there, which isn't nothing. But the final 30-40% required rolling up my sleeves and getting my hands dirty with Android Studio.

Should You Use Antigravity for Capacitor Integration? 🎯

Based on my experience, here's my take:

Use Antigravity if:

You need help with initial setup and boilerplate
You're already comfortable with mobile development and just want to speed up configuration
You're okay handling native tooling yourself when things go wrong
Your app is relatively simple without complex native integrations

Don't rely solely on Antigravity if:

This is your first time with Capacitor or mobile development
Your app needs complex native features or optimizations
You need production-ready, fully optimized mobile apps without manual work

The Reality:
Antigravity is a helpful assistant for Capacitor integration, but it's not a replacement for mobile development knowledge. Think of it as a junior developer who can handle setup tasks but needs supervision for the complex stuff.

What I'd Do Differently Next Time 🔄

If I were to integrate Capacitor into another project with Antigravity, I'd:

Set Realistic Expectations:
Go in knowing I'll need to manually handle native configuration and optimization. Don't expect the agent to deliver a production-ready mobile app.

Use It for What It's Good At:
Let Antigravity handle installation, basic config, and documentation. Handle native-specific work myself from the start.

Test Earlier:
Don't wait for the agent to "finish" before testing on actual devices. Test incrementally and catch issues early.

Have Native Tools Ready:
Have Android Studio open from the beginning. Don't expect to complete mobile development purely through the Antigravity interface.

Combine with Traditional Resources:
Use Antigravity alongside Stack Overflow, Capacitor docs, and community forums. Don't rely on it exclusively.

Conclusion 🌟

Adding Capacitor to Glif was a learning experience. Antigravity helped significantly with setup and boilerplate, but mobile development's native aspects required traditional hands-on work.

The 60-70% of work the agent handled was genuinely useful and saved me time. But that final 30-40% reminded me that AI coding tools, as impressive as they are, still have clear limitations when you cross platform boundaries.

Mobile development is complex, spanning web tech and Android. Until AI tools can truly understand and test across all these layers, they'll remain helpful assistants rather than complete solutions.

That said, would I use Antigravity again for Capacitor integration? Probably yes, but with realistic expectations and my native IDEs ready to go from day one.

Have you tried using AI coding tools for mobile development? Drop a comment with your experiences, I'm curious if others have hit similar roadblocks or found better workflows!

Check out:

🌲 Linktree: https://linktr.ee/domenicotenace
🐙 Domenico Tenace Open Labs: https://github.com/Domenico-Tenace-Open-Labs

Follow me on dev.to for more articles 👇

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work, you can support me with a small donation. I would be grateful 🥹

Building Plus Ultra: How Antigravity Helped Me Bring Material Design to Bulma CSS 🎨

Domenico Tenace — Thu, 12 Feb 2026 11:32:17 +0000

Overview

Hey everyone 👋

Today I want to share something I've been working on that combines two things I love: clean CSS frameworks and Material Design aesthetics. I just launched Plus Ultra, an open-source CSS library that brings Material Design components to Bulma CSS while keeping all the flexbox goodness that makes Bulma so powerful.

And here's the kicker: I built most of it using Google Antigravity, which turned out to be an absolute beast for frontend work. If you're wondering whether Antigravity is any good for UI development, let me tell you, it's incredible.

Let's start! 🤙

What Is Plus Ultra? 🚀

First, let me explain what Plus Ultra actually is and why I built it.

The Concept

Bulma is one of my favorite CSS frameworks. It's lightweight, pure CSS (no JavaScript), based on flexbox, and incredibly easy to use. The problem? Its default aesthetic is pretty basic. The components work great, but they look... well, vanilla.

Material Design, on the other hand, is gorgeous. Google's design system is polished, modern, and has that clean "premium" feel. But most Material Design implementations (like Material-UI) are tied to specific JavaScript frameworks, which defeats the purpose of Bulma's simplicity.

So I thought: what if we could have the best of both worlds? Bulma's flexbox power and simplicity, but with Material Design's visual polish?

That's Plus Ultra.

What It Does

Plus Ultra takes Bulma's components and transforms them into Material Design equivalents using pure CSS/Sass:

Material buttons with proper elevation, ripple effects (CSS-only), and Material color schemes
Material cards with the signature shadow system and hover states
Material form inputs with floating labels and Material-style validation
Material navigation components following Material guidelines
Material modals and dialogs with proper transitions and backdrops

The key is that it's built on top of Bulma, not instead of it. You still get all of Bulma's flexbox utilities, grid system, and helper classes. Plus Ultra just makes everything look like Material Design.

Why "Plus Ultra"?

The name comes from one of my all-time favorite anime series: My Hero Academia 😄
"Plus Ultra" is actually a Latin Phrase. It translates to "Further Beyond." In My Hero Academia, it has been adopted as the school motto of U.A. High.

The Tech Stack 💻

Let me break down what Plus Ultra is built with:

Core:

Bulma CSS as the foundation (obviously)
Sass/SCSS for all the Material Design styling
Pure CSS for animations and transitions
No JavaScript dependencies (keeping Bulma's philosophy)

Build Tools:

pnpm for package management
Sass compiler for building the final CSS

Material Design System:

Following Google's Material Design 3 guidelines
Custom color system matching Material palettes
Elevation system with proper shadows
Material motion and transitions

The beauty is that it's just CSS. No complicated build process, no JavaScript runtime, no framework lock-in. Install it, import it, and your Bulma components instantly look like Material Design.

How Antigravity Changed Everything ⚡

Now here's where it gets interesting. I could have built Plus Ultra the old-fashioned way, manually writing Sass, testing in the browser, iterating on designs. But I decided to use Google Antigravity, and honestly, it transformed the entire development process.

Frontend Is Antigravity's Sweet Spot

I've used Antigravity for various projects, but it absolutely shines for frontend work. Here's why:

Visual Feedback Loop:
Antigravity's integrated browser means the agent can actually see the components it's building. It's not just writing CSS blindly, it's rendering the results, evaluating the visual output, and iterating based on what it sees.

When I asked the agent to create a Material Design button, it would:

Write the initial Sass
Compile and render it in the browser
Visually compare it to Material Design specs
Adjust colors, shadows, and spacing until it matched
Show me the final result

This visual validation is huge for UI work. The agent isn't guessing, it's verifying.

Material Design Knowledge:
Gemini (which powers Antigravity) has deep knowledge of Material Design principles. When I asked for "Material Design elevation level 2," it knew exactly what shadow values to use. When I requested "Material ripple effect," it understood the animation timing and easing functions.

This saved me countless hours of referencing Material Design documentation.

Rapid Iteration:
Frontend work is all about iteration. Try a color, see how it looks, adjust. Try a shadow, see if it feels right, tweak. Antigravity excels at this:

Me: "Make the button shadow more subtle"
Agent: adjusts shadow values, shows result
Me: "Actually, go back to the original but reduce opacity"
Agent: reverts and modifies, shows result

This back-and-forth happened in seconds, not minutes.

Specific Examples from Building Plus Ultra

Let me share some concrete examples of how Antigravity helped:

Example 1: Material Cards

Task: "Create a Material Design card component that works with Bulma's .card class"

What Antigravity did:

Analyzed Bulma's existing card structure
Added Material Design elevation (box-shadow) with proper values
Implemented hover state with elevation increase
Added proper border-radius matching Material specs
Created transition animations for smooth hover effects
Ensured responsive behavior on mobile

The agent created the entire component in one go, tested it visually, and the result was production-ready. I made minor tweaks to spacing, but 95% was perfect on first attempt.

Example 2: Floating Label Inputs

Task: "Implement Material Design floating labels for Bulma form inputs"

This is actually complex because floating labels require specific CSS logic:

Label starts inside the input
When focused or filled, label floats up and shrinks
Smooth transitions between states
Proper color changes
Accessible implementation

Antigravity not only wrote the CSS but also created test cases showing:

Empty input (label inside)
Focused input (label floating)
Filled input (label stays floating)
Error state (red accent)
Success state (green accent)

The agent validated each state visually before showing me the final component.

Example 3: Material Color System

Task: "Implement Material Design color palette with Sass variables compatible with Bulma's color system"

Antigravity:

Created Sass maps for Material color palettes (primary, secondary, error, etc.)
Integrated them with Bulma's existing color variables
Generated utility classes (.has-background-primary, .has-text-secondary, etc.)
Ensured proper contrast ratios for accessibility
Created documentation showing all available colors

This would have taken me hours manually. The agent did it in minutes.

Planning Mode Was Perfect for This

I used Planning mode extensively for Plus Ultra, and it was ideal for a project like this.

Before implementing each component, the agent would create a plan showing:

Which Material Design specs it would follow
How it would integrate with existing Bulma classes
What Sass variables and mixins it would create
What the final output would look like

I could review the plan, suggest adjustments (like "use Bulma's existing spacing variables instead of creating new ones"), and then approve. This ensured consistency across all components.

What I Learned About Antigravity for Frontend 🧠

After building Plus Ultra with Antigravity, here are my takeaways:

Antigravity is exceptionally strong for:

Component-based UI development
Design system implementation
CSS/Sass architecture
Responsive design work
Visual consistency across components
Rapid prototyping and iteration

The visual feedback loop is critical.
For UI work, being able to see results immediately and iterate visually makes Antigravity far more effective than text-based coding assistants.

Material Design knowledge is built-in.
Having an AI that deeply understands design systems means less time reading specs and more time building.

Planning mode prevents inconsistency.
For a library like Plus Ultra where consistency is crucial, Planning mode's upfront architecture decisions were invaluable.

The Current State and What's Next 🌟

Plus Ultra is currently in early development. The foundation is there, core Material components working on top of Bulma, but there's still work to do.

What's working now:

Material buttons with elevation and states
Material cards with proper shadows
Basic floating label inputs
Material color palette integration
Foundation Sass architecture

What's coming:

Complete form component library
Material navigation components
Modal and dialog components
Material tables and lists
Comprehensive documentation
Live demo site
npm package for easy installation

I'm building this in the open under Domenico Tenace Open Labs, so anyone can follow along, contribute, or use what's already there.

And yes, I'll be continuing to use Antigravity for development. It's been too effective not to.

Why Open Source? 🌍

You might wonder why I'm building this as an open-source project instead of keeping it proprietary.

Simple: the best tools I use every day are open source. Bulma is open source. Material Design specs are open. The entire web is built on open technologies.

Plus Ultra stands on the shoulders of giants. The least I can do is contribute back to the ecosystem that's given me so much.

If other developers find it useful, awesome. If someone wants to contribute improvements, even better. And if it helps people build better-looking websites with Bulma, that's the whole point.

What I Want to Hear From You 💬

Alright, your turn! I have questions for the community:

If you use Bulma:

Would a Material Design version interest you?
What components would be most valuable?
What design systems would you like to see integrated with Bulma?

If you use Material Design:

Do you prefer React-based Material UI or pure CSS solutions?
What features are non-negotiable in a Material Design implementation?

If you've used Antigravity for frontend:

How has your experience been with UI development?
Did you find the browser integration as useful as I did?
What tricks or workflows have you discovered?

If you're considering trying Antigravity:

What questions do you have about using it for frontend work?
What kinds of projects are you thinking about building?

Drop a comment below! I'm genuinely curious to hear if others are using Antigravity for frontend work and what your experiences have been. The tool is still new, and community knowledge sharing helps everyone.

Conclusion 🎯

Building Plus Ultra has been a blast, and Antigravity made the process significantly faster and more enjoyable than traditional development would have been.

The combination of Bulma's simplicity and Material Design's aesthetics feels like a natural fit, and having an AI assistant that understands both design systems, can write clean Sass, and can visually validate the results is incredibly powerful.

If you're doing frontend work and haven't tried Antigravity yet, I highly recommend giving it a shot. The browser integration alone makes it worth exploring. And if you're a Bulma user looking for a Material Design aesthetic, keep an eye on Plus Ultra, we're just getting started.

Check out the repo, star it if you're interested, and feel free to contribute or provide feedback. This is a community project, and the more input we get, the better it becomes.

Happy coding! ✨

🌲 Linktree: https://linktr.ee/domenicotenace
🐙 Domenico Tenace Open Labs: https://github.com/Domenico-Tenace-Open-Labs

Follow me on dev.to for more articles 👇

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work, you can support me with a small donation. I would be grateful 🥹

Planning vs Fast Mode in Google Antigravity: When and How to Use Each ⚡

Domenico Tenace — Tue, 03 Feb 2026 09:09:36 +0000

Overview

Hey everyone 👋

If you've started exploring Google Antigravity, you've probably noticed those two options sitting right there in the agent panel: Planning and Fast modes. At first glance, they might seem like just different speeds for getting stuff done, but trust me understanding when to use each one is the difference between feeling like a productivity wizard and wondering why the agent just did something completely unexpected.

After spending significant time with Antigravity across various projects (from quick bug fixes to complex refactoring), I've learned that these modes represent fundamentally different approaches to problem solving. Choosing the right one can make or break your workflow.

Today I want to dive deep into both modes: what makes them different, when to use each, how to get the most out of them, and the gotchas you need to watch out for. By the end, you'll know exactly which mode to reach for in any situation.

Let's start! 🤙

The Core Philosophy: Two Ways to Think 🤔

Before we get into the technical details, let's understand the philosophical difference between these modes, because it affects everything about how they work.

Planning Mode: The Architect's Approach

Planning mode is all about thinking before doing. When you give the agent a task in Planning mode, it doesn't immediately start writing code. Instead, it takes a step back and asks itself:

What exactly are we trying to achieve?
What are the different components involved?
What's the best approach to solve this?
What files will need to be created or modified?
What dependencies or technologies should we use?
What are the potential challenges or edge cases?

Only after answering these questions does it create a detailed implementation plan. This plan is a tangible artifact a document you can read, review, comment on, and approve before any code is written.

Think of it like an architect creating blueprints before construction begins. You get to see the entire vision, suggest changes, and ensure everyone's on the same page before the first line of code is touched.

Fast Mode: The Builder's Approach

Fast mode is the opposite philosophy: just do it. When you give the agent a task in Fast mode, it immediately starts executing. No plans, no artifacts, no waiting for approval. It interprets your request and takes action right away.

This isn't carelessness, it's confidence. Fast mode assumes the task is straightforward enough that the agent can handle it without needing to draft a comprehensive plan first. It's like asking a skilled carpenter to fix a wobbly table leg, they don't need to draw blueprints; they just grab their tools and fix it.

The key insight: Planning mode prioritizes clarity and control. Fast mode prioritizes speed and efficiency. Neither is "better", they solve different problems.

Planning Mode Deep Dive 📋

Let's start with Planning mode since it's the more complex (and often more powerful) of the two.

How Planning Mode Works

When you initiate a task in Planning mode, here's what happens behind the scenes:

Step 1: Initial Analysis

The agent reads your prompt and analyzes the scope. It examines your current workspace, identifies relevant files, and understands the context of what you're asking for.

Step 2: Plan Creation

The agent generates an Implementation Plan artifact. This document typically includes:

Goal: A clear statement of what the task aims to achieve
Tech Stack: The technologies, frameworks, and libraries it plans to use
High-Level Approach: The overall strategy for solving the problem
Detailed Steps: A breakdown of specific actions it will take
File Changes: Which files will be created, modified, or deleted
Testing Strategy: How it will verify the implementation works

This plan appears as an artifact in your workspace that you can read, comment on, and interact with.

Step 3: Your Review and Feedback

Here's where the magic happens: you can provide feedback directly on the plan. You can:

Highlight specific sections and add comments
Suggest alternative approaches
Ask clarifying questions
Request changes before any code is written
Approve the plan as-is

The agent reads your feedback and incorporates it into its understanding before proceeding.

Step 4: Execution

Once you approve (explicitly or implicitly by letting it proceed), the agent executes the plan step by step. It follows the roadmap it created, implementing each component methodically.

Step 5: Walkthrough Generation

After completing the task, the agent generates a Walkthrough artifact documenting what it did, what files changed, what features were added, and recommended next steps.

When to Use Planning Mode

Planning mode shines in specific scenarios. Here's when you should reach for it:

Complex, Multi-Step Tasks

If the task requires multiple components working together, Planning mode is your friend. Examples:

"Build a todo list app with user authentication, database storage, and responsive design"
"Refactor the entire authentication system to use OAuth 2.0"
"Create a CI/CD pipeline with automated testing and deployment"

These tasks have many moving parts. The planning phase ensures everything is coordinated correctly.

When You Need Oversight

If you want to understand the agent's approach before it starts making changes, Planning mode gives you that visibility. This is crucial when:

Working on production code
Making changes to critical systems
Learning how the agent solves problems
Ensuring the solution aligns with your architecture

Unfamiliar Domains

When you're asking the agent to work with technologies or frameworks you're less familiar with, Planning mode lets you review the approach and learn from the plan before implementation.

For example, if you're new to React and ask the agent to build a component, the plan will show you the React patterns and best practices it intends to use. You can learn from this before any code is written.

Large-Scale Refactoring

Refactoring across many files is risky without a plan. Planning mode ensures the agent has thought through all the implications and will make consistent changes throughout the codebase.

I used this extensively when refactoring Easy Kit Utils, the planning phase showed exactly which files would be touched and how the changes would maintain consistency.

Collaborative Development

If you're working on a team project or pair programming with the agent, Planning mode enables better collaboration. Your teammates can review the plan, provide input, and ensure the implementation aligns with team standards.

When You're Not Sure What You Want

Sometimes you have a vague idea but haven't fully crystallized the requirements. Planning mode can help you think through the problem by generating a plan you can then refine.

For example: "I need some kind of data visualization for user analytics" → the agent creates a plan proposing a specific approach → you review and say "actually, I want interactive charts, not static ones" → the plan updates before any coding happens.

How to Use Planning Mode Effectively

To get the most out of Planning mode, follow these practices:

Be Clear About the Goal, Not the Implementation

Good prompt:

"Create a user authentication system with email/password login, password reset functionality, and session management."

Less effective prompt:

"Use bcrypt to hash passwords in the users table and create a sessions table with JWT tokens and..."

Planning mode works best when you describe WHAT you want, not HOW to build it. Let the agent figure out the implementation details—that's what the planning phase is for.

Read the Plan Thoroughly

Don't just skim and approve. Actually read the implementation plan. Look for:

Does the tech stack make sense?
Are there parts of the problem the agent missed?
Are there simpler approaches?
Does this align with your project's architecture?

Use Inline Comments

Antigravity supports Google Docs-style commenting directly on plan artifacts. Highlight a section of the plan and add a comment like:

"Instead of using PostgreSQL, can we use SQLite for this prototype?"

"Don't forget to handle the edge case where the user's email isn't verified."

The agent reads these comments and adjusts its approach accordingly.

Iterate on the Plan

Don't feel pressured to approve immediately. It's okay to go back and forth:

Agent creates initial plan
You comment with changes
Agent updates the plan
You review again
Approve when satisfied

This iteration happens before any code is written, which is much more efficient than fixing issues after implementation.

Approve Explicitly

When you're satisfied with the plan, explicitly approve it by saying something like:

"Looks good, proceed with implementation"

"Approved, let's build this"

This signals to the agent that it should move from planning to execution.

Common Planning Mode Pitfalls

Even with the best intentions, there are traps to avoid:

Over-Planning Small Tasks

Planning mode has overhead. For tiny tasks like "fix the typo in line 42," the planning phase is overkill. Use Fast mode instead.

Analysis Paralysis

Don't get stuck endlessly iterating on the plan. At some point, you need to commit and see the implementation. Perfect plans rarely survive contact with reality anyway.

Ignoring the Plan

Some developers approve plans without reading them, defeating the whole purpose of Planning mode. If you're going to skip the plan review, just use Fast mode.

Assuming the Plan Is Perfect

The plan is a guide, not gospel. As the agent executes, it might discover issues or better approaches. Be flexible and let it adapt if needed.

Fast Mode Deep Dive ⚡

Now let's talk about Fast mode—the quick-and-dirty, get-it-done-now approach.

How Fast Mode Works

Fast mode is beautifully simple:

Step 1: Interpret the Request

The agent reads your prompt and immediately understands what action to take.

Step 2: Execute

It performs the task right away. No plans, no artifacts, no waiting. It makes the changes or writes the code directly.

Step 3: Report Back

The agent confirms what it did and shows you the results.

That's it. Three steps, minimal overhead, maximum speed.

When to Use Fast Mode

Fast mode is perfect for specific scenarios:

Quick Edits and Fixes

Simple, localized changes are Fast mode's bread and butter:

"Fix the typo on line 23"
"Rename this variable to be more descriptive"
"Add a console.log statement to debug this function"
"Change the button color to blue"
"Update the heading text to 'Welcome to Our App'"

These tasks are so straightforward that planning would just slow things down.

Obvious Solutions

When there's only one reasonable way to solve a problem, Fast mode is efficient:

"Center this div horizontally"
"Add error handling to this API call"
"Convert this callback to async/await"
"Sort this array alphabetically"

The implementation is obvious, so just do it.

Iterative Development

When you're rapidly prototyping and trying things out, Fast mode keeps you in flow:

"Try making the sidebar wider"
"Add another field to this form"
"Change the API endpoint to /v2/users"

You can make quick changes, see the results, and iterate without the overhead of planning each tiny adjustment.

Familiar Patterns

If you're working with code patterns you know well and you're confident in the approach, Fast mode gets you there faster:

"Add a new route for /profile"
"Create a simple React component for displaying user info"
"Write a unit test for this function"

You know what good looks like, so you don't need to review a plan first.

Following Up on Existing Work

When the agent has already done the heavy lifting and you just need small adjustments:

"Make the font slightly larger"
"Add a bit more padding"
"Fix that bug we just discovered"

These follow-up tasks build on existing context and don't need new plans.

Exploratory Tasks

When you're just trying something to see if it works:

"Can you add syntax highlighting to this code block?"
"Try implementing this feature and let's see how it looks"

If it doesn't work, you'll ask for something different. No need for upfront planning.

How to Use Fast Mode Effectively

Fast mode is simple, but there are still best practices:

Be Specific and Clear

Since there's no planning phase to clarify ambiguity, your prompt needs to be precise:

Good:

"Change the primary button background color from blue to green"

Less effective:

"Make the button look better"

The second prompt might work, but you're leaving too much to interpretation.

One Task at a Time

Fast mode works best with single, focused requests:

Good:

"Add input validation for the email field"

Less effective:

"Add input validation, fix the layout issues, and update the error messages"

If you have multiple tasks, either make separate requests in Fast mode or switch to Planning mode.

Stay Engaged

Since Fast mode executes immediately, watch what the agent does. If it goes in the wrong direction, you can course-correct quickly:

"Wait, I meant center it vertically, not horizontally"

The fast feedback loop is part of Fast mode's advantage.

Use It for Learning the Codebase

Fast mode is great for quick explorations:

"Show me all the places where this function is called"

"Add comments explaining what this code does"

These quick tasks help you understand the code without major changes.

Common Fast Mode Pitfalls

Fast mode's simplicity can also create problems:

Using It for Complex Tasks

The biggest mistake is using Fast mode for tasks that actually need planning:

Bad idea:

"Rebuild the entire user authentication system to use OAuth"

The agent will try to do it, but without planning, it might make inconsistent changes, miss edge cases, or choose a suboptimal approach.

If the task touches multiple files or has significant complexity, use Planning mode.

Vague Instructions

In Planning mode, vague instructions get clarified during the planning phase. In Fast mode, vague instructions lead to unexpected results:

"Make this component better"

Better is subjective. The agent might optimize for performance when you wanted visual improvements, or vice versa.

Chaining Too Many Fast Requests

Making dozens of sequential Fast mode requests can lead to inconsistency:

"Add field A"
"Add field B"

"Add field C"
"Now style them all"
"Actually, use a different layout"

At this point, you've essentially created a complex task piecemeal. Would've been better to use Planning mode from the start.

Assuming It'll Get Everything Right

Fast mode trades thoroughness for speed. Always review the results, especially for code that'll go to production.

The Practical Comparison: Side by Side 🔄

Let's look at how the same task would play out in each mode.

Example Task: "Create a Contact Form"

Planning Mode Approach:

You submit: "Create a contact form with name, email, message fields, and submit functionality"
Agent creates an implementation plan:

   Goal: Build a functional contact form

   Tech Stack:
   - HTML5 for structure
   - CSS3 for styling
   - Vanilla JavaScript for validation
   - FormSubmit.co for backend handling

   Steps:
   1. Create contact.html with semantic form structure
   2. Implement validation for required fields and email format
   3. Add CSS for responsive design
   4. Include client-side validation with clear error messages
   5. Set up form submission handling
   6. Test across different screen sizes

   Files to create:
   - contact.html
   - contact.css
   - contact.js

You review the plan, notice it's using an external service, comment: "Actually, let's handle the form submission ourselves with a simple PHP backend"
Agent updates the plan to include a PHP handler
You approve
Agent implements everything according to the revised plan
Agent generates a walkthrough showing what was built and how to test it

Total time: ~5-10 minutes, most of which is execution
Your involvement: Reading plan, commenting, approving

Fast Mode Approach:

You submit: "Create a contact form with name, email, message fields, and submit functionality"
Agent immediately creates the form with sensible defaults
You see the result, realize you wanted it styled differently
You request: "Make it look more modern with better spacing"
Agent updates the CSS
You notice validation is missing
You request: "Add form validation"
Agent adds validation
You realize you need a backend
You request: "Add a PHP handler for form submission"
Agent creates the handler

Total time: Similar overall, but broken into many small requests
Your involvement: Constant back-and-forth adjustments

The Difference:

Planning mode gave you visibility and control upfront, leading to a more coherent result in one go. Fast mode required iteration to arrive at the same place.

For a task like this, Planning mode is better. But if you just wanted to add one field to an existing form? Fast mode wins every time.

Switching Between Modes: When to Change Your Approach 🔀

Here's something important: you're not locked into one mode for your entire session. You can (and should) switch based on the task at hand.

How to Switch Modes

It's simple. In the agent panel, you'll see a toggle between "Planning" and "Fast" modes. Click the one you want, or use the keyboard shortcut Cmd/Ctrl + .

The current mode is always displayed in the chat interface, usually in the lower left of the input box.

Strategic Mode Switching

Here's how experienced Antigravity users flow between modes:

Start Big, Then Get Small

Use Planning mode to build the initial feature or system, then switch to Fast mode for tweaks and refinements:

Planning: "Build a blog system with posts, comments, and user authentication"
[Implementation happens]
Fast: "Make the comment form slightly wider"
Fast: "Add a character count to the comment field"
Fast: "Change the submit button text to 'Post Comment'"

Use Planning for Unknowns, Fast for Knowns

When you're unsure of the best approach, use Planning to get the agent's thoughts. Once the pattern is established, use Fast for similar tasks:

Planning: "Create a reusable card component with image, title, and description"
[Review plan, approve, implementation happens]
Fast: "Create another card component for product listings using the same pattern"

Complex Then Simple

After completing a complex task in Planning mode, use Fast mode to handle the inevitable small issues:

Planning: "Refactor the API layer to use async/await throughout"
[Implementation happens]
Fast: "Fix the error handling in the /users endpoint we just refactored"
Fast: "Add a TODO comment about the deprecated method we're still using"

When Work in Progress, Mode Sticks

Important note: if you switch modes while a task is running, the current task continues in its original mode. The mode switch only affects new tasks.

So if you start a complex task in Planning mode, then realize you want to make a quick fix and switch to Fast mode, the Planning task will continue with its plan-based approach while new requests use Fast mode.

Advanced Tips: Getting More from Both Modes 🚀

Now that you understand the basics, here are some advanced techniques:

For Planning Mode:

Use Sub-Plans for Massive Projects

For truly large projects, break them into phases and use Planning mode for each phase:

Phase 1 Planning: "Plan the database schema and authentication system"
Phase 2 Planning: "Plan the API endpoints based on the schema we just created"
Phase 3 Planning: "Plan the frontend components consuming the API"

This keeps plans focused and manageable.

Combine with Knowledge Items

Antigravity's Knowledge Items system captures important patterns and decisions. In Planning mode, reference these:

"Create a new API endpoint following the patterns in Knowledge Item #12"

The plan will incorporate your established patterns automatically.

Ask for Multiple Approaches

You can request the agent to propose different strategies:

"Create a plan for the image upload feature, but give me two different approaches: one optimized for performance, one optimized for simplicity"

Then pick the approach you prefer.

Use Plans as Documentation

Save the implementation plans as project documentation. They serve as a record of architectural decisions and can help future contributors understand why things were built a certain way.

For Fast Mode:

Chain Simple Tasks

While I said not to chain too many, you can chain a few simple, related tasks efficiently:

"Add a loading spinner" → [done] → "Make it blue" → [done] → "Position it in the center"

Three Fast mode requests in quick succession can be faster than one Planning mode task for these micro-adjustments.

Use It for Code Exploration

Fast mode excels at helping you understand code:

"Add console.log statements showing the data flow through this function"

"Add comments explaining each regex group in this pattern"

These exploratory tasks don't need planning.

Rapid Prototyping Loop

When experimenting with UI/UX:

"Try a card-based layout" → [see result] → "Actually, try a list layout" → [see result] → "Go back to cards but make them smaller"

Fast mode's immediacy supports this exploratory workflow.

The Mental Model: Choosing Between Modes 🧠

After all this information, you might still wonder: "How do I actually decide in the moment?"

Here's the mental model I use:

Ask yourself:

"If this goes wrong, how bad is it?"
- High stakes → Planning mode
- Low stakes → Fast mode
"Do I know exactly what I want?"
- Yes → Fast mode
- No, I need to see options → Planning mode
"How many files will this touch?"
- 1-2 files → Fast mode
- 3+ files → Planning mode
"Will I learn something from seeing the plan?"
- Yes → Planning mode
- No → Fast mode
"Is this part of a bigger workflow?"
- Yes, it's the foundation → Planning mode
- No, it's a quick fix → Fast mode

If you answer "Planning mode" to 2 or more of these questions, use Planning mode. Otherwise, Fast mode is probably fine.

Real-World Examples from My Experience 💼

Let me share some concrete examples from my own Antigravity usage:

Example 1: Refactoring Easy Kit Utils (Planning Mode)

Task: Modernize the entire utility library

Why Planning: Multi-file changes, needed consistency, wanted to review approach first

Result: The agent created a comprehensive plan showing how it would refactor each utility category, update tests, and maintain backward compatibility. I reviewed it, suggested using specific ES6 features, and the execution was smooth.

Example 2: Fixing a Typo in Documentation (Fast Mode)

Task: Correct a misspelling in README

Why Fast: Trivial change, obvious solution, not worth planning

Result: Done in 5 seconds. No overhead needed.

Example 3: Adding a New Feature (Planning Mode → Fast Mode)

Task: Add user profile functionality

Why Planning first: Complex feature with multiple components

Result: Used Planning for the initial implementation (profile page, data storage, API endpoints). Then used Fast mode for tweaks like "add a character limit to the bio field" and "make the avatar circular instead of square."

Example 4: Debugging (Fast Mode)

Task: Figure out why a function isn't working

Why Fast: Exploratory, trying different things quickly

Result: "Add logging to this function" → "Add error handling" → "Try calling it with different parameters", Fast mode's immediacy helped iterate quickly.

Example 5: Learning a New Framework (Planning Mode)

Task: Build a component in a framework I'm not familiar with

Why Planning: Wanted to see best practices before code was written

Result: The plan showed me the framework patterns and conventions. I learned from the plan, made suggestions to align with project structure, then approved and watched the implementation to learn more.

Common Questions and Misconceptions 🤷

Let me address some frequent confusion I've seen:

Q: "Is Planning mode slower?"

A: Yes and no. The planning phase adds time upfront, but often saves time overall by avoiding missteps and rework. For complex tasks, Planning mode can be faster end-to-end.

Q: "Can I edit the plan before execution?"

A: Yes! Use inline comments to request changes. The agent will update the plan based on your feedback.

Q: "Does Fast mode mean lower quality?"

A: Not necessarily. It means less deliberation, but for simple tasks, the quality is identical. For complex tasks, yes, Planning mode tends to produce better results.

Q: "What if I start in the wrong mode?"

A: You can cancel the current task and restart in a different mode, or just let it finish and switch modes for the next task.

Q: "Does the agent 'remember' between modes?"

A: Yes, the conversation context persists. You can use Planning for one task, Fast for the next, and the agent knows what happened previously.

Q: "Why would I ever use Planning mode if Fast is quicker?"

A: Because "quick" isn't always "best." Complex tasks need deliberation, oversight, and structured thinking, exactly what Planning provides.

What I Want to Hear From You 💬

Alright, now it's your turn! I've shared my experiences and understanding of Planning vs Fast modes, but I know I'm not the only one experimenting with Antigravity.

If you've used either or both modes, I want to hear from you:

Which mode do you find yourself using more often?
Have you discovered use cases where one mode clearly outperforms the other?
What's your decision-making process for choosing between modes?
Have you found any gotchas or unexpected behaviors?
Do you have tips or workflows that leverage both modes effectively?
How do these modes compare to other AI IDEs you've used?

If you're new to Antigravity and considering trying it:

What questions do you have about these modes?
What kinds of tasks are you hoping to use it for?
Does the Planning vs Fast distinction make sense, or is it confusing?

Drop a comment below! Your experiences help everyone learn faster. Plus, I'm genuinely curious if my mental models align with how others use these tools, or if I'm missing something.

The community's collective wisdom is how we all get better at this new paradigm of development.

Conclusion 🌟

Google Antigravity's dual-mode approach, Planning and Fast, represents a thoughtful design decision. Rather than forcing everyone into a single workflow, it acknowledges that different tasks require different levels of deliberation.

Planning mode is for when you want to understand the plan before execution, when complexity demands structure, when you're learning, or when stakes are high. It's the architect mode.

Fast mode is for when you know what you want, when the solution is obvious, when you're iterating rapidly, or when overhead would be counterproductive. It's the builder mode.

Neither mode is inherently superior. The skill is knowing which to use when.

As I've worked with Antigravity, I've found that my mode selection has become more intuitive. I don't consciously run through a checklist anymore, I just feel which mode fits the task. That comes with practice.

My advice? Start with Planning mode for most things as you learn Antigravity. The plans teach you how the agent thinks. As you get comfortable, you'll naturally start using Fast mode more for the simple stuff.

And remember: you can always switch modes mid-session. If you realize you chose wrong, just switch and move on. It's a tool, not a commitment.

The future of development is agentic, and interfaces like Planning vs Fast modes are how we'll navigate this new paradigm. Learning to use them effectively is an investment in your future productivity.

So experiment, break things, try both modes extensively, and find the workflow that fits your style.

Happy coding! ✨

🌲 Linktree: https://linktr.ee/domenicotenace
🐙 Domenico Tenace Open Labs: https://github.com/Domenico-Tenace-Open-Labs

Follow me on dev.to for more articles 👇

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work, you can support me with a small donation. I would be grateful 🥹

Why I Switched to Mullvad VPN: The Open Source VPN 🔒

Domenico Tenace — Sun, 01 Feb 2026 17:15:21 +0000

Overview

Hey everyone 👋

Today I want to talk about something that's been on my mind lately: online privacy. More specifically, I want to share why I recently switched to Mullvad VPN and why I think it's one of the most important decisions I've made for my digital security this year.

In a world where every click, every search, every website visit is tracked, logged, and sold to the highest bidder, taking control of your privacy isn't just smart, it's necessary. And after doing my research and testing several VPN services, I landed on Mullvad. Spoiler alert: I'm really happy with this choice.

So let's dive into what makes Mullvad special, why VPNs matter in the first place, and what you should know before making the switch yourself.

Let's get started! 🤙

First Things First: Why Do You Even Need a VPN? 🤔

Before we get into Mullvad specifically, let's talk about why VPNs are important. If you're already privacy-conscious, feel free to skip ahead, but for everyone else, here's the deal.

Your ISP Is Watching Everything

Every time you connect to the internet, your Internet Service Provider (ISP) can see everything you do. Every website you visit, every video you watch, every file you download, it's all visible to them. And in many countries, ISPs are legally required to log this data and keep it for months or even years.

Worse yet? In some places, ISPs sell this browsing data to advertisers and data brokers. Your online behavior becomes a commodity, bought and sold without your explicit consent.

Your IP Address Is Your Digital Fingerprint

Your IP address is like your home address for the internet. It identifies you, tracks you across websites, and can be used to build a detailed profile of your online life. Websites, advertisers, and even malicious actors can use your IP to:

Track your location
Build behavioral profiles
Target you with ads
Potentially identify you personally
Launch targeted attacks

Public Wi-Fi Is a Security Nightmare

Coffee shops, airports, hotels, public Wi-Fi networks are convenient but incredibly insecure. Without encryption, anyone on the same network can potentially intercept your traffic, steal passwords, or inject malware. A VPN encrypts your connection, making it much harder for attackers to compromise your data.

Censorship and Geo-Restrictions

In many countries, governments block access to certain websites and services. Even in free countries, streaming services and websites restrict content based on your location. A VPN can help you access the free and open internet regardless of where you are.

Bottom line: if you care about privacy, security, and internet freedom, a VPN isn't optional anymore, it's essential.

Enter Mullvad: The Privacy-First VPN 🛡️

So why Mullvad specifically? There are dozens of VPN providers out there, many with flashy marketing and promises of "military-grade encryption" (whatever that means). What makes Mullvad different?

The Philosophy Behind Mullvad

Mullvad is a Swedish company that's been around since 2009, and their entire philosophy can be summed up in one sentence: privacy is a universal right. This isn't just marketing speak, it's reflected in every design decision they make.

From the moment you sign up, it's clear Mullvad operates differently from other VPN providers. No name required. No phone number. You get a randomly generated 16-digit account number, and that's it. That number is your username, your password, your entire identity with Mullvad.

This isn't just convenient, it's fundamentally more private. If Mullvad doesn't have your personal information, they can't leak it, lose it, or be forced to hand it over to authorities.

The Famous Police Raid Incident

Speaking of authorities, here's a story that perfectly illustrates Mullvad's commitment to privacy: in April 2023, Swedish police showed up at Mullvad's office in Gothenburg with a search warrant. They were looking to seize computers containing customer data.

The result? The police left empty-handed. Why? Because Mullvad literally doesn't store any customer data to seize. There were no logs to hand over, no user information to provide, nothing. This wasn't just Mullvad claiming to have a no-logs policy, this was real-world proof that they actually practice what they preach.

Think about that for a second. When push came to shove and authorities demanded data, Mullvad had nothing to give them. That's the kind of privacy guarantee you want in a VPN.

The Features That Make Mullvad Stand Out ✨

Let's get into the technical stuff. What exactly do you get with Mullvad?

Anonymous Account System

As I mentioned, you sign up with just an account number. No email, no personal info, nothing that can tie the account back to you. You can even pay with cash if you want, Mullvad will give you a mailing address, you send cash in an envelope, and they credit your account. They also accept cryptocurrency (Bitcoin and Monero) for additional anonymity.

Audited No-Logs Policy

Mullvad's no-logs policy isn't just words on a website, it's been independently audited by cybersecurity firm Cure53. They don't log your IP address, browsing activity, DNS requests, bandwidth usage, connection timestamps, or session duration. The only data they keep is aggregate network statistics like total bandwidth across all servers.

This means that even if someone broke into Mullvad's servers, there would be no individual user data to steal. And as the 2023 police raid proved, even legal authorities can't get data that doesn't exist.

RAM-Only Servers

All of Mullvad's servers run on RAM (diskless servers). This means that when a server reboots, all data is wiped. Nothing is written to permanent storage, so there's no way for data to persist after shutdown. This is standard practice for top-tier VPNs now, but Mullvad was an early adopter of this approach.

DAITA: Defense Against AI-Guided Traffic Analysis

This is where things get really interesting. Even with VPN encryption, sophisticated AI-powered systems can potentially analyze patterns in your traffic, things like packet timing, size, and frequency, to identify your activities.

Mullvad developed DAITA (Defense Against AI-guided Traffic Analysis) to counter this. It works by:

Padding all packets to uniform sizes to eliminate identifying patterns
Injecting fake "dummy" traffic to mask real activity
Using randomized, dynamic configurations that change with each connection

Very few VPNs offer this level of protection. It's cutting-edge stuff that addresses threats most people don't even know exist yet.

Quantum-Resistant Encryption

Here's something wild: Mullvad uses quantum-resistant encryption on all WireGuard connections. Why does this matter? Because quantum computers, once they become powerful enough, could theoretically break today's encryption standards.

Is this a threat right now? No. But Mullvad is preparing for the future. When quantum computers do become a real threat, Mullvad users will already be protected. It's the kind of forward-thinking approach that gives me confidence in the service.

Multihop (Double VPN)

Mullvad's Multihop feature routes your traffic through two VPN servers in different locations and jurisdictions instead of just one. This adds an extra layer of encryption and makes it even harder to track your traffic. Even if one server were somehow compromised, your data would still be protected by the second hop.

DNS Content Filtering

Mullvad includes DNS-level blocking for ads, trackers, malware, gambling sites, and adult content. You can toggle these categories on or off depending on what you want to block. It's not as comprehensive as a dedicated ad blocker, but it's a nice built-in feature that improves your browsing experience.

Kill Switch and Lockdown Mode

The kill switch is standard VPN fare, if your VPN connection drops, all internet traffic is automatically blocked until the connection is reestablished. This prevents accidental data leaks.

But Mullvad takes it further with "Lockdown Mode". When enabled, your device can only connect to the internet when connected to a Mullvad server. Period. It's an extreme measure, but if you need maximum security, it's there.

Open Source and Audited

All of Mullvad's apps are open source (licensed under GPLv3). This means anyone can inspect the code, verify what it does, and ensure there are no backdoors or vulnerabilities. The apps have been independently audited multiple times, most recently in 2023.

Open source isn't just about transparency, it's about accountability. When code is public, the entire security community can review it and report issues.

WireGuard and OpenVPN Protocols

Mullvad supports both WireGuard and OpenVPN, the two most secure and widely trusted VPN protocols. WireGuard is newer, faster, and more efficient, while OpenVPN is battle-tested and reliable. You can choose based on your needs.

Mullvad Browser

Mullvad even developed their own browser in partnership with the Tor Project. Mullvad Browser is based on Firefox and includes privacy-focused settings similar to Tor Browser, but designed to work with VPNs instead of the Tor network. It's free and open source, and you don't even need to be a Mullvad VPN customer to use it.

The Pricing: Simple and Fair 💰

Here's where Mullvad really stands out: €5 per month, flat rate. That's it. No yearly discounts, no special promotions, no complicated pricing tiers. One price for everyone, always.

At current exchange rates, that's about $5.50 USD per month. Compared to other premium VPNs that can cost $10-15 per month, Mullvad is incredibly affordable.

And here's the crazy part: Mullvad has never raised their price since launching in 2009. While other companies keep increasing their rates, Mullvad has kept the same €5 price point for over 15 years.

You can pay month-to-month, or prepay for multiple months if you want (though the per-month price stays the same). They also offer a 14-day money-back guarantee if you pay with regular payment methods, though cash and crypto payments are naturally non-refundable.

Payment Options: credit card, PayPal, bank wire, Swish (Swedish mobile payments), cash by mail, Bitcoin, and Monero. The variety of anonymous payment options is unmatched in the VPN industry.

The Downsides: Let's Be Honest 😬

No service is perfect, and Mullvad has some legitimate weaknesses you should know about:

Not Great for Streaming

If your main reason for wanting a VPN is to access Netflix, Disney+, or other streaming services from different regions, Mullvad probably isn't for you. The company explicitly doesn't prioritize unblocking streaming services, their focus is privacy, not entertainment.

Sometimes it works with streaming sites, sometimes it doesn't. But it's not reliable for this purpose. If streaming is your priority, services like NordVPN or ExpressVPN are better choices.

Smaller Server Network

Mullvad has around 700+ servers in 49 countries. That's decent, but it pales in comparison to services like NordVPN (6000+ servers in 100+ countries) or Proton VPN (thousands of servers in 120+ countries).

That said, I haven't had any issues connecting to Mullvad's servers, even during peak times. Quality matters more than quantity, and Mullvad's servers are well-maintained and fast.

No Live Chat Support

Mullvad doesn't offer 24/7 live chat support like many competitors. Support is handled via email and their website. Response times are reasonable, but if you're the type who needs instant help, this could be frustrating.

However, their documentation is excellent, and most common issues are well-covered in their help articles.

The Interface Is Minimalist

Some people find Mullvad's apps too simple or "boring." There aren't flashy features, animated maps showing your connection, or hand-holding wizards. The interface is clean and functional, prioritizing usability over aesthetics.

Personally, I appreciate the minimalism, it means there's less bloat and the app focuses on what matters. But if you prefer polished, feature-rich interfaces, this might feel spartan.

Limited to 5 Devices

You can connect up to 5 devices simultaneously with one Mullvad account. This is pretty standard for VPNs, but some competitors allow more (or even unlimited) connections. For most individuals or small families, 5 is plenty, but larger households might find it limiting.

Speed Can Vary

VPNs inherently slow down your connection because of the encryption overhead and the extra distance your traffic travels. Mullvad is generally fast, but your experience will vary based on server location, distance, and network conditions.

In my testing, I've seen anywhere from a 10-30% speed decrease depending on which server I connect to. That's actually pretty good for a VPN, but it's still something to be aware of.

My Personal Experience: Why I Made the Switch 💪

So here's my story. I've used various VPNs over the years, some free (terrible idea, by the way), some paid. I was previously using a popular commercial VPN that shall remain nameless, and while it worked fine, I started questioning their logging practices and business model.

The more I learned about digital privacy and the surveillance economy, the more uncomfortable I became with my VPN provider. When their parent company got acquired by a data analytics firm, that was the final straw. I needed to find a service I could actually trust.

Enter Mullvad. After researching privacy-focused VPNs, Mullvad kept coming up as the gold standard. The no-logs policy, the anonymous account system, the 2023 police raid incident, everything pointed to a company that genuinely walks the walk on privacy.

The Switch Was Surprisingly Easy

Setting up Mullvad was dead simple. I went to their website, clicked "Get Mullvad VPN," and received my 16-digit account number instantly. No forms to fill out, no email verification, nothing. I downloaded the app, entered my account number, and I was connected in under two minutes.

The App Experience

The Mullvad app is clean and straightforward. When you open it, you see a map with server locations and a big connect button. That's basically it. You can select specific servers or let Mullvad choose automatically based on speed and distance.

The settings menu is where the magic happens, this is where you enable features like DAITA, Multihop, DNS filtering, and obfuscation. There's a lot of power under the hood for advanced users, but casual users can just hit connect and go.

Performance in Real-World Use

For my day-to-day use, web browsing, development work, using SSH, watching YouTube, downloading files, Mullvad has been great. The connection is stable, speeds are good, and I haven't experienced any frustrating disconnects or timeouts.

I work with remote servers constantly, and having a reliable VPN that doesn't interfere with SSH connections or add excessive latency is crucial. Mullvad handles this perfectly.

The Privacy Peace of Mind

The biggest benefit isn't technical, it's psychological. Knowing that my ISP can't see what I'm doing, that my traffic is encrypted end-to-end, that no one is logging my activity, it's genuinely freeing. I no longer worry about being tracked or having my browsing data sold.

And when I'm working on sensitive open source projects or communicating about security issues, having that extra layer of protection is invaluable.

Traveling with Mullvad

I recently traveled to a country with more restrictive internet policies, and Mullvad's obfuscation features worked perfectly to bypass the censorship. I was able to access all the websites and services I normally use without any issues. This is exactly why VPNs are so important, they preserve internet freedom regardless of where you are.

Why Mullvad Aligns with My Values 🌍

Beyond the technical features, Mullvad represents something important: a company that prioritizes user rights over profits.

They Could Make More Money

Let's be real, Mullvad could easily charge $10/month and most people would pay it. They could offer tiered pricing with "premium" features. They could bundle in unnecessary services and upsell constantly. But they don't.

They charge a fair price and treat all users equally. There are no "elite" plans or artificial limitations designed to push you toward more expensive tiers.

They're Transparent

Mullvad doesn't hide behind vague marketing claims. Their privacy policy is clear and detailed. Their technology is open source. Their infrastructure is documented. When Swedish police showed up, they published a blog post about it.

This level of transparency is rare in the VPN industry, where many providers make big claims about privacy while operating under murky business structures.

They Contribute to the Ecosystem

Mullvad was an early adopter and financial supporter of WireGuard, helping to develop and promote what's now the gold standard VPN protocol. They developed DAITA and made it available to users at no extra cost. They partnered with the Tor Project to create Mullvad Browser.

They're not just selling a service, they're actively improving the privacy ecosystem for everyone.

They Practice What They Preach

The 2023 police raid wasn't just good PR, it was validation that Mullvad actually follows their own policies. When authorities came knocking, there was nothing to give them. That's the difference between marketing talk and operational reality.

Who Should Use Mullvad? 🎯

Mullvad isn't for everyone, and that's okay. Here's who will love it:

Privacy-Conscious Users

If protecting your privacy is your top priority, Mullvad is probably your best option. The anonymous account system, proven no-logs policy, and advanced privacy features like DAITA make it the gold standard.

Tech-Savvy Users

Mullvad's minimalist interface and advanced features appeal to users who understand VPN technology and want granular control. If terms like "WireGuard," "split tunneling," and "obfuscation" make sense to you, you'll appreciate Mullvad.

Journalists and Activists

If you work with sensitive information or in regions with internet censorship, Mullvad's strong encryption, obfuscation features, and proven resistance to legal pressure make it an excellent choice.

Developers and Open-Source Enthusiasts

As someone who maintains open-source projects, I appreciate that Mullvad's entire software stack is open source. You can audit the code, verify security claims, and contribute improvements if you want.

Budget-Conscious Users

At €5/month with no long-term commitment required, Mullvad is one of the most affordable premium VPNs. You're not locked into a yearly plan, and the price never increases.

Who Shouldn't Use Mullvad?

Streaming enthusiasts: If your main goal is accessing geo-restricted content, look elsewhere
Non-technical users wanting hand-holding: Mullvad assumes you know what you're doing
People needing lots of simultaneous connections: The 5-device limit might be restrictive
Users requiring instant customer support: No live chat means waiting for email responses

Final Thoughts: Privacy Matters 🌟

Switching to Mullvad VPN has been one of the best decisions I've made for my digital privacy this year. It's not perfect, no VPN is but it represents a rare thing in today's internet: a company that genuinely prioritizes user privacy over everything else.

In an age where every company wants to track you, profile you, and monetize your data, Mullvad stands as a refreshing alternative. They don't need to know who you are. They don't want to collect your data. They just want to provide a secure, private internet connection, and they do it exceptionally well.

The Bigger Picture

Using a VPN isn't just about hiding your browsing history from your ISP, it's about taking a stand for digital rights. It's about saying that your online life belongs to you, not to corporations or governments. It's about preserving the open, free internet that many of us grew up with.

Every time you connect to Mullvad, you're voting with your wallet for a privacy-first internet. You're supporting a company that refuses to compromise on user rights, even when it would be more profitable to do so.

Is It Worth It?

For me, absolutely. The peace of mind alone is worth €5 per month. Knowing that my ISP can't build a profile of my online activities, that my traffic is encrypted, that there are no logs to leak or hand over to authorities, it's invaluable.

If you care about privacy, if you're tired of being tracked and monitored, if you want to support a company that actually practices what it preaches, give Mullvad a try. The switch is easy, the price is fair, and the privacy benefits are real.

Conclusion 🚀

If this article has convinced you to take your privacy seriously, here's what you can do:

Go to mullvad.net and sign up, it takes less than a minute
Choose your payment method, cryptocurrency for maximum privacy, or regular payment for convenience
Download the app for your platform
Connect and start browsing privately

It really is that simple. No complicated setup, no technical knowledge required, just instant privacy protection.

And remember: a VPN is just one part of a privacy-focused approach to the internet. Combine it with privacy-respecting browsers, encrypted messaging apps, and good security practices for maximum protection.

Privacy is a right, not a privilege. Tools like Mullvad help us exercise that right in an increasingly surveilled world.

Happy browsing! ✨

🌲 Linktree: https://linktr.ee/domenicotenace
🐙 Domenico Tenace Open Labs: https://github.com/Domenico-Tenace-Open-Labs

Follow me on dev.to for more articles 👇

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work, you can support me with a small donation. I would be grateful 🥹

Google Antigravity vs GitHub Copilot: Why I'm Team Antigravity Now 💡

Domenico Tenace — Fri, 23 Jan 2026 07:00:00 +0000

Overview

Hey everyone 👋

If you've been following the AI coding tools space lately, you've probably noticed things are getting wild. We went from "whoa, AI can autocomplete my code!" to "wait, AI can literally build entire features while I grab coffee?" in what feels like about five minutes.

Today I want to talk about two tools that represent this evolution: GitHub Copilot and Google Antigravity. I've used both extensively, and after recently completing a major refactoring project with Antigravity (which I wrote about here), I have some thoughts on how they compare and why one has completely changed how I work.

Spoiler alert: I'm firmly in Team Antigravity now, but it's not because Copilot is bad, it's because they're solving fundamentally different problems. Let me break it down.

Let's start! 🤙

The Fundamental Difference: Assistant vs. Agent 🤔

Before we get into features and comparisons, let's establish what we're actually talking about here, because calling both of these "AI coding tools" is like calling a bicycle and a self-driving car both "transportation."

GitHub Copilot: Your Smart Coding Assistant

Think of Copilot as the world's most capable autocomplete system. It's like having a really talented developer sitting next to you who can predict what you're about to type and suggest completions. It watches what you're doing, understands the context of your code, and offers suggestions in real-time.

The workflow looks like this:

You start typing a function
Copilot suggests how to complete it
You press Tab to accept (or keep typing to ignore)
Repeat

It's reactive, it's fast, and it's incredibly good at what it does. Copilot accelerates your existing workflow without fundamentally changing it. You're still the one driving, Copilot just makes the driving smoother and faster.

Google Antigravity: Your Autonomous Development Partner

Antigravity is completely different. It's not trying to predict your next line of code, it's trying to handle entire tasks for you. You don't give it hints about what to write; you give it goals about what to achieve.

The workflow looks like this:

You describe a task: "Refactor all string utilities to use modern ES6 syntax"
The agent creates a plan breaking down the task into steps
You review and approve the plan
The agent executes: editing multiple files, updating tests, running validations
You review the results and provide feedback
The agent iterates until the task is complete

This is proactive autonomy. You're not coding line-by-line anymore, you're architecting solutions and delegating implementation to AI agents. It's less "pair programming" and more "managing a really fast junior developer."

The key insight: Copilot makes you code faster. Antigravity makes you code less. These are fundamentally different value propositions.

Breaking Down the Key Differences 💡

Let's get into the specifics of how these tools differ across various dimensions.

1. Autonomy Level

Copilot: reactive autonomy. It suggests code based on what you're actively working on, but you make all the decisions. Every suggestion requires your approval (via Tab). It never makes changes without explicit confirmation.

Antigravity: proactive autonomy. Agents can work independently on tasks, making decisions about file edits, command execution, and implementation approach. You set the goal; the agent figures out how to achieve it. You can configure different autonomy levels (review-driven, agent-assisted, agent-driven), but even in the most conservative mode, it's doing more than Copilot ever attempts.

My take: for simple coding tasks where you know exactly what you want, Copilot's reactive approach is faster. For complex refactoring or feature implementation where the "how" is tedious but the "what" is clear, Antigravity's autonomy is game-changing.

2. Multi-File Operations

Copilot: works primarily on the file you have open. It can reference other files in your workspace for context, but it doesn't autonomously edit multiple files at once. If you need to refactor something across 20 files, you're opening each one and letting Copilot help with each individually.

Antigravity: designed for multi-file operations. An agent can read your entire codebase, identify all the files that need changes, and propose modifications across all of them in a single workflow. It maintains consistency and applies patterns across your entire project.

My take: this is where Antigravity absolutely crushes Copilot. When I refactored Easy Kit Utils, the agent touched dozens of files, utility functions, tests, documentation, type definitions, maintaining consistency throughout. Doing this with Copilot would have meant manually opening each file and repeating similar instructions. With Antigravity, I described the goal once and reviewed the results.

3. Planning and Context

Copilot: understands the immediate context of what you're writing. It's excellent at learning patterns and suggesting code that fits your style. But it doesn't "plan" in the traditional sense, it predicts the next logical tokens based on what came before.

Antigravity: actually creates plans. Before making changes, agents break down complex tasks into steps, show you the approach, and let you approve or adjust. This planning phase is huge, it means you can course correct before any code is written.

My take: the planning capability makes Antigravity feel less like a tool and more like a collaborator. When the agent proposed its refactoring plan for Easy Kit Utils, I could immediately see it had understood the scope and could suggest adjustments before any work began. This saves tons of time compared to discovering implementation issues after the fact.

4. Browser Integration and Testing

Copilot: doesn't interact with browsers or test your code's visual output. It's purely code-focused.

Antigravity: includes an integrated browser where agents can actually test web applications, interact with DOM elements, and verify functionality. The agent doesn't just write code, it validates that the code works correctly by actually running it.

My take: this is wild and something I didn't appreciate until I used it. The agent can spin up a test environment, interact with UI elements, catch bugs visually, and iterate on fixes. It's like having a QA engineer and a developer in one.

5. Multi-Agent Workflows

Copilot: single-threaded. One suggestion at a time, one task at a time.

Antigravity: multi-agent orchestration. You can have multiple agents working on different parts of your codebase simultaneously. One agent refactors utilities while another updates documentation and a third improves test coverage all in parallel.

My take: I haven't fully explored this yet, but the potential is obvious. For large projects, being able to parallelize different work streams with AI agents is powerful. It's like having a team instead of a single assistant.

6. Integration and Ecosystem

Copilot: deep integration with GitHub's ecosystem. Pull request summaries, issue analysis, commit message generation if you live in GitHub, Copilot fits seamlessly. Also works with VS Code, JetBrains, Vim, Neovim, and more. Massive extension ecosystem.

Antigravity: built on VS Code's foundation, so the interface is familiar, but it's a standalone IDE rather than an extension. This means you lose access to some VS Code extensions, but you gain Antigravity's agent-first architecture. Works with any Git repository, not just GitHub.

My take: if you're heavily invested in the VS Code extension ecosystem or need specific IDE features, losing that might hurt. But Antigravity's agent capabilities more than compensate for me. The trade-off is worth it for the kinds of tasks I'm tackling.

7. Learning Curve

Copilot: almost zero learning curve. Install it, and it just starts working. The ghost text appears, you press Tab, done. You're productive immediately.

Antigravity: steeper learning curve. You need to understand different autonomy modes, how to structure prompts for agents, how the Agent Manager works, and how to effectively review multi-file changes. There's more to learn before you're using it optimally.

My take: this is Copilot's biggest advantage it's dead simple. Antigravity requires investment to master. But once you get over that initial hump, the productivity gains are substantial.

8. Speed and Latency

Copilot: extremely fast. Suggestions appear almost instantly. The inline experience feels native and responsive.

Antigravity: slower by nature. Agents need to plan, reason, execute, and validate. Even simple tasks take more time than Copilot's instant suggestions. You're trading immediacy for thoroughness.

My take: for quick edits and rapid development, Copilot wins on speed. But for complex tasks that would take you an hour to do manually, waiting 5 minutes for an agent to handle it is a massive time savings. Different use cases.

9. Enterprise Readiness

Copilot: SOC 2 certified, ISO 27001 compliant, IP indemnification, zero-data-retention guarantees, audit logs, admin controls. It's enterprise-ready with proper governance.

Antigravity: in public preview. Documentation on enterprise security controls, data handling, compliance certifications, and privacy policies is limited or incomplete. Not ready for enterprise procurement yet.

My take: if you work at a large company with strict compliance requirements, Copilot is currently the only viable option. Antigravity needs to mature in this area before enterprises can adopt it seriously.

Where Copilot Still Wins 🏆

Let me be clear: GitHub Copilot is an incredible tool, and there are scenarios where it's still the better choice:

Everyday Coding Velocity

For normal day-to-day development writing functions, adding features, fixing bugs Copilot is faster and more efficient. The inline suggestions are instant, the context is always right, and it doesn't interrupt your flow.

If you're building a feature and you know exactly how to implement it, Copilot accelerates the mechanical work of typing without adding overhead.

IDE Flexibility

Copilot works in VS Code, JetBrains IDEs, Vim, Neovim, Visual Studio, Xcode basically everywhere. If you're not willing to switch IDEs or you rely on specific tools, Copilot fits into your existing setup.

Antigravity requires using Google's IDE, which might not be acceptable if you have a customized development environment you love.

Learning Resources and Community

Copilot has been around longer and has a massive community. If you run into issues, there are tons of Stack Overflow answers, Reddit threads, and YouTube tutorials. The documentation is comprehensive.

Antigravity is new, so the community is smaller and resources are limited. You're more likely to encounter undocumented behavior or hit edge cases that no one has solved yet.

Enterprise Compliance

As mentioned earlier, if you need SOC 2 certification, audit trails, IP guarantees, and established data privacy policies, Copilot is the mature choice. Antigravity will get there eventually, but it's not there yet.

Specific GitHub Integration

If you heavily use GitHub-specific features like having Copilot generate commit messages from GitHub's API, summarize pull requests, or analyze issues Copilot's tight integration is valuable.

Antigravity works with Git but doesn't have these GitHub native features.

Why I Prefer Antigravity Now 💪

So with all those advantages Copilot has, why did I switch to Antigravity? Here's my honest reasoning:

The Nature of My Work Changed

I spend a lot of time maintaining open source libraries like Easy Kit Utils. This involves large-scale refactoring, updating documentation across multiple files, modernizing syntax patterns, and ensuring consistency throughout the codebase.

These tasks are perfect for Antigravity's agent-driven approach. I don't need suggestions for the next line of code I need entire sections of the codebase refactored according to modern best practices.

With Copilot, I'd open file after file, manually applying similar changes and hoping I maintained consistency. With Antigravity, I describe the goal, review the plan, and let the agent handle the tedious execution across dozens of files.

I Value Thinking Over Typing

Here's something I realized while using Antigravity: I don't enjoy typing code. I enjoy solving problems and architecting solutions. The actual mechanical work of writing syntax is the least interesting part of development for me.

Antigravity lets me operate at a higher level of abstraction. I think about what the code should do, not how to type it out. This feels more aligned with how I want to work as a developer.

Multi-File Consistency Is Crucial

When you're maintaining libraries, consistency is everything. If you refactor one utility function to use modern syntax, you need to refactor all of them the same way. If you update one test file's structure, you should update all test files similarly.

Antigravity's ability to understand patterns and apply them across an entire codebase is invaluable. It doesn't just make changes it makes consistent changes that follow the established patterns.

The Planning Phase Saves Massive Time

I can't overstate how useful the planning phase is. When I asked Antigravity to refactor Easy Kit Utils, the agent created a detailed plan showing exactly what it would change and why. I could review this plan, suggest adjustments, and ensure we were aligned before any code was touched.

This is so much better than discovering issues after the fact. It's like having code reviews before the code is even written.

Browser-Based Validation Is a Game Changer

Being able to have the agent actually test changes in a browser environment is wild. For documentation examples and test cases, the agent would render the page, verify functionality, and catch issues I would have missed.

This closed-loop development write code, test it, validate it, fix issues all happening autonomously is powerful. It means higher quality output with less manual QA.

I'm Willing to Trade Speed for Quality

Yes, Antigravity is slower than Copilot for simple tasks. But the output quality is often higher because the agent is thinking through the problem, planning the approach, and validating the results.

I'd rather wait 5 minutes for a thoroughly planned and tested solution than get instant suggestions that require significant manual cleanup and testing.

The Future Is Agentic

This is the big one: I believe agent-based development is the future. Right now, Antigravity is early and rough around the edges, but the paradigm it represents delegating complex tasks to autonomous AI agents is where we're heading.

By investing time in learning Antigravity now, I'm positioning myself for the next era of development. Copilot represents the peak of the "AI assistant" paradigm, but agents are the next evolution.

My Real-World Experience: The Easy Kit Utils Refactoring 🔧

I detailed this extensively in my previous article, but here's the short version:

I used Antigravity to completely refactor Easy Kit Utils, a JavaScript utility library. The project needed modernization: updating to ES6+ syntax, adding TypeScript definitions, improving test coverage, and cleaning up accumulated technical debt.

With Copilot, this would have looked like:

Open each utility file individually
Manually refactor each function while Copilot suggests completions
Open each test file and update tests with Copilot's help
Open documentation files and update examples
Hope I maintained consistency across all changes

Estimated time: 1-2 weeks of focused work

With Antigravity, it looked like:

Describe the overall refactoring goals to the agent
Review the comprehensive plan the agent created
Approve execution and watch it refactor across dozens of files
Review the changes, provide feedback, iterate as needed
Verify the updated tests and documentation

Actual time: 2-3 days, with most of that being review rather than coding

The agent maintained consistency, learned the patterns I preferred, and applied them uniformly across the codebase. It handled the tedious mechanical work while I focused on architecture and validation.

This isn't to say it was perfect I had to roll back some changes, fix edge cases the agent missed, and adjust implementations to match my style. But the overall productivity gain was massive.

The bottom line: For this kind of large-scale refactoring work, Antigravity was transformative. Copilot would have made each individual file easier to update, but Antigravity handled the entire project coherently.

They're Not Really Competitors 🤝

Here's the thing: framing this as "Antigravity vs. Copilot" is kind of misleading. They're not really competing for the same use case.

It's more accurate to say:

Copilot is the best tool for daily coding, inline suggestions, and accelerating your normal workflow
Antigravity is the best tool for complex multi-file tasks, large refactoring, and delegating entire features

You could actually use both:

Use Copilot in VS Code for your everyday development
Use Antigravity when you have a complex project that needs significant work

They complement each other rather than replace each other.

That said, I've personally decided to go all-in on Antigravity because:

Most of my work lately is the kind of complex tasks Antigravity excels at
I want to get better at agent-driven development workflows
The future is heading in this direction anyway

But I totally understand developers who stick with Copilot, or who use both tools for different scenarios.

What About the Other Players? 👀

Copilot and Antigravity aren't the only AI coding tools out there. How do they fit into the broader ecosystem?

Cursor

Cursor is probably the closest to Antigravity in terms of agent-like capabilities. It's also building an agent-first IDE with autonomous task execution. The main difference is Cursor is a commercial product with established pricing ($20/month), while Antigravity is currently free in preview.

Many developers love Cursor, and it's a solid alternative to Antigravity. The choice between them often comes down to preference for Google's or Cursor's approach.

Windsurf

Another emerging player in the agentic IDE space. Similar agent-driven development paradigm to Antigravity and Cursor. Still relatively new, so less proven in production.

Cody (by Sourcegraph)

Focuses heavily on codebase context and search. Great for understanding large codebases and navigating unfamiliar projects. Different value proposition from Antigravity's autonomous execution.

Claude Code

Anthropic's command-line tool for agentic coding. Delegate tasks directly from the terminal. Interesting approach but more technical than GUI-based tools like Antigravity.

My take: The agentic IDE space is heating up fast. Antigravity, Cursor, and Windsurf are all pushing toward similar visions of AI-native development. Competition is good it'll drive innovation and better tools for everyone.

Should You Make the Switch? 🎯

Ultimately, the decision comes down to your specific needs and work style. Here's my guidance:

Stick with Copilot if:

You're happy with your current development velocity
You prefer tools that accelerate your existing workflow without changing it
You need enterprise compliance and established security guarantees
You rely heavily on GitHub specific integrations
You want the lowest learning curve possible
Your work is mostly straightforward feature development where you know the implementation

Try Antigravity if:

You spend a lot of time on refactoring and maintenance
You're maintaining open source libraries or large codebases
You want to experiment with agent-driven development
You're comfortable with early-stage tools that might have rough edges
You enjoy operating at a higher level of abstraction
You're willing to invest time learning new workflows for long-term productivity gains
Price is a concern (it's currently free)

Use both if:

You want Copilot's speed for daily work AND Antigravity's power for complex tasks
You're exploring different AI development paradigms
You can afford the time investment to learn both tools
You work on varied projects with different needs

What I Want to Hear From You 💬

Here's where you come in! I've shared my experience and perspective, but the AI coding tools landscape is evolving so fast that every developer's experience matters.

If you've used Copilot, Antigravity, or both, I want to hear from you in the comments:

Which tool do you prefer and why?
What kinds of tasks do you use each for?
Have you found workflows or use cases I haven't mentioned?
What are the biggest pain points with each tool?
How has your productivity changed since adopting AI coding assistants?
Are you using any other AI coding tools (Cursor, Windsurf, etc.) and how do they compare?
Do you think agent-driven development is the future, or will assistant-style tools remain dominant?

And if you're new to AI coding tools and trying to decide which to try first, drop your questions below! The community here is great about sharing experiences and helping others navigate these decisions.

Seriously, drop a comment. These tools are all evolving rapidly, and community feedback shapes where they go next. Plus, I genuinely want to know if my experience aligns with others or if I'm an outlier.

Conclusion

The AI coding revolution is happening right now, in real-time. We're witnessing a shift from "AI helps you code" to "AI codes for you," and it's both exciting and a little unnerving.

GitHub Copilot pioneered the first wave making developers more productive by augmenting their coding with intelligent suggestions. It's a mature, reliable, enterprise-ready tool that millions of developers use daily.

Google Antigravity represents the next wave autonomous agents that can handle complex tasks end-to-end with minimal human intervention. It's early, rough, and experimental, but it hints at a future where developers spend more time architecting and less time implementing.

Neither is "better" in an absolute sense. They excel at different things. But for the kind of work I'm doing maintaining open source projects, tackling large refactoring tasks, and building sustainable codebases Antigravity has become my go-to tool.

That might change as the tools evolve. Copilot is getting more agentic features (Copilot Agents), and Antigravity will mature and improve. The competition between these platforms will benefit all of us as developers.

For now, I'm Team Antigravity, but I'm keeping an eye on the whole ecosystem. This is an incredibly exciting time to be a developer. The tools we have access to today would have seemed like science fiction just a few years ago.

So experiment, explore, and find what works for you. And let me know in the comments what you discover!

Happy coding! ✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹

My Experience with Google Antigravity: How I Refactored Easy Kit Utils with AI Agents 🚀

Domenico Tenace — Tue, 06 Jan 2026 23:00:00 +0000

Overview

Hey everyone! 👋

So, Google just dropped something pretty wild into the dev tools arena: Google Antigravity, their new AI-native IDE powered by Gemini 3. And honestly? It's been a game-changer for how I approach coding. I recently used it to completely refactor Easy Kit Utils, and I wanted to share my thoughts on this new tool that's got everyone talking.

If you've been following the AI coding assistant space, you've probably heard the buzz around Cursor, Windsurf, and other tools. Well, Google decided to enter the chat with a different approach: instead of just assisting you while you code, Antigravity lets autonomous agents do the heavy lifting while you act more like an architect than a bricklayer.

Let's start! 🤙

What Actually Is Google Antigravity? 🤔

First things first, let's clear up what we're dealing with here. Antigravity isn't just another VS Code fork with AI bolted on. It's built from the ground up as an "agent-first" development platform. What does that mean in practice?

Instead of having an AI chatbot sitting in a sidebar suggesting code completions, Antigravity gives you autonomous agents that can work across three main surfaces: the code editor, the terminal, and an integrated browser. These agents don't just write code snippets,they plan entire workflows, execute complex tasks, and even validate their own work by testing in the browser.

The core concept Google is pushing is what they call "vibe coding." The idea is simple but powerful: describe what you want in natural language, and the agent figures out the implementation details. No more wrestling with syntax or hunting through documentation for that one specific method you need. Just tell it what you're trying to achieve, and it handles the rest.

When you launch Antigravity, you're not greeted with a file tree like traditional IDEs. Instead, you see the Agent Manager, basically a mission control dashboard where you can spawn multiple agents working on different tasks simultaneously. It's like having a team of developers working in parallel, except they're all AI.

The Strengths: Where Antigravity Really Shines ✨

After spending significant time with Antigravity while refactoring Easy Kit Utils, here are the areas where it genuinely impressed me:

Autonomous Task Execution

This is the big one. When I started the Easy Kit Utils refactoring, I could give Antigravity high-level objectives like "refactor the string utilities to use modern ES6+ syntax and add comprehensive type definitions." The agent would then break this down into subtasks, create an implementation plan, and execute it. I wasn't sitting there writing every line, I was reviewing and approving the agent's work.

The agent would read through existing code, understand the patterns, make changes across multiple files, and even update related tests. It felt less like coding and more like managing a very capable junior developer.

Multimodal Understanding

One thing that caught me off guard was how well it handles visual inputs. I could literally show it screenshots of design mockups or UI components and say "make it look like this" and it would understand the aesthetic and implement it. This isn't unique to Antigravity (Gemini 3 itself has strong multimodal capabilities), but having it integrated directly into the IDE workflow is surprisingly useful.

Browser Integration

The built-in browser integration is clutch. The agent can actually test web applications it builds, interact with DOM elements, and verify that everything works as expected. During my refactoring work, when I was updating documentation examples, the agent could spin up a test page, verify the utilities worked correctly, and even catch edge cases I hadn't thought about.

Planning and Reasoning

Gemini 3's planning capabilities are legitimately good. When tackling complex refactoring tasks, the agent would create a step-by-step plan before making any changes. This meant I could review the approach first and make adjustments before any code was touched. It's like having a pair programming session where your partner thinks through the problem before diving in.

Multi-Agent Workflows

The inbox system for managing multiple agents is actually pretty elegant. While one agent was working on refactoring utility functions, I could spawn another to update documentation, and a third to improve test coverage. They all work independently and ping you when they need input or approval.

The Weaknesses: Where It Falls Short 🤷

Nothing's perfect, and Antigravity definitely has its rough edges. Here's what frustrated me:

The Learning Curve Is Real

Despite Google's marketing about "natural language is the only syntax you need" there's still a learning curve. Understanding how to structure prompts for optimal results, knowing when to use agent-driven vs. review-driven modes, and managing the Agent Manager effectively all of this takes time to figure out.

The interface is overwhelming at first. There's the Agent Manager, the editor, the browser panel, various settings for controlling agent autonomy... it's a lot to take in. I spent my first hour just trying to understand the basic workflows.

Performance Can Be Inconsistent

Gemini 3 Pro is subject to rate limits and quotas, especially in the free preview period. I hit multiple "model provider overload" errors during peak usage times. When you're in flow state and the agent suddenly stops working because of API limits, it kills your momentum.

There's also latency. Waiting for an agent to plan, execute, and validate can sometimes feel slower than just writing the code yourself, especially for simple tasks. The trade-off is only worth it for more complex operations.

Over-Automation Can Be Dangerous

The agent-driven mode is powerful but also risky. If you're not careful, the agent can make changes you didn't intend. I had a few instances where it refactored code in ways that technically worked but didn't align with the patterns I wanted to maintain in Easy Kit Utils.

The review-driven mode is safer but feels tedious, you're constantly clicking "approve" for every little action. Finding the right balance with agent-assisted mode took some trial and error.

Still Makes Mistakes

Let's be honest: the agent isn't infallible. It still generates code with bugs, makes questionable architectural decisions, and sometimes misunderstands what you're asking for. You absolutely need to review everything it produces. It's like working with a capable junior dev who needs oversight, not a senior engineer you can fully trust.

I found subtle issues in type definitions, incorrect error handling in edge cases, and occasionally methods that didn't follow the existing conventions of the codebase. These are all fixable, but it means you can't just set it and forget it.

Limited Third-Party Integration

Unlike Cursor which builds on VS Code's massive extension ecosystem, Antigravity is more of a walled garden. You can't just install your favorite VS Code extensions. The tooling is what Google provides, and while it's good, you might miss your preferred linters, formatters, or other productivity tools.

My Real-World Experience: Refactoring Easy Kit Utils 💪

Now for the practical stuff. I used Antigravity to refactor Easy Kit Utils, which is a JavaScript utility library I maintain under Domenico Tenace Open Labs. The library needed modernization, updating to newer JS syntax, adding TypeScript definitions, improving test coverage, and generally cleaning up accumulated technical debt.

Here's how it went down:

I started by giving the agent access to the repository and describing the overall goals. The agent read through all the files, understood the structure, and proposed a refactoring plan broken into logical phases. This alone was impressive, having an AI that could comprehend a full codebase and suggest a structured approach.

For each utility function, I'd ask the agent to modernize it while maintaining backward compatibility. It would refactor the code, update the associated tests, regenerate documentation examples, and verify everything worked. I'd review the changes, provide feedback, and iterate until it matched what I wanted.

The biggest win was the agent's ability to maintain consistency. When refactoring string utilities, it would apply the same patterns to array utilities without me having to repeat instructions. It learned the style and conventions I preferred.

The multimodal aspect helped with documentation too. I could show it how I wanted code examples formatted, and it would apply that formatting across all the documentation files.

Was it perfect? No. I had to roll back some changes that broke edge cases, fix type definitions that weren't quite right, and adjust implementations that were technically correct but stylistically different from the rest of the codebase. But overall, what would have taken me a week of tedious refactoring work was done in a couple of days, with much of that time spent on review rather than actual coding.

The Verdict: Should You Try It? 🎯

Look, Google Antigravity is fascinating tech, and it represents a genuine shift in how we might code in the future. But is it ready to replace your current workflow? That depends.

You should definitely try Antigravity if:

You're working on projects that need significant refactoring or modernization
You want to experiment with agent-first development workflows
You're comfortable reviewing AI-generated code thoroughly
You have the patience to learn a new development paradigm
You're building web applications that benefit from browser-based testing

Maybe stick with your current tools if:

You need rock-solid reliability without API rate limits
You're deeply invested in a specific IDE's extension ecosystem
You work on projects where every line needs to be hand-crafted
You prefer traditional development workflows
You need consistent performance without latency issues

For me, Antigravity has earned a place in my toolkit, but it hasn't replaced everything else. It's incredible for large refactoring tasks, prototyping new features, and handling repetitive coding work. But for precision work, debugging complex issues, or when I need complete control, I still reach for my traditional IDE.

Some Positive Thoughts to Wrap Up 🌟

Despite the criticisms, I genuinely think Google is onto something here. The agent-first paradigm feels like a natural evolution of AI coding assistants. Instead of treating AI as a fancy autocomplete, we're moving toward AI as collaborative team members that can handle entire workflows.

The fact that I could refactor an entire library with significantly less manual effort is remarkable. Even with the rough edges, the productivity gains are real. As someone who maintains multiple open source projects, anything that helps me tackle technical debt faster is valuable.

The multimodal capabilities open up interesting possibilities. Being able to communicate through code, text, and visuals makes the interaction feel more natural and expressive than pure text-based chatbots.

And here's something often overlooked: the learning experience. Using Antigravity forced me to think more architecturally about my code. When you're describing goals to an AI agent rather than implementing them yourself, you naturally focus more on the "what" and "why" rather than the "how." This higher-level thinking has actually improved how I approach problems even when I'm not using the tool.

Google's also iterating fast. The issues I mentioned rate limits, performance, rough edges, are all things that can improve over time. We're in the early preview phase, and if Google continues investing in this platform, it could become really powerful.

What's Next for Me? 💫

I'm planning to continue using Antigravity for appropriate tasks while keeping my traditional IDE for others. The key is understanding which tool fits which job.

For Easy Kit Utils, the refactoring is now complete thanks to Antigravity's help, and the library is in much better shape. TypeScript definitions are solid, the code is modernized, and test coverage is improved. Now I can focus on adding new features rather than dealing with technical debt.

I'm also curious to experiment more with the multi-agent workflows. The idea of having multiple AI agents working on different aspects of a project simultaneously is compelling, even if the execution is still rough around the edges.

And honestly? I'm just excited to see where this technology goes. Whether Antigravity specifically becomes the dominant tool or not, the concept of agent-driven development is here to stay. We're watching the future of coding take shape in real-time.

Conclusion

Google Antigravity is bold, ambitious, and imperfect. It's not a "Cursor killer" or a revolutionary replacement for all your dev tools. But it is a genuinely interesting experiment in how AI can be integrated into the development workflow at a fundamental level.

If you're a developer who likes exploring new tools and aren't afraid of some rough edges, absolutely give it a try. The experience of working with autonomous coding agents is both enlightening and occasionally frustrating, but definitely worth experiencing.

For open source maintainers like me who need to juggle multiple projects, anything that helps tackle maintenance tasks more efficiently is worth exploring. Antigravity helped me ship a better version of Easy Kit Utils faster than I could have done manually.

Is this the future of coding? Maybe. Parts of it, at least. We're still figuring out what works and what doesn't. But that's what makes it exciting.

So yeah, go download it, try building something, break it, learn from it. And let me know what you think!

Happy coding! ✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹

Firebase Studio: Google's Game-Changer for AI App Development 🔥

Domenico Tenace — Mon, 24 Nov 2025 09:00:00 +0000

Overview

Hey everyone! 👋

If you've been paying attention to the dev world lately, you probably noticed Google dropped something pretty wild: Firebase Studio. And trust me, this isn't just another IDE with a fancy AI chatbot slapped on the side.

This is a full-blown, cloud-based development environment that fuses Project IDX, Firebase services, and Gemini AI into something that feels genuinely different. Think of it as your complete AI app development lab, accessible from anywhere, with an AI assistant that doesn't just autocomplete, it understands your codebase and can actually take action.

Let's start! 🤙

What Exactly Is Firebase Studio? 🤔

Firebase Studio is a cloud-based, agentic development environment powered by Gemini that includes everything developers need to create and publish production-quality AI apps quickly, all in one place. But what does "agentic" actually mean here?

It means Gemini isn't just passively answering questions. It can:

Update your project files directly
Run terminal commands for you
Interpret command outputs
Suggest next steps based on what's happening in your code

Firebase Studio unifies Project IDX with specialized AI agents and assistance from Gemini in Firebase to provide a collaborative workspace accessible from anywhere. Basically, Google took their Code OSS-based IDE (Project IDX), threw in Firebase integration, added powerful AI agents, and wrapped it all up in a browser-based package.

No local setup. No configuration hell. Just open your browser and start building.

Two Ways to Work: Code or Prompt 💻

Here's where things get interesting. Firebase Studio gives you two distinct modes:

Coding Mode (Full Control)

This is your traditional IDE experience, but supercharged. You get:

A Code OSS-based editor (basically VS Code in the cloud)
Access to extensions from Open VSX Registry
Full Git integration (GitHub, GitLab, Bitbucket)
Gemini assistance inline within your code editor, through the command line interface, and using chat

It's perfect when you know what you want to build and just need AI to speed things up.

Prototyping Mode (No Code Required)

Now this is where my mind was blown 🤯

The App Prototyping agent (they call it "Prototyper") lets you build full-stack apps using natural language, images, drawings, and screenshots. No code required.

It assists you with designing your app, such as the UI, API schema, and AI flows, all using natural language, images, drawing tools, and screenshots.

Want to pivot? Just keep prompting. When you're happy with it, deploy directly to Firebase App Hosting and share a URL with others. It's that simple.

The best part? You can seamlessly transition between coding and prompting to harness the strengths of each. Start with a prototype to nail the structure and user flow, then switch to Code view to add custom logic and integrations. It's flexible as hell.

Gemini Integration: Not Your Average AI Assistant 🧠

Let's talk about what makes Gemini in Firebase Studio special, because this isn't just ChatGPT in a sidebar.

Chat That Actually Understands Your Code

Gemini in Firebase can provide code suggestions, generate code, explain code concepts, update project files, run terminal commands, and interpret command output.

The key word here is "workspace-aware." Gemini has indexed your entire codebase, so when you ask questions, it's not giving generic answers, it's giving answers specific to your project.

Inline Assistance

As you type, you get intelligent code completion. But you can also select any piece of code and ask Gemini to:

Make it more readable
Explain what it does
Generate documentation
Write tests for it
Refactor it

Terminal Integration

This one's wild. Gemini can suggest terminal commands, and with one click, it'll run them for you. After execution, it interprets the results and suggests next steps.

Running a dev server? There's a "Detach" button so the server keeps running while you continue chatting with Gemini. These small UX details make a huge difference.

Complex Task Automation

Gemini can automatically generate documentation in the appropriate format for your code when you ask it to "Write my docs," and can automatically update and generate unit tests.

Imagine saying "write my tests" and Gemini finds your test files and adds missing test cases. Or "write my docs" and boom—proper documentation in the right format. That's huge for productivity.

Real-World Power: Gemini 2.5 💪

Recently, Firebase Studio upgraded its App Prototyping agent to use Gemini 2.5, Google's most powerful AI model, which is particularly good at coding tasks.

The results speak for themselves. Google shared some example apps built entirely through prompting:

Interactive Music Tutor: built in under 10 minutes, complete with lesson catalog for beginner to advanced users. The AI automatically found the right JavaScript libraries to generate piano sounds.
Smart Task Scheduler: created in 30 minutes, integrating Google Tasks and Calendar APIs. It schedules tasks around appointments, breaks large tasks into manageable pieces, and even provided OAuth setup instructions.
Quantum Physics Simulator: built with just three prompts, featuring detailed interactive tutorials on quantum phenomena like the Bell test, double-slit experiment, and quantum tunneling.

These aren't toy examples. These are real, functional apps that would normally take days or weeks to build.

Templates & Getting Started 🎯

Firebase Studio comes with over 60 pre-built templates supporting most tech stacks. Whether you're building with React, Vue, Angular, Flutter, Python, or whatever—there's likely a template ready to go.

Want to build with the Gemini API directly? There are dedicated templates for JavaScript (with Vite or Genkit) and Python (notebook or Flask app), with more coming soon.

And here's the kicker: Firebase Studio is currently available with 3 workspaces at no cost during preview. Members of the Google Developer Program get up to 30 workspaces.

Privacy & Data Usage 🔒

Let's address the elephant in the room: AI and data privacy.

Use of generative AI features within Firebase Studio is governed by the Generative AI Prohibited Use Policy and the Gemini API Additional Terms of Service.

Here's what you need to know:

Default behavior: your prompts and responses may be used for model training
Want privacy? You have options:
- Don't use the App Prototyping agent
- Don't use Gemini in Firebase within Firebase Studio
- Turn off code completion and indexing in settings

If you're using Gemini Code Assist with a paid subscription, your data won't be used for training. But for the free tier, Google is transparent: your interactions help improve the models.

Customization & Control ⚙️

Don't like being fully on rails? Firebase Studio has you covered:

AI Rules Files: customize how Gemini assists you with specific instructions
.aiexclude Files: like .gitignore, but for AI—exclude sensitive files from Gemini's context
Model Selection: you can configure your Gemini API key and select different Gemini models from User Settings
Codebase Indexing: toggle whether Gemini indexes your entire codebase

You maintain control over how deeply AI integrates with your workflow.

My Take: Top or Flop? 🎲

Let me be real with you: this is pretty impressive.

The seamless integration between prototyping and coding is genius. Starting with natural language to nail the structure, then dropping into code for fine-tuning—that workflow just makes sense.

The terminal integration and workspace-aware assistance feels genuinely useful, not gimmicky. And the fact that Gemini can actually do things (run commands, update files) rather than just suggesting, that's the future.

But is it perfect? Nah. It's in preview for a reason. There are rough edges, and you still need to validate everything AI generates (Google is very clear about this). But the potential here is massive.

What's Next? 💫

Google is rolling out early access to Gemini Code Assist agents within Firebase Studio. These specialized agents can:

Migrate code between framework versions
Run adversarial AI testing
Create wiki-style documentation for onboarding

They're also expanding Genkit (their AI framework) with better Python and Go support, and adding more models through Vertex AI.

The ecosystem is growing fast, and Firebase Studio sits at the center of it all.

Give It a Try 🌟

If you're building AI-powered apps, or just curious about where development tools are heading, Firebase Studio is worth checking out. Three free workspaces during preview is a pretty generous offer.

Is it going to replace your local dev environment tomorrow? Maybe not. But for prototyping, experimenting, and building AI apps quickly, it's a legit tool that deserves attention.

And honestly? The idea of spinning up a full development environment in seconds, from any browser, with an AI assistant that actually understands your code, that's pretty damn cool.

So go ahead, give it a shot at firebase.studio, and see what you can build.

And now...

Happy coding! ✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹

Introducing Domenico Tenace Open Labs: A New Home for Open Source Innovation 🚀

Domenico Tenace — Wed, 19 Nov 2025 09:58:38 +0000

Overview

Hello everyone 👋

Today I'm excited to share something I've been working on that's pretty close to my heart: Domenico Tenace Open Labs, my new GitHub organization dedicated to open source projects.

If you're wondering why I decided to create this, well, it's simple: I wanted a centralized space where all my open source work could live, breathe, and grow with the help of the community. No more scattered repos, no more confusion about where to find what. Just a clean, organized digital lab where developers can explore, use, contribute, and learn together.

Let's start! 🤙

Why an Organization? 🤔

You might be asking yourself: "Why not just keep everything in your personal GitHub account?"

Fair question! Here's the thing: as my projects started to grow, I realized they needed a proper home. An organization gives us:

Better structure: projects are categorized and easy to find
Community focus: it's not just "my" projects anymore, it's "our" workspace
Collaboration made easy: multiple contributors can work together seamlessly
Professional presence: it shows commitment to open source and community building

Plus, let's be honest, it looks pretty cool to have an official "lab" where ideas come to life 🧪

What's Inside the Lab? 💻

Domenico Tenace Open Labs isn't just one thing, it's a collection of different project types, each serving a specific purpose. Here's what you'll find:

Web Apps & Tools

The practical stuff that solves real problems:

App Repo: a simple cloud-based app storage solution built with Nuxt. Think of it as your lightweight storage companion.
Glif: a minimalist QR code generator and manager. Because sometimes you just need a clean, no-nonsense tool to create QR codes without all the bloat.

Libraries & Components

Reusable code that makes development faster:

Easy Kit Component: a simple component library for Vue 3. No overcomplicated API, just straightforward components you can drop into your projects.
Easy Kit Utils: common JavaScript utilities we all end up writing anyway. Why reinvent the wheel? (spoiler: I reinvented the wheel 😬)

Experimental Projects

Where I test new technologies:

Uno Counter App: a demo app built with Uno Platform to explore their new Hot Design feature. It's a simple counter, but the real magic is in testing cutting-edge tools.

Templates & Starters

Get your projects off the ground faster:

Astro Minimal: an open source blog template combining Astro and Bulma. Clean, minimal, ready to customize.

Documentation & Resources

Knowledge sharing is caring:

Daily Prompt: a curated collection of prompts for automating various processes. AI tools are powerful, but only if you know how to ask the right questions.
Bash Scripts: practical automation scripts for everyday tasks. Because who wants to do repetitive work manually?

The Philosophy Behind It All 🌍

Here's what drives this organization:

Open by default: every project is open source because I believe in transparency and collaborative development.

Community-driven: your ideas, feedback, and contributions shape these projects. Found a bug? Open an issue. Have a feature idea? Let's discuss it. Want to contribute? Fork it and submit a PR!

Learning-focused: whether you're a beginner looking to contribute to your first open source project or an experienced dev wanting to share knowledge, there's a place for you here.

Quality over quantity: I'd rather maintain a handful of useful, well-documented projects than dozens of abandoned repos.

How You Can Get Involved 🤝

This is where it gets fun. Domenico Tenace Open Labs is only as good as the community around it. Here's how you can jump in:

Use the projects: the best feedback comes from real-world usage. Try them out, break them, let me know what works and what doesn't.
Contribute code: see something that could be better? The contribution process is straightforward:
- Fork the repository
- Create your feature branch
- Submit a pull request
Share ideas: have a suggestion for a new feature or an entirely new project? Open an issue and let's chat about it.
Join the community: you can actually request to join the organization! Just open an issue here and become part of the lab.
Spread the word: if you find something useful, share it with others who might benefit.

What's Next? 💫

Looking ahead, I have some exciting plans:

More educational content: I want to create more guides and learning materials, especially for developers who are new to certain technologies.
Expanded library ecosystem: the Easy Kit projects are just the beginning. I'm planning more utility libraries that solve common problems elegantly.
Better documentation: good docs can make or break a project. I'm committed to improving documentation across all repos.
Community projects: I'd love to see projects initiated by community members under the organization's umbrella.

The key is taking it one step at a time. I learned from 2024 that setting too many goals can be overwhelming. This year, it's all about focus and meaningful progress 🪐

Join the Journey 🌟

Domenico Tenace Open Labs is more than just a GitHub organization, it's a growing space for collaboration, learning, and building cool stuff together.

Whether you're here to use a tool, contribute to a project, or just explore what's possible with open source, you're welcome. Every contribution matters, whether it's code, documentation, bug reports, or just spreading the word.

So go ahead, check out the organization, star some repos, fork what interests you, and let's build something awesome together!

And now...

Happy coding! ✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹

Hacktoberfest 2025: Share Your Open Source Projects! 🎃

Domenico Tenace — Mon, 06 Oct 2025 12:35:15 +0000

Overview

Hello everyone 👋

October is here, and you know what that means, it's Hacktoberfest time! 🎉

In this article, I want to talk about this amazing annual celebration of open source and invite you all to share your projects with the community. Whether you're a maintainer looking for contributors or a developer searching for cool projects to contribute to, this is YOUR moment to shine!

Let's start! 🤙

What is Hacktoberfest?

If you're new to this (welcome aboard! 🚀), Hacktoberfest is a month-long celebration of open source software run by DigitalOcean. It's basically the Super Bowl of open source contributions, but instead of touchdowns, we're making pull requests.

The concept is simple:

For Contributors: Make quality contributions to open source projects during October and get recognized for your work
For Maintainers: Get help on your projects, grow your community, and discover passionate contributors

And honestly? Everyone wins. The whole open source ecosystem gets a boost, developers level up their skills, and maintainers get fresh perspectives on their projects. Pretty cool, right? 😎

Why Should You Care?

Look, I get it. You might be thinking: "Another developer event? Do I really need this?"

Here's the thing – open source is where the magic happens.

Some reasons why you should jump in:

For Contributors:

You'll learn by doing (there's no better way, trust me)
Build your portfolio with real-world projects
Connect with developers from all around the globe 🌍
Get comfortable with Git and collaboration workflows
Oh, and did I mention the swag? 👕

For Maintainers:

Fresh eyes on your codebase mean fresh ideas
Documentation improvements (seriously, this is HUGE)
Bug fixes you've been meaning to get to
Growing your project's visibility and community
Finding potential long-term contributors

Let's Share Our Projects! 🚀

Okay, here comes the fun part, I want YOU to share your open source projects in the comments below!

Whether it's:

A cool library you've been working on
That side project you started last year
A brand new tool you just released
An established project looking for contributors
Or even your first-ever open source project (we all start somewhere!)

Drop them in the comments! 👇

Use this format to make it easy for everyone:

🔗 **Project Name**: [Your Project]
📝 **Description**: Brief description of what it does
🛠️ **Tech Stack**: Main technologies used
🤝 **Looking for**: What kind of contributions you need
⭐ **Repo**: Link to your repository

Some Tips for Success

Let me share some wisdom from past Hacktoberfests:

Contributors:

Read the project's contribution guidelines FIRST (seriously)
Start small: fix typos, improve docs, tackle good-first-issues
Don't just spam PRs for the sake of it. Quality matters.
Communicate with maintainers before starting large changes
Be patient and respectful. Maintainers are human too! 🤗

Maintainers:

Prepare your repo before October (trust me on this one)
Create clear, well-described issues
Be welcoming to newcomers – we all started somewhere
Review PRs promptly (contributors lose motivation when waiting too long)
Say thank you! A little appreciation goes a long way 💙

Conclusion

Hacktoberfest is more than just an event, it's a celebration of what makes software development so incredible: collaboration, sharing, and building cool stuff together. 🎊

So what are you waiting for? Drop your projects in the comments, browse what others are sharing, and let's make this Hacktoberfest the best one yet!

Don't be shy about sharing your projects, even if they're small or "works in progress". We all have to start somewhere, and the open source community is incredibly supportive. See you in the comments! 🚀

Happy coding! ✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹

Firebase Storage: Your File Upload Superhero 📁

Domenico Tenace — Mon, 25 Aug 2025 09:55:00 +0000

Overview

Hello everyone! 👋

In this article, I'll walk you through Firebase Storage, Google's powerful file storage solution that makes handling uploads, downloads, and file management incredibly easy. Whether you're dealing with profile pictures, documents, videos, or any other files, Firebase Storage has got your back!

Firebase Storage is built on Google Cloud Storage, so you get enterprise-level reliability and performance without the complexity. Plus, it integrates seamlessly with Firebase Authentication and works beautifully across web, mobile, and server environments.

Let's start! 🤙

Why Firebase Storage Rocks

Before we jump into the code, let's understand what makes Firebase Storage so awesome:

Robust Upload/Download: Handles network interruptions gracefully with resumable uploads
Security: Built-in authentication and security rules
Scalability: Automatically scales from KB to petabytes
Global CDN: Fast downloads from Google's global network
Real-time Integration: Works perfectly with Firestore and other Firebase services
Multiple Formats: Images, videos, documents, audio - you name it!

The best part? You don't need to worry about server management, CDN configuration, or handling network failures.
Firebase does all the heavy lifting! 💪

Choose Your File Types

Firebase Storage can handle pretty much any file type you throw at it:

Images: JPG, PNG, GIF, WebP, SVG
Videos: MP4, MOV, AVI, WebM
Documents: PDF, DOC, DOCX, TXT, CSV
Audio: MP3, WAV, AAC, OGG
Archives: ZIP, RAR, TAR
Code: JS, CSS, HTML, JSON

You can even store custom file formats - Firebase Storage doesn't discriminate! 🎯

Setting Up Firebase Storage

Let's get our hands dirty and set up Firebase Storage in your project.
Before we dive into the code, let's set up our Firebase project.
To setup the project, you can retrieve this article where I talk about it.

Step 1: Enable Storage in Firebase Console

Go to your Firebase project console
Click on "Storage" in the left sidebar
Click "Get started"
Choose your security rules mode (we'll configure this properly later)
Select a storage location close to your users

Your storage bucket is now ready! 🚀

Step 2: Configure CORS (if needed)

For web uploads, you might need to configure CORS. Create a cors.json file:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Then apply it:

gsutil cors set cors.json gs://your-bucket-name

Basic File Operations

Let's learn the fundamental operations: upload, download, and delete files.

Step 1: Uploading Files

Here's how to upload files to Firebase Storage:

import { storage } from './firebase';
import { ref, uploadBytes, uploadBytesResumable, getDownloadURL } from 'firebase/storage';

// Simple file upload
const uploadFile = async (file, path) => {
  try {
    const storageRef = ref(storage, path);
    const snapshot = await uploadBytes(storageRef, file);
    console.log('Upload completed:', snapshot);

    // Get download URL
    const downloadURL = await getDownloadURL(snapshot.ref);
    return { success: true, downloadURL, error: null };
  } catch (error) {
    console.error('Upload failed:', error);
    return { success: false, downloadURL: null, error: error.message };
  }
};

// Upload with progress tracking
const uploadFileWithProgress = (file, path, onProgress) => {
  return new Promise((resolve, reject) => {
    const storageRef = ref(storage, path);
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on('state_changed',
      // Progress callback
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        onProgress(progress);
        console.log('Upload is ' + progress + '% done');
      },
      // Error callback
      (error) => {
        reject(error);
      },
      // Success callback
      async () => {
        const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
        resolve({ downloadURL, snapshot: uploadTask.snapshot });
      }
    );
  });
};

Step 2: Downloading Files

Here's how to retrieve files from Firebase Storage:

import { ref, getDownloadURL, getBlob } from 'firebase/storage';

// Get download URL
const getFileURL = async (path) => {
  try {
    const storageRef = ref(storage, path);
    const url = await getDownloadURL(storageRef);
    return { success: true, url, error: null };
  } catch (error) {
    console.error('Failed to get download URL:', error);
    return { success: false, url: null, error: error.message };
  }
};

// Download file as blob
const downloadFile = async (path) => {
  try {
    const storageRef = ref(storage, path);
    const blob = await getBlob(storageRef);

    // Create download link
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = path.split('/').pop(); // Extract filename
    a.click();

    // Cleanup
    URL.revokeObjectURL(url);

    return { success: true, error: null };
  } catch (error) {
    console.error('Download failed:', error);
    return { success: false, error: error.message };
  }
};

Step 3: Deleting Files

Here's how to remove files from Firebase Storage:

import { ref, deleteObject } from 'firebase/storage';

// Delete a file
const deleteFile = async (path) => {
  try {
    const storageRef = ref(storage, path);
    await deleteObject(storageRef);
    console.log('File deleted successfully');
    return { success: true, error: null };
  } catch (error) {
    console.error('Delete failed:', error);
    return { success: false, error: error.message };
  }
};

Security Rules for Storage

Let's set up proper security rules to protect your files! 🛡️

Step 1: Basic Security Rules

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // Default: only authenticated users can upload/download
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Step 2: User-specific File Access

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // Users can only access their own files
    match /users/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }

    // Public files - anyone can read, only auth users can write
    match /public/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    // Profile pictures - readable by all, writable by owner
    match /profiles/{userId}/avatar.jpg {
      allow read: if true;
      allow write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Step 3: File Type and Size Restrictions

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // Helper functions
    function isImageFile() {
      return request.resource.contentType.matches('image/.*');
    }

    function isUnder10MB() {
      return request.resource.size < 10 * 1024 * 1024;
    }

    function isAuthenticated() {
      return request.auth != null;
    }

    // User uploads with restrictions
    match /uploads/{userId}/{fileName} {
      allow read: if isAuthenticated();
      allow write: if isAuthenticated() && 
                      request.auth.uid == userId && 
                      isImageFile() && 
                      isUnder10MB();
    }

    // Document uploads
    match /documents/{userId}/{fileName} {
      allow read, write: if isAuthenticated() && 
                            request.auth.uid == userId &&
                            (request.resource.contentType.matches('application/pdf') ||
                             request.resource.contentType.matches('application/msword') ||
                             request.resource.contentType.matches('text/.*')) &&
                            request.resource.size < 50 * 1024 * 1024; // 50MB limit
    }
  }
}

Conclusion

You now have a working Firebase Storage setup: upload files with progress, fetch download URLs, organize content, secure access with rules, and run it all locally with the emulator.

Happy coding!✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹