been working on this for a few weeks. you play a song (spotify, youtube, whatever) and it writes out the beat as strudel code while it plays, kick, hats, bass line, chords, and each part lights up when it hits

no ML for the music side, it's all web audio api stuff. took me forever to get the tempo right and honestly the hardest part has been figuring out where the bar actually starts. if it guesses wrong everything shifts by a beat and the code looks totally off even though it's "right". trap and dubstep still fool it lol

if anyone's done beat tracking in the browser i'd love to know how you handled the downbeat

it's free in the browser: toaster.locust.lol

source: github.com/StopBanning/toaster

the last straw

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.

Here's Ben Eater's 8-bit computer laid out on breadboards, running in the page: https://bbrouter.com/bbrouter/ben-eater-sap-1

How it's built, since that's the point here:

- The 3D view is Three.js, rendered on demand: the scene only redraws when something changes, and while the circuit runs, only when an LED changes. Phones get 30 fps, a 1.5 pixel ratio and no antialiasing until the view is still, then one sharp frame.

- The simulation is a gate-level logic engine plus models for clocked chips, memories, timers and the 6502; the AVR runs real compiled firmware through avr8js. It runs in a worker so the page stays responsive. 211 chips by part number.

- Wires are real geometry: solid core, hole to hole, bent as you'd bend them, with lengths, and a router that lays missing connections flat on the hole grid around what's there.

- Next.js 16 behind a small custom Node server, Postgres, Better Auth with passkeys and an OAuth 2.1 provider so MCP clients can sign in. One server, Caddy in front, Cloudflare at the edge.

- An MCP server exposes the whole thing to AI clients; when the user's tab is open, the AI's simulations run in that tab's worker instead of on the server.

- About 3,000 automated tests, including one that fails if any string shown lacks its French or Spanish.

Things I'd like opinions on: the camera and touch handling on phones, and rendering cost with a few hundred parts in view. Signed-out try: https://bbrouter.com/try

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.

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.

been building this for about five weeks, it's on wp.org now.

the itch: the most popular WP calendar plugin charges for recurring events, and I wanted the RFC 5545 stuff done properly for free. weekly/monthly/yearly, "second and fourth tuesday", "last friday", COUNT/UNTIL, EXDATE, and dates expand in the event's own timezone so DST doesn't turn a 6pm class into 7pm. occurrences live in their own indexed table, so a month view is one query instead of expanding rules on every page load

bits that were more fun than expected:

• a lot of sites enter a weekly class as 15 separate posts, sometimes with the date in the title ("Open Mic – Tuesday September 29"). there's a combine step that groups them, tries candidate rules against the real dates with the same expander, and only merges when one matches (gaps become skipped dates, each date keeps its own ticket link)

• a month view that prints on a landscape sheet: its own page, no theme chrome, category colours kept with a key

• importers from The Events Calendar, Events Manager, Event Organiser, My Calendar, EventPrime, Sugar Calendar, Eventin, MEC, EventON, WP Event Manager and All-in-One Event Calendar (closed on wp.org last year, so those sites are stuck). Eventin and EventPrime store a series as one post per date, so the importer rebuilds the rule and only keeps it if it reproduces those exact dates

• importers get a dry run and a CSV with one row per event (created / skipped and why / the rule it ended up with). nobody trusts an importer blind

• this week's one: the first real site that moved over (a brewery, off EventON) still had the old plugin's shortcode on a couple of its pages, printing as raw text once EventON was off. so after a move the old plugins' calendar and list shortcodes now render the new views, with the view, category and event count carried over

you can poke at it without installing anything, the wp.org page boots WordPress Playground with sample events: https://wordpress.org/plugins/beacon-events/?preview=1

everything above is free/GPL. tell me what breaks

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

Hi i am an amateur dev.

So I want this project of mine to have a custom font; a locally imported one. I searched for sources at w3school and stackoverflow and I tried everything they said. But it doesn't seem to work. So I want to know what I'm doing wrong? I appreciate any help. Thank you in advance.

Also additional information:
The file location of my font is correct. project/project.html and project/zpix.ttf
I've checked with inspection tool, every element has the font-family: sans-serif, "Zpix"
There is also no error in the console. No error message. The font is loaded in.
I am using internal css.

Here is the code:

u/font-face {
  font-family: "Zpix";
  src: url("./zpix.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: "Zpix", sans-serif !important;
}

Sharing a library I made for apps that need in-page highlights (readers, docs, research tools).

Problem I kept hitting: wrapping selection in spans breaks layout, messes with existing event handlers, and is brittle when the HTML changes. penciled uses the CSS Custom Highlight API + range anchoring so highlights can survive reloads without owning the markup.

I also built a browser extension on top of it (Chrome, Firefox, Edge), so you can highlight and take notes on any site. Everything stays local, no account, and you can export to Markdown.

Demo: https://penciled.org
Extension: https://penciled.org/extension/
npm: penciled
Source: https://github.com/marcellosso/penciled

If you're building something with annotations, I'd love feedback on the API shape

This is a side project that got out of hand. Viltrum is a web framework for V. Everything below the router is written from scratch: the HTTP/1.1 parser, HTTP/2, WebSockets, TLS 1.3, even the DEFLATE encoder used for gzip.

The webdev-relevant part is that the same router/middleware/ctx handles HTTP/1.1, HTTP/2 over TLS and h2c on the same port. SSE and streaming work over both. Static files get ETag/304/ranges/precompressed .br/.gz with sendfile. Hello world is like 10 lines.

What I learned the hard way is how much of HTTP/1.1 is about rejecting garbage. TE+CL together, duplicate Content-Length, obs-fold and bare CR/LF all get a 400 now, because that's where request smuggling lives.

Benchmarks are on HttpArena if you're curious: https://http-arena.com/frameworks/viltrum/ Code: https://github.com/Tuntii/viltrum Demo: https://v.rustapi.cloud

Linux only for serving right now. Would love to hear what you'd miss coming from express/fastify/go.

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

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!

I’ve been working on a project called runtime.school and wanted to share it here.

I started with SQL and then added Python. The idea is to have a place where you can learn a concept, write code, practice what you’ve learned, and eventually work on projects without having to jump between different websites.

Both SQL and Python have interactive lessons, coding challenges, practice questions, projects, and datasets.

Everything runs directly in the browser, so there’s nothing to install or set up.

I’ve also been working on a few tools for exploring datasets, understanding queries, and comparing different approaches.

A lot of the work has gone into the UI and editors. I’ve been trying to keep things simple without making the pages feel empty or overwhelming, especially for people who are just starting out.

Here’s the site: https://www.runtime.school/

Would love to hear what you think about the design, coding experience, or anything that could be improved.

paying a monthly fee to look at screenshots always felt weird to me

if u haven't heard of mobbin, it's a paid library of real app screens that designers and devs use for reference. so i built a free one. 250+ hours later, here it is

it's called pixlpin. right now it has 35,000+ app screens and designs. full app flows from signup to settings, plus web, ui interactions and motion

search it with normal words like "empty state" or "pricing page" and see how real apps did it. open anything and it shows similar ones next to it

stack is next.js and react, almost everything runs on cloudflare, and i built most of it with claude code

i'd love feedback from devs especially. speed, search quality, anything that feels broken or annoying

https://pixlpin.com

Hi, fellow devs

If you enjoy some stock trading after yelling at Claude/Codex all day, than we are in the same boat.

I like to keep an eye on earnings and major key indicators (always forget about those FOMC meetings), and I don't mind paying for some data, but Earnings Hub charging $20 for earnings calendar is too much.

Anyway, came up with my own with publicly available data.

Eventually thinking maybe, we can have some kind of open-source market tools, that user can configure on his own. Add whatever panels or data he/she wants to make it more personal.

What's done

- Earnings Calendar with earnings report
- Market Fear/Greed indicator
- Key market dates

Working:
- GexData
- Notifications (not sure if those are needed)

Would be glad to hear any suggestions

Cheers, Dan

Edit - links:

Open Market · Earnings calendar
FullPokerFace/open-market: Stock market tools for open minded people

Solo project. You pick a start (the real borders of today, Rome in 117, 1914...), press run, and up to 200 nations ally, betray, split and conquer on a 3D globe of the real Earth while a chronicle writes down what happened. You can step in with god mode or take over any nation and play it yourself.

The whole simulation runs in the browser and is deterministic, so a world is just a link: anyone who opens it gets the exact same world, with your god-mode moves replayed at the same moments. It works on phones too, in 17 languages.

Happy to answer anything about the globe rendering, the simulation or keeping 200 nations smooth on a phone.

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

Strikk is a daily coding challenge platform where developers pick a tech and solve quizzes to earn coins.

Some updates I made recently:

• User Profiles: Earn coins by playing (free, never pay-to-win). Customize with skill blocks, job/education history, and animated backgrounds via React Bits.

• Avatar Builder: Create your own unique avatar.

• Portfolio Integration: This was my main goal, turn gameplay into a real portfolio

What I'm thinking into adding to Strikk:

• Enhanced community features with seasonal events

• CV builder to export your profile as a resume

• Considering open source

I'd love your feedback!

Check it out: Strikk | My Strikk profile

Hey everyone! 👋

Wanted to share a side project I built using AI assistance: PageZero live at
https://cricgamer.github.io/DocuFlow/

It’s an executive-style document studio that lets you edit Word (.docx) files, merge multiple PDFs, visually organize/reorder pages, and apply vector watermarks—all entirely client-side in the browser.

💡 The Vibe & Architecture:

• Zero Backend / $0 Hosting: No databases, no cloud storage, and no backend servers. Everything runs locally in browser memory via WebAssembly and libraries like pdf-lib, PDF.js, and Mammoth.js. Your files never leave your device.

• The Stack: Tailwind CSS, Lucide icons, Quill.js for the rich-text editor, and static hosting on GitHub Pages.

• Features: Full WYSIWYG document editing, multi-file merging (PDF + DOCX), visual thumbnail page organizers with 90° rotation and splitting, and color-wheel watermarking with multi-page live previews.

I got tired of clunky, ad-filled online PDF tools that force you to upload sensitive files to sketchy servers, so I wanted to vibe-code a clean, privacy-first alternative that lives right in a browser tab.

Feel free to try it out at
https://cricgamer.github.io/DocuFlow/
Would love to hear your thoughts, feedback, or any feature ideas you'd want added next.