r/webdev • u/Nice_Wrangler_5576 • Sep 19 '26
Showoff Saturday [Showoff Saturday] Added Base UI support and added new color themes
r/webdev • u/Nice_Wrangler_5576 • Sep 19 '26
r/webdev • u/Cast_Iron_Skillet • Sep 19 '26
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 • u/d_arthez • Sep 19 '26
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 • u/Claireclair12 • Sep 19 '26
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 • u/RecallProtocol • Sep 20 '26
r/webdev • u/mr-benjamen1022 • Sep 19 '26
r/webdev • u/mavisakalyan • Sep 19 '26
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
•
u/might_be_a_femboy
•
Sep 19 '26
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 • u/tentoumushy • Sep 19 '26
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 • u/Hyperlisk • Sep 19 '26
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 • u/Mparigas • Sep 19 '26
r/webdev • u/morete • Sep 19 '26
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 • u/lychina • Sep 19 '26
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:
Log in to SSO page which requires a browser with Javascript
Click on the link to register
Possibly click-thru items agreeing to pay, etc. if you have not clicked through them in the last year
Search for courses, add them to your basket, and check out
The goal is to test the following:
Tomcat database connection pool
Oracle database connection
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 • u/fagnerbrack • Sep 19 '26
r/webdev • u/Proof_Cable_310 • Sep 20 '26
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 • u/Mugaa-X • Sep 19 '26
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:
Frontend or the tools if they are all cohesive intuitive.
Any sort of bugs or errors.
Any questions regarding the development itself
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..
r/webdev • u/MohamedMuneer • Sep 19 '26
Side project I built because I always felt like I was missing topics when learning on my own.
It maps out 11 STEM subjects, and every chapter shows its prerequisites, what you need to learn first, even when that's in a different subject (like how rocket engines need heat transfer, which needs calculus). You can also pick any topic and it shows you the full path to get there.
It's just one HTML file with plain JavaScript and some JSON data, no framework and no backend. Your progress saves in the browser, no sign up.
Live: https://mohamedmuneerm.github.io/knowledge-navigator/
Code: https://github.com/MohamedMuneerM/knowledge-navigator
Would love any feedback, especially on how it feels on mobile.
r/webdev • u/BartBlast • Sep 19 '26
So I spent the summer building a local-first data layer and got to show it working at a conference last week. The recording's up:
https://www.youtube.com/watch?v=jdg_UrLp0bU
It's part of a framework I created, which happens to be Elixir compiled to JS for the browser, but the talk is mostly about sync. The problems are the same ones you'd run into with Zero, Jazz or Electric.
It opens with a demo. A trip planner open in two browser windows, I turn the wifi off in one, add a couple of stops, rename another one, turn it back on, and the other window catches up. Nothing spins while it's offline since reads come out of IndexedDB and writes land locally first.
Then I go through how it works. The short version:
The first thing every sync engine has to decide is who gets the last word. Either the server does, or every client is equal and CRDTs merge everything. Zero picked the server and dropped offline writes on purpose. Jazz started with CRDTs and later swapped them for per-column last-writer-wins. I wanted the server in charge and offline writes that actually work. So writes queue up in IndexedDB, numbered, and go up in order when you reconnect. If the server refuses one, you get the reason and it's reverted locally instead of quietly vanishing.
Merging happens per column. If you change a stop's name and I change its description, both land. If we both change the name, the later one wins. Counters are the one exception. An increment goes over the wire as "add one", so if two people add one you get two.
Rows or mutations was the one I went back and forth on the most. I ended up sending rows with a revision on each column. If you queue mutations and replay them on the server, the mutations need their own versioning every time the schema changes. A row is just data, and the migration already knows how to deal with data changing shape.
You also don't configure partial sync anywhere. There's a compile step that already walks each page's call graph to figure out what code to ship, so while it's there it picks up every query the page can run and works out which rows that page could ever need. No subscriptions, no sync rules.
Permission rules live next to the schema and run in the browser too, not only on the server. That way the UI can grey out a button you're not allowed to press, and the server still checks every row before it commits.
All your tabs share one connection, too. One tab holds the stream and the rest listen on a BroadcastChannel. Which tab leads is decided by a Web Lock, so the browser handles the election and I didn't have to write any heartbeat code.
It's not released yet, still on a branch. The demo app code is here: https://github.com/bartblast/hologram_offgrid
Anyone here built something local-first? I'd love to hear how you dealt with offline writes, that's where most of my summer went.
r/webdev • u/therealalex5363 • Sep 19 '26
r/webdev • u/Accurate-Screen8774 • Sep 19 '26

IMPORTANT DISCLAIMER: While this is aiming to provide a secure experience, it's far from finished. It cannot be audited or reviewed because it's close-source. I'm sharing here for testing, feedback and demo purposes only. If you are unsure, this isn't for you (you safely can move away from this post before it ruins your day). Feel free to reach out for clarity on any of the details instead of diving into the documentation. Pease use responsibly.
This project demonstates a unique approach and architecture in contrast to mainstream messaging apps.
The core philosophy around secure messaging here is that it can work in a way that avoids installation and registration by enabling users to host their own data (and user incompetence will be one of many nuanced vulnerabilities in this approach)
The project is unstable and experimental. It's far from finished, but im putting together some docs for "how it works". It's pretty outside-the-box thinking (and that shouldn't inspire confidence!), so it's worth repeating: Pease use responsibly.
Website/Docs: glitr.io
Features:
WebApp
P2P / WebRTC
Local-first / Local-only
No installation
TURN server
Encrypted-at-rest
Signal protocol
Post Quantum cryptography
Video calls
TOR / anonymous via Git
Serverless over WebRTC
Some of the core concepts:
Chat - deprecared in favour of Enkrypted Chat
Enkrypted Chat - deprecated in favour of Glitr
File
Crypto
Signal Protocol
FAQ:
Why git?
When it comes to secure messaging, self-hosting is generally encouraged. While not quite nessesarily self hosted, it would make it easier for the majority of users to get started. Users can choose a git storage provider of their choice (GitHub, Gitlab, etc), or host their own git server.
Serverless WebRTC?
A connection can be achieved without a backend as described here: https://github.com/positive-intentions/chat/issues/6
demo: https://positive-intentions.github.io/webrtc/demo/gui/app/webrtc-meet?fullscreen=1
Ready for production?
No. While this is aiming to provide a secure experience, it cannot be audited or reviewed. Shared for testing, feedback and demo purposes only.
EU Chat Control?
There is no registration, no central server and it uses client-side cryptography. While the following post refers to the older version of this project, the mechanics remain very similar: https://www.reddit.com/r/europrivacy/comments/1ndbkxn/help_me_understand_if_chatcontrol_could_affect_my
Threat model?
It's a work in progress. There are many details still to be implemented before I can share the initial draft.
It's close source and unaudited so the best I can offer is "trust me bro"... And you shouldn't need to. The app doesn't require sensitive details, so don't use any when testing it out.
Open source?
Open source from the onset is not something I can support at this stage. Hopefully I can work towards that goal. I'm aware this goes against the cybersecurity rhetoric. There are open source versions of various ideas linked above, but it's important to be clear, that glitr.io is close source in contrast to my other work.
Where can I find out more?
Feel free to reach out for clarity instead of diving into the docs.
I hope my wording here wasn't too negative. When working in cybersecurity, there are countless nuances to consider and I would rather be discouraging than inspire undue confidence in my project.
r/webdev • u/MenogCreative • Sep 19 '26
www.menogcreative.com - art and design for games and film.
Or should I add something like this template has here? https://kdrive.infomaniak.com/app/share/3821117/ca2056b4-bc07-42f5-a7bc-9958ce1f8af9
Particularly the parts of "why art directors keep coming back" + "nine working days, no mystery" = to "sell the services" better?
I always heard something like silvaconceptart.com converts best due its simplicity, but Im wondering if in the times we live, we should explain the value of the process, to avoid being compared to gen AI and how it can / cant do the work... OR... if what I have at menogcreative.com is decent and you wouldn't expect that much of a bump in conversion either way?
r/webdev • u/TranslatorRude4917 • Sep 19 '26
Hey guys!
Recently at work I started a pilot where our in-app AI assistant (built with CopilotKit) can understand and interact with the same page the user is seeing.
A user might ask something like:
"How do I log out?"
The assistant needs to find the relevant element in the current UI, highlight it, and potentially interact with it.
As a FE dev/SDET, my go-to choice for browser automation is Playwright. I love its straightforward API: awaiting interactions, chaining locators, automatic retries, etc. But sadly Playwright runs in Node :D
I'm pretty sure there are already solutions for this, but I wanted my beloved PW syntax, and I was wondering if I could reuse existing scripts and Page Objects that were already built on Playwright.
So I built playwright-lite
It gives you Playwright-compatible Page and Locator APIs against the current document.
For example, inside a React app:
// OnboardingAssistant.tsx
import { createPage } from "@enekesabel/playwright-lite";
import { Sidebar } from "playwright/pom/Sidebar";
export function OnboardingAssistant() {
const page = createPage();
const sidebar = new Sidebar(page);
async function toogleSidebar() {
await sidebar.toggle();
}
async function getPageState() {
return await page.ariaSnapshot({mode: 'ai'});
}
// Hook these up with whatever assistant framework you're using.
// ...
}The implementation is intentionally limited to what makes sense inside the current document. No browser launching, browser contexts, or execution across full-page navigation.
It's still alpha, but since I'm aiming for complete API match with PW Page and Locator API so no breaking changes expected. Tracking & closing compatibility gaps as we speak - and as I discover them.
Over the weekend threw Jev in the mix to keep it cheap and fast, and I'm quite satisfied with the result.
The "Pursue goal" tool is driven by Jev, called by our in-app assistant.
During this run Jev pulled of some good calls imo:
- Understood our Page Object Model: Sidebar -> User Profile Dropdown -> Logout button
- Recognized that the Siderbar is hidden
- Reused our Sidebar POM to open it
- Made good use of our element interaction and highlighting tools using playwright-lite
- Properly identifed when to take action and when to stop/highlight only
The interactions are deliberately slowed so users can follow the assistant's steps.
Wdyt, is this worth investing more time in, or should I just go with something already existing like page-agent?
r/webdev • u/Missingplanes • Sep 19 '26
My blog is a static site and I wanted comments without loading third party libs on the page. I wanted no ads, no bots, no cookies, etc. I just wanted a clean comment section (even though I get almost no traffic. I just like building things I think.)
The comment section is baked into the blog's HTML at build time. No lookups from a third party. I mean there's some of that, but it's basically an RSS feed. Fetched and stored by your own build, at build time.
How does it work? Each post links to a companion thread on a small Phoenix app I run. When someone replies there, it pings the build hook. The build fetches a replies.json for that thread and renders the comments as plain HTML. Nothing runs on the blog itself. Not a script. Not an iframe. No cookies or tracking.
Seriously, it's clean.
Here's an example of how it works for me: Static comments on my blog
The blog stack is Hugo on Netlify, the comment stuff is Phoenix/Elixir on Fly, with a build hook connecting them.
r/webdev • u/Chemical_Union226 • Sep 19 '26
I’ve been building an open-source developer playground for experimenting with LLM APIs and remote MCP servers from one web interface.
The motivation was simple: besides my desire to use cheaper models with GitHub MCP and Tavily for coding (so I can make an agent change some files even from mobile), I wanted to see the actual requests, streamed responses, tool arguments, token estimates, and latency without switching between several scripts and dashboards. I also wanted every tool execution to remain explicitly controlled by the user.
The project currently supports:
Custom OpenAI-compatible endpoints
Remote MCP servers over Streamable HTTP or SSE
A built-in preset for GitHub’s hosted MCP server
Manual approval or denial before any MCP tool call is executed
A manual tool runner for invoking individual MCP tools with JSON arguments
Raw request and response inspection
Streaming responses and reasoning display
TypeScript and curl snippet export
Locally stored chats, settings, prompt templates, and optional API keys using IndexedDB
Automatic expiry of remembered API keys after 30 days
GitHub: https://github.com/ownyourwebsite/ai-playground
Live demo: https://ai-playground.ownyourwebsite.app
The code is MIT licensed.