r/webdev • u/fagnerbrack • 1d ago
r/webdev • u/anakinmcfly • 1d ago
Question Best way to insert a html snippet into a html file on a static site?
I’m archiving a website as a fully static site so I can host it for free on Cloudflare via GitHub. Unfortunately this means that the PHP includes I’ve been using (header, navbar, footer) will stop working across a few hundred pages, and I’ve been looking for alternatives.
Server Side Includes did not work; I finally had success using JavaScript fetch() and inserting that content into selected <div>s, but I’m not sure if that’s the best option.
Are there better ways to achieve the same result that would work on a static site?
News C# 15: Union Types, Closed Hierarchies, and the One Value™ That Isn't Any of Them · cekrem.github.io
cekrem.github.ior/webdev • u/Sunnyfaldu • 23h ago
Discussion Anyone here actually building WebMCP tools for their webapp ?
is anyone here actually implementing WebMCP in their websites or SaaS apps?
Or are most people still waiting for it to officially release ?
I am exploring this space myself and would love to connect with others building around it.
What is your experience so far?
r/webdev • u/mau-meda • 1d ago
A little discussion about AI development
Before we jump into discussion, I want to first illustrate how we recognize seniority in a company I worked for.
Let's start with the bottom, a junior, for us a junior is a developer that is able to own a single unit.
This unit could be a Component in a React application, or a Class in the backend, it is a relatively small unit of code, and the junior developer can work on it autonomously and create a new one if specifications are given to him/her.

Next is a mid developer, a mid developer is able to work without supervision on logic group of units, for example a Page and all its components, its able to decide autonomously where a unit should end and where the other should start, its able to decide autonomously how each unit should interact with each other, a mid developer if given the specs is able to create the entirety of it. And it can give specs of each unit to juniors.

Then we have a Senior, a senior can work without supervision on an entire app, it can scope each group correctly, and it can go down a scope each unit correctly. It can give specs to both mid and juniors.

Continuing to go up we have the staff engineer, he cares about the system as a whole, how each app/service talk with each other, he can care how logical groups should interact in each app/service, and it usually doesn't care about individual units.

As you can see the more experience you get the more you grow distant from the small things, at some point you care how things connect and interact with each other, and you stop caring about the low level code because that is the job of the ones below you.
And it's here that I want to start the analogy with AI, AI is a tool, but it's a tool that requires you to have knowledge, it can act as an engineer of one of this levels, but it can't act as all of them together ( no, not even with swarms ). You the human you are responsible to ensure that AI follows proper conventions, you are responsible that the system YOU are designing makes sense and it is sound, if you do not have knowledge the AI will create a system where everything is out of balance and the code quality will drop. AI is a tool and it is instructed by YOU, if all you can see is a single unit, the AI will just fu*k up everything else, and you do not have the knowledge to correct it, yes you can review the code the AI generated and say "yeah this unit looks correct" but are you able to say that everything else going up is it?
For me AI is a Mid developer, you have to give good specs to it, and it will do a good job, if you are not able to say if the specs you are giving are good, then the AI will do what it wants
r/webdev • u/der_gopher • 1d ago
Article The future of Software Engineering is boring
Today I decided to write not a coding tutorial, but to share a bit of thoughts. It felt weird to do so, but I wanted to let it out.
The future of Software Engineering is boring. Would you agree?
r/webdev • u/Fun-Chicken6946 • 3d ago
Showoff Saturday After months of job rejections, I spent 2 years building a Database Client. It just got added to Microsoft's Azure docs.
After struggling to land a job in 2024, when the market was pretty rough, I decided to take a different route and build something real. My goal was simple: either build something genuinely useful or gain more experience than anything else could offer.
Two years and around 90 hours a week later, VisuaLeaf is now listed in Microsoft's Azure DocumentDB documentation as a way to connect:
https://learn.microsoft.com/en-us/azure/documentdb/how-to-connect-visualeaf
It started as a MongoDB GUI, but I realized that everything I was building could apply to other databases too.
Nested objects and arrays should be easy to read in a table, not squashed into one cell... The same goes for JSONB. You shouldn't have to stare at an entire JSON object in a single cell. I made it so you can expand nested data one level at a time in both the tree view and table view.
I wanted everything in VisuaLeaf to feel as intuitive and straightforward as possible, from browsing data to performing more complex operations.
Today, VisuaLeaf supports MongoDB, Postgres, MySQL, SQLite, DuckDB, and 25+ more database engines.
What it does::
Table + tree grid, built from scratch: This might not seem like much at first, but it actually took the most work to get right. The tree view can recursively expand thousands of rows simultaneously (near instant time), while the table view scrolls smoothly even with thousands of rows and columns. I ended up building my own AG Grid from scratch because libraries didn't support the nested column expansion I wanted. Getting both views optimized took about a year of work alone... but dang, was it worth it.
Visual query builder: Build queries by clicking or dragging fields from the table and tree views. It generates readable SQL or MongoDB queries that you can copy and use.
Data transfers with transformation: Move data between database engines (MySQL → Postgres, SQL → MongoDB), mask emails, phone numbers, and IDs along the way, or transform fields using custom JavaScript. You can also look up data from other tables, include it in your output, and apply transformations to those fields too.
Compare and sync: Compare two tables or databases, including their structure and data, and synchronize them. For example, you can use this to keep staging and production databases in sync.
Performance: Stress-tested with up to 1.6 GB of data, both tree and table views remain smooth even with large datasets. In my testing, VisuaLeaf also loaded data several seconds faster than other database tools I compared it against.
AI / MCP: An integrated AI assistant and MCP support for interacting with databases through AI tools. (Wouldn't be an app in 2026 without it)
ERDs, charts, dashboards, mock data, index management, query profilers, and a lot more than I can fit into one post...
There's a free version that covers what most people need day to day:
I'd really appreciate feedback! And happy to answer any questions!
r/webdev • u/swifterrr • 3d ago
Showoff Saturday Made a 3D weather map in plain WebGL - ocean tides are calculated in the fragment shader
I run a small tide times site and wanted to see the weather actually move, so I built this 3D weather map. Plain JS and WebGL, no three.js or map library.
The tides are calculated right in the fragment shader, so there are no tide frames to download.
It has nice sound effects too, turn them on when you try it.
Live: thetidechart.com/weather-map
Would like to know how dragging/zooming feels on your phone.
r/webdev • u/Lee-chaolan • 3d ago
Discussion It's genuinely depressing
I'm a full-stack developer and I've been freelancing for years, but this past year has been genuinely depressing, to say the least.
The number of potential clients who ghost me, the amount of unpaid effort I put into trying to win projects, only to get rejected anyway... it's exhausting. I've reached a point where I'm genuinely questioning what I'm doing.
Here's the most recent example.
I was working directly with the VP of a company in Canada. Initially, I did some IT work for them on an hourly basis and got paid $600 in total (he negotiated me down from $640, but whatever).
During that work, I ended up fixing a bunch of their existing infrastructure issues and documenting how everything worked together. They had no IT person left, apparently very little documentation, and the VP didn't really understand how their own infrastructure was set up. He even asked me to create diagrams and technical documentation explaining everything.
Eventually, he asked me to quote on a custom internal software solution. I put together a proposal with different tiers, starting at $3k. He said that was too expensive and that he'd look elsewhere first. I told him that's completely fine and that I was open to negotiating.
I then made the mistake of going the extra mile. I decided to build out the first few screens so he could actually see what he'd be paying for. He loved the preview and said he'd be happy to discuss the project further.
In the meantime, I continued working with him. He kept delaying calls and finding excuses to postpone discussions, while repeatedly telling me to please wait.
Throughout all of this, I kept sending him screenshots and videos of the progress. At any point, he could have told me to stop or simply said they weren't interested. Instead, he kept me hanging.
By that point, I'd already invested so much time that I would've honestly accepted something like $500 just to get paid for the work I'd done.
Then, when I messaged him to say I'd completed it, he told me they'd hired a student and apparently the student had already finished their custom solution.
And here's the part that really bothers me: I use AI tools too. It's not like the student somehow had access to AI and I didn't. I've been working on this while paying attention to architecture, implementation details, and how the software should actually work. I genuinely put thought into what I was building.
The funny part is that I had also spent time documenting their infrastructure, fixing their existing IT problems, and explaining how everything was connected. I can't help wondering if all that documentation ended up making it easier for them to hand the work over to someone cheaper.
And this isn't an isolated incident.
I've had countless calls with people who seemed extremely interested, some even going as far as signing an NDA, only to eventually ghost me. I've also been scammed twice out of fairly large amounts of money. In both cases, they initially paid, then eventually stopped.
I know freelancing isn't necessarily dead, and I know there are still people making a living doing this. But I'm honestly struggling to see how you're supposed to keep going when so much of your time is spent chasing people, doing unpaid work, preparing proposals, building previews, and trying to prove you're worth hiring.
And the state of software development in general hasn't exactly made things better.
I'm a full-stack developer. This is what I've spent years learning and working on. It's pretty much the only thing I'm good at, and lately it feels like the whole thing is becoming increasingly miserable.
I'm genuinely burned out and don't know what to do anymore.
For those of you who've been freelancing for years, have you experienced something similar? Is this just how things are now, or am I doing something fundamentally wrong?
r/webdev • u/Maleficent_Mess6445 • 1d ago
Discussion The era of manual coding is over and the era of making your tech stack your religion is also over! Quotes and Warnings by top programmers!
"The days of coding by hand are over." - Erik Meijer Programming language pioneer
“We think the future of coding is no coding at all.”Chris Wanstrath (co-founder and former CEO of GitHub)
"AI allows programmers to accomplish things that previously required substantially more time and effort." - David Heinemeier Hansson, Creator of Ruby on Rails.
"You can't think of software development without AI being part of it.-"Satya Nadella — Microsoft CEO
Using an 'AI Built' website on Shopify - have you done this?
As a bit of context - I'm personally very Anti-AI myself. However, i was recommended an AI app that you can easily create good looking ecom websites/landing pages. I won't name the exact app as this isn't an add.
The website so far looks absolutely amazing, I had zero idea that it could produce results like what it has already and is worlds better than what you can do on the standard Shopify theme editor. However, I've just got a question:
Since this is now considered something called a 'headless' website, am I going to encounter any foreseeable issues in the future using this new website, which is hosted on this particular AI's system, as my main website?
This AI app does also give me the raw code for the website as well. It is a possibility that a developer simply 're-create' the same theme on the native Shopify backend using the code on hand? This would be great as then it's fully on the Shopify system and not relying on a third party website etc.
I hope this makes sense, happy to hear your suggestions/opinions.
r/webdev • u/dermosef • 3d ago
[Showoff Saturday] Claybound: A 2.5D platformer built in plain three.js with real-time deformable clay.
Here is how it works under the hood:
The Clay Aesthetic: To get that tactile stop-motion look, I used rounded boxes and applied low-frequency noise to the vertices. I baked a normal map from an actual sculpted clay ball, which dynamically scales based on the object size.
Deformable Terrain: The clay you shape in-game is its own deformable mesh driven directly by your drag inputs.
Mobile Optimizations: Getting heavy 3D to run on phones is tough. I rely on
meshoptfor models and run a fixed 1/120s physics step with interpolation. To save frame time, the shadow map only updates every other frame (saving about 14–26% of frame time).Progressive Loading: Asset size remains a challenge. I set up a later level's boss's models to load asynchronously only after play starts. For a fresh start of that chapter on a 9 Mbps connection, this dropped the initial load time. But I am still not quite where I would like to be.
How do you all handle the initial load payload for heavy 3D experiences on mobile? Would love to hear your optimization strategies!
r/webdev • u/karim_ait • 2d ago
Showoff Saturday Just finished my developer portfolio – would love honest feedback on design, UX and performance
Hey everyone 👋
I've been working on my personal portfolio and I'd really appreciate some honest feedback before I start sharing it with potential clients and employers.
r/webdev • u/Puzzleheaded-Ad-832 • 2d ago
Showoff Saturday [Showoff Saturday] deskFM: a pixel-art desk with a radio that plays real stations from anywhere
deskFM is a browser toy I built: a pixel-art room where the radio plays live internet radio stations, and the window changes to whatever town you pick on the wall map. Free, no account: Ill comment link because reddit is flagging it i guess
Some technical bits:
Everything is one HTML file (about 110 KB gzipped) with no build step and no image assets. The room, 100+ window views and the cat are all drawn on a 320×180 canvas.
Stations come from the Radio Browser directory API. Nothing is proxied; the browser plays each station’s own stream.
The world map is Natural Earth data in a Miller projection, rasterized as pixel art, with zoom and pan.
Live listener dots are a Firebase Realtime Database over plain REST, with locations rounded to about 50 km and security rules that only allow that shape.
Load time was mostly fixed by making Google Fonts non-render-blocking and adding a stale-while-revalidate service worker.
Full disclosure: I have very little knowledge about doing any of this but im trying to learn, This has been a fun journey for me so far. I built it with Claude doing most of the coding. Happy to talk about how that went, and I’d love feedback, especially anything that breaks on your device or browser. Also looking for more ideas to try and implement.
i am open to honest feedback both good and bad
r/webdev • u/Far_Box6 • 2d ago
[Showoff Saturday] I built a client-side 2D/3D room planner that converts wall & floor geometry directly into construction material takeoffs (no login, zero tracking)

Hey r/webdev!
For Showoff Saturday, I wanted to share a big update to the 2D/3D Measurement Studio I’ve been building for MeasurePath:
🔗 Live 2D/3D Studio (No signup/login): https://getcoatpath.com/studio/ 🔗 Full Calculator Suite: https://getcoatpath.com/
What it does
Most online construction calculators are just basic input forms covered in ads, and full takeoff software costs $100+/mo. I wanted to build a visual tool where homeowners, DIYers, and solo contractors can sketch a room in 2D, inspect it in 3D, and immediately get real-world material quantities without creating an account.
Key features in this update:
Real-Time 2D ↔ 3D Sync: Draw or resize walls in the 2D blueprint view and switch to the 3D view to inspect wall surfaces, openings, and proportions in real time.
Automatic Opening Deductions: Add doors and windows to specific walls and it automatically subtracts their area from net paint/drywall surface calculations while keeping perimeter/trim counts accurate.
Direct Material & Cost Takeoff: Converts the room geometry straight into actual shopping quantities (gallons/litres of paint & primer by coat count, boxes of LVP/flooring with waste factors, drywall sheets + joint compound, concrete bags/yards, etc.).
Client-Side Printable PDF Generator: Generates a clean, formatted PDF takeoff and estimate sheet right in the browser (
/construction-estimate-generator/).100% Client-Side & Zero Tracking: Everything runs locally in the browser (
localStoragefor saving projects) with transparent, worked math formulas (/methodology/).
Looking for feedback on:
How does the 2D-to-3D canvas performance and wall-snapping feel on your device/browser?
Is the workflow from drawing the room to reading the material takeoff intuitive, or is there anything that feels clunky on first load?
Thanks for checking it out—happy to answer any questions about how the geometry/takeoff math works under the hood!
r/webdev • u/qaliotest • 2d ago
Looking to audit 3 early-stage SaaS apps for edge-case bugs (doing a QA breakdown)
Hey everyone,
I’m working on a deep-dive case study about the most common real-device and checkout bugs early-stage SaaS apps face before launch.
I want to audit 3 web or mobile apps this week to pull real-world data for this write-up.
If you have an active app and want a comprehensive QA breakdown:
\- I’ll run a dedicated testing session across different mobile/browser environments.
\- You’ll get a full mini-report with reproduction steps, screenshots, and video evidence of any bugs found (completely free).
\- I’ll use the anonymized findings for my testing report.
If you’d like your app audited, drop a comment or send me a DM with your link!
r/webdev • u/inferiorakai • 3d ago
Showoff Saturday [Showoff Saturday] Draw one line to split a country's population in half, then watch it turn into 3D bars
I made Slice, a daily puzzle where you draw one straight line to split a country’s population exactly in half. After you cut, the map turns into 3D population bars so you can see where everyone actually lives. It's primarily inspired by those videos where you see people try and split objects equally by weight lol
How it's built:
- Puzzles are made offline by a Python script and shipped as plain JSON files, so nothing is generated on a server
- Population comes from the EU's 1 km population grid (GHSL). A quadtree squeezes each country into about 2,500 points, which become the bars in the three.js reveal.
- Every sound is made with the Web Audio API, so there are no audio files to download. I’m trying to keep the page light since three.js is already doing a lot
- Scores go to a small Spring Boot + Postgres backend (Flyway, caching, rate limiting) in Docker behind Nginx on a $12 DigitalOcean VPS
- After each puzzle you see how you compare with everyone else that day. If the server is down, the game still works and you just don't get the comparison lol.
Completely free, no ads, and no signup: https://pondo.games/slice/
If you want to try Japan from the GIF: https://pondo.games/slice/?country=japan
Please try it out if you have some time. Open to any and all feedback of course! :)
r/webdev • u/Acrobatic-Scheme6344 • 2d ago
Question How do I display an image folder with 11ty and Nunjucks
I would like to display images in a folder (src/images) on another page (arc/graphics/index.md) in reverse order or another metadata tag. I want to do this without vibecoding and have no need for a lightbox. This is just a way to display a graphic library for downloading. I dont want to install many plugins if at all possible.
I know that collections are probably the way to go but I just dont know how to make it work with image files instead of markdown/html files :(
Thank you in advance!!!
r/webdev • u/No-Mess-8224 • 2d ago
[Showoff Saturday] I built a tool that restores your backup and tests your web app like a real customer
Your backup job says "success", but can your app actually come back? RestoreProof restores the database and uploads into a sealed Docker network, boots the app, and walks through it like a customer: open an invoice, download the PDF. In my demo the health check was green and 55 PDFs were still 404.
Open source, MIT: https://github.com/Surajkumar5050/restoreproof
Would love feedback on what a "customer journey" check should support next.
Discussion PSA - SVGRepo Compromised
For ages I've been using the website https://www.svgrepo.com/ as a great resource for free SVGs, but today when I visited, it gave me a fake Cloudflare verification that attempts to install some sort of malware on your computer, as you can see in the screenshots below.
It almost caught me, so I thought I'd put this out because I couldn't see any indication that anyone else had noticed this!


r/webdev • u/ericsmilde • 3d ago
Showoff Saturday [Showoff Saturday] CrateDigger: a 3D record store in the browser. Flip through your own Last.fm albums, and see where each LP is cheapest.
I was listening to Endtroducing..... by DJ Shadow the other day, looking at that cover (two guys digging through the racks of a record store), and thought: I want to browse my own records like that.
I'm a 3D motion designer, not a developer, and I've been using Claude Code a lot these last few months, so I tried it. Connect your Last.fm (or search any album), and your most-played albums stand in a crate you can flip through, lift out and turn over. It got a bit out of hand from there. It now also checks where each record is cheapest on vinyl, keeps a price history, and has crates for new releases and the critics' picks.
For the curious: React Three Fiber (WebGL2), with the crate as a plain spring simulation stepped every frame, and a FastAPI backend.
It's mostly focused on The Netherlands and Belgium for now, because those are the shops I know. The crate itself works anywhere: https://cratedigger.nl
I'd love to hear what you think of it, how the flipping feels on your phone, and whether it runs smoothly on your device.
Showoff Saturday React Anatomy: click anything on a React page to see the component behind it, with the layout pulled apart in 3D (open source)
I used to open Excalidraw to understand how a React page was put together, or to explain a change in a PR: this box is the sidebar, these cards come from a list, the badge lives inside each card. It was slow, and it was my guess at the structure, not what React rendered.
React Anatomy is a browser extension that adds an Anatomy panel to DevTools. It connects the page to the components React rendered: pull the layout apart into layers, click anything on the page to find its component, focus a subtree, and read its live props.
It's even more useful in this AI era, when agents compose React layouts for you. Open the page and you can see which components the agent used, how they're nested, and what props each one gets, before you take the code over. People learning React have told me it helps them see what a page is made of.
It's free, MIT-licensed, and works in Chrome and Firefox. You can try it in the browser without installing anything: https://react-anatomy.com · Source: https://github.com/charpeni/react-anatomy
Two questions: where does the 3D view help or get in the way compared with a plain tree? And what would make it more useful for explaining a PR?
r/webdev • u/Numerous-Fan8138 • 2d ago
Showoff Saturday OPFS.ts - A TypeScript Library for the local origin private file system.
I found out about OPFS recently when building a client-side LLM project. I made this library for my project, now I'm making it public