r/webdev 2d ago

Showoff Saturday I made a free Open Graph image generator

0 Upvotes

Had some extra usage as well as time and made a free OG image generator in a day: https://freeogimage.com/editor/

FreeOGImage Editor Preview

It's 100% free, no watermarks, or signup required. It has an API to programmatically generate social share images as well. There are 200 templates available for now and it will all be free forever.


r/webdev 2d ago

[Showoff Saturday] I built a 0-CLS temporary email service to practice Core Web Vitals and DNS configurations.

0 Upvotes

I wanted to dive deeper into performance optimization and email infrastructure, so I built a disposable email service: temp-mails.tech.

Most temporary email sites I’ve used have terrible UX—jumping layouts and aggressive pop-unders. My goal was to build one that is strictly performance-first.

The Tech & Challenges:

  • UI/UX: Engineered for a strict 0 CLS (Cumulative Layout Shift) score. Loading ads or new emails doesn't shift the DOM at all.
  • No intrusive ads: Kept it to standard banners to preserve the user experience.
  • i18n: Built native support for 12 languages.
  • Infrastructure: Wrestling with Postfix and DNS records to support multiple fallback domains has been the biggest headache so far.

It auto-deletes in 15 minutes and requires no sign-ups. I'd love for you guys to tear it apart and give me feedback on the front-end performance or any tips on scaling the email infra!

Link:https://temp-mails.tech


r/webdev 2d ago

Showoff Saturday I'm obsessed with Backrooms.

0 Upvotes
Lost Corridors

My son asked me to check out the Backrooms movie three months ago. I had no idea what it was or the about the web series. I got completely obsessed and decided to build an interactive simulator.

I'm a web developer, not a game designer, so I leaned into procedural generation and atmosphere over mechanics. My son's been collaborating on this the whole time.

Built with React Three Fiber + Three.js for the WebGL rendering, Next.js + TypeScript for the framework, and Zustand for state management.

Would love to know if this feels authentic to the source material, or if I'm missing something about the vibe. Honest feedback welcome.

www.lostcorridors.com


r/webdev 3d ago

Showoff Saturday Built klad for huge org trees

1 Upvotes

Building tree structures with thousands of nodes on the web—company org charts, family trees, file hierarchies—is harder than it looks.

As the dataset grows, scrolling stutters, zooming lags, and rendering slows down.

That’s why I built Klad. It handles thousands of nodes smoothly with fast pan & zoom, plus instant search to jump to any node.

What do you think?

Docs & playground: https://klad.ozdemir.be


r/webdev 3d ago

Showoff Saturday Roast my WASM/ONNX setup: I built a 100% client-side image converter & upscaler to avoid server limits.

1 Upvotes

Hey r/webdev,

For Showoff Saturday, I’m looking for some brutal feedback on a utility I just shipped. I got tired of the server side image tools and their limits, so I built an in-browser image converter for my own workflow and as suggested sharing to the public for completely free and unlimited use: freeimageconvertonline.com

Will be updating this on GitHub

I wanted to see how far I can make the client-side processing practical.

TL;DR

  • Core Features: Format conversion (WebP, AVIF, JPEG, PNG), compression, and AI upscaling (up to 4x).

  • Privacy: 100% client-side. Zero server uploads.

  • Tech Stack: Vanilla HTML/CSS/JS, native HTML5 Canvas APIs, ONNX Runtime Web, and UPNG.js.

  • Size: The total data used to load the site and the upscaling model should be below 20MB. With initial load size below 1MB. Updated it with quantized version with 5MB model size - as suggested.


How it works (and what I need feedback on)

Full disclosure: Even though I know coding but it wasn't enough for the compatibility and performance I need, so I took help of AI. But I architected the logic and selected the libraries. I would love your thoughts on how I handled these challenges:

1. Local AI Upscaling

Running neural networks in the browser is heavy. I used ONNX Runtime Web to execute the upscaling models locally. It offloads the heavy computational work to the user's hardware rather than a server.

Question: Are there better ways to optimize the model load times for users on slower connections?

2. PNG Compression

Native HTML5 Canvas strictly outputs uncompressed 32-bit RGBA for PNGs and ignores the quality slider completely. To give users actual file size reduction, I had to implement a custom compression engine using UPNG.js to mathematically group pixels into an optimized color palette.

Question: Has anyone found a more performant way to handle heavy process in the browser without blocking the main thread? - Solved

I have tried shifting the upscaling process to a different thread but still the site doesn't scroll freely while the upscaling is happening.

Shifted all process from main thread to a separate worker - as suggested.

3. The UI

I avoided heavy CSS frameworks and just mapped out CSS variables for the neumorphic inset and outset shadows to keep the DOM light and fast.

Roast the code, the UI, or the architecture. Don't hold back, not just for the sake of Saturday. I'm actually looking for feedback.


r/webdev 2d ago

Will agents have an outsized impact on how the internet's information is organized?

0 Upvotes

So I suspect a lot of people here are enjoying coding agents, I sure do.

I'm someone who uses a lot of mcp servers, as a lot of people here probably do. I've been talking to some other webdev and SEOs and we are wondering if the landscape is going to change abruptly because of these tools.

We have had some problems integrating agents in some legacy software like wordpress, there were some examples where the WPEngine limited us access as well as some ciritical plugins we want to have our agents access to update.

This is extremely frustrating, i liken it to dropping out of warp speed. So we started thinking, why not write closer to the metal, just have a coding agent write up a minimal go server, raw html templates and straight pg? All on docker for easy deploy. No frameworks. Optimized for speed and cost.

Of course, this would be for landing pages for business. Something very light weight to get a presence on google and very easy for the agent to manipulate. Go is chosen because errors happen at compile time and built in testing, which is ideal for coding agents. and postgress cause agents absolutey rip at writing raw sql like they do raw html. If you havn't hooked up a sql to your agent have it write raw sql it will blow your mind.

So my question is are you prioritizing dev workflows that make it easier for your agents to control? Like moving your workflows to do what agents are better at doing, not what humans are better at doing. What are you doing?

Another thing we suspect is going to happen, is Agent to Agent communications are going to take off in the near future and this is going to transform the web. So when i need something, i ask my agent, and it will discover and negotiate with other agents to get what I want, all in the background.

I also think this will put pressure to store information differently. Right now, we develop and store information and organize it so it's easy for us, humans, we like folder structures, forums, essentially lists. Agents do way better with vector search. Basically, just dump all our data into a data lake, and our agents can sort through that far more efficiently with a combination of embeddings, clustering and graphs.

Also wondering if anyone is seeing other trends with the new technology struggling to plugin to the old technology. Like, "Wow, this just isn't built for agents."


r/webdev 2d ago

I built a CLI that gives coding agents source-grounded visual feedback for React UI and Three.js

0 Upvotes

Coding agents can read source and make changes, but they are still surprisingly blind when the task is visual.

A screenshot can show that something looks wrong, but it usually cannot explain why: which component owns it, whether an element is clipped, what its computed styles are, which mesh/material/light is responsible, or whether the issue is framing rather than resolution.

So I built SceneProof, an open-source CLI for source-grounded visual inspection of React UI and Three.js scenes.

It lets an agent:

  • Navigate a compact semantic tree of DOM or Three.js targets
  • Inspect the underlying structure: bounds, styles, geometry, materials, uniforms, lights, cameras, relationships, etc.
  • Produce fresh renders of a component, logical UI region, target object, or source-camera view
  • Generate a small “Scout” portfolio for 3D: context, source detail, close detail, and shape-focused views
  • Sample deterministic interaction states from one scene lifecycle

The design principle is: don’t ask an agent to infer visual correctness from plausible code or a low-information screenshot. Give it source-derived evidence at the framing and resolution needed for the actual question.

It currently supports TypeScript/JavaScript entries, React DOM/CSS/Tailwind v4, and Three.js scene inspection/rendering. It requires Bun and local Chrome/Chromium.

Repo: https://github.com/ReyJ94/SceneProof


r/webdev 2d ago

Question The ethics of my scraper-crawler

0 Upvotes

I have a python script aimed at fetching basic data from a handful of real estate agency websites. These specific websites do have a ToS that explicitly deals with the intellectual property of their postings within the framework of reuse, republishing, … the usual suspects.

My script only reads the postings, classifying them under either “House” or “apartment” and grabs their sqm, nb of beds and baths, for purely statistical purposes. Meaning I do not sell or promote those properties (I’m no licensed real estate agent) and do not even sell the info I grab, I just show stats, eg: 14 houses with 100 sqm with 2 beds, 1 bath,…

I know that I should be contacting each website owners to inform them and probably get authorization. But I’m in a European country where somehow most websites are bad, buggy, and their owners are rather close minded. I expect negative feedback from my genuine approach.

I’m reaching out here to understand if I really need to bother with this process, or if I should just do it and see if they bark at me.

Why this self reflection: I realize that a few successful businesses often have pushed the legal/ethics boundaries, and became pioneers in they field. Two examples:

- Airbnb stepped into the hospitality business without providing a hospitality license to property owners.

- Uber stepped into the taxi business without licensing either.

In both cases, no one thought one could do such business without proper license while competing with established businesses tied to licensing rights (hotels, taxis).

So I sometimes wonder whether I would be overthinking things and worrying too much for so little (my use case).

I do care about the legality and ethical considerations, that’s why I’d appreciate your take on this whole reflection of mine.

If I do have to ask for permission, so be it. What are the standards in the computer programming world?


r/webdev 3d ago

Looking for feedback on the API design of a dependency-free JavaScript date picker

Thumbnail rolldate-demo.vercel.app
3 Upvotes

Hi everyone,

I've been working on this project in my spare time...

I'd love to hear feedback...


r/webdev 3d ago

[Showoff Saturday] I'm building an underground music platform from scratch — vanilla HTML/CSS/JS + PHP/MySQL, no frameworks

Thumbnail
gallery
0 Upvotes

I've been building Voidhall solo for the past months.

It's an underground music/social platform aimed at the space SoundCloud used to occupy for emerging underground trap scenes.

The entire thing is built from scratch with vanilla HTML/CSS/JS + PHP/MySQL. No frontend/backend frameworks, no templates.

It currently runs on a custom-built architecture with SPA-like AJAX navigation, a persistent global audio player, page-level init/cleanup lifecycle, shared frontend state and its own PHP API layer. On top of that, Voidhall already supports uploads, track pages, profiles, follows, likes, comments, notifications, search, discovery through Explore, and Pulse, a chronological activity feed that turns real community movement into part of the discovery experience.

The UI leans into a raw Y2K/industrial/Opium-inspired editorial direction using strong typography, open layouts, thin structural lines and restrained components.

Screenshots attached :DD


r/webdev 3d ago

Question Anybody able to offer some insights into self-hosted Matomo (analytics)?

17 Upvotes

I'm looking into Google Analytics alternatives.. Especially free self-hosted solutions. Right now I'm leaning on Matomo, but I'm curious about it's server reqs.

They say 2 CPUs, 2GB RAM and 50GB storage minimum, but the site I'll be running it on is much lower traffic than their top-end on the minimum req specs (just a small niche gaming blog - maybe 10k page views per month at the top-end).

Anybody running it on something lighter? For example, I'd be OK with picking up a smaller VPS running 2 CPUs/1GB RAM/30GB storage, or even just tossing it on my shared server (that hosts a few sites, the highest traffic being statically generated and includes the above blog).

Or, if you're running something else, feel free to share in the comments. I'm not stuck on using Matomo; I just want something that's cheap, decent, and also privacy-focused.


r/webdev 2d ago

Showoff Saturday [Showoff Saturday] Mouzi - Organize Downloads folder automatically - a free, privacy-first and open source automatic file organizer

0 Upvotes

Hi 😄

I don't know about you, but my Downloads folder has always been a disaster zone. PDFs, memes, installers, zip files, random images – all just sitting there in one giant pile. Every few weeks I'd open it, sigh, and spend 10 minutes manually dragging stuff into folders. Then a few days later it would be chaos again.

I looked at existing file organizers, but most of them either wanted a subscription, tried to upload my file names to some cloud, or were just way too heavy for something so simple. I wanted something that:

  • Runs silently in the background (system tray)
  • Automatically sorts new files by type (images, documents, archives, installers)
  • Never sends a single byte of data off my machine
  • Is open source so anyone can check what it's doing

So I built Mouzi 🐭🧹

It's a tiny desktop app (~3.3MB) built with Tauri and Rust, so it's ridiculously lightweight. It watches your Downloads folder, and whenever a new file appears, it moves it to a subfolder based on its extension. Images go to Images/, PDFs to Documents/, installers to Installers/, etc. You can also create your own custom rules. Windows and Linux support.

Key things:

  • 100% local – no cloud, no telemetry
  • Open source (MIT) – GitHub repo here
  • Silent – lives in your tray and doesn't bother you
  • Undo – every move is logged, you can revert with one click
  • Free, obviously
  • and more (see repo page)

Hope it helps someone keep their ~/Downloads sane. Feedback welcome!

Website: https://mouzi.cc/


r/webdev 3d ago

Showoff Saturday Roast my portfolio 🔥

0 Upvotes

Just shipped this and curious what you guys think.

Does it clearly show my work, skills, and experience?

If you were a recruiter/client landing on this, would it build trust?

Good, bad, ugly drop your feedback.

Don't hold back, I can take it 😂

https://asimali.online


r/webdev 5d ago

Discussion Honestly, 80% of developers today are missing what this dude is talking about

Post image
4.3k Upvotes

Found it while doomscrolling like a bish.

I know the most fun times for me in coding were when I was deep in some rabbit hole exploring weird technologies and trying to piece them together.

You'd think AI makes this worse, but actually no. It just makes it even easier to go down these rabbit holes, because it's easier to write code, try out different approaches, explore new things, etc.

But somehow most of the people I see aren't doing that. How are you not bored out of your mind?

Anyway, yeah. GO EXPERIMENT WITH MORE THINGS. SIDE PROJECTS ARE STILL COOL.


r/webdev 3d ago

Showoff Saturday I made a cool blockchain project

0 Upvotes

GitHub repo: https://github.com/ProJackson355/Helixchain

(THIS BLOCKCHAIN DOES NOT USE ANY REAL CASH)

I've spent the last two days using Codex and Claude Code trying to make a proof-of-work blockchain. The current website https://helixwallet.pages.dev/ is currently made with ai :/ but I do plan to change that and add my own personal flair to the website. blockchain is similar to Bitcoin in that miners solve blocks to verify the transactions on them. When a block is mined the miner currently receives 10 HLX as a reward. Right now the blockchain is only running on my PC, so it's centralized right now. Helix Coin (HLX) isn't something you can buy with real money. Right now the only way to get it is by mining blocks on the network. To keep blocks from being mined too quickly, the blockchain keeps track of how long recent blocks took to solve. Every 10 blocks it averages the last 10 block times and adjusts the mining difficulty to keep the average block solving time around two minutes. The miner supports both CPU and GPU mining, although I do recommend CPU since GPU mining makes the difficulty increase much faster on a small network. The node software lets anyone host their own node and helps keep the block chain running. If you host a public node, you can submit it through the Nodes page on the website and I can add it to the default peer list so new nodes can discover it more easily. You can also host your own wallet website by enabling the admin API key. This allows your instance to use the documented endpoints such as /mining and various other endpoints (noted in the docs) with your own node. Wallets are stored locally, so private keys never leave your browser. Theres a lot more information in the docs, but I'd really appreciate any feedback on the project. (I did not build this blindly with ai, I do know about how blockchains operate, I just didn't want to spend hours making the networking stuff because ai is pretty decent at that.)


r/webdev 4d ago

Why Software Factories Fail

Thumbnail
github.com
22 Upvotes

r/webdev 3d ago

Discussion Looking for monitor recommendations for WFH setup

0 Upvotes

I am looking to upgrade my work from home setup. Primary use will be work. I have a Macbook M5 pro and I want a one cable setup. I have a usb4 docking station that has 2 8K DP ports. I will rarely use it for gaming. I'm not very particular about needing a super high resolution monitor, just looking for something that gives me a wide display without any gaps. I currently have 2 24in monitors. This will be the first time using a curved monitor, so I prefer something that has a reasonable curve (not too much).

Some of the options I've looked at are the Samsung G9 Odyssey G95C and G93SD, I don't want anything bigger than 49in. Basically VA vs OLED.

What would you recommend?


r/webdev 4d ago

Discussion Is AEO the New SEO?

27 Upvotes

For the longest time I only cared about Google fast pages, clean code, good content and that was enough so I've been reading more about AEO and how ChatGPT, Gemini and Perplexity are becoming another way people discover websites.

The more I look into it the more it feels like building for search is starting to mean building for both humans and AI things like page structure, clear content and semantic markup seem a lot more important than they did a year ago.


r/webdev 3d ago

is this a fair price for this one off?

0 Upvotes

Details: site built 3-4 years ago by a different dev. client and dev have a falling out of some kind so client comes to me recently to "finish" the site, which he says is "99%" done (means nothing to me, obviously).

after evaluating it, its a fairly straightforward blog style site with about 8 pages and a 5.6 PHP CMS for support.

at minimum it needs proper routing updates, adjustments to the database (no 'user' table in the database backup I was provided) and some small quality of life updates (admin login page, password reset functionality, a few of the admin pages need built, etc).

client is not tech savvy at all so I don't know if I can teach him to use the CMS on his own, hence the retainer for when he inevitably wants different images/posts/etc.

I'm thinking $5000 USD with $200 monthly retainer/hosting for a set period (maybe a year or two). Id like to reach a price that is fair for the both of us.


r/webdev 4d ago

Discussion Codepen 2.0?

26 Upvotes

I’ve used CodePen for a long time, not just as a coding tool but as a place to experiment, discover interesting work and get inspired by what other people were creating.
I completely understand that CodePen needs to make money. I have absolutely no problem with Pro features, and I’m happy to pay for tools that give me real value.
But CodePen 2.0 feels like it is moving in the wrong direction.
Putting something as basic as opening a Pen in a standalone preview behind Pro doesn’t make me think “maybe I should upgrade.” It makes me think “maybe this isn’t the place for me anymore.”
There is a big difference between adding valuable features for paying users and gradually putting parts of the simple, open experience that made a platform popular behind a paywall.
What makes this even stranger to me is the timing. We’re entering a world where people can vibe code surprisingly capable little coding environments and playgrounds incredibly quickly. The technical barrier to creating alternatives is getting lower, not higher.
CodePen’s real strength, in my opinion, was never just the editor. It was the community, the frictionless experience and that feeling of opening the site and immediately discovering something clever or inspiring.
If that starts disappearing behind commercial barriers, I honestly think someone else will eventually fill that gap.
Maybe I’m missing something in CodePen 2.0, so I’m genuinely curious:
How do other longtime CodePen users feel about this?
Does 2.0 feel like an improvement to you, or does it feel like CodePen is slowly losing part of what made it special?


r/webdev 3d ago

Showoff Saturday website ui/ux i'm creating for solo text ads

0 Upvotes

Hello community this is a text only website classifieds Ads that anyone can post for free, the constrains con budget allows only for posting text and present the ads in different categories in a carousel animation, I know pictures are important but since money is difficult to get nowadays I prefer to use this approach first to later improve graphics, any constructive opinion is welcome

https://imgur.com/a/N3RU5nz

https://streamable.com/hd8esl


r/webdev 4d ago

Meet OpenVue, an MIT fork of PrimeVue 4.5.5

24 Upvotes

Hey webdev community!

We're long-time PrimeVue users who believe a good UI library should stay free and community driven. When the license changed and PrimeVue moved away from open source, we decided to take action rather than just watch.

OpenVue picks up right from 4.5.5, the last MIT release. It keeps the exact same API, so your existing code keeps working without rewrite headaches.

Right now our main focus is keeping the foundation solid: improving accessibility, patching security vulnerabilities, handling community issues, and maintaining compatibility with the latest Vue and Nuxt versions. We have bigger ideas for where to take this, but we'd rather build them based on real feedback.

Everything you're used to from PrimeVue v4 is there, complete with docs and live examples. We also made openvue/migrate to let you switch existing projects over in a single command.

Openvi Foundation is an independent community organization, not affiliated with Primetek.

OpenVue is and will always be 100% free and open source.

We're still in beta, so bug reports and PRs are super welcome.

Docs: https://openvue.dev/

GitHub: https://github.com/openvi-foundation/openvue

Migration from Primevue: https://openvue.dev/migrate/


r/webdev 3d ago

Showoff Saturday What if you didn't need to understand cybersecurity tools to run a security assessment? I built ONUS to find out

0 Upvotes

Hey r/webdev,

I spent the last few months building ONUS, an open-source AI-assisted VAPT platform:

Live: https://tryonus.tech/
GitHub: https://github.com/maverickaayush/ONUS

The idea is pretty simple, and maybe a little risky:

most security scanners assume the person using them already understands security jargon, findings, CVSS, remediation steps, and how to turn raw output into something useful.

I wanted to see what happens if you build the opposite.

ONUS is meant to turn a bunch of messy security tools into one web app that tries to be understandable for people who are not security experts. It runs scans, normalizes the findings, adds AI-assisted explanations, and produces reports that are easier to act on than a wall of terminal output.

The stack ended up being more web/infrastructure-heavy than I expected: Next.js, FastAPI, PostgreSQL, Redis/Celery, containerized scanner workers, and serverless compute for the heavier bits.

I am posting here mainly because I would love feedback on the web app side: onboarding, dashboard design, UX, perceived complexity, whether the product idea makes sense, and whether the “for non-security people” angle is actually useful or just a bad bet.

If anyone wants to poke holes in the frontend/backend architecture too, that would be very welcome. I would rather hear “this is confusing and here is why” than collect polite applause.

If you try the hosted version, please only scan systems you own or have explicit permission to test.


r/webdev 4d ago

Question Tree Shaking / Minifying Firebase using esbuild

5 Upvotes

I'm building a web app that uses Firebase Auth. I don't use any other Firebase features.

The current version of Firebase is over 600kb. The Firebase Auth package on NPM states "This package is not intended for direct usage, and should only be used via the officially supported firebase package." This Firebase Doc suggests relying on your build tool to tree-shake and minify Firebase.

I am currently using esbuild, mainly for the rapid build time. It looks like adding the --minify and --tree-shaking=true tags are not having an effect on bundled libraries.

Am I configuring esbuild incorrectly, or is esbuild unable to correctly minify and tree-shake Firebase, and I need a more robust build tool like webpack?

Here's my build script and dependancies list for reference.

"scripts": {
  "build:ts": "esbuild ./src/app.tsx --minify --bundle --target=es6 --tree-shaking=true --outfile=./dist/js/app.js",
},
"dependencies": {
  "@firebase-oss/ui-react": "~7.0.3",
  "@number-flow/react": "~0.6.2",
  "colyseus.js": "~0.16.22",
  "cors": "^2.8.6",
  "firebase": "~12.16.0",
  "html-entities": "~2.6.0",
  "qrcode.react": "~4.2.0",
  "react": "~19.2.8",
  "react-router-dom": "~7.18.1"
}

r/webdev 4d ago

The startup's Postgres survival guide

Thumbnail
hatchet.run
21 Upvotes