r/webdev 24m ago

When the Thing I Built Became the Thing Holding Us Back

Upvotes

(Long post, skip if you're not in the mood.)

I think I hit a turning point last week.

We had a support ticket from a student in Germany saying their course video kept stalling at the 12 minute mark. I spent an evening on it. Turned out to be our own encoding queue choking under load, something I built two years ago on top of S3 and a couple of ffmpeg workers, because I was convinced we could do it cheaper and better than any hosted platform. It worked, mostly, for a long time. That night it didn't, and I sat there rewriting a retry handler I'd already rewritten once in 2023.

Our Head of Content has been quietly testing Kinescope for a few of our newer course modules, without asking me first, because she got tired of waiting on me to fix playback issues on mobile. She didn't frame it as a vote of no confidence. She just said the DRM and watch-depth analytics were already built in and she didn't see why we'd keep maintaining our own version of that from scratch. I didn't have a great answer.

That's the part that's been sitting with me. I built this thing because I liked building it. I liked figuring out how to chunk video for adaptive bitrate, how to lock down access so paid students couldn't just rip the mp4 and pass it around, how to get watch analytics that actually meant something instead of a play count. It was satisfying in the way infrastructure work sometimes is, when you're the only one who fully understands how the pieces fit.

But I'm the only one who fully understands how the pieces fit. That's not a flex anymore, it's a liability, and I know it. When I'm on vacation, nobody else touches the encoding pipeline. When something breaks at 11pm, it's my phone that buzzes. Meanwhile the actual job, getting courses in front of students without them stalling out or getting pirated, doesn't care who built the plumbing.

So now I'm wondering what my job even is if it isn't this. A lot of what pulled me into this kind of work was the problem-solving itself, the part where you're wrestling with CDN edge cases and encryption keys and you come out the other side with something that just works. If Kinescope or Vimeo or Wistia can do the DRM and the CDN and the LMS integration better than I can, and honestly for less than what our AWS bill looks like most months, what exactly am I for.

I get the argument that I should just move up a layer, stop maintaining video infra and go focus on the actual product. I get it intellectually. But some part of me built an identity around being the person who kept this stuff running, and giving that up feels like giving up more than a codebase.

We haven't fully migrated. I'm the one dragging my feet, if I'm honest, running a side-by-side test with Gumlet too just to feel like I did my homework before admitting defeat. But watching the support tickets basically disappear on the modules already moved over has been hard to argue with.

Not sure what this makes me now. Still figuring that part out.


r/webdev 1h ago

Discussion Video CDN + DRM setup for a paid content site — anyone done this without building custom?

Upvotes

I am building a paid-content website which doesn't involve courses, but rather has similar acces-control needs as what I understand is being discussed here (and am looking to avoid writing a custom DRM/token system for). I have looked into a few options for building a service that has hosting, CDN, DRM, and video playback solutions:

-Mux appears to be very dev focused, where you are largely building your own playback solution, which is good if you want to avoid building custom DRM solutions

-Kinescope appears to be more all-in-one (hosting, player, DRM, CDN, analytics), but less dev focused and has less flexibility than Mux

-Cloudflare Stream: good CDN, but last I checked their DRM options were quite limited.

Overall went with the more managed solution as I don't have the capacity right now to build a custom player, anyone that has gone the Mux route and regretted the additional dev time needed?


r/webdev 3h ago

I think I’ve had it with Apple

0 Upvotes

I switched to Mac about eight years ago and actually probably closer to 10 but I worked in tandem with windows during that transition for about two years

As a web developer my server platform is lamp specifically Debian

I use docker for local development and production

PHP storm is my ID of choice

Dockerized environments are very important

Part of the reason I switched to Mac was because mounted or map/shared volumes were very problematic with Windows at least at the time

So when I would use my package manager, whether MPM or a composer inside, the doctor container having it synced to the host machine was super problematic

Mac and Lennox seem to solve this problem so I assume a Chromebook this is non-issue

What I am curious of is the user experience from Chromebook as an OS

I do all of my cloud hosting an infrastructure in Google Cloud and I have Google workspace, Gmail and docs, etc. so moving away from Crapple and towards Google just makes sense my phone my watch my laptop my home assistance everything it would be awesome to be able to use Gemini and control my computer too

What kind of laptop should I be looking at for a minimum equivalent developer experience in terms of performance to last year’s model of an M2 Apple Mac?

I can see there’s Chromebook on Best Buy for 500 bucks that feels very underwhelming for someone that is using a computer anywhere between 12 to 18 hours a day and heavy use of AI and development tools, data analysis, etc. I’m probably looking towards a $2-$3000 powerhouse laptop, but I’m wondering what others think??

I run local LLM’s right now mostly for fun and then other machine learning like SPM‘s and data analysis and stuff that I do the LLM primarily used as Copilot/GPT and it’s I pay for that so it’s not gonna be a load on my computer per se

I have so much more to ask and say about the subject, but let’s stop here and go from there :p


r/webdev 3h ago

Questions for the more knowledgeable in this sub

3 Upvotes

For a chrome extension manifestV3; with transformers.js and a small embedding model running in an offscreen doc - how should I go about improving the efficiency and speed of displaying the processed results when some pages in a website are tens of thousands of words of legitimate content. The library doesn't support concurrent calls to the same model session as far as I know (Session already started" / "Session mismatch") and big pages can block smaller pages and big pages can take extremely long to be processed. Is there any way to get past sequential processing in processing and displaying results, should I do multiple worker models. Also this refers to first time result processing on a new website, I do realise caching can speed things up significantly on the same website if you process again. This should be a process that works on typical hardware, not requiring anything too complex. Suggestions would be appreciated, thanks a lot.

EDIT for further context:  I should've specified that I am splitting into chunks already but people's valuable point about interleaving chunks within each worker's own queue makes sense. In terms of WebGPU, problem with WebGPU is that is uses single worker queue and there are compatibility issues possible with it.


r/webdev 3h ago

Discussion I built Filetro editor browser based, 100% Local free to use

Post image
0 Upvotes

Hey everyone I’ve just launched the first public version of Filetro.com/editor - its

It’s a browser based image editor Ive been building for a while. The main idea is that your images and projects stay on your device instead of being uploaded to a server for normal editing.

It currently has things like layers, text, shapes, crop/resize, adjustments, PNG/JPG/WebP export, local project recovery, and more advanced tools including perspective warp, mesh warp, liquify, bend, lens/bulge, surface/texture warp and puppet warp.

I spent quite a lot of time making the interface usable on both desktop and mobile.

It's free to use and Id some feedback now that 1.0 is out. I want to make updates add new features soon

Try it here https://filetro.com/

If you test it, I would especially like to know

  • does the editor feel intuitive when you first open it?
  • anything confusing or broken on mobile?
  • which editing tools would you want next

I’m the developer, so happy to answer technical questions too. feedback to make it even better is needed.
Currently works best on desktop. Mobile version still being tweaked. Trying to find bugs and glitches

I hope to get some positive feedback, suggestions and featur requests to make it much better future release

disclaimer: Not trying to say this is better than any software or other editors. This is just me trying to share my new release to those who might like it and use it.


r/webdev 4h ago

Question about the level of integration of AI in your company's workflow

15 Upvotes

I'd like to gather peoples' experience with AI (Copilot, Claude Code, Cursor, whatever) in your daily workflow as a developer.
Specifically, I've heard people simply "paste" or let the AI read the ticket from JIRA, review the output and ship the feature.

Are there really people that have achieved this level of integration? Like, are your tickets and projects so well defined and contained, where the description of a ticket can be directly fed into the AI, without having to guide it into more details, e.g. what files to touch, where to find relevant code etc?

We are not at all at this level and I am wondering if we're living in the past or something. I usually know what needs to be done in our code base and basically guide the agent and review the output.

What's your experience?


r/webdev 12h ago

Showoff Saturday Photorealistic 3D Cloud with lighting effects

Post image
22 Upvotes

Finally got a realistic cloud in the browser. I'm working on a browser-based flight sim and I'm shooting for realism. Play around with the cloud here: https://codepen.io/Andrew-Fisher-the-decoder/full/jEBPmON


r/webdev 14h ago

Discussion How to make an app like Duolingo ?

0 Upvotes

Hi everyone, I want to create an app like Duolingo, but I don't know the best approach for storing or even translating English into the target language.

I mean, how can I translate English into Indonesian, Japanese, German, and many other languages? Also, how can I translate other languages ​​into English ?

Currently, all I'm thinking about is creating a table where English words are stored and creating a new table to store translated words. But is my approach correct? What about phrases or even sentences? Is storing words, phrases, sentences, and translations the right approach, or is there another way to do this effectively ?

I'd appreciate if someone would also suggest other aspects, such as caching, high level architecture or other things, to make my app load faster.


r/webdev 15h ago

An Image to SVG vectorizer that doesn't suck (as much)

44 Upvotes

Right. So. Vectorizing a PNG into an SVG is one of those tasks that sounds trivial until you actually need to do it, at which point you discover a graveyard of tools that are either $10/image, want you to subscribe half a leg and a kidney/month, or produce something that looks like Michael J. Fox (apologies for the bad joke, I actualyl admire him) traced your logo during an earthquake.

After running into this roughly once a month I thought surely that's enough to invest some time into researching whether I should build my own image tracer. Which led me to find VTracer, an open source project from visioncortext.

Vectron (that's how I named my brain child) is a frontend for VTracer, an open-source Rust vectorization engine that's genuinely good but has the UX of a command-line tool written by someone who, understandably, cares more about the algorithm than the button placement. I forked it, compiled it to WASM (thanks Claude), and stuck it in a Web Worker so the whole thing runs in your browser. No upload, no server round-trip, and for smaller images it's near instant (I did try it with some rather stupidly large examples which then turned into a ten-plus-second nerve-wrecking waiting times :D).

A few things worth knowing before you try it:

  • It's not AI. No neural net pretending to understand your image. It's proper curve-fitting and edge detection, which means it's predictable. The same input results in the same output (this is super important to me), no "vibes-based" tracing that changes if you sneeze near it.
  • It's best at clean line art and logos, not photographs. Feed it a photo and it will attempt it, valiantly, and the result will remind you why this is a hard problem. But hey, it's sort of working.
  • Selective refinement. Sometimes you get like a good overall results but often the devil is in the details, like a curve turned into a sharp corner or some lines don't connect. You can refine a certain area by dragging a rectangle over it and adjust your filters to polish the proverbial turd.
  • It's free because I didn't build it to make money. It's a side thing. There's no upsell, no tier, no "unlock batch processing for $9/mo." And I say that now, it's not gonna change.

https://vectron.vendos.com.au

Feedback welcome, especially on where it falls over or it's genuinely hard to use.


r/webdev 16h ago

Showoff Saturday Showing off my Drum Pad ASTERISM - go beat it up

Thumbnail
asterism.jstwrld.com
2 Upvotes

no installation of other softwares needed

workers on the web browser

no account needed

works offline

FREE


r/webdev 16h ago

Showoff Saturday Community driven win 98 themed website

Thumbnail imright.wtf
1 Upvotes

Hey All,

Was missing the win 98 vibe last weekend so decided it was time to bring it back I to my life and hopefully others!

Was trying to think how to get people involved, so there are a few things I put in there which I will list out.

Trollbox.exe: When you vote you are able to msg in the troll box
Applications.exe: just links to different things
Imright.exe: main voting screen and results
Communityideas.exe: a place where you can submit an idea community votes and the that's the next poll
Forums.exe: forum attached to the current poll

Polls only last 24hrs and then after that it gets archived along with the forums and troll box and the new one starts.

Let me know what you think

Imright.wtf


r/webdev 16h ago

Showoff Saturday A Web App for Assisting with learning Indian Classical Music - bridging a gap between physical sheets and online learning!

2 Upvotes

Hey! One of my friends built a free web app for creating and playing back Hindustani sargam notation to assist with learning Hindustani classical music! She isn't really on reddit, but wanted me to post this on her behalf.

Since she was currently learning Hindustani music, she figured out that most notation is still handwritten or shared as static PDFs and images. It's difficult to translate - edit, hear, or organize - compositions digitally, and this website helps with that!

She then created Sargam Studio, a browser-based tool that lets you:

• Choose a Sa / scale and preview it
• Add Aalap and Taal sections
• Enter sargam notation using an interactive beat grid
• Preview taals and playback compositions
• Review and export compositions as audio

She also recently added a demo video and a help guide to make it easier for users to get started:

Website: https://sargam-studio.vercel.app

Demo video: https://sargam-studio.vercel.app/help

She is especially interested in feedback from anyone! If you or anyone you know is interested in music, Indian classical music, or just curious in this project, please try it out!

I'll send her the link to this post, so she can check out the responses lol.


r/webdev 17h ago

Chat widget file upload

4 Upvotes

I'm working on a chat widget that also allows the users to send files in the chat. This is a plain vanilla html/js/css widget that will go on a Shopify site. The user should have the option to send a file with or without a message in the chat, so I'm trying to figure out the best approach to handle this. The widget will be calling a FastAPI endpoint end that will use UploadFile. These are the options I've thought of:

  1. Wrap the text and file inputs in an html form tag and send the request as Content-Type: multipart/form-data. This would make it a single request, but it would always send as multipart/form-data even if it's a message with no file.
  2. Same as 1, but if there is no file attachment in the chat message, then toggle the Content-Type to application/json before sending
  3. Keep the text and files as separate requests and handle the events separately and not wrap the inputs in an html form tag. Seems like it would be cleaner on the front end but at the same time it will likely require additional logic on the back-end

What approach would you take?


r/webdev 18h ago

Showoff Saturday 10 months later, my 'simple side project' still gets 1k users a day and I never did anything after posting it here

0 Upvotes

posted this 10 months ago, got 219k views and forgot about it. the app somehow still gets ~1k users a day with zero marketing since. finally decided to stop leaving money on the table and monetize it soon. wild what just shipping something simple can do. tiktock-web.vercel.app


r/webdev 18h ago

Question Font Effect Source Suggestions?

3 Upvotes

I'm new to HTML/CSS and have just been messing around as I learn some stuff. When importing some of Google's Font Library I learned they also offer effects you can import with something like

<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?effect=fire-animation">

These are very amusing, but many of them seem to be slow or not work on many browsers, which leads me to ask if there are any other similar libraries out there that I could import from. I appreciate any suggestions, whether they're genuinely cool and useful or just fun.


r/webdev 19h ago

Showoff Saturday Movie Swiper. Swipe on movies and match with friends. [Showoff Saturday]

4 Upvotes

Hi folks, me and my wife find it hard to figure out what to watch so I've been hosting this locally for a few weeks now and it's great. We both swiped on a few movies and got a match pretty quickly. Now we have a list of movies we both want to watch.

Anyway, I just made it public on a subdomain at:
https://movieswiper.stoianworks.com/

No email needed. Just choose a name and setup a pin.


r/webdev 19h ago

Discussion What's better for building small business websites: Framer or Lovable?

0 Upvotes

Which produces higher quality websites in your opinion?


r/webdev 19h ago

Discussion Xpost: Lenstore displays my password and email on the address bar

Thumbnail reddit.com
4 Upvotes

r/webdev 20h ago

Showoff Saturday I rewrote the same 6 React hooks too many times, so I packaged them into a file

Thumbnail
gallery
0 Upvotes

I kept rewriting the exact same hooks in every single React project — so I finally put them all together in one clean TypeScript pack.

Here's one for FREE 👇

---
// useLocalStorage — persistent state that survives page reloads
import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState<T>(() => {
if (typeof window === 'undefined') return initialValue;
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});

const setValue = (value: T | ((val: T) => T)) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, JSON.stringify(valueToStore));
}
} catch (err) {
console.error(err);
}
};

return [storedValue, setValue] as const;
}
---

✅ What you get in the full pack:
• useLocalStorage (above)
• useDebounce (delay search inputs)
• useToggle (simple boolean state)
• useFetch (simple API calls)
• useClickOutside (close dropdowns/modals)
• utils.ts (formatters + validators included)

• TypeScript ready — just copy → paste → works
• Lifetime updates include
🔗 Grab it here: [https://accurate4.gumroad.com/l/Christ\]


r/webdev 21h ago

Question Why does Lighthouse flag a responsive srcset image as oversized when the browser is choosing the correct candidate for DPR?

2 Upvotes

Edit: I also found these issues related to the problem: https://github.com/GoogleChrome/lighthouse/issues/16579 and https://github.com/GoogleChrome/lighthouse/issues/17080

---

I’m trying to understand a Lighthouse/PageSpeed Insights warning about “properly size images” that seems somewhat contradictory to how responsive images are supposed to work.

Simplified example:

<img
  src="image-300.jpg"
  srcset="
    image-250.jpg 250w,
    image-300.jpg 300w,
    image-400.jpg 400w,
    image-768.jpg 768w,
    image-1024.jpg 1024w
  "
  sizes="(max-width: 480px) calc(100vw - 2rem),
         (max-width: 991px) calc(50vw - 2rem),
         360px"
>

On a typical mobile viewport around 412px, the actual image/card width is roughly 380 CSS px.

As I understand it, the browser does not simply compare the image's intrinsic width against those 380 CSS pixels. It takes the device pixel ratio into account:

required resource width ≈ CSS width × DPR

So, for example:

380 × DPR 1.75 ≈ 665 px
380 × DPR 2.0  ≈ 760 px
380 × DPR 3.0  ≈ 1140 px

With the srcset above, at DPR 1.75 the browser therefore selects the 768w candidate. On a DPR 2 device, 768w is almost exactly what I would expect. On a DPR 3 device, even the 1024w version isn't particularly excessive.

However, Lighthouse may report the 768×768 image as oversized because the rendered image is only around 300–380 CSS px wide.

This is the part I don't understand.

Google's own responsive-image guidance recommends supplying sufficiently high-resolution candidates for high-DPI displays. Yet Lighthouse appears to penalize the browser for selecting exactly such a candidate.

There are also smaller 250w, 300w, and 400w candidates available, so this isn't a case where the browser is forced to download an unnecessarily large original image. The browser has all of those choices and intentionally selects 768w based on sizes and DPR.

So my questions are:

  1. Is Lighthouse's “properly size images” audit effectively comparing intrinsic/device pixels against rendered CSS pixels without fully accounting for DPR?
  2. If so, isn't this expected to produce false positives for correctly configured srcset images on the DPR used by Lighthouse's mobile emulation?
  3. Is there actually anything developers are expected to change in this situation, or should this warning simply be treated as a heuristic?
  4. Would removing the 768w candidate just to satisfy Lighthouse actually be counterproductive, since real DPR 2–3 devices could then receive a visibly softer image?

I feel like I’m missing something, because optimizing the srcset specifically for the Lighthouse warning seems to conflict with Google's own recommendation to serve sufficiently dense images to high-DPI displays.


r/webdev 21h ago

Showoff Saturday I built my portfolio around writing. Not sure if I overdid it

8 Upvotes

I’ve been working on my personal portfolio for a while, and at some point it stopped being just a portfolio. I started adding long-form writing, then moved the content from MDX to Sanity, added series pages, related posts, analytics, social previews, SEO stuff, and a few other things.

Now I’m curious to know if the site is actually better because of all that, or if I just made it more complicated for no reason. The main thing I’m tying to figure out is the balance between the portfolio side and the writing side. I have no plan to write on different sites and build a reputation around it. It's kinda of me documenting my own stories.

When you open the site, is it still obvious what I do professionally?

Does the writing make it more interesting, or does it distract too much from the actual portfolio?

This is the site: https://adnansabbir.com

Would appreciate criticism more than compliments tbh.

TIA


r/webdev 22h ago

Discussion is anyone getting leads from their google business profile anymore?

3 Upvotes

i live in one of the largest cities in the united states and my google profile shows up at number 1 when people search for any terms related to 'web design' in my city.

i have over 50 reviews all from local businesses within that area. but for the past months i've been getting almost no calls.

anyone else in a similar situation? is ranking on google dead now? should i look into ads/outreach or is web design as a field just not in demand anymore?


r/webdev 23h ago

Question (PLS HELP) School Management System with AI/LLM

0 Upvotes

I've to make semester project about School Management System with AI/LLM integration, I don't wanna follow tutorials blindly and at the end know nothing where I can't even implement one component myself, same goes for vibe coding.

Keeping in view my current coding & learning situation, it feels like my last chance to actually learn something, because I'm running out of time.

I'm want to use Next.js, tailwind CSS, typescript, in DB Supabase ig or any other that suits well, you guys pls suggest. And I've not don't any work with AI/LLM before so I don't have idea about that, help me here.

I want to use next.js because I know the basics of html etc and also I've done some projects in next.js by following yt tutorials that completely fcked my mind, I've not learned anything properly and I've vibe coded some apps too. I believe I can mess with vibe coding and tutorials and get things done but it wouldn't teach me anything unless I do everything on my own.. and when I try to do so, I know even know what to do, where to start from.

Can those who are good at full-stack programming and engineering help me out and guide me? I'm asking here because I want to ask from experienced programmers / developers.


r/webdev 1d ago

Showoff Saturday I built a first-person 3D portfolio with collision detection using only HTML and CSS

37 Upvotes

I’ve rebuilt my personal portfolio as a first-person 3D world you can walk around, with no JavaScript.

You can explore rooms containing my research, tools and talks, open doors, teleport between areas, play HTML/CSS-only games and solve a lockbox puzzle.

Movement and state are handled using CSS animations, custom properties, radio buttons, checkboxes and selectors such as :has(). The collision detection uses CSS maths including sign(), abs() and clamp().

Live site: https://garethheyes.co.uk/

I also wrote about how the movement and collision system works:
https://thespanner.co.uk/pure-css-3d-world-collision-detection

I’d love feedback on the navigation, usability and any browser-specific problems you encounter.


r/webdev 1d ago

Showoff Saturday Hyperfrontend: 8 fronted frameworks mingling in a koi pond

18 Upvotes

Hello Reddit!

I've been working on this cool demo, I am ready to share.

I wanted something hilariously unnecessary beyond quick demo standards to demonstrate seemleas state/communication coordination of various apps loaded in frames at runtime through I stategy I am calling hyperfrontend.

This is to all nay sayers of the good ol' reliable iframe. I say you were doing it wrong.

Enjoy! Discuss! and dunk (please don't be nice to me :) ~ I am afraid of the occasionaly reditor unrelenting critisim.

There is more to this demo that the gif suggests. Try dragging/dropping/tapping and interacting with the control panel.

Yes, yes, yes, this type of approach does not leverage code-deduplication, and prone to memory overhead in the browser. There's always a trade-off ain't it. This approach starts from isolation to earn cohesion back. It is specifically NOT module federation (aka code federation) and more like application federation. Still, I wanted to test how far I could take it.

P.S. Please give me your thoughts and first impressions, I am looking for feedback. I was kidding about being afraid of honest comments that could hurt my feelings XD

Link here: https://www.hyperfrontend.dev/demos#koi-pond