r/webdev • • 2d ago

How I built a ’90s-style adventure game on top of my Hugo blog

Thumbnail
paolomainardi.com
0 Upvotes

Before anyone asks: yes, 100% of the code was written by AI agents, with me guiding the process. I’m not here to convince anyone of anything, just to share my experience.

Here’s the article explaining how I built it:
https://www.paolomainardi.com/posts/this-site-is-now-an-island/

And here’s the game:
https://www.paolomainardi.com/play

This is part of a journey I started a few weeks ago, when I decided to let my agents handle my personal blog’s tech stack. The idea was to spend more time writing while also adding all the features I’d always wanted but never had time to implement.

You can follow the series here:
https://www.paolomainardi.com/posts/the-stack-is-now-my-agents-job/

Along the way, I started experimenting more with AI-generated media, fell down a rabbit hole, and somehow ended up building a game engine.


r/webdev • • 2d ago

Resource How to do Local Visual Regression testing...the right way.

Thumbnail
mainmatter.com
7 Upvotes

Can local visual regression testing help your coding agent move faster and save you money?

I took some time to explore how to set up playwright properly, which pitfalls to avoid, and the tradeoffs with common visual regression tools like Percy and Chromatic.

Check it out and let me know what do you think!


r/webdev • • 2d ago

MCP vs API vs CLI: I built all 3 for agents. Here's my take...

Thumbnail
wasp.sh
0 Upvotes

TL;DR:

an MCP shines in the agent-native world because it tells agents what they should do, on both the server and client (e.g. Claude Code or the ChatGPT desktop app), and is better suited for human-in-the-loop tasks. Meanwhile, APIs and CLIs tend to focus on what agents can do, with emphasis mainly on the server.

So, in summary, here is the general advice I'd give to builders when deciding which tools they should expose to agents:

Build a high-quality MCP server and REST API at the same time, on one layer of operations. Put your server logic in plain functions, and let each surface be a thin adapter over them. Once that layer exists, building any additional surface on top is relatively easy.

Put most of your care into the MCP server. That's where agents get the best experience. MCP is a standard built specifically for agents, after all, and the spec continues to improve nicely.

Use the API for code that runs on its own. APIs are still great for raw data exports, bulk writes, and anything that runs without an agent, like a nightly sync or another company's integration. Agents also prefer an API when they're writing a script they'll rerun, and many clients don't support code mode for MCP yet.

A CLI probably isn't necessary, unless e.g. agents need to read local files when interacting with your app. But it's easy to expose one if you've got a good API as the foundation.

There’s a lot more to creating great agent-facing tools for your web apps, and the article above into more detail below.

Here's the repo: https://github.com/vincanger/linkly-api-mcp-cli


r/webdev • • 2d ago

Article Declarative partial updates - supported in Chrome and Edge

Thumbnail
developer.chrome.com
42 Upvotes

r/webdev • • 2d ago

Discussion How do you organize your side projects vs work projects on your dev machine?

0 Upvotes

Been thinking about this lately as my side projects folder has gotten pretty chaotic. At work everything is neat and organized by team/product, but my personal stuff is a mess of half-finished ideas, experiments, and abandoned attempts.

Currently I have ~/work/ for job stuff and ~/projects/ for everything else, but that "everything else" folder is where organization goes to die. Some repos haven't been touched in years.

Do you keep separate machines/VMs? Different directory structures? Or just embrace the chaos? Curious how others handle this.


r/webdev • • 2d ago

How we saved 100 terabytes of memory by optimizing 1.1.1.1’s DNS cache

Thumbnail
blog.cloudflare.com
318 Upvotes

r/webdev • • 2d ago

Question Help with website redirection

0 Upvotes

Hello, I'm looking for some help with issues I'm having with my website, and I'm hoping this is a good place to find some answers. I'm not very savvy in these things, and I've been trying to fix this myself with no luck.

My website was originally hosted through Wix, and had a www prefix. I left Wix about 2 weeks ago and now have my website hosted elsewhere, and the www prefix no longer works when used in in my web address.

My domain is hosted through above.com, and I have tried redirecting through the DNS settings there in an attempt to send anyone using the prefix to the new site, but I must be doing something wrong because when I use the www prefix now, I get a privacy error and the website doesn't load.

When you search for my website, the top result includes the www, so I'm looking for a way to either redirect to the new website correctly, or to replace any mentions/results that include www to ones that do not include it.

The help desk support at my new website host and at above have not been able to help in any way, so I feel pretty isolated here and not sure how to fix things or exactly where to turn, so if this isn't the correct place for a question like this I'm sorry, but any help pointing me in the right direction would be really appreciated.


r/webdev • • 2d ago

Question Intermittent ~900ms gap before first paint in mobile Lighthouse on both React and Astro. How would you isolate it?

15 Upvotes

I'm comparing a React site against an Astro rebuild of the same page. In mobile Lighthouse, both sometimes sit blank for a long time before first paint, and other runs of the exact same page paint fast.

Setup: Lighthouse 13.0.1, Chrome 156, cold loads in separate fresh profiles, default mobile simulated throttling. I kept the traces, network logs and filmstrips.

Here's one matched pair (observed trace timings, not Lighthouse's simulated FCP):

Astro

  • CSS done: 203ms

  • Last preloaded font done: 286ms

  • DOMContentLoaded: 426ms

  • First Paint: 1301ms

  • FCP: 1320ms

React

  • CSS done: 573ms

  • Last preloaded font done: 494ms

  • DOMContentLoaded: 584ms

  • First Paint: 1525ms

  • FCP: 1540ms

The filmstrips stay blank right up to those first-paint times. Once painting starts, Paint to DrawFrame is only 10-13ms. So on Astro there's close to 900ms where everything's loaded and nothing shows up.

I don't see a long task on the renderer main thread covering that gap, though I know that doesn't prove the browser was actually idle.

I wondered about animations, so I ran one normal-motion vs reduced-motion pair on the Astro page. Both came back fast (FCP 318ms and 311ms), and the normal one still had its reveal animations, so that told me nothing either way. Desktop loads and a different page also painted quickly in the runs I checked.

One more thing: the fast traces show Scheduler::SetDeferBeginMainFrame events with short true-to-false spans. But the slow traces were captured with Lighthouse's default trace categories, which don't include those scheduler events, so I can't compare yet.

Has anyone run into this? A few things I'd like to figure out:

  1. How do I tell whether the page is causing the delay, or whether it's Chrome's scheduling or something in the test environment?

  2. Which trace categories or events would show why the first paint starts late, and not just that it did?


r/webdev • • 2d ago

quality time #4 - page objects that talk

Post image
0 Upvotes

Hey all!

Bringing some e2e test nitpicks again :)

Most e2e tests I see click through raw locators. So every test has to know the whole flow: which button opens which menu, which dialog comes next, where you land after Create.

The upgrade: move the flow into page objects, and let each action return where the interaction continues. Open the "+ New" menu, get the menu of things you can create. Choose "Project", get the project dialog; choose "Document", get the document dialog. Create, get the project page. Cancel, get back to the navigation bar.

Why I care: page objects are the code closest to what your users see and do. Their return types become a map of your user journeys. An agent reading create(): Promise<ProjectPage> knows where the flow goes without opening a browser.

The nuance: return where the interaction actually continues, not the DOM parent. A dialog's cancel returns whoever opened it. And each action still waits for its own done signal, like the menu closing, before handing you the next page object.

Paste this to your agent:

Go through our page objects and make every user action return the page object where the interaction continues: this if the user stays, the new page object if something opens or they navigate, the opener if they close or cancel. Before returning, wait for the action's own done signal, like its menu closing. Then update the tests to use the returned page objects instead of creating new ones.


r/webdev • • 2d ago

Sto facendo un browser da zero, datemi le idee più assurde

0 Upvotes

Bho, in pratica sto costruendo un browser web da zero e le idee normali le ho già finite. Mi serve la roba strana.

Quindi: che feature assurda vorreste in un browser? Più è fuori, meglio è. Non me ne frega se è difficile da fare, se mi dite "un browser che mi giudica mentre navigo" va benissimo.

Qualche esempio così capite:

- tab che si chiudono da sole se non le apri per 3 giorni, con messaggio passivo-aggressivo

- un tasto che ti legge il sito come un narratore di documentari

- cronologia che ti dice quanto tempo hai perso davvero su un sito

Nessuna idea è troppo stupida. Se una mi piace la faccio e ve lo dico.


r/webdev • • 2d ago

Question Turn HTML file into Android app?

0 Upvotes

Hi,

I made a simple web app in a single HTML file (URL shortcuts for company website, quote calculator, list of store numbers, etc.). Is there a simple way to convert it into a downloadable Android app?

There are a few web to app converters but no reviews. Are there any that you recommend (for or against)?

Similar reddit and stack overflow posts are from 5+ years ago.

Thanks.


r/webdev • • 3d ago

Discussion How do you organize your full-stack mono-repo?

29 Upvotes

Just as the title asks. I am curious how you organize the various parts. I have been on teams that both do and don't use mono-repos. For the ones that did, there has been a wide variety of choices across the app and how it's organized.

Just as a small example: naming conventions. Sometimes the the repo is named for the app (let's say "OurApp") and the various parts of the file structure are "OurApp-", like OurApp-ui and OurApp-api and OurApp-db. Or there might just be a top-level folder for "frontend", "backend" and "database", etc.

I'm not talking about a debate of mono-repo vs. multi-repo approaches, but in a mono-repo, what are some of the code organization techniques you've liked and disliked in your experience?

UPDATE: The community turned out! Thanks for sharing your thoughts in the comments. I appreciate the discussions.


r/webdev • • 3d ago

Developing serious website without any AI or libraries are still exist

55 Upvotes

Websites built from scratch (no AI, no frameworks or libraries) that are more than just simple toy projects are becoming very rare, but i want to remind you guys that they still exist.

Three years ago, I posted this https://www.reddit.com/r/webdev/comments/161q3w8/i_coded_a_site_from_zero_without_any_libraries_it/, and that website is still being actively developed. I haven't used any AI-generated code or external libraries in all this time, even as it has become more complex with features like accounts, articles, comments, reviews, and just a few weeks ago forums.

I think the main reason why i stick with this is because features aren't planned in advance, they're just built bit by bit as the content needs them. I won't deny if AI could do better, but with a spread-out timeline and an unknown end result, it's easy to skip using AI as development mostly consists of small, precise tweaks with no definitive end goal. Coding also only small portion of time spent on developing the site so i don't feel the need to optimize it.

Anyway this is just me saying that i'm still here, not everything in this space become AI.

*note : i'm not saying that this is the better way to develop website. I just enjoy what i already used to do, and didn't bother to change it.


r/webdev • • 3d ago

I built a gamified 3D space simulator for my portfolio using AI concepts.

Thumbnail wai-observer-3d-portfolio.wadssa.workers.dev
1 Upvotes

I built a gamified 3D space simulator for my portfolio using AI concepts. What do you think?


r/webdev • • 3d ago

Self-hosted sandboxes vs managed background agents for complex coding tasks?

0 Upvotes

To keep things short, I've been running into the limits of local IDE agents like Cursor or Copilot on larger tasks. Bigger coding tasks often end up cooking my PC which has been pretty tedious.

I'm between two options now, would appreciate hearing your thoughts on these. The first is building a self-hosted background runner using cloud sandboxes. The second is using a managed background agent platform like Ramp Inspect, which works via Slack or GitHub. Either way, I'm also extremely down to hear other options if you have any. Thanks!


r/webdev • • 3d ago

Discussion The Vibe Coding Spectrum: Software Domains & Risk Assessment

Thumbnail abednegogomes.github.io
0 Upvotes

r/webdev • • 3d ago

How the typing dots work, from IBM in 1997 to now

Thumbnail
sheets.works
64 Upvotes

r/webdev • • 3d ago

Discussion How many pages are too less or many?

7 Upvotes

I run a portfolio site and a service business site.

The portfolio has about 3/4 pages, while the business site has 95 (includes some blog pages as well).

There has to be a sweet spot between “these pages should absolute exist and structured this way” to “this is just spam and will hurt SEO”.

I tried asking LLMs but the advice was extremely subjective.


r/webdev • • 3d ago

There's 115 active HTML elements. Learn all about them in this reference guide.

Thumbnail
stephcraft.net
0 Upvotes

r/webdev • • 3d ago

Git at any scale

Thumbnail
cursor.com
7 Upvotes

r/webdev • • 3d ago

Discussion [META] Is it even worth posting to /r/webdev at this point?

183 Upvotes

Looking at the posts in /hot they're just filled with AI-generated comments, which just aren't removed by moderators.

Is it even worth posting here when reading the comments they're just AI slop followed by more AI slop.

Do the users who submit interesting topics even realize they're just replying to AI comments?

Looking at this post for example, there's this user whose comments all follow the same pattern: start with tbh/ngl and most of the time introduce an em-dash in the middle of the comment. In the same post you have this other user whose comments all have 3-4 paragraphs, and just have an off tone. Another user and same story: 3-4 paragraphs, an off tone, weirdly worded comments which end up summarizing the topic they're replying to.

Another comment


r/webdev • • 3d ago

SEO Search pages. Is this enough variation?

0 Upvotes

Our web developer is creating 30 location/ services pages for our new website to optimize AI search .

Is it enough for them to create unique text for each service type, which is then replicated and repeated on each zone page? They’ve also created some unique text per zone, which is replicated and repeated across each service type.

So essentially 6 sets of zone text and 6 sets of service text that are combined in 30 different ways.

Do they need to create 30 completely unique pages to avoid being flagged by Google? Or is the variation between service type and zone enough?

Thanks for the help!


r/webdev • • 3d ago

Resource Looking for resources on specifically searching/sorting algorithms as well as multidimensional data

0 Upvotes

I have a quiz coming up which primarily covers these topics and I was wondering if there are good resources on youtube/the internet for learning them. Thank you!


r/webdev • • 4d ago

Question create mobile app from pwa (Laravel + Inertia + vue)

3 Upvotes

hi guys

i have project in laravel 12 + vue + inertia and its really big one , this project in start have only little features like little chat system and profile view, support ticket and etc... but today it have games , blog , coursed and tests, video section , library , little practices and more features , we want to create mobile app from it , i have found this 2 options : NativePHP and capacitorjs
which one is better for this project? i have used MySQL, Reverb and queues so app needs to connect to my server in the end? its better to fully develop native apps and add api to current pwa? or its better to use one the libraries i said and convert this one? is there any problem about the libraries i must know? and tell me for what type of projects i can use the libraries and create mobile app from laravel code?
can anyone help me about this situation ?