Vibe-coding
By now, almost everyone has heard something about “vibe-coding”. But I only recently realized just how much good AI models can actually simplify development. Some ideas which were scary even to start working on now turn into working projects with Copilot in a matter of hours, simply “on vibes”.
Of course, AI isn’t a silver bullet: there are still hallucinations and questionable “improvements”. But those are more the exceptions - or a signal that it’s time to reset the context and let the model take a fresh look. Large-scale tasks like “rewrite the entire project from framework X to framework Y” are better not given to Copilot: even on a relatively small project of a few dozen files, it can easily get lost. But localized tasks, especially when the existing code is at least somewhat structured, can be solved “in a single prompt” in no time.
A recent example: “add the ability to resend the activation email”. That’s exactly what I wrote. And the model generated the missing backend endpoint, hooked it up from the frontend, and neatly integrated it into the existing login flow. It’s simply astonishing - and I still can’t stop being amazed.
Maps
Sometimes I find myself looking for maps with specific points, and quite often people share them as Google My Maps.
Don’t confuse this with regular Google Maps - I’m talking about Google’s somewhat neglected service where you can create your own map, add points and/or tracks on it, customize names, and share it with friends or the world.
Attentive readers may have noticed that in almost every major travel report I post, I include one of these personal Google My Maps with my route and points.
Quite often I come across maps in this format when searching for street art. And of course, it’s great when you manage to find something. But Google My Maps is very much a service from the pre-smartphone era. It’s convenient to use on a large screen with a mouse: you can toggle categories on and off, add other points to the map, or download the file with points.
On a phone, however, only a stripped-down fragment of functionality remains - the map simply opens in the Google Maps app and shows the points. That’s it. You can’t display multiple maps at once, you can’t toggle categories, and you can’t download anything! The most frustrating part is that even if you enable “desktop mode” in your mobile browser, the sneaky Google Maps app still intercepts My Maps links, so you never get to see the cherished “Download KML” button.
The other day I stumbled upon something that felt like a true “A-ha” moment - it turns out the download links are generated in a completely simple and obvious way!
If a regular link looks like
https://www.google.com/maps/d/u/0/viewer?mid=1-XXXXXXXXXXXXXXXXXX&femb=1&ll=48.132268571799074%2C11.55401675000002&z=13,
you can easily spot the key part: mid=1-XXXXXXXXXX. And if you put that into
https://www.google.com/maps/d/u/0/kml?mid=YYYYYYYYYYYY&forcekml=1,
you get a direct download link!
That’s when the idea for a service was born: what if, given a link to a My Maps map, the user could instantly get a KML/KMZ download link? For phones, this is the perfect use case - you can usually manage to copy the map link, but you’re certainly not going to fiddle with parameters by hand.
Without much hesitation, I created a new project - well, just an empty folder - and told Copilot: “Do your magic!”
Now draw the rest of the owl
Russian meme
Well, okay, maybe a little more than that, but not by much. My initial prompt went something like this:
Create me a simple app based on Vue.js with RU and EN i18n.
It should be great looking, utilize Tailwind and be adaptive and responsive for mobiles as well as desktops.
The app is about getting KML/GPX from Google MyMaps.
It should have just one text box for input.
If the input is a valid URL* to google MyMaps, then we should output some success message and a few links to download KML files. The links should be like following, but of course do not show the full URL, make it nicer.
KMZ (compressed) - https://www.google.com/maps/d/u/0/kml?mid=XXX
KML (uncompressed, does not support all icons) - https://www.google.com/maps/d/u/0/kml?mid=XXXXX&forcekml=1
* Valid URLs are like
- https://www.google.com/maps/d/u/0/edit?hl=en&mid=1tWCqTerra6PbOH
=> so we are able to extract `mid` ID from the link.
If user provided not a valid Google My Maps URL, display some information message about it.
The app should support docker compose deployment for production (generate static files and serve via nginx) as well as development flow with `npm` locally. Do not bother about SSL/HTTPS, no need.
The app should have production quality, have some fancy README for publishing to Github.
Time to talk a little bit about the models. According to my observations, both GPT 4.1 or GPT 5 Mini struggle with coding tasks spanning more than a few files. They usually work with single-function changes, however one needs to stay alert - here they will use something non-existent, and there - just some nonsense.
However I’ve really come to enjoy Sonnet 4 a lot, it’s on completely different level. Once I asked to implement a feature… and figured out that it implemented it already few days ago in a different file, but since I didn’t need it, I hadn’t even noticed. It also works well with cross-project prompts, e.g. touching both backend and frontend - Sonnet will likely succeed and produce working code on the first try.
That’s exactly what happened again today. The prompt above produced working and deployable service, even with an icon!
I was so amazed by these “Download” buttons - it was incredible! I definitely wouldn’t have been able to create it myself in a comparable timeframe.
I noticed that it takes longer than expected when I click the button. That’s suspicious. What do you think the reason was? “For better UX” - that was the trick, apparently xD. At first I laughed a lot, but then I realized I had seen similar “processing delays” in real services - and laughed a bit less. Of course, that’s just the kind of code the model was trained on. Still, it was hilarious:
Appetite Comes with Eating
Of course, right away I wanted more. It struck me - why even ask for a Google Maps link, if such maps are usually already embedded somewhere on a page? Why not just provide the link to the site or post instead?
Said and done. Vibe-coding works wonders!
The app should support light/dark theme. Add switcher and also detect theme from browser automatically.
It works! Let’s fine-tune a bit:
Make this theme switch as three buttons and highlight what’s selected
That’s black magic, no doubt! How does it even work?! Sure, the code has ended up in the main file, but it’s easy to fix:
Extract this theme switcher to separate component
Ok, I’ll manage the whistles (maybe the validation needs improvements though?), let’s now parse pages:
If user provides just invalid URL, inform about it - write some red info that it’s not valid URL.
However if it IS a valid URL (but not google map), then we should be still able to at least try to extract it. First we fetch the page source, parse the response with regexp trying to find google map URL and IF it’s found - provide the same download links.
I’m not quite real web-developer, so I discovered a surprise. Apparently you can’t just go and make a client request to different website. I didn’t really discover it myself: I just read what Copilot suggested and was puzzled why on earth it uses some random allorigins website. For some reason, if you want to fetch a page from another domain, you’re treated like a villain. But I honestly meant well - I just wanted the client to send the request directly and be done with it.
But no - you need a separate little service whose only job is to fetch other sites. Things like cors-anywhere or allorigins.win. And since I didn’t want to rely on a public instance, I set up my own (and in the process discovered Caddy - but that’s a story for another time). Another cup of tea down.
Maybe This Too?
I thought it would also be nice to show the map link once we’ve parsed it. After all, someone might want to click it — that would be convenient.
Whether user has chosen Gmaps URL from multiple available or provided the valid gmaps link in the beginning, I’d like to give option for users to either go to this URL or copy it to clipboard. Can we include it to our app?
Impressive, isn’t it? Oh, if the parsing was successful, but no maps data was found, let’s display some parsing size (maybe there is not enough data?).
If scrapeUrlForGoogleMaps returned empty list (but no errors), we need to show it, tell user that page was ok, parsed 10KB (or whatever page size was) but found no links
Well, since we’re on a roll, it would be nice to improve the logo and favicon too. Oh, beautiful - perfect! :)
Conclusion
The path to an MVP took just two hours. A couple more went into deployment: finding a Dockerized version of cors-anywhere, adding analytics, and setting up a buymeacoffee page.
In the end, the service is up and running - check it out https://kml.trips.place/.
For me, this has been the biggest discovery of recent months: development with AI has changed beyond recognition. What used to feel like a “week-long project” now turns into a working service in just an evening. Even without being an expert in a particular framework, you can still build something useful. And while reading through what Sonnet came up with, you end up learning a ton of new things yourself. You can discuss design, architecture, and ideas, generate logos and icons - and the clean, polished web design I got out of it is something I could never have achieved on my own.
As the saying goes, “Any sufficiently advanced technology is indistinguishable from magic”. Today, vibe-coding is exactly that.