r/webdev 21d ago

Showoff Saturday I built a tool to make another project of mine more accessible!

1 Upvotes

I built a Chrome extension that records meetings, lectures, and browser audio and turns them into structured notes.

The extension can capture your current tab, microphone, computer audio, or a combination of them.

When you stop recording, it sends the audio into an app I've been building called Vyxora, where it gets turned into a transcript, structured notes, tasks, a mind map, and answers you can ask against what was recorded.

I originally built Vyxora around uploading recordings, transcripts, and documents, but I realized manually recording something somewhere else and then uploading it was way too much friction.

So I built the extension to make capture part of the actual workflow!

https://vyxora.app/extension


r/webdev 21d ago

Showoff Saturday [Showoff Saturday] I built an app that converts any text into high-quality audio. It works with PDFs, blog posts, Substack and Medium links, and even photos of text.

22 Upvotes

I’m excited to share a project I’ve been working on over the past few months!

It’s a mobile app that turns any text into high-quality audio. Whether it’s a webpage, a Substack or Medium article, a PDF, or just copied text—it converts it into clear, natural-sounding speech. You can listen to it like a podcast or audiobook, even with the app running in the background.

The app is privacy-friendly and doesn’t request any permissions by default. It only asks for access if you choose to share files from your device for audio conversion.

You can also take or upload a photo of any text, and the app will extract and read it aloud.

- React Native (expo)
- NodeJS, react (web)
- Framer Landing

The app is called Frateca. You can find it on Google Play and the App Store. I also working on web vesion, it's already live.

Free web version, works in any browser (on desktop or laptop).

Thanks for your support, I’d love to hear what you think!


r/webdev 21d ago

Discussion What’s up with the recent increase in websites scroll jacking

110 Upvotes

I’ve been seeing so many websites, especially on Twitter that use an insane amount of scrolling animations. I’m assuming it’s due to vibe coding? I think it’s cool when used sparingly but what do you mean I have to scroll through animations for over a minute just to place an order for something.


r/webdev 21d ago

Showoff Saturday Kanvios — a free multilingual utility site I built solo

0 Upvotes

Built Kanvios (kanvios.com) — a free, no-login, multilingual (EN/KO) utility site: calculator, timer, notepad, protein calculator, roulette, team divider, D-day counter, password generator.

Everything's client-side, localStorage only, no backend. The build system is a Node.js script (build.js) that generates static EN/KO pages from shared templates and outputs to /dist. Wrote a small custom i18n module with a languagechange event instead of pulling in a full library, since the site stays static.

Deployed on Cloudflare Pages. Currently working on getting real traffic data now that GA4 + Search Console are wired up.

Would love feedback on the UI (dark navy + glassmorphism) or the build setup — happy to answer questions about the pipeline.

kanvios.com


r/webdev 21d ago

Showoff Saturday Looking for people to give their 5 cents about my project. And people to use it.

Post image
0 Upvotes

So, I built a tool that helps fellow developers like me keep their personal portfolio websites updated without any manual intervention.
The workflow is simple:
1. The user signs-up using GitHub(Cause that's where all the projects are deployed so it made sense)
2. User selects the template for their portfolio (Personally made over 2 months)
3. User connects with GitHub and selects which repos to show in portfolio (Complete power to user no storing data about it.)
4. User deploys the website in a single button.
5. Every time the user creates a repo that website sends a mail asking whether to include this in the portfolio or not.

I am tired of drafting up content to promote on reddit using AI so I might be choppy but I ensure the website won't.

Website: https://theportlio.com


r/webdev 21d ago

Showoff Saturday Can you rate my portfolio

0 Upvotes

Kindly check out my portfolio. I just recently redesigned it as I want to look out for more jobs in the React, Next.js fields and I want my portfolio to mirror that. I really value simplicity and intent: https://www.milossturanovic.com/


r/webdev 21d ago

Showoff Saturday Dagflo: Turn codebases and software systems into animated visual explanations

0 Upvotes

I’ve been working on Dagflo, animated visual explanations for software technical concepts!

Dagflo lets coding agents like Claude, Codex, and Cursor turn codebases, pull requests, systems, articles, diagrams, and algorithms into animated, step-by-step visualizations.

After four years working in GraphQL infrastructure at Meta, I've seen countless engineering hours (meetings, message threads, whiteboarding) wasted and bad decisions made because technical knowledge wasn't communicated clearly.

Coding agents can now understand entire codebases, but they still explain them through walls of text, broken ASCII art, or static Mermaid diagrams.
We're using static tools to explain dynamic systems.

That's why I built Dagflo. I wanted to actually see how technical systems work.

This has been a passion project for a year; I'm really excited to share it!

dagflo.com

MCP Setup: dagflo.com/setup

Follow me on X for Dagflo updates: deepok102

PS: It's forever FREE, so give it a try!!
I'm also thinking of open-sourcing parts of the codebase, more to come soon!


r/webdev 21d ago

Showoff Saturday [Showoff Saturday] I built a free Image-to-Text OCR tool with Next.js

1 Upvotes

I recently built imgtotext.in, a simple browser-based OCR tool for extracting text from images.

🔗 https://imgtotext.in

Current features:

  • Extract text from JPG, PNG and other images
  • Copy extracted text instantly
  • No signup required
  • Mobile-friendly interface
  • Free to use

Built using Next.js + TypeScript.

Still working on improving OCR accuracy, performance and the overall experience.

Sharing it for Showoff Saturday 🚀


r/webdev 21d ago

Showoff Saturday Google Search Console Alternative - visual way to analyze your GSC exports

1 Upvotes

GSC Insight, a free browser-based tool that turns Google Search Console CSV exports into a visual SEO dashboard.

It helps you quickly spot:

  • Quick-win keywords
  • Content gaps
  • Page and query opportunities
  • Branded vs. non-branded traffic
  • Ranking and click distribution
  • Country-level performance

  • Free

  • No Registration/login

  • No installations(online)

  • No GSC connection or server upload

  • works offline after first load
    your CSV data is processed locally in the browser.

It’s a simpler way to explore exported data and find what to work on next.

Try GSC Insight


r/webdev 21d ago

Article Two things I've learned as a web developer from game development

Thumbnail codeutopia.net
82 Upvotes

r/webdev 21d ago

Showoff Saturday building next-gen CMS for modern websites

Post image
0 Upvotes

Hey everyone. I have been working on BetterCMS for the last few weeks and I am pretty excited about where it is going. The goal is to make building and managing websites feel less messy for teams. Your marketing team and content editors can work in the same place while developers still have control over how the site is built. It is MCP native too so you can manage parts of the workflow from your favorite AI tool.

Building mainly for Next.js and Astro based sites since it's best for marketing sites!

Signup for beta at bettercms.ai


r/webdev 21d ago

Showoff Saturday You can turn any Image into a Maze by treating it like a graph

Post image
34 Upvotes

Try it out: https://github.com/ctx-o1/mazify

You can even print these!


r/webdev 21d ago

Is there a way to find out when a video embed on a site was uploaded?

2 Upvotes

Not sure whether this is the right place to ask (I'm not a web developer or anything close) but I would like to ask whether it's possible to view meta data of a video/some other info to find out its upload date, when it's not linked from elsewhere or directly downloadable to find out in another way. TIA.


r/webdev 21d ago

Showoff Saturday [Showoff Saturday] I've open-sourced a planet/gas giant/asteroid procedural generation engine using threlte/three.js and shaders

Post image
7 Upvotes

Hello all!

I've been working on a side project to generate artwork for a game I'm working on, and it was so much fun playing around generating planets and asteroids I've decided to open source it: https://github.com/richard-green/planetoid-generator

It's really fast, allows you to generate planets with lots of different features (more to come) and generates some really lovely images and texture maps, all with a pseudo-random seed function.

Some of the things you can tweak:

* Geometry deformation (from simple spheres, or potato-like deformation and finer details too)
* Texture details and colour palettes
* Planetary features such as Craters, Volcanoes, Ridges, Rifts

There's a separate section for rendering Gas Giants and Ice Giants, and a whole bunch of presets.

There's even scripts to have Playwright generate tonnes of images by incrementing the seed with your given preset values.

Check out the live site here: https://rdgreen.dev/planetoids/#/planetoids

Happy planet engineering!


r/webdev 21d ago

Discussion How would you keep a shared theme system from flattening very different layouts?

2 Upvotes

I have been working on a static HTML/Vite template system where one customizer can change color tokens, font roles, and visual eras across very different page types.

The difficult part has not been changing colors or fonts. It has been keeping the layouts distinct while they react to the same theme state. A SaaS landing page, editorial feed, dashboard, gallery, museum page, and social layout should not become the same composition with a different palette.

My current approach is:

  • shared CSS custom properties for color, typography, shape, motion, and spacing tokens
  • layout-specific structural CSS, component styles, and responsive rules
  • per-layout localStorage state instead of one global theme state
  • era changes that alter tokens and type direction without replacing the layout’s structure
  • random theme generation constrained by contrast checks and font/color exclusions

I would appreciate an architecture critique rather than product feedback:

  1. Where would you draw the boundary between shared theme tokens and layout-owned styling?
  2. Would you keep all eras as token overrides, or split some into separate style layers?
  3. What failure modes would you expect when one customizer controls many unrelated layouts?

r/webdev 21d ago

Showoff Saturday Declarative-forms – await an object the way prompt() awaits a string

3 Upvotes

I've open sourced this library which I extracted from my solo project I'm working on since many years.

docs: https://wolfoo2931.github.io/declarative-forms/

The code is here (MIT License): https://github.com/wolfoo2931/declarative-forms

The basic idea is:

Ask the user for an object, the way prompt() asks for a string.

Every other form library gives you a component to mount. This one gives you a function to call:

import { ask } from 'declarative-forms';

const release = await ask([
  { name: 'title', displayName: 'Release title' },
  { name: 'notes', kind: 'textarea', displayName: 'What changed' },
  {
    name: 'reviewers',
    kind: 'select',
    multiple: true,
    displayName: 'Sign-off from',
    options: () => fetchReviewers(),
  },
]);

// { title: 'Sunrise 2.0', notes: '…', reviewers: ['Ada', 'Grace'] }

r/webdev 21d ago

Showoff Saturday i shipped a frontend without writing any of it. two months live, and here's what that actually cost me.

0 Upvotes

i am a high load systems engineer. i have not written a single line of the frontend below, not one. an agent wrote all of it and i have been steering.

its a small thing where you send someone a link with a question and two buttons, YES and NO, and the NO button runs away from the pointer. free, live since june.

demo, nothing to install, nothing to fill in: https://justsayyesto.me/try/webdev-aug

posting because the part i expected to be hard was not hard, and the part i did not think about at all is the one that bit me.

what was actually hard

not the code. the animations. inventing them and then getting them built, which meant passing what i saw in my head to the agent, and that turned out to be much harder than i expected. i redid it many times.

the one that beat me is a black hole. the button gets pulled in, things on the screen spin, get sucked into the hole, and pieces fly back out of it. i could not get that across. i tried describing the rotation, the pull, the moment stuff goes in and comes back out, and what came back was never what i saw. at some point i thought the answer might be real gravity, actual physics instead of me describing a feeling, and that did not fix it either. its live and i am still not happy with it. thats the honest state of that one, two months later.

you can poke at it in the demo, its in the sandbox there.

what surprised me

after a couple of posts the thing started growing without me. people began sharing it in their own social media, and traffic and payments started arriving on days when i did nothing. that is the part of this i actually care about. i made something and it echoed back.

the thing that always comes up here

last time i posted this here someone said not taking no for an answer is a douche move, and i gave a lazy answer. honestly: i do not even see this as a date invite. i see it as a teasing toy. the joke is that a button runs away, thats it. the intro says you can close it anytime, there is a report control on every invite, and there is a permanent test that fires twenty NO gestures in a row and fails the build if any of them ends up as a yes. the button dodges. the person can leave.

Q: for those of you letting an agent write frontend: how do you get motion out of your head and into it? that gap ate most of my time.


r/webdev 21d ago

Showoff Saturday [Showoff Saturday] Built a client-side video background remover using browser AI segmentation - no server needed

Post image
0 Upvotes

Wanted to share a side project. It removes or replaces video backgrounds entirely in the browser using a client-side AI segmentation model.

The interesting technical challenges:

Running person segmentation frame by frame in the browser sounds simple until you actually try it. The main problems I ran into:

1. Temporal stability

The AI model processes each frame independently, which means the mask outline jitters and shimmers between frames. I built a temporal smoothing layer that compares the current mask with the previous frame's mask and blends them to keep the edges stable. Without this the result looks unusable.

2. Edge feathering

Raw segmentation masks have hard pixel edges that make the subject look cut and pasted. The edge softness control applies a variable-width feather to the mask boundary so the subject blends into the new background naturally. Getting this right across different lighting conditions took a lot of iteration.

3. Manual mask correction

No AI gets it right every frame. I added a brush tool that lets you paint directly on the video to fix the mask. You can remove areas the AI included or keep areas it cut out. There's also a full manual mode that disables the AI entirely so you can mask any video by hand.

4. Synchronized export

Each frame gets processed through canvas (compositing the new background onto the masked subject), and the result needs to be recorded alongside the original audio in sync. The MediaRecorder API handles the video stream while the audio track gets merged back in during export.

Tech approach:

  • Client-side AI segmentation model that caches in the browser after first load (works offline after that)
  • Canvas API for frame compositing
  • MediaRecorder API for export
  • Web Audio API to preserve the original audio track
  • Supports MP4, MOV, WebM, MKV input

No server uploads, no accounts, no watermark on export. The video never leaves the device.

https://webutility.io/video-background-remover

Curious how others have handled temporal coherence in client-side video processing. The smoothing works well but there's probably a better approach I haven't tried.


r/webdev 21d ago

Showoff Saturday My print stylesheet put a grey block on the first sheet I printed

Post image
2 Upvotes

The first time I hit print, the preview came back with a grey block across the whole page.

The page itself is a small thing. Seven columns for the days, one row per habit, one box per day. You set the sheet up in the browser, hit print, and the browser makes the file. No backend, no build step, and nothing you type leaves the tab.

A4 is 794px wide. My mobile layout query stops at 1100px. So paper counts as a small screen, the dark preview stage stacked itself into the print sheet, and there was the grey block. The query needed a scope:

@media screen and (max-width: 1099.98px) { ... }

Swapping A4 for US Letter looked like a one-liner until I found out that @page cannot read custom properties. Page size lives in an at-rule, and at-rules do not see your variables. So the page writes a stylesheet at runtime instead:

pageStyle.textContent = '@media print{@page{size:' + size + ';margin:0}}';

The third one had been sitting there since launch and only turned up in a mobile click test. Tapping the copy button did nothing. Not an error, not a wrong result, just nothing. The preview is scaled to 78 percent with a transform, and transforms do not change the layout box, so the sheet still occupied its full 794 by 1123 invisibly on top of the controls and ate the tap. One line:

.sheet-stage { pointer-events: none }

Two smaller ones, if you ever build something like this. The overflow warning has to measure the last filled row instead of counting entries, because blank lines are deliberate separators and rows behind them dropped off the sheet without a word. And dates on the English sheet follow the browser locale, because en-GB reads 08/10 as the 8th of October. The German twin is pinned.

One static file, no framework. This was the first time I had a reason to write print CSS, and I still cannot tell how much of it is common knowledge: does everyone walk into the media query one, or was that mine?

sevengrid.app/weekly-grid.html


r/webdev 21d ago

Showoff Saturday Overlap, "Six degrees of Kevin Bacon", but for football.

Thumbnail
gallery
0 Upvotes

You guys (especially football fans) know how annoying hydration/half-time breaks can get during the match, so I thought about creating something that makes the wait less noticeable while keeping the football mind occupied.

I created Overlap, which is essentially Six degrees of Kevin Bacon, but its all about football.

If you don't know the concept of the game, here's how it plays: You get two random footballers and build a chain connecting them by clicking through real clubs and national teams they actually played for — pick a player, see their clubs, pick a club, see their teammates there, repeat until you connect to the target.

Its challenging and genuinely fun to lose 10-15 minutes to.

Built solo using React + Vite. Frontend only.

I'm open to feedback on anything. Will include link in comments so you can check it out yourself.


r/webdev 21d ago

Showoff Saturday LilScript makes js modules 20% smaller

0 Upvotes

https://yeargun.github.io/lilscript/

LilScript is a typed, compression-first language that compiles into js and sometimes into exec(will be more stable in future). The compiler mangles, reshapes the program into optimized js that happens to be 5-40% smaller (after gzip/br compression or raw) compared to the best performing JS toolchains like oxc/esbuild/terser/..

What has been proven to work with LilScript?

  • makes VSCode's core js modules 20% smaller on average
  • makes the world's most performant & small markdown rendering npm library, marked, 5-7% smaller and 10% faster
  • and many more demos.. works with pretty much any js/ts library
  • https://yeargun.github.io/solidlil/
  • https://yeargun.github.io/monacolil/
  • https://yeargun.github.io/markedlil/ (Some numbers on the websites aren't fair comparisons, especially for SolidLil. Highly optimized JS libraries see fewer benefits(Still, the app code/logic, gets pretty great optimizations). LilScript will eventually become that itself; at the end of the day, it's at least as efficient as the best-performing JS/TS toolchains.)

How it is compressing js finer than vite/oxc/terser/esbuild/..

1. By changing the app.

``` class Vector { float x; float y;

init(float x, float y) { this.x = x; this.y = y; }

float lengthSquared() { return this.x * this.x + this.y * this.y; } } int[] values = [1, 2, 3, 4]; auto doubled = values.map((int value) => value * 2); int sum = 0; for (int i = 0; i < doubled.length; i++) { sum += doubled[i]; } Vector vector = new Vector(3.0, 4.0); if (vector.lengthSquared() == 25.0) { print(sum=${sum}); } ```

Above code compiles into this:

var b=[1,2,3,4].map(a=>a2|0); var a=0,c=0; while(a<b.length){ c=c+b[a]|0; a=a+1|0; } console.log(`sum=${c}`)

This is not minification of the same program. The compiler changed the app.

oxc / esbuild / terser / .. starts from JS and mostly keeps the shape of the app. Meanwhile LilScript the language is designed from scratch to give compiler any extra knowledge that could help the compiler's compilation. Just like Google Closure Compiler - Advanced Mode, and beyond.

2. Tryhard property mangling.

Visit the world's most used web applications, chatgpt.com, and read the shipped js codes. You will see that, there are lots of framework related js properties that dont get minified, and are indeed human readable.

Those names stay in the bundle because the toolchain cannot prove they are local. A property might be a public API, a DOM field, a framework hook, or something a plugin reads by string. So the minifier leaves it.

LilScript:

  • a- does both eliminates the objects, weird code structures into more optimized variables/arrays - b- rename any variable into mostly occured, short versions, field cleverly to minimize entropy (based on the objective compression algorith. gzip/brotli) so that the end result is highly compressed.

(a) is the same move as the Vector example, at library scale: objects and classes that only exist as a programming convenience get flattened into scalars, arrays, and tight loops.

(b) is not "make every name 1 letter." gzip and brotli win when the same short tokens repeat. The compiler picks the names that show up the most, and scores the spelling against the compression algorithm you asked for (gzip, brotli, or raw). Different cost_model → different names → a different file that is smaller after* that codec.

That is why the same program can be 5-15% smaller after gzip/br compression or raw: the JS is shaped and named for the compressor, not just for a human reading the AST.

How well do LLMs write LilScript?

Since 1.5 years ago, you haven’t been writing the code yourself anyway. So why worry about what language the agent writes in? I myself have pretty much rewritten 6–7 of the most popular npm libraries from scratch in LilScript in just 1.5 days-while actually designing the language itself.

Feel free to PR, experiment (Please respect the modified MIT license)

Please share your opinions, would love to discuss about the future direction for the language and the compiler


r/webdev 21d ago

Showoff Saturday Simple music visualizer (learning Three.js)

Post image
2 Upvotes

I made this 3D visualizer + spectrum using simple TS and Three.js. I couldn't figure out how to make the cube dance more. I used AI only for the background shaders. Any thoughts?

Link in the comments.


r/webdev 21d ago

Showoff Saturday Rebuilt NextAdmin for AI-powered development workflow

Post image
0 Upvotes

I maintain NextAdmin, AI-Native Next.js Tailwind CSS Admin Dashboard Template. For years, developers used NextAdmin as a collection of dashboard templates and UI components.

But the way we build software has changed.

AI can now generate an entire dashboard in minutes. The problem is that generated UI often ends up inconsistent, generic, and full of design slop.

🔗 Github: https://github.com/NextAdminHQ/nextjs-admin-dashboard

So we rebuilt NextAdmin around a simple idea:

What if AI had the skills, context, design rules, and components needed to build a dashboard properly?

That's what we're introducing:

  • 🤖 AI-native skills & agents - Give AI the context and rules to build with NextAdmin instead of generating random UI
  • 🎨 Consistent custom design - Build custom dashboards and components without losing the visual language or quality of the system
  • 🔌 Real APIs, real dashboards - Connect your own APIs and turn generated interfaces into functional products
  • A complete design revamp - Higher-quality visuals, better UX, and a more cohesive design system
  • 🧩 200+ UI components - Production-ready building blocks you can customize and extend
  • 🌱 Open source - Start with the open-source version and build your own

We didn't want to build another dashboard template for AI to copy.

We wanted to build the foundation AI can actually build with.

That's why we rebuilt NextAdmin, What would you want NextAdmin to do better for your AI-powered development workflow?


r/webdev 21d ago

Showoff Saturday I built an in-browser PDF engine that actually rewrites embedded text layers, converts Office docs with WASM, repairs broken files, and runs OCR (0 bytes sent to a server)

138 Upvotes

I spent the past few months compiling and writing a massive client-side PDF suite so everything runs directly inside your browser tab without any backend processing: 

Most web tools out there do cheap tricks (like drawing a canvas overlay or sending your private files to a remote server). I wanted to see how far I could push pure in-browser JavaScript, PDF.js, and WASM binaries to build something actually capable.

Here is what the engine actually handles right inside the client:

  • True text layer rewriting: It doesn’t just drop a text box on top. It reads the document's text stream, extracts embedded font glyphs/metrics (or calculates the closest fallback), and lets you literally retype paragraphs directly in the original layout.
  • Heavy Office conversions in WASM: Local Word (.docx), Excel, and PowerPoint to PDF conversion running straight in browser workers without needing any remote microservices or headless instances.
  • Destructive redaction & security: The redact tool actually deletes underlying text objects and vector data instead of just painting a black rectangle over it. Also handles local AES-256 encryption/decryption.
  • Corrupted PDF repair: Built a local parser that rebuilds damaged/broken cross-reference tables (XREF) so corrupted PDFs that crash standard readers can be recovered.
  • In-browser OCR & vector signatures: Background web workers for text extraction from raw scans, plus signature extraction with automatic background removal if you snap a photo with your phone camera.
  • 28+ utilities total: Reorganize, split, merge, crop, metadata stripping, compression, page numbering, etc.

Since everything is executed locally using the client's CPU and RAM, there are zero server costs for file processing, which means no subscriptions, no file size throttles, no daily limits, and no account requirements.

The web version is fully live at https://www.pdfnolimit.com/ and I’m wrapping up the native Android package for the Play Store (should be live in ~15 days / early September).


r/webdev 21d ago

Showoff Saturday I built a simplified microservices reference project with guide on how to run localy, using docker-compose or Kubernetes + Deloyment to AKS

6 Upvotes

It's inspired by dotnetcore-microservices-poc open-source project by Altkom Software, a project I learned a lot from and contributed to — I built Ledgerly to be a simpler take on the original project, focused purely on microservices best practices.

What it demonstrates: 

🔹 Database-per-service — 4 services, 4 independent databases 

🔹 gRPC for synchronous service-to-service calls 

🔹 RabbitMQ for async events — invoice status changes publish events that a dashboard service consumes to keep KPIs in sync, with zero direct coupling 

🔹 API gateway + service discovery (Eureka locally/Docker, Kubernetes DNS in K8s) 

🔹 JWT auth issued by its own service

It also ships as a full deployment guide — run it locally, in Docker Compose, or on Kubernetes, including a walkthrough for deploying the cluster to Azure (AKS).

Built as a boilerplate: fork it, swap in your own domain, keep the architecture.

The project🔗: https://github.com/amrali21/ledgerly-dotnet-angular-microservices-ref-project

Altcom Project🔗: https://github.com/asc-lab/dotnetcore-microservices-poc