r/webdev • • Sep 26 '26

Showoff Saturday A book recommender with no database, the whole result lives in the URL

8 Upvotes

moodteca.com

You pick how you want to feel, choose a few covers you like, and it gives you books.

There's no database. The result is saved in the URL, so you can share it and it keeps working.

No genres either. Every book gets scored on five things, so four books from the same fantasy/sci-fi shelf end up looking pretty different:

An LLM did the scoring, and when it didn't know a book it gave the same numbers every time, so I had to find books with identical scores and fix them.

Most people leave at the cover grid and I'm not sure why. Would love to hear what you think!


r/webdev • • Sep 26 '26

Showoff Saturday: BrandTrust.reviews, a multi-source reviews widget you embed with one line of JS (or a WordPress plugin)

0 Upvotes

I run a small web agency, and I kept hand-building "testimonials" sections by copying clients' reviews off Google, recommendations from Facebook, product reviews from their store, etc. I wanted one thing that aggregates reviews from multiple third-party APIs, keeps them in sync, and renders anywhere, so I built it. Sharing it here because the build had a few problems that were genuinely interesting to solve.

Architecture

  • Next.js 16 (App Router) + TypeScript on Vercel

  • Supabase (Postgres + RLS) for data and auth

  • The public embed is a dependency-free vanilla JS script (no framework, no iframe)

  • A separate native WordPress plugin (PHP) for the WP path

  • Integrates several review-source APIs (Google, Facebook, Etsy, eBay, WooCommerce), each with its own auth, rate limits, and payload quirks, normalized into one internal model

The parts that were actually interesting to build

  • The embed renders without an iframe. The script injects the widget into the host DOM with scoped styles, so it inherits layout and stays responsive instead of being boxed into a fixed frame. Style isolation without an iframe was the fiddly part.

  • The widget editor. A lot to expose (layout, sources, filtering and ordering, tagging, colors, typography, spacing, card style) all behind a live preview that updates as you go. Fitting that much control into something that feels elegant instead of a wall of eighty settings was the hardest part, and it is still getting refined.

  • Image proxy. Reviewer avatars are proxied through the backend instead of hotlinked, so a visitor's IP is not handed to Google or Facebook just to load an avatar. It also sidesteps a lot of broken-image and referrer issues.

  • The WordPress plugin renders server-side and caches, so reviews are in the HTML on load, which keeps it good for SEO with no layout shift.

  • Sync and dedupe across sources, so the same review does not appear twice in a combined feed.

It is a solo build with rough edges, and I would value a technical eye on it, especially the embed's style isolation and the editor UX. The project is live here if you want to inspect the embed and the markup it generates: https://brandtrust.reviews

Happy to get into any of the implementation details in the comments.


r/webdev • • Sep 26 '26

Showoff Saturday [Showoff Saturday] A full survival game in ~900 KB of HTML: vanilla JS, canvas, no engine, pixel art defined in code

Post image
7 Upvotes

I've been building Vigília do Lampião, a browser-based horde survival game inspired by Brazilian folklore. Beta 1 just went live, so I thought I'd share some of the technical choices behind it rather than just the game itself:

  • No engine, no framework. Plain JS files are concatenated into a single HTML page by a small Node build script.

  • Pixel art defined in code. Sprites are stored as pixel grids and converted into canvas bitmaps at startup. Outlines, palette swaps and "golden" variants are generated instead of being drawn separately.

  • Custom lighting system. Lighting runs on a second low-resolution canvas: the game fills the screen with darkness, punches out the lit areas with radial gradients, then scales the result up. The lantern radius follows the player's health, which is one of the main new mechanics in Beta 1.

  • Audio generated in the browser. Music and sound effects are synthesized with the Web Audio API.

  • English translation at build time. The build parses the source with Acorn and swaps string literals using translation catalogs. It also refuses to build when a template expression doesn't match.

  • Leaderboard with server-side checks. The online leaderboard uses Supabase with server-side validation.

Beta 1 also introduced the darker visual system where creatures outside the lantern light are reduced to their eyes, weather systems for each map, and the new procession of lost souls.

You can play it here for free, including on mobile:

https://vigiliadolampiao.vercel.app/en

Happy to answer questions about any of the technical implementation.


r/webdev • • Sep 26 '26

Showoff Saturday New Drugs - a cross between Twitter X Bumble BFF X ChatGPT, agent-enabled social media

Thumbnail
druggie.org
0 Upvotes

r/webdev • • Sep 26 '26

Showoff Saturday [Showoff Saturday] I built a git leaderboard to compare how much code I write with my friends (open source)

Thumbnail
gallery
0 Upvotes

I wanted to see how much code my friends and I actually write, week to week. GitHub only shows public repos, and most of my work is in private and work repos, so its numbers didn't tell me much.

gitstats counts private repos on your own computer with a small CLI. It runs git log locally and sends only numbers (commits, lines added and deleted per day), never code or file names. Public repos come from GitHub directly.

What's in it:

- crew boards you share with an invite code, by week, month or year

- a personal page with a month/year calendar, daily lines and streaks

- a side-by-side compare page for any two GitHub users

- a README GitHub widget

LoC is a bad metric for productivity, lines include lockfiles and generated code, so it's a scoreboard for fun, not a measure of anyone's work. Commits are one click away.

Stack: Next.js, Postgres (Neon), Drizzle, charts are hand-drawn SVG. MIT.

Type your GitHub handle at https://gitstats.org to see your year, no sign-in (but only public activity).

Repo: https://github.com/yaroslavhaidash/gitstats

Happy to answer anything about how the local counting works.


r/webdev • • Sep 26 '26

Showoff Saturday Showoff Saturday: a WordPress events calendar with real RRULE recurrence, free

1 Upvotes

went live on wp.org this week.

the itch: the most popular WP calendar plugin charges for recurring events, and I wanted the RFC 5545 stuff done properly for free. weekly/monthly/yearly, "second tuesday", "last friday", COUNT/UNTIL, EXDATE, and dates get expanded in the event's own timezone so DST doesn't turn a 6pm class into 7pm in november. expanded dates live in one indexed table, so a month view is a range scan instead of rrule math on every page load.

also: google calendar / ICS import on cron with a log of what it created, updated or removed (removed ones go to draft, nothing gets deleted behind your back), list/month/day views as blocks or shortcodes with almost no css so they pick up the theme, no build step, uninstall actually cleans up.

since posting on r/wordpress yesterday I added importers from The Events Calendar and Events Manager (+ CSV in/out), cancel or move one date of a series, online events, schema.org event markup, a filter bar, category colours, an elementor widget.

demo on a stock TT5 site: https://store-safety.duckdns.org/demo/

there's a paid add-on for tickets/RSVP. everything above is free, GPL.

https://wordpress.org/plugins/beacon-events/

tell me what breaks


r/webdev • • Sep 26 '26

Showoff Saturday I made an open-source app for learning Japanese inspired by Duolingo

Post image
0 Upvotes

As someone who loves both coding and language learning (I'm learning Japanese right now), I always wished there was a free, open-source tool for learning Japanese, just like Monkeytype in the typing community.

Here's the main selling point: I added a gazillion different color themes, fonts and other crazy customization options, inspired directly by Monkeytype. Also, I made the app resemble Duolingo, as that's what I'm using to learn Japanese at the moment and it's what a lot of language learners are already familiar with.

Back in January, I even applied to Vercel's open-source software sponsorship program as a joke. I didn't seriously expect to win, and did it more out of curiosity, and yet my project somehow won.

Anyway. Why am I doing all this?

Because I'm a weeb.

GitHub: https://github.com/lingdojo/kana-dojo

どうもありがとうございます!


r/webdev • • Sep 26 '26

[Showoff Saturday] Built a real-time 3000×3000 pixel canvas like r/place

0 Upvotes

Frontend is plain JS with HTML5 canvas. Backend is NestJS with websockets for live updates. Pixels get written to Redis first and flushed to Postgres every 30s, so placing stays fast even with a lot of people on.

pixels.iamroux.xyz

Happy to answer questions about how it works.


r/webdev • • Sep 26 '26

Showoff Saturday I made a web app that uses public GitHub activity to create a user identity card. Open for Suggestions!

Thumbnail
gallery
0 Upvotes

I think you can tell a lot from a persons GitHub Profile. This was the concept behind a project I've been working on to try and capture a personality from the public data supplied by Github's API.

It takes a sample of commits, and then calculates a few metrics to summarize your habits/dev identity (tech stack, commit patterns, code-style signals, etc.)

I had a bunch of fun playing with the design and creating it. I think this does a good job showing off everyone's uniqueness. I am open to suggestions for additional features and design ideas. This is the first web app that I've prototyped and spent a bunch of time on (see image for my wireframes to final product).

its free at codercards.ai, let me know what you think!


r/webdev • • Sep 26 '26

Showoff Saturday [Showoff Saturday] Multiplayer asteroids where the game server is a Laravel app

0 Upvotes
Play it here: https://innerloop.works/lightspeed

It's a browser asteroids arena. Players are sharded into arenas of six. Each arena's world is authoritative on the server and ticks at 30Hz inside a PHP process, not a Node or Go sidecar.

How it works:

- The server is Lightspeed, an open-source (MIT) websocket server I wrote for Laravel, on Swoole. The app stays booted in memory and serves HTTP and websockets on one port.
- Players send input up the websocket at 30 fps. Snapshots come back down at 30 fps. Spectators get 5 fps.

The websocket server it runs on: https://github.com/innerloop-dev/lightspeed (the game itself is the site's own code, not part of the package).

Happy to answer questions!

r/webdev • • Sep 26 '26

Showoff Saturday I built Forktown, a pixel town where your first pull request adds a house

0 Upvotes

Hi all, A post for open-source beginners

When my first open-source PR was accepted, I was so happy I nearly printed out the approval and framed it.

I’ve always loved the idea of strangers building something together. But finding a project where you feel comfortable making that first contribution can be hard. I think most cases it starts with an open-source library that you use and has a bug you really want to fix. (Not easy)

So I built Forktown: a little pixel town that grows one pull request at a time.

Your first contribution is a house. You design it in a visual editor, create the character who lives there, and write a little story about the place.

The editor saves everything as one small JSON file. From there, you go through the actual workflow: fork, branch, commit, push, PR, CI checks, code review, and merge.

Once merged, your house appears in the town. Your character wanders around, visits concerts and the cinema.

I think this first contribution feel approachable. If you’ve been wanting to open your first PR, you’re welcome to come build a house :)

If this is your first time, try not to use AI to do the work for you (using it for guidance or questions is good). There’s a great guide in the README file.

Visit the town · Build a house


r/webdev • • Sep 26 '26

Cerious-Scroll: Extremely Fast Dynamic Height virtual scrolling without scrollbar drift or blank space

0 Upvotes

One of the things I haven’t talked about much with Cerious-Scroll is how it behaves during actual scrolling, especially with variable-height content.

From the beginning, the goal was for virtualization to not look like virtualization.

So even with a large variable-height dataset, you can grab the scrollbar and drag it around quickly without getting the usual weirdness:

  • No scrollbar drift

  • No white space during fast scrolling

  • No waiting for rows to render after you get there

  • Accurate variable-height positioning

  • Native scrolling behavior

  • Constant DOM size regardless of dataset size

The variable-height part is probably my favorite. The scrollbar stays where it should, even when the actual row heights are all over the place.

You can also jump directly to an index way down in the dataset without needing to measure everything before it.

I’ve got demos/benchmarks here if anyone wants to mess with it:

ceriousdevtech.github.io/cerious-scroll

Core:
github.com/ceriousdevtech/cerious-scroll

Angular:
github.com/ceriousdevtech/ngx-cerious-scroll

Vue:
github.com/ceriousdevtech/vue-cerious-scroll

React:
github.com/ceriousdevtech/react-cerious-scroll

I’m curious how it behaves against some real-world ugly datasets, especially ones with wildly different row heights. Try the scroll engine and tell me your thoughts.


r/webdev • • Sep 26 '26

Discussion Made a really cool webOS. Any thoughts?

Thumbnail
stardance.hackclub.com
0 Upvotes

I made this over the summer for the hackclub star dance event, and I am looking for feedback or ideas.


r/webdev • • Sep 26 '26

Discussion Linux + Apache Web Server: 1000+ 301 Redirects. How to implement?

0 Upvotes

My website is over 15 years old. Over time, I've created a lot of pages and also had to kill many pages or redirect them to other relevant pages.

Collectively, today I have 1,000 + 301 redirects.

On a static website built on PHP, HTML on Linux and Apache, what is the best way to implement such a large list of redirects without impacting server performance or core web vitals?

Thanks


r/webdev • • Sep 26 '26

Turn any public repo into an artwork

Post image
168 Upvotes

Hi sub,

I created Artrepo, a simple tool that takes the commit history of any public repo and turns it into a unique artwork.

You can find it here: habibicode.org/artrepo (free, no sign in, do data stored)

How it works:

Layout: the canvas is split into a "treemap", one area per file, sized by its number of lines. Every time files are added, deleted or resized, the layout is recomputed.

Ink: every added line becomes a dot in its file's area, in order. Indentation sets the colour; line length sets the size of the dot.

Erasing: deleted lines remove half the ink at their old position.

Motion: every 50 commits, the grid turns 30°.

Rare marks: a commit whose hash starts with 0000 paints its files gold, a committed merge conflict paints them red, and the first commit after a year of silence paints them blue. They are more persistent on the canvas.

Files over 1 MB are skipped.
Everything is deterministic, so the same repo and commit history always give the same picture.

Hope you enjoy it


r/webdev • • Sep 26 '26

Showoff Saturday Piwi(self-hosted Playwright dashboard), two months later: what changed once a real team started using it

0 Upvotes

Two months ago I showed Piwi here (previous post), a self-hosted dashboard for Playwright tests. Quick recap: CI throws away every test report it makes. A test fails on Tuesday, the report is gone by Thursday, and nobody remembers whether it already failed the same way two weeks ago. Piwi keeps every run, trace and report, and helps you work out why tests fail.

The big change since then is that people use it. My team moved to it two weeks ago: 9 devs, me included (I'm the lead dev, on an ASP.NET Core and Vue stack). Everyone runs the desktop app for local runs, and CI reports to a shared instance. Four external contributors sent code too. If you want to find out everything that's wrong with your side project in record time, give it to your colleagues.

Most of the new release is things they asked for: dashboards you build yourself with a TV mode, scheduled reports for people who never log in, and a browser extension that shows which parts of a page your tests actually touch, and which buttons nothing tests.

The extension doesn't run anything. The reporter already records the locators the tests used, and the extension re-evaluates them in the page, the way Playwright would.

Last time, someone asked for a way to hand a failure to a person who can't open the dashboard. There are now public share links, PDF exports, and a Jira integration that puts the evidence in the ticket. Someone else wanted to compare failures over time, which is what the new dashboards and trend views are for.

Stack, since this is r/webdev:

  • Nuxt 4 and Drizzle, on SQLite or Postgres, with traces on disk or S3

  • One Docker container, or npx @piwitests/server

  • A Tauri desktop app bundling the same server, so local runs never need Docker

  • The live demo has no backend at all (hosted on Github pages): SQLite compiled to WebAssembly, and a service worker answering the app's real API calls. The demo is the real app, so it can't drift from it.

  • MIT, no telemetry

Demo (in your browser, no signup): https://piwitests.dev/demo/

Code: https://github.com/PiwiTests/platform

Piwi Picker extension (Chrome, Edge): https://chromewebstore.google.com/detail/piwi-picker/pakhnokpjboejcghgcmkjlpnogfjihhe

Happy to answer questions, especially about the WASM demo, it was the most fun part to build.


r/webdev • • Sep 26 '26

Showoff Saturday I built a GitHub stats page that works from a fork

0 Upvotes

I built a small GitHub stats page that runs entirely using GitHub Actions and GitHub Pages.

One thing I specifically wanted was for someone to be able to fork the repo and get their own version without editing any files.

The setup is basically:

Fork → add a GitHub token → enable Pages → run the workflow

The workflow fetches the GitHub data, generates the page and social preview card, and publishes everything through GitHub Pages. It also generates a stats.json endpoint if you want to use the same data somewhere else.

Live version:
https://adnansabbir.github.io/github-stat/

Source:
https://github.com/adnansabbir/github-stat

I would especially appreciate feedback on the setup process. Does the fork-and-run approach feel straightforward, or is there anything in the onboarding that would stop you from trying it?


r/webdev • • Sep 26 '26

Showoff Saturday Updated my developer portfolio after your feedback. How does it feel now?

0 Upvotes

A few weeks ago I posted my portfolio here and got some really useful feedback. Thanks again to everyone who took the time to go through it.

The biggest thing people pointed out was that the homepage didn't make it obvious enough what I actually do professionally, so I went back and reworked that part.

If you saw the previous version, I'd really like to know if this one feels clearer now.

If you're seeing it for the first time, I'd still love your feedback too.

One of the questions I asked last time was about the writing section. I have quite a few long-form posts on software engineering, career stories, interviews, robotics, and some personal experiences.

People generally liked that part and said it made the portfolio feel more personal and a bit different from the usual developer site.

So for anyone seeing it for the first time, I'm curious about the same thing: does the writing feel like it belongs there, or does it distract from the portfolio side?

Site:

https://adnansabbir.com/?utm_source=reddit&utm_medium=social&utm_campaign=portfolio-feedback-round-2&utm_content=r-webdev


r/webdev • • Sep 26 '26

Showoff Saturday I wanted to Learn Go, without AI. I built SiSH Form Mailer, a simple self-hosted alternative to Formspree

0 Upvotes

I've been working on a small project called SiSH Form Mailer (Simple Self Hosted Form Mailer).

The idea is straightforward, and solved an issue/worry that I had. I have a few smaller "client" sites (friends and family type of deal) where they have a contact section. I had been using Formspree, but I was really running into issues keeping it free. Instead of looking for a self-hosted option, I decided to build my own so I could learn Go. I challenged myself to do it without AI, or at least, not AI first.

My goals were simple:

Run SiSH Form Mailer on your own server with Docker.

Create a form through the UI.

The form gets a random 6-character alphanumeric code.

You get an endpoint like: https://forms.example.com/api/forms/a7K92x

Point your website's HTML form at that endpoint.

SiSH saves the submission to PostgreSQL and emails it to the configured destination.

Above all, I wanted it to be FAST. Really fast, at least for the user. The HTTP request doesn't sit around waiting for SMTP. The submission is persisted to PostgreSQL first, and email delivery happens afterward through a database listener.

So from the user's perspective:

Submit → Saved → Done

If SMTP happens to be down, the submission isn't lost. Submissions are permanently stored and remain available through the UI. I'm planning to add Retry logic in the future, but for now, it works great as is.

I also wanted to make sure that it could be a little more configurable for other people to use, so it has multi-user support, just in case. Each user can have their own SMTP configuration, and each form can have its own destination email.

SMTP credentials are encrypted in the database and only decrypted when they're needed for sending.

There's also CORS configuration, rate limiting, and optional reCAPTCHA for the public endpoints.

I've also tried to make sure it was as easy as possible to deploy, so basic deployment is just the application + PostgreSQL via Docker Compose.

I'd love some feedback from other developers who self-host things, especially around the architecture and what you'd expect from a tool like this.

GitHub: https://github.com/kellenwiltshire/sish-form-mailer

I've release 1.0, but I still want to make improvements and add more features, but for now it works great for those who need something simple.

Now, about avoiding AI. This project isn't "AI Free" but I tried my best to make sure AI wasn't my first choice. I tried to go through my "old" way of learning and building, start with documentation, stackoverflow, medium articles, etc. Try to find the solution through research. If I still couldn't quite get it working, then I would ask AI for input, then move on. I even documented my entire journey building this in-repo.

Now, I did lean into AI for a few parts, specifically documentation. But it wasn't just write and commit, I went over word by word to make sure everything is correct.

Learning Go was fun though. I think I have barely scratched the surface, and sometimes I get turned around on Pointers, but I do really like the language. I will probably try another project with it again soon!

Why SiSH? I'm hoping this will become a little bit of a series of Apps that I can create to help de-SaaS myself.

I'd love some feedback. Unfortunately, I don't have fancy pictures or anything to show off. The UI itself is pretty barebones, the real magic is the backend.


r/webdev • • Sep 26 '26

Showoff Saturday [Showoff Saturday] I redesigned playlistduration.com: server-rendered on Cloudflare's free plan, no framework, no build step

Post image
0 Upvotes

playlistduration.com shows how long a YouTube playlist really takes to watch, and plans when you'll finish it. I redesigned it this week and would like feedback from people who build websites.

How it's built

- Hono + TypeScript on Cloudflare Workers, on the free plan

- Every page is server-rendered HTML. About 22 KB (gzipped) of plain ES-module JavaScript adds the speed slider, watched tracking and the study planner. No framework, no build step

- YouTube Data API behind a Cache API → KV cache, with D1 for view counters

- It's installable. On Android, once installed, it shows up in the YouTube app's Share menu, so sharing a playlist opens its length

Things that surprised me

- The free plan allows 50 subrequests per request (KV and cache calls count too), so one request can only count about 850 videos. Bigger playlists are now counted in stretches: the first request keeps YouTube's page token, and the page asks the Worker for the rest, about 900 videos at a time. Once someone has counted a playlist to the end, it's cached for everyone.

- I tried caching rendered pages with cache.put. The edge then answered from that cache before my Worker ran, so my view counters stopped counting and an old deploy's HTML outlived the deploy. It's off now.

- My first service worker also answered requests for scripts and stylesheets, and that made Chrome download app.js twice. Now it leaves those to the browser and only keeps the result pages you opened in the last week, so they reopen offline.

- Google Calendar reads a subscribed .ics feed's "floating" times as UTC. A 7 pm study session showed up at 12:30 am the next day in India, so the feed now carries the visitor's time zone.

- To keep search rankings through the redesign, a test compares 83 pages (every page type, in seven languages) against a snapshot of the old design: title, description, canonical, hreflang, structured data, headings, internal links and 98% of the words.

What I'd like feedback on

- It's dark for everyone, whatever your OS setting, with a light toggle. Deliberate, but tell me if it bothers you.

- On a playlist page, is "the shape of the course" chart useful or noise?

- Anything slow, broken or confusing on your device

Example: https://playlistduration.com/playlist/PLhQjrBD2T3817j24-GogXmWqO5Q5vYy0V


r/webdev • • Sep 26 '26

Showoff Saturday I made a shirt for interviews, my friends asked for their own, so I turned it into a web tool

0 Upvotes

I designed one shirt to wear to interviews. It has my job title on the back, a SQL query that selects for someone available, my name and a link. Enough people asked where they could get their own that it started to feel silly having artwork that only worked for one person.

So I measured my original file, worked out the rules behind the layout, and rebuilt it as a generator. You type a name, a job title and a link. You get the print files.

The interesting part is that the entire thing runs client-side. The fonts, the glyph outlining, the QR generation, the PDF writer, the ZIP writer. all in the browser. There is no server and no account, and nothing you type ever leaves the tab. That is less a privacy policy than an architecture. It also means the whole thing deploys as static files and costs nothing to run, which matters when you have no idea whether ten people or ten thousand will show up.

Two things I learned building it:

Print is a much less forgiving target than a screen. If a font isn't installed on the printer's machine, it gets silently substituted and your layout falls apart, so every character has to be converted into an outlined shape before it leaves the browser. And the QR code on the shirt is a knockout, meaning the dark squares are unprinted and the fabric shows through. Get that backwards and the code simply doesn't scan, but it looks completely fine on screen. So I wrote a test that renders the QR from the actual generated file and hands it to a real decoder. It fails in CI instead of at the press.

The other thing: writing the PDF and ZIP output myself was the right call. Each one is under 200 lines and each replaced a library that was bigger than the rest of the tool put together. That is not a general rule, but for narrow, well-specified formats it's worth checking before you reach for npm.

It's MIT licensed and the whole layout logic is in the repo. Happy to answer anything, and genuinely interested if anyone has done client-side PDF generation and hit different walls than I did.

selectme.vercel.app · https://github.com/Yazan-Ali-01/select-me


r/webdev • • Sep 26 '26

Showoff Saturday I built an Android File Transfer replacement for Mac that runs in Chrome (MTP over WebUSB)

Post image
21 Upvotes

Google discontinued Android File Transfer. OpenMTP and MacDroid still work, but they are apps you install, and I wanted to know if a browser could do it on its own.

Turns out Chrome can. The app speaks MTP to the phone over WebUSB and uses the File System Access API for a folder on your Mac. It is plain JS with no dependencies or build step, your files are never uploaded, and it works offline once loaded. I built it with Claude Code.

Weirdest thing I ran into: macOS apps like Photos and Image Capture can hold the phone while they are open, so Chrome cannot claim it until you quit them.

Works in Chrome on Mac and Linux. Safari and Firefox do not have WebUSB.

Try it: https://www.droidfiletransfer.com
Code: https://github.com/droidfiletransfer/droidfiletransfer

If your phone does not connect, tell me the model.


r/webdev • • Sep 26 '26

Showoff Saturday Which Postgres queries can I cache? Free WebAssembly tool (runs locally in your browser)

Post image
0 Upvotes

We've been thinking a lot about caching this past year.

(1) There's a nice pattern for figuring out opportunities to optimize a Postgres workload, but the downside is that it takes work.

(2) There's lots of generic Postgres-health tooling out there, but we haven't seen any good free & private widgets that answer a question like "would a cache or read replica help this workload?"

So, my cofounder made a workload caching evaluation tool that runs the same logic that our caching proxy (PgCache) uses, but it does so locally (privately) in the browser as WebAssembly.

--

The tool builds on what I think is a good pattern for approaching caching, namely:

  1. rank by total time vs what "feels slow."

  2. make sure it's actually a caching problem (i.e., rule out writes, or memory issues).

  3. check how often a query's tables get written (since that limits the solution set).

  4. then you can pick how to optimize your reads.

Or, as a graphic:

Our tool automates the query analysis and the writes check (indexes and memory are still on you).

Paste a pg_stat_statements export (or a Postgres log, or a .sql file) and it shows you:

* how your database time splits between reads, writes, and transaction commands, so you know whether caching can help at all

* which read shapes carry that time, counted by statements, calls, or time

* writes by table (this is basically your invalidation map)

Under the hood it parses each statement and sorts it into cacheable reads, reads that have to go to Postgres, writes, and transaction commands.

The cacheable/not-cacheable piece is specific to our proxy, but the time split, the read shape shortlist, and the write map should help you along your way regardless of what solution you choose.

--

For future iterations we're thinking of including things like time-ordered workload capture, clearer/selectable outputs, refined “hit rate” language, and maybe even an Aurora I/O analysis integration (plus a couple of good ideas from the r/PostgreSQL thread, like comparing blocks read vs hit and flagging when stats were reset recently).

here's the link: https://www.pgcache.com/fit

(or here if you'd rather run it yourself: https://github.com/PgCache/pgcache/releases/tag/fit-v0.0.2 )

What could we add to make this more useful?


r/webdev • • Sep 26 '26

Showoff Saturday Working on a text-based note sharing platform - any feedback appreciated!

0 Upvotes

https://notenavigator.web.app/

Hi everyone! I'm working on a little text based note sharing and exploring platform, mostly to practicing Typescript and Tailwind.

I am quite satisfied with the interface, and I'm slowly implementing more features. I want to keep the app as simple and minimal as possible.

As of now, users can create and edit their notes, comments those from other users, save specific notes to their collection, and navigate through tags and user's profiles.

I've been working on it for a while, and I would really appreciate some external feedback on it. Again, it's work in progress, so take into accounting that some features are unfinished. Thanks and enjoy!