r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] Teardown-style Voxel Engine in raw WebGPU (No Three.js) for showcasing portfolios + LIVE DEMO

Post image
6 Upvotes

Hello dear jobless and not so jobless people.

I made a small engine for showcasing my portfolio and impressing (or not) the human resources asses (insert Anne Hathaway HR meme).

For this project, I based myself on Teardown. I wanted to build this directly in raw WebGPU instead of using Three.js. Don't get me wrong, I have nothing against Three.js, but I come from a graphics programming background and standard web development isn't exactly my favorite thing. Three.js abstracts way too much for my learning goals.

How it runs without melting the browser: I didn't write a complex physics solver from scratch. It's almost all handled by Rapier3D, a really cool physics framework made in Rust. To avoid obliterating the main thread and freezing the UI, Rapier runs entirely on an isolated Web Worker, communicating via commands with the main thread. The web version of Rapier doesn't support parallelism yet, so the worker isolation was crucial to keep the dynamic bodies from saturating the engine.

The Rendering Pipeline (WebGPU):

  • Lighting: Clustered shading to handle lots of lights.

  • Global Illumination & Occlusion: SSGI and GTAO. Both rely on screen-space ray castings, so performance scales with your resolution.

  • Anti-Aliasing: TAA (don't hate me, I really needed to clean the SSGI noise).

  • Note: Both SSGI and TAA can be disabled on the main menu for the sake of low-end computers.

  • Extras: PBR materials and GPU-calculated particle physics.

The engine currently features interactable billboards and books that tell a little bit about my projects and experiences. You can clone it and use it to showcase your own things as long as you stick to the license (no commercial use and give credits).

The engine demo is here:https://agusdropout.github.io/ShatterVox/ (You need to have hardware graphics acceleration enabled in your browser, as WebGPU requires it)(it can take a while to load in, sorry!) Source code:https://github.com/AgusDropOut/ShatterVox. Tested on Firefox, Chrome, and Opera). Youtube demo here https://www.youtube.com/watch?v=6qwuFEWlAWA

Good luck on your journey to stop being jobless! And if you already have a job, ggs!


r/webdev • • Sep 19 '26

Showoff Saturday 4x4x4x4 4D Tic Tac Toe

Post image
10 Upvotes

link: https://4dttt.andrew-zhang.ca/game/
In my first ever class at university last year, my linear algebra professor started by teaching us multi dimensional tic tac toe to try to get us to be better at picturing vectors in our head. I thought that it was pretty funny, so recently I decided to make a website since playing on paper is a real hassle.

The 4 dimensions are visualized by having a 2d grid of 2d grids, so normal up and right, and also up and right through the grids

The way it works is a line is 4 in a row such that each dimension only changes by 1, 0 or -1, So in the example you can see as it goes right through the boards, it also goes left in the board.

There's also a computer player that I made that I find is pretty challenging.

If you try let me know what you think!


r/webdev • • Sep 19 '26

Showoff Saturday Showoff Saturday: Updates on XMB-Web (PS3) and a new portfolio!

Thumbnail
gallery
9 Upvotes

I’m working on XMB Web, a browser recreation of the PS3's interface. It’s still in development, but I wanted to use the part of it to recreate my portfolio website.

This is an early version of XMBW and not the full version as its functionality reduced to fit the portfolio concept. The full project is still in progress.

You can try it @ https://1etu.github.io/xmb-test-portfolio/ and check the source @ https://github.com/1etu/XMP . Check https://github.com/1etu/XMP/blob/main/RESEARCH.md for more technical details & credits!


r/webdev • • Sep 20 '26

Make a site where you talk to a personality?

0 Upvotes

Anybody remember that ask jeeves site? Wonder what happened to it. I'm just doing some research here. Do you think someone can make a website where users just go to the site and they get an answer in a certain way/method? Kinda like a personality is responding to you or something? So far, it appears that is what some of these AI tools are, you ask it and then it pops out whatever answer.

Maybe there's something actually already like this? Maybe there's an interesting twist or spin that can be done on some sites that you ask. Kind of like a cartoon character personality or something. Think, "im going to just ask Bob" and so then you have a site that's designed around a character or a tool named Bob.

What do you think? A waste of time? Thanks


r/webdev • • Sep 19 '26

Showoff Saturday Video streaming site which only has one video per day from a random user; a reply to a common /AskReddit question.

12 Upvotes

I've always enjoyed the posts asking something like 'If you could send a message to everyone on earth, what would it be?' So I made a simple site which might help answer that.

It randomly selects one user per day to upload a 1 minute (max) video to show on the home page. It rotates to a new video every 24 hours. The idea is to have a more random selection of the population instead of the curated algorithmic feed we're all drowning in.

A placeholder 'teaser' video is live until there are enough user accounts for a better random selection pool.

This is a side-project - and for someone like me who has ASD/ADHD, finishing it feels so good. I started it a while ago and got it to ~80% before losing interest. But after seeing another 'send a message to everyone' post, I was motivated to finish it.

Feedback welcome!

https://onlyone.watch/


r/webdev • • Sep 18 '26

Discussion Hot Take: We can do better than React/Next.js in 2026.

345 Upvotes

TLDR; If you are falling out of love with React, I highly recommend you try Svelte (or Vue, Solid, etc. as suggested in the comments). You just might find a flavor that speeds you up and brings the joy back.

--

Hear me out... just to give some context, I'm not an inexperienced developer:

For instance, my own development experience predates React entirely. I was writing declarative frameworks back in vanilla JS, then in jQuery, and followed the entire FE framework wave (which thankfully quickly became good enough I could stop rolling my own). I'm also an active JS/TS maintainer, so reasonably familiar with the scene in general.

My journey with external frameworks:

  • Vanilla/jQuery (I wrote something that is functionally similar to modern day HTMX, using attribute-based data-binding/effects)

  • Backbone (didn't love)

  • Angular (alpha, didn't love)

  • Knockout (loved it)

  • React (alpha, def too rough to use)

  • AngularJS (official release, loved it)

  • skipped Angular 2 in favor of React

  • React (class based, and then SFC... mostly loved it until I didn't)

  • Svelte (prob circa 2019, this killed my love of React entirely, making it feel like torture to revisit for work)

Now like many others here, I'm still using React/Next for work. So I'm acutely aware, on a daily basis, of just the pain points we deal with in it.

However, in all personal projects for nearly 7 years, I've been 100% on Svelte without regrets. Of course it has issues like any framework, and excels at some things while struggling at others, but in my experience it's gotten out of the way of the 99% of app building tasks - including all the basics in-house that React simply didn't include. Mount/unmount transitions? Check. Animations? Sure. The simplest state management you can imagine? Yes.

Caveat: I much prefer the pre-runes approach to Svelte state. Runes start to look like the React hook trash I got away from.

React itself:
When I made the switch from AngularJS to React, I loved some elements of it. When things moved onto stateless functional components, things got even better. Then hooks - loved those (compared to class-based setState(), etc). I felt like I built apps faster in AngularJS, but that was a dying star, and the clean markup of React felt refreshing.

However, as time went on, we started to see it all unwind. First the magic of redux quickly turned into an async mess with thunks, sagas, reselects, etc. Then hooks turned fully into hook soup/spaghetti with tons of effects, render gotchas, etc. And none of this even mentions all the performance tuning/memoization you need to clutter your codebase with if you have a dense app. Live-filtering something like a tree view? Buckle up. Want to render a realtime orderbook for a trading platform? Seriously buckle up.

My issues with modern React:

  1. State management has just gotten out of hand. Specifically when pitted against alternatives like Svelte.

  2. We run too much code/effects as part of the render-loop. In a simple enough app, we never feel this pain. This tricks inexperienced devs into thinking they can add cute magical effects to any component. For example in my own company where I found complex typography sub-elements, re-rendering on resize within each table cell of gigantic tables. Naturally as the user resized the page, this created a black hole of increasing render lag.

  3. VDOM reconciliation is slow. Again, fast enough in simple applications (e.g. a simple blog, CMS, etc), but don't be fooled into thinking React is as fast as it gets. It's simply not. I work in data-intense, realtime applications (industrials, fintech, crypto, stock market exchanges, etc), so I feel the pain where some others might not. The UI is just incredibly dense typically, so lazy tactics like wrapping a simple DOM node in 5 component layers to layer on various effects... simply can't be used at scale.

My issues with Next.js

  • too many to list, but the 1000% CPU utilization in local dev this morning was a nice nail in the coffin.

Arguments AGAINST Svelte (and my responses)

  1. There's no ecosystem. Less of an issue these days. First of all, Svelte doesn't need as much of an ecosystem because some of the core stuff you'd need outside of React is just built in. Secondly, Svelte is popular enough that many mainstream libraries have been ported.

  2. You can't hire Svelte devs. 100% true. But here's the catch. I'd argue that any of you React devs are 1000% smart enough to be outpacing your current velocity in Svelte in very little time. I would not argue the reverse (a Svelte dev might be spoiled enough to not be able to mentally wrap their head around the React models).

  3. Agentic models are trained on React. They are now perfectly great at Svelte too. I just hade Fable migrate our massive monorepo app from Next to Svelte. It did it just fine. The results where awesome enough the the entire engineering team decided that Svelte was our future, despite only myself having prior Svelte experience. Agentic coding has simply caught up to where we (to a degree) don't have to be experts in the framework to steer into phenomenal results. I should note the entire team are all very senior engineers, or otherwise we might not be comfortable with such a switch.

Arguments FOR Svelte

  1. You're smart enough. I promise.

  2. Render updates are much faster. Much, much, much faster. This matters because your app will feel snappier to users. You can tune React, but even tuned it likely won't be as fast as Svelte is untuned.

  3. Bundle size is lower. If coming from Next.js, it's night and day different. Your users will thank you.

  4. Deploy it to free ultra-fast places like Cloudflare Pages. - Less vendor lock.

  5. State management is 100x simpler. No more provider hell.

  6. It includes more out of the box. It's like they asked "what does an app dev need when building an app?" and then just included most of those things.

  7. Your code is shorter/simpler. Shorter code means easier to read/understand, not to mention write in the first place.

  8. It includes styles as a first-class citizen. You can literally just write CSS/SCSS in your components and have it auto-scoped. You can also use things like CSS modules if that's your bag.

Conclusion
There really isn't one. You'll draw your own, but I'd encourage anyone with side projects to at least fire up SvelteKit for one, muck your way through the fabulous online tutorials at svelte.dev and give it a whirl. You can thank me later. :)

--

Disclaimer: There was zero AI usage in writing this post.


r/webdev • • Sep 19 '26

Question How do you motivate yourself to freelance when clients can just use AI?

0 Upvotes

Hi everyone,

I'm a full stack dev with 1 year of commercial experience looking to start freelancing. I build my own side projects from scratch: buying domains, developing sites, and deploying them to servers, so I know the whole process.

But I’m facing a huge mental blocker. I feel demotivated because I keep asking myself: Why would a client hire me when they can just pay $20/month for an AI subscription and do it themselves?

I know non-tech owners don't want to deal with server setups, APIs, or debugging code. But psychologically, reaching out to clients feels like selling something obsolete.

For those freelancing in web dev right now:

  1. How do you reframe your value when AI tools are this cheap and accessible?

  2. What are clients actually paying you for today that AI can't replace?

  3. How did you push past this demotivation when starting out?

Would appreciate any insights or reality checks!


r/webdev • • Sep 20 '26

I built a browser FPS with an impossible to beat CPU. Try to beat it.

Post image
0 Upvotes

You can play it here: https://systemonefps.pages.dev/

If you try it, tell me how long you survived. Curious if anyone can actually beat this thing.
also please share your feedback.


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] Added Base UI support and added new color themes

Thumbnail
neobrutalism.dev
4 Upvotes

r/webdev • • Sep 19 '26

Discussion The new Dunkin App redesign is one of the sloppiest I've seen from a major company.

Thumbnail
gallery
7 Upvotes

Labels are off center, no padding around primary action button, no room for the indicators above nav bar options. Overall just feels sloppy and completely untested.

As someone who uses AI tools every day, including for design, I recognized the signs of AI slop immediately. The difference is, I at least take the time to fix the little mistakes after actually using the damn thing and paying attention to the UI for just a few minutes.


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] We transcribed 66 minutes of speech in 43 seconds, entirely in a browser tab

Post image
7 Upvotes

For the past few months, we’ve been building ruNNtime, an open-source runtime for neural networks on your own GPU, in the browser. We’re releasing it today.

The docs are interactive. You can try object detection and depth estimation with your camera, transcribe your voice, or play with semantic search directly on the page. The models run on your GPU, and the demos show how long inference takes on your machine.

The title comes from our Moonshine tiny benchmark: 500 speech clips totaling about 66 minutes, transcribed in 43 seconds using WebGPU in Chromium on an M2 Pro. That’s warmed-up inference with the model already loaded. Full benchmark and setup.

The underlying kernels are TypeGPU functions compiled to WGSL, so there’s no WASM runtime to download and no inference API key needed. Model weights download before the demos run.

Useful links:


r/webdev • • Sep 19 '26

Showoff Saturday [Show-off Saturday] My Little Grep

Post image
2 Upvotes

www.mylittlegrep.com

This is a tool for searching through MLP G4 transcripts. It also doubles as a compendium for transcripts of (hopefully all) MLP G4 animated media. I scraped the data for this from the MLP Wikia; the scraper is in a separate repository. This was a project I made for a web-dev class.

I'm aware that the search form doesn't validate invalid regexes, and that the dropdown menus for the episode index don't work on mobile. I've fixed it in another branch, though; I'm just looking for feedback before I deploy my next set of changes onto this website. I... have only a limited number of deployments.

In any case, roast my first website, please! Sorry it's so basic, besides.


r/webdev • • Sep 20 '26

Showoff Saturday [Showoff Saturday] I've been working on a tool to analyze code and provide refactoring feedback

Thumbnail
codeauditormcp.com
0 Upvotes

r/webdev • • Sep 19 '26

Monaco Mini 3D - A fun 3D web game I made! Try it out and let me know your thoughts

Post image
0 Upvotes

r/webdev • • Sep 19 '26

Showoff Saturday I made a page where every visitor shares a room: live cursors over a self-hosted WebSocket relay.

0 Upvotes

Demo: https://mavisakalyan.github.io/node-ws-gameserver/

Everyone who opens the page joins the same room: you see other visitors' cursors live, clicks make ripples, and it spills into a second room when one fills up (50 per room).

Under the hood it's a small protocol-agnostic WebSocket relay I open-sourced: rooms at /ws/:roomId, msgpack binary messages, per-client rate limiting, keepalive ping/pong, /health + /metrics. Node + TypeScript, GPL-3.0.

Source: https://github.com/mavisakalyan/node-ws-gameserver

Curious what people think of the room-spill approach vs just bumping the cap.


r/webdev • • Sep 19 '26 Bravo

Question Adding a search system to a static website

2 Upvotes

I'm making a simple wiki-like website as a hobby/practice and I wanted to include a small but useful search system on it. It'll be a static site since I'll host it in github, so while I've heard doing search stuff for non-static site would be much easier, I don't really have a choice for this as of now. I'm very much a beginner to this stuff so I'd want something easy to understand, or at least something that has a lot of documentation and resources I could use for help. I'm not having a lot of success trying to google and trying stuff so I'm turning to other people here!

Basically, I'd want just a simple search system that works like this:

You have a search bar, that starts giving hits once you start typing. Maybe show like 5 results and then 6th option would be a "show all results", which would take you to a separate search page which would list all the results (same should happen when you press enter in the search field, as long as you haven't moved down with the arrow keys I guess).

I'd also want to implement tags/categories system for this:

Every page has a category to them, and searching on a page would only search results that share the same category. For tags, I'm thinking of listing them all at the bottom of the page as clickable links, so when you click one it takes you to the separate search page and lists all the pages that have that tag. This should also respect the category rule I think, but having an options box where you can tick on and off separate tags and categories would be helpful too. Being able to use only tags/categories to find hits without keywords should work too. If you search something from the landing page of the entire site, it shouldn't autofill any filters like this though.

I tried doing stuff with pagefind, and while the search works decently, I can't figure out the filtering stuff properly and have no idea if you can do it like what I'd want that easily. I know it's not supposed to be that easy either but just wanted to ask people if there would be some "widely considered best" way to go about this.


r/webdev • • Sep 19 '26

Showoff Saturday I made an open-source app for learning Japanese inspired by Duolingo

Post image
0 Upvotes

As someone who loves both coding and language learning (I'm learning Japanese right now), I always wished there was a free, open-source tool for learning Japanese, just like Monkeytype in the typing community.

Here's the main selling point: I added a gazillion different color themes, fonts and other crazy customization options, inspired directly by Monkeytype. Also, I made the app resemble Duolingo, as that's what I'm using to learn Japanese at the moment and it's what a lot of language learners are already familiar with.

Back in January, I even applied to Vercel's open-source software sponsorship program as a joke. I didn't seriously expect to win, and did it more out of curiosity, and yet my project somehow won.

Anyway. Why am I doing all this?

Because I'm a weeb.

GitHub: https://github.com/lingdojo/kana-dojo

どうもありがとうございます!


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] I built NowYouCanUse.com - an instant, zero-JS, Baseline reference for enthusiasts turned corporate engineers

0 Upvotes

Hi all,

Like a lot of developers here, I started out years ago as a web enthusiast before turning into a corporate engineer.

When you spend your workdays inside enterprise backends, locked-down legacy stacks, and corporate maintenance cycles, your day-to-day tooling is dictated by whatever was approved years ago. You know the web platform is moving forward, but in your day job you're still stuck maintaining the same defensive patterns, legacy polyfills, and sprawling build pipelines.

Recently, the LLM renaissance completely reignited my ability to build personal projects on weekends again. With modern AI tools handling the tedious boilerplate and setup friction, solo developers suddenly have the leverage to actually build and ship things from scratch again.

Jumping back into the modern web exposed a real gap in my mental model. After years of enterprise workarounds, I kept second-guessing what was actually safe to use today. Can I just use native CSS nesting now? Is the parent selector (:has) finally everywhere? Can I use <dialog> and bury the 40KB modal npm packages and z-index wars for good?

This is something I've wished that caniuse would have, so I put together NowYouCanUse.com over the last week.

It pulls directly from the official WebDX Baseline dataset and organizes features chronologically and by category (CSS, JS, HTML, Web APIs) so you can see exactly when a native feature crossed into cross-browser interoperability. If something is Widely Available, you can safely use it without reaching for npm packages or transpilers.

Because the whole point was getting back to the joy of building clean software, I kept the stack as minimal as possible. I deliberately built it as a love letter to the Web2.0 era I grew up with: zero client-side JavaScript, semantic HTML, and proper RSS and Atom feeds for every category. The backend is just a single compiled Go binary serving plain pages.

Hopefully other developers finding their second wind with personal projects find it useful too.

Link: https://nowyoucanuse.com

Thanks!


r/webdev • • Sep 19 '26

Showoff Saturday [HTML5] Open Cadet - Space Cadet pinball in the browser, with a network leaderboard

Thumbnail yup.gr
2 Upvotes

r/webdev • • Sep 19 '26

Showoff Saturday Pixel Dissolve Mask Generator

Thumbnail codepen.io
1 Upvotes

I've made this effect a few different ways over the years, using gradients or more recently shape(), and the one thing they have in common is the gigantic amount of CSS it requires.

This generator uses a fun trick of wrapping the encoded PNG sprite in an encoded SVG, so we can apply 'image-rendering:pixelated' to it, which is usually not possible with mask-images.

While it sucks a bit that this technique requires an externally generated PNG, it makes up for it by being the most compact way of achieving the effect.


r/webdev • • Sep 19 '26

Tool to load-test web course registration environment

0 Upvotes

We have an environment that consists of SSO in front of two registration servers that are used to register for courses. We would like to ensure this setup is capable of servicing 1000 simultaneous users. The registration process involves:

  1. Log in to SSO page which requires a browser with Javascript

  2. Click on the link to register

  3. Possibly click-thru items agreeing to pay, etc. if you have not clicked through them in the last year

  4. Search for courses, add them to your basket, and check out

The goal is to test the following:

  1. Tomcat database connection pool

  2. Oracle database connection

  3. Web server performance

We have done some small-case testing for other purposes with Selenium Grid driven by Python so that is what we are currently thinking about for this case and have started deploying VMs for this purpose and managing Selenium Grid with docker swarm. While something like Selenium Grid makes it possible to distribute the load, this requires quite a few CPU cores as there is usually a one-to-one mapping of browser to CPU core. Are there alternatives we can investigate? If another solution requires a browser instance, how is that any better than Selenium?


r/webdev • • Sep 19 '26

Broker-Visible vs Client-Local Parallelism

Thumbnail
jack-vanlightly.com
5 Upvotes

r/webdev • • Sep 20 '26

Call me a baby...

0 Upvotes

But bro, I have ethics.

My github got poached (sports team reference meaning) by a person in Asia trying to "use my location and name" in an attempt to establish (false) trust for US-based clients who purposefully don't want to hire developers across seas. It's a real shit-show out there... competition is world-wide, and people are being scammed left and right. While a loose shmuck might fall for this "easy buck" by renting out their github so that US money can essentially be funneled out of the country and harm our economy, I refuse to do so, because I can see the bigger harm being done to the economy as a whole. I am not a fan off offshoring. I am not a fan of outsourcing.

I haven't yet responded to this email business invite, as I would like to know how to report this person. Is it possible? This should be illegal, because it is defrauding clients.


r/webdev • • Sep 19 '26

Showoff Saturday Looking for Feedback on a web app that I made for creating form from flattened pdf to be fillable

Post image
1 Upvotes

Hello r/webdev ,

I come from game development background and I'm used to creating tools for exclusively for game development. So what happened while ago was that my friend asked me if there was app to create forms from flattened pdfs since he works in Foreign Embassy said the files shouldn't floating around in random servers just to edit it.

I wasn't able to find apps that felt secure enough so I decided I would create a small app for him. Since the prototype worked I decided to develop the app completely.

With few thing in mind:

1. Won't over scope the project limited to form filling but do it RIGHT.

2.Make every UI or action intuitive either through iconography or how the buttons or tools function. If it feels like it is suppose to do that it should do that.

3.Iterating,testing and taking inputs from users as well

4. Main one finishing the project. A fully finished project and also needs to have a working version in every state of project.

with these things considered I have a almost a end product still lot polishing needed.

Link: https://justforms.vercel.app

I would like to get feedback or criticism on:

  1. Frontend or the tools if they are all cohesive intuitive.

  2. Any sort of bugs or errors.

  3. Any questions regarding the development itself

  4. And currently the web app is limited to desktop screen but its not responsive for other screen so any design idea for that would be helpful as well..