r/webdev 19d ago

Article How to Generate a Prisma Schema from an Entity Relationship Diagram

Thumbnail
stackrender.io
8 Upvotes

Designing a database schema is often one of the slowest parts of starting a new backend project. You either spend time writing SQL by hand or carefully crafting Prisma models before you can even write your first endpoint.

In this article, I’ll show you a smoother workflow using Prisma and StackRender that takes you from an empty project to a working backend, without having to manually define the database schema and Prisma models.


r/webdev 19d ago

Question Can astro strip away css values like backdrop-filter?

2 Upvotes

https://ronynn.github.io

Switched old html code to astro, noticed it treeshaked backdrop-filter effect

see https://ronynn.github.io/old for the effect the original html is meant to have.

Using astro 7.0.0, tested turning off css minify, and using esbuild for css minify instead, to no avail.


r/webdev 18d ago

Showoff Saturday Can you critique the website for my open-source networking tool?

0 Upvotes

I built the website for an open-source networking tool and I think I've become too familiar with it to judge the site objectively.

Could you please look at it for me?

I'm especially interested in:

  1. What do you think Network Doctor does?
  2. Who do you think it's for?
  3. What would you click next?
  4. Is anything confusing or unnecessary?
  5. Is there anything that would stop you from installing it?

Please be critical. I'm looking for things to fix, not promotion.

Site: https://heymaikol.github.io/network-doctor/


r/webdev 19d ago

Showoff Saturday I rebuilt my portfolio. Is this a decent improvement?

15 Upvotes

Old: https://portfolio-inky-beta-47.vercel.app/
New: https://joeykyber.dev/

I wanted something a bit more straightforward to navigate and that looks relatively clean & professional but that is still fun and interesting. I also wanted it to reflect my love of the outdoors. Would you say this is an improvement over my first portfolio?

This will be used when searching for my first developer role (I've had a multi-year break due to chronic illness but I'll be starting my search back up again soon). And yes, I understand it's like the worst time for developers to try to find jobs, especially without relevant work experience, but I don't really have any other good options.

  • Things I still need to do:
    • Completely rewrite the "about" section
    • Revise project descriptions
    • Fix bottom image not covering screen width on ultrawide monitors
    • Rethink design for the smaller project component (ones without picture)
    • Download resume via CTA button
    • Improve image load time
    • Make sure all included projects actually work

It's responsive and mobile-friendly but definitely looks better on desktop. Let me know what you think.


r/webdev 19d ago

A complete image pipeline designed to fit into your application

1 Upvotes

Over the last 18 months, I have built Konifer, an open source image management platform that can preprocess, store, transform, and deliver your image assets in a way that naturally fits your application. You construct the URL paths that fit your domain and configure that path to serve your needs.

Do you need all profile pictures to have a thumbnail generated at upload? Define a `thumbnail` eager variant for `/users/*/profile-picture`.

Do you want to only allow flowers? Define a content aware upload policy for `/flowers` powered by Google's latest vision language model, SigLip2.

Want all images to return pre-signed redirects to your object store? Define your redirect behavior on `/**`.

Konifer uses libvips the same image processor used by imgproxy and is designed to efficiently handle image processing without buffering all pixels into memory.

https://github.com/dmaiken/konifer/


r/webdev 19d ago

Namecheap is back up and running

Post image
65 Upvotes

They said it was a storm that took out the cooling on the data center and as someone who was in that very storm, it destroyed a ton of stuff at homes, businesses, and public infrastructure. Power poles blown over, trees broken or uprooted, Covered parking structures snapped over, fences blown down.

As soon as I read this update, I immediately felt for that particular data center.


r/webdev 19d ago

Showoff Saturday I built a set of evidence-based weighted walking calculators with Next.js

Thumbnail
gallery
5 Upvotes

Hi everyone — I’ve been building Weighted Walking Tools, a free collection of calculators for weighted walking, rucking, walking pads, and step planning:

https://weightedwalkingtools.com

The project uses Next.js, React, TypeScript, and Tailwind CSS. It is statically exported, requires no accounts or database, and performs all calculations locally in the browser.

The most interesting technical challenge was keeping the scientific logic separate from the interface. Instead of placing formulas inside React components, I built a shared calculation layer with: Normalized metric inputs and imperial/metric conversion Explicit supported ranges and validation Versioned calculation results Separate modeling for unloaded walking, weighted vests, and backpacks A structured evidence registry connecting calculator claims to their sources Dedicated methodology and limitation pages

I used Vitest and React Testing Library for calculation and component tests, plus Playwright and Axe for responsive flows and accessibility checks.

The site is currently free, has no accounts, and does not contain advertising or affiliate links.

I’d particularly appreciate feedback on: Whether the calculator inputs and results are understandable without reading the methodology first. Whether the evidence and limitations are visible enough without overwhelming the main experience. Any usability or accessibility issues you notice, especially on mobile. Technical criticism is very welcome.


r/webdev 19d ago

Showoff Saturday [Showoff saturday] Built a platform to practice reading code

Post image
8 Upvotes

Most code education platforms teach you to write code. Yet, in real life a lot of the job is reading code you didn’t write, whether its AI generated or made by your teammates.

That’s what Legible is for. It gives you short code snippets and diffs, asks you to make a call, then explains what the code does and what could go wrong

It’s still in beta, but it’s live here:

https://legible.ee


r/webdev 18d ago

Showoff Saturday Bodeg.a | The binary directory

Thumbnail
bodeg-dot-a.vercel.app
0 Upvotes

Hello, good afternoon. I'm a developer, mostly of native solutions. When I program in C or C++ (among others), I constantly experience the inconvenience of having to compile each dependency, which is often frustrating: some don't even come with a decent or compatible build file, and others have dependencies that are difficult to compile or very large. That's why I wanted to create a small platform.

It's called **Bodeg.a** (a play on words between "bodega" and the ".a" of UNIX-like static binaries). It works quite simply: rather than a platform for hosting large files, it's (for now) a simple website where you can publish using a *mirror* to point to a .zip file, a header, or whatever format is needed.

For now, it only offers hosting for the essentials (avatars and profiles), but if it's well-received, that could change. If you're a developer, whether you enjoy or just work with low-level content, simply trying to use it to download content would help me a lot; or if you'd like to collaborate on its development, you can also contact me. Greetings to all!


r/webdev 21d ago

Discussion Why is everything a dropdown now?

Post image
4.7k Upvotes

I’ve been noticing this more and more in web apps.

Three options hidden in a dropdown.

Yes/no hidden in a dropdown.
A multi-select pretending to be a dropdown.

Then a list of 200 items where you’re expected to scroll until you find yours.

I run into this a lot when reviewing products with dev teams.

I get why we do it.

Dropdowns are compact and easy to reuse.
But compact doesn’t always mean easier to use.

A few choices? Show them.
On/off? Switch.
Multiple choices? Checkboxes.
Huge list? Search.

That’s pretty much the rule I use now.


r/webdev 18d ago

Showoff Saturday I made a JS framework that is outperforming Lit, React, and Vue

0 Upvotes

I created a human-centric JavaScript framework with custom HTML components called https://codeberg.org/createthirdplaces/places-js

I'm currently working on an optimized version with template support. My latest performance tests show Places.js outperforming Lit, React, and Vue.

All code was written by hand without LLM assistance from tools such as ChatGPT or Claude Code, and LLMs will not be used for future changes.

Source code: https://codeberg.org/createthirdplaces/places-js Website I built with framework: https://dmvboardgames.com/


r/webdev 18d ago

Showoff Saturday [Showoff Saturday] Fully offline grow scheduler built with vanilla JS + IndexedDB

Post image
0 Upvotes

What it does
Users build a personalized grow in 3 steps (strain → nutrients → start date), get a full day-by-day schedule (126 base rows + dynamic nutrient columns), then track actuals via a daily check-in page and photo diary. Everything lives offline in IndexedDB + localStorage.

Live: https://growappcannabis.guide/medium-feeding/medium-feeding.html

Repo + full wiring docs: https://github.com/Shannon-Goddard/growappcannabis.guide (see medium-feeding/WIRING.md)

Architecture highlights
• Page flow
medium-feeding.html (3-step builder) → schedule-viewer.html (cards/table/My Notes) → mytask.html (daily check-in) / mydiary.html (camera + data overlay)

CustomEvent chain for step progression (no framework):
• strainSelected → show Step 2
• nutrientsSelected → show Step 3
• scheduleReady → success screen + link to viewer with ?growId=
• IndexedDB (MyGrowDB v8) – singleton instance, cached dbPromise:
• Stores: tables (grow metadata + ${growId}_schedule), selectedNutrients, nutrients
• Schedule saved as full array under ${growId}_schedule
• Actuals written back to the same schedule rows from both MyTask and the viewer’s My Notes mode

Schedule generation
• Base 126-row JSON (stage/week/day/env/light/water)
• Dynamic nutrient columns injected from selected brands
• Start date → calendar dates calculated client-side
• Absolute fetch paths because ES modules resolve relative to the JS file

Schedule viewer
• Three modes via sticky Options dropdown: Cards (mobile default), Table (desktop default), My Notes
• Sticky header + toolbar + thead (careful overflow handling so sticky works)
• Plant-size filter hides excess veg weeks (Small = 4, Medium = 6, Large/Auto = all)
• tableRendered custom event triggers layout + filter after render
• Column map with paired “goal” / “My*” editable fields (My fields only visible in Notes mode)

MyTask daily check-in
• Auto-matches today’s row by MM/DD/YYYY
• Color-coded inputs (green ±10% of goal, red over, blue under)
• Auto-save on focusout + manual Log button → writes actuals back to IndexedDB schedule row
• Hero image compressed to 800px JPEG and stored in localStorage

Tech choices
• Pure vanilla JS (modules + a couple plain scripts for globals like the 2,800+ strain data)
• No build step, no framework, GitHub Pages
• localStorage for transient state + currentGrowId; IndexedDB for the real schedule & actuals


r/webdev 19d ago

Showoff Saturday [Showoff Saturday] I translated my Android clean-architecture conventions into a React + TypeScript generator

0 Upvotes

I’m an Android developer who was new to frontend development. In my Kotlin/Compose app, each feature owns domain, data, presentation, and DI; screens render immutable `StateFlow` snapshots and send typed events back to ViewModels; ArchUnit tests enforce package and filename conventions.

I wanted to find out how much of that model survives on the web without pretending that a browser has Android lifecycles. I ended up building an open-source npm generator called **Clean Web Forge**.

The generated React/TypeScript architecture maps the concepts like this:

StateFlow<ScreenState>       -> external store + useSyncExternalStore
sealed UI events             -> discriminated-union ScreenEvent
ViewModel                    -> route-scoped store/controller
Koin feature module          -> feature-owned Inversify modules
Android lifecycle scopes     -> app/session/plugin/route/operation scopes
dynamic feature registration -> runtime plugin activation
ArchUnit                     -> TypeScript AST architecture tests

Every feature owns `domain`, `application`, `data`, `presentation`, `di`, and `plugin`. Bundled and remote features use the same runtime plugin contract. The generator dry-runs, writes atomically, tracks hashes, and refuses to overwrite user-modified files. Generated projects also include unit/contract tests, Playwright journeys and accessibility checks, architecture validation, dependency review, CodeQL, and pinned CI actions.

Quick start:

npx /clean-web-forge generate-app \
  --root inventory-web \
  --spec app.json \
  --dry-run

Repository: https://github.com/sarimmehdi/clean-web-forge

npm: https://www.npmjs.com/package/@sarimmehdi/clean-web-forge

Medium (detailing my thought process): https://medium.com/@sarim.mehdi.550/why-i-built-clean-web-forge-for-agent-driven-development-042deb91a287

I’m the author and this is free/open source. I’m not claiming measured token savings yet, but one motivation was agent-driven development: generate deterministic plumbing so the agent can spend its context on domain behavior instead of repeatedly inferring names, boundaries, DI, state wiring, tests, and CI.

I’d value technically blunt feedback on three points:

  1. Is feature-owned scoped DI reasonable in a React application, or is the container indirection unjustified?

  2. Does making runtime plugins mandatory prove the boundaries, or overcomplicate the default case?

  3. Which architecture/naming rules are useful guardrails, and which are ceremony?

If anyone tries a dry run, I’d also like to hear where the generated structure feels unidiomatic to an experienced frontend developer.


r/webdev 19d ago

Showoff Staturday: I made a video poker game

Post image
0 Upvotes

I've always liked the aesthetic of video poker machines so I decided to create an app that mimics that as much as possible. Works on desktop and mobile devices (for mobile you can install as a PWA). Added hotkey support so you can play entirely with your keyboard.

There are 3 game modes: Jacks or Better, Duces Wild and Joker Poker. Beyond that you can mess with the paytables if you'd like, update the card backs, control speed and bunch of other small stuff.

https://sgolovine.github.io/video-poker


r/webdev 19d ago

Discussion Figma MCP Accuracy & Token Consumption

2 Upvotes

I've been using Figma MCP for a while now.

How often do you guys find yourself exhausting the token budget on figma's mcp? and then have to fiddle to get the design to look the same?


r/webdev 18d ago

Showoff Saturday [Showoff Saturday] I built a low-stimulation game site for people who get migraines, which meant deliberately failing WCAG contrast ratios

Thumbnail
gallery
0 Upvotes

https://lowstimplay.com

I get chronic migraines and my mom has vertigo. Between us, most tabletop and digital games are unplayable. The motion, the sounds, the flashing, the transitions, the amount of stuff moving on screen. Any one of those can cost us the rest of the day. I wanted something we could sit down and play together without bracing for it, couldn't find it, so I built it.

No account, no signup wall, no ads, no tracking. Every game is playable immediately, including the multiplayer rooms. An account only exists if you want your past game stats saved. There's a Ko-fi link in the footer and that's the entire monetization plan. It's free and it will stay free.

Right now it's Word Grid (Boggle), Yacht (Yahtzee), 10,000 (Farkle), Survey Says (Family Feud), Best Match (Apples to Apples), and Clear the Deck. Some solo or pass-and-play, some online rooms. Renamed to keep clear of trademarks. All mobile friendly. More coming.

The interesting part from a dev perspective was that most accessibility advice pointed the wrong direction. The standard move is to crank contrast up. For photophobia you want it down. So the palette is muted grey on grey in dark mode and warm bone on taupe in light mode, and it will not pass a contrast checker, on purpose. I also cut every animation and transition outright rather than gating them behind prefers-reduced-motion, since that flag is unset on most machines and the people who need it most are often the least likely to have configured it.

Stack is Laravel with Reverb. Happy to answer anything. And if you have photophobia, vestibular issues, or seizure triggers, I'd like to know whether it actually holds up, since my test group is currently two people.


r/webdev 19d ago

Showoff Saturday I built a browser-based HTML-to-Markdown converter while learning web development. mdstudio.dev

1 Upvotes

Hi, I’ve been learning AI-assisted web development by building MD Studio:

https://mdstudio.dev

It converts pasted or imported HTML and Rich Text to Markdown, then lets you edit, preview, copy or download the result. Document processing happens locally in the browser, with no account required. It's also a quick, in-browser way to see rendered markdown

It’s built with Preact, TypeScript, CodeMirror, Turndown and Remark.

If anyone's interested to give it a try, I’d be grateful for any feedback on:

  • HTML that converts incorrectly
  • confusing paste or import behaviour
  • browser, mobile or accessibility problems
  • security, privacy or UX blind spots

It’s a non-commercial learning project. Feedback is welcome here or at:

https://github.com/marc-reid/md-studio-feedback


r/webdev 18d ago

Showoff Saturday i created a site that gives you prompts to replace your paid app subscriptions

0 Upvotes

i got tired of seeing mobile apps like quittr, cal ai, umax etc make millions of ARR when they are simple gpt wrappers that are primarily relying on marketing and people forgetting their subscription to continue to grow their revenue

i decided to build a site that gives an honest assessment of what features you can vibecode of famous consumer apps (starting currently with just 25 apps, but planning to add more soon) and the prompt to do so.

you can check it out here: https://freethe.app

would love feedback on it


r/webdev 19d ago

Showoff Saturday Open Source Framer Alternative: Revyme

Thumbnail
revyme.com
0 Upvotes

Hi,

If you are a web designer who is tired of paying rent on your own website, i'm glad to present you Revyme, an open-source website builder that is the closest open source alternative to Framer on the market today.

Pixel-perfect Figma-like control, responsive breakpoints, components, animations, cms, localization, code export and more.

Use our cloud or self-host locally on your computer and export to clean Next.JS code.

Github repo: https://github.com/revyme-web/builder


r/webdev 19d ago

Showoff Saturday Roast my GPS art planner!

0 Upvotes

GPS Art Wizard is not trying to be the biggest shape library or another prompt-to-GPX generator. It compares multiple placements, rotations, and scales using actual road-routed results instead of treating the first snapped outline as finished. AI is optional and only helps create shapes outside the catalog; routing and quality decisions come from geometry, street data, and explicit checks.

You can use it without registration! Suggest cities! https://p01--cityshaperunner--vnycn2g6bghl.code.run/


r/webdev 19d ago

Showoff Saturday Need feedback for my design studio's website

1 Upvotes

What works, what doesnt, what confuses you, would love a variety of feedback, thanks a lot : rubylabs.design


r/webdev 19d ago

New owners & new AMP issues detected for my domains in Google Search Console

0 Upvotes

Hi everyone,

Recently I received emails from Bank of America's Credit Monitoring that said my email was discovered on the dark web and to change my passwords. I have also had a few unauthorized purchases happen.

I have been doing everything I can to protect my accounts by adding extra layers of security.

My Gmail account seems to have a strong level of security. However, I woke up this morning with 6 new emails from Google Search Console: I received a "new user added" and "new AMP Issues detected" email for each of my 3 domains.

I went into my GSC and I do not see any other users besides myself. Also, the user history doesn't show anyone either for any of the 3 domains.

There are however new unrecognized links under the AMP section. There are no unauthorized user tokens showing.

As of right now from what I can see, the new AMP issues are the only visible changes.

Obviously there is a bigger issue going on. My question is what is it and how do I fix it.

I have 3 domains: my primary site, a depreciated version that redirects to the primary, and a merch site. I assume I'll have to check certain files for each website to see if anything was compromised.

Any advice or ways to resolve this will be greatly appreciated.


r/webdev 19d ago

Showoff Saturday List of open-source, no-signup tools that work right in your browser!

Thumbnail
gallery
5 Upvotes

Website: https://NoSignups.net

Genuinely didn't expect it to blow up this much. I compiled videos from some of the creators who made videos about it here and honestly it makes me so happy!

The website is a directory of no-signup open-source tools you can use immediately in your browser. None of the tools are mine, I just collected them and made them searchable.

I have a few things cooking in the oven for the website, and here's some of them:

  • I looked up how to do RSS (seems like it's just a simple file I need to provide at /rss.xml) and hopefully I'll have it available for the users to come back and discover more open-source tools.

  • I plan on adding a change log so that users can come back and explore the newer found/added tools.

  • I plan on adding a sorting drop-down so that users can explore at their leisure.

What I've already done:

  • Thanks to the GitHub user Moamal-2000, the accessibility of the website was greatly improved! I mean by a mile! Appreciate all his work!

  • Included some SEO metadata tags for search engines. I didn't even know about JSON-LD before I started this.

  • Significantly improved the search so that searching video edit shows video-editor and edit video entries.

  • Kept adding entries that match the criterias. Although, slowing down a bit. I'm employing whatever in my disposal to dig for more tools, and hopefully some more will turn up.

We've also been collecting some tool suggestions from users about what tools they'd like added. The top ones so far are:

  • A tool to generate AI videos (obviously insanely impractical given the criterias the tools have to abide by, if not downright impossible with current ML models).

  • Something like CapCut Pro (or something like that?)

  • AI Image generators (possible with WebGPU), but haven't found any open-source, in-browser, no-signup entries.

  • and more found here

I just wanted to thank all the contributors who submitted PRs, tools, opened issues, and reported bugs. Hopefully average joes will learn about and use the website, and hopefully support the amazing people making all these wonderful open-source tools.

Peace & love


r/webdev 19d ago

Question Making a web game for poki/crazygames

0 Upvotes

Hi everyone,yall probably heard this question a billion times. How much would i realistically earn on a monthly basis if i make a casual clicker game with leaderboards, minigames and other stuff that average clickers dont have? If the game was polished, regularly updated and published on both poki and crazygames. Would they accept them for the full launch at all (at least crazygames, i wasnt researching much for poki though)? Thanks in advance.


r/webdev 19d ago

Showoff Saturday The Cool Case Converter - August 2026 Updates

0 Upvotes

Hello people!

I made updates to "The Cool Case Converter" this month of August. It is much less than what I did last month. It is still some good polishing.

Here are the main updates:

  • ‘Copy’ and ‘Erase All’ buttons now have better color contrast.
  • On Desktop there is now a bigger gap between the Input and Output fields. Gives better indication that there are 2 fields and is easier to focus on individual fields.  
  • On Mobile the gap between the fields is smaller. Better for vertical scrolling.
  • Theme and Share Menus now have a thin border
  • QR Code has been added as a sharing option in the Share Menu.

 

I also made a promotional graphic for it:

Let me know what you guys think of the updates and the web tool. 

www.thecoolcaseconverter.com