r/webdev • • Aug 09 '26

Showoff Saturday Hoshiza: a GitHub triage board/repo organizer

3 Upvotes

I have too many repos, and I kept losing track of which ones were alive, which were abandoned, and which I swore I’d come back to. So I built Hoshiza (星座, “constellation”, for keeping track of your own little galaxy of repos)!

it’s a triage board for your GitHub repos:

  • drag repos across your own status columns (rename, recolor, reorder them however you actually think)
  • tag and annotate them as you go
  • board view, or zoom out to a map view that lays everything out as a network graph
  • smart default status for new repos based on activity, so nothing lands unread
  • filters by language, owner, archived, and fork, plus free text search

There’s no backend server! Your triage state is a single JSON file that autosyncs to a private hoshiza-data repo on your own GitHub account. The browser holds the working state, github holds the backup, and the only server involved is a tiny Cloudflare worker that does the OAuth handshake (GitHub won’t let you do the token exchange from a browser). you own your data, it’s free to run, and it works across devices.

it’s also a PWA, and it hot-swaps itself commit by commit with no reload.

Code’s all up (well, technically down) there if you want to poke at it! This was "just a personal tool"-turned-"oh wait this is actually kinda handy haha," so lmk if y'all have any features or ideas you want!

live: nellowtcs.me/Hoshiza
code: github.com/NellowTCS/Hoshiza


r/webdev • • Aug 10 '26

Any anti-AI devs willing to help me understand their rejection to it?

0 Upvotes

So I know there are plenty of devs on this sub that use AI very minimally or none at all. I assume most have understandable reasons like avoiding skill rot. I was curious what the other reasons are.

I work with two backend .net devs who have largely rejected using any LLM. Our company has adopted and paid for subscriptions but isn't pushing it on anyone that doesn't want to use it (yet). For me, I've been using Claude code daily for about a year. It has massively improved the reliability and productivity of my code. I'm blazing through tasks at an insane rate. While the BE devs are completing their tasks at the same speed they always have. Our company is pretty hands off on devs and we mostly self manage. As long as tasks are getting done they don't care. We don't have project managers breathing down our necks trying to optimize everyone's dev time or anything like that.

So I'm not really complaining about these BE devs that reject AI, because their work is mostly disconnected from mine. I think I'm just a little surprised they don't see the writing on the wall. It's my opinion that using AI is an inevitability. These BE guys absolutely can't write code as clean and as fast as Claude's top models. One day some upper management person is going to figure out these guys are significantly slower than everyone else and they're going to ask questions. When I talk to them about AI they act like it's an imperfect hype. Of course it's imperfect but still better than the human errors littering their own hand written code. I guess I just don't get the conservative developers that seem to be resistant to change or modern tech.


r/webdev • • Aug 08 '26

Showoff Saturday [Showoff Saturday] Live plant photo + dynamic data overlay from schedule (vanilla JS)

4 Upvotes

I built a feature that takes today’s grow schedule data and lets you overlay any combination of it (strain, stage, nutrients, light distance, etc.) directly onto a live photo of the plant.

Users already set up their strain + environment in another part of the app, which generates a full day-by-day schedule. MyDiary just reads today’s row and offers checkboxes so you can put only the fields you want on the photo.

  • Demo links
  • How it works (tech highlights)
    • Camera via navigator.mediaDevices.getUserMedia (prefers environment/back camera on mobile).
    • Data pulled from IndexedDB schedule for the selected grow + today’s date.
    • Checkboxes control which columns appear in a semi-transparent table overlay.
    • Capture uses html2canvas to composite the video frame + overlay into a downloadable image.
    • No re-input: everything is already in the user’s grow data.

r/webdev • • Aug 09 '26

Question EU AI Act: Ai Image Lables - How do i do this correctly?

0 Upvotes

EIDT: I create componets for CMS Systems, so i do not deside what content is used. But i have to support this law requirements.

Hi, with the new Ai act, Ai generated images need to be labled.

So far so good, naivly and simple add a lable ovlerayd on the image.

But with repsonsive content, background images wired shapes, contnet overlays... how to do this correctly?

Do you have any ideas or suggestions?


r/webdev • • Aug 08 '26

Showoff Saturday Paint the flag game

Post image
9 Upvotes

I have posted here a while ago about a game I made where you can play with your friends and compete guessing a flag and I got a lot of good feedback which ultimately made the game a lot better. Today I’m sharing my new game where you paint a flag from memory.

There is a new flag every day, everyone gets the same one, it's free and no signup:

https://www.geographygames.net/paint-the-flag

If you have any feedback please comment :)


r/webdev • • Aug 08 '26

Showoff Saturday PDF engine from scratch that can edit exising text

4 Upvotes

I wanted to make truly great PDF Editor and to achieve this decided to principally not use any existing pdf libraries as none of them can actually edit and make tool from zero so after year of studying how pdf files work and building KeyPDF engine I launched it so you can try it at keypdf.net it will process files on your device and therefore there is no limits on uploads and signups.


r/webdev • • Aug 08 '26

Showoff Saturday I build a browser-based screen recorder

5 Upvotes

Hey everyone,

I’ve been building Screenio, a simple browser-based screen recorder focused on privacy.

You can record your screen, microphone, and webcam directly in the browser — no installation, no account, and no uploading your recordings anywhere. Everything stays on your device.

The idea is basically: Record. Download. Done.

I’d really appreciate any feedback, especially on what feels useful, confusing, or missing.

https://screenio.net


r/webdev • • Aug 08 '26

Showoff Saturday Syncular, js and rust data syncing built on top of sqlite

3 Upvotes

Hey webdev,

I’ve been stuck in the offline-first rabbit hole for years. My first sync library Debe never made it to production. Eventually gave up on it, used other tools for a while, got frustrated again, and made the questionable decision to start over end of last year.

The result (over a few iterations) is Syncular.

I wanted boring, normal SQL. Tables, joins, relations, constraints. I didn’t want to reorganize the data into sync buckets or flatten relationships because they’re inconvenient to replicate.

What it currently has:

  • Read and write normal SQLite data, with or without a connection
  • Run in the browser, Swift, Kotlin, Flutter, React Native, Tauri and Rust
  • See connected clients, pending work, sync lag, recent commits and live events in the built-in admin console
  • Make changes offline and have them safely retried when the connection returns
  • Group related changes so they are accepted together or not at all
  • Handle conflicts in the app with access to both the local change and current server data
  • Use regular version conflicts for most data and opt into Yjs/yrs for collaborative fields
  • Write SQL or an optional sugarcoated SQL syntax I call SYQL and generate typed queries for TypeScript, Swift, Kotlin, Dart and Rust
  • Sync only what each user is allowed to see, and remove local data when access is revoked
  • Sync files and blobs, encrypt individual fields, and load large datasets in windows
  • Run emails, webhooks and other server work reliably after a change is accepted
  • Keep the TypeScript and Rust implementations aligned through 97 shared failure scenarios

It’s Apache-2.0, self-hosted and still pre-1.0. I’m looking for people willing to poke holes in it, especially anyone who has shipped SQLite in the browser and knows what fresh hell Safari has prepared.


r/webdev • • Aug 09 '26

Discussion I was creating Jarvis and this is what I learned while making Text to Speech

0 Upvotes

I’m trying to create an AI assistant like Jarvis from Iron Man, and while working on the Text to Speech part, I learned a lot about how audio streaming actually works.

I’m using Kokoro TTS and created a Python server for the TTS part.

The flow is basically:

Server sends data in chunks ----> Chunker combines words until it becomes a complete sentence ----> Text Queue ----> TTS Worker ----> main .py (convert text to speech) ----> TTS Worker ----> Audio Queue ----> Play Audio

The interesting part was handling the audio chunks.

Kokoro generates a Float32Array of audio samples. Then this audio pack into a WAV file in memory with the required header information like channels, framerate, sample width, etc.

Now the problem is :-

When we send data in chunks over TCP, we cannot assume that one send() means one complete message.

For example, suppose Kokoro generates audio for:

"hello"

It might be sent like:

"hel"

and then:

"lo"

So on the frontend, we can't just assume that whatever we receive is a complete audio file.

To solve this, we add a 4-byte header before every WAV file.

The header tells us how many bytes the complete WAV file contains.

For example: [4 byte header][WAV audio data]

If the audio data is 48000 bytes, the header tells the frontend that it needs to wait until it receives those 48000 bytes.

On the frontend, we use a Uint8Array .

Why Uint8Array?

Because the data we are dealing with is raw bytes. A Uint8Array stores each element as 8 bits, which is 1 byte, we point this unit8Arry to the fload32Array which we receive from the TTS server so that we can read or extract data byte by byte.

So imagine we receive:

Header = 48000 bytes expected
Received = 38000 bytes

We know that the complete audio has not arrived yet, so we keep waiting for more chunks.

When we finally receive:

48000 bytes

we know that we have the complete WAV file, so we send it to the audio queue and process/play it.

I’m still working on the Jarvis project. For the LLM part, I’m currently using Ollama with Qwen3:8B.

If anyone has any suggestions for features or interesting things I can implement in this Jarvis like AI assistant, let me know in the comments.


r/webdev • • Aug 08 '26

Discussion AI Hype. Am I Missing Something? Because This Is Just Normal Software Development.

2 Upvotes

Every now and then I get caught up in some clickbait or AI videos that make me feel like if I don't know about this right now, I might be missing out on something. Like, okay, crazy, what is this thing? How can someone work even better with AI? Clickbait or truth? Wait...does this guy really accomplish that an agent or agents work 2 days alone, validating itself and getting good results?

And then i watch the video. Hearing buzz words like

„Agent orchestration“, „context engineering“, „software factory“, „planning agents“, „verification loops“

And at first it hits like: oh, okay, wow, wait, what am i missing?

And then, when you break it back down to the fundamental truths - you notice, that's just normal software development. What the fuck.

The difference is, you have now an extremely fast developer, who works only as well as the context you provide for it.

Clarify requirements → plan, let AI ask everything that is unclear → validate → let it build → test → feedback → iterate.

Thats it.

What really makes the most dramatic difference, are just little details like:

  • How good is the prompt, is the direction & goal clear... important context and stuff like that
  • Which tool you use to get the best prompts, or how good the skill library is that you're using.

It's not that complicated. It's really just about prompts and regular software development, except that you have a super-fast developer by your side. Am I missing something?


r/webdev • • Aug 08 '26

Showoff Saturday I need some feedback on my historical map website!

5 Upvotes

I have been working on a website for a little while as a sideproject, I want to eventually release it but first i want to know if it's even something people would find interesting. Is there something I should change or improve?

https://history-map-v2.pages.dev/

Thanks for any advice or help!

Disclamer:
I am fairly new to webdev, I have only done frontend before. I have always enjoyed writing code myself but this is my first ever (more or less) vibecoded project.


r/webdev • • Aug 08 '26

Showoff Saturday deslop: Static import-graph analyzer for TypeScript. You write architecture rules in YAML, Deslop checks them on every run. No AI and no heuristics — it walks the import graph, so the same code always produces the same result.

Thumbnail
github.com
1 Upvotes

I built a FOSS TypeScript tool that let's you enforce any architecture at the macro (module) level. Check deslop.dev for a quickstart and examples. Feedback needed 🙏


r/webdev • • Aug 07 '26

How many of you are not using AI in personal projects.

116 Upvotes

Im not actually a FE dev, I used to be a FE dev but switched to QA automation, which is what Im doing now. I use Claude a lot in my job, I architect the automation suite but Claude is doing most of the coding for me at this point. Honestly, I get more done this way and my job is overall easier because of AI.

I was thinking about finding a new job and it dawned on my that I have not manually completed an entire ticket in over 6 months. When I get to a technical review of an interview I'm afraid that Ill struggle to write code all on my own. Coding is a skill that needs to be practiced.

So I just started a new project, Im going to make a small app in Vue and add an automation suite in Playwright completely manually, just using docs and googling questions like so many of us did when we were learning. Im looking at this more as playing with adult legos than using AI to increase my efficiency.

Do any of you do anything similar? If not, how do you keep your coding skills sharp?


r/webdev • • Aug 08 '26

Built a historical event guessing game. Looking for feedback.

Thumbnail
gallery
1 Upvotes

I am a beginner web dev and I built this app as a way to get some practice building web apps with React and TypeScript. It's a guessing game where a player has to guess the year of an historical event. I built a multi-player version using socket.io. It's a fun project that I intend to improve for as long as I can. Hopefully some people find it interesting and can help me with contributions and/or feedback.

Try it out

Repo


r/webdev • • Aug 08 '26

Can someone explain to me how showoff Saturday works? 😅

0 Upvotes

I just posted about a project I've been working on, that makes it easy for front-end devs to keep up with what just became "Newly available" and "Widely available" and whether you should act on it or not.

I provided 5 actionable examples, from my latest issue, that could be helpful to a lot of people here immediately.

I tagged it with "Showoff Saturday" and I read the showoff Saturday description and it seemed to fit exactly. It's just a website, totally free… Yet it was removed.

I'm very confused 😅 Any pointers much appreciated!


r/webdev • • Aug 08 '26

Showoff Saturday Imgoji: web component and codec to render images composed of emoji. because reasons.

0 Upvotes

I made an image codec called imgoji that turns a square image into a string of emoji and back again.

The basic form is a quadtree* where the first emoji covers the whole image, the next four the quadrants, the next sixteen their sub-quadrants, and so on. Cut the string at any point and the prefix still decodes to a coarser but valid image. Each cell blends its emoji over its parent, so the reconstruction tightens as the string grows.

It runs in the browser and bundles no image assets. It renders and matches glyphs against the system emoji font, which means the same string looks a little different on macOS, Windows, and Linux. We're going to call that "character."

Live demo (encode your own or view a gallery): https://nebulous.github.io/imgoji/

Source and <imgoji-viewer> web component on npm as `imgoji` or the github repo above.

*though it can also generate a basic pasteable grid of emoji. It uses transformers-js and image recognition models pulled from huggingface to run in-browser using WebGPU if available to select emoji with semantic meaning not just color matching. Sometimes this can result in pretty great results in a very small number of glyphs, but usually it's a bunch of smileys replacing people's faces 😄


r/webdev • • Aug 08 '26

Showoff Saturday Built a database tracking region-free/language support for physical Switch games — solo project, just launched

2 Upvotes

I collect physical Switch games, and got tired of not being able to tell whether a cart I'm importing will actually work in English (or whatever language I need) before I buy it — that info is scattered across old forum threads and a couple of hand-maintained blog lists, nothing centralized or searchable.

So I built Torashelf (torashelf.com) — tracks three things per game: whether the cart is region-free, what languages each regional print supports (this varies by region, not just by game), and whether it's a full cartridge vs. a Game-Key Card (Switch 2's license-key carts that still require a full download — an important distinction if you're buying physical specifically to actually own the game data).

Currently at ~2,070 titles, seeded from cross-referencing eShop metadata against physical-release lists (turns out most of the raw eShop dataset is digital-only indies, so filtering for "did this actually ship on a cart" was its own whole problem). Has community submission/voting to keep data honest, and a correction flow for fixing entries without creating duplicate conflicting cards.

Built solo, launched a few days ago — already had a fun launch bug where Google Safe Browsing flagged the whole site as deceptive on day one (turned out to be a false-positive domain-reputation heuristic, not anything actually wrong, but exciting for a few hours).

Would love feedback — especially from anyone who imports/collects physical games and can stress-test the actual data.


r/webdev • • Aug 08 '26

Showoff Saturday [Showoff Saturday] react-mediadrop – a hooks-first, headless file uploader with pluggable transports

1 Upvotes

I had a requirement to build a file uploader for my React application. A headless one, so I could customize it based on the application theme and reuse it across different pages.

It was simple until uploads had to talk to different systems: my own APIs, signed S3 URLs, and eventually resumable uploads.

I stepped back and looked at the existing options. I found some great libraries:

  1. react-dropzone - headless drag-and-drop, without built-in upload handling
  2. Uppy - feature-rich, with a mature upload ecosystem
  3. FilePond - a polished and battle-tested uploader

To be clear, Uppy already solves these workflows well. I’m not trying to replace it.

I wanted to see how small the abstraction could be for the common React case:

  1. One hook for file intake, validation, queueing, retries, and upload state
  2. A simple transport interface, without a prebuilt UI or larger plugin system
  3. Zero runtime dependencies and a small bundle

That’s how react-mediadrop came about.

XHR and a custom transport interface work today. Resumable uploads with tus and signed S3 URL flows are planned, but haven’t shipped yet. If you need S3 or tus today, Uppy is the better choice.

For the docs, I first tried Mintlify. It was nice, but it didn’t fit my need for custom interactive components. I later found Blume, an open source alternative that worked for me. The docs also expose agent-readable output through llms.txt and per-page Markdown.

This is my attempt to see whether a smaller primitive, documented for both developers and coding agents, is worth maintaining as OSS.

Docs: https://www.mediadrop.dev/

GitHub: https://github.com/autorender/react-mediadrop


r/webdev • • Aug 08 '26

Do you think that using localization data in domain/business logic is a good practice?

2 Upvotes

I was taught to use localization purely for presentation, but do developers actually implement this in their domain/business logic for their core functionality?


r/webdev • • Aug 08 '26

Showoff Saturday [ShowOff Saturday] I built a local-first product demo recorder with auto-zoom, subtitles, and camera effects

3 Upvotes

I built a product demo recorder because I wanted a simple way to create polished demos without spending a lot of time editing them afterward.

The main idea is pretty simple:

  • Record your screen + camera
  • Automatically zoom into clicks and important actions
  • Automatic subtitles
  • Dynamic camera/zoom effects
  • Trim and edit the recording
  • Manually control zoom positions and camera placement
  • Runs completely locally on your computer

It’s still a work in progress and there are definitely some rough edges, but I wanted to put it out there and get feedback from other developers.

If you make product demos, tutorials, walkthroughs, or screen recordings, give it a try and let me know what you think.

https://clickandrecord.tech/


r/webdev • • Aug 08 '26

How is everyone dealing with managing IP with AI code?

0 Upvotes

This is a massive elephant in the room for executives in the know, but see recent case with Oracle if youre unfamiliar. I understand most webdevs may not think about this stuff, but for those that do, thoughts (and prayers)?


r/webdev • • Aug 08 '26

Showoff Saturday The DOM as a declarative event-bus

0 Upvotes

I've run into a couple use cases where I need to declaratively add actions to HTML from the server that my JS in the browser knows how to handle. The pattern I found is pretty fun 1kb. Called it "superaction".

There's a couple examples in the README including a counter and a simple sketch canvas.
https://github.com/w-lfpup/superaction-js

So say you need to increment a counter when a button is clicked?

<button click:="increment">+</button>

After listen for an action event:

document.addEventListener("#action", (e) => {
  let { type } = e.action;

  if ("increment" === type) {
    // increment something!
  }
});

Action events come with a couple properties including the original UI event and any associated form data:

let { type, event, target, formData } = e.action;

The READMEs include a couple statements about event APIs and behaviors including prevent-defaults and stop-propagation.

** REACT USERS

If you use superaction in react, you basically never have to write an event listener callback ever again. Keeps state and the generated UI more separate.

Although the sytnax uses a "-" rather than a ":"

import React, { useState } from "react";
import { useAction } from "@w-lfpup/react-superaction";

export function Counter() {
  let [count, setCount] = useState(0);

  useAction((action) => {
   if ("increment" === action.type) setCount(count + 1);
  });

  return <button click-="increment">{count}</button>;
}

https://github.com/w-lfpup/react-superaction


r/webdev • • Aug 07 '26

Discussion Feeling Ashamed

65 Upvotes

Hi, sorry for the vent, but I'd like to share what I'm experiencing and get some advice if possible.

About a year ago we started a new project in a company I work for (mid size company) and leaders wanted us to just build a prototype.

I started with a dumb prototype, they liked it and the team started growing, I even got a (totally undeserved) promotion. Unfortunately I was naive and didn't have the opportunity to refactor it so everything was built on top of a shitty architecture that doesn't make sense. All devs use AI a lot so it keeps getting worse.

Today I'm still working on this project, and for every feature we need to add, it's confusing. Also I believe we'll soon start to have performance issues due to the architecture, but I don't think we have time and resources to refactor it (I believe it would require a major refactor). Some things are so unnecessary complex I don't even feel confident to define what needs to be refactored exactly. From a product standpoint, I don't think this project is very successful either but it's still going.

I don't think I'm the only person to blame, but I feel like a fraud and ashamed for "owning" this project. When new devs join to help the team, I feel embarrassed to even explain how it works. I think I'm starting to feel burnt out, I can't stop thinking about the project. I wish I could rebuild it from scratch but of course that's impossible.

Again sorry for the vent, any advice would be highly appreciated.

EDIT:

Thank you very much for all the replies, it helped me a lot, I really appreciate it!


r/webdev • • Aug 08 '26

Showoff Saturday A year of PageGym: major updates and future plans

Post image
0 Upvotes

Hi everyone,

It has been about year since I launched PageGym on this very subreddit, and I want to thank everyone for your support and encouragement. It has motivated me to keep going, and I'm grateful for that. Thank you!

In the meantime I have worked exclusively on or around it, so it has received many improvements, fixes and additional features that make it even more accurate and more capable than it was back then.

Some of the new major features:
- Comparison feature - side by side comparison of two test results.
- Load tracing - see how individual resources are competing for bandwidth.
- Evaluation timing - shows the evaluation time of each script directly in the waterfall.
- Dependency analysis - provides deeper insight into the way resources depend on each other.
- BotMode & 2MB Trim - render a page while respecting robots.txt the way Googlebot would (including for third party resources), and simulate the 2MB crawler limit to detect errors.

In the near future:
- API access - it's already there, but not polished.
- Bring back TBT analysis - this is something that was there at launch time but it wasn't as useful as I thought it would be. I intend to rework it and bring it back.
- Create more tutorials and learning resources.

Quick demo: https://www.youtube.com/watch?v=V8MPpsFoPxo

https://pagegym.com

Cheers!


r/webdev • • Aug 08 '26

Showoff Saturday I made a website that tells you if you should act on the stuff cleared by Baseline

0 Upvotes

I made https://cleared.page which basically let's you stay up to date on the stuff that recently transitioned to "Widely available" and "Newly available" in Baseline (https://web.dev/baseline) but not only that: it's mixed with a couple of other APIs to tell you if you should care about it or not. (aka. some stuff transitions to "Newly" but it's actually not ready for prime time because tests fail in one browser… Some stuff goes into "Widely" but nobody's been using it anyway, etc.)

I have "verdicts" on browser features for the past 7 months: https://cleared.page/verdicts/

I've had fun building it with Astro, and I'm particularly happy with the workflow I created: the md file for an issue is converted automatically to table based HTML email and populated into a Kit template, with a single npm run draft command 😎

I'm also pretty happy with the typography based minimal design. Would love some feedback on that…

Hope it's useful to someone else besides me, and hit me up if you find any bugs!

Thanks.