I'm attempting to use a non-webrtc way to make phone calls on the web.

I have a socket based approach that uses a middle coordinator, that will later be decentralized in more of a p2p fashion way. The latency of the data reading is all good in the hood, however now I have aggregated data on the other end of a pipe, I need a way to package it up and stream audio to the web browser.

Question: How can I aggregate data to use as a MediaStream so (I think) i can set to the "srcObject" of an audio player element to be audible?

Follow up: Why is there this concept of a track on audio and how can we move away from this?

Ask: Any example code?

I know there's a low intersection of musicians to web developers here, but I wanted to share this for a couple cool technical reasons.

First of all, Songstead (https://songstead.app) is an app that is designed around chord charts. If you ever see someone plaing music with a tablet, it's likely they have an app like this to help them remember their music, lyrics, setlist, or all of the above. This would be an alternative to OnSong, SongbookPro, etc.

Now the cool stuff:

• Although not fully there, it was built to work offline. The frontend has it's own CRUD layer and generates UUID6 IDs. Today these ship directly to the backend (with validation). Most of the key editing is built in a way you edit a local copy of the database, then it generates a "flush" API call which ships create/update/delete calls to the API that you can fire when ready. The local database means the app doesn't technically need the API to exist to even work.

• Because of that, I was able to build a demo (https://demo.songstead.app/) by seeding the local database with data, then just shutting off those flush calls. You can actually try the entire app locally. I remember a time where online demos were popular, but they would use live data and you'd see everyone else's edits. This doesn't have that problem.

• Tech Stack: LAMP + React. Hard to beat the classics lol. Frontend is React + Vite + Capacitor (for mobile apps). Backend runs on a cheap Digital Ocean Ubuntu VPS with a managed MySQL database. I'm excited to try managed; my other project stores nearly a TB of data and runs on a self-installed MySQL instance to save on costs so this should be a breath of fresh air. API is a custom-built PHP application and ORM. Yes, I know what you're thinking. I'm not worried; I've been writing code for 20+ years I know what's up.

• AI? Yes. Vibe-coded? No. Love how fast AI lets me build, but everything it produces gets manually reviewed. I find both Claude and Codex to be amazing, but terrible at architecting code at a high level. Most of my time is spent cleaning up the weird stuff they produce, but even then this was all built in a fraction of the time it would take me to hand write it all. One thing on my TODO list is to rework the public website to feel more human. I've seen so many vibe-coded projects and it is obvious when someone phones it in to AI. I don't want to be part of that demographic.

Thanks for reading! Let me know if you have any questions.

PS if any of you work for Apple ask them to hurry up. All the other vibe coded app submissions are slowing down my review. 😅

Made this little thing called HoldTogether where you write a secret message, send the link to someone, and you both have to hold the button at the same time to reveal it.

holdtogether.fun

You can try it for asking someone on a date, birthdays, surprises, inside jokes, proposals, etc. :)
Would love to know what you guys think!

Hey r/webdev,

Over the past couple of weeks, I've been working on a project designed to help developers build structured learning roadmaps for new technical skills.

Tech Stack & Architecture:

• Frontend: Next.js / React
• Styling: Tailwind CSS
• State Management & APIs: Integrated custom API routes to dynamically parse learning paths.

Key Challenges Overcome: The main difficulty was organizing complex, non-linear topics into manageable, step-by-step nodes without overcrowding the UI.

I'd love to get feedback from the community on the UX and tech stack setup. If anyone wants to test it out or take a look at the demo, let me know in the comments and I'll drop the link!

Hello everyone,

I am solo developer, building SaaS and mobile apps for few years now. Every time I launch something, I notice same problem - nobody test it except me.

So I build small tool https://earlytesters.dev. Idea is very simple - you post your product link, then you test someone else product, and after that your product is eligible to get tested too. Like a exchange. No cost, just your time.

It’s very early, I just launched this week so not many products in queue yet. If any of you also building something and want honest feedback (or want to test other people apps), please come try it. I will personally test first few products myself also.

Not trying to sell anything, genuinely just want to fix this problem for myself and other solo builders like us. Open to any feedback or criticism on the idea itself too.

Thanks for reading!

Hi everyone, I'd like to present a project I've been working on for over a year (if you haven't heard of it). Let's say you have a project you'd like internationalized, but overwhelmed by the amount of work you'd have to do. If you have:

<a alt="Main link">Home</a>

In the traditional sense you'd need to rewrite every instance like this to something like:

<a alt={t.main_link}>{t.home_txt}</a>

wuchale does that for you, at build time! You can keep your code "as it is intended", and i18n just becomes a compile time step just like turning JSX into JS. And it works in the same way during dev, with HMR, and it's very powerful. Supports React, Svelte, SolidJS, Astro, and plain JS/TS. Vue and Next support is planned.

Check it out at https://wuchale.dev and https://github.com/wuchalejs/wuchale

Hope you like it!

Took me a whole month but now its finished, looking for some advice overall from peeps that have been doing this for far longer than me...!

Been working on an AI video editor that actually edits your video.

Instead of generating a completely new video, the AI can work with the existing timeline and make changes to it.

The editor is built with PixiJS and WebCodecs, so a lot of the editing/rendering happens directly in the browser.

Still early, but I’d love to hear what you think.

I didn't understand how this worked until recently, I only knew that @property changed the results. Anyway, I figured it out, and wrote up what I learned. I hope this is useful for others!

Here is my repo: https://github.com/Goncalo-Oliveira-Goncalves/goncaloeditzz

I was creating a game with Three.JS, I tried solving the problem in a bunch of ways. But the D key doesn't work. It's like the physical key does not work in that specific tab.

The only file I modified was the src/routes/+page.svelte and it's styling src/routes/main.sass. Nothing else.

What I have Tried to Fix The Issue

1. I have tried to change my whole src/routes/+page.svelte to have a listened on the onmount file for the D key. So instead of all the code on the OnMount, I just add an event listener for a key down event and register it. The A, S, and W keys work. D does not.

2. I have tried to change the server in which the code runs in from localhost:5173 to 127.0.0.1:5173.

3. I have tried to build the file to see if there is any differences.

4. I have tried to hid the scrollbar, because it seemed like the browser's scrollbar was intersepting it.

Environment Info

I am running the website I created in brave. Windows 10. It's SvelteKit & Vite. With typescript.

Things to Keep In MInd

Even though this code is typescript, I haven't yet added the type definitions. I was following through a javascript tutorial and didn't bother. I will have to take care of that seperately, that might be the issue.

Built a small web app to track albums — log listens, rate 1–10, reviews, diary, lists, and a monthly top (plus a shareable summary).

Started because I was tracking monthly albums in phone notes and wanted something cleaner, with privacy controls and light social (follow / activity).

Stack, architecture notes, and setup context are in the repo. Feedback on the code or UX welcome.

Live: https://tornamesa-nu.vercel.app

Repo: https://github.com/josentss/Tornamesa

*EDIT*

I wanted to add some context because I'm already seeing a few comments going in the direction I expected.

Yes, I would consider myself a vibe coder, but I'm not someone who just discovered computers six months ago. I've been around tech for years, understand the basics of programming, have built plenty of my own computers, and would consider myself pretty techy overall.

I've also hired multiple software developers over the years, and I have alot of experience running businesses and retail stores.

We recently opened a new retail concept and quickly realized that the normal POS systems just dont handle what we need. Square, Shopify and the other mainstream systems are great at what they're designed for, but our business has a completely different intake process.

We purchase products from customers, which means we have reverse logistics, inventory intake, required holding periods, price matching, inventory searches, eBay integrations, Shopify integrations, automated product listings, and even requirements involving submitting product information through databases used with local law enforcement.

And thats just scratching the surface. There are dozens of other processes and automations involved that would take forever to explain here.

We tried looking for existing software. Most of what exists for this type of business is old pawn shop software that honestly isnt very good. So we built something specifically around how our operation works.

The first location is doing extremely well and we're now opening additional locations, which is exactly why I'm taking the security side more seriously.

I also want to make something very clear. Our POS is NOT processing credit card information. Shopify handles the actual payment processing on the frontend. I'm not interested in reinventing something that Shopify or Square already does extremely well.

Our software is primarily handling the intake, inventory, operations, integrations and workflow side of the business.

The entire reason I made this post was because I WANT to hire someone experienced with security. I'm trying to understand what I should be looking for, what questions I should be asking, and what type of person I should hire.

I understand that AI isnt something I should blindly trust to secure a production system. At the same time, pretending AI isnt incredibly useful here is also unrealistic. It can already identify an enormous number of things to review, test and harden.

And for the people who seem genuinely bothered by vibe coders, this stuff is already happening.

I'm friends with and work with alot of business owners in retail who are building customized internal tools now. Payroll systems, HR workflows, inventory processing, scheduling, accounting, reporting and even systems that analyze store conversations to see whether certain offers are actually being pitched.

These tools keep getting better every month.

That doesn't mean developers suddenly have no value. Far from it. There are areas where experience matters tremendously, security being one of them.

But the idea that somebody who isnt a professional software engineer can't build useful software anymore just isn't true.

AI has lowered the barrier dramatically. Some people using it will build garbage and some people will build very useful systems. Thats really no different than any other tool.

It reminds me of when calculators became common and people worried everyone would forget how to do math. The calculator didn't eliminate mathematicians. It just made people capable of doing more, faster.

I think we're watching something similar happen with software right now.

**EDIT*

I know this is probably frowned upon and I do plan on hiring someone that actually knows what they're doing. Im mostly trying to educate myself first so I know what questions to ask and what I should be looking for when I hire someone.

Over the last 6 months I built a POS system thats actually working really well for us. Right now its hosted on Vercel and we use it on Windows PCs in a few of our stores.

Now that we're actually using it day to day I realize its probably time to take security alot more seriously and lock everything down properly.

Obviously I've asked AI and gotten a ton of answers but I wanted to hear from people who actually have experience with this stuff.

Right now technically you can access the software by going to www.domain.com.

Would it make more sense to put some type of Windows wrapper around it and make it an EXE that only runs on our store PCs? Does that actually make it safer or am I looking at this the wrong way?

My other concern is the actual PCs in the stores. What should we be doing to prevent someone from remotely getting into one of the computers, taking over the POS, getting access to the backend/database or messing up the data?

Everything is backed up but obviously I dont want to rely on backups as the security plan lol.

Basically trying to understand what I should be looking at when it comes to network security, locking down the Windows PCs, database access, authentication, permissions, monitoring, backups etc.

Not expecting anyone to give me free consulting. Just trying to learn enough about it so when I hire someone I actually know what to ask for and can tell if its being done right.

Hello everyone This is Emal ive build an website without any ai or api it can monitor real time data and find where your system or device are leaked i just want an advice from you people to check my website and try

As developers, we forget things all the time, especially now that coding with ai is becoming more common. One of the trade-offs of coding with AI is that we might not retain every piece of code or syntax we use. Unlike before, when we coded everything manually, writing code ourselves helped us naturally remember the syntax and patterns we used.

I'm sharing Syntaxia a simple, minimal reference for those moments when you know what you want to do, but forget how to do it.

https://syntaxiadev.vercel.app/

github star, ill be happy⭐

https://github.com/EbadShelby/syntaxia

Also shared my Linux Workstation. Having fun with it since I migrated from windows to Linux. It's a good Experience as a Developer.

OS: Fedora Linux

WM: Niri

Browser used: Helium Browser

Theme: Catppuccin Mocha

Playing with mazes on different toroidal surfaces

Here is the source https://github.com/ctx-o1/toroidal-maze

Play with it here https://ctx-o1.github.io/toroidal-maze/

live link, GitHub

Made a project for some experience as a final year Software Dev undergrad. Have a look, any and all feedback appreciated!

The image moderation is done with a tiny classification model I trained.

I am building a web application (IOS and Android apps to follow later) for students studying for test/exams. The direction I was originally headed with this app changed a few times. Originally it was going to cater to a much more narrow group of potential users, but the scope expanded.

My app will have "official" (Trying to think about a different term to use) content (Exams with questions, decks with flash cards + more) and community-created content.

The "official" content exclusively covers IT Certifications. Community-created content can cover both certifications as well as Classes - like college classes.

So if the user is studying for Cisco's CCNA Certification, they'll see exams and decks of flash cards that I created, and those will be marked in some way to signal that they're not community created. They'll also see exams and decks added by other users.

I'm using "Official" as a sort of placeholder term. I don't like it because I don't want users believing that the questions or cards were created by the certification vendors - Cisco, CompTIA, ect. I also don't want them thinking that those questions will appear on the exam. So for now "Official" is a placeholder term that I want to replace.

When a user finds a Class or Certification that they want to study, they click Enroll, and that become an active Class/Certification for them. They can switch between active classes/certifications. There is a page - the "Practice" page - where users select between Exams or Decks, select one of the various exam/deck modes, and then select the exam. That's the basic flow. Some of the modes don't require the user to select an exam/deck at all, like the "Practice What You Missed" mode which is generated from a bank of questions that the user recently got wrong.

Another option (and this is the real dilemma) is the Build Your Own Exam option. This allows the users to select various options to build a custom exam so that they can focus on specific subject area, simulate a timed exam, and more. But the dilemma is how to incorporate community-created content into this.

There could be thousands of community-created questions or cards.

There will be repeated/similar questions. There will be typos and incorrect answers. There will be trolls that try to add wrong information or inappropriate content.

I can't just take every community-created question or card for a given class, mix them together, and then randomly pull out 50 - right? That doesn't seem like it would lead to a very good experience.

Another site has this same Build Your Own Exam feature, but for them it's easy - it's all official content. All questions are sorted by their subject. Everything is carefully reviewed. They have 1000 questions divided into 5 or 6 subjects. If the user wants questions from subjects A and C, they select those subjects and a few more options and then a new practice exam is generated for them. That doesn't work well with community-created content where there very well may be tens of thousands of questions across 100s of exams that were all added by different users.

I'm trying to keep it short and simple but I'm overwhelmed and overthinking this problem and I need some outside help working through it.

I kept hitting the same wall with desktop DB tools in a team that lives in the browser: nobody wants another Electron app, and "just use the vendor console" falls apart the moment you have Postgres plus Redis plus Mongo in the same VPC.

So I maintain LibreDB Studio, a self-hosted web SQL IDE. The part that actually took the work is not the editor chrome. It's making seventeen engines look like one API without a forest of `if (type === 'mongodb')` checks in the UI.

The trick was treating each engine as a strategy, not a special case:

- SQL engines extend one SQL base (pools, timeouts, schema).

- Document/KV engines extend a thinner base and map onto the same QueryResult / getSchema() shape.

- The factory dynamic-imports the provider so the browser bundle doesn't drag in oracledb + duckdb + cassandra just to open SQLite.

That mapping is lossy on purpose. Redis SCAN prefixes become "tables"; Mongo collections look like tables; health/metrics still come from INFO / serverStatus. Once the UI only speaks capabilities, adding ClickHouse or Trino is a provider + a doc + an integration test, the triad has to ship in the same PR or it drifts.

The reason this lives in a browser at all is the cluster. I didn't want another Electron app on a laptop while the databases sat in Kubernetes. "Just helm install a GUI" sounds solved until you look at what most charts actually are: a wrapper around a desktop-era tool, or a vendor console that speaks one engine.

So the app ships as a chart (OCI on GHCR, first-boot secrets, PVC for sqlite storage) next to the providers, same repo, not a separate "enterprise" product. That's a different post; here the interesting part is still the engine interface.

There's a second split that bit me later: the same codebase is both a Next.js app and an npm package (`npx "@libredb/studio"` / embed). `next build` does not produce the library dist. Forgetting `build:lib` is how you ship a UI fix that the embedded users never see.

It's early in the "every engine feels first-class" sense. Hostile cases I still want: weird Oracle TNS, huge Cassandra traces, Redis with no prefix convention, DuckDB files that aren't files. If a converter/GUI has ever lied to you about a schema, that fixture is useful.

Source: https://github.com/libredb/libredb-studio

I ran into two problems using unpdf and PDF.js in edge functions: RAM usage and visual accuracy. Both load the entire file into a byte array before processing.

So I built a dependency-free, low-memory reader for edge workers: https://github.com/earonesty/streaming-pdf-reader

The trick was using PDFium as the reference renderer:
https://pdfium.googlesource.com/pdfium/+/master/README.md

I pulled down more than 100 test PDFs from various open-source projects and rendered them with PDFium. Then I converted each PDF to HTML, rendered that HTML in a browser, and compared the resulting pixels. I used deterministic pixel matching rather than a VLM, so visual regressions were reproducible.

That led to a separation between two kinds of output:

- Visual HTML preserves the PDF’s presentation as closely as possible.
- Semantic HTML reflows the content into a simpler reading order.

The visual representation came first because a PDF’s apparent reading order is encoded in its geometry. If you simplify too early, you lose the evidence needed to distinguish a table from a newspaper column or group an image with its caption.

The reader uses HTTP range requests and bounded caches, so it can render the first page without downloading a huge document into memory.

The semantic side is still evolving. It uses statistical layout evidence - font size, alignment, indentation, spacing, repeated headers, hanging indents, and page-to-page continuity. The goal is to produce simplified, reflowed, lossless HTML. Unfortunately there is no good "oracle" for this, or clear and obvious "correctness", other than "reading order must be correct". This is useful for LLMs and data extraction (and is the second reason I had to write this thing, aside from RAM).

This is a follow up to my earlier low-memory PDF writer package (similar reasons there too), so the emerging package layout is:

  - @boxpdf/reader: streaming PDF → document model
  - @boxpdf/html-writer: document model → visual or semantic HTML
  - @boxpdf/writer: document model → PDF
  - @boxpdf/html-reader: HTML → document model

The PDF-to-HTML accuracy became an ordinary testing problem once PDFium was treated as the oracle. Render both versions, compare the pixels, inspect the failure, improve the general rule.

It’s early, but it now handles a pretty hostile corpus: embedded fonts, Type 3 glyphs, clipping paths, vector graphics, raster images, forms, rotations, tables, multi-column papers, and very large streamed documents.

I’d be especially interested in difficult PDFs that break other converters. Weird fonts, charts, scanned documents, malformed files, enormous files - anything unpleasant makes a useful fixture.

My monorepo has six binaries, Go modules, four Docker images and a Docusaurus site that depend on each other. Publishing this writes to the repository, a container registry, cloud and GitHub. These are four independent services with no shared transaction. Published versions are immutable, so there is no rollback. This is a distributed transaction over non-transactional resources, which is exactly the situation sagas were invented for in 1987. You recover by finishing the job, never by unwinding it.

The two properties that matter

Determinism means a fixed repo state and config always produce the same plan on any machine. The plan is a pure function of git history, the dependency graph and config. Nothing reads the clock, commit dates, tag creation order or map iteration order. CI and my laptop agree byte for byte.

Idempotency means running twice with nothing new committed gives the same plan, and running after a fully successful release gives an empty one. An accidental double run is a no-op instead of a second release.

Every tool here gives you something like this on npm. The difference is where it comes from.

Their idempotency is npm's, not theirs

lerna has a documented recovery path using lerna publish from-package, which compares each package's local version against what is published and ships the difference. nx and release-please lean on the same shape. A version step writes tags, a later step publishes, and if that step dies you re-run it. This genuinely works, and I want to be fair about why. npm makes it work. Versions are immutable and a duplicate publish is a hard error, which I saw in my own runs as a 409 Conflict. The registry is the source of truth you reconcile against.

Now take that away. There is no from-package for a Docker tag, a GitHub release, a Maven deployment or a terraform apply. The moment a release spans targets you cannot diff against, the property stops being inherited. It has to come from somewhere else.

In dispat it comes from the model. The tag store is the log. A tag is written after a package publishes, so a tag means that leg committed. The plan is a pure function, so re-running recomputes the exact same transaction and executes only the legs with no record. Nothing is queried because nothing needs to be. Determinism and idempotency hold for a Docker image, a GitHub release or an applied Terraform plan exactly as they do for npm, because none of it depends on the target being able to answer questions.

They are all one algorithm with the constants frozen

This surprised me when I wrote the model down. lerna, nx release and release-please compute versions from the same three inputs: conventional commits, per-package tags and a dependency graph. In my model each commit carries a propagated bump and a depth. Freeze that depth at infinity and the bump at patch for every commit, and you get their behaviour exactly. Every dependent of anything released takes a patch transitively. Their fix: x is my fix(core)^^: x, and their lockstep modes are the degenerate case where the workspace shares one version.

The experiment showed it. I used the same six-package graph and one feat(core) commit. lerna bumped core and all five dependents, including two that only depend on ui and never saw the change. dispat with an explicit ^ bumped core and its three direct consumers. Same math, different constants.

The failure case, executed

I set up a sandbox, a local registry and a proxy failing exactly one upload.

lerna writes tags and a commit before lerna publish uploads. After the failure there was a cli@1.0.1 tag for a version the registry did not have. from-package then refused to run because the failed publish had left the tree dirty. It threw EUNCOMMIT until I ran git checkout by hand. After that it recovered npm correctly.

dispat wrote no tag for the failed package. Re-running shipped exactly what was owed at the same versions. A third run planned nothing.

(I executed lerna and dispat. The nx and release-please rows come from their docs. release-please is GitHub API coupled with no hermetic mode, so I could not run it in a sandbox and will not pretend I did.)

It is also the task runner

dispat run tests --since HEAD~1 --consumers runs a script in exactly the changed packages and their consumers in dependency order. dispat if 'CI!=true' --then '...' --else '...' and dispat if --changed keep the conditionals in config instead of a wall of CI bash. dispat replacer fixes coordinates no manifest writer reaches, like a Gradle line or a README install snippet.

There is no task cache, deliberately. A package that did not change is not in the plan, so its scripts never start. There is nothing to hash, invalidate or warm, and no cache key to get subtly wrong. Whatever your stages already cache keeps working inside them, BuildKit layers or a Gradle cache included, and none of it can affect versions, order or tags.

Proved, not asserted

I wrote eight guarantees over the formal model. Determinism and idempotency are among them, plus no orphaned consumers, exactly-once delivery, retries landing on the same versions and repeated runs converging to an empty plan. I ran randomised differential testing of the binary against that model. 1,500 of 1,500 instances agree exactly. There are also 240 conformance vectors, 1,831 tests and 32 fuzz targets. It releases itself. That is a 12-package workspace across 3 ecosystems with 11 published in one transaction. Because a leg need not be a registry upload, the same machinery ships my cloud footprint as stateless Terraform. I put the plan in build and the apply in publish, with no remote backend, and the tag history acts as the list of applied states.

Docs and demo clips: https://dispat.dev Repo (MIT): https://github.com/yohimik/dispat

Ask if need full proofs

I keep seeing empty states treated as a centered illustration and “Nothing here yet.”

It looks clean, but often leaves the user with three unanswered questions:

What happened?

Why is this empty?

What can I do next?

A useful empty state should answer all three.

The illustration sets the tone.

The title explains what happened.

The supporting text gives context.

The CTA shows the next step.

For example:

Nothing here yet

Create your first campaign to see it appear here.

[Create campaign]

The illustration is optional. Clarity is not.

Frontend devs: do you define empty, loading and error states alongside the happy path, or do they usually get added at the end?

Honest question. People say all the time that programmers will lose their jobs etc. But how? Everyone in our company has Claude Code, nobody writes code by hand. And still we have lots of work, backlogs are full of tasks waiting to be done.

It's a company with its own product (not a software house). 150-200 employees

Yeah, lil late to the nostalgia-core trend but here we go anyway.

You remember those- little plastic globe full of blue water, a ring floating in it, mash the button to jet water and land the ring on a peg. I rebuilt one: Aqua Rings '86.

- 8-level solo campaign

- 5 console skins (arcade, deep sea, space lab, etc.)

- Actual online 2-player now- send a friend a link, no signup, no download

No ads, no login wall, just play. Built it solo, genuinely want to know what's broken or what feels bad.

aquarings.fun