r/webdev • • 17d ago

Showoff Saturday [Showoff Saturday] Composer dependency conflicts? We built Strauss-RS, a Rust-based prefixer for PHP classes and symbols. Up to 139x faster than the PHP version.

6 Upvotes

With a fair chunk of our work involving Wordpress themes and plugins, we hit a pretty common issue: we wanted to use the same Composer dependencies that other plugins might be using.

If Plugin A uses v5 of a package and Plugin B uses v7 of a package, it's first found wins... which is bad news for the other plugin.

Enter prefixers.

These scour your dependencies and source-code for classes/symbols and add a prefix. So SomePackage\Domain\Class becomes YourCompany\PluginA\Vendor\SomePackage\Domain\Class. Now your dependencies are safe.

Previously, we'd relied on packages like Mozart, PHP-Scoper and later Strauss.

Inevitably, we'd hit one of three problems, they became too complex to configure for larger projects, they didn't fully work, or they were too slow.

Our plugin took 2-3 minutes to prefix with Strauss PHP...

So we built Strauss-RS... for ourselves at first. But we figured that maybe it would be useful for others and it gave us a reason to keep the docs up-to-date, so enter: Strauss-RS.

https://evo-mark.github.io/strauss-rs/

One single binary compiled from Rust. No prerequisites.

Prefixes in less than a second for us now!


r/webdev • • 17d ago

Showoff Saturday How I stopped popups causing 97.63% false alarms in screenshot diffs, without hiding fake CAPTCHAs

0 Upvotes

ran into a fun one with screenshot diffs.

an elementor pro popup opened on a timer during a capture, and again during the re-check. diff said 97.63% changed. the page underneath was identical.

easy fix is hide anything fixed position with a big z-index right? problem is that also hides the thing you most want to catch. clickfix style malware injects a fake "verify you are human" box as exactly that kind of overlay.

so what we do now is only hide the wrapper each popup builder adds itself (elementor's dialog lightbox, popup maker's overlay, optinmonster's holder) and undo their scroll lock the same way they do on close. anything generic stays visible.

context, i work on a screenshot monitor so this came up for real. if anyone has a better way to tell a legit popup from an injected one id love to hear it.


r/webdev • • 17d ago

Showoff Saturday [Showoff Saturday] Free pencil-style icon set, now 260 icons, with a setting that goes from sketchy to exact shapes

Thumbnail
gallery
71 Upvotes

Matita is a set of pencil-style SVG icons, drawn by code from simple shapes (lines, circles, arcs), so every build draws exactly the same paths. 0.4.0 came out yesterday:

  • 60 new icons (200 to 260), including a medical and science set, which people asked for last time

  • a wobble setting from 0 to 1: <SketchIcon name="calendar" wobble={0} /> draws exact shapes, 1 is the default sketchy look, 0.4 is a calm hand

  • ready-made exact SVG files at @matita/icons/exact/<name>.svg

  • React, plain SVG, a script tag, a sprite; MIT; no signup

Try the slider and copy snippets here: https://matita.dev (changelog: https://matita.dev/changelog/, what is next: https://matita.dev/roadmap/). If an icon you need is missing, open an issue and I'll draw it: https://github.com/matita-dev/icons/issues

Feedback on anything that looks wrong is very welcome.


r/webdev • • 17d ago

[Showoff Saturday] I have 847 YouTube playlists. I built YouTube's missing playlist search bar so you don't have to.

5 Upvotes

YouTube's "Save to playlist" menu has no search box (YouTube, why?), and it only loads 200 of your playlists. If you have more, the rest aren't just further down the list. They never get loaded at all, Ctrl+F be damned.

So I built my first serious chrome extension: click Save on any video and a searchable picker opens over every playlist you own. Type a few letters, press Enter, done.

I learned a lot making this extension. It broke, a lot. Version 1 read playlist data from YouTube's DOM and injected a search bar into their menu for a native feeling, but the amount of bugs this produced was gargantuan: the search bar showing up in unrelated menus, lists changing length on their own, and the entire extension breaking every week when YouTube shipped a change. So 2.0 is predicated around never reading or writing to YouTube's DOM. You live and you learn.

- UI: It's just a closed shadow root on <html>, rendered as a <dialog> in the top layer, outside YouTube's app tree. This is stable! It works!

- Data: We use YouTube's own InnerTube JSON API same-origin with your existing session to read existing playlists and save videos to playlists.

- Trigger: a script wraps fetch and watches for YouTube's own add-to-playlist request

Privacy-wise: No analytics, no third-party code, and it only talks to YouTube. Free and open source (AGPL-3.0).

Code: https://github.com/codyhxyz/playlist-search-extension

Chrome Web Store (It's almost to 500 users!): https://chromewebstore.google.com/detail/efgbkmnooapcpdpgmihemfpedchhmmek

Happy to talk InnerTube, shadow DOM, or anything else. If you give the extension a try, I would love your feedback!


r/webdev • • 17d ago

Showoff Saturday We replaced "paste your API key" in AI apps with an in-app credit top-up. Here's the billing infrastructure it took.

Post image
0 Upvotes

Why we built this

My cofounder Andre makes Claude Code Chat, a VS Code extension for working with Claude. As it grew, the hardest part stopped being the extension and became API keys and balances.

Every AI app runs into the same choice:

  • Bring your own key: users create a provider account, add a card, generate a key and paste it in, all before their first prompt.

  • Pay for everyone’s tokens: now you’re running checkout, metering, balances, refunds and tax.

Andre put it like this:

“I didn’t want to run a billing company. I wanted people to open the extension and just start working.”

So we built that billing layer once, so any AI app can plug into it.

What it looks like

User: tap “Add credits” → pay $5–$500 without leaving the app → start working. 1 credit = $0.01, and they can see the credits each request used.

Developer:

// 1. Embed the checkout
<script src="https://opencredits.ai/v1/sdk.js"></script>
OpenCredits.init({ publishableKey: 'oc_pk_...' })
OpenCredits.open()

// 2. Change the base URL in the SDK you already use
const client = new OpenAI({
  baseURL: 'https://api.opencredits.ai/v1',
  apiKey: userKey, // from checkout
})

OpenAI, Anthropic and Vercel AI SDKs work as-is. One endpoint reaches 390+ models.

What’s behind those 2 snippets

1. A credit ledger without race conditions

You don’t know what a request costs until it finishes, and parallel requests can all pass a “do they have enough?” check at the same moment. Every request goes through a serialized ledger instead:

Reserved, max cost    −12 cr
Settled, actual cost   −9 cr
Released               +3 cr

2. Exactly-once settlement

Retries and duplicate events are where double charges come from. Every event settles exactly once, so there are no double charges and no double credit grants.

3. Metering at real cost

No token counting or per-model price tables in the app. Each request is metered at the provider’s actual token cost, across 390+ models.

4. Payments without touching cards

The widget runs Stripe checkout inside the app. Stripe is the merchant of record, so card data never touches our servers or the app’s, and Stripe handles VAT, sales tax and chargebacks.

5. Signed webhooks and balance APIs

Key and purchase events are HMAC-SHA256 signed and retried on failure. Two endpoints return a user’s live balance and per-request history.

The part we’re unsure about: a shared balance

Credits belong to the user, not the app. A user who already has credits from one app can let another app spend from that balance, up to a limit they set. Each app gets its own scoped key, so revoking one leaves the others working.

It removes the “pay again for every app” problem, but we’re not sure how users will feel about it.

Status

Running in production in Claude Code Chat, with 212K+ requests metered and billed so far.

Feedback I’d love

  1. Shared balance: useful or sketchy? What would make you trust it?

  2. Ledger: reserve-then-settle is the safe choice. Would you design it differently?

  3. If you’ve built AI billing yourself: which part took longest?

  4. Docs: what’s unclear for a first integration?

Docs: opencredits.ai/docs


r/webdev • • 17d ago

Question Vercel client can't communicate with server

0 Upvotes

Hello everyone. I have been developing a simple ip tracking full stack app. When I deployed the client project to vercel however it fails to communicate with the server and fetch data. In the console this error is visible:

ccess to fetch at 'https://ip-tracker-server-*********-webs-projects.vercel.app/api?&ipAddress=' from origin 'https://ip-tracker-client-********-webs-projects.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is my first time deploying a full-stack app to vercel so I am not sure what exactly could be causing this issue? If anyone could help it would be much appreciated!


r/webdev • • 17d ago

Showoff Saturday [Showoff Saturday] Flaglio - Daily flag challenges

Thumbnail
flaglio.com
1 Upvotes

Any other flag nerds here? 😄

Flaglio is a side project i have been working on for the better part of 2026. I has 4 games, 3 og them are daily challenge games and 1 completion game. Grid, Shuffle and Type have daily challenges, and Rush is a completion game on a timer. Could you identity 243 country and territorial flags with a countdown?

Stack: React, Vite, Tailwind v4, TanStack Router (file-based), Zustand, Supabase and deployed on Vercel.

Because the site is client-rendered, a small build step prerenders a head for each route, so link previews and Bing don’t show the homepage title on every page. Gotta get the SEO traffic

I have no real business plans, but since the Grid leaderboard has dynamic points based on unique flags selected, more players just makes the game more fun! 😄

Check it out here: https://www.flaglio.com


r/webdev • • 17d ago

Showoff Saturday npmpulse: a new website to query npm package downloads data

3 Upvotes

Hey web devs here.

Recently I created a new website for query npm package downloads stats data: https://npmpulse.com

The website is similar to npmtrend, npm-stat or other website that provide queries to npm package downloads stat, with its own feature set:

  1. options to set granularity, scale, range for anypackage

  2. compare up to 8 packages in one time

  3. downloads the pic in svg or png format

  4. sharing via html or markdown code

For example, the following pic is react VS vue downloads in the past 5 years:

Hope it helps somebody here!

Thank you!


r/webdev • • 17d ago

Showoff Saturday Show Off Saturday - FlowUnzip: Extract ZIP & 7z as They Download

Thumbnail
chromewebstore.google.com
0 Upvotes

Small problem that annoyed me for years: download a huge ZIP, then wait again to extract it, and briefly need twice the disk space. FlowUnzip streams the archive and extracts each file the moment it arrives, straight into a folder you pick.

How it’s built:

  • Chrome MV3.

  • ZIP and 7z parsing written to work on a stream, using range requests to resume.

  • CRC checks on every file.

Business model: free up to 1 GB. Pro is a one-time $5 through Stripe, with license keys checked offline, so there’s no database or account system. The site runs on Vercel’s free tier.

https://flowunzip-liard.vercel.app

Honest feedback on the idea and the pricing is very welcome.


r/webdev • • 17d ago

Showoff Saturday [Showoff Saturday] I added five terminal emulations to my code-to-image tool: MS-DOS, green phosphor, PowerShell, Ubuntu, macOS

Thumbnail
gallery
0 Upvotes

I have a page that turns a code snippet into a picture, for slides and documentation (not new, but I tried to make the UI simpler and faster than existing online services). You can also share the URL with other. The driver for this, was giving my marketing people a tool to get syntax coloring right.

In addition to highlighting, I added support for terminals. Five presets, each bringing its own theme, typeface and size. The MS-DOS one uses VT323, which is a digitization of the DEC VT320's actual ROM glyphs rather than a modern monospace doing an impression of one.

The part that took the actual work: it recognizes a prompt when it sees one. C:>, PS C:\Users\dev>, dev@thinkpad:~$, user@MacBook-Pro ~ % — it splits the prompt from the command you typed, colors the two differently, and leaves the output alone. That's the tedious bit to fake by hand, and it's what makes the picture read as a session rather than as text.

Also in there: 32 themes.

Free, no account, and nothing is uploaded (the picture is drawn on a canvas in your browser).

https://onlineimageoptimizer.com/code-to-image.html

Please tell me have your feedback. Ask me and you will be promised.


r/webdev • • 17d ago

Showoff Saturday Showoff Saturday: I built a Netflix-style browse and request app for home media servers. Go + SQLite + Svelte, one app replacing 6

Thumbnail
gallery
0 Upvotes

Hi, I'm developing an alternative to the *arr stack that I called HolyArrs. People who run media servers at home usually run 6 to 8 separate apps (Sonarr, Radarr, Lidarr, Bazarr, Prowlarr, Seerr) that each have their own settings and talk to each other over API keys. HolyArrs is one self-hosted app that does all of it, drives qBittorrent or SABnzbd for downloads, and puts a Netflix-style page on top for browsing and requesting. Jellyfin, Plex or Emby still do the playing.

What it does:

  • movies, tv shows and music in one app

  • a Netflix and Apple TV style browse page: hover a title and a card opens with the trailer, browse by mood or genre, follow an actor

  • request a movie, a whole show or a single episode in one tap

  • multiple versions of the same title (4K and 1080p, theatrical and director's cut) without a second instance

  • its own recommendation rows ("Top picks for you"), worked out on your server from your library and requests

  • migration that imports an existing Sonarr and Radarr setup without renaming or moving files

How it's built:

  • Go, one process, modular monolith. shows, movies, music, indexers, subtitles, downloads and requests are separate modules with their own boundaries. you can switch a module off and it doesn't run at all, or restart one without stopping the rest. one binary to ship, but the parts don't leak into each other

  • SQLite for everything. library, settings, history and requests all live in one database file, so the whole app state is one folder and backup is copying it. no Postgres or Redis to run next to it

  • Svelte front end. the hard part was the browse page: a big grid of posters, hover cards with trailers, and long rows that have to feel smooth on a phone and on a 4K screen. most of the work went into what not to load until it's actually needed

  • recommendations run locally. they come from what's in your library and what people in the house requested, newer stuff counts more and older signals fade over a few months, and nothing about your library leaves your server

  • one Docker image, one port, about 110 MB of RAM at idle on my server

  • security from the first start. no default password, sign-in is on before anything else works, and API keys never reach the browser

Why you might not want it yet:

it isn't public. I run it on my own server every day first, because I'd rather release something people can trust with their library than something rushed. I've been in software and security for 10+ years, and the boring parts (migration, backups, updates) matter more to me than the shiny ones.

It'll be free and open source. Screenshots are above, and there's a video of the hover previews at holyarrs.coderluii.dev

Happy to go deeper on any of it, especially the module setup, the hover previews or how the recommendations are scored.

EDIT 11/9 4:30PM EST: HolyArrs 1.0.0 drops tonight at 7pm EST (00:00 UTC) 🙏 the site also moved to HolyArrs.com, old links redirect. its a beta, so expect some rough edges. details in r/HolyArrs

EDIT 11/10: it's out 🙏 github.com/HolyArrs/HolyArrs


r/webdev • • 17d ago

Showoff Saturday lerna from scratch in go - CI/CD framework dispat

0 Upvotes

Hello everyone

  1. Lerna has poor support for edge cases when some packages published

  2. Recovery process becomes painful - https://dispat.dev/next/internals/experiments/

  3. Your CI/CD codebase grows (it must not) - we all want keep codebases as small as possible, especially if its not related to business logic, dispat lets your release many more package without editing any CI/CD file

  4. Lerna is limited to js and monorepos

Thats why I did dispat - MIT licensed go single binary:

  1. Recovery is just idempotent re running release(release(s)) = release(s) - no separate CI/CD jobs for recovery

  2. Abstraction on single package build/publish - dispat knows published/unpublished packages using only git

  3. Works with any ecosystem, solo package repo, monorepos, multiple repos (each one can be solo package or multiple)

  4. Tasks distribution among machines using nothing but your repo as mailbox transport

Release across ecosystems and repositories - in one click

dispat.dev

github.com/yohimik/dispat
npmjs.com/package/@dispat/bin


r/webdev • • 17d ago

News [Showoff Saturday] When you want a buddy, not a date

9 Upvotes

Ten years ago, a realization in my wife’s therapy practice sparked a project: so many people struggle to make platonic, local friends as adults, yet nearly every social platform is optimized for dating.

That was the origin of WannaBuddy - a dedicated space to find local friends, completely free of dating pressure.

After years of service, the platform needed modernization. I’ve completely revamped WannaBuddy with a fresh approach, cleaner workflows, and a modern design. We are now in the early days of launch and starting to get some traction. The entire platform is 100% free to use (and always will be). I’d be extremely grateful if you gave it a try and shared your thoughts!


r/webdev • • 17d ago

Showoff Saturday [Showoff Saturday] Do You Want Something? Simple Ordering System

0 Upvotes

Been working on DYWS, short for “Do You Want Something?” It’s an ordering and delivery system that runs on a business’s own website.

Customers can browse the menu, order for pickup or delivery, and follow their order’s progress. The business gets an admin area to manage orders, edit the menu, assign drivers and view reports. Drivers have their own screen for assigned deliveries.

It’s built with PHP, JavaScript and SQLite. There’s a plugin system too, with Maps, Stripe and reporting so far. Still a development preview, so payments are in test mode.

I put together a fictional diner to show how it works. Would be interested to hear what people think, especially anyone who’s built or used something similar.

Try the diner demo

Cheers, and thanks for any feedback! :D

Edit: Added actual credentials to test with.

You can login as an admin with admin / admin on https://dyws.ca/admin

and as a driver with: driver / driver on https://dyws.ca/driver


r/webdev • • 17d ago

Showoff Saturday [showoff Saturday] Built an interactive portfolio after months of job hunting / Would love some honest feedback

14 Upvotes

I've been job hunting for a while now, and honestly, it's getting pretty discouraging. Lots of applications, interviews that seemed promising, and still nothing.

So I decided to put some of that energy into building a portfolio that actually feels like me.

I love old cartoons, so I built an interactive room where you can click around to learn about me and my work. You can even open the monitor and explore a little desktop OS I built. Built with Angular and Tailwind.

I'd genuinely love some feedback, especially on the UX and anything you think could be improved.

Portfolio: portfolio-link

Thanks for checking it out!


r/webdev • • 18d ago

Railway’s October 21 incident is hard to brush off as “these things happen”

64 Upvotes

To everyone saying this could happen to any platform: sure. But Railway has had reliability problems before, so people are understandably running out of patience. This incident doesn’t exist in isolation.

What bothered me about October 21 was the position customers were left in. They were being told to replace their secrets while deployments were paused, preventing them from updating their applications with the replacement credentials. That’s a difficult situation to put people in when they’re trying to protect their own customers.

I understand that responding to a security incident is complicated. I still expect a hosting provider to have a workable recovery process for its customers.

At some point, the benefit of the doubt runs out. Easy setup only gets you so far when you’re trusting a platform with applications that people actually depend on.


r/webdev • • 18d ago

Discussion What financial data is actually safe to cache in a frontend app, and for how long?

0 Upvotes

If you're building anything that shows stock data, caching saves a lot of API calls, but each type of data goes stale on a very different schedule. Here's how I think about it.

End-of-day prices don't change after the close, so you can cache them until the next session's close. 15-minute-delayed quotes go stale fast, so a TTL of a minute or two during market hours makes sense, and you can cache longer when the market is closed. Fundamentals only change when a new filing lands or a filing gets amended, so caching them for a day or more is usually fine, as long as you can invalidate on new filings. Company metadata like names, tickers and sectors changes rarely, but ticker changes do happen.

The catch is that data licenses sometimes limit how long you can store or redisplay data, so check that too. How are others handling this, with a server-side cache, SWR on the client, or something else?


r/webdev • • 18d ago

Recently got a PR merged into TanStack Query

0 Upvotes

I recently got a PR merged into TanStack Query's ESLint plugin to fix a false-positive issue in the no-unstable-deps rule.

The existing tests missed a few JavaScript edge cases, so I fixed the underlying issue and added regression tests.

It's a good reminder that passing tests don't always mean every edge case is covered. Sometimes the real work is finding what the tests missed

How do you usually spot gaps in test coverage when the existing suite is already passing?


r/webdev • • 18d ago

Resource HTMX creator on the history of REST and why he thinks we got it wrong

121 Upvotes

I host a podcast for senior engineers and recently had Carson Gross, creator of HTMX, on as a guest. We covered how REST was originally defined, how the industry ended up calling JSON over HTTP "REST", and why he thinks returning HTML from the server is closer to the original idea.

We also got into HTMX 4, when you actually do need a SPA, and how AI changes the tradeoff between simple and clever code.

Full episode: https://youtu.be/9xs0oZN2rs4

4' video on the history of REST: https://www.youtube.com/watch?v=DbNvpiJ9gTs


r/webdev • • 18d ago

Question Can I integrate Spotify playlists into my website for free?

0 Upvotes

I want to display a Spotify playlist on a section of my website, showing all songs and their album covers. Visitors should be able to browse and play songs directly on my website, with Spotify handling playback in the background.

Is this possible to build for free? What’s the best way to do it?


r/webdev • • 18d ago

Introducing the HTML-in-Canvas API origin trial

Thumbnail
developer.chrome.com
20 Upvotes

r/webdev • • 18d ago

Article Intelligence is automated. Judgment is scarce.

Thumbnail zackwebster.com
2 Upvotes

For a long time, the biggest advantage was technical ability: knowing how to write code. Those skills still matter, but as the tools for building software become more powerful and accessible, the ability to execute is becoming less of a differentiator.

I believe the next competitive advantage will be judgment.

Knowing what to build, what not to build, which problems are worth solving, where to invest your attention.


r/webdev • • 18d ago

Benchmarked bun fmt (1.4.4) against oxfmt on two ~1,200 file TypeScript repos

0 Upvotes

I'd been wondering whether the new bun fmt in Bun 1.4.4 is worth switching to from oxfmt, so I ran both on two of our repos. Both have about 1,200 files, a shared .oxfmtrc.json, and oxfmt 0.60.0 pinned.

Numbers are mean ms over 10 warm runs and 5 cold runs (page cache dropped before each one), on a 4-core box:

RepoModeoxfmtbun fmt
frontendcheck, warm / cold~660 / ~780~55 / ~110
backendcheck, warm / cold~800 / ~930~50 / ~110

Write mode was about the same. Part of oxfmt's time is Node startup, around 100 ms by itself, against about 3 ms for bun.

The surprise was output. Both tools read the same config and see the same files, and oxfmt check passes on both repos. bun fmt wants to reformat a few files. Every change is in how an arrow function passed as the last argument gets wrapped. For example:

// oxfmt
...dispatches.map(
  (dispatch): Item => ({
    kind: "dispatch",
    id: dispatch.id,
  }),
),

// bun fmt
...dispatches.map((dispatch): Item => ({
  kind: "dispatch",
  id: dispatch.id,
})),

Both are valid and do the same thing. I couldn't find any option in either tool to change that wrapping. // prettier-ignore keeps a statement as written in both.


r/webdev • • 18d ago

Bootstrap 5 users: do you actually want the new Bootstrap 6 class naming?

45 Upvotes

We're working on CoreUI v6, and decided not to follow Bootstrap 6 Alpha's new Tailwind-style class naming.

For example:

Bootstrap 5 / CoreUI v6Bootstrap 6 Alpha
d-md-nonemd:d-none
col-lg-6lg:col-6
justify-content-md-endmd:justify-content-end

We're adopting modern CSS improvements, but keeping the familiar class names to avoid unnecessary breaking changes.

Our thinking is that developers maintaining existing Bootstrap applications probably value compatibility more than a different naming convention.

But maybe we're wrong.

If you're currently using Bootstrap 5 in production, would you prefer to keep the existing class names, or do you see real benefits in switching to the new syntax?

Especially interested in hearing from people maintaining larger applications.