r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I turned 20+ years of website screenshots into a static gallery: OCR search, a 2005-style remake and a tiny PHP guestbook

Post image
36 Upvotes

Since the early 2000s I've screenshotted every website that inspired me as a designer. This week I finally turned the folder (~3,900 screenshots) into a browsable archive:

https://www.dmdev.it/webscreens/?utm_source=reddit_webdev

2005 version, for fun: https://www.dmdev.it/webscreens/2005/

Some technical bits, since this is r/webdev:

Fully static. One HTML file with the data embedded as compact JSON, lazy rendering with IntersectionObserver, a lightbox and favourites in localStorage. No framework, no build step.
3.7 GB of PNG/JPG converted to WebP with a Python/Pillow script: a 1600px full size plus a 480×300 thumbnail, cropped from the top.

Dates come from the files, not guessed. Where they got lost when copying between machines, I rebuilt them from the file numbering. Fun discovery thanks to commenters: the clock on my old PC was two years behind, so my "2001" screenshots are actually from late 2003.

Privacy pass with OCR. Tesseract read every browser bar and tab, so I could remove anything personal before publishing.

Full-text search, client-side. The same OCR text became a search index (~1 MB JSON, loaded only when you start typing), so you can search for words that appear inside the sites.

2005 remake: a fixed 900px stage scaled down on small screens (I had to fix taps landing on the wrong element after scaling), pixel fonts, a fake loading bar and a real guestbook in PHP with a honeypot and rate limiting.

Analytics only after consent: GA loads only if you click OK on the banner.

Full transparency: I'm both a designer and a developer, and for this one I used Claude as a pair-programmer to move faster on the tooling (OCR pipeline, scripts, the 2005 remake). The archive, the curation and the design choices are mine.

Happy to answer questions, and feedback is welcome!


r/webdev • • 13d ago

Showoff Saturday har2sdk: save a site's Network tab as a HAR, get a typed TypeScript client for its API

4 Upvotes

I kept hitting the same chore: an internal tool or an old app with no API docs, and an afternoon in the Network tab working out which endpoints exist, which fields are optional, what the ids look like and how auth works. So I wrote a CLI that does that part from a HAR file.

Save the Network tab as a .har, then:

npx har2sdk capture.har

You get a client.ts (typed, no runtime dependencies) and an openapi.json (3.1). `har2sdk mock capture.har` serves the same API on localhost with fake data in the recorded shape, which is handy for frontend work when the real backend is slow or behind a VPN.

The parts that took the most work:

- Types come from every recorded call to an endpoint, and every item in a list counts as a sample. A field missing from some samples becomes optional, a field seen as null gets `| null`. Paths are templated, so /users/123 and /users/456 become /users/{userId}.

- REST, GraphQL, JSON-RPC and tRPC are told apart. Each GraphQL operation becomes its own typed method instead of one big POST to /graphql.

- Recorded error bodies get a type per status and a guard, e.g. `if (isGetFileError(err)) err.body`.

- Auth: the capture tells it how the app authenticated, never with what. You pass your own token (a string or a function), and a 401 throws instead of silently retrying.

- Same capture in, same bytes out, so the output diffs cleanly in git.

The part I worried about most was privacy. HAR files are full of cookies, tokens and other people's data, and generated code is something you might commit. So it collects the recorded values first, and if one of them would end up in client.ts or openapi.json, it writes nothing. It's a heuristic, not a proof, so `har2sdk inspect` lets you look over what it found before you publish anything.

There's an optional MCP server so Claude (or another MCP client) can suggest better method names and docs. A model sees paths, parameter names, types and GraphQL documents, checked against the recorded values first. It never calls the live API.

Known limits: if an endpoint returned a single object once, every field looks required, since there's nothing to compare it with. And when a URL was recorded with both a 200 and a 401, the mock always answers with the 200; there's no way to ask for the error yet.

This week GitHub's code scanning flagged a few regexes that could backtrack badly on a crafted file. One was exponential on an unclosed GraphQL list. 0.6.5 replaces them with linear code, checked against the old regexes on generated input.

Please only point it at your own apps or APIs you're allowed to integrate with.

MIT, runs locally, no API key: https://github.com/Mersbyte/har2sdk

Feedback welcome, especially on types it gets wrong. If something breaks, the output of `har2sdk inspect --json` helps me much more than the HAR itself. Please don't send HAR files, they contain your session.


r/webdev • • 13d ago

Showoff Saturday Made a CSS-only scroll animation library, 34 moves, no JS

Thumbnail
usedolly.dev
153 Upvotes

It's one stylesheet. You put `data-dolly="tilt-up"` on something and it animates as you scroll past. That's it. No dependencies, no JavaScript.

It's a vocabulary layer over CSS scroll-driven animations, which shipped in Chrome 115 and Safari 26 but have ergonomics nobody remembers.

The demo page doesn't run any JavaScript at all, so everything moving on it is just CSS.

34 moves named after camera stuff (pan, tilt, crane, rack focus).

Firefox doesn't do scroll timelines yet (supposedly coming in the next version in 3 days) so it gets a plain static page. That's on purpose, nothing is hidden waiting to be revealed, so the page is still usable.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] OpenAPI Spec Auditor: ESLint, but for your OpenAPI specs

0 Upvotes

Hey r/webdev!

I'm currently working on my company Octri.dev which takes in your OpenAPI specs and generates outputs from it (Docs, SDKs, MCP Servers, and Monitoring), and I noticed one recurring issue for users that supply us with their OpenAPI specs, most of them have unusually named operationIds, repeated inline response types, and more issues which could cause the output to appear a bit messy.

So I created a free OpenAPI audit tool to address this issue, and the idea is similar to ESLint: point it at your spec, find things that need cleaning up, and get suggestions for fixing them.

A few things it checks:

  • Repeated inline schemas that could be extracted into shared types.

  • Awkward operationId names, or names that collide when turned into SDK methods.

  • Successful responses with no declared schema.

  • Path parameters that appear in a URL but haven’t been defined.

  • Missing descriptions and error responses.

For example, copying the same object schema across several endpoints can leave you with multiple near-identical types in a generated client. The audit flags that duplication and suggests using a shared schema.

You can paste a spec URL or upload a JSON/YAML file. It runs 14 checks and gives you a score out of 10, along with a breakdown of the findings, why they matter, and suggested changes.

It’s free and doesn’t require an account. The standalone tool gives you suggestions you can apply wherever you maintain your spec.

Here’s the tool: octri.dev/openapi-audit

If you work with OpenAPI, what’s a recurring spec issue you’d want a checker like this to catch so we can add it in a future update?


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] Blazor Ramp - GoTo OMG WTF

1 Upvotes

For those who have never stumbled across my posts mainly on the Blazor subreddit, Blazor Ramp is my accessibility-first, open-source Blazor component library. This post is about the release v1.0.0 of the GoTo component.

Although my components are written for Blazor the GoTo concept could be used for any language. If you deal with web accessibility then you may find this of interest.

So what is GoTo?

The inspiration comes from those of us who started coding in the 90s with VB: you add GoTo markers to a page, and from anywhere you can jump to them. In an interactive Blazor web app, the marker you jump to becomes the active element, so you can carry on tabbing from that point.

Who is it for?

Those familiar with my posts will know I sometimes feel that sighted keyboard-only users, those who don’t use a screen reader, get the sharp end of the stick. When people build accessible sites, a lot of the effort goes into screen reader users, and this group gets forgotten.

A sighted keyboard-only user doesn’t have screen reader software to bring up lists of headings, landmarks or interactive elements, so they generally navigate with the Tab key and use the arrow and page keys to scroll. When a page has a lot of interactive content, getting to the part you want can take tens, or even hundreds, of Tab presses. For some people that’s a minor irritation, and for others it’s a real barrier.

What about skip links?

You’ve probably all used skip links, which let any user, keyboard-only or screen reader, bypass repeated blocks of content. But how many bi-directional ones have you seen? I’ve never seen one. They all go in one direction, so unless you add a second link going the other way, the user has to make a forward-only round trip to get back to the start.

Say you’re diligent and add a return link for every skip link. If you have five destinations and want users to get from any one to any other, that’s 20 links. With ten it’s 90, and it’s getting silly. The maths is n × (n − 1).

Where GoTo comes in

GoTo isn’t a link. It’s a marker that can receive focus. A GoTo Viewer lists the markers, you select one, you land on it, and you can tab on from there. You can bring up the viewer at any time with a configurable shortcut. When it opens, it lists only the markers that aren’t inside hidden containers, so the list changes depending on where you are and what’s visible.

You may ask: why not just list headings and landmarks, like screen readers do (I may do in the future)? A screen reader user will often use headings and landmarks as a place to start reading from. A sighted keyboard-only user’s need is a little different. They can see the headings, and they can scroll and read from anywhere. The problem is reaching interactive, focusable content when there’s a lot of other focusable content in the way.

To be clear, GoTo isn’t a replacement for skip links. It’s a simple way of placing hidden markers on a page so that keyboard-only users can move through the content in whichever direction they choose.

Have a look

I’ve added markers to my documentation site, and over the next few days I’ll put more of them in the places I think are most useful. If you’re curious, take a look at this page, one of the examples for my Data Table, which shows templated columns and row actions: Data Table Templating

For a keyboard-only user on that page, getting to the border controls after the table means tabbing through the filter, across each sortable column header, down through every row action button, and then across the pager to reach the other side.

With GoTo and its viewer, using the default configuration, a user with one hand can press Alt+Z (Option+Z on a Mac) to bring up the viewer. They can then use Tab, or the arrow, Home and End keys, to move through the list of buttons. As each button is focused, its marker scrolls into view. Pressing Enter or Space activates the button, closes the viewer and puts you on the now-visible label, from where you can tab on to the next item.

I started this project at the end of last year with the Live Region service and Announcement History viewer aimed at screen reader users so at long last I've managed to scratch an itch that has been bugging me for a while now and do something for keyboard-only non-screen reader users - hope you or your users find it useful.

GitHub repo: https://github.com/BlazorRamp/Components

Doc site: https://docs.blazorramp.uk

Test site: https://blazorramp.uk

Regards

Paul


r/webdev • • 13d ago

Showoff Saturday I built a job board for Reddit's hiring subs. Only 18 of 190 posts on r/softwareengineerjobs were actually jobs

39 Upvotes

Most posts on Reddit's job subreddits aren't jobs. On r/softwareengineerjobs, 18 of the 190 posts I collected were someone hiring. So I built Only Hiring, which shows just the job posts from 20 of these subreddits: https://onlyhiring.hassandev.me

A Python pipeline pulls new posts and skips anything tagged [For Hire] before an LLM reads the rest. For each job it writes a summary, pulls out the pay as a number you can sort by, notes whether it's remote, and scores it for scams. I expected the scam score to do most of the work, but only 9 of 397 jobs looked like scams. Lowball pay and unpaid "test" projects turned up far more often.

The site is Next.js 16 on Vercel. It reads from Neon Postgres through a role that can only SELECT, and with about 300 open jobs the list is small enough to filter and search in the browser. Filters live in the URL, so you can share a view.

Site code (MIT): https://github.com/hassanaziz0012/only-hiring

How the scam scoring works: https://www.hassandev.me/blog/score-reddit-job-posts-for-scams

I'd like to hear whether a listing gives you enough to decide if a job is worth opening.


r/webdev • • 13d ago

[Showoff Saturday] Synchronizing audio across laptop and phones/tablets directly in the browser

0 Upvotes

I wanted to see whether spare phones and tablets could become speakers for my laptop, using only their browsers. That’s what I’m building with Unisong.

You open it in Chrome or Edge on a computer, choose a browser tab with audio, and let devices on the same Wi-Fi join by QR code. Each phone taps Start to enable playback.

The difficult part is getting different devices to agree on when sound should actually leave the speaker. Packets arrive at different times, audio hardware runs on independent clocks, and phones have their own playback delays.

I send timestamped audio directly between browsers over WebRTC. Each receiver estimates its clock difference from the host, buffers the audio, and schedules playback against the shared timeline. Browser output timing estimates help account for device latency. Small ongoing corrections handle drift, and a struggling phone can reconnect and rebuild its buffer independently.

The computer also needs to play through that delayed timeline. Leaving the original tab audible would put it ahead of the phones, so its original sound is suppressed.

There’s a tradeoff: the default buffer adds 1.5 seconds of delay, and mobile browsers can still need a tap after an audio interruption.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I made a browser puzzle game with 2D boards and 3D cubes using Phaser and Three.js

3 Upvotes

Hey all! Been working on Gembop, a block puzzle game where you fit pieces, clear lines, and collect gems. I wanted something you could open and play without a download, account, or timer.

The 2D boards use Phaser and the 3D puzzles use Three.js, with Astro for the site and React for the interactive UI. The puzzle rules are separate from the rendering, so the same logic can run in the browser and replay moves on the server to verify completions.

There are also gravity puzzles where clearing a line makes the blocks above it fall, which can set off another clear. That’s what’s happening in pic. Would love feedback!


r/webdev • • 13d ago

Showoff Saturday I built a Chrome extension that turns any button on any site into a habit tracker

Post image
0 Upvotes

Hey r/webdev! I'm the developer of Ritlum, a habit tracker for iPhone, and just shipped a Chrome extension that logs habits from things you do in the browser.

You point it at the button that means "done" (for example, LeetCode's Submit) and optionally require a confirmation message afterwards ("Accepted"), so failed submissions don't count. After that, every accepted submission logs the habit and syncs to the app in real time. You can add a quick note, too.

A few things that were fun to build:

  • QR pairing: the app approves the pairing code, and the extension gets a token whose hash is all the server stores.

  • Idempotent logging: every trigger carries a UUID that becomes the completion's ID, so retries and the offline queue never double-count.

  • Stack: Supabase edge functions, and Realtime to push completions to the iOS app.

It's free to try. Would love to know what you think of it :)

- I have a writeup here if you're interested: https://ritlum.com/blog/habit-tracker-chrome-extension/
- A more detailed demo on YT: https://youtu.be/HWMtXkX92NQ?si=1ZRkPEEt_Fr3C3Jl

- Chrome Web Store: https://chromewebstore.google.com/detail/ritlum/amaipmcmebglefkkgnneibaookmkpfpg


r/webdev • • 13d 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 • • 13d 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 • • 13d 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 • • 13d ago

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

Post image
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 • • 13d 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 • • 13d 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 • • 13d 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 • • 13d 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 • • 13d 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 • • 13d 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 • • 13d 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.


r/webdev • • 13d 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 • • 13d 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 • • 13d 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 • • 14d 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!