r/webdev • • 2d ago

Showoff Saturday SvelteEsp32

Thumbnail
github.com
0 Upvotes

Pack any Svelte, React, Angular, or Vue app into a single C++ header. Serve it straight from ESP32/ESP8266 flash — gzip compressed, ETag cached, OTA-ready.

It is not for serve you website. It is for microcontroller programmer, who wants to make pretty webpages (component orientated) served from Esp32 or esp8266.


r/webdev • • 2d ago

Showoff Saturday Round 2: reworked my landing page after your feedback (not selling anything)

Thumbnail
perf-sentinel.dev
0 Upvotes

Hey all, some times ago I asked for feedback on this landing page of an open-source project. The main takeaway: it felt too dense and read more like docs than a landing page.

The density is partly intentional: it's a hybrid between a landing page and a kind of "distilled doc". So instead of cutting content I replaced the heaviest text blocks with diagrams (a before/after trace, anti-pattern pictograms, a flow for the different modes). Just a quick reminder: for the tech personas it's intended to backend and devops.

How good does it read now?

Thx!


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] A static site that curates ~700 browser games, checks every link daily, and falls back to the Wayback Machine when one dies

0 Upvotes

Project: vibe1up.com, a free directory of AI-made browser games. Nothing to sell, just the tech.

- Fully static: HTML/CSS/vanilla JS on Vercel, built from a GitHub repo. Client-side search over a single JSON file.

- Daily scheduled jobs pull new games from official APIs/feeds (Vibe Jam, itch.io RSS, Ludum Dare, HN Firebase API), rate-limited to 1 req/sec per host with an identifying user agent.

- A link checker retests every game daily. It only hides a game on definitive signals (404/410/451, parked domains, DNS confirmed gone). Timeouts and 5xx need two failures in a row. Dead games with a Wayback copy show "Play archived version".

- A countdown to the 10 AM ET daily drop runs client-side and handles DST, in about 2 KB of inline JS, and respects prefers-reduced-motion.

- Every change goes through a PR with Playwright tests before it merges.

Would love feedback on the link-check heuristics. Flaky hosts were the hardest part.


r/webdev • • 1d ago

Question I want to create a personal video player, but I have some questions.

0 Upvotes

I've been using Plex for a few months now, and it's good enough, but there are many things I get annoyed about. Particularly when it randomly changes thumbnails and posters for no reason, and has a frankly terrible way of organising extras and multiple versions.

So I thought I'd try building it myself.

It need not be pretty, nor have all the features, nor be available outside my home network.

My first problem is that all my files are MKV, which doesn't work on a browser. But Plex seems to make it work somehow, so there must be a way, and after ages of searching, I just cannot find a way that works.

Second, is handling multiple audio and subtitle tracks. Again, something Plex seems able to do inside a browser, but I just can't find out how.

I also want to be able to add an interactive overlay on top of the video, to choose different tracks or to skip to the next video or back again. I think I know how I can make that work.

I also want any playlists to be continuous and without breaks. I found a nice short piece of Javascript that does this, so I feel I should be able to add that in. As a fun little extra though, I wonder if it's possible to play a series of images as a slideshow, maybe with music behind it, perhaps taken from a PDF file. This is probably too much to ask, and might involve something a bit more technical than I am capable of at this time, possibly some processing is involved as well.


r/webdev • • 2d ago

Showoff Saturday I built MatrixSpace: A hotkey-driven, multi-workspace developer dashboard for Firefox

1 Upvotes

Hey everyone,

As a developer, I just wanted a clean, fast new tab page that fits my daily coding workflow without all the usual clutter.

So, I built MatrixSpace for Firefox. Instead of one cluttered page, it splits your dashboard into 4 specialized workspaces. You can instantly jump between them globally using hotkeys 1, 2, 3, and 4:

  • Workspace 1 (General Launchpad): The clean, customizable home screen featuring a minimalist system clock. Perfect for a distraction-free focus view when you just open a new tab.
  • Workspace 2 (The 90-Link Keyboard Hub): Built for speed. It features 9 columns holding up to 90 total links. Every single link slot is mapped to row-based keyboard shortcuts (q1-q0, w1-w0, e1-e0, down through rows a, s, d, z, x, c). Once you press 2, you can launch any critical doc or repo out of pure muscle memory.
  • Workspace 3 (The Time-Horizon Matrix): A visual 2x3 productivity task tracker that organizes your project milestones into six distinct buckets: Today, Next Day, This Week, Next Week, This Month, and Next Month. Perfect for keeping your high-level goals in sight.
  • Workspace 4 (Quick Notes & Snippets): It is a dedicated text scratchpad for some quick notes and code snippets.

Other Features:

  • 100% Local Storage: Everything is powered by persistent local browser storage hooks.

I’d love to get your feedback on this extension, the hotkey switching flow, or any features you think would make a great addition !!

Firefox Addon: https://addons.mozilla.org/en-US/firefox/addon/matrixspace/

Github Repo: https://github.com/adu013/matrixspace

PS. Build using HTML, CSS and Vanilla JavaScript.


r/webdev • • 2d ago

Showoff Saturday [Showoff Saturday] Built ArcadeX: a lightweight 10-in-1 neon arcade portal in vanilla JS & HTML5 Canvas (runs at 60 FPS in mobile browsers)

0 Upvotes

Hey everyone!

I'm 16 and recently finished building ArcadeX (https://pranav2mingame.netlify.app/), a lightweight browser arcade portal designed for quick mobile play.

Why I built it:

I wanted to build games that run directly in the browser with zero load screens, no app installs, and no login friction.

Tech stack & implementation:

- Pure HTML5 Canvas + Vanilla JavaScript (no external game engines or heavy frameworks).

- Tuned to maintain a steady 60 FPS on mobile browsers.

- Browser LocalStorage handles all game state, scores, and trophies locally.

- Hosted on Netlify.

Includes 10 mini-games (Flappy Fire, Snake Rush, 2048 Neon, Reflex Tap, Neon Pong, etc.).

Looking for technical feedback:

  1. How does the canvas frame pacing feel on your phone/browser?

  2. Any suggestions on optimizing the game loops or handling canvas resizing across different aspect ratios?

Thanks for taking a look!


r/webdev • • 2d ago

How to manage layouts in forms

27 Upvotes

I'm trying to design a 2 column form but can't decide how should I render error messages.

If I don't allocate a fixed height for an input div (label + input + error) then entire layout of form gets disturbed whenever an error message is rendered.

If I pre-allocate a fixed min-height for input div (label + input + error) then this does solves the layout shift issue but the form looks bad.

One option is showing an error icon and error message as tooltip on hover but this doesn't works on mobile as users would have to tap on the icon to get error message.

The only solution which I think would work is showing icon + tooltip on desktop and plain error message on mobile as on mobile the form is single column.

Is there any better way to handle this? Would appreciate any suggestion.

No Fixed Min Height
No Fixed Min Height
Fixed Min height
Fixed Min Height

r/webdev • • 1d ago

[Showoff Saturday] I made a restaurant menu site that manages the menu by using Google Sheets as a CMS

0 Upvotes

My site is here: https://eatthemonsoon.com The guts of the database code, I got from this article [here](https://dev.to/ashish-codejourney/using-google-sheets-as-a-cms-a-simple-powerful-approach-to-content-management-fg1). Then I formatted the data into menu items. It's been a fun project and I'm looking forward to the next step. I'm thinking I will rewrite the index file and try to deliver it as an SSR soon. It's hosted on netlify via github. If anyone has experiencewith ssr's, could I just write my own build code and toml to run in a netlify edge function, or do I need Astro or some other rendering service?


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] Published my first devvit app on Reddit

Post image
0 Upvotes

I turned my Vue 3 game into a devvit app, that can be played directly on Reddit. PixReveal is a pixel art guessing game. A pixel drawing gets revealed pixel by pixel. The faster you guess, the more points you earn. The devvit version is more compact, focussing on quick rounds with 5 drawings to guess and a percentile showing "You are better than x% of players".


r/webdev • • 1d ago

Discussion JS code that is working for years, suddenly no longer working.

0 Upvotes

If you try to capture the clipboard on Microsoft Edge version155.0.4283.62 (Official build) (64-bit), then it will say in dev console: "
FAILED false NotAllowedError: Failed to execute 'readText' on 'Clipboard': Document is not focused."

However, the same code works fine with Chrome and Firefox. Is this a Microsoft Edge regression bug? I use this code everyday. So I am sure that it is a recent update that cause this. I have also tested that it has nothing to do with the origin.

// sample code
document.addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
console.log("SUCCESS", text);
} catch (e) {
console.error("FAILED", document.hasFocus(), e);
}
});


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] I built ResumeForge – an open-source AI resume builder & job tracker with client-side LaTeX-to-PDF rendering, word-level diffs, and local Ollama support (No signup required)

0 Upvotes

I built ResumeForge, an open-source resume builder and job application tracker designed to help tailor resumes and cover letters to specific job descriptions using your own local models, while keeping exports (LaTeX, Overleaf ZIP, and PDF) completely free with no signup required.

Live demo: https://resume-forge.mnaveedk.com

GitHub repo: https://github.com/naveedkhan1998/resume-forge

How it works: You maintain one master profile with all of your work history, projects, and skills (or import an existing PDF/DOCX/TXT resume). When you add a job posting, it selects and reframes your existing experience to match the role, shows keyword coverage against the job description, and generates a tailored 1-page resume and cover letter.

A few things under the hood:

  • Client-side LaTeX to PDF: To avoid running a heavy multi-GB TeX Live installation on the backend, the server generates .tex source and a custom .cls file, and the frontend parses and renders the LaTeX directly in the browser for live previews and PDF export.
  • Word-level diffs for AI edits: Whenever you ask the AI to refine a section, it shows an inline diff (+added, -removed, reworded) so you can review or tweak every change before saving.
  • Preloaded dummy data: Every new device session comes pre-populated with sample data (Adrian Monk) so you can test the tailoring workflow and LaTeX preview right away without uploading your own resume first.
  • Local Ollama first + 50 free demo requests: The main goal is for people to clone the repo and run it locally with their own Ollama models (qwen3.5:9b, llama3.1, etc.). So you can try it in the browser first without setting anything up, the live demo uses my personal Ollama account at the system level with a 50- request limit per device session.

Stack: React 19, TypeScript, Vite, Tailwind v4, Django Ninja, PostgreSQL (pgvector), and Nx.

(Note: the demo API is hosted on a free tier, so if it hasn't been used recently the initial cold start can take around 45 seconds to wake up).

Would love to hear your thoughts or feedback if you give it a spin!


r/webdev • • 2d ago

Showoff Saturday I added an easter egg to playing cards of Australian Flora, getting tspans to work cross-browser was hell.

Thumbnail svgklondike.pages.dev
0 Upvotes

r/webdev • • 1d ago

Showoff Saturday HUMANS.md: a file that tells coding agents how to work with you

0 Upvotes

I run a few coding agents (~10) at once and got tired of them interrupting me for things they could decide on their own. AGENTS.md is about the repo, so I wrote a file for the person side. It lives at ~/.humans/HUMANS.md. Mine looks like this (trimmed):

```yaml

humans: "0.3" id: tristan visibility: private reading: lead_with: tldr max_words: 149 deciding: reversible: decide_and_report batch_questions: end_of_task interrupting: interrupt_for: blocking_only

notes: "I often read on my phone. I've very short attention span, and i'm more visual"

```

The fields come from a fixed vocabulary, so a schema can check them. The free-text notes are the weak spot, validation doesn't make them safe from prompt injection.

It never grants permissions. Repo rules and the harness still win.

The repo has the spec, JSON schemas, test vectors and a Node validator (spec CC BY 4.0, tools Apache-2.0). I also wrote plugins for Claude Code, Codex CLI and a few other agents to try it. So far I've only checked that the file loads, on macOS, not how well the models follow it.

The part I'm least sure about: visibility can be private, org or anyone_with_file, and a profile without the field is read as org. Would you default to private instead?

It's a 0.3 draft and nothing is locked in yet, the field list included.

Spec: https://github.com/cmdai-hq/HUMANS.md

Examples and a side-by-side demo: https://humansmd.dev


r/webdev • • 1d ago

Showoff Saturday Make the AWS Console your portfolio :)

Post image
0 Upvotes

I was bored last weekend, so I ended up building this: a portfolio that looks exactly like the AWS Management Console. I tried to mimic it as closely as possible while adding my own flavour, like EC2 as projects, S3 as documents, and a lot more.

It’s open source and making it yours is super simple. No digging through code. Just run it in dev mode, open /studio, and you’ll find a Studio mode where you can edit everything right there. Add your own projects, documents and details, hit save, and that’s it, your very own AWS Console portfolio is ready.

There’s still plenty more that can be built, like a working CloudShell and AB Q, so contributions are very welcome if you want to take this further.

Would love feedback on what to add next or anything that feels off compared to the real console. And if you like it, don’t forget to drop a star on GitHub ⭐

P.S. AWS folks, please don’t cancel me for this. It was designed out of pure love for the console :)


r/webdev • • 1d ago

Showoff Saturday I built a lightweight devtool to inspect website tech stacks & architecture with zero tracking

Post image
0 Upvotes

Hey r/webdev! Happy Saturday.

Whenever I browse inspiring websites, I always like checking what frameworks, libraries, and tools they're running under the hood. But similar extensions feel like they've gotten pretty bloated, put basic data behind paywalls, or actively collect browsing history.

So I spent the last few weeks building TechReveal, a clean and lightweight alternative:

  • 100% Private: Runs entirely in your local browser sandbox. Zero telemetry, no data collection, no accounts.
  • Visual Architecture Map: Connects detected frontend, backend, and tools into an interactive diagram.
  • Exact Versions & Tags: Displays library versions cleanly and shows category badges when clicking any tech.
  • Security Alerts: Checks response headers for missing security policies (HSTS, CSP) or accidental data leaks.
  • Zero Tab Lag: Optimized with Manifest V3 so it won't freeze your active tabs.

It's completely free on the Chrome Web Store (works on Chrome, Brave, Edge, Vivaldi):
👉 TechReveal on Chrome Web Store

Would love to hear your feedback or suggestions for libraries and tools you'd like it to detect next!


r/webdev • • 1d ago

Showoff Saturday Roast my webdev agency site.

0 Upvotes

Just starting out. I have a system where I can focus mostly on sales. Took me a log time to make entire pipeline. This is the website I madre to showcase it. I started cold calling a couple days ago. I've made a couple connections, migh thave 1 sold. I'm just putting my eveyrthing into getting this going. Learning to be a salesman instead of a programmer, as programming is gonna be dead. Please take a look. tell me where you think its shit. Any criticism and helpfull tips or anything really is appreciated! Thank you.

https://lodestonesystems.ca/


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] Hello everyone, I built bantr.live a real-time interest-based forum and chat platform. After a long, painful struggle with App Review, it is finally back on iOS.

Post image
0 Upvotes

Hello all,

This app was removed by the good people at apple in March right when it was doing so well no warning or reason just gone. After a 65 day appeal they stated that the primary function of the application could not be a random chat, and if I posted anything of this nature again my account would be permanently banned. So, I redesigned the primary function to be a real-time forum with all the same chat functionality. This app is available for Android/iOS and on the web, the web version is still a random chat it will be upgraded in the future to include the features that the mobile apps have. I tried to make sign-up as pain free as possible, and of course its free.

The whole goal was to step away from slow, algorithm-driven feeds and build something fast and live. Here is how it's set up:

  • Interest-Based Groups: Find and chat with people who share your specific niches and hobbies.
  • 24-Hour Self-Destructing Posts: Keeps conversations fresh, temporary, and clutter-free.
  • Global & Random Chat: Jump instantly into live public discussions or roll the dice on a random chat.
  • AI Content Moderation: Automatically handles and applies NSFW overlays to objectionable content in real time and allows the user to chose if they want to see it or not.

Would love for you guys to check it out, test it out, and let me know what you think. Its new so still a ghost town but give it a look. If you have any questions feel free to hit me up. Happy weekend!


r/webdev • • 2d ago

Showoff Saturday [Showoff Saturday] I built an open-source news reader that puts every outlet covering the same story into one card

Post image
0 Upvotes

Trace is an open-source platform that reads news and articles from over 100 sources, groups similar ones together, and gives you an easy-to-read summary with all the key points.

I've been working on it for 9 months, and I recently made it free to use and open source after it got accepted into the Claude for Startups programme.

It includes the website, a daily email, an MCP server, and an Android app.

Personally, the email is the most useful part for me. Then I occasionally open the website during the day to see what's happening in tech and AI. It helps me avoid opening X too many times in the name of staying updated, and saves me from AI brainrot as well.

On the technical side, here's how it works:

- a Python pipeline pulls the sources every 20 minutes

- embeddings find articles that might be about the same story, then a small model decides if they're actually the same event or just related

- each story gets one summary, written once and cached, so the cost doesn't go up with more readers

- Next.js frontend, SQLite on a VPS (moving off Firebase cut the bill by more than 80%)

GitHub: https://github.com/TarunTomar122/trace

Website: https://www.yourtrace.online


r/webdev • • 2d ago

Showoff Saturday I Built a (local, non ai) TinyMCE Spellchecker From Wikipedia Language Models

5 Upvotes

It's finaly saturday, and I've been working on a spellchecker plugin for TinyMCE called vlm-spellchecker.

The idea came from a separate project of mine, Wiki Language Models, which generates statistical language models from Wikipedia dumps.

I created that project because I wanted a basic, old-fashioned spelling correction and word prediction tool that doesn't use AI to try to interpret what you're writing and return some ass AI response.

So vlm-spellchecker is a small client project built around those models that does just that.

It's implemented as a JavaScript plugin for TinyMCE that uses a locally hosted binary dictionary to identify unknown and uncommon words, suggest corrections, and replace words directly in the editor.

What it currently does:

  • Marks unknown words with a red dotted underline.
  • Marks uncommon words with an orange dotted underline.
  • Provides spelling suggestions through the context menu.
  • Preserves capitalization when applying corrections.

What it doesnt do:

  • Force you to use a external ass spelling API.

I've got a small demo up that uses a Dutch dictionary generated from Wikipedia data.

--> Demo <--

It's still a work in progress (and, due to the fixed 6-bit encoding, it's very much aimed at Western European languages for now), but I wanted to share it and see what you people think!

Feedback and suggestions are more than welcome!


r/webdev • • 3d ago

Question How dependent on AI is the company you work for?

122 Upvotes

Today, I found out that my company is moving the SDLC 100% to AI. Humans will no longer read or write code. We are also building out an AI code pipeline that removes engineers from the loop entirely. Which I think will eventually culminate in layoffs.

I think my company is on the bleeding edge, but what are you all seeing at your jobs?


r/webdev • • 2d ago

Showoff Saturday Close every duplicate tab in Chrome in one click (and find the rest by typing)

Post image
0 Upvotes

Tabatha, a tab switcher for Chrome (Alt+Q shows every tab as a screenshot). It has previews, and support for multiple browser windows, bookmarks and tabgroups and quick actions.

The fun problems in 1.3.5:
- Dark-mode extensions put a CSS filter on `<html>`, which broke our clickjacking guard (IntersectionObserver v2 can't confirm visibility), so clicks silently died. Now we detect the filter and open in a window instead.
- First open with 500 tabs went from ~1.6 s to ~1 s, mostly by waiting less before the first capture and dropping `decoding=async` on card images.
- Previews come only from `captureVisibleTab`, so a tab nobody looked at has none. The fix is a polite button, not background flicker.
MIT, no network access. Feedback on the UI and functionality very welcome.

Check it out


r/webdev • • 2d ago

Showoff Saturday I built ReRoute, a chrome extension to redirect requests, modify headers, and mock APIs

Thumbnail
gallery
0 Upvotes

Hi r/webdev, I recently published an extension I've been working on, basically, a Request interceptor, it lets you modify requests headers, query params, body, or mock api responses.

I used to work with another extension until it started restricting features behind a paid subscription, so I decided to create my own :), Thought I'd share it here in case anyone finds it useful.

Available in chrome web store


r/webdev • • 2d ago

Showoff Saturday HTTP 402 "Payment Required" finally has a real use. I tried paying 4,235 APIs that use it. Here's how they broke.

0 Upvotes

402 has been "reserved for future use" since HTTP/1.1. A protocol called x402 finally uses it: the server answers with a price, the client pays a tiny amount and retries. No account, no API key. Yes, the payment is a stablecoin (USDC). I know how this sub feels about crypto, so think of it as a payment rail and judge the HTTP part.

The flow, simplified (the headers are base64 JSON):

``` GET /weather?city=Oslo ← 402 Payment Required PAYMENT-REQUIRED: { amount: "1000", asset: USDC, network: base, payTo: 0x… }

GET /weather?city=Oslo PAYMENT-SIGNATURE: <signed payment authorization> ← 200 OK { ...data... } PAYMENT-RESPONSE: { transaction: 0x… } ```

I run a free directory of these APIs, and its checker tries to actually buy from each one. Latest attempt per API: 58% delivered what they promised. The rest broke in ways that are worth knowing if you ever build one:

1. Paid, then got 402 again (288 APIs). The server asks for payment, receives a valid one, and asks again. Usually it couldn't verify or settle the payment, so it fell back to the challenge. When I checked a batch on chain, about 4 in 5 had never settled. If verification fails, return an error that says why. A second 402 tells the client nothing.

2. Paid, then got a 500 or nothing (289). Settle after you've produced the response, not before. If your handler can crash, the customer shouldn't be charged for the crash.

3. Paid, got data that didn't match what was advertised (126). If you publish an output schema, stick to it. Also: an HTML error page served with a 200 is still an error page.

4. Delivered data, but the payment never landed (47). The opposite bug: it served first, settlement failed silently, and it gave the data away free. Check the settle result.

5. The price in the 402 didn't match the listed price (103). A careful client refuses to pay a price it didn't expect, so changing it in one place quietly loses those sales.

6. Refused before any payment (765). Some of these are on my side: the endpoint needed query parameters my request didn't send. If your endpoint needs input, describe it in the 402 response. That's the only documentation a client is guaranteed to read.

Bonus gotcha: keep the PAYMENT-REQUIRED header small. Python's aiohttp rejects any header line over 8,190 bytes by default, so a big header with a full JSON schema inside makes the request fail before anyone reads the price.

The directory and its numbers are free to read, no account: https://nohumans.directory (method: /methodology, live totals: https://api.nohumans.directory/v1/stats). Happy to answer anything about the protocol side.


r/webdev • • 3d ago

Discussion I signed up for a SaaS product yesterday because I wanted to try one feature.

206 Upvotes

Before I could even see the dashboard, it asked for my company size, industry, role, team size, annual revenue, and what I hoped to achieve in the next 12 months.

Then it asked me to book a demo.

A demo. For a product I was already logged into.

Somewhere there's probably a product team celebrating their new onboarding flow because completion rates went up by 3%.

Meanwhile, I still have no idea what the product actually does.

At this point, just ask for my blood type and get it over with.


r/webdev • • 2d ago

Showoff Saturday I spent way too long trying to make a finance app NOT look like a finance dashboard

0 Upvotes

Would love some design criticism on something I’ve been building.
https://exitmargin.com

It’s a personal wealth journal.
The design problem I’ve been struggling with is that basically every finance product drifts toward the same thing:
1. cards + charts + green/red numbers + 14 KPIs screaming for attention.
2. I’m intentionally trying to make this feel calmer.
3. The user records their financial position periodically and the app keeps continuity between those checkpoints.

Think:
“Here is where my financial life stands.”
rather than:
“Welcome to your Bloomberg terminal.”

I’d especially appreciate feedback on:
1. typography
2. information hierarchy
3. light/dark mode
4. whether the homepage explains the product quickly enough
5. anything that feels too “SaaS template”

Be ruthless. I’ve stared at it for too long to see the obvious problems anymore.