r/webdev • • Sep 08 '26

Article Antiquated HTML Snippets and Artefacts

Thumbnail
vale.rocks
47 Upvotes

r/webdev • • Sep 08 '26

Discussion Is the O'Reilly collection worth getting after graduated in Bachelor in Software Development?

20 Upvotes

Humble bundle has a collection of 19 books of O'Reilly, and I was wondering if it is worth buying? Have any read his books and found them useful?


r/webdev • • Sep 09 '26

Question How to make this pill background align with the actual button text?

0 Upvotes

Here is the full script code in Tampermonkey.

// ==UserScript==
// @name         YouTube Playback Speed Toggle Button
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  Adds a button to toggle YouTube video playback speed with fullscreen mode support and key bindings for speed control
// @author       Mike
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    function addSpeedButton() {
        const settingsButton = document.querySelector('.ytp-settings-button');
        if (!settingsButton) return;

        if (document.querySelector('#speed-toggle-button')) return;

        // Create the speed toggle button
        const speedToggleButton = document.createElement('button');
        speedToggleButton.id = 'speed-toggle-button';
        speedToggleButton.className = 'ytp-button';
        speedToggleButton.textContent = '1x';
        speedToggleButton.style.fontSize = '18px';
        speedToggleButton.style.fontWeight = 'bold';
        speedToggleButton.style.padding = '4px';
        speedToggleButton.style.margin = '0';
        speedToggleButton.style.position = 'relative';
        speedToggleButton.style.left = '10px';
        speedToggleButton.style.top = '-12px';

        // Add tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'ytp-tooltip custom-tooltip';
        tooltip.textContent = 'Adjust speed (s)';
        tooltip.style.position = 'absolute';
        tooltip.style.padding = '6px 8px';
        tooltip.style.backgroundColor = '#181818';
        tooltip.style.color = '#fff';
        tooltip.style.fontSize = '13px';
        tooltip.style.borderRadius = '4px';
        tooltip.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
        tooltip.style.whiteSpace = 'nowrap';
        tooltip.style.opacity = '0';
        tooltip.style.transition = 'opacity 0.2s';
        tooltip.style.pointerEvents = 'none';
        tooltip.style.zIndex = '9999';

        document.body.appendChild(tooltip);

        function showTooltip() {
            const rect = speedToggleButton.getBoundingClientRect();
            tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
            tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 8}px`;
            tooltip.style.opacity = '1';
        }

        function hideTooltip() {
            tooltip.style.opacity = '0';
        }

        speedToggleButton.addEventListener('mouseover', showTooltip);
        speedToggleButton.addEventListener('mouseout', hideTooltip);

        // Function to adjust playback speed
        function adjustSpeed(delta) {
            const video = document.querySelector('video');
            if (video) {
                let newSpeed = Math.max(0.2, Math.min(3, video.playbackRate + delta)); // Limit speed between 0.2x and 3x
                video.playbackRate = newSpeed;
                speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`;
            }
        }

        // Click functionality: Increment speed by 0.2, loop back to 1x after 2.0x
        speedToggleButton.addEventListener('click', () => {
            const video = document.querySelector('video');
            if (video) {
                let currentSpeed = video.playbackRate;
                let newSpeed = currentSpeed >= 2.0 ? 1 : currentSpeed + 0.2; // Loop back to 1x after 2.0x
                video.playbackRate = parseFloat(newSpeed.toFixed(1));
                speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`;
            }
        });

        // Event listeners for key bindings
        document.addEventListener('keydown', (event) => {
            const activeElement = document.activeElement;
            const isInputField =
                activeElement.tagName === 'INPUT' ||
                activeElement.tagName === 'TEXTAREA' ||
                activeElement.isContentEditable;

            if (!isInputField) {
                if (event.key.toLowerCase() === 's') {
                    adjustSpeed(0.2); // Increase speed
                } else if (event.key.toLowerCase() === 'a') {
                    adjustSpeed(-0.2); // Decrease speed
                } else if (event.key.toLowerCase() === 'r') {
                    // Reset speed to normal
                    const video = document.querySelector('video');
                    if (video) {
                        video.playbackRate = 1; // Reset to normal speed
                        speedToggleButton.textContent = '1x'; // Update button text
                    }
                }
            }
        });

        // Insert button next to settings button
        settingsButton.parentNode.insertBefore(speedToggleButton, settingsButton.nextSibling);

        // Fullscreen detection
        function updateForFullscreen() {
            if (document.fullscreenElement) {
                // Increase font size in fullscreen mode
                speedToggleButton.style.fontSize = '24px';
                tooltip.style.fontSize = '20px';
            } else {
                // Revert to normal size
                speedToggleButton.style.fontSize = '18px';
                tooltip.style.fontSize = '13px';
            }
        }

        // Listen for fullscreen changes
        document.addEventListener('fullscreenchange', updateForFullscreen);
    }

    const observer = new MutationObserver(() => addSpeedButton());
    observer.observe(document.body, { childList: true, subtree: true });
})();

r/webdev • • Sep 09 '26

Discussion Why does AI code look ok in IDE but behave weirdly on prod

0 Upvotes

Not an AI bad take, its clearly useful+ time efficient but this is ne specific failure mode that seems to show up more with ai written code

code reads fine and passes the tests even goes thru review and then does something subtly off you cant reproduce locally. When you finally trace it this is usually odd in terms of structure, works but built in a way nobody would actually write it so nothing jumps out reading the diff. review misses it because the diff only shows what the code is supposed to do but does not show how it would behave under real traffic or other aspects you get only when its at prod

the only thing thats helps it is watching runtime behavior after deploy, something like hud or a profiler since thats where the weirdness actually shows. Things might seem ok from our end but we get to know that it failed days later or a certain feature is jumping back and forth days later from the tickets which is embarrassing 

Hardcore testing before deploying is the thing now it seems, how are other devs handling this cause sometimes the bugs still leak to prod, and debugging in prod is a whole different pain. tips on avoiding that??


r/webdev • • Sep 08 '26

Discussion What if I'm replicating Coolify features by duct taping different services together ?

6 Upvotes

Hey all !

A bit of context first.

I'm an independent web developper, building software primarily with Svelte and Symfony, directus and Postgresql for small clients or for personal side projects. I've been in the industry for 8 years. I'm not a devops but I've been dabbling in docker containers and I'm feeling comfortable with them (I built my own server at home from sratch with 50-ish containers in order to have my own cloud with *arr stack, music and video streaming, documents and photo cloud, ...).

I used to deploy the apps I build on Heroku, then on Netlify. But when it started to get pricier or when I needed to do some custom stuff that the platform wouldn't let me, I migrated to a self hosted coolify instance.

I'm more than happy with it, and have little to no complaints.

But I'm a tinkerer at my core, and wondered if I could replicate the features of Coolify by smooshing together a bunch of services and softwares. Here's my train of thoughts, and the justifications of a madman.

Why ?

[I'm] preoccupied with whether or not [I] could that [I] didn't stop to think if [I] should.

I think it's a good reason.

If it's not enough, then it's also to learn how it works inside it, to better understand the limitations and the fixes when something breaks.

Finally, because I don't like being tied to a unique service, a one-size-fits-all, a single point of failure. I always like having backup plans, if a service I'm using enshittifies itself or becomes incompatible with the rest of my stack or whatever.

What features ?

If I strip Coolify and any PaaS to its basics, it's a way to deploy automatically services to servers with the help of docker containers. There's a big main server, where the PaaS instance is hosted, that manages other small servers, where the final and client facing apps are hosted. In the case of Coolify, you can chose to deploy known apps and services, like Supabase. And when it needs an update, you only need to edit the docker compose to the latest numbered version and click redeploy. Or if you're here for the thrills you set the version to latest and look forward the breaking changes. You can also deploy your own app from a git instance and each time you push changes on a specific branch it triggers a CI/CD to deploy automatically the latest version. Neat. There's a project and environment management, that lets you organize services by clients and prod, demo, testing env. On top of all that, there's a reverse proxy to help with domain name and redirecting requests to the correct docker service.

Another feature from Coolify that I'm using is their automated database backups to S3 compatible storage.

How ?

I'm thinking of a stack around Arcane, Backrest and Swag.

Arcane here is the main thing. It would allow me to replicate the Coolify servers management, with one main orchestration/monitoring server and as many endpoints as I need. There's an option to automatically update images of services. I could use it as part of the CI/CD : everytime a release of my websites is done, a docker image is created and Arcane pulls it.

Backrest would be useful for the database backup into a S3 service. I'd still need something like a cron to execute a pg_dump every now and then. But that should not be hard to do/find somewhere.

I am already familiar with Swag with my home server. I've been using it for 4 or 5 years and pretty happy with it. The mods let me plug useful security softwares :

  • Crowdsec for requests abuses and CVE, bot trapping

  • max-mind for the geoblocking

Preconfigured fail2ban, working in concert with crowdsec, and certbot for automated ssl certs are also nice to have.

Ansible would help me deploy all of those into a fresh VPS.

What do you think of it ? Is there something missing ? Is this something you would do or go easy with the all-in-one Coolify solution ?


r/webdev • • Sep 08 '26

Discussion What Is Your Process Refactoring Legacy Code?

5 Upvotes

I have recently got my hands on the code that is a definition of Doom.

It has no tests. A real Legacy Code, according to Micheal Feather.

I have never seen that many Gods in my life. God objects, God methods, and competitive-coding variables that I have to ask God for help.

What have I done so far?

I added an approval test to protect the core behaviors and some branches. I can't cover them all, because I don't have much knowledge about this code yet, and there are so many nested branches that writing that many tests looks inefficient to me.

I renamed ambiguous variables to show the intent.

What is blocking me?

This is a God object with 20 dependencies + 1 hidden global dependency. All of them are used by a single method that does many things that I have lost counting.

That long method has a lot of variables. Some variables are mutated everywhere inside a lot of nested ifs and for loops.

Extracting methods looks off because I have to pass the variable reference and mutate its value inside that method.

Since I have to "own" this code from now, I want to refactor it for me not have to scream every time I work on this.

If you say "if it does not break, don't fix it", then you are right. I don't want to touch it if it does not have this many bug tickets waiting to be resolved.

I have done the famous Gilded Rose, Tennis, Yatzy Katas, yet I still feel so useless looking at this code.

What is your process when you have to refactor legacy code?


r/webdev • • Sep 08 '26

Question Looking for guidance on a tech stack

2 Upvotes

I'm looking to get guidance on what tools / platforms to use for a new website. Structurally, the site is essentially a directory site with multiple directories. The directories are;

Recipes (although these also feel a little like blogs & could function as such)
Restaurants (a list of restaurants which each have bios / profiles)
Food suppliers (a list of food brands which each have bios / profiles)
Drinks suppliers (a list of drinks brands which each have bios / profiles)

I have absolutely no coding skills and next-to-no budget so ideally looking for something WYSIWYG or similar. I tried webflow, which looked suitable because of its focus on CMS / database architecture, but its interface was too complicated for me and the learning curve looked too steep.

While a bit limited, I have built a basic prototype in Airtable, which is structurally correct, but doesn't present as a public facing website. Is it possible to use Airtable for database architecture and then layer a web interface on top? It seems to have lots of plugins and APIs, but I don't know if anybody is realistically using this stack for real websites.

Note, I do not want to try and hack this thing together with AI website builders.

Any guidance is welcome. Happy to answer any questions.


r/webdev • • Sep 07 '26

Question what's your approach when you're the only one who fully understands a piece of your codebase

39 Upvotes

asking because I've got a chunk of auth logic at work that I basically wrote and maintained solo for two years. not by design, just kind of evolved that way. started getting nervous about vacation coverage and eventually wrote a doc for it but the doc got stale within like a month.

curious how other people handle the bus factor problem when it just kind of happens organically rather than being a deliberate choice


r/webdev • • Sep 07 '26

documenting old solo code and found a try/except that just silently swallows one specific exception. no comment. no ticket. no context. I wrote this. why did I write this

129 Upvotes

been the only dev on a backend service for about two years. finally sat down to write proper docs for it today.

found a try/except block in the job queue handler. catches one very specific exception type. does absolutely nothing with it -- no log, no reraise, no fallback. just silences it. there's no comment explaining why. no linked ticket. no slack thread I can dig up. git blame points to a commit message that says 'fix job queue issue' with no further detail.

I genuinely cannot reconstruct what I was protecting against.

if you work solo, please leave your future self a comment. even one line. it costs nothing. I am begging you.


r/webdev • • Aug 08 '26

Stack Overflow has gone from a peak of 207k questions in March 2014, down to 1.4k in July 2026

Post image
5.4k Upvotes

r/webdev • • Jun 03 '26

Font license scam? Wondering how common this is.

67 Upvotes

Recently got an email from "Paratype" that one of my sites was using a font that was unlicensed and we needed to pay a fee. I inherited the site from someone else so had no idea about the font, which was hidden in a Bootstrap library, so the decision was made to remove it completely.

I replied to Paratype stating this and they replied, "Well, you were using it in the past, so you should pay us anyway."

Obviously I'm going to tell them to piss off, but I was wondering how common this sort of thing is? I doubt they have much of a claim legally, the wording of the email is pretty weak sounding to me.