DEV Community: Henrique Doro

Starting Bolt's hackathon by kicking Bolt.new's tires - TL;DR vibe-coding is 🤮

Henrique Doro — Tue, 03 Jun 2025 15:29:55 +0000

Skip to the bottom if you want the conclusion of this project 😬

This may be a bit over-the-top, but to start my entry at World's Largest Hackathon by Bolt I'll actually build another entry to help me document my journey.

I've long been a fan of devlogs, videos or essays showing the work on a game, piece of art or software. The issue is I'm always a bit lazy to edit videos of my dev journey, so I never got around to creating them.

Instead, an idea has been circulating my mind for a while: what if dev logs were partially automated? I won't answer this question fully for now, but I'll take a stab at it with a first submission to the hackathon.

As I'm building with Bolt, I've started with a prompt:

Before putting it into Bolt, though, I want to refine the prompt. I want to see if I can make it into the One Shot bonus competition of the hackathon, meaning the app should be done in a single prompt.

To refine it, I'm chatting with Claude 4 Sonnet. Here's my prompt:

I'm building an app using Bolt.new and I need help refining my prompt. Here's my first draft. Questions to help me polish it:

1. what is missing from its requirements? 
2. is this technically doable? I'm not very familiar with OPFS or ffmpeg in the browser
3. is this design sound? What would you modify in it for better ergonomics to document devlogs?
4. how can it be clearer for an AI to build this correctly according to spec?

Right off the bat, I realized the issue was deeper, so I took a step back and experimented a bit with OPFS and recording the user's screen. After some back-and-forth with Claude, I realized I'd probably have to let got of the one-shot prompt and would need some designing in Figma.

So, in the spirit of this AI-first competition, I've took the chance to experiment with Figma's AI features.

It impressed me at first, but soon I realized it was just applying whatever I said to a set of templates. It can't think like a designer and solve any UX problems. It does speed up connecting prototypes, and it did provide me with a good base for the brutalist design of the app.

After a couple hours, here's the Figma design I got to.

With this, I finished understanding the project and got to finish the prompt:

Now, I was ready to try out Bolt's Figma integration. I was excited, but it didn't last:

Importing from Figma doesn't allow you to provide any prompts regarding the tech stack, so I was stuck with what was provided.
Bolt requires too many permissions in my Figma account, I'm afraid they use it to further train AI, or that they may eventually expose something from one of my private files
Bolt uses Anima to kickstart the code from Figma, which means another party has my data & creation
You can only import one frame at a time
And last but not least, the resulting code is hideous and super hard to maintain, full of dynamic Tailwind classes and unnecessary styles 😅

So I took a step back and tried starting from my prompt and screenshots instead. This is where I encountered the first big issue I'll have to face in this hackathon: iteration speeds aren't the greatest when you need to wait on these models to think, and on the Stackblitz container to boot and process changes.

I am impressed by Bolt's quality for the first 80%, but I predict the last 20% will take way longer than doing it in my code editor of choice. Let's see, hope to be proven wrong!

A big highlight is how Bolt handles errors: you can nudge it towards a specific direction with your knowledge, and it does decently well.

I got uneasy seeing the agent edit the project with no clear history of what changed, so I jumped into the Github integration immediately. As with the Figma integration, I'm uneasy giving Stackblitz/Bolt read+write access to all my repositories... but I'll just roll with it.

I dislike that every interaction & change is a commit in Git, but this is still better than no Git.

Bolt created an UI that was stylistically different from what I had designed in Figma, but the layout was correct.

💡 Lesson learned: As I disliked the Figma integration and Bolt doesn't reproduce screenshots perfectly, moving forward, I won't spend as much time tidying up the Figma file with proper components, colors, variables, typography and auto-layouts.

Functionally, the app was also misbehaving badly. I'll resist my typical engineer-minded approach to understand the code and refactor it manually, and will instead try to vibe-code the entire way through it.

As I'm vibe-coding, I'm realizing it gives me some brain-rot. I don't really want to read Bolt's explanations, and just want to click "Attempt fix" after "Attempt fix".

Also, when I do try to go deep into the issue, I'm faced with an IDE that has no Typescript support, no command palette, and overall convoluted design. Not great for a code-first experience.

Reality of vibe-coding hits

As I'm building this, I'm starting to give up on the hackathon. I'd love to participate, but building with Bolt doesn't seem to cut it for me.

No file tabs, only one open at a time
Hard to navigate
Every keystroke is a commit in Github
No clear diff of changes. I have to go into Github to see the commit to understand what the AI has done
Every change requested rewrites the entire file

Honestly, it feels like I'm doing the worst part of coding, debugging, and the AI the fun part of coming up with solutions, except it produces spaghetti code that is hard to track 🥴

As this hackathon requires you to build fully with Bolt, I'm out. No way I'm finishing anything with it, I'd go crazy trying.

Ah... how I wish this was a Cursor or Windsurf hackathon instead!

A letter to my future anxious self

Henrique Doro — Wed, 08 Jan 2020 14:59:55 +0000

Dear future me,

You could be doing and learning much more.
You could be earning more money and progressing in your career.
You could impact the world a bit further.
Yes, you could do A, B, ... XYZ.

The only thing I ask of you is to breathe deeply and think critically if whether these goals are set consciously by you or if they're imposed by society's expectations.

Remember that comparing yourself to others is a sure way to get the wrong idea and brew anxiety. These high achievers you're so keen on using as inspiration don't have the same trajectory as you, making it impossible to follow their exact path, which is actually a blessing, not a curse.

You have the privilege of being able to define your own path according to your values and beliefs, so please use it for good!

Yours truly, post-anxiety crisis you.

For context:

I almost didn't sleep last night, ruminating on how much I've been lacking as a professional lately. As of late, my body and mind have been lazy and tired, and focusing enough to learn a new topic or solving hard problems has been impossible. Then, after a day-long failed attempt of creating a cache strategy for my CI pipelines, I had the brilliant idea of scroll through a Twitter feed full of "2019 in review" posts, in which people were sharing their amazing year of crazy growth.

This text is just a way of reassuring myself that my path is valid and that respecting the body and mind's state is important. Else we fall victim to the demands of our capitalist society that wants to squeeze every little drop of our energy in favor of production, which in our software world means learning everything and regularly building tons of projects and products.

In the end, pushing your boundaries might not be so sustainable and end up hurting your productivity. I'll leave you with Justin Jackson's quote, which can easily be applied to any career:

Good businesses have margin.

Profit margin, yes.

But also margin for your time, your emotional and physical health, your relationships, your sanity, and your integrity.

Low-margin work eventually leads to ruin. The margins rarely get better; the sunk costs get worse.
— Justin Jackson (@mijustin ) January 7, 2020

I know many of you suffer from this dilemma, what's your take on this?

⚡ Make Gatsby faster with Preact (1 LOC)

Henrique Doro — Sun, 13 Oct 2019 16:03:58 +0000

Note: I went into more detail on the why for this in my personal blog on the post Speed up your Gatsby site with 1 line of code 🤯. There's also a bonus tip there fore further improvements ;)

Gatsby uses React as its rendering engine;
Preact has the same API and is compatible with React, but is significantly smaller;
gatsby-plugin-preact automatically does the change for you, with no side effects (at least known to me);
Simply yarn add gatsby-plugin-preact preact and add 'gatsby-plugin-preact' to your gatsby-config.js plugins array;
And, voilà, you've got yourself a website with ~100kb less minified JS (uncompressed, 30.5kb for gzipped), which will load and parse faster, waste less bandwidth and perform better on Lighthouse scores, leading to better SEO 🎉

Again, for more info on this, refer to the full post on my blog 😉

I started questioning my tech stack, and now I'm lost 😔

Henrique Doro — Tue, 30 Apr 2019 22:02:13 +0000

I'm a web designer 100% confident with my tech stack of choice, certain that the future is static and JS-powered and Serverless and PWA and AMP and GraphQL and (insert flashy buzzword here)

That was true, until I started questioning this vision.

Today I got a bit sad and lost about the future of the web... Everywhere I look there are plenty of hurdles and foul stuff just waiting around the corner to jump on me, my clients or their users, so I figured I'd raise this discussion here:

The "traditional" web is slow, can be insecure and full of trashy stuff, of which WordPress, Wix and the likes are a big source
A possible solution is AMP, but it's clearly Google's attempt to dominate the web even further
- See Kill AMP before it kills the web
Then we have the Javascript bloat provided by the whole framework tycoon
- There are big proponents of "let's talk about the javascript cost", like Addy Osmani, but I don't feel like there's any expressive movement to steer the web dev community farther from its current reliance on JS
- The amazing developer experience provided by Gatsby (which has been my tool of choice) is also helping to make this bloat a default on the web. Just look at their own website: "Fast in every way that matters" and, yet, it loads 6 megabytes of uncompressed Javascript in a single blog post. Hm... how fast 🤔
Compiler frameworks like Svelte, Imba and Stencil attempt to reduce this bloat by reducing the number of abstractions in client-side runtime...
And static site generators such as Hugo and Eleventy make it easier to build complex websites without the need of runtime JS...
However, these abstractions pulls us farther from being able to just view source, which, as Kyle Simpson rightly put, could be a downfall to the web as it would make it harder for new developers to get in.
And, yet, it's still impossible to do complex work that doesn't rely on any type of external tools other than browser-supported technology. I don't know what to do 😔
- Clients need to be able to edit content visually, and for that we need a CMS.
- This CMS can't inject the data directly in the HTML, there's no <link rel="content" /> we could use, so we need to either
- Pull in the data client-side with Javascript and then render it, but... javascript bloat (and SEO, of course)
- Work with the data in the server at runtime, but... bad performance (and high costs / maintenance)
- Generate the website on build time, but... abstractions (and lock-in, might not be very future proof, etc.)
- And, honestly, the idea of just building .html, .css and (very few) .js files doesn't feel like a productive workflow. It might be that we became spoiled with so many tools, but going full vanilla truly can be a problem if working on big projects / with big teams.

So, yeah, I'm lost, please show me the way. Oh, I was super over simplistic with my approach to each of these topics, but even so I believe the main point hits home. If you want to evangelize your new gameChangingThing.js or fight me on my views, please don't comment below, this is supposed to be an open conversation about the future of the web and of our trade as developers 😉

How do you learn / evolve with Gatsby? 🤨

Henrique Doro — Wed, 27 Mar 2019 11:19:30 +0000

I've been thinking a lot about learning Gatsby and if there are ways we could improve it... But before doing anything, I need your input to learn what is really relevant, so do you mind answering the following (quick) questions? No need to answer all of them 😄

Other than the docs, where do you search for knowledge on Gatsby? How does that work for you?
What areas of Gatsby were / are the hardest for you to learn?
And, finally, what do you think of the Gatsby community?

Have an amazing day and thank you for your time 💜