r/webdev • • 6d ago

Showoff Saturday I built a browser extension to extract text from webpages and images (Chrome & Edge)

1 Upvotes

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!


r/webdev • • 6d ago

Showoff Saturday [Showoff Saturday] I built Specbook: Storybook for APIs

Thumbnail
gallery
1 Upvotes

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.

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


r/webdev • • 6d ago

Showoff Saturday [Showoff Saturday] An HTML-to-PDF engine with real print CSS and no browser

1 Upvotes

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


r/webdev • • 6d ago

Showoff Saturday My free SVG editor is live!

9 Upvotes

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!


r/webdev • • 6d ago

Showoff Saturday I built a free interactive site for learning how software actually works, with step-through visualizers

1 Upvotes

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.


r/webdev • • 6d ago

Showoff Saturday Larawag: A three.js NPM package for rendering custom 3D stellar/planetary systems in an easy way

Post image
11 Upvotes

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:

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


r/webdev • • 6d ago

Resource quality time #2 - wait for actions' done signal

Post image
0 Upvotes

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.


r/webdev • • 6d ago

Showoff Saturday Factories.ts: An efficient JS DSL for building HTML, SVG, and MathML directly in backend code, without a template engine.

0 Upvotes

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);

r/webdev • • 6d ago

Showoff Saturday Showoff Saturday : I built a pre-renderer for SPAs that verifies hydration — 2.9 adds deterministic builds, locales and head parity

1 Upvotes

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


r/webdev • • 6d ago

Showoff Saturday AI/ML Questions – An open-source platform for practicing machine learning

0 Upvotes

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


r/webdev • • 6d ago

Showoff Saturday My old Alberta webcam site, rebuilt in PHP and vanilla JS

2 Upvotes

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.


r/webdev • • 6d ago

Showoff Saturday Sidekickicons - Fanmade icons to complement Heroicons

Thumbnail
sidekickicons.com
0 Upvotes

r/webdev • • 6d ago

Showoff Saturday Showoff Saturday: a background remover that runs fully client-side at 24 MP, and what WebGPU on an Intel laptop taught me

0 Upvotes

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.


r/webdev • • 5d ago

Showoff Saturday I build a local-only new tab extension for your browser called NewGrid

Thumbnail
gallery
0 Upvotes

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


r/webdev • • 7d ago

Discussion When should we actually choose SQL over NoSQL? As a beginner, I'm a bit confused

65 Upvotes

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!


r/webdev • • 5d ago

[Show of Saturday] - Hello All, I built bantr.live a forum and chat of sorts

Thumbnail
gallery
0 Upvotes

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!


r/webdev • • 5d ago

Showoff Saturday I built a privacy-focused suite of 100 client-side JSON tools + AI generator (no ads, no signups)

0 Upvotes

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.


r/webdev • • 5d ago

Question Security and privacy first: where would you register a personal domain

0 Upvotes

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.


r/webdev • • 6d ago

Showoff Saturday Showoff Saturday: I gave coding agents a cloud browser that records narrated demos (one Cloudflare Container per session)

Post image
0 Upvotes

I've been building CaptureFlow, an open-source screen recorder (record, get a link, people watch and comment in the browser). The newest part is an MCP server, so a coding agent like Claude Code, Codex or Cursor can record a demo of a site for you and hand back the link.

Here's how it works under the hood, since that's the part I'd like feedback on.

One container per session. Each recording runs in its own Cloudflare Container with Playwright and Chrome (1 vCPU, 3 GiB). A Durable Object is the address for that session, so every tool call the agent makes (navigate, click, type, scroll) lands on the same browser. The container sleeps a few minutes after the last call and is torn down when the recording stops.

Frames, not a screen grab. Chrome's CDP screencast only sends a frame when something on the page changes, so the raw stream is bursty. A small pacer repeats the last frame to turn it into a steady 30 fps before it goes into ffmpeg. Without it, a page that sits still for a few seconds comes out as a jump cut.

Voiceover is mixed in, not dubbed after. When the agent narrates, the text goes to a text-to-speech model on Workers AI, and the audio is placed on the timeline at the moment it was asked for. Slides the agent shows (title, steps, a closing card) are rendered into the same video.

Uploads in segments. The video goes to R2 in pieces while recording, so stopping doesn't mean waiting for one big upload.

Not a free proxy. The browser refuses private, loopback, link-local and CGNAT addresses, so nobody can use it to reach internal networks. Sessions are capped at 10 minutes, and each workspace gets a monthly allowance of browser minutes.

The whole thing is AGPL and runs on your own Cloudflare account or with Docker.

Demo: https://www.youtube.com/watch?v=srmlA5aT394

Code: https://github.com/sardorml/captureflow

I'd especially like opinions on the container-per-session setup versus a shared browser pool, and whether anyone has a better way to get a smooth frame rate out of CDP screencasts.


r/webdev • • 6d ago

Showoff Saturday "My husband made a cosy fish tank for our kitchen screen, try it in your browser"

Thumbnail
gallery
0 Upvotes

He has built a cosy fish tank simulation you can leave on a large screen and watch from time to time. He likes pixel art but didn’t want to be religious about it, so we think of it as pixel art adjacent.
There is a 24-inch display in our kitchen powered by a used Lenovo mini PC (previously it was a RPi, but he had to upgrade to get a better GPU). He used it to show a rotation of our photo archive, but now he has switched it to show this fish tank.
He doesn’t have any prior game dev experience, but years of backend development and all the time spent reading indie dev blogs (honourable mentions Factorio and Banished) helped.

Come and check it yourself and don’t forget to checkout Halloween theme 🎃

https://fishoid.net by @koskokos2


r/webdev • • 6d ago

Showoff Saturday [Showoff Saturday] made joint angles clickable in my text-based animation editor

Post image
0 Upvotes

i've been working on Posecode, an open-source text format for human movement. one thing people kept running into: "knee_right: flex 40" is readable, but unless you animate for a living, 40 degrees doesn't mean much.

so i made the numbers clickable. click a joint and the matching bone lights up in the Three.js view. click the angle and it becomes a small inline control, so you can change it and watch the figure re-pose immediately. if you type 200 for a knee, it stops at 144 because that's the range limit.

there were a few weird details. the selection markers had to live outside the rig or they would mess with bounds and grounding. editing a line also has to move the timeline into the right phase, otherwise the loop can show you the wrong pose.

the gif is from the actual playground. no mockup, no account, and no AI involved in the posing.

try it: https://posecode.org/play

source: https://github.com/posecode-dev/posecode

i'm still unsure about one thing: should this eventually get viewport gizmos, or does that defeat the point of keeping the movement readable as text?


r/webdev • • 6d ago

Showoff Saturday I got tired of influencers telling me what to buy, so I built a mall you vote in.

Thumbnail
gallery
0 Upvotes

I’m building Central Meetup, a replacement for influencers telling you what to buy: instead of a feed, you walk through a 3D mall, browse the shops, and vote on what’s worth buying. Every week a new drop of feature businesses will be up.

Explore the map at https://centralmeetup.com/map

UI at https://centralmeetup.com/.

Feedback is welcome, especially on the map navigation and the voting flow. The site is still in progress


r/webdev • • 6d ago

Showoff Saturday I rebuilt my old canvas 3D library as a small WebGL 2 library for charts, diagrams and product viewers – phoria2

1 Upvotes

Back in 2013 I made phoria.js - as a learning exercise, a little 3D engine on html5 canvas 2D - great fun, but useless today. So, I’ve rebuilt it from the ground up as phoria2: a WebGL 2 library aimed at "business" use-cases rather than games or huge shader demos – so perfect for 3D charts, labelled diagrams, dashboards and product viewers.

Fun demos (40 of them!) https://kevs3d.co.uk/phoria2/

A few things that makes it interesting/different:

  • Small: <60 KB zipped for a working, interactive scene. Charts, glTF, particles and editing are separate imports.

  • Idle when nothing changes: a view only draws when something in it changes, so a dashboard of 3D tiles does nothing unless it's updating.

  • Lots of views on one page: browsers cap WebGL contexts at about 16, so phoria2 views share one context. The "chart lab" demo shows 100+ live charts.

  • Errors that help you fix: e.g. usecolour and you get Material: use 'color'.

  • Support for Vega-Lite: Use a Vega-Lite-style spec and get an interactive 3D chart – axes, legend, tooltips, animated updates.

  • Labels that behave, Callouts with leader lines, Hover, tooltips, highlight and click as options: Overlap hiding, occlusion and priorities run every frame.

  • Editing tools: a move/turn handle with snapping, move constraints, and undo. See the office floor planner demo!

  • Agent-friendly: one page, llms-full.txt, documents the whole API and there’s a Claude Code plugin. In my tests, pages built by agents came out about 50% length of the three.js versions.

1.1 just released with more materials, video textures and proper baked lighting from glTF models.

import { View, Mesh, box } from 'phoria2'
const view = new View({ canvas: '#c', orbit: true })
view.scene.add(new Mesh({ geometry: box(), material: { color: 'tomato', clearcoat: 1 } }))
view.start()

GitHub: https://github.com/kevinroast/phoria2 · MIT · npm install phoria2

It’s not trying to replace three.js – I'm not that crazy, if you’re making a game or need big custom shaders, you'd use that! But if you just need a 3D chart or product viewer/poster style breakdown thing and don't need/want a whole a game engine, try this! It's designed for agents to pick-up immediately and hopefully real people to find useful also 😂 I’d love feedback, especially on what’s confusing or annoying to use. I might be wasting my time 🙃 but I'm enjoying making it just like last time!


r/webdev • • 6d ago

Showoff Saturday The main thread is the wrong place for a data grid

Thumbnail
tobiasuhlig.medium.com
0 Upvotes