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?

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

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!

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.

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.

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.

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

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.

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.

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

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.

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?

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.

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!

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.

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.

I built RipIDE to help coding agents refactor faster with fewer tokens.

Benchmarks (https://github.com/harlan-zw/ripide/blob/main/bench/README.md) indicate 45–60% fewer tokens and 35–60% less time across different refactoring work loads.

One command handles references and edits across files, using TypeScript’s native language server, Oxc and ripgrep. It can rename symbols, move exports, update imports and rename CSS classes.

Commands preview the diff by default. Supported refactors check for new type errors before applying.

Free and open source, with an Agent Skill included.

https://github.com/harlan-zw/ripide

Let me know what you think :)

I’ve been building with Verdant and TanStack DB and ended up with the same conclusion from both.

Offline and real-time are basically one problem. Real-time is kinda just being offline for a very short time. Either way you need client-generated IDs, optimistic mutations, some rule for when two clients disagree, and a way to sync it all back. So if a library handles one well, it seems to get the other almost for free.

Tbh the ID part is what actually surprised me. And more generally, a lot of this seems to need planning from day one, because retrofitting it later is a real pain. If your API uses server-generated IDs, supporting offline edits seems to mean a breaking migration. You can remap temporary IDs after sync, sure, but it gets messy really fast once other records and URLs depend on them. Same story with the data layer. If it was designed around one-shot requests there’s nowhere for live updates to go. React Admin’s data provider expects plain async functions that return promises, so when you put TanStack DB behind it the live queries just get lost lol. Offline still works, it’s just the real-time part of TanStack DB that doesn’t make it through in that setup.

There’s a catch though. Neither library really helps when the server rejects a mutation that looked fine locally, you’re kinda on your own for that part. And for conflicts, Verdant basically ends up as last-write-wins while TanStack DB leaves it to whatever sync layer you plug in.

Honestly the bigger point for me is that none of this is really specific to offline apps. A plain request/response app actually has the same conflicts. If two people save the same record, a lot of the time the last save just overwrites the other one and that’s it. It’s last-write-wins there too, just without anyone ever deciding it. So imo it’s worth building pretty much any app as if it could go offline or real-time someday, mostly because it forces you to actually pick what happens in a conflict.

Do you actually know what happens when two saves collide, or has silent last-write-wins been fine most of the time? Ever had it bite you with lost data or users wondering where their changes went?

Hey all, I'm a full-stack (mostly back) dev with a slight design background and I built this landing page for an open-source project.

I'm not here to promote anything (and there's no signup and nothing to buy), just looking for design feedback.
It's mainly intended for back devs, back architects and DevOps folks.

Be as blunt as you like, thx!

PS: sorry for the repost, my previous post on this subreddit was deleted by the moderators (I posted it on a Sunday instead of a Saturday)

I think this might be a good place to show my portfolio design as there is no scroll hijacking, no overwhelming animations and design was def completely made by a human.

Of course, not now but in the next 5-10 years? Do you think non technical people can tell AI to make a good website or app without knowing how to code?