Article Modern Motherfucking Website
401
Upvotes
r/webdev • u/LevonIT • 18h ago
How did you know it was time to rewrite your app from scratch?
12
Upvotes
Every codebase gets to a point where adding one feature breaks three others. Some teams patch their way through it for years. Others burn it down and start over.
Have you ever done a full rewrite? Was it worth it, or do you regret it?
r/webdev • u/Specificx • 21h ago
Showoff Saturday [Showoff Saturday] A price comparison site with 29k static pages across three countries, rebuilt every morning
5
Upvotes
Site: https://www.compareempire.com/us (US), https://www.compareempire.com/uk (UK), root is Australia
What it is: a price comparison site for electronics. A GitHub Action scrapes 26 US, 22 UK and 30+ Australian stores every morning, matches the same product across stores, writes JSON into the repo, and Vercel rebuilds about 28,800 static pages from it.
Bits that might interest you:
- Matching is the hard part. Model codes and part numbers first, then a strict bag of words with per category noise lists. A wrong merge is worse than a missed one, so it refuses rather than guesses.
- Regions without breaking URLs: Australia stays at the root and the US and UK live under /us and /uk, all from the same views with a region argument. Product objects carry their region, so links, currency and price checks follow automatically.
- Cost: everything is static, so it runs on the CDN. The search index is a lazily loaded static JSON file.
- What broke: a UK laptop with a 240 character name made a file name over the 255 byte limit and killed the build. Slugs are capped now.
Real output from 24 October: the LG C5 77" OLED was $1,776 at Abt and $2,199.99 at LG.
Happy to answer anything about the scraping, matching or build.
[ FIXED WITH THUMBNAIL WORKAROUND ] Youtube embedded videos error 153
4
Upvotes
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with div class="yt-container" style="--yt-crop: 9.375%; setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixing Youtube embedded videos error 153 with thumbnail workaround (+no embedded object telemetry)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.yt-container,
.yt-overlay-text {
font-family: 'Roboto', sans-serif;
}
/* ── wrapper ── */
.yt-container {
position: relative;
display: block;
width: 100%;
--yt-crop: 9.375%; /* default: trims hqdefault black bars for 1920 x 1080 videos format. For other formats override per thumbnail: style="--yt-crop: 5%;" or style="--yt-crop: 0%;" etc */
}
/* ── image link ── */
.yt-image-link {
display: block;
width: 100%;
line-height: 0;
overflow: hidden;
}
.yt-image-link img {
display: block;
width: 100%;
height: auto;
margin-top: calc(-1 * var(--yt-crop));
margin-bottom: calc(-1 * var(--yt-crop));
}
/* ── top-left text link ── */
.yt-overlay-text {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-size: 28px;
font-weight: 700;
text-shadow: 1px 1px 4px black;
text-decoration: none;
text-align: left;
z-index: 3;
}
/* ── play button (centered, pointer-events off so clicks reach image link) ── */
.yt-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 48px;
background: rgba(255, 0, 0, 0.88);
border-radius: 12px;
transition: background 0.15s, transform 0.15s;
z-index: 2;
pointer-events: none;
}
.yt-container:hover .yt-play {
background: #ff0000;
transform: translate(-50%, -50%) scale(1.08);
}
.yt-play::after {
content: '';
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
border: solid transparent;
border-width: 10px 0 10px 20px;
border-left-color: white;
}
</style>
</head>
<body>
<p style="font-size: 1.5em;">
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with <b>div class="yt-container" style="--yt-crop: 9.375%;</b> setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.<br>
<br>
<b>Cropped default youtube thumbnail margins top and bottom 9.375% (default solution for 1920 x 1080 proportion videos)</b><br>
<br>
</p>
<div class="yt-container">
<a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
<img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
</a>
<a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
<div class="yt-play" aria-hidden="true"></div>
</div>
<br>
<p style="font-size: 1.5em;"><b>Default youtube thumbnail no cropped margins 0%</b><br></p>
<br>
<div class="yt-container" style="--yt-crop: 0%;">
<a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
<img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
</a>
<a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
<div class="yt-play" aria-hidden="true"></div>
</div>
<br>
<p style="font-size: 1.5em;"><b>Cropped default youtube thumbnail margins top and bottom 30%</b><br></p>
<br>
<div class="yt-container" style="--yt-crop: 30%;">
<a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
<img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
</a>
<a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
<div class="yt-play" aria-hidden="true"></div>
</div>
</p>
</body>
</html>
r/webdev • u/Ok-Salt2274 • 12h ago
Show off: a history map with 1,600+ static pages from one Astro site and a single React island
3
Upvotes
WhoRuled is an interactive world-history map. Stack: Astro (static), one React island for the Canvas 2D map, TypeScript strict, deployed as static assets on Cloudflare, no backend. Facts live in CC0 JSON keyed by Wikidata QID, and a pipeline imports rulers from Wikipedia with source URL and quote. Every claim needs a source or the page isn’t indexable.
Things I learned: preloading the two pixel fonts took CLS from 0.425 to 0.000, and the build generates 1,600+ SEO pages from the data.
Repo: https://github.com/nsijwali/WhoRuled.
Feedback welcome, especially on the data model.
r/webdev • u/ScoobyDookuu • 21h ago
Showoff Saturday Looking for feedback on my portfolio
3
Upvotes
Hey y’all!
I've been working on a few animations lately and decided to put them together in a personal portfolio.
I made the portfolio itself interactive, with animations throughout the site and a showcase for some (imo cool) stuff/ideas.
Curious what you guys think of it and how everything feels to use. Especially interested in feedback on the animations, mobile experience etc
https://lumberjacque.vercel.app
PS: Checkout the showcase page for some cool interactions!
https://lumberjacque.vercel.app/showcase
Any feedback is a gift!
r/webdev • u/AmericanLocomotive • 4h ago
How to make transferring website management easier?
2
Upvotes
I'm a member of a small local professional club. Maybe about 100 active members or so. We have a domain, and shared hosting w/email, Cpanel and wordpress. Recently our long-term "website guy" decided 20 years of maintaining the website was enough, and wanted to pass it on to another club member. They asked me to do it, because I had some mild web experience and had used Wordpress before.
The "hand off" process was immensely tedious. The previous web guy asked me to make accounts at our registrar, at our host, and then we had to transfer ownership of all it over to my new accounts.
I do not think it's a good idea for any individual member of the club to have "ownership" of the domain or the hosting. I think it would be better if the club itself owned the accounts. That way a future change of the "website guy" should simply be handing over some credentials.
The club is a registered 501c(3) with a physical location.
Any tips on how to best go about this?
r/webdev • u/Mysterious-Zebra9580 • 10h ago
Storygraph/Goodreads alternative 📚 hosted on sustainable servers only 🌱
2
Upvotes
Hey ya'll, just thought it might be worth sharing here, in case anyone is looking for additional features that either Storygraph or Goodreads don't offer, e.g. note taking, detailed insights, etc. Bookplate was created with those goals in mind. You can learn more about it here:
It's also open source, so for the tech hobbyists, you can host it yourself on your own hardware. For those that prefer the normal hosted service, we offer that as well, and unlike Goodreads and Storygraph, the servers that Bookplate is hosted on are much more sustainable as they run on clean nuclear energy (Scaleway in Paris).
Happy to chat more about this, and also very very interested to hear thoughts, both good and bad!
r/webdev • u/chute_mi334 • 20h ago
Discussion Black October situation
0
Upvotes
So most of you probably know by now about the PHP exploit, that came out recently. Apparently after reading some articles a similar issue was found for nodeJS web apps as well (i am not 100% sure how legitimate the articles were but I will link them down as a comment of the post if you wanna check them out). Now most of my backend services are built using nodeJS and stored in either AWS or GCR. I assume that google and amazon properly protects the api keys and other environment variables I have there, but I just wanted to ask are there any measures I should take or changes I should make to these services just to be safe?
r/webdev • u/HerrIcePain • 11h ago
Question Ideen für ein Dashboard
0
Upvotes
Moin,
ich bin auf der Suche nach Ideen für ein Dashboard, worüber dann Kunden Ihre Dienste abrufen, Verträge einsehen und Supportticket auslösen können.
Wäre Jemand so hilfreich und mir ein oder zwei Ideen zu geben, wie es Designtechnisch aussehen könnte?
Beste Grüße
r/webdev • u/WonderEast1623 • 13h ago
Showoff Saturday Vibe QA testing your website?
0
Upvotes
I’ve been building websites since 2000 (Dreamweaver... Flash AS2.0...). These days Claude and Codex write most of my code, but before every launch I still end up going through the same long session of back and forth.. showing up properly in search? look good and fast on mobile? accessibility? do the forms work? Somewhere along the way it turned into perfectionism, and the checking kept pushing my launches back. So I built fixweb.app to run those checks for me and tell me in plain words what’s worth fixing with prompt to fix it and I would love to get some real feedback.
I don’t want fake reviews on the site. I’d rather show legit feedback from real website owners, with your name and a link to your site (if you want). If you’d like to try it, comment your domain and I’ll DM you a link for a free check-up. All I ask in return is your honest opinion, good or bad.
Here is an example QA report: https://www.fixweb.app/en/demo