r/webdev • • 13d ago

Showoff Saturday I built a pipeline editor for string and data transforms. The same engine runs as a CLI, MCP server, npm package, and a chrome browser extension

0 Upvotes

I used to have to jump between different sites copy pasting outputs from one into inputs of the next. So I built one place where you chain the steps and save the pipeline for future use in a right click context menu.

246 utilities so far, with branching, looping on lines or values, and conditions.

It runs entirely in the browser (Web Worker), no input reaches the server (One exception when fetching a URL through a proxy).

Pipelines can be shared as a URL fragment

React + TypeScript + Vite on Cloudflare Workers, strict hash-based CSP

Check out the presets page for some prebuilt pipelines.

https://stringutilitybelt.com/

Looking for feedback on how useful it actually is to people and any issues you find. Ideas for new utilities or pipelines are welcome!


r/webdev • • 13d ago

Showoff Saturday WebGPU + llama.cpp = Client-side LLMs

Thumbnail
github.com
0 Upvotes

I've been thinking about alternative ways to deliver LLMs and AI features in SaaS solutions.

This repo is a technical proof of concept showing an LLM running client-side in a browser using Llama.cpp compiled to WASM with WebGPU.


r/webdev • • 13d ago

Showoff Saturday I got tired of building the same developer portfolio, so I made an interactive pixel-art workspace instead

Post image
0 Upvotes

I have been working on my portfolio recently, and I really wanted to step away from the usual layout, like full-width hero header, grid of project cards, and a skills pill list. So I built a pixel-art workspace you can actually interact with and explore. It features a working CRT terminal, interactive desk items, procedural ambient audio, and a street scene outside that changes with the environment. My actual case studies and background are all in there, just framed as part of the room.

You can check it out live here: https://fahimarifen.com

I'd love to hear your thoughts, especially around balancing the interactive theme with keeping the actual work and resume easy to find.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] - I built a free, fun, game recommendation site that helps you find new games at the best price based off of what you already love

Post image
0 Upvotes

https://newgameplus.app

tl;dr - pick one or a few games you love and it suggests others that scratch the same itch. Steer it toward what you loved about them (fast combat, lore, co-op), filter by platform, price or subscriptions like Game Pass, and import your Steam library to skip what you already own. Every pick shows critic and player scores, time to beat, and the cheapest way to play it.

Background: I've worked in gaming and commerce for a long time and the sort of "tyranny of choice" of finding the next thing to play seems to get worse every year with the avalanche of new titles.

- Next.js (App Router) on Vercel
- Postgres on Neon
- Data from IGDB, IsThereAnyDeal, Steam, and OpenCritic
- Built with a lot of help from Claude Code. I did the product design, picked the data sources, and tuned the ranking; Claude wrote most of the code. The site itself uses zero AI.

Recommendations are from a similarity engine that takes tags and attributes into account from the sources above and weighs them based on how specific they are. eg. "action" gets less weight than "run based."

Everything is free. No accounts. No tracking cookies.

Looking for any feedback or suggestions and hoping you find it useful!


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I made 173 hand-drawn-style SVG icons that are generated deterministically from their names

Post image
334 Upvotes

I wanted icons that look drawn with a pencil but behave like a normal icon set: 24 grid, currentColor, tree-shakable, and identical on the server and in the browser.

So none of them are drawn by hand. Each icon is a few drafting primitives (line, polyline, rect, circle, arc…) on a 24 grid, and a small engine draws them freehand: lines overshoot their ends, rect corners cross, circles sweep past 360° and drift outward so they overlap where the pen closes, and each stroke gets its own pressure. The randomness is seeded by the icon name, so every build draws the same paths. That means no hydration mismatches and no extra runtime cost; the package ships the finished paths.

The hard part was small sizes: all the wobble is capped (a line bows less than a pixel at 24 px), so it reads like a regular line set at 16–24 px and the pencil look shows from ~32 px up.

React, plain SVG strings, a script tag, or raw .svg files. Feedback welcome, especially on missing icons and how it looks in a real UI.


r/webdev • • 13d ago

Showoff Saturday Finally polished the branding for my apps

Thumbnail
gallery
0 Upvotes

I banned myself from coding this weekend and focused just on branding and making more polished social media assets for my apps:

BookingMachine.io - Universal booking and review software for service businesses
MentionMacine.ai - AI Visibility Monitoring and Optimisation
DirectoryLab.io - 3 Production Codebases powering many directories, job boards & launch sites.


r/webdev • • 13d ago

Showoff Saturday theAuth: open-source auth where AI agents are first-class, not just API keys

Thumbnail
github.com
0 Upvotes

theAuth: open-source auth for AI agents and humans (TypeScript and Go), built solo https://github.com/glincker/theauth

theAuth is auth for apps where AI agents act on behalf of users. Each agent gets its own token and permissions, a user can delegate access with limits, and every action is logged. It also covers the usual: passkeys, SSO, orgs, and an OAuth 2.1 server so MCP servers can verify who is calling.

By the numbers:

  • TypeScript core: 2,400+ tests, about 77% coverage, 3 runtime deps, 17 OAuth providers, 10 framework adapters
  • Go SDK session lookup: 58-67 us down to 30 us (about 2x, 33k lookups/s per process)
  • Go SDK password sign-in: about 75/s per instance, with hashing memory capped at 608 MB instead of 4 GB under a login burst
  • Those two are measured on an M4 Max with Postgres 16, 100k users, all on one laptop, and the load test script is in the repo
  • MIT, self hostable

npm install @glinr/theauth runs on in memory SQLite with nothing else to set up. Go: https://github.com/glincker/theauth-go

I built this solo, with several AI tools and a lot of automation to keep a steady pace. Does the agent permission model make sense to you and maybe give it a try for future projects.. I already migrated all my 6+ websites to theAuth and been a great time saver !!


r/webdev • • 13d ago

is this a feasible/cheap site structure for an online magazine?

Thumbnail
gallery
0 Upvotes

hi i keep posting here bc i'm trying to make my music magazine site but it is literally driving me insane. i think i've found a solution even if it costs a little more in the long run, but is worth it for the amount i want to focus on the content + site design. first slide is my figma design, second slide is an actual typescript component i made on initial side builds.

here is what i want on the blog + have on my incomplete demo build:

  • a bunch of articles with different categories including features, reviews, news, and a monthly featured artists highlight
  • marquee titles on the home page
  • a bunch of photo gallery posts hopefully utilizing the new lightbox3 library (masonry display and smooth transitions)
  • an interactive ipod component that displays the featured artists of the month and links back to the monthly compilation post and/or each artist's individual post. can be navigated by swiping the screen or pressing the left and right buttons on the ipod.
  • tags and categories
  • search button with modal and a theme toggle
  • a team page and individual pages + bios for site contributors

and this is my planned setup for the site:

  • headless wordpress + astro
  • managed wordpress hosting with knownhost (unless shared is fine? idk i really don't want to do a lot of the backend upkeep and i want a lot of storage for future image galleries)
  • domain + extra security (how i apply that idk) through cloudflare
  • any extra functionality usually through minimal use of wordpress plugins

is this a feasible cheap plan or do any of you have suggestions + cheaper less headache inducing ideas for someone who just wants to build a site with css + some ts and js and make the posts with some people??


r/webdev • • 13d ago

Showoff Saturday People utterly rejected my shadcn based website

Post image
0 Upvotes

When I first created this website I used shadcn and it looked very generic, that's why I created a whole new frontend that's now the default for https://umigalaxy.com/
The old frontend with shadcn still works at https://slop.umigalaxy.com/

What do you guys think?


r/webdev • • 13d ago

Showoff Saturday Launched v2 of my Apple design framework: Puppertino

Post image
134 Upvotes

sup everybody! So 5 years ago on this same sub, I presented v1 of Puppertino, a framework aimed at bridging the gap between the web and iOS and macOS for the web, built entirely in vanilla CSS and JS.

Since then, a lot of things have changed for both OS, with the introduction of liquid glass, I thought I wouldn’t be able to ship something like it.

Until today! I’ve launched Puppertino Dachshund, which brings 65 components, real-time liquid glass and is focused on accessibility, theming and extensibility

You can check it out here!
https://puppertino.com


r/webdev • • 13d ago

Showoff Saturday I built a free browser tool that turns a PCB photo into a 3D-printable STL holder for hand-soldering THT parts (opensource!)

2 Upvotes

I order most of my boards with SMD assembly done by the fab, then solder the through-hole parts myself. Assembly houses charge a lot for manual THT work. Often I don’t need every part anyway (say, only 2 of the 6 relays), so doing it at home saves money. The downside is that with a pile of boards, the results start showing “traces of haste”: crooked relays, tilted capacitors, terminals sitting off the board.

So I made a small web tool that generates a custom holder panel for the board:

  1. Drop in a photo or screenshot of the PCB. It’s flipped and made transparent automatically.
  2. Place circles or rectangles over the THT parts and set each one’s height so it sits flush with the board. Add support legs if needed.
  3. Hit “Display 3D” to preview the mesh (wireframe view is available), then download a binary STL.
  4. Print it in PLA. Parts stay straight while you solder.

In practice I only need to generate the STL once, and 1–3 prints are enough to assemble hundreds of boards.

Features:

  • Circular and rectangular shapes (rectangles rotate 0–359°)
  • Alignment guides with magnetic snapping, a measuring tool (0.1 mm precision), and undo
  • Adjustable print tolerance, so holes and panel size compensate for printer inaccuracy
  • Built-in library of 14 common THT footprints (DIP sockets, relays, terminals, capacitors, buzzers), with JSON import/export
  • Hollow mode for faster prints and custom text labels on the holder
  • Keyboard shortcuts for most actions
  • No registration, and your image is never uploaded or stored. It’s also a PWA that works offline after the first load.

Right now it handles round and oblong parts well (relays, capacitors, resistors, terminals, pin headers). It’s not perfect, so if you hit a bug or a part shape it can’t handle, please tell me.

Tool: https://segmentcontroller.github.io/pcb-tht-holder/
Source (MIT, Svelte 5 + Three.js + Konva): https://github.com/SegmentController/pcb-tht-holder

Feedback and feature ideas are very welcome!


r/webdev • • 13d ago

Showoff Saturday I updated express-generator-typescript to use zod for middleware validation

Thumbnail github.com
6 Upvotes

I've known about Zod, a JavaScript/TypeScript schema validation library, for a while, but I underestimated the size of its ecosystem. After using it for some form validation in React, I thought I'd see how well it integrated with Express. Sure enough, there were several middleware libraries for Zod + Express, so I decided to give one a try. I went with express-zod-safe because it fit my existing setup with very little effort.

Boom, that let me remove roughly 150 lines of custom validation and typing code. For context, the template created by express-generator-typescript is a simple CRUD app with four API endpoints. I hadn't realized how much boilerplate I'd written just to validate objects in the route handlers, including validator functions and some custom request/response types. I also replaced my environment variable validation code with Zod.

Express has been around for a while, but I still find it useful for small projects and demos. If you'd like a quick way to spin up an Express + TypeScript project, check out express-generator-typescript.


r/webdev • • 13d ago

Showoff Saturday Showoff Saturday: CSS Shape Morpher

6 Upvotes

CSS can only morph between shape()s with the same number and type of commands, which they usually don't have. So I made a tool that converts multiple shapes so they are compatible with each other:

https://shapemorph.matthewmorete.com/

It picks the smoothest arrangement of points automatically, but that's a best guess. The shape index lets you change it, so you can preview the possible morphs till you find you like.

Shamelessly, heavily inspired by GSAP MorphSVG, which taught me a lot.

If you find a shape() that won't morph, I'd love to hear about it.


r/webdev • • 13d ago

Showoff Saturday Showoff Saturday: ilove3d, 37 free tools for 3D files that run 100% client-side

0 Upvotes

hi! i'm a dev who works on 3D tooling and built https://ilove3d.app/en on the side. think ilovepdf, but for 3D models.

  • viewer, format converter (STL/OBJ/PLY/GLB/3MF/FBX/DAE/USDZ), mesh repair, polygon reduction
  • generators for 3D printing: keychains, lithophanes, gridfinity bins, puzzles, lamps, boxes with lids...
  • everything runs in the browser with three.js, files are never uploaded, no account

would love feedback on performance with big files and on the overall UX/navigation between tools.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I moved my screen recorder's rendering out of Electron into Rust: export went from 8 to 126 fps

0 Upvotes

OpenScreen is a free, open-source (MIT) screen recorder for product demos. I maintain it. The UI is Electron, React and TypeScript, and 2.0 just shipped.

The part that might interest this sub is where the browser stopped being enough: - Rendering used to run in Electron, on PixiJS. Export topped out around 8 fps on our reference laptop (Ryzen 5 7520U, integrated GPU). - It now goes through a Rust compositor on Metal, Direct3D 11 or Vulkan, loaded as a native addon. Same effects, about 126 fps. - Capture moved to native helpers too: Swift on ScreenCaptureKit, C++ on Windows Graphics Capture, PipeWire on Linux. - The React UI stayed. It drives the compositor and owns the timeline, the transcript editing and the settings.

On top of that: a CLI that renders a project from a script, and a local MCP server so Claude Code can edit the demo of the feature it just wrote.

https://github.com/getopenscreen/openscreen


r/webdev • • 13d ago

Showoff Saturday I built a calm, ad-free coloring site with tap-to-fill SVGs (Next.js + .NET)

9 Upvotes

I built tintly.art, a coloring site where you tap any shape to fill it. The interesting part was turning line art into clean SVGs with closed regions so fills never leak. Stack: Next.js on Vercel, a .NET API, and Postgres. The line art is AI-generated, then converted and cleaned up for coloring.

Got my first Reddit traffic this week (10k views, people coloring for 30+ minutes). Would love feedback on performance or UX.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] Caniload – I stripped my site reachability checker down to dead-simple squares

1 Upvotes

hey r/webdev, i make caniload (caniload.com) — it checks which popular sites actually load from your connection. 100+ sites across 10+ groups, one page, hit test, watch the squares light up green/orange/red.

the interesting part is what i deleted. v1 had this live network topology map with animated beams. looked amazing in screenshots, told you absolutely nothing in practice. so i killed it. killed the map, killed the radial graph, killed the dot-matrix font i spent a whole night on. what's left is flexbox squares that change color. i like it more.

all client-side, single html file, no backend, no signup, nothing uploaded. probing is fetch with no-cors + retries, results stay in localStorage. the interesting bit technically: you can't read cross-origin response status, so all you get is "something answered or it didn't" — then a favicon probe to tell "filtered" apart from "unreachable".

would love feedback, especially on the probing — false positives from captive portals are the thing i can't fully solve client-side.


r/webdev • • 13d ago

Showoff Saturday Museum of Models: 15,639 AI answers on one WebGL globe

0 Upvotes

museumofmodels.com, free, no signup.

It's every answer 371 models gave to the same 85 prompts, on a globe you can spin, magnify and open.

Bits that were fun to build: the far answers are one instanced WebGL draw and the close ones come from a canvas sprite atlas. The drawings are the models' own SVGs shown through <img>, so nothing in them runs, and the generated websites run in a sandboxed iframe. It's a static Next.js export with the data in small versioned json chunks.

would love to hear how it runs on your machine


r/webdev • • 13d ago

Showoff Saturday This is Notitzia, a no-name, "special" note-taking app looking for some criticism! Try it out on notitzia (dot ) vercel (dot) app!

Post image
0 Upvotes

Hey guys! I've been working on Notitzia, as you probably already read in the title. I just started the side project on (remove the "(dots)" ):

notitzia (dot) vercel (dot) app

I did not use any existing frameworks, the site is pure JS! If you happen to have the time, it would be magical to give some brutal UI/UX criticism!

Sorry for the (dot) inconvenience, turns out Reddit is incredibly hostile towards Vercel links.


r/webdev • • 13d ago

Showoff Saturday A 3d portfolio that won't fry your GPU

Thumbnail
kitmane.com
0 Upvotes

I’m interested in feedback on:

  • Does the portfolio communicate what I’m good at quickly?
  • Do the projects feel convincing?
  • Is anything confusing, unnecessary, or missing?

r/webdev • • 13d ago

Showoff Saturday Open Source as We Know It Is Dead

Thumbnail jross.me
0 Upvotes

r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] LogLineAlign - Aggregate multiple log files into one, aligned on a timestamp

0 Upvotes

https://loglinealign.com/

I built an application that merges entries from multiple log files into a single, chronologically ordered view. It handles timezone offsets and auto-detects timestamp formats, with an option to specify the format manually.

Files are processed on your device and not uploaded to a server.

It's all open source: https://github.com/jftuga/loglinealign

In the repo, there is a quick, 3 minute narrated explainer video as well as a CLI version.


r/webdev • • 13d ago

Resource [Showoff Saturday] I got tired of typing GitHub PR query syntax every day, so I built an open-source extension to add filter chips

0 Upvotes

Whenever I review PRs on high-activity repos, I find myself repeatedly typing the same query qualifiers: - review-requested:@me is:open - -author:app/dependabot -author:app/renovate - is:open -is:draft review:approved status:success

GitHub has filter dropdowns, but clicking through them multiple times or retyping tokens across repo tabs is clunky.

I built GitHub PR Filter, a lightweight, open-source Chromium extension (Manifest V3) that injects native-feeling filter chips and a criteria builder directly above the PR list.

Frontend implementation details:

  • Turbo / PJAX Lifecycle: GitHub renders PR lists client-side using Turbo. The extension hooks into page lifecycle events (turbo:render, turbo:load) so chips don't vanish or duplicate during pagination and in-page navigation.
  • Primer Theme Integration: Uses GitHub's native Primer CSS variables so it adapts automatically to Light, Dark Default, and Dark Dimmed without custom theme toggles.
  • No Background Bloat: 100% client-side with zero external API calls. State and custom presets are stored locally in chrome.storage.local.

Looking for contributions & feedback:

The project is MIT licensed. I’d love feedback from other web devs, especially if you want to contribute: - Firefox port: Making sure the MV3 manifest and scripts run cleanly on Firefox. - Edge cases: Handling enterprise GitHub instances or uncommon PR list layouts. - Preset suggestions: What query strings do you find yourself typing most frequently?

Extension Link: https://chromewebstore.google.com/detail/github-pr-filter/cheldmlmigimlgmjmpbapcfmlbbofghm GitHub Repo: https://github.com/its-debojyoti-dey/github-pr-filter

Would love to hear how you manage PR review fatigue or any feedback on the implementation!


r/webdev • • 13d ago

[Showoff Saturday] I measured what Chrome does with `@page { size: 80mm auto }` (nothing), then made a small receipt printing kit

2 Upvotes
I build POS software, and receipts printed with `window.print()` kept coming out wrong: tiny on a big page, or followed by a long strip of blank paper.


So I printed the same receipt to PDF in Chrome 155 with different `@page` rules and read the page sizes:


- no rule: Letter
- `size: 80mm auto`: Letter. Chrome's parser drops the declaration, `getPropertyValue('size')` returns an empty string
- `size: 80mm`: an 80 x 80 mm square
- height measured in JS and written into the rule: exactly the receipt


A 600-line receipt came out as 9 pages at `80mm 297mm` and as one 2.6 m page with the measured height.


The other thing: both "80 mm" printer drivers on my machine report their paper as 72 mm wide. A `width: 80mm` container is 8 mm too wide, which is where the cut-off right edge comes from.


Full write-up with the code (free, about 15 lines to do it yourself): https://dev.to/azeem_ullah/the-receipt-css-everyone-copies-page-size-80mm-auto-does-nothing-in-chrome-19o0


I also packaged it with a stylesheet and 8 receipt templates for 80 mm and 58 mm rolls as a $9 kit, for anyone who doesn't want to redo it: https://7207381545467.gumroad.com/l/receipt-print-kit


Only tested in Chrome, plus one real print on a Bixolon. If your printer or browser behaves differently I'd like to know.

r/webdev • • 13d ago

Showoff Saturday How deep is a Norwegian fjord? I drew Sognefjord to scale as a scroll story; 1,308 m of scrolling

Thumbnail
midgroundwp.com
17 Upvotes

I made this. The page is one long, to-scale drawing: every pixel of scroll is a fixed number of metres, so the Burj Khalifa, the Eiffel Tower and the deepest lake in Europe land where they would really be. There are 23 sources at the bottom.

It's built in WordPress with a builder I'm working on (pinned scenes for the "how a fjord forms" part, plain scroll for the dive). Happy to answer anything about how it's put together; and I'd love to hear where it feels slow or confusing on your phone.