Windsurfing: discoveries and transformations

How an IDE made me rethink my relationship with AIs

Walter Gandarella • December 18, 2024

You know that magical moment when you discover a tool that completely changes the way you work? That’s exactly what happened to me (and the team too) when I got to know Windsurf, the latest creation from Codeium that is revolutionizing the way we develop software.

I confess that I have always been one of those developers a bit skeptical about this idea of "letting AI do everything." We used ChatGPT and Claude.ai directly, but always as partners to improve existing code, fix bugs, or learn some new concept. The idea of simply throwing out a prompt and asking "create an app for me" gave me a tickle of guilt as a programmer. It felt like cheating in the game, you know? But then, like every good stubborn person who eventually learns a lesson, I realized I was missing an incredible opportunity to elevate my work to another level. And that’s when Windsurf came into play.

I will share with you our experience with this amazing tool that has made our coding days much more productive and, honestly, more fun.

What is Windsurf?

Windsurf is much more than just another code editor. It represents a significant evolution in the concept of IDEs with integrated artificial intelligence. It’s practically like having an assistant that not only completes your code but also deeply understands the context of your project and collaborates with you in an almost telepathic manner.

Codeium has created something truly special here. Windsurf is built on a solid foundation (yes, it’s a fork of VS Code, but don’t be fooled - it goes far beyond that) and introduces a revolutionary concept called "AI Flows." This makes the IDE in sync with your development process, anticipating your needs and offering solutions even before you realize you need them.

Getting Started: Install and Configure

Let's start with the basics. Installing Windsurf is surprisingly simple. You can download it directly from the Codeium website, and the initial setup is practically self-explanatory. What’s cool is that if you already use VS Code, you can even import your current settings and continue in your comfort zone.

Download Windsurf

To install:

  1. Go to the official Codeium website
  2. Download the version for your operating system
  3. Run the installer
  4. On the first run, you will be guided through a super smooth onboarding process

A golden tip: during the initial setup, pay special attention to the theme options and keyboard shortcuts. Windsurf offers both standard VS Code bindings and Vim, so choose what best suits your style. I opted to install a VS Code extension (yes, it supports most of them) to implement the keyboard shortcuts from WebStorm.

The Difference Maker: Your New Best Friend

The star of the show here is definitely Cascade, which is like a turbocharged evolution of the chat you find in other AI IDEs. The difference is that Cascade truly understands what is happening in your project.

Let me share my practical experience: I was working on a project with various dependencies and different APIs. Normally, it would be a headache to set everything up. Cascade not only helped me identify the necessary dependencies but also suggested and executed the installation commands automatically!

The most impressive thing is how it maintains the context of the conversations. There’s no need to explain everything again with each interaction. It remembers previous decisions and builds an increasingly deeper understanding of your project.

Model Selection

And there’s even more; if you have a premium Codeium account, things get more interesting! Besides Cascade, you can choose to work with Anthropic's Claude 3.5 Sonnet or OpenAI's GPT-4o. You have a team of specialists at your disposal, each with their own unique style of solving problems. I particularly enjoy doing a "test drive" with different models depending on the type of task - sometimes Claude gives you that detailed answer you need, other times GPT-4o comes up with a more creative solution you hadn't even imagined.

Features That Make a Difference

In day-to-day use, some features of Windsurf stand out tremendously:

SuperComplete is a feature that goes beyond traditional autocomplete. It not only suggests the next piece of code but also understands the intention behind what you are doing. It practically reads your mind!

The integration with the terminal is another highlight. Windsurf can detect when you need to execute specific commands and even suggest fixes when something goes wrong. Gone are the days of googling error messages! Integration with terminal

And there’s also the credit system. In the free version, you already have access to incredible features, but the paid plans (Pro and Pro Ultimate) unlock even more possibilities. The twist is that you can start with the free plan and evolve according to your needs.

Facing the dreaded legacy code (and surviving to tell the tale!)

Have you ever had the feeling of opening an old project and feeling that little chill in your stomach? Well, every developer has been there. When I started using Windsurf, I confess I was skeptical about how it would behave with our more... let’s say... "experienced" projects. I thought it would be great only for new projects, built from scratch, all pretty and organized. But what a pleasant surprise I had!

Like the day we opened a large legacy project - one of those that you look at and think "my God, why did we do this?". It was a monster with repeated code, variables with mysterious names, and an architecture that looked more like a plate of spaghetti. Do you know what Windsurf did? It not only understood all that confusion but also helped us navigate through it!

Cascade, in particular, left us speechless. It not only understood the logic behind the chaos but also started suggesting improvements in a respectful way to the existing code. It was as if it said, "Look, I know this is a bit messy, but let’s solve one problem at a time, okay?".

One thing that impressed us a lot was how it managed to maintain coherence with the style of the original project (even when that style wasn’t great). When we needed to add new features, Cascade suggested code that seemed to have been written by the same team - only more organized and with good practices subtly incorporated.

And the refactorings? One day, we asked it to take a look at a particularly problematic module. It not only identified the problems but also suggested a series of gradual improvements that could be implemented without breaking anything. We now had a senior consultant sitting next to us, but this consultant has infinite patience and doesn’t charge that much!

And to top it off, it helped us document some obscure parts of the code. Sometimes, just by explaining to it what I was trying to understand, it would come up with insights like, "Ah, it seems this snippet is doing X because of Y, and it could be improved like this...". Without that judgment we usually get when asking for help from other devs.

Practical Example: Creating a ToDo List

Let’s get our hands dirty! There’s nothing better to understand the power of Windsurf than creating a real project. We will show how to create a Todo List application using Cascade.

Our ToDo List App

The first step is to open Cascade (CTRL+L or clicking on the icon) and start a natural conversation:

"I want to create a Todo List application using pure Javascript, HTML, and CSS that stores data locally."

Prompt in Cascade

That’s when Cascade starts to work. It not only generates the code but also explains each decision and allows for adjustments along the way. It creates the project structure, suggests good practices, and even implements extra features that make sense for a Todo List.

For example, when we mentioned that we wanted to add animations for the actions of completing and deleting tasks, Cascade not only implemented the animations but also suggested improvements in the user experience that I hadn’t even thought of!

Add animations

You can download the code for this example and test it locally by clicking here.

The Impact on Productivity

After a few weeks of using Windsurf, we noticed (I personally) a good change in productivity. Tasks that used to take hours are now resolved in minutes. But it’s not just about speed - it’s also about quality.

Windsurf helps us maintain cleaner and more consistent code. Its suggestions are based on good programming practices, and the real-time feedback on potential issues helps us avoid bugs before they even happen.

Another interesting aspect is how it helps us learn. By explaining its suggestions and decisions, Windsurf ends up functioning as a mentor, introducing me to new patterns and techniques we can apply in future projects.

The future of software development is clearly shaping around tools like Windsurf. The combination of a powerful IDE with artificial intelligence is no longer just a convenience - it is becoming a necessity to remain competitive and efficient in modern development. If you haven't tried Windsurf yet, I highly recommend giving it a chance. Start with the free version and see for yourself how it can transform your programming style. As I mentioned at the beginning, I was the last (in my team) to adopt it; here at Yes Marketing, almost everyone was already using this tool in their workflow. Do you really want to be left behind?


Latest related articles