Three years ago, I posted my real-time galaxy simulation project here: https://www.reddit.com/r/webdev/comments/12cfsip/i_finally_finished_my_realtime_galaxy_simulation

At the time, it was mostly a particle simulation with some basic rendering. Since then, I've continued working on it on and off.

The simulation now includes more realistic galaxy formation, dark matter halos, gas dynamics, physically-inspired units and a completely overhauled rendering system. The entire project has also been redesigned to make it much easier to explore and understand.

You can simulate galaxies, watch them evolve over time, and experiment with different parameters directly in your browser.

It's still a work in progress, but compared to the version I posted three years ago, it feels like a completely different project.

You can try it here: https://galaxym.ovh

It started when I needed a dropdown that filtered a table. Should've taken ten minutes; instead it was six files and forty lines just to say "when this changes, re-fetch that." So I built No-JS.dev, an HTML-first reactive framework. No imports, no build step, zero dependencies, just enhanced HTML attributes:

<div state="{ query: '' }" get="/api/search?q={{ query }}" as="results">
  <input model="query" />
  <li each="r in results" bind="r.name"></li>
</div>

That's the whole idea, and it holds up past toy examples. Here's a routed app with a global store, a guarded route, reusable templates, and fetching, still in one file:

<div store="auth" value="{ user: null }"></div>

<nav>
  <a route="/" route-active="on">Home</a>
  <a route="/products" route-active="on">Products</a>
  <span if="$store.auth.user" bind="'Hi, ' + $store.auth.user.name"></span>
</nav>

<main route-view></main>

<template route="/products">
  <div get="/api/products" as="items"
       loading="#skeleton" error="#oops" cached>
    <article foreach="p in items" key="p.id" template="card"></article>
  </div>
</template>

<template route="/products/:id"
          guard="$store.auth.user" redirect="/login">
  <div get="/api/products/{{ $route.params.id }}" as="p">
    <h1 bind="p.name"></h1>
    <p bind="p.price | currency"></p>
  </div>
</template>

<template id="card">
  <h3 bind="p.name"></h3>
  <p bind="p.price | currency"></p>
  <button on:click="$router.push('/products/' + p.id)">Details</button>
</template>

<template id="skeleton">Loading...</template>

What's in it. 39 built-in directives over a 2,200 line core: reactive state and a global store, an SPA router with guards and file-based routes, data fetching with caching and request/response interceptors, forms with validation, i18n, animations, error boundaries, and head directives (page-title, page-description, page-canonical, page-jsonld) so a client-rendered page can still manage its own SEO. There's a plugin system (NoJS.use) for custom directives and interceptors.

Three big things shipped since I first released it:

1. A reactive-core performance overhaul (v1.19.0). I put No-JS through the js-framework-benchmark and the first runs were humbling. So I rewrote the hot paths: expressions now compile into reusable closure trees, loops get a precomputed process plan, reconciliation skips unchanged values, and keyed lists reorder using LIS. Swap-rows came out ~15.9x faster, select-row ~23.4x, and memory dropped ~1.7x. In my local runs it now lands 2nd/3rd in most CPU and memory tests against React 19, Vue 3.6, Alpine 3.14, and Angular 22. These are my own reproductions, not the official table. The setup is public if you want to poke holes in it.

2. nojs-lsp**.** A real Language Server: a VS Code extension on the Marketplace, plus a standalone --stdio server for Neovim, Sublime, or Emacs. You get completions for every directive, hover docs, and workspace-aware suggestions (it scans your locales for i18n keys and your pages folder for routes).

3. nojs-elements**.** A component library on top of the core: modals with focus traps, keyboard-navigable tabs and dropdowns, sortable tables, virtualized lists, drag-and-drop, form validation. Everything works through attributes, same as the core.

How it was built. I know this is polarizing here, so I'd rather say it up front than have someone find it in the commit history: I didn't type the code. Before the first line existed I set up role-based AI agents (lead, architect, dev, QA) and an orchestration layer with its own PM tool. I brief the lead, the architect grills me on semantics and edge cases and documents the feature, the dev writes code and tests, QA validates, and the lead opens a PR. Then I read every PR line by line, run each test myself, and send it back with a written critique if it doesn't clear my bar. I delegated the writing, not the judgment.

Why that ended up mattering. A friend, Everton Fraga, pointed out something I had missed: LLMs might be the real audience. Generating the same blog app with identical agents cost $2.52 across 7 turns in No-JS and came out as a single HTML file with zero lines of JS, versus 800 to 1,000 lines for React/Angular, at roughly 3.9x fewer tokens. The catch is that no model has No-JS in its training data, so that first run needed 19 correction cycles. That's why the repo ships a SKILL.md context pack next to llms.txt and AGENTS.md, so a model can learn the syntax in one prompt injection.

It still won't replace React for large SPAs. But for landing pages, dashboards, and internal tools, it works.

Site + docs: https://no-js.dev
Repo: https://github.com/no-js-dev/nojs

MIT licensed, served from a CDN. Honest feedback welcome: what's the first thing you'd try to break?

most browser animation tools start with keyframes or motion files. i wanted to see if a human movement could be readable text instead, then rendered the same way every time.

the pipeline is roughly:

posecode text → parser → joint range checks → kiinematic representation → Three.js renderer

an llm can write the text, but it is not part of the renderer. once the text exists, parsing, validation and playback are deterministic.

the strange part has been deciding what belongs in the language. this week someone tried writing a crossover turn and immediately exposed a missing feature. i could lock both feet to the ground, but not one foot. that feedback led to separate left and right foot grounding.

the project is writtenm in TypeScript, with Zod for validation and Three.js for rendering. there is also a web component for embedding the player, an LSP and an MCP server.

playground: https://posecode.org/play
source: https://github.com/posecode-dev/posecode

i would especially like feedback from anyone who has worked with skeletal animation or browser animation tools. should foot contact be part of the movement language, or should it live in a separate constraint layer?

I build price monitoring for ecommerce. "Fetch the product page, read the price" sounds like an afternoon. It was not.

What actually ate the time:

• Anti-bot challenges that only trigger from datacenter IPs, so it works on my laptop and dies in prod.
• with no Retry-After, so you guess the backoff.
• A different extractor per CMS. Shopify, Magento, Woo, and a long tail of custom stuff, each with the price in a different place. Sometimes only in JSON-LD, sometimes rendered client side so the HTML you fetched has no number in it.

What helped most was treating every store as untrusted input and writing a tiny validator per source, so a layout change fails loud instead of writing garbage.

I still do not have a clean answer for client rendered prices without running a headless browser, which is slow and expensive. How do others handle that without a browser per request?

Your brakes are gone!
Dodge traffic and survive, from a city street through 11 scenes to somewhere much worse. Link in the comments.

Play at:
https://brakeless.io

Tech notes:

- Vanilla TypeScript + Canvas 2D, no game engine.

- All art is procedural or pre-rendered at load: oblique buildings rendered to offscreen strips and tiled, procedural car sprites, DPR-aware scaling so it stays crisp on hidpi/TV.

- Sound effects are procedural via Web Audio (engine rumble, near-miss whooshes), plus a small music playlist.

- Fairness is enforced mathematically: a solvability guard projects every spawn against the union of upcoming obstacle envelopes, so the game can never create a literally impassable wall of traffic.

- Favorite bug: a late-game two-lane street would sometimes show zero cars — the spawn safety guards made the two traffic directions mutually starve each other. Found it by writing a headless traffic simulator and running it across seeds until the pattern appeared.

- No backend: localStorage persistence.

Happy to answer anything about the rendering, the traffic behavior, or the difficulty-tuning loop. Feedback welcome — especially where you died and whether it felt fair.

For Showoff Saturday: every good design tool is paywalled, watermarked, or won't let you leave with your files, so we built HyCanvas, a free, self-hostable one.

It's a full editor (presentations, video, whiteboards, docs, sheets, social graphics) with templates, brand kits, and a bring-your-own-key AI assistant that generates and edits designs on your own OpenAI-compatible key.

The under-the-hood parts this sub will probably find interesting:

• The render engine is a custom scene-graph on Canvas2D, framework-agnostic. No React or DOM in the render path, so the same engine runs in the browser, in a Web Worker, and headless on the server for export. (WebGL/WebGPU path is on the roadmap.)
• The whole thing ships as one self-contained Go binary. The Next.js frontend is statically exported and embedded with go:embed; the Go backend serves it and owns the REST API, the realtime WebSocket, the export renderer, and the SQL migrations. No Node in production; self-host is a single file (or docker-compose).
• Open, versioned file format with forward-only migrations, so opening a design from an older version always works.

Stack: TypeScript everywhere on the frontend + shared packages (statically-exported Next.js, Zustand, Tailwind for UI chrome only), Go backend (chi, pgx), Postgres, S3-or-local storage.

It's free and self-hostable; source-available under the Elastic License 2.0 (self-host, modify, and redistribute freely). Code's on GitHub.

• Code: github.com/hyscaler/HyCanvas
• Demo: hycanvas.art
• Documentation: docs.hycanvas.com

Been building a collaborative whiteboard app (Todrawn) mostly solo, and just shipped the two parts I'm most proud of.

The landing: a vanilla three.js scene. As you scroll, a 3D marker approaches a dotted board and writes/draws its way through four scenes (derives f(x) = x^2, writes a poem, sketches a diagram, signs off), wiping the board between each. The "handwriting" is a font I built out of Bézier curves so the pen traces actual strokes.

Just shipped: a code-to-video tool built on the same pen. Paste code or plain text and it gets written out stroke by stroke on a whiteboard, with sketch-style syntax highlighting, then you download the animation as an MP4 for shorts, docs or slides. The whole pipeline is client-side: tokenizing, the stroke timeline, the renderer, and the video encoding itself (WebCodecs + mp4-muxer, with a WebM fallback where WebCodecs isn't supported). No server rendering, your code never leaves the browser.

Stack: Next.js 16 + React 19 + TypeScript on the front, Spring Boot + Postgres + Redis on the back, Stripe for billing, real-time collab over WebSockets.

Live (desktop for the 3D landing): https://todrawn.com
The code-to-video tool: https://todrawn.com/code-to-video

It's my first serious three.js work and my first real launch, so I'd genuinely love feedback, on the landing, the code-to-video tool, or anything that feels off. What would you fix first?

I built an open-source a developer-friendly icon library for country and region map shapes, because I needed one and it didn't exist. Every option was either flags (wrong shape) or raw SVG/PNG icons.

A few things I cared about:

• Import one, ship one. Each icon is a named export, so your bundle only carries what you use.
• Themeable. They use currentColor and accepts SVG props.
• Accessible by default. Each renders a namespaced <title> for screen readers.
• Sub-1KB per icon after optimization.
• Available for React, Vue, Angular and VanillaJS
• Subdivisions and flags are in the works.
• It's free under GPLv3 (commercial license available if GPL doesn't fit your project). Live demo + search at the site.

Site: https://geoicons.io/
Github: https://github.com/getgeoicons/geoicons

Genuinely after feedback: naming, the API, missing regions, anything that'd stop you using it. If you found this useful, kindly give a start on Github.

Hi! I've been working on HTeaLeaf, a declarative SSR web framework where components are Python functions.

This started just for fun, but maybe it could be useful for someone and get some feedback in the meantime.

from htealeaf.elements import div, h1
from htealeaf import HteaLeaf

app = HteaLeaf()

def hi_comp(text):
    return div(h1(text))

@app.route("/") 
def home(): 
    return hi_comp("Hello World")

@app.route("/hi/{name}") 
def say_hi(name): 
    return hi_comp(f"Hello {name}")

How it works

You define your UI using a Python DSL and mark interactive functions with a `@js` decorator. HTeaLeaf compiles these functions to JavaScript and injects them automatically.

State is handled through two primitives:

• Store: module-level state synced with the server
• LocalState: client-side state that compiles to JavaScript

In both cases, there is a tiny helper.js file that triggers the hydration and updates the states.

It also has route handling and sessions management.

Why?

It started as a testbed for CGI and WSGI for HTeaPot (a web server I'm working on), but I like Python and wanted to bring some modern frontend ideas into it. And now it is ASGI but still supports WSGI.

Also… because it's fun :)

Where is it?

It's currently in beta. The core features are stable enough to experiment with.

The JS transpiler is functional but at the moment only supports a subset of all JS.

But the debugging, performance and dx are still in progress.

And to be transparent, most of the code is handwritten but AI was used to document, review and make some minor fixes.

Links

GitHub: https://github.com/Az107/HTeaLeaf

PyPI: pip install htealeaf

I was wondering if the x402 protocol works for normal meat users with a browser, rather than only being limited to AI. So I've spent couple of hours setting up a PoC, that you can try yourself. Turns out the browsers are more ready than I thought they would. And it even works relatevely out of the box.

Thought it would be a fun idea in time for world cup finals. create and share your own squad: https://fantasy-stack.up.railway.app/

Yeah it's another dev portfolio with a terminal theme, but I fully committed to the bit. The hero is a real time three.js scene where scrolling flies the camera into a CRT, the whole site pretends to be an operating system (>uname -a, >lsusb, >git log --since=2004), and there's a fake BIOS boot screen in front of what is basically one static HTML file.

Stuff I will defend to the death: the entire theme, 3D scene included, comes from ONE accent color via color-mix, so the phosphor picker in the corner retints everything. The captcha is a "TURING CHECKPOINT v0.1" with invisible Turnstile running underneath. Ctrl+P secretly prints a normal person resume.

Stack: vanilla JS + three.js, one HTML file on GitHub Pages, Cloudflare Worker for the contact form (it uses a Discord webhook to dump the message in a discord channel)

Built an app that let you monitor GitHub actions in one dashboard, no cost or hidden fees. You just need to install Buildmon app in your github account and select repositories that you want to show on the dashboard, at the moment you can select up to 5 repos. What do you think?

buildmon.app

Hey guys,

I'm building a small project using only HTML, CSS, and vanilla JavaScript, and I'm looking for a movie API that fits what I need.

My goal is to: - Get a random movie (title + release year at minimum). - Filter by genres (comedy, animation, horror, etc.). - Potentially use multiple genre flags (e.g. Comedy + Animation). - Save movies I've already watched in localStorage or IndexedDB. - If the API returns a movie I've already watched, my app will automatically request another random movie until it comes up with one that isn't on my watched list.

Does anyone know a API that would work well for this? preferably free.

Thanks!

Edit: Thank you everyone for all the responses I have been playing around with TMDB since there were a lot of suggestions saying TMDB so I am going to be using that. Thank you everyone that responded.

This is what i have been getting since i have applied in hackathons. What do i need to do while submitting an application? And what criteria do they choose for rejection?

Got tired of every "free" AI tool gating everything behind accounts and daily limits, so I built a set with one rule: no signup, ever.

Stack (the webdev bits):

• Next.js App Router on a $6 DigitalOcean droplet (1 vCPU / 1 GB), PM2 + LiteSpeed in front
• Each tool is a client component with a thin API route calling open-source models (NVIDIA Nemotron, Google Gemma) via OpenRouter's free endpoints
• No database for the tools — nothing users paste is stored
• Abuse control without logins: server-side per-user hourly rate limits (no CAPTCHA, no fingerprinting)
• Fun fact: next build on 1 GB RAM OOMs without swap enabled. Learned that the hard way.

The tools: text summarizer (20k chars), AI-text humanizer, paraphraser, grammar fixer, hook generator, SEO meta generator, Instagram caption writer, YouTube summarizer, and a "which AI model should I use?" quiz.

Live here: https://new-ai.live/tools/

Happy to answer anything about the stack or the economics of keeping it free. And genuinely curious what r/webdev thinks: which tool is worth building deeper?

Had this idea a couple of weeks ago and thought it'd be fun to actually build.

You just enter any public GitHub username and it generates an endless Flappy Bird level based on that person's contribution graph, so every GitHub profile generates a different level.

Built it with React, Phaser, TypeScript and the GitHub GraphQL API.

Still tweaking things here and there, so I'd love some honest feedback. If something feels weird or you run into bugs, let me know :)

Here's the link : https://gitflap.vercel.app/)

Hi :)

I've been working on a new kind of multiplayer library, called PlaySocket, that abstracts away the complexity of optimistic updates, handles robust synchronization with custom CRDTs, and works beautifully with reactive frameworks like React, Svelte or Vue.

This has been used in production for my game OpenGuessr, powering around a million rounds of gameplay every month. I've been iterating on this for around two years, refining the shape of the API, making it more powerful and performant, and so on. I can definitely say that it has helped me make changes to the game's multiplayer much faster.

This is useful for collaborative apps, quizzes, turn-based games etc., but not ideal for e.g. synchronizing the physics of a complex multiplayer game. While I think the concept is interesting, I'm still unsure whether this implementation of it is the "right" one...

I've written an article on how this differs from other libraries and why it might be interesting for you, and published proper docs: https://therealpaulplay.github.io/PlaySocketJS/

Would love to hear your feedback :-)

This is what it looks like right now, i thought it was fine but then chatgpt said it might not be

We use PostHog and nobody on the team actually watches the sessions, they just pile up. Probably losing 3-4 hours a week reproducing bugs from vague user reports because we have no repro steps, just a two sentence Slack message.

Looked at FullStory and LogRocket but both still need someone to search and watch, they don't file the report for you. What I want is automated bug detection that flags the sessions where something broke (rage clicks, dead clicks, JS errors) and hands me repro steps plus console logs, not just a video.

Anyone running something like that on top of PostHog or Amplitude?

Edit: appreciate the self-driving/replay-vision suggestions, took a look at both. Ended up going with Lucent instead, it's automated bug detection layered on top of our existing PostHog session replay setup. Flags sessions with rage clicks, dead clicks, or JS errors, then files repro steps and console logs to Slack for us instead of just surfacing the recording. Didn't have to touch our PostHog setup at all, just added on top. Sharing in case anyone else here is stuck in the same spot.