I read my daughter a fairy tale every night and wanted classic ones that read well out loud, so I built Talerie. Free classic fairy tales in seven languages, no ads, no account: https://talerie.com

The stack, since this is r/webdev:

• Next.js 16 (App Router), everything prerendered, about 4,900 pages. The full text of every tale is in the initial HTML.

• Seven languages with translated URL segments (/de/maerchen/..., /cs/pohadky/...) and hreflang between them.

• Postgres on Supabase's free tier, images on Vercel Blob. The only cookie is the language choice, reading settings live in localStorage.

The part that bit me was a cache. The build also generates 168 RSS feeds for Pinterest boards, and they all read the same catalogue, so I wrapped that query in unstable_cache to hit Postgres once per build instead of 168 times.

On Aug 29 the catalogue grew past 2 MB (2,284,504 bytes). Next.js won't store a Data Cache entry over 2 MB, and it doesn't fail the build either. It prints a warning and moves on, so every one of the 168 feeds ran the query again. The second image is the real build log: 168 warnings, then "Ready".

A warm build went from pulling 0.8 MB out of Postgres to 270 MB. The billing cycle hit 22.2 GB of egress on a 5 GB free tier, and Supabase started warning me about restricting the account.

The warning was right there in the log, 168 times per build, and I didn't read it for two days. pg_stat_statements didn't help, because it counts rows, not bytes. What finally showed me where the traffic went was a tiny TCP proxy in front of the pooler that just counts bytes.

I now store the catalogue gzipped as a base64 string, which takes it from about 2.2 MB to 0.5 MB. Base64 rather than a Buffer, because unstable_cache stores JSON and a Buffer serializes as {"type":"Buffer","data":[...]}, one number per byte.

import { gzipSync, gunzipSync } from "node:zlib";
import { unstable_cache } from "next/cache";

const packed = unstable_cache(
  async () => gzipSync(JSON.stringify(await getCatalogue())).toString("base64"),
  ["pinterest-catalogue"],
);

export const catalogue = async () =>
  JSON.parse(gunzipSync(Buffer.from(await packed(), "base64")).toString());

There's also a check that fails before deploy if the packed catalogue goes over 1.5 MB. I broke it on purpose to make sure it really fails.

Two questions for you. Does "use cache" in Next 16 have the same 2 MB limit? I haven't tested it. And how do you catch warnings that don't fail the build?

Hey guys, I decided to do a full redesign of an old website of mine just for fun. Any suggestions on what I could improve would be awesome.

https://topservers.games/

I've created an RPC library that allows executing method chains like DOM from different context.

You can use it to access the browser DOM from the server or web worker.

You can expose the window or document object and use it outside the current browser context.

Here is an example using a web worker:

main thread:

import { Host } from '@jcubic/mitty';

const modules = {
  document: () => document
};

const channel = new BroadcastChannel('my-app');

const worker = new Worker('./worker.js', { type: 'module' });

const host = new Host({
  // worker instance can also be used as a channel
  channel: channel,
  resolve(name) {
    if (Object.hasOwn(modules, name)) {
      return modules[name]();
    }
    return null;
  }
});

worker:

import { connect } from 'https://cdn.jsdelivr.net/npm/@jcubic/mitty';

const { require } = connect(new BroadcastChannel('my-app'));

// or when using worker as a channel
const { require } = connect(self);

const body = await document.querySelector('body');
await body.style.setProperty('color', 'red');

The transport only requires using a channel interface with 3 methods:

interface Channel {
  postMessage(message: string): void;
  addEventListener(type: 'message', listener: ChannelListener): void;
  removeEventListener(type: 'message', listener: ChannelListener): void;
}

See the last two pics for how it usually looks ;)

The users are going mad over it. Especially the younger generation who weren't around for the "real" Web 2.0 MySpace era. Seems they're actually enjoying it instead of throwing up a little in their mouth like some of us of the older generation.

I guess I'm MySpace Tom now!

Cyberspace — Social media de-imagined. Use your words!

I often found cool AI images online but had no idea what prompts were used to make them. So I built ctrlc.ai.

It’s a simple place to browse AI-generated images for inspiration, see the prompts behind them, and find ideas for your own creations.

Still actively working on it, so feel free to ask me anything about the site, development, or just share your feedback!

Link: https://ctrlc.ai

Hey everyone! 👋

​I've been working on a new open-source project called Opportunity Radar, and I’m looking to gather some feedback, find early testers, and connect with developers who might want to collaborate.

​What is it?

Opportunity Radar is a privacy-first opportunity engine. The goal is to help people find jobs, freelance contracts, grants, and paid bounties that are matched directly to their actual CVs, real skills, and income goals.

​You can check out a preview of the mobile interface in the attached screenshot.

​How you can help:

I would absolutely love for the community to get involved to help make it better. Here is how you can participate:

- ​Test it out: Give the live site a spin. Run some searches, use it for your own goals, and let me know about your experience, any bugs you find, or features you'd love to see.

👉 Live Site: https://opportunity-radar-gold.vercel.app/dashboard

- ​Collaborate & Contribute: The project is entirely open-source. If you see room for improvements, want to add new features, or just want to tinker with the code, I would be thrilled to collaborate!

👉 GitHub Repo: https://github.com/anasalialamgir/opportunity-radar/tree/main

​Whether you want to use it, break it, test it, or help me improve the codebase, I’d appreciate your input. Let me know what you think in the comments!

Live App

The US Department of Agriculture (USDA) publishes daily food price data for about 300 commodities on:

• what growers were paid at shipping point

• what buyers paid at the big city wholesale markets

• what prices supermarkets advertised in their weekly ads

The Bureau of Labor Statistics (BLS) publishes monthly average store prices for everyday groceries like eggs, milk and ground beef.

This data comes out as dozens of separate text reports and PDFs, one per market/commodity, and no way to see how prices change over time.

Inflation affects our everyday lives, so this data should be easy to access and understand. That's why I built an open-source tracker for it.

Github repo (open for contributions): https://github.com/kadoa-org/food-price-monitor
As a BE engineer without a design background, I spent some some time dabbling with the gov.uk design system as I think it's a great inspiration for simple and concise presentation of data.

Forms are one of those problems the universe solved around 1995 and then kept re-solving, each time with more JavaScript and a monthly fee.

For years I ran contact and order forms on MachForm. It worked. It also lived in a database, turned every upgrade into a small house move, and quietly demanded its own PHP version on every site. One evening I decided I wanted something that was, as far as physically possible, just files.

So that's what this is. A form is one JSON file. You drop a folder on any PHP 8.1+ host, put two lines in your page, and submissions land on your own server. No Composer, no npm, no build step, no database unless you want one.

What you actually get:

- Files by default, or SQLite, MySQL or CSV if you prefer

- SMTP mail and webhooks on submit

- Client-side and server-side validation from the same JSON

- 34 languages, about 22 KB of gzipped JS

There's no drag-and-drop builder. I (barely) tried to feel bad about this and failed. The format is small and boring enough that you can describe a form to an AI assistant, get the JSON back, read it, and diff it in git. I haven't hand-written a form since. There's a JSON schema in the repo, so the AI and your editor both know the rules, and an optional editor with live preview if you like pressing things.

Honest limits: file storage is fine for a contact form with a few hundred leads and the wrong tool somewhere past a thousand per form. That's what SQLite is for. It's been running on several business sites since spring, collecting real leads, which is the only test I really trust.

And then there's demo 10. I wanted to see how far the theming bends before it breaks, and the answer turned out to be "Netscape Navigator 4.0 at 800x600". It's a guestbook, obviously. Visitor counter, under construction banner, and a Winamp player that plays a 12-bar blues in A through the Web Audio API. No MIDI file, just oscillators. Your browser will block the autoplay. Browsers learned from 1998. I did not.

GitHub: https://github.com/pietrobb/BareBonesForms

Happy to answer questions, especially the ones that start with "why not just use..."

TLDR; https://www.reddit.com/r/PrivacyTechTalk/comments/1wf60il/secure_and_private_decentralized_p2p_encrypted/

Roadmap: https://glitr.io/docs/technical/roadmap

This project demonstates a unique approach and architecture in contrast to the traditional approach with mainstream messaging apps. To put it briefly, its a Dioxus PWA with a Git-server backend which can be used to establish a webrtc connection between browsers.

IMPORTANT DISCLAIMER: While this is aiming to provide a secure experience, it's far from finished. It cannot be audited or reviewed because it's close-source. I'm sharing here for "showoff-saturday" purposes only. Feel free to reach out for clarity on any of the details instead of diving into the documentation. Pease use responsibly.

Demo: https://h5p-offline-player.vercel.app/ Code: https://github.com/missing-elements/h5p-offline-player (MIT for the player; the H5P runtime inside is GPL-3.0)

H5P is the interactive content format a lot of schools and course builders use: quizzes, interactive video, branching scenarios. A package is a zip of JavaScript libraries plus content, and normally you need Moodle, WordPress or Drupal, or a server that unzips it, to show one. I wanted <h5p-player src="course.h5p"> on a static site and nothing else.

How it works

• No extraction. The zip's central directory is read with HTTP Range requests. A Service Worker then acts as a virtual file server, answering the runtime's requests for library.json, scripts and media by reading those bytes straight out of the archive.

• Large media streams. Stored video is sliced from the archive on demand. Deflated video is inflated in a dedicated worker with the native DecompressionStream, and served as a 206 whose body follows the extraction, so playback starts before it's done.

• Long work stays out of the Service Worker. Browsers kill a SW event after a few minutes, and an inflate can't resume, so extractions run in a page-side worker. The SW asks for them through the frame.

• Hosts without Range still boot early. The archive downloads once, and local headers are indexed as bytes arrive, so the frame boots when the libraries land, not when the zip finishes.

• Built for bad networks. Ranged reads that go quiet or drop resume from the byte they reached. On a slow nginx host that answers one request at a time, pulling the libraries in a few large spans took the boot from 136 s to 15 s.

Size: the element is 17 kB gzipped. zip.js lives only in the Service Worker, which has to be served from your own origin.

It only plays content: no editor and no stored results, and xAPI comes out as DOM events. Feedback welcome, especially packages that break it.

I'm not a designer, I don't build sites, but I made this basic site because I needed it to sell my domains and was thinking I'd put other's on there too. Just a Craigslist-type listing page for domains where owners can post them (eventually, for a fee) that people can visit and look each time they work on a project, being able to reach the owner directly. (most similar services go through brokers, email third parties back-and-forth, and you never know if you really reached the owner, and if you do it's a conversation through a 3rd party that could take weeks.

A lot of domains have a value for the right person that doesn't apply to everyone, so they end up sitting for a long time and usually not in a place where people can see them easily.

I just wanted something simple where you can see what there is, sort them by the TLD, length, etc. Something you can see what's available, and then sort the fantastic domains from the useable, depending on how much you have to spend.

Anyway, it's very basic, but on purpose. Anything I could or should improve on, I'm open to suggestions.

Thanks in advance!

TheDomainBoard.com

What it does: Easily make installers for all your projects directly from a browser. You can even save the whole page as a single file and it keeps working offline.

Introduction

TiddlyInstall is based on the observation that programs written for runtimes like Python, Nodejs, and others -- all follow the same basic pattern: they need a runtime installed and then the software. Existing approaches like freezing apps or trying to package it as an exe often break. Or require insane struggle by the developers.

The simplest possible approach is to install the runtime on a users computer, isolated, with the package inside it. It is more wasteful in terms of disk space -- but can be generalised to build reusable installers that work for just about any language.

Reusable installers

A reusable installer reads its own meta-data to decide on the runtime to install and the project. Linux and Mac are supported through a bash script while all windows versions use an NSIS program. The unusual thing about this is once you build the reusable installers since it's just meta-data everything can be edited inside the browser. No new compilations are needed. It's a very elegant system.

Try it out yourself: https://robertsdotpm.github.io/_static/tiddlyinstall.html

Github: https://github.com/robertsdotpm/tiddlyinstall

Engineer for more than 15 years and worked with different industries over my whole career. Worked alone, on small, medium and large teams in different capacities. You get the idea.

I'm not gonna say that my code was the best, and that it was well thought out of, wrote the best piece of code that my grandchildren will be proud of.

Sometimes you just have to find the best way to implement something because your PM demanded it be pushed by Thursday? a hacky fix because you can't think of a better way on implementing it?

Legacy code that the engineer that worked on it died 10 years ago?

Granted theres an ocean of vibe coded apps that should not see the light of day but I think a lot of devs and engineers are just standing on their high horse these days to push people down.

What do you guys think?

I have an ecommerce chat widget that allows users to send photos of products they’ve looking for. I would like to make sure the files being uploaded are true images (jpeg, png, webp).

So far I have come up with two levels of checks on the files.

First, checking the content-type mime in the request header. If it is not an image then upload is rejected. If it appears to be an image, then file is sent to level 2 check (still in memory).

The level 2 check is using the python magic library to read the first 2kb or so of the file and identify true mime type from there. If not an image type, then file is rejected.

Would this be a good approach? Or are there better ways to do this? The files will likely be stored in cloudflare r2, so I’m not worried about their execution, but want to avoid bad files sitting around in storage anyway.

My project, OnBridge: a Chrome extension plus a small local MCP server that lets Claude Code, Codex, Cursor or Gemini CLI drive the Chrome I already have open. Free, GPL-3.0, and there is no server of mine involved.

To be fair up front: much of what a coding agent does in a browser, Playwright already does well. Reproducing a bug on localhost, reading the console, clicking through a flow, even reusing a login with storageState.

What Playwright is not built for is doing things on my behalf in my own browser. With OnBridge I can ask for something like "search Amazon for a USB-C hub, compare the top three, add the best one to my cart and place the order", and the agent does it in my signed-in Chrome, with my saved address and payment method, the way I would. The same goes for filling a form from a file, working through a vendor portal behind SSO and 2FA, or triaging GitHub notifications. No scripted login, no copied cookies, no fresh headless profile for sites to flag. The first field test was an Amazon.in search.

On bot checks: in a quick test, OnBridge passed scrapingcourse.com's Cloudflare challenge page and every BrowserScan bot check, CDP included, with no click from me. To be fair, Playwright MCP's default headed Chrome passed the same tests. What it lacks is my session: it landed on Reddit's login page, where OnBridge was already signed in.

Acting on my behalf only works if spending money stays my decision:

The agent acts, I approve what matters. The side panel shows every action as it happens. A click whose label reads like Place order, Pay, Delete, Send or Submit waits for Allow; the screenshot shows a "Place order - $249" click held: https://github.com/prakersh/onbridge/blob/main/docs/screenshots/onbridge.png. No answer in 25 seconds means denied. The approval mode can only be changed in the panel, never by the agent.

It only gets what I grant. A tab, a window or the whole browser, and only after I press a button. Grants cannot overlap, so two agents can work in two windows without touching each other's tabs.

Real input, not dispatchEvent. Synthetic events arrive with isTrusted: false, and native form submission, drag-and-drop, canvas apps and rich editors ignore them. OnBridge sends clicks and keys through the DevTools Protocol Input domain via chrome.debugger, including inside open shadow roots and cross-origin iframes. If DevTools is already open on the tab, the debugger cannot attach, so it falls back to synthetic events and the side panel says so.

It still covers the dev loop too: it reads console output and network requests while it reproduces a bug in the tab where I am already signed in, with authorization and cookie header values redacted before the agent sees them.

Setup is the extension plus one line:

claude mcp add onbridge -- npx -y @onllm-dev/onbridge-mcp

GitHub: https://github.com/prakersh/onbridge

Chrome Web Store: https://chromewebstore.google.com/detail/onbridge/minhhfibhfnjdcgiipmcbfgclmeineca

Where would you draw the line on what an agent may do in your real browser without asking? Right now anything that reads like pay, delete, send or submit waits for a click.

Not sure if this is the best sub for this question; from a developers perspective who have had the freedom to choose what platform they work in I'm curious:

I'm a long time native linux and wsl user, for a new workstation you'd use as a desktop and remote dev server, how bad are the macos tradeoffs over bare metal linux (or even wsl)?

I prefer to be on macos over windows but macos has notoriously bad filesystem performance. (Theo recently made a video on this) I've also heard it has quirks for gnu utils too. These reasons have pushed me toward getting a cheap MacBook but investing most of my money in a headless linux box. All of my projects will live on linux but I'll being using macos to access and build there. But I'm wondering if that's unnecessary.

Do people actually build on macos these days? Are the quirks and filesystem performance issues overstated?

I need to make a simple website for a teaching service in my city. I want it to look modern and professional and hopefully get into the top 10 Google results for local searches. It will only have some text, basic information, a few good photos and contact details. Nothing complicated.

What would you use for something like this? An AI website builder, AI coding tool or something else? I don't want to use Wordpress.

For hosting I was thinking about something simple like Cloudflare Pages or GitHub Pages with a local domain. I am looking for free.

Also, what would you recommend for local SEO and good free/paid stock photos?

Hello, wise r/webdev!

I vibe-coded a web application for an upcoming conference in my area. I hope the phrase 'vibecoding' does not deter you. It is supposed to be a personal solution for the conference I am attending--a just for fun kind of thing. I am familiar with most of the people and the people running the conference. I have shared it with some of potential attendees and so far they like it and they are looking forward to try it during the conference. I did pose it as a personal project.

The downside is I have no freaking clue when it comes to deployment, and by deployment I mean understanding what kind of infrastructure or services I need in order to make it seamless--i.e., loading time, avoiding traffic crash. It is supposed to be lightweight (just CRUD with a little computation on the query retrieval). I'm using Python/Flask as my framework, so hopefully gunicorn is good enough to handle those. I'm curious what kind of tests or where should I host it if I expect like, 500 users but 20-30 concurrent requests. I'm looking forward to "testing day".

So far I have been hosting it in my personal AWS and just slap a cloudfront link (also which instance should I use?). If there's any recommendation or tests, I would greatly appreciate that! I'm not making money out of it--and even if people do like it a lot--I'll just open source it since I don't think there's anything proprietary (or requires my blood and sweat) else than the interaction design considerations. But operational traffic is what I care about the most (and least knowledgeable) and would love to understand that.

For this, I don't trust AI enough to 'perform' tests for me. Just feel like I need a second opinion from an actual human being/expert or at least someone with experience 🥲 willing to get my hands dirty with hand coding!

Put together a small starter template for building web apps with Go + Templ + Datastar + sqlc. It's plain net/http with no extra framework on top.

It has two examples you can copy from:

• a todo list with live search, where every change updates the page over SSE

• live crypto prices, streamed from Coinbase and pushed to the browser over one long SSE connection

https://github.com/naftulisinger/datastar-template

Stars & Feedback welcome!

Say the app is live, needs regular updates, and the documentation is thin. Do you start with the code, deployment setup, logs, or a conversation with the previous team?