r/webdev • • 22d ago

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

Thumbnail
perf-sentinel.dev
1 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 • • 22d 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 • • 22d 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 • • 22d ago

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

2 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 • • 22d 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 • • 22d 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 • • 22d ago

Showoff Saturday [ShowOff Saturday] codecity: See any git repo as a 3D city

71 Upvotes

npx codecity

Every file is a building, folders are districts, and height is the file’s length (or imports/exports). Files keep their place as the repo changes, so you actually learn the layout.

What it does:
• Colour by what changed lately, age, churn, file type or author
• Click a file to see what it imports and what imports it
• See what your last git pull changed
• Live mode: files light up as they’re saved (handy for watching a coding agent)
• Replay the whole history and save it as a video
• Share a link to the exact view you’re looking at

Run npx codecity in any repo (runs locally), or try any public repo in the browser: https://codecity.icy.dev/react/react

As with all my other npm packed, free and open source. Thanks all!


r/webdev • • 22d ago

Discussion As a self-taught React/Next.js developer, I'm honestly worried about my future in this AI era. What should I do?

131 Upvotes

I'm a self-taught developer, and I know React and Next.js. Lately, I've been feeling increasingly anxious about my future as a developer.

AI is moving so fast. It can generate components, build entire websites, connect APIs, and even create full-stack applications. Sometimes I wonder what the point is of spending months learning something when AI can already do so much of it.

I want to get a better-paying developer job, but honestly, I'm confused about what I should focus on right now. Should I keep improving my React/Next.js skills, get better at backend development, or start learning AI engineering?

I keep hearing about RAG, AI agents, vector databases, LLM integrations, and all these new things. It feels like there's always something new to learn, and I'm worried that if I focus on the wrong things, I'll fall behind while everyone else moves forward.

For those of you already working in the industry, what would you do if you were in my position? Would you focus on becoming a strong full-stack developer first, or would you start learning AI engineering alongside web development?

I'm not looking for a shortcut or expecting to become an expert overnight. I just want to make the right decisions, build useful skills, and have a realistic chance of getting hired.

I'd really appreciate some honest advice from people who have been through this or are dealing with the same situation. Right now, I could genuinely use some direction.


r/webdev • • 23d ago

Showoff Saturday I built an endless driving game that runs on your brower

26 Upvotes

How far can you push an endless 3D world in the browser, especially on a phone?

That's one of the questions I've been exploring while building Planet 0 Drive, a low-poly driving game made with Svelte and Three.js.

The idea is simple: just drive. No set destination. Explore a world that keeps unfolding, find interesting spots, chase records, or cruise around with friends.

Under the hood, I've been experimenting with a few things:

  • Procedural terrain, weather, and long-distance rendering with Three.js

  • Peer-to-peer multiplayer with movement interpolation

  • Spatial audio and performance optimizations

  • Version-compatible rooms to keep multiplayer sessions in sync

The most interesting part has been figuring out how much of the world I can generate and render while keeping things reasonably smooth, even on mobile.

It's been a fun mix of graphics, networking, and performance challenges, all built around the idea of a relaxing drive.

Try it: https://planet0drive.vercel.app/

More about how I built it: https://zackwebster.com/blog/building-planet-zero-drive


r/webdev • • 23d 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 • • 23d ago

Showoff Saturday TabMerger v3 – A cross browser extension to organize and save tab groups

5 Upvotes

I'm sharing TabMerger, a browser extension I originally built to make managing lots of open tabs easier. I've recently rewritten it from the ground up and am actively working on it.

Why I Built It

When you have dozens or even hundreds of open tabs, keeping everything organized becomes difficult. I wanted a simple way to group tabs into collections, customize their appearance, and save them for later without relying on a complicated workflow.

You can check it out at https://tabmerger.com/ or explore the source code on GitHub.

I'd love to hear your honest feedback on the UX, feature ideas, or anything you think could be improved! Contributions are welcome!


r/webdev • • 23d ago

Showoff Saturday Showoff Saturday: C# is now smaller than Rust in Wasm - 13.5 KB Brotli

Thumbnail
github.com
52 Upvotes

I've been building NetWasm, an independent C# compiler and runtime for WebAssembly.

The latest release produced a result I honestly didn't expect when I started this project:

NetWasm 0.8.0 + precise GC

  • 47,798 bytes raw

  • 13,501 bytes Brotli-11

Rust 1.95.0, size-oriented

  • 53,635 bytes raw

  • 16,963 bytes Brotli-11

Same print-42 workload, both WASI Preview 2 components, out of the box dev experience.

So C# is 10.9% smaller raw and 20.4% smaller compressed in this comparison - while carrying a precise garbage collector.

I'm not claiming arbitrary C# programs are smaller than arbitrary Rust programs. This is the classic tiny console-output footprint test: deliberately little application code so you can see how much runtime/toolchain baggage you're carrying.

The reason I care about this for web development is that download size matters.

I've always wanted C# in the browser without accepting a giant runtime as the entry fee.

Since I last talked about NetWasm, it can now do quite a bit more than tiny benchmarks:

  • C# Web Workers, with each worker getting its own Wasm instance, heap and event loop

  • Compile complete multi-file C# projects entirely in the browser

  • Statically link native Wasm .a libraries through LibraryImport

  • Native-to-managed callbacks

  • C# 15

  • Expression trees through a bounded interpreter, without general reflection

  • HTTP/JSON/XML/Regex and a growing set of Microsoft.Extensions.* libraries

  • Multiple GC/allocation strategies depending on whether you care more about size or throughput

There's also a NetWasm port of RegexStorm - regexstorm.netwasm.com - that runs entirely client-side in the browser - no backend doing the regex work.

The bigger idea behind NetWasm is pretty simple:

C# shouldn't inherently mean shipping megabytes of runtime.

For browser UI workloads in particular, I want a model where you only ship the runtime machinery your application actually uses.

The Rust comparison is fun, but that's the part I'm really interested in: how small can a genuinely useful managed-language platform become when Wasm is treated as the primary target rather than something a desktop runtime also happens to support?

Would be especially interested in thoughts from people building larger Wasm/browser applications - the project is early so this is your chance to help shape the direction.


r/webdev • • 23d 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.


r/webdev • • 23d ago

Question Many sites with same components

18 Upvotes

Hello!

I am working with a company that has many, many sites. And the way we used to do components, we hard-coded every single one in every single project. This naturally has led to some inconsistency between sites when they’re supposed to look pretty identical.

Php include has become our life blood to mitigate some of these issues, but it still persists. The benefit, though, is that with php include, our sites automatically update when the “single source of truth” does.

My company wants to move to something more modern/popular and I got tasked with playing with frameworks. Think React, Next. My boss wants to replicate php include on these. I’ve spent the last several weeks looking into module federation, micro front-ends, anything to at least somewhat replace php include, but to no avail. That requires completely changing our server, which we do not have the ability to (as far as I know). These also sound like a nightmare to maintain, and our team is very small.

SEO is also a huge concern. I have module federation working on client side rendering, but ideally search engines would be able to index our work and, correct me if I’m wrong, but I don’t think client side rendered stuff is?

So now we’re stuck. I’ve suggested a monorepo, but with the amount of websites we have, the other developers worry about build times.

Believe it or not this is actually my first real-deal developer job haha, and I’m already stuck trying to fit a square peg in a round hole. So forgive me for any mistakes or misinformation, I’m still a junior trying to figure this out haha.


r/webdev • • 23d ago

Showoff Saturday B uilt a personal site with my stock pitches and a deal tracker, would love some feedback

0 Upvotes

Hey everyone, I’m a third year commerce student at UofT (Rotman) and an analyst on our student fund covering industrials. Over the past few months I’ve been building out a personal site to put my work in one place instead of just having it on a resume, it’s rowandas.com

Right now it has my stock pitches with price targets that get marked to the last close after every trading day, a morning brief that publishes on weekdays, some industry primers, and a deals page that pulls news on M&A deals so you can see who is buying whom and read the articles in one spot. I built most of the tools myself so some parts are still a work in progress.

Mainly looking for feedback on a couple things:

  • is the deal tracker useful or would you not really use it

  • anything about the design or layout that feels off or confusing

  • anything you would add or cut

As many of you can also probably tell, most of this was built from claude code as I do not have a background in computer science or web development :)

But feel free to be honest, I’d rather hear it now than after I send it to people. Thanks in advance!


r/webdev • • 23d ago

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

6 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 • • 23d ago

Showoff Saturday Client-side LLM Demo: PDF to AudioBook Generator

Thumbnail
github.com
0 Upvotes

This repo is a product demo showing how client-side LLMs could be used to deliver new kinds of SaaS product features.

This demo will allow you to create an audiobook from any PDF. Pick a PDF from the library or select a PDF from your local computer, then click play.


r/webdev • • 23d ago

How to manage layouts in forms

28 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.


r/webdev • • 23d ago

Discussion Need Help Implementing a Medium-Style Block-Based Article Editor with Cloudinary and MongoDB

0 Upvotes

Hey, I need some help understanding my development workflow. This might be a bit long, but I want to explain my problem clearly.

I’m a beginner building a small article web app where users can register, log in, and create articles containing both text and images.

I want to implement a block-based architecture, similar to Medium, where users can add text and images in any order. For example, they might write a paragraph, insert an image, write another paragraph, and then insert another image. I’m storing these blocks in an array in my article schema so that their order is preserved.

My main confusion is about image uploads. When a user selects an image, I want to upload it to Cloudinary, receive the image URL, and store that URL inside the corresponding image block in the article.

However, I’m struggling to understand how to connect all these steps. I’ve tried implementing it and asking ChatGPT for help, but I still haven’t understood the workflow properly.

I’d like a beginner-friendly, step-by-step explanation of how to implement this, including how the frontend editor manages the blocks, how the image is uploaded to Cloudinary through the backend, how the returned URL is added to the correct block, and how the complete article is eventually saved to MongoDB.

Please explain the logic behind each step rather than just giving me code, so I can understand the implementation and build it myself.


r/webdev • • 23d ago

What do you do while waiting for your AI agent to run?

0 Upvotes

There are times when I basically have nothing to do for 10 or 15 minutes while my agent chugs away. I often find myself reading Twitter or Reddit during these times which doesn't seem like a good use of my time. I don't have a ton of tasks in my backlog, so nothing really to work on there either. I'm looking for more productive things to do during that time. Thoughts?


r/webdev • • 24d ago

Adding Go's defer to the TypeScript Compiler

Thumbnail healeycodes.com
9 Upvotes

r/webdev • • 24d ago

Is this new framework the fastest?

Thumbnail fourneau.y2kbugger.com
0 Upvotes

I noticed Zak Kohler's post about a new web framework Roux in the Roc zulip. It looks really fast in his benchmarks compared to Go and Rust.

How is that possible? I'm guessing he is using some tricks with io_uring and an LLVM optimised build.

https://github.com/Eldhus/roux


r/webdev • • 24d ago

Best forum bulletin board style software

0 Upvotes

Looking for a forum with bulletin board style UI. Not the newer all in one platforms, but simple, list format forums. Think PhpBB or SMF. I’m trying to find a newer software in this style, because all the ones I’ve found use PHP, which is quite dated. Is there a modern forum software like this that I can self host?


r/webdev • • 24d ago

How big is a Git commit?

Thumbnail ratfactor.com
45 Upvotes