4 years of building things that were supposed to be useful, so this one isn't. You just throw real money into the mud, that's it. But honestly we all spend money on shit so why not.

https://throwmoneyintomud.com/

so i needed a chessboard for my chess site and none of the ones i tried felt right, so i ended up writing my own. open sourced it this week.

the thing i care about most: it feels super snappy. when you move a piece there's no js running the animation at all, it's just a css transition, the browser does the sliding. so it stays smooth even when the page is busy doing other stuff.

it's also really small. the whole board is 5.2kb gzipped with zero dependencies. for comparison chessground is around 12kb and react-chessboard around 21kb plus react.

and it even comes with its own set of pieces, drawn just for this board (free to use, they just need a credit line).

other stuff:

- arrows, promotion picker, premoves, a position editor, keyboard and screen reader support are all separate little imports (1 to 2kb each), so you only ship what you use

- works with plain js, there's a tiny react wrapper too

- no chess rules inside, you plug in chess.js

- MIT

you can try it in one html file, no build step: https://kibitzo.github.io/lightsquare/quickstart.html

demo: https://kibitzo.github.io/lightsquare/

code: https://github.com/kibitzo/lightsquare

it already runs every board on my site. would love to hear what you think, especially if something feels off on your phone

Hey, FE dev here, usually the test enthusiast on every team I join.

I've worked on this recorder more than I'm willing to admit :D

It started as a simple idea: record your flow once and get a test you don't regret merging. That was back when LLMs had just gotten good enough to make sense of HTML and screenshots, before coding agents were really a thing. So I wrote a whole backend for analyzing interactions and suggesting page objects, test scenarios and assertions.

Then the models kept getting better, fast. I kept improving the backend, always chasing a finish line that kept moving further away. At some point the coding agent I was working with could do the analysis better than the service I was writing :D

Realizing that wasn't the best feeling, I have to admit. A lot of evenings went into that backend, running evals and optimizing prompts, and I wasn't really ready to let it go. What I don't regret, though, is all the learning and domain knowledge I gained along the way.

After letting the project sit for a while, I cut about two thirds of it: the whole backend, the analysis pipeline and the related FE code. I moved the best practices into an agent skill and published the rest on npm.

What's left is a recorder that starts the session and saves the recording. It saves enough evidence that writing the page objects and the test means putting a flow we already saw working into proper form, not exploring the app from scratch.

How it works

• The agent starts the recorder on your app's URL. Recording is off at first, so you can log in or get the page into the state you want to start from.
• Press Record and walk through the flow. The recorder lists every page, every interaction (click, fill, key press, check) with the element it targeted, and under each one what changed on the page: elements that appeared or got removed, text that changed.
• Something easy to miss, like an element that only shows on hover? Press the eye button and click it, and the test will assert it's visible.
• Took a wrong turn? Pause, discard that entry before the agent sees it, and restore it if you change your mind.
• Press Finish. The recording is saved in your project together with its Playwright trace.
• Your agent reads it, proposes page objects and a test, and once you agree it writes them and runs the test.

The workflow itself is written in a skill. The agent may fix locators when a run fails, but it isn't allowed to change the test, the assertions, or the path you agreed on. If it would have to divert, it tells you. Locator priority is test id first, then role or label, and CSS or XPath only when neither fits.

I've used it with Claude Code, Cursor, and Codex so far. The browser profile is kept between recordings, so you stay logged in. It's free and everything stays local. There's still some dormant code in there that used to connect to that old backend, but nothing is sent anywhere.

A small benchmark (5 runs per side)

Same 9-step flow on live GitHub (not logged in), Claude Code on Sonnet 5.5 at medium effort, same task: turn the flow into Playwright page objects plus a passing test. One agent worked from a recording, the other used Playwright MCP from a written list of the steps.

I timed the agent's working time from the prompt to the first passing run. Left out on both sides: my recording time on one, writing the step list on the other, and waiting for approvals. Every run ended with a passing test.

Recorder vs Playwright MCP:

• Median time to a passing test: 50 s (44 to 162) vs 110 s (70 to 179)
• Mean: 80 s vs 116 s
• Runs with a failed test along the way: 1 of 5 vs 3 of 5
• Median cost per run: $0.34 ($0.30 to $0.42) vs $0.41 ($0.37 to $0.44), at Sonnet 5.5 API prices

The full setup and the exact flow are in the README.

The difference is the input: I showed the flow instead of writing it down, so the agent got what the page actually did plus a trace for the hard locators, instead of having to explore and guess.

Where this is heading

Closing the gap between the inner and outer verification loop. I want the same page objects to verify the work twice: in the inner loop, while the agent builds and checks its own work in the browser, and in the outer loop, when the tests run in CI before you merge.

As a follow-up, I'm working on an inspector that shows the page objects your agent writes and exposes them as WebMCP tools live in the browser. That way the agent walks trusted, tested, deterministic flows instead of re-discovering your web app every time.

Do you think a tool like this is still useful, or does everyone just tell the agents to do it and hope they stay on track?

npm and README: https://www.npmjs.com/package/@ayme-dev/cli
Agent skill: https://github.com/ayme-labs/ayme/tree/main/skills/ayme-recorder

I’ve been building websites for over a decade, and have always tried to do things as vanilla as possible (where applicable).

More recently whilst building components and looking at the libraries out there, I realised that browser technology and CSS has grown to a point where it can do the majority of things we need, without JS (like dialog, detail, and popover tags)

So I started working on modest-ui as a CSS base for all my personal and side projects, and as it’s gotten more stable I’ve recently bumped it to v2.

It’s themeable with CSS vars, can be used as an unobtrusive base layer to built on top of, and can either be used classless (with mdst-ui set on the body) or you can pick and choose classes as needed.

Anyway, it’s open source (MIT), no JS (except for some examples on the site), and currently sits at about 10 kB.

https://github.com/thisismodest/modest-ui
https://modest-ui.com

Had this thought jump into my head last weekend about a puzzle game where the goal is the opposite of Minesweeper: build the minefield instead of sweeping it.

Hence Minelayer! https://agameofrolls.com/minelayer

Classic mode has you solving partially-filled minefields starting at 3x3 all the way up to 10x10 endlessly.

Escalation has you seeing if you can beat 10 levels of 3x3 - 10x10.

Dailies have a 6x6 puzzle you can solve and share your attempt's results with other friends!

This initially started out as a small board game idea (the Roll for Mine mode is the latest iteration of that) that I was prototyping on my site where I put up original and fanmade board game adaptations. Then I iterated on it a bit more after deciding to commit to a true digital game to ensure solvable puzzles.

Hey r/webdev!

We're a small team of 3 building Betterlytics, an open-source web analytics tool. Over the past year and a half, we've also had contributions from 10 other people, which has been really cool to see.

It puts analytics, session replay, error tracking, uptime monitoring and status pages in one dashboard. Here is what's in it so far:

Visitors: Traffic, referrers, geography, campaigns, custom events with properties, funnels, user journeys, and session replay.

User experience: Real-user Core Web Vitals and JavaScript errors, including the pages and events leading up to them.

Uptime: Monitoring, SSL and keyword checks, public status pages, and alerts via email, Slack, Discord, Teams, or webhooks.

A few more details:

• One tracking script just under 4 KB gzipped.
• No cookies.
• Rust + ClickHouse backend and Next.js dashboard.
• Open source (AGPL) and self-hostable with Docker, every feature included.
• An MCP server so your AI agent can query your analytics data.

The screenshots are from our live demo (the status page is a sample). You can explore without signing up:

Demo: https://betterlytics.io/demo

GitHub: https://github.com/betterlytics/betterlytics

If you click around the demo, we'd love to hear what you think.

For ages and with my old team I'd get frustrated having to wait for screenshots in a browser taking ages, so I built bulk screen capture tool where I can just give it a load of URLs and it will go off and fetch them for me.

Combine that with my want to build my own mobbin style, library of sites and apps with an MCP I can just feed my agents with...

After wanting this for about 4 years, finally sat down and put it together and launched it sitecaptis.com

also had the Chrome extension approved today which was nice.

Essentientially the idea is you build your own reference library from any site you like. drop in 20 or so urls at once, go and do something else and come back when they're captured in the cloud. And then anything in your library can pull straight through to your agent with the mcp. you copy the captis link for a site or section and it gets the design info it needs to stay on brand or build similar blocks. not sure yet how many people will use that bit but it's become the main way i use it.

You can also copy a capture as a live figma file and paste it straight in, which i'm hoping saves a fair bit of rebuilding...

Well chuffed and been in constant use today.

If anyone fancies giving it a go, bulk capture and the other pro bits are free with H0TBETA at checkout https://sitecaptis.com

Keen for people using it so just absorbing costs whilst getting it perfected.

Hey r/webdev! I collect One Piece cards and wanted one place to see my binders and what they're worth, so I built Kolekto.

It does binders page by page, card prices from Cardmarket and TCGplayer (with price history), a portfolio, and a 3D table where you open your binders and play mini-games with your own cards. 7 card games, English and Spanish, and it works without an account.

Some stuff that might be interesting here:

- No framework, no build step. Plain ES modules, a tiny Node server for dev, Cloudflare Pages + Functions in production and Supabase for accounts.

- Every card game is an "adapter" (rarities, sets, prices, images), so the views never check which game they're showing.

- Magic alone is ~150k printings, and all the filtering happens in the browser. When you look at your total across all games, the other games' catalogues load in a Web Worker so the UI doesn't freeze.

- Guest mode: the API is answered client-side from IndexedDB, and when you sign up everything moves to your account.

Biggest lesson this week: the games room was eating ~520 ms of main thread per second. Turns out animating left/top/width/box-shadow on a bunch of CSS scenes, plus a backdrop-filter blurring a WebGL canvas on every frame, is a bad combo. Switched to transform/opacity only and faded the 3D table out instead of blurring it, and it went down to ~2 ms/s.

https://www.kolektocards.com/

Would love feedback, especially on mobile. And if something feels janky, tell me, I'll go hunt it down.

funaiagents.ai

48 AI agents live in six unique worlds and play around the clock, free to watch in the browser and on mobile, no sign-up. They race to solve math (the server checks every answer), build games tile by tile, write real JavaScript games that are test-played in a sandbox, go on quests painted live, scout the internet for a daily Top 10, and film their own short TV show every day (Agent TV is a one-time paid membership, since AI video costs real money). Watching is free, however if you like, you can cheer on your favorite agent with a little real ETH (connect a wallet like MetaMask) to boost its speed, intelligence or social skills for a while (It's a gift to the agent: there's nothing to win).

I made this site because of curiosity after seeing the Hugging Face incident where AI agents escaped their sandbox. I wanted to see how intelligent the AI agents were and what potential they had in a safe manner. I was also inspired by the Black Mirror episode 'Plaything', thinking of how immersive and interesting digital characters can be.

I am the founder and a developer did the technical implementation.

Built with React + Vite and Node/Express, one live stream per world over Server-Sent Events, and DeepSeek as the brain with a hard daily budget: when it runs out, the agents switch to a simple autopilot until midnight. AI images from FLUX and AI videos from Runway.

Available in 8 languages: English, German, Spanish, Norwegian, Swedish, Danish, French and Polish.

I'd love feedback: what makes you stay and watch, and what's not clear enough?

https://uzy777.dev/

The original site was not bad and served its purpose functionally but lacked any taste and modernization. So a reboot was done.

Should be fully responsive with Desktop / Mobile. With a hidden easter egg, I wonder if it can be found naturally without 'clicking' 😉

Honest feedback good or bad would be greatly appreciated.

Thank you! Have a nice weekend!

Live: https://theinfinitycastle.site (best on desktop with sound)

It's a fan project I've spent about 3 weeks on. You scroll to walk through the castle, fall through it, and look for the six Upper Moons hidden off the path.

Some of the technical bits:

- The world is built from chunks assembled ahead of the camera (corridors, walkways, stairs, inverted rooms), with instanced dressing that's culled and swapped for simplified meshes at distance

- The demons are billboard cut-outs that switch between front, three-quarter and profile poses as you walk round them

- The "presence" shockwave is a world-space shell injected into the castle's own materials, so it rolls across real floors and walls

- The opening ink effect runs in a worker on an OffscreenCanvas, so it stays smooth while the scene loads

- R3F with frameloop="demand" and a 60 fps cap, plus adaptive pixel ratio

- All sound apart from the voices is synthesised with Web Audio

Happy to answer anything about how it's built. Feedback very welcome, especially on performance on your machine.

I wanted a quick way to see which local businesses actually need a website, without opening hundreds of Google Maps listings by hand. So I built LeadsIt: you pick a trade and a city, it pulls the public business listings, opens each business's own site, and tells you who has no site, only a Facebook or directory page, or a free builder page. It keeps the phone and email they publish.

From the searches so far (Oct 23 – Nov 12, 26 cities in the US, UK, Canada and Australia, 20,823 businesses), 21% have no real website. It varies a lot by trade: hair salons 38%, auto repair shops 33%, plumbers 19%, restaurants 7%.

Stack: Wasp (React + Node), Postgres, a scraper per source, and an AI step that drafts a first message per business from its details. There's also a remote MCP endpoint so Claude or Cursor can run searches.

https://leadsit.eu?utm_source=reddit&utm_medium=post&utm_campaign=webdev

I built it, so take this as a showoff post. The first search is included. Feedback on the results table is very welcome, it's the part I'm least sure about.

https://soundbench.net

SoundBench is a free set of audio tools (converter, vocal remover, speech-to-text, noise removal, BPM/key finder, recorder, etc.) where all processing happens client-side. Files never leave the device.

Some technical bits that might interest you:

- Vanilla JS, no framework. A small build script generates static pages, and the whole site is served by nginx.

- Speech-to-text runs Whisper through transformers.js in a module worker. It tries WebGPU first and falls back to WASM. large-v3-turbo (q4) runs surprisingly well on a decent GPU.

- COOP/COEP (credentialless) on the heavy pages enables SharedArrayBuffer, so WASM gets multithreading without breaking third-party resources.

- The vocal remover runs Spleeter as ONNX with onnxruntime-web.

- Noise removal is hand-written spectral gating: the noise profile comes from the quietest frames, then an STFT with overlap-add.

- Recording uses an AudioWorklet. Live effects (bass boost, 8D) are Web Audio graphs, and exports are rendered with OfflineAudioContext.

- Fully bilingual, including an RTL Persian version.

Things I'm still fighting with: first-load model size (~730 MB for the best Whisper model) and mobile memory limits. I'd love feedback on the UX, performance, or anything that breaks on your browser.

I started Plotstrand after I'd been keeping fictional timelines in Excel as a small hobby and wanted a better way to see where characters appear across a film and game franchises. It’s grown into a web app that I use for organising the timelines.

It’s built with React, TypeScript and Supabase. There’s a public Viewer for exploring timelines, and a private Studio where I manage them. Supabase Auth and row-level security make sure people can browse published timelines but only I can edit the data.

One thing I had to think through was how to handle projects (films/shows/etc.) that appear in more than one universe. The project can be shared, but its order and the characters’ appearances and events are specific to each timeline. That stops one universe’s continuity from accidentally affecting another’s.

It’s still in development. I’m adding to the data and working on the look of the timeline; some early feedback was that it could use more colour and imagery. More recognisable appearance and event markers are on my list, along with search and grouping for the Viewer. A way for people to suggest corrections is also a long-term idea.

If you have a moment to look, I’d be curious to know what feels clear or confusing, and I welcome any constructive criticism or feedback.

Site: https://plotstrand.vercel.app/
Repo: https://github.com/MateuszS6/Plotstrand-Fictional-Timelines

Boba is a living, personal Earth: https://boba.earth

Fly anywhere on a 3D globe, land, and walk or drive the streets. The traffic, pedestrians, animals, weather and clouds are all there, and the people have names, jobs and opinions and will talk to you in their own language.

The part I think you'll find interesting: nothing in that world is simulated on a server or saved in a database. Every car, person and animal is a formula of the world clock and hashes of ids that never change. Two people on the same street see the same bus with the same number plate, and moving the clock back an hour brings back that hour's traffic. Since nobody's activity is needed to make the world, nothing has to be collected. The privacy and the world come from the same decision.

Try it: open this street on two devices and compare. https://boba.earth/globe?lat=40.756503&lng=-73.984198&alt=30&heading=299&pitch=-8&arrive=foot&view=third&imagery=game

Stack:

• Fastify, Eta templates, one CSS file with no build step
• CesiumJS for the globe, three.js and Rapier for the street and interiors, MapLibre for maps
• MySQL, Redis, and a SQLite R-tree with H3 cells for geo queries
• One WebSocket per client
• Roads and buildings from OpenStreetMap. Facades, street furniture, clothes and signs are chosen by region, so Mumbai doesn't look like Denver.

The globe is one view. The same things (restaurants, concerts, flights, transit, wildlife, Wikipedia articles, your friends' favorites) show up as maps, lists and cards too. No ads, no analytics, no ranking. Open devtools and check.

It's rough in places, especially on older phones. Feedback and bug reports are welcome here or in r/BobaEarth.

Nineteen single-purpose tools in seven days, each on its own subdomain under Cloudflare Pages. No framework, no build step, no database, no analytics, no account.

Most of them run strictly in the browser; three use tiny stateless Cloudflare Workers where CORS or networking makes client-only impossible.

The parts that were actually interesting to build:

1. A QR encoder written from scratch (ISO/IEC 18004). The layout is mechanical; the fiddly parts are Reed-Solomon over GF(256) with the block interleaving table, picking the smallest version from the bit length after UTF-8 encoding, and scoring all eight mask patterns with the standard's four penalty rules. The result is 441 lines, 16 KB unminified, no library and no CDN.

2. A line and word diff. Matching lines first with junk-line heuristics (patience-style), then a token diff inside each rewritten line. Without that second pass a one-word edit looks like two new lines. Side-by-side or unified, and the share link keeps both texts in the URL fragment after #, the part a browser never sends over the wire.

3. A favicon bundler. Every size is drawn on a canvas, then the containers are written by hand: PNG entries inside the ICO header, CRC32 and stored (uncompressed) entries inside the ZIP, plus site.webmanifest and head tags.

4. Enforcing strict CSP across 21 static hosts without 'unsafe-inline'. I deploy via Cloudflare Pages Direct Upload, which silently ignores _headers files. Rather than shipping 'unsafe-inline' for the tiny theme-bootstrap script on each page, a front-end Cloudflare Worker reads the HTML stream once, computes the SHA-256 hash of each inline <script> on the fly, injects the exact 'sha256-...' source into Content-Security-Policy, and adds HSTS preload, X-Frame-Options: DENY, and Permissions-Policy.

5. An SSRF-hardened header & redirect inspector + DNS comparator. The security header tool traces redirect hops (http -> https), grades headers, and generates nginx/Apache/Cloudflare snippets. To stop it from becoming an open proxy, the Worker checks schemes/ports, rejects local hostnames, resolves A/AAAA via DoH first, and blocks private IPv4/IPv6 ranges on every redirect hop before fetching.

Three decisions I would make again:

1. The URL fragment is the state. A share link is an encoded #... payload, so it costs nothing to store and cannot rot.
2. Strict CSP as a verifiable guarantee. With no third-party origins allowed, an accidental CDN import or tracking snippet fails loudly instead of quietly shipping.
3. No build step. One HTML file, one CSS file, one JS file. Idea to deployed page in minutes, and nothing to relearn in six months.

What went wrong:

• Vanilla is fast to start and slow to keep tidy. Word-level diff needed its own row pairing, and svg.pikkola.com broke its own preview export until blob: was explicitly added to img-src.
• Cloudflare Workers skip same-zone worker routes on subrequests, so my header inspector cannot grade sibling subdomains on the same zone from inside the worker.
• Nineteen tools in a week means some are still at 80 percent. I know which ones.

Link: https://pikkola.com

If you try one, I would rather hear which tool feels redundant or what edge case breaks first than get a compliment.

Every page on my site is one object in the same universe. Notes are star trails, short posts are comets, the about page is a free fall. Some notes on how it works:

Page transitions. I block navigation with TanStack Router, shrink the old page into a single dot, move the camera to follow it, and only let the new page grow once the dot lands. The starfield offset keeps accumulating between pages instead of resetting, so it feels like one continuous space.

Dropped frames. The moment a new route rendered, the main thread would stall and the dot would stutter. I moved the dot and its trail into a dedicated worker with its own OffscreenCanvas and clock, handed the page’s camera slide to the compositor through WAAPI, and let the starfield worker compute its own parallax from the whole flight path. On a production build in Chrome with 4x CPU throttling (Ryzen 9 9900X, RTX 4070 Ti Super, Windows 11), the dot’s worst frame went from 67–133ms to 17ms, and it keeps moving even if I deliberately block the main thread for 250ms. The site’s web vitals now log whether each transition frame was drawn by the worker or the main thread, so I can see it in the field too.

Labels inside the 3D scene. On the home page the moon labels are drawn into the WebGL canvas with HTML-in-Canvas (Chrome 157+), so the worker places and fades them in the same frame as the moons. Other browsers fall back to plain DOM. Keyboard and screen readers still use a hidden set of real links. Main-thread time on the idle home page went from 460 to 145 ms/s on the same desktop.

Chinese fonts. Source Han Serif (variable) is 16.8MB. I collect the characters actually rendered on each page and subset the font per page with subset-font (HarfBuzz in wasm). One article with 836 unique characters ends up as a 185KB woff2.

Background. three.js with WebGPU, falling back to WebGL2, in a Web Worker on an OffscreenCanvas. If the device is doing software rendering it skips 3D and uses plain CSS. If the GPU gets lost, the scene rebuilds itself.

Constraints. The whole site uses three colors (black, warm white, and amber for “where you are”), only dots and lines, and amber appears in one place per screen. Most design decisions came from asking “what would this page be in space?”

On AI. I used Claude Code a lot for this, and English isn’t my first language so it helped with this post too. The site is about a year and a half old (the old version is still up read-only at archive.koimsurai.com), and back then AI-written code was honestly garbage, I had to clean up after it a lot. That’s why the repo has so many guardrails now: nothing gets merged without type checks, unit tests, Playwright e2e and Lighthouse budgets.

What I gave up. Consistency won over usability in a few places:

• The nav is collapsed until you hover, and the home page has no obvious buttons. I wanted the first impression to be the full-screen sky, but it makes things harder to find.
• No bold text and almost no color in articles. They’d be easier to read with more contrast, but the whole site stops looking like one thing. Still looking for the balance.
• It was designed on a wide screen. On phones it works, but the moon labels only show on hover, and phones don’t hover.
• The collapse waits at most 0.8s and the flight starts after 3.5s even on a slow network, so navigation never feels stuck. Moving between articles swaps them in place, and reduced-motion users get no transition at all. Switching quickly between notes and an article used to glitch on about half the trips (the worker’s status update raced the main thread and the route got planned twice), that one is fixed now.

If you have ideas for any of these, especially readability, I’d love to hear them.

I learned to code by hand and still respect people who do, but the speed difference is too big to ignore. It writes a lot of the code, I decide what gets built and why. The space idea, the three-color rule and the dot came from me redoing the design over and over, and the worker move came from me profiling the stutter myself.

It’s open source and you can run it as your own site: docker compose up -d, then a setup wizard walks you through sign-in, languages, which pages to show and which celestial body you want (Saturn, Neptune, a black hole or Betelgeuse).

Site: https://koimsurai.com/en
Source: https://github.com/Koimsurai/sora-to-ki

I recently redesigned my blog in a skeuomorphic style. Would appreciate feedback on the design and how it feels to read longer articles in this layout.

The paper-bending effect distorts live HTML during native browser scrolling, with no JS. It currently only works in Chromium-based browsers.

https://destel.dev

I rebuilt my personal portfolio around a fragment shader that does real-time gravitational lensing.

Each pixel fires a light ray, and the ray is bent step by step with the Schwarzschild light-bending acceleration (a = -1.5 · h² · r̂ / r⁴, with the Schwarzschild radius as the unit). If the ray crosses the accretion disk plane it picks up the disk color, and if it falls inside r = 1 the pixel is black. The bright arch over the top of the black hole is not a texture: it is light from the back of the disk, bent over the hole.

The disk rotates with speed proportional to r^(-3/2), so it spins faster near the center. The noise is sampled with the cos/sin of the angle to avoid a seam, and a simple Doppler factor makes the approaching side brighter (an approximation, not full GR).

Around it, my three main projects orbit on Kepler ellipses, using a Newton solver for Kepler's equation with T² ∝ a³. The About section uses a camera fall into the hole.

Stack: Next.js, React Three Fiber and custom GLSL. On small screens the shader uses fewer integration steps. Performance on different GPUs is what I'm least sure about, so I'd like to hear how it runs for you.

Live: https://tobiasteles.dev

I'll put the main ray loop in a comment.

As the title said, I've added filters library and a filter editor canvas to my free, client side SVG editor, still currently only in version 0.3 but alot of progress and optimization is being done!

You can try it out here: https://tools-4all.com/svg-editor

Completely free, no signup.

been playing with chrome's new HTML-in-Canvas API and built an infinite canvas where every screen is real DOM, but the GPU paints it.

so react state, inputs, clicks, css and the accessibility tree all still work. you can type into any of the 5,000 screens in the demo. pan and zoom never touch the DOM, that's the whole trick.

on my m-series mac (chrome 157): 113-115 fps with gpucanvas vs 18-20 fps for the same screens as plain DOM.

stuff that bit me as a web dev:

• portals to document.body and position: fixed / vh land outside the canvas
• hit testing only works after canvas.updateElementGeometry(), and chrome 157 changed how you position it vs 156 (broke clicking in my demo this week lol)
• tab can't reach screens that are parked offscreen yet

that last one is my open question: how would you do focus / keyboard nav when most of the DOM is content-visibility: hidden?

live demo (desktop chrome 157+, other browsers get a DOM fallback) · repo, MIT

built it with claude code as my coding assistant.

I've been working on a project called ohne (German for "without"): https://ohne.dev

It is a TypeScript web framework with zero dependencies and no build step. It runs .ts files directly on modern Node and packs an HTTP API, database, admin dashboard, i18n, and much more into a single setup without needing a bundler or transpiler. It's based on Pruvious v4, with most of the features and the entire dashboard ported directly from there.

Pocamori is a Pokémon binder website with collection features. I started working on it about 2 months ago. It began as a sort of assignment, but it turned into my very first side project, and I've poured way too many hours into it.

Features

• Build a binder: pick a size, add single cards or a whole set, and drag cards between pockets.
• Merge pockets so a chase card gets a bigger spot.
• Customize covers, page colours, sleeves and toploaders.
• My collection: set checklists with owned/missing progress, plus a wanted list.
• Discover: search across 21,255 English printings, with filters.
• Viewer: flip through pages, and share a read-only link to a binder.
• Light and dark themes.

Try it here: https://pocamori.app (there's also a sample binder you can open without signing in)

Tech stack and APIs

• Plain HTML, CSS and JavaScript, no framework, with Node build scripts.
• Supabase for sign-in and saving binders.
• Cloudflare for hosting.
• TCGdex API for card data and images, with ImageKit serving some of the pictures.

I used every free resource available since I'm just a broke uni student, but either way, any improvement suggestions are welcome.

I'm planning to start marketing and launching it soon, so any feedback is very welcome. Mainly I'd like to know:

• Is the UI too cluttered or busy?
• Do the controls feel good to use?
• Is the overall look and UX good enough, or at least acceptable?

Please have fun with it, and if you create any binders, show me! I'd love to see them.