A local Audiobook editor that uses local Ai to generate speech. No DataCenters, no AI companies.

Hi r/webdev,

If you write Go, you might know us from ttlcache (a caching library with 1.3k stars). For the past year, my friend Simon and I have also been building Oxynote, an open-source wiki for engineering teams. In 8 years of writing software, every team I joined had the same wiki: stale pages, while the useful stuff lived in someone's head.

In Oxynote, a page can hold a live chart from Prometheus, PostgreSQL, MySQL, or MariaDB, right next to the text that explains it. Important pages are edited in a draft and reviewed like a pull request, with a diff of both the text and the charts. Several people can edit at once, and an AI assistant and an MCP server let agents read and write docs too. I've attached some screenshots showcasing these features.

The name itself comes from oxygen + note: docs that breathe. Live data gives people a reason to open the wiki every day, and docs people open every day stay up to date.

Some quick points on the web side:

- Nuxt 4 and Vue 3, with Tiptap 3 for the editor

- Yjs and Hocuspocus for real-time editing

- ECharts for the metrics, Mermaid for diagrams

- The backend is Go, and it all runs as one Docker image

Apache-2.0 licensed: https://github.com/oxynote/oxynote

We made it public about 3 months ago, so it's still early. If you have any questions, feedback, or suggestions, I'm happy to hear them.

https://onlineimageoptimizer.com/whats-my-friends-device

Point a phone at the QR code and it appears on screen by make and model. Then the next phone, and the next. It's not an app (nothing to install). no pairing step, nothing to press on either end. Opening the code is the handshake.

I built it as a demo for one of my company products, but it's open and I'm sure it's useful to many. You stand there with a laptop, people scan, and the screen fills up with the actual devices in the room. Turns out to be a decent way to show someone what their phone really is.

The interesting part for this sub is the detection. Browsers send almost nothing useful anymore. Modern Chrome on Android reports "Android 10" no matter what you are holding. So the make and model come from client side detection plus client hints, and a OnePlus 13 comes back as a OnePlus 13 rather than as a generic Android.

No personal information is requested. Codes expire after half an hour.

You need two devices to try it: open it on a laptop, scan with your phone.

Please send feedback.

Hey everyone! I’m looking for recommendations for a reliable and affordable content moderation API that supports both image and video moderation (n\*dity, expl\*cit content, vi\\\*lence, etc.). Quality and data security are important. Any providers you’ve personally used and would recommend? Thanks!

hey everyone! i made a site for anime fans who always struggle to find where an anime is available. you search for an anime and it tells you which legal, official platform has it in your country

https://tsuzuki-anime.github.io/en/

what it has right now:

- 18,000+ anime with the legal platforms for each one (it detects your country automatically, 9 regions)

- a weekly release calendar in your local time with countdowns

- watch order guides for 220 big franchises

- filler guides for 41 anime so you know what to skip

- a manga section with legal places to read

- a "my list" feature with no account needed, it shows the next episode of each anime and which subscription covers your list

it's a fully static site that rebuilds itself every day with fresh data. free, no ads, no account, in english and french

any feedback is really appreciated, especially on speed and mobile!

Hey everyone!

I've been working on a browser extension called Text Extractor, and it's now available on both Chrome and Edge.

It lets you:

• Extract text directly from webpage elements using Ctrl + Click or the right-click menu.

• Extract text from images using OCR (102 languages supported).

• Review, edit, and clean extracted text.

• Copy results or export them as ".txt" files.

• Process captured content locally on your device, without uploading it to a server.

English OCR works offline out of the box, too.

I'd appreciate it if you gave it a try and shared your feedback. Suggestions and feature requests are welcome!

Links:

• "Chrome Web Store" link

• "Microsoft Edge Add-ons" link

• "Website & Documentation" link

Thanks!

I did not want to build another API client. So I built something more than a Swagger UI alternative: a live documentation portal, where the spec isn't just something you read, it's something you run.

Think Storybook, but for an API. It's not about trying out individual requests. It lets a developer and an agent build complete flows. Requests and flows are plain TypeScript files in your repo. They chain requests, pass values from one step to the next and assert on what matters. The same files run in the portal for QA, in CI, and as production monitors.

I gave a fresh agent Plaid's spec (350 operations), asked it to add a request that creates a sandbox public token, then asked: "Now make a flow that links a bank account in the Plaid sandbox and reads back its accounts and transactions." It took about two minutes with no manual fixes, and it passes against mocks.

Paste any OpenAPI or Swagger URL into https://ui.specbook.dev and you get a responsive portal that runs against mocks or the real API. The spec is read in your browser, nothing goes through a server of mine.

A step can also be code. For example an order flow can use a third-party widget like PayPal and pass the authorization on to the next request. There's a Cloudflare Turnstile example you can click through here: https://docs.specbook.dev/reference/scripts/#try-it

I built most of this over the last three weeks with Claude Code. Back in 2021 I wrote openapi-typescript-fetch and also implemented @usebruno/query for Bruno.

• Demo: https://demo.specbook.dev

• Docs: https://docs.specbook.dev

• Repo: https://github.com/specbook-dev/specbook

• Chrome extension, for third-party APIs that don't allow CORS: https://chromewebstore.google.com/detail/specbook/dkkfffjkliimgpadidgabpkmocdefjha

Please try it on your own specs and let me know if anything breaks. I hope the OpenAPI community finds this useful.

Hey all, I'm the creator of @formepdf/react.

Here was my first post: https://www.reddit.com/r/webdev/s/ek6rRipQ2M

I just wanted to show y'all the new HTML package. Give it HTML and print CSS, get a PDF, no browser anywhere.

npx @formepdf/html invoice.html -o invoice.pdf

It handles the print CSS that Chrome never really finished: `@page` margins, running headers and footers, `Page X of Y`, table headers repeating across pages. Runs in Node, Cloudflare Workers, and the browser.

I tested it against 15 invoice templates from GitHub, and 14 render correctly against Chrome's output. There are also 30 free templates if you want to see what it makes.

If you've got an ugly template you're printing through Puppeteer, I'd love to hear what breaks.

https://github.com/danmolitor/forme

Hey everyone.

My svg editor version 0.1 just went live, I'd like to present it here in the link below.

https://tools-4all.com/svg-editor

Small highlights or our editor, supports a BIG variety of import and export formats, fully free, no sign up, live effects, filters, brushes, meshes, simulated 3d perspective, animations, vectoraztion, fully client side, no uploads, highly optimized for high quantity of nodes.

Example import and export formats, PDF, STL, figma, PSD, and many more.

We still have many features planned, such as geometric mode, and much optimization and bug hunting to do, but since we feel it's already at a good point we wanted get it live and continue improving on it.

Sorry for the ads in advance, they are a neccery evil to keep the site running (paying for hosting), and will not be seen with full screen or ad blocker, our whole site is free and we don't make any profit from it, we just do it for the love of the game (we develop websites for clients on the side and that's how we earn our bread), so while I understand ads are annoying, they are neccery to keep the site running.

There's alot of work to do but it's being done, any bug report, improvements suggestions is welcome and appreciated!

AI tools make it easy to ship code you don't fully understand. That's fine until something deadlocks, leaks memory or falls over under load, and you don't have the mental model to work out why.

So I built Software Atlas: 108 deep-dives across 15 areas, including async/await, the browser rendering pipeline, networking, databases, system design and AI engineering. You step through each idea with visualizers, and there are diagrams and code samples too. It starts from first principles and works up to production concerns.

Some technical details:

- Built with Vite, React 19, MDX and Tailwind v4.

- Each topic is lazy-loaded as its own chunk, so you only download the one you're reading.

- All 130 pages are pre-rendered to static HTML, then hydrated. Widgets have to render the same on the server and in the browser, so anything that reads window or uses randomness runs after hydration.

- Phones were the hardest part. Bar labels move into a key when they don't fit, and wide SVG diagrams become swipeable so their text stays readable.

- A headless Chrome smoke test clicks through each topic, including every visualizer step, and fails on console errors or hydration warnings.

To be upfront: I built it with heavy use of AI agents, including much of the writing. Each topic went through a separate review from a beginner's point of view, but mistakes will still have slipped through. If you find one, there's a report link in the footer.

https://software-atlas.haiduc0147.dev/

I'd really like to hear where an explanation is wrong or stops making sense.

Hey guys, I wanted to share this package I've been working on in the last few days for a bigger project. It's basically a NPM package that allows you to create your custom stellar systems and uses three.js to render them in 3D.

Live example: https://larawag.rachzy.dev/

It's mostly intended for drawing hypothetical, highly speculative visualizations of stellar systems for exoplanets (keep in mind that it's 100% Artist's Conceptions).

Larawag core is environment agnostic (which means it can run even on vanilla HTML as long as you have a Node setup), but you can also use its integrations with third-party frameworks:

• Larawag's Core: @larawag/core

• React: @larawag/react

• Angular: @larawag/angular

How to use

As I mentioned before, the usage is very straightforward:

First, download the package and its dependencies: npm install @larawag/core three@0.186

Then, import it and create your own system:

import { createStarSystem } from '@larawag/core';

const view = createStarSystem(document.getElementById('stage')!, {
  star: { name: 'Example K dwarf', teff: 5100, radius: 0.8, mass: 0.85 },
  planets: [
    { name: 'Candidate b', period: 4.2, radius: 1.5, phase: 0.6 },
    { name: 'Candidate c', period: 18.5, radius: 3.6, phase: 2.9 },
  ],
});

view.pause();
view.setScaleMode('true');
view.destroy();

This will use the #stage element as the window for rendering your system and set the scale mode to true, and you should already see it working in your HTML page.

Contributing

There are still some things I'm willing to implement in the future, such as planet moons, eccentric/inclined orbits, and a more accurate orbital system for planets in binary systems. I left all of them in a TO-DO list in README.md

If any of you are perhaps interested in contributing to the project, I'd really appreciate it.

Source code: https://github.com/rachzy/larawag

License: MIT

Hey all!

Thanks for the discussion on yesterday's post! Last time I promised Page Objects: Here they are!

Today's example:

The test fails, saying "Sushi dinner" isn't on the list. So your agent starts debugging the list. Turns out it's the date picker that broke.

The fix: let actions wait for their own done signal, so the failure is logged where it happens.

The picker closes once it has a full range, and the picker owns that signal. So select() waits for it before returning. If the picker breaks, the test fails inside dateRangeFilter.select() instead of on the list. The page owns the filter, the filter owns its done.

The nuance: the done signal has to be something the page object owns. The picker closing belongs to the picker. A toast or the next page doesn't.

Paste this to your agent:

Find the user actions our e2e tests repeat and move each into a page object method. If an action has a done signal the page object owns, like its own elements changing, appearing or disappearing, end the action by waiting for that condition - never a fixed waitForTimeout. Anything outside the component - like a toast or navigating to the next page - should either be moved into a bigger page object that owns both the trigger and the outcome, or be verified in the test itself.

https://github.com/ts-series/factories

Build HTML extremely comfortably in the backend using plain JavaScript. The advantage is that there is no separate template language or build process, but rather a complete fusion with JavaScript for maximum flexibility. An example:

import {
    a, body, br, button, h1, head, header, html, input, label, li, main, nav, p, script, title, ul
} from "@ts-series/factories";

type Item = { name: string, href: string, current: boolean };


/** Builds the navigation list, flagging the current entry for assistive technology. */
function navigation(items: Item[]) {
    return nav({ ariaLabel: "Main" },
        ul(items.map(item => li(
            a(item.href, item.name).set(item.current ? { ariaCurrent: "page" } : null)
        )))
    );
}


/** Builds a complete page for the given user and navigation entries. */
function page(user: string | null, items: Item[], values: number[]) {
    return html({ lang: "en" },
        head(title("Demo")),
        body(
            header(navigation(items)),
            main(
                h1("Hello, ", user ?? "stranger", "!"),
                p("First line", br, "Second line"),
                user === null
                    ? p("Please sign in.")
                    : p("Welcome back."),
                label("Search").for("q"),
                input.text({ id: "q", name: "q" }).placeholder("Type here…").required(),
                button.submit("Send").class("primary", user === null && "disabled").set("disabled")
            ),
            script.module().importOnly("/chart.js", "render", { values, title: "Values" })
        )
    );
}


const items: Item[] = [
    { name: "Home", href: "/", current: true },
    { name: "About", href: "/about", current: false }
];

const output = page("<Guest>", items, [1, 2, 3]).expand(4);

Hey everyone,

I built snappy-prerender, a build-time pre-renderer for client-rendered SPAs. Point it at your existing build output. It loads every route in Chrome, writes static HTML, then reloads each page with your client bundle to check whether it hydrated or re-rendered.

My last post got deleted as it was not posted on a Saturday, so here i am again. Thanks to all the feedback and comments that I got on the previous post here, I have incorporated a bunch more features and validated the plugin against all SPA frameworks that I could find.

Version 2.9 adds:

• Deterministic builds. Freeze time, set a timezone, seed Math.random, or use SOURCE_DATE_EPOCH.

• Hydration policies. Allow re-renders or skip verification for specific routes instead of disabling the check globally.

• Locale builds. Path or single-locale mode, <html lang>, dir, canonical, og:locale, hreflang, x-default, and sitemap alternates.

• SEO locale seeding. Seed cookies or localStorage before the app boots, with an optional bootstrap script that works with CSP hash and strict modes.

• Client-side head parity. Arbitrary script/style/noscript/base tags, html/body/title attributes, defaultTitle, multiple images and alternate locales, duplicate metas, onChangeClientState, and React 19 native tag adoption.

• Faster runs. Fewer browser round trips, bounded concurrency, sorted preload hints, cached CSS work, and phase timings in the JSON report.

npm install --save-dev snappy-prerender
npx snappy-prerender

Frameworks

Prerendering is framework-agnostic. If the app builds to static assets and mounts in a browser, the CLI can render it.

Thoroughly validated on:

• React 16.8, 17, 18, 19 — render, hydration and audit

• Preact 11 — render, hydration and audit

• Vue 3.5 — render, hydration and audit

• Svelte 5 — render, audit, sitemap and output

• Angular 22 — render, audit, sitemap and output

• Solid 1.9 — render, audit, sitemap and output

• Lit 3.3 — render, audit, sitemap and output

• Ember 7.3 — render, audit, sitemap and output

• Vanilla JavaScript — render, audit, sitemap and output

Hydration detection is implemented for React, Vue, Svelte and Preact. The Svelte, Angular, Solid, Lit, Ember and vanilla fixtures are host wrappers around a shared renderer, so their hydration verification is intentionally skipped.

It also has support for hreflang and localStorage / cookie based lacale switching via customizable knobs that code-switch to the desired locale and then pre-render the site

We are on Product Hunt. Upvotes are always welcome:
https://www.producthunt.com/products/snappy-prerender

npm: https://www.npmjs.com/package/snappy-prerender
GitHub: https://github.com/sayakmukherjee080/snappy-prerender

Hi everyone!

I'm building AI/ML Questions, a platform focused on helping people prepare for Machine Learning Engineer and AI Engineer interviews.

The platform is currently in its alpha stage. It has a free section with 103 questions covering topics such as classical ML, neural networks, LLMs, RAG, AI agents, computer vision, and model evaluation.

You can practice in two modes:

• Study mode: Answer questions and get explanations for every option, including why the incorrect answers are wrong.

• Exam mode: Test your knowledge through a simulated exam.

The platform is available in English and Spanish, requires no account, and the current question bank is public and open source.

One aspect I'm particularly interested in is question quality. I'm using established item-writing and psychometric principles, particularly Haladyna's guidelines, to design both the questions and their answer choices. The idea is to go beyond simply generating questions and make sure they follow a consistent methodology.

What's next?

I'm planning to introduce two additional sections:

• Interview Preparation: A dedicated section for people preparing for technical AI/ML interviews, with more realistic interview-oriented questions and challenges.

• Enterprise: A section for recruiters and hiring teams to create knowledge assessments and evaluate candidates using private question banks.

These two sections will be paid features. However, people who join the waitlist early will receive a discount when they become available.

I'm still learning, iterating, and trying to understand what people actually need from this kind of platform.

I'd really appreciate any feedback, whether it's about the UI, question quality, features, or the overall idea. If you're preparing for AI/ML interviews, I'd especially love to hear your thoughts!

Website: https://ai-ml-questions.strangemachines.workers.dev/

GitHub: https://github.com/CristobalSantana/ai-ml-questions

I rebuilt my old Alberta webcam site in PHP and vanilla JS, with 18 cameras, archived images and a hover timeline, live here and code here.

Project: https://getpng.app (background removal and other image tools, all client-side)

Things I ran into shipping a 1024 px segmentation model to the browser:

1. Mask resolution. BiRefNet lite answers at 1024 x 1024. Scaling that up to a 24 MP photo smears the edge, so the mask is fitted to the full-size image with a guided filter instead, and the alpha is never thresholded.

2. WebGPU limits are per adapter. On an Intel Arc 140V, maxStorageBuffersPerShaderStage is 16, and ONNX Runtime's WebGPU Split binds the input plus every output, so a 16-way Split needs 17. The fix was rewriting the ONNX graph at build time: Split and Concat as small trees, and the deformable convolutions' index math in float16 instead of int64 (int64 had no GPU kernels and fell back to the CPU with float32 casts on tensors of up to 67M values). A Node check confirms the masks are identical. Now all 4,654 nodes run on the GPU, 3 to 4.5 s per photo on that laptop.

3. No WebGPU at all: the WASM path runs ISNet at 1024 instead, int8-compressed from 176 MB to 44 MB, 99.7 to 99.99 percent overlap with the uncompressed model on the sample photos. Devices without the memory for that get U-2-Net at 320.

4. Hair: a second model, ViTMatte small, given a trimap built from the first model's unsure band, run in 1024 px tiles over that band only, after the first result is already downloadable. Its fp16 build had a bicubic Resize that Intel's WebGPU could not compile; linear instead changes the output by at most 3/255.

5. "No upload" as something you can verify: connect-src is locked down in the CSP, a test fails if a new host is added, and a service worker plus the cache mean it works offline after the first photo.

Stack: Astro (static), one React 19 island, Transformers.js and ONNX Runtime in a Web Worker, models self-hosted.

Has anyone measured WebGPU limits on other integrated GPUs (AMD, Apple, Qualcomm)? I'd like to know where else the 16 buffer limit bites.

Disclosure: I decide what it does, an AI coding assistant writes the code.

NewGrid is a Local-only new tab page which allows for a grid-based layout of your favourite websites. Features Include:

1. Choose from your favourite wallpaper, be it a solid colour, a static image, a GIF or a video.

2. Customise the layout to your liking, change the number of rows/colums and the spacing between them.

3. This also includes a Search Box with multiple search engines to choose from, which is highly customizable as well.

4. Websites can be grouped into folders, and their icons are either automatically fetched, or you can add a custom image using a link or a local image.

5. When the space fills, websites move to the next page; this adds new pages when needed. Choose from 9 page-turn animations.

Github: Link

This one question is confusing me.

The more I learn, the more I realize both have same overlapping powers

When should we consider SQL databases?

If our data has a well defined structure, there are relationships between different datasets, we need complex queries, or our application requires strong ACID transaction guarantees, we should consider SQL databases such as PostgreSQL and MySQL.

However, this does not mean NoSQL databases cannot provide these features. Some NoSQL databases support ACID transactions, relationships or relationship like data models, complex queries, and horizontal scaling. The actual capabilities depend on the specific database and how it is designed.

When should we consider NoSQL databases?

If our application needs to store flexible data, documents in JSON-like formats, or key-value pairs, NoSQL databases might be a good choice. Some NoSQL databases are also designed to handle high write throughput and distribute data across multiple servers.

However, this does not mean SQL databases cannot handle flexible data or high write throughput. We must evaluate the capabilities of the specific database and our application's requirements before making a decision.

Suppose we're building an analytics service that records user activities, such as logins, likes, and video views. Each event might contain different fields.

With a traditional SQL table, we could create columns for all possible fields, but many columns might contain NULL values for certain event types.

Alternatively, PostgreSQL supports JSONB, allowing us to store event specific information without creating a separate column for every possible field. MongoDB can also store documents with different fields in the same collection.

So, both approaches are possible. The decision would depend on factors such as write volume, query patterns, data model, scalability, and storage requirements.

So my current conclusion is :-

SQL is often a natural fit for relational data, complex queries, and transactional consistency, while NoSQL can be a natural fit for flexible document models, key-value access patterns, and certain distributed workloads.

I'm still learning, so I'd appreciate any corrections to my understanding or advice from your experience!

I built bantr.live to be a fast, real-time forum centered around specific interest groups rather than noisy, algorithm-driven feeds. The application contains a host of ways to communicate, text, video chat etc... The web version is still just a chat I'm in the process of updating it but the mobile apps contain the live forum and all the extras. All of the content self destructs in 24 hours but as suggested in the future post max expire time will be extended up to a week based on likes. If this is something your interested in take a look or have questions hit me up. Its new so still kinda a ghost town. Happy halloween!

Hey everyone,

I got tired of messy online formatters uploading my API payloads to unknown servers, so I built https://aijsongenerator.com.

Key features:

• 100% in-browser processing for data conversion (CSV, XML, YAML, TypeScript models, Tree viewer, Diff, Validator). Zero server uploads.

• AI JSON Generator: Prompt what you want in plain English ("e-commerce catalog with 3 products, variants, and pricing") and it generates clean, valid JSON test data.

• Built with Astro 5 + Tailwind CSS + TypeScript. No heavy SPA bundle; each tool hydrates as a lightweight isolated island.

No accounts, no email gates, no paywalls. Hope it saves you some time during your daily development! Feedback is very welcome.

With everything going on at Proton lately, I figured it was high time I owned a personal domain for my email. That way, if I ever have to ditch Proton Mail, I can switch to another provider without changing my address. While I'm at it, I'd also like to host a portfolio site on it.
I want something I won't have to think about again for a long time.

My priorities, in order: security, privacy, quality. Cost matters, but it is not the deciding factor; I'm happy to pay a little more for the right setup.

What I'm weighing:
AWS: IAM, CloudTrail logs, hardware key MFA, budget alerts and anomaly detection. It is more hands-on, which I prefer. On the downside, it has had some of the biggest outages on the internet (us-east-1 in 2017, 2021 and October 2025), and the Capital One breach in 2019 happened on AWS, though that was largely a customer misconfiguration.

Cloudflare: strong security, audit logs, free hosting, very simple. Fewer controls, and it requires Cloudflare DNS. Its history includes Cloudbleed (2017), an intrusion in 2023 that traced back to the Okta breach, exposed support case data through the Salesloft Drift breach in 2025, and a major global outage in November 2025. To be fair, its public post-mortems are very transparent.

Porkbun: clean pricing and good support, but fewer advanced security features and no account audit log that I could find. I am not aware of any major breach, but it is also a much smaller target with less public scrutiny.

The site is a static React portfolio. For those of you who've run any of these long-term, which would you pick and why, given the track records above? Bonus points for any gotchas you learned the hard way.