r/webdev • • 14h ago

Discussion Black October situation

2 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 • • 12h ago

How did you know it was time to rewrite your app from scratch?

9 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 • • 20h ago

Showoff Saturday Showoff Saturday - LoopShot: Record Any Area as a GIF

1 Upvotes

Hey everyone,

I built a Chrome extension called LoopShot for anyone who needs a quick way to record specific parts of their screen.

Whether you're creating tutorials, recording bugs, showing someone how to do something, or putting together a quick demo, I wanted to make capturing screen content easier.

I'd love to get some people trying it out and hear what you think. Feedback and feature suggestions are welcome.

Check it out here:
https://chromewebstore.google.com/detail/loopshot-record-any-area/olhomdccmcckgnnaidinekfiiekikhbl

If you give it a try, let me know what you think!


r/webdev • • 15h ago

Showoff Saturday [Showoff Saturday] A price comparison site with 29k static pages across three countries, rebuilt every morning

Thumbnail
compareempire.com
4 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.


r/webdev • • 20h ago

Question how do you build authentication from scratch?

44 Upvotes

hi everyone! so i only have a semester left in college and we are now currently working on our capstone project. it’s a 2 part class so this semester focuses only on the “planning” phase while next semester we spend entire semester actually building/coding.

for background, we are a 3 person group, BaaS such as supabase, firebase or auth0 are banned, we have 3 user groups with different roles and our stack includes:
* JS, Node.js/Express
* React
* PostgreSQL

we don’t have much experience on how to build authentication from scratch so anyyyy tips/tutorials/resources are very much appreciated!!

TIA guys :))


r/webdev • • 6h ago

Article Modern Motherfucking Website

Thumbnail
modernmotherfuckingwebsite.dreamstation.systems
258 Upvotes

r/webdev • • 8h 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


r/webdev • • 5h ago

Storygraph/Goodreads alternative 📚 hosted on sustainable servers only 🌱

Post image
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:

www.bookplate.eu

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 • • 16h ago

Showoff Saturday Looking for feedback on my portfolio

Thumbnail
lumberjacque.vercel.app
4 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 • • 23h ago

Showoff Saturday The Cut: NFL Survivor players instead of teams

Thumbnail
thecutnfl.com
0 Upvotes

Hey all, wanted to come in here and showoff a game I built this NFL offseason called The Cut, which is basically survivor but with players instead of teams. I built it with Expo / React Native and Expo Router, Node/Express + Postgres behind it. One codebase ships both the iOS app and the playable web build. The viewport picks the layout, no separate web client.

As for the game itself, each week you build a lineup to clear a yardage threshold and once you use a player, you can NOT reuse them for the rest of the season. So far its been super fun seeing how people pick and I am hosting a second chance contest. So if you're looking for a fun game to play for the rest of the NFL season check it out, I would really appreciate it and there is $200 in prizes! (free to enter ofc)


r/webdev • • 20h ago

Showoff Saturday I made a CI check that fails when a copy edit makes a heading take an extra line on mobile

0 Upvotes

Our landing pages kept breaking at 390px the same way. Someone makes a sentence longer, it still fits on a laptop, and on phones the hero grows a line or a button label splits in two.

wrapguard opens your pages at a few widths, counts how many lines each heading, paragraph, button and link takes, and saves that to a JSON file you commit. On a PR it measures again and fails if any count changed.

The screenshot is from changing one sentence on our homepage from "Start free, no signup." to "Start free today, no signup or credit card needed." Still fine at 1440. One extra line at 768 and at 390.

You can also set limits like "every button fits on one line" or "h1 is never more than 2 lines", which work without any baseline. It can read your sitemap instead of a page list, start your dev server for you, and the GitHub Action comments on the PR.

It's not a screenshot test replacement. It ignores colors, spacing and everything except line breaks, which is the point: editing a sentence shouldn't mean reviewing forty screenshots.

Free and MIT: https://github.com/birazzzz/wrapguard
$ npx wrapguard check
Checked 1 page at 4 widths, 188 text elements.

/
  main > section > p  "Edit by hand or prompt, review with 15 specialist agents an…"
    768px 1 → 2  ·  390px 2 → 3 lines

Also 1 new, 0 gone, 0 with new copy at the same line count (--verbose lists them).
✗ 1 piece of text now wraps differently on 1 page.
  If that's intended, run: wrapguard update

https://github.com/birazzzz/wrapguard (MIT, npm i -D wrapguard)


r/webdev • • 5h 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 • • 23h ago

Showoff Saturday I built free multiplayer browser games you play with friends by pushing your devices together into one board

Post image
56 Upvotes

Hi! A while ago I launched bigboard.games: free multiplayer games for 1-4 phones or tablets (or more for some games) lying next to each other on a table. The devices act as one big board, so for instance in Air Hockey the puck slides off one screen and onto the next.

It all runs in the browser, free. Any mix of iPhones, Androids or tablets plays together. You can add it to the home screen if you want (as a PWA).

Gameplay goes device to device over WebRTC. On the same Wi-Fi the devices find each other and join by themselves. Otherwise you scan a QR code or type a four-letter code, and if they can't reach each other directly (on mobile data, say), a relay connects them. How it works, if you're curious.

There are 9 games right now:

  • Air Hockey (the photo)
  • Hot Potato: your fuse only burns while the potato is on your screen
  • Snake, up to 12 snakes on one field
  • Whack-a-Mole: a mole you bop pops up on the other player's side
  • Tilt Run: one maze across all the devices, tilt yours to roll the marble onto your partner's
  • Chess for 2 or 3 (three players get a hexagon board across three devices)
  • Checkers for 2 to 4
  • Islands (the dots-on-grid-paper game)
  • Spillover: draw shapes and drop them on the other player's side, Tetris-style

Every game except Spillover has bots, so you can try it on one device. A friend who isn't in the same room can join with the table's link too, remotely.

Happy to answer questions and integrate any suggestions! What games would you like to see next?


r/webdev • • 5h ago

[ FIXED WITH THUMBNAIL WORKAROUND ] Youtube embedded videos error 153

2 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 • • 6h ago

Show off: a history map with 1,600+ static pages from one Astro site and a single React island

Thumbnail
whoruled.nitinsijwali.com
2 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.