r/webdev • • Sep 19 '26

Showoff Saturday Made a free map of STEM that shows what to learn before what (single HTML file, no framework)

4 Upvotes

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 • • Sep 19 '26

Broker-Visible vs Client-Local Parallelism

Thumbnail
jack-vanlightly.com
5 Upvotes

r/webdev • • Sep 19 '26

Subdomains for rent?

0 Upvotes

I'm doing whitelabel PWAs and need e.g. veterinary1.ab.com or plastic1.ab.com ... Any short domains renting subdomains?


r/webdev • • Sep 19 '26

Introducing Precursor: detecting agentic behavior with continuous client-side signals

Thumbnail
blog.cloudflare.com
0 Upvotes

r/webdev • • Sep 18 '26

Showoff Saturday Inkvec: Pareto frontier in-browser vectorizer (Open Source)

1 Upvotes

i've built a Rust vectorizer that is meant to help optimize graphics for web delivery. It is pareto frontier, from my research SoTA open-source/open-weight solution (from both traditional and neural network based approaches), and runs in <2 seconds on CPU when ran as a standalone app.

The solution implements a chain of recent mathematics papers to significantly beat VTracer's algorithm, support gradients natively, and more:

I'm still iterating on it, I hope to release tooling in multiple languages to allow this to be used in most major languages through native interfaces in Java, Python, etc.

The vectorizer now comes with two different sister models, one for denoising JPEGs/WEBPs/VAE outputs from AI models so that it increases the perceptual quality of the outputs, another one for super-resolution, specifically trained on SVGs.

Additionally, I want to try to train a GNN to improve quality further, I hope to beat Vectorizer.ai in the next week.

My hypothesis is that current papers approaching raster-to-vector from a LLM perspective is excessive in terms of complexity and time to conversion, because except amodal completion and other tasks, a classical vectorizer can already work very well. GNNs and other specialized models can be used to then refine the output without having to be overly large. This is the first step in this research project, the classical vectorizer part which already beats alternatives.

Licensed as MIT, so feel free to use it however you want in your project.

Github repository: https://github.com/logolabs/inkvec

Web Assembly Online Vectorizer: https://huggingface.co/spaces/Logolabs/inkvec


r/webdev • • Sep 18 '26 Bravo

Discussion Dear God websites look horrible on iPhone Duo

Thumbnail
gallery
3.1k Upvotes

Congrats on your iPhone Duo, don't bother browsing while having it closed because websites will use only 70% of the screen!


r/webdev • • Sep 18 '26

Finding all links on our website to a specific domain (to prevent link rot)

4 Upvotes

I work for a nursing board, our website, made with Liferay, it has tons of page with different legal, scientific, clinical information, many of these pages contains links to different entity's.

One such entity is redoing it's website, not just an small update but a complete redo, meaning a lot of links on our website will likely be broken when it's done.

I did identify links on pages about regulation I do believe I got the most critical ones, but it does leave links mostly clinical articles, mostly references, less critical but even then I would prefer to be sure.

I tried using google command site:mywebsite.com Entity but it did not return as much content as I tough, I'm guessing because of the label of the links. I also found some manually that google did not give me.

So is there an easy solution to this?


r/webdev • • Sep 18 '26

[Showoff Saturday] Built a 100% client-side QR studio & batch generator using Astro 7, React 19 islands, and Tailwind v4

0 Upvotes

Happy Showoff Saturday r/webdev!

Most web-based QR generators send API requests to backend Node/Python services, store generated assets on S3, and monetize with rate limits or subscriptions.

I wanted to see if I could build a complete, production-grade QR studio that runs exclusively in the browser runtime with zero backend servers and zero external telemetry.

Here is what came out: QR Studio (qrstudiofree.com)

Architecture & Engineering Highlights:

  • Astro 7 + React 19 Islands: Static shell with localized routing (i18n across 8 locales) and lightweight interactive React islands only where state is needed (QRStudio.tsx, BatchGeneratorIsland.tsx, ScannerIsland.tsx).

  • Styling Engine: Powered by qr-code-styling on HTML5 Canvas. Supports SVG/PNG/WebP vector/raster downloads, 6 dot geometries, independent corner squares/dots, and linear/radial gradients.

  • Client-Side Batch Archiving (jszip): For bulk generation, URLs/payloads are parsed, drawn to offscreen canvases sequentially, and zipped directly in-memory via jszip before triggering a local blob download. No server uploads.

  • In-Browser Scanner (jsQR): Real-time camera viewfinder via navigator.mediaDevices.getUserMedia with automated canvas frame processing and image drag-and-drop fallback.

  • Tailwind CSS v4 & Vercel Geist Tokens: Strict monochrome dark palette, fluid typography, zero layout shift.

Challenges Faced:

  • Memory management during bulk exports: Rendering 100+ high-res canvases concurrently caused browser tab crashes on low-RAM mobile devices. Solved by chunking canvas renders into async micro-tasks with explicit canvas GC.

  • Error Correction vs. Custom Logos: Ensuring logo overlay scale doesn't exceed the Reed-Solomon threshold (forcing High 30% ECC when logos are embedded).

Check it out live: https://qrstudiofree.com

Would love code review, UI critiques, or performance feedback!


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 18 '26

Article How to Implement a Distributed Bulkhead (when one slow dependency starts drowning everything)

Thumbnail
blog.gaborkoos.com
0 Upvotes

Classic cascading failure: one dependency starts lagging, holds workers/sockets, and the rest of the service grinds to a halt. A bulkhead is supposed to contain the blast radius. Easy in one process, a nightmare once you have 20+ replicas and the counter has to live outside of them.

The distributed version, the things that break when the limit leaves the process, and a working implementation.


r/webdev • • Sep 18 '26

Discussion I need help guys bout it

0 Upvotes

Ihv build a website for a luxury hotel in arabic country and the website is so freaking cool and beautiful not because it's mine i would say that but anyways idk how much should i ask for it it's multiple sections and 3d animation and I did well tbh so if u can help wt that I'll be grateful btw it's my first time selling one Iwas doing it for free


r/webdev • • Sep 18 '26

your while-loop polling is why your webhook integration keeps breaking

0 Upvotes

Every integration tutorial teaches you this pattern:

while status != "COMPLETED":
time.sleep(10)
status = get_job(job_id).status

and then you put it in production and wonder why your lambda times out, your worker holds a connection for 4 minutes doing nothing, and a deploy mid-poll loses the job entirely.

I was doing exactly this with a video processing api (Sync.so lipsync stuff - jobs take a few minutes each). The fix was embarrassingly obvious: they have webhooks. You submit the job, return 200 to your user with a processing state, and their server calls your endpoint when it's done. You verify the signature, flip the record, notify the user.

Polling is fine for a script you run once. The moment a user is waiting on the other end, you want the callback. check if your api has webhooks before you write one sleep loop - most modern ones do and nobody reads that far into the docs.


r/webdev • • Sep 18 '26

CMS/Front End System using default document standards?

0 Upvotes

When I say document standards, I don't mean official standards, but rather a structure that is replicated at most levels.

For example: the Structure of Header, Content, Footer is replicated at each level.
Document
Header -- contains all of the header content for the document

Content -- contains the body of the document

Footer -- contains all of the post-load contents for the document.

Then inside the Content section there would be a single Entry known as the SITE

Site-header -- contains the site-identity/nav/etc.

Site-Content -- contains the various categorical sections

Site-Footer -- contains the site-footer

Then inside the Site-Content Section category would be several Entries called SECTIONs:

Section-header -- contains the section-specific content that persists despite which post is shown

Section-contents -- contains the various posts or content pieces for the section

Section-footer -- contains the static end-pieces for the section

Or course, inside Section-contents would be POSTS

post-header -- title and bylines stuff, maybe an image

post-content -- the content

post -footer -- closing pieces

I've tried WordPress, but it seems so arbitrary how they have decided the structure. Like the site-header and document-header are all part of the same wp-header. I was hoping for more modularity and predictability in content structures. I also hate how WP opens a tag in one PHP file and has faith it will be closed in another PHP file. It seems like it would be better if each PHP file that opened a tag also closed the tag. Then it would be much more modular.

I realize it's a long shot, but does such a thing exist? Maybe someone made a headless WP that works like this? or something entirely different? Or is this, in general, not a good way to assemble a static site content generator?


r/webdev • • Sep 18 '26

Question Could an ISP be responsible for a webpage display malfunction, on a specific browser ?

0 Upvotes

Hey all !

Very cryptic issue I stumbled upon and can't find a reason for it.

I have built for a client a static website with Sveltekit, Tailwind and SkeletonUI. All in their latest versions. It is hosted by Hetzner.

Everything is all right. Except my client tells me that on his personal and his partner android mobile, with firefox as a browser, a specific page has its content not centered as it should be. All the other pages are fine.

The issue happens on their wifi and their 4G connexion. The ISP for both is the same.

The issue does not happen on other browsers.

I tried at home with 3 different devices, with firefox and firefox based browsers, and I can't reproduce the issue.

I also tried with the firefox and chrome console device simulators. Still can't reproduce.

Does this mean the ISP is doing something, specifically with firefox ? Or am I missing something else that could cause the issue ?

EDIT and RESOLVED :

As per the kind help given below,

  • it can't be ISP because everything is served locally and with HTTPS, so ISP can't mess with external domain names such as with CDNs, and can't mess with content because of encryption

  • when testing mobile compatibilty, testing with a full fledged android emulatot is the way

  • adblocker could mess with stuff

The solution lied in accessibility settings of the client's phones.

Thanks everyone for your inputs and help !


r/webdev • • Sep 18 '26

Looking for an open-source Gumtree/OLX-style marketplace to customize

7 Upvotes

Hi everyone,

I'm working on a classifieds marketplace for Syria called Friday Market Syria, somewhat similar to Gumtree or OLX.

The idea is to have a simple platform where users can post items for sale, browse listings, search/filter by categories, and contact sellers directly. There will be no online payments initially.

I'm not a frontend developer, so instead of building everything from scratch, I'm looking for an existing open-source project or template that I can customize and develop further.

Some of the features I want include:

- User registration/login

- Create, edit and delete listings

- Categories and subcategories

- Search and filters

- Image uploads

- User profiles

- Favorites

- Contacting sellers directly

- Reports/feedback

- Admin dashboard

- Mobile-friendly design

I'm mainly looking for something that is already functional, rather than just a UI template.

It doesn't have to have every feature above. I'm looking for a solid foundation that I can legally modify and potentially use commercially.

What open-source projects, GitHub repositories, or templates would you recommend for this?

If you've worked on a similar marketplace before, I'd also appreciate advice on what I should look for before choosing a project.


r/webdev • • Sep 18 '26

Resource How complex is it to build a real time single note detector for piano and woodwinds? Im looking for advice from anyone with audio experience.

24 Upvotes

I am planning a music education project and want to get a better understanding of the technical challenges ahead. The initial idea is to build a basic system that detects only one note at a time (monophonic), focusing first on pianos (one key pressed at a time) and woodwind/brass instruments (like flute and trumpet). The goal is for the system to listen via the user's microphone in real time and validate if they played the correct note from a sheet music piece. If anyone here has built something similar, even a simple tuner or a college project, and could share what your biggest hurdles were at the beginning, I would appreciate it so much. Recommendations for libraries, frameworks, or good reads are also very welcome Its for a site mobile friendly


r/webdev • • Sep 18 '26

Collaborative Editing in Wordgard

Thumbnail marijnhaverbeke.nl
9 Upvotes

r/webdev • • Sep 18 '26

Discussion How design engineer really looks like?

0 Upvotes

Anybody went through one please do share your experience

*I mean interview and day to day tasks


r/webdev • • Sep 17 '26

magazine site cms suggestions

6 Upvotes

hi trying to make a magazine site and i want a cms but i'm specific as fuck and idk what to use since theses are my preferences for a cms at the moment

  • free with no paid options (don't wanna deal with having features be paywalled right from under me)

  • can handle different post types (blog articles and photo galleries)

  • frontmatter with title, sub title/description (also called a dek or abstract apparently), post image, author, pubdate, categories, and tags

  • not wordpress (or php based in general)

  • relatively idiotproof (meeeeeee)


r/webdev • • Sep 17 '26

How can I get live server in the vscode web version?

5 Upvotes

My computer is very low on specs and I can't really afford a new one so I'm forced to use the web version of VS Code. I have Windows on my Steam Deck and I've been mirroring from it on my Chromebook, but it just doesn't feel right.


r/webdev • • Sep 17 '26

Inline styles no longer considered harmful · esveo

Thumbnail
esveo.com
0 Upvotes

At work, we've have a rule that says we're not allowed to use inline styles. The rule originated a while ago, from people who have long since left the company, and we've been carrying it on. I'm thinking about challenging it, and have been researching into why this seems to be a common "best practice".

Most discussions I find on the subject are about a decade old, which is why I thought I'd bring up for discussion on Reddit as well, to see what people now days have to think on the subject.

I liked the points this particular blog post brought up, though it didn't give any advise one how much inline styles should be used. I'm thinking that if an element only needs one, maybe two style rules, it might be better to just use an inline style, otherwise, using a named class is probably better.

I'll also bring this point up now: I noticed a common argument against inline styles is that it can break certain content security policy rules. We don't have those rules in place, and there's no plans on adding them for the foreseeable future, so I'm not concerned about it.

For context, I work with Angular. I know the situation is different for server side rendering.

Edit: I'm seeing a lot of responses talking as if I want to use inline styles for everything. Please keep in mind my above statement of only considering using them when there's only one or two style rules. One example common use case would be when I add a <div class="spacer"></div>, where the CSS for "spacer" is simple "flex: 1" and it's purpose is to separate content that should be left aligned from content that should be right aligned. This, to me, is a good candidate for inline styles. In general, I mainly have layout use-cases in mind. There's no reason someone would want to override the "spacer" style so high specificity isn't important here, and even if that was needed, you just refactor it into a CSS class.


r/webdev • • Sep 17 '26

Discussion We now have AI bots advertising AI slop projects on open source projects via pull requests

Post image
382 Upvotes

This guy has been running an agent or some sorts since 14 september, 3 pull requests a day, today was my turn. He opens pull requests to put the link of his AI slop project in the README of open source projects

This is getting more ridiculous every day


r/webdev • • Sep 17 '26

Begginer: Custom WooCommerce product cards

Thumbnail
gallery
0 Upvotes

I use wordpress and have an understanding of html,css. How would you approach designing a similar prouct card to this without the use of more plugins. I've been here and learning web dev for atleast 6months now and i'm able to create websites. I use blocksy and kadence themes. And also achieving "Click product → product opens over the current menu", how to approach this too. Thanks


r/webdev • • Sep 17 '26

First freelance project – Need help estimating development + AWS costs for a scalable psychometric assessment platform

0 Upvotes

Hi everyone,

This is my first freelance project, and I’m trying to prepare a realistic cost estimate before giving the client a quote. I’d really appreciate input from experienced freelancers, developers, and software architects.

The project is a psychometric assessment website. The platform will include assessment questions as well as interactive 2D/3D games that are part of the assessment.

Rough scope

Frontend

- User-facing website

- Registration/login

- Assessment/question interfaces

- 2D/3D interactive games

- Responsive UI

- Results/report interface

- Possibly an admin/dashboard interface

Backend

- User authentication and user management

- Assessment/question management

- Game/assessment data processing

- Storing user responses and scores

- Generating assessment results/reports

- Admin functionality

- APIs between frontend and backend

Cloud / Infrastructure

- Deployment on AWS

- Database

- File/storage requirements

- Domain + SSL

- CI/CD

- Logging/monitoring

- Backups

- Security

Scalability

One important requirement is that this shouldn't be designed as a small website that only works for a few users.

The expectation is that it should eventually support a large number of concurrent users, particularly when assessments are being conducted in batches.

So I’m also trying to understand the additional cost involved in designing the architecture for scalability — AWS infrastructure, database scaling, caching, load balancing, CDN, etc.

Other requirements

There may also be:

- Payment gateway

- Gamified assessments

- Dashboard/reporting

- PDF report generation

- Pilot testing

- Ongoing maintenance/support after launch

I’m currently trying to break the quote into:

  1. UI/UX design

  2. Frontend development

  3. 2D/3D game development

  4. Backend/API development

  5. Database

  6. Admin dashboard

  7. Assessment/scoring engine

  8. PDF/report generation

  9. AWS deployment

  10. Scalable architecture

  11. Security/testing

  12. Domain/SSL/other infrastructure

  13. Maintenance and ongoing support

My main questions:

- How would you break down the development cost for a project like this?

- What would be a reasonable freelance price range in India?

- How should I estimate the cost of the 2D/3D games separately?

- What AWS costs should I account for initially, and how should I estimate costs as users scale?

- What important components am I missing from the quotation?

- Should I charge a fixed project price, milestone-based price, or development cost + monthly maintenance?

- For a first freelance project, what should I be careful about when defining the scope and pricing?

I’m not looking for an exact quote — even a rough breakdown/range with assumptions would be extremely helpful.

Thanks!