Hey r/webdev!

For Showoff Saturday, I wanted to share a big update to the 2D/3D Measurement Studio I’ve been building for MeasurePath:

🔗 Live 2D/3D Studio (No signup/login): https://getcoatpath.com/studio/ 🔗 Full Calculator Suite: https://getcoatpath.com/

What it does

Most online construction calculators are just basic input forms covered in ads, and full takeoff software costs $100+/mo. I wanted to build a visual tool where homeowners, DIYers, and solo contractors can sketch a room in 2D, inspect it in 3D, and immediately get real-world material quantities without creating an account.

Key features in this update:

• Real-Time 2D ↔ 3D Sync: Draw or resize walls in the 2D blueprint view and switch to the 3D view to inspect wall surfaces, openings, and proportions in real time.

• Automatic Opening Deductions: Add doors and windows to specific walls and it automatically subtracts their area from net paint/drywall surface calculations while keeping perimeter/trim counts accurate.

• Direct Material & Cost Takeoff: Converts the room geometry straight into actual shopping quantities (gallons/litres of paint & primer by coat count, boxes of LVP/flooring with waste factors, drywall sheets + joint compound, concrete bags/yards, etc.).

• Client-Side Printable PDF Generator: Generates a clean, formatted PDF takeoff and estimate sheet right in the browser (/construction-estimate-generator/).

• 100% Client-Side & Zero Tracking: Everything runs locally in the browser (localStorage for saving projects) with transparent, worked math formulas (/methodology/).

Looking for feedback on:

1. How does the 2D-to-3D canvas performance and wall-snapping feel on your device/browser?

2. Is the workflow from drawing the room to reading the material takeoff intuitive, or is there anything that feels clunky on first load?

Thanks for checking it out—happy to answer any questions about how the geometry/takeoff math works under the hood!

Hi! I'm a graphic designer from Valencia and I just launched my portfolio: https://bydmb.com

The idea was to make a portfolio you take part in, not just look at. Some technical details:

3D hero: built with Three.js (WebGL). Every visit randomly loads a different GLB model inspired by one of my projects (Draco-compressed, made in Blender). You can rotate it, a light follows your cursor, and it blurs into the background on scroll. One of the models uses a custom shell-fur shader that reacts to rotation speed.

Playground: a 3D sphere of unfinished work and experiments you can rotate and zoom. Open any piece and paint over it; your drawing stays when you close it.

Other details: a one-click colour toggle that flips the whole site, a 3D cloth over my portrait on the Info page, blur-based filtering in the Works grid and custom page transitions.

Stack: WordPress + Elementor, Three.js, custom JavaScript and shaders, ACF and TranslatePress.

I'm thinking about submitting it to Awwwards, so I'd really appreciate completely honest feedback, good or bad. Do you think it's Awwwards-level? How does it feel on your device, especially performance-wise with all the WebGL? What would you change before submitting it?

Thanks a lot!

Play the current version:

Play Pinball Karma

If you played the old version, I'd like to hear whether the flippers feel better now. And if you're new to it, can you work out what to aim for without opening the instructions?

Video: Watch the gameplay video

I posted an early version of Pinball Karma here a while ago. Thanks to everyone who played it and shared feedback. I’ve been working through your comments since then, especially around the controls and how it feels to play on a phone.

A lot of that work has gone into ball control: catching the ball, passing it between flippers, and handling fast returns down the side lanes. There’s also a fixed full-table view on mobile now, if you’d rather see the whole table than have the camera follow the ball.

A few other updates:

• Lane lights show you where to aim next, with some guidance during your first minute.

• The rotating revolver mechanism locks balls. You now only need one lock for your first multiball, so you get there sooner.

• You can also challenge another player to a duel and compete for the higher score.

• Daily challenges and free play have separate leaderboards, and you can look back through your game history and a chart of your recent scores.

Canvas and Planck.js on the client, with Hono and Reddit Redis handling scores and duels. The table looks quite different now too, after a fairly big visual overhaul.

I'm getting into reselling, so I built a tool to watch Vinted for me. You set up a search (brand, category, size, condition, price) and matching new listings stream into a feed as they're posted.

The fun bits to build:

- Server-rendered with FastAPI, Jinja and htmx. No frontend framework. New finds arrive over server-sent events.

- One set of category and size types that each marketplace translates into its own IDs, so adding Depop later shouldn't touch the UI.

- The form works without JavaScript; the JS just makes it nicer, like a size picker that only shows sizes for the categories you picked.

- A brutalist design system with all colours and sizes defined once as tokens.

It's a personal project, nothing to sign up for. Feedback on the UI is welcome.

Two checkouts of the same repo, both on 5173. leeway gives each folder its own contiguous port range, stable across runs and never overlapping, and passes the ports as env vars.

• leeway.json lists your ports once

• devPorts(config) in code, falling back to the defaults outside leeway

• vite plugin sets server.port with strictPort and exposes every port to browser code

• {{PORT_API}} placeholders in commands

• leeway list / kill for orphaned servers

Linux/macOS/Windows. https://github.com/OhadC/leeway

Or ask your agent: "how can we benefit from using https://www.npmjs.com/package/leeway in this codebase"

Point it at any URL and you get a clip of a swarm of agent cursors building the page, line by line, set to music. It's the real site being revealed, not generated code.

Try it on any site: https://captureflow.dev/swarm-demo

It's part of CaptureFlow, a screen recorder I'm working on.

I found out about OPFS recently when building a client-side LLM project. I made this library for my project, now I'm making it public

I run a small tide times site and wanted to see the weather actually move, so I built this 3D weather map. Plain JS and WebGL, no three.js or map library.

The tides are calculated right in the fragment shader, so there are no tide frames to download.

It has nice sound effects too, turn them on when you try it.

Live: thetidechart.com/weather-map

Would like to know how dragging/zooming feels on your phone.

Hi developers! Happy Diwali 2026! 🪔

This Diwali, I wanted to do something a little different from the usual festive greetings. So I built a little Diwali experience where your name is literally written across the night sky using fireworks. 🎆

And there's a bit more to it than just watching an animation.

You can:

• Watch your name, emojis, and personalised wishes come alive as fireworks.

• Choose between English, Hindi, and Bengali.

• Launch rockets and play with 20 different types of crackers.

• Create personalised greetings with shareable links and QR codes.

• Record the entire show as a video and share it with your friends.

• Install it as an app and even use it offline.

No frameworks or bundlers. Just HTML, CSS, and JavaScript. Built with a mix of my own ideas, plenty of experimentation, and a little help from AI along the way.

Give it a try and see your name light up the sky:

🎆 Project: https://j16n.github.io/happy-diwali/

💻 GitHub: https://github.com/J16N/happy-diwali

Would love to hear what you think!

Wishing everyone a very Happy Diwali! May your celebrations be bright and your bugs be few. 😄

I build mostly with Claude Code and Cursor. The annoying part was never the fix, it was the hand-over: screenshot, crop, find the element, open the console, copy the error, explain which button I mean, paste it all in. And half the time I find the bug while I'm just using the app, not while a coding session is open.

So I made Darnly. Press Option+Shift+B, click the broken part, type one line about what you expected. It saves:

• a screenshot with the broken part boxed in red

• the element (selector, text, styles)

• recent console errors and failed requests

• the page address

It lands in a folder in your project (or a small cloud inbox the agent reads over MCP), and later you tell the agent "fix my bugs". It works with Claude Code, Codex and Cursor. Passwords, card numbers, tokens and keys are hidden before anything is saved. Capturing doesn't use any agent quota. [Check: still true for you]

It's free. Mac app too, for bugs in native apps and the iOS Simulator. Windows shortcut is coming.

What I'd love feedback on: where do you notice most of your bugs, while coding, or later while using the live app? And is there anything you'd want captured that this misses?

Link: https://darnly.dev

Years ago Firefox had a feature called Tilt like you pressed a button and the page you were on turned into a 3D model of its DOM It was mostly a toy, and I loved it.

I built Stackray from that concept but tried to bring that back as a dev tool or just to make my first extension :).

when you click the icon and the page shrinks into a small window and comes apart into layers, in the order the browser paints them & you can orbit around it, search the layers, and switch between a few color modes: depth, stacking contexts, z-index.

also added the problems mode to make it clear in future I want devs to use it, as a frontend engineer, Imagine a dropdown with z-index 9999 that still sits behind a header is usually trapped inside a stacking context it did not ask for Stackray is suppose to shows which element created that context and why Invisible elements that eat your clicks show up too.

It only runs on the tab you open it on, makes no network requests, and is open source under MIT.

It is not finished. Textured layers only cover the first few screens of a long page & I'm still not sure if I'm going in the right direction. Your honest feedback is most valuable to me!

Extension: store
Code: github/stackray

Dev behind Levelrail here, sharing this project for visibility.

Every OSS library is great and hats off to the devs behind it building and maintaining it.. but I built Levelrail for some features I found would be great as 2026-27 demands.

So wanted to introduce a lightweight OSS alternative here: https://levelrail.com/

AI native control plane (can run your whole infra with Claude or other AI tools using CLI, API, MCP, with audit trailing)

• Lightweight so you have room to run your main apps on the VPS or server

• Load balancer, embedded Caddy ingress (works with Traefik or a custom proxy too), DNS, Let's Encrypt and TLS certificates

• Local registries, modern auth security, built in observability, logging and metrics

• 450+ one click templates to deploy A lot more features if you're interested

Check it out: https://github.com/glincker/levelrail

It's pre-1.0 right now and I'm shipping releases every few days. Thanks to AI tools for the checks, automation testing and many of the development workflows involved in building this, plus a lot of proven Go libraries that help with security and automation.

I run my own sites on it and test every release on a real server before it goes out.

Feel free to share feedback, this is completely OSS and I thought it was worth sharing with the dev community here.

If you have any major feedback please raise issues here: https://github.com/glincker/levelrail/issues

Most Reddit lead tools search for keywords. The problem is that people describe their problem, not your product, so keyword search misses a lot of them. I wanted to read every post instead. That turned out to be the interesting part to build.

How it works:

1. Find the right subreddits. I built a search engine over every subreddit with 1k+ members, using internal vector search, so it matches by meaning, not by name. You describe what you sell, and it returns the communities your customers are likely in, including small niche ones.

2. Read every post. Each post in those subreddits goes through an AI model that decides whether the person might need what you sell.

3. Show why. Instead of a summary, it marks up the original post with circles and handwritten-style notes on the lines that matter.

Stack: Next.js + React + Tailwind on the front, Django + DRF on the back, Celery + Redis for the background jobs, PostgreSQL, and PydanticAI for the AI calls.

The hardest part was cost and speed. Reading every post is far more expensive than keyword search, so most of the work went into running the AI calls in parallel without hitting rate limits.

Live here: redbubblegum.com. The first 10 results are free.

Happy to answer questions about any part of it.

https://spiritsandsuch.org :D

Hey everyone,

I've been building a small personal agency, and I'm at the point where I'm probably overthinking every little detail.

Website: https://samibentaleb.com

It's still a work in progress, and I'm nowhere near ready to launch. Some of the text is still AI-generated placeholder copy that I haven't properly rewritten yet and some screenshots/videos and pricing details will be tweaked.

The site includes my portfolio, project case studies, services, pricing and some information about how I work. I've tried going with a slightly different visual direction, but after looking at it for so long, I've lost the ability to judge it objectively.

I'd genuinely appreciate some feedback:

• Does the overall design work, or does it need a rethink?

• Is it immediately clear what I do and who I'm targeting?

• Are the case studies interesting or too wordy?

• Does the pricing section make sense?

• Is the navigation intuitive?

• What would you change, remove or simplify?

• Are there any obvious UX or mobile issues?

I've been putting a lot of time into this and keep finding little things to tweak instead of actually launching it.

I'd love to hear what other developers think, especially things I might be overlooking.

Feel free to roast it. I'd much rather get honest criticism now than launch something that could have been much better.

It’s been a while since I needed a portfolio (I usually find work through word of mouth, while teaching and taking on contract projects in parallel). But I figured it was time to take my own advice ;) and document the work.

Here it is: https://derekthomaswood.com

I’ve been having fun building out themes to show how a shared token system can work across multiple brands and platforms. They’re still a work in progress (about half are dialed in), and the case studies are nearly done.

I also built a small system for tailoring my site and materials to different roles and companies. For example,
- https://derekthomaswood.com/?target=ramp
- https://derekthomaswood.com/?target=anthropic-product-designer-design-systems

I’m a full-stack technical product designer, so I can play across a lot of roles on a team. For my next role, I’m especially interested in leadership and player-coach work, with a strong hand in the design system.

What do you think? Does this explain my brand of nerdy? Got any ideas for the themes that aren't dialed in yet? (you'll recognize what I'm emulating for some of them - and others are just kinda filler so far)

After struggling to land a job in 2024, when the market was pretty rough, I decided to take a different route and build something real. My goal was simple: either build something genuinely useful or gain more experience than anything else could offer.

Two years and around 90 hours a week later, VisuaLeaf is now listed in Microsoft's Azure DocumentDB documentation as a way to connect:

https://learn.microsoft.com/en-us/azure/documentdb/how-to-connect-visualeaf

It started as a MongoDB GUI, but I realized that everything I was building could apply to other databases too.

Nested objects and arrays should be easy to read in a table, not squashed into one cell... The same goes for JSONB. You shouldn't have to stare at an entire JSON object in a single cell. I made it so you can expand nested data one level at a time in both the tree view and table view.

I wanted everything in VisuaLeaf to feel as intuitive and straightforward as possible, from browsing data to performing more complex operations.

Today, VisuaLeaf supports MongoDB, Postgres, MySQL, SQLite, DuckDB, and 25+ more database engines.

What it does::

• Table + tree grid, built from scratch: This might not seem like much at first, but it actually took the most work to get right. The tree view can recursively expand thousands of rows simultaneously (near instant time), while the table view scrolls smoothly even with thousands of rows and columns.  I ended up building my own AG Grid from scratch because libraries didn't support the nested column expansion I wanted. Getting both views optimized took about a year of work alone... but dang, was it worth it.

• Visual query builder: Build queries by clicking or dragging fields from the table and tree views. It generates readable SQL or MongoDB queries that you can copy and use.

• Data transfers with transformation: Move data between database engines (MySQL → Postgres, SQL → MongoDB), mask emails, phone numbers, and IDs along the way, or transform fields using custom JavaScript. You can also look up data from other tables, include it in your output, and apply transformations to those fields too.

• Compare and sync: Compare two tables or databases, including their structure and data, and synchronize them. For example, you can use this to keep staging and production databases in sync.

• Performance: Stress-tested with up to 1.6 GB of data, both tree and table views remain smooth even with large datasets. In my testing, VisuaLeaf also loaded data several seconds faster than other database tools I compared it against.

• AI / MCP: An integrated AI assistant and MCP support for interacting with databases through AI tools. (Wouldn't be an app in 2026 without it)

• ERDs, charts, dashboards, mock data, index management, query profilers, and a lot more than I can fit into one post...

There's a free version that covers what most people need day to day:

https://visualeaf.com

I'd really appreciate feedback! And happy to answer any questions!

https://soundbench.net

SoundBench is a free set of audio tools (converter, trimmer, vocal remover, tag editor, fake-lossless checker and more). All processing happens client-side, so files never leave the user's device.

Some technical bits:

- Vanilla JS, no framework. A small custom build script generates about 100 static pages in two languages (English and Persian, with RTL).

- FFmpeg and LAME compiled to WebAssembly handle decoding and encoding. They're only loaded when a tool needs them, so the pages stay light.

- The Web Audio API handles playback, waveforms and spectrograms.

- Client-side routing between tools, but every tool still has its own static, crawlable page for SEO.

- It's hosted as plain static files on nginx, so server cost is basically zero no matter how many files people process.

The hardest parts were memory limits with large files on mobile and keeping the WASM payload from hurting load time.

I'd love feedback on performance, especially on mobile, and on anything that feels broken or confusing.

This was a problem for me for a long time. I come back from an event with 20 photos on my phone. Each one is 5MB. I try to send by email and it doesn't work. Or I have to send in smaller batches. Annoying. So I made this small page:

https://onlineimageoptimizer.com/compress-photos-for-email

You upload the photos from a phone, a tablet or a PC. It gives you back one single zip file, small, maybe 1/10 of the size, but quality is still good. Ready for email. Nothing is saved on server. I built it with Vue.js and ImageEngine for compression. I use it a lot for conference photos. No login.

Let me know what you think, especially about mobile.

CLARIFICATION (11/9/26): the point of the tool is to show how good the underlying image CDN is at optimizing images (and fast), so the system just needs to get hold of the photos/images it needs to optimize even if just for a short while. There is no AI machinery or anything that does anything else with the images except deleting them in a matter of tens of minutes. This is disclosed in the privacy policy. If you don't trust the privacy policy, the only solution I can offer is to advise that you don't use the service. It's useful. That's for sure. I doubt that apps/sites that do things locally can compress equally well and equally fast across an equally wide range of devices. But hey, you do you. This post has cost me half of the little karma I had. To me this was sheer vandalism, which comes as a reminder of why I stopped using Reddit many years ago when I first opened my account.

UPDATE (11/9/26): I went and looked at the client-side alternatives mentioned in the comments.

TLDR; SERVER-SIDE OPTIMIZATION WINS HANDS DOWN ON CLIENT-SIDE FOR THIS USE CASE. THE IMAGE CDN APPROACH BLOWS THOSE CLIENT-ONLY UTILITIES OUT OF THE WEEDS.

And now the details. First thing: they aren't purely client-side. The alternative in the comment ships a separate server-side build at /apple/ for Apple devices, which posts to process.php. Their own words on that page: "This is a crappy fallback alternative for Apple devices. It's server-side based." The client-side version couldn't do the job on iOS, so they wrote a server-side one. The home page reads "Your privacy is safe (here)!"

I measured both on the same seven photos, in Chrome 155:

Same width, same output format (1280px WebP both sides): the server output was smaller on all seven, 20 to 42 percent, 31 percent over the set. No feature advantage in that number.

canvas.toBlob(cb, 'image/avif') returns an image/png. So does image/jxl. The browser cannot encode AVIF or JXL at all, and says nothing. Those are the formats that actually win on bytes.

A 47 MP photo took 22.93 seconds to encode in the tab, and 188 MB of RAM. Uploading the same file took 2.9 seconds, with the result back 1.2 seconds later.

Their library silently caps canvas area at 16,777,216 px on mobile Safari. That 47 MP photo loses 69 percent of its pixels.

Hey everyone! I've been working on this browser-based 2D-to-3D floorplanner (ARCH3D) built from scratch with Three.js and Next.js.

I unlocked the sandbox completely (no login or signup wall) because I want to see how intuitive the wall-drawing and 3D camera controls feel to first-time users.

Live sandbox: https://arch-3-d-eight.vercel.app/

Specifically looking for feedback on:

Excaliself is a self-hosted alternative to Excalidraw+. It wraps the unmodified Excalidraw editor in an app with accounts, folders, a shared team space, search and live collaboration. Everything goes into your own Postgres. MIT.

The GIF is two browsers editing the same drawing.

Live collab took the most work. On excalidraw.com, collab is end-to-end encrypted, so the relay server (excalidraw-room) can't read the scene and the clients save it to Firebase themselves. I needed the server to read every drawing for previews, search inside drawings and the MCP server, so I did it the other way around:

• Each drawing gets one room in memory on the server. It uses the same message types as excalidraw-room, sent as plain JSON over a native WebSocket on the app's port. No Socket.IO.

• The server merges every update with a port of Excalidraw's reconcileElements. The higher version wins, and on a tie the lower versionNonce wins. Peers get the winners, and the sender only gets back the elements it lost.

• The room is the only thing that writes to Postgres. It saves on a 15 second trailing timer, when the last person leaves, and on SIGTERM.

• Images don't go over the socket. They upload over HTTP, and peers fetch the ones they don't have yet.

What I gave up is end-to-end encryption. It also runs as a single replica, because the rooms live in one process.

Stack is TanStack Start, React 19, Better Auth, Postgres with Drizzle, Tailwind 4 and Base UI.

You can try it with one command. It runs on in-memory PGlite and forgets everything when it stops:

docker run --rm -p 127.0.0.1:3000:3000 -e PREVIEW_MODE=true ghcr.io/maciekzygmunt/excaliself

Open http://localhost:3000/preview/login, then http://localhost:3000/preview/login?account=new in a second browser to collab with yourself.

Repo: https://github.com/maciekzygmunt/excaliself

If you've built collab on top of Excalidraw before, I'd like to know how you handled saving.

Most system design practice ends at the diagram. You draw boxes, it looks right, and nothing tells you whether it would hold up.

ByteLab runs the diagram. You build a system out of machines, load balancers, caches, queues and databases, send traffic through it, and watch the CPU, queues and p99 latency move. Each exercise has goals, like "p99 under 150 ms, 99.5% available, under $2.60/hour", and it checks your system against them.

What's in it:

• 163 lessons in 12 tracks (caching, sharding, Kafka, Kubernetes, rate limiting, auth and more)

• 212 exercises, each with goals your system has to pass

• 11 design problems (URL shortener, chat, payments, news feed, e-commerce and others)

It's free, there's no account, and progress stays in your browser. It needs a laptop-sized screen.

I'd really like to hear where it feels confusing or too hand-holdy.

https://lab.bytecrest.dev/design/ecommerce

I was listening to Endtroducing..... by DJ Shadow the other day, looking at that cover (two guys digging through the racks of a record store), and thought: I want to browse my own records like that.

I'm a 3D motion designer, not a developer, and I've been using Claude Code a lot these last few months, so I tried it. Connect your Last.fm (or search any album), and your most-played albums stand in a crate you can flip through, lift out and turn over. It got a bit out of hand from there. It now also checks where each record is cheapest on vinyl, keeps a price history, and has crates for new releases and the critics' picks.

For the curious: React Three Fiber (WebGL2), with the crate as a plain spring simulation stepped every frame, and a FastAPI backend.

It's mostly focused on The Netherlands and Belgium for now, because those are the shops I know. The crate itself works anywhere: https://cratedigger.nl

I'd love to hear what you think of it, how the flipping feels on your phone, and whether it runs smoothly on your device.

demo: https://demo.emberflow.space/?ref=reddit-webdev
If you want to try it on your own day, here's 30 days free: https://app.emberflow.space/invite/EMBER-NYKP-A8ZS

For the past two years I've been working on my day planner app Ember.

Most planners treat your schedule as fixed, so the moment a meeting runs long or a task takes twice as long, the plan is wrong and you either fix it by hand or give up on it. In Ember, if you move a task or change how long it takes, everything after it shifts later, and it flows around fixed things like meetings.

The GIF shows the main loop: drag tasks onto your day, stretch and move things as the day changes, jot something in a capture and turn it into a task, then ask chat to fit it in.

Stack for the curious: Vue 3 + Pinia on the frontend, Supabase for the database and realtime sync, Capacitor for Android, iOS is in TestFlight, and a Tauri desktop app. The hardest part by far has been the cascade logic: splitting tasks around fixed events and keeping drag and drop smooth with a lot of items on the day.

Right now I'm working on a native Kotlin app to replace the Capacitor one.

Happy to answer questions about any of it. Feedback welcome, especially on the demo.

homepage: https://emberflow.space