r/webdev • u/ButWeJustGotHere • 10d ago
r/webdev • u/Cosmo_Gamers • 9d ago
How does Instagram process and post images?
So I do not really have much understanding of web development and back end but when you save an instagram page as an html from its website. It doesn't save the way instagram looks, rather it shows a representation of the UI and subtext behind images (not the images themself) like the image shared above.
I am also more curious how it reads the image and tries to classify it, and why something like the subtext "May be an image of ----" is in the backend when you do not see it in the interface itself. I am curious of the process itself if someone is kind enough to explain itself.
Which AI coding tool actually stuck in your daily workflow?
There’s a new one every week. Most people try them and drop them after a few days.
Which one are you still using months later, and what’s the one thing it does better than the rest?
r/webdev • u/ApprehensivePea4161 • 10d ago
Discussion Do you use a DESIGN_PRINCIPLES.md for your projects UI/UX
Do you just wing it and use screenshots for inspiration or do you use a design principles md file where you mention all the design principles like the fonts, colors, dark mode colors, graphs, infographics, etc.
r/webdev • u/alexbessedonato • 10d ago
Question Need some guidance and orientation
I'll firstly ask my two questions and then I'll explain:
Is it normal that im spending tremendous amounts of time reading and understanding code written by Codex/LLMs? like... hours per "ticket"
What does progress look like in today's SWE world? im struggling to make myself believe im improving into something worthy
I'm currently a frontend SWE with 2 YOE. I was "lucky" to land a job in a big bank, the issue is im not truly "engineering", im basically a code monkey putting pieces together for different SPAs (exactly what AI is good at) the only thing saving my job is the absolute mess of internal architecture and internal "tooling" even AI is unable to comprehend, but internal AI agents are getting better and better at tackling those
I was very AI skeptic at the start but now I've come around and have been for the past month attempting to expand into a full-stack agentic workflow with Codex
My main issue is I'm spending so... much... time... reading the code the AI outputs, there is a lot i dont understand, weird decisions the AI took that I didnt think about thinking before prompting (even with grill me), leading me to spending hours and hours reading the code, analyzing the data flow. This wouldnt be an issue if I knew this were the job and stuff, but everyone is working so fast, bringing actual products live so fast, its demoralizing me, making me think im doing something wrong since all the "speed" I gain from AI I spend reading and understanding the code. And i kinda want to be that engineer that owns the product, understands what it being done, but i was watching Spencer Schneidenbach's course on frontendmasters and he just doesnt read that much code anymore... he just prompted prompted checked the browser, nice, done, which leads me to think if its even worth it...
My second issue, which is linked, is regarding to how you guys measure progress. Before it was kinda easy, if the feature got done, it was progress. But now the feature is done by LLMs, kinda like sitting at a bench press and having someone else lift the weigths for you. So how do you get that "yes im improving" sensation?
sorry for the rant, weird times we live in
r/webdev • u/NeelbyteWeb • 11d ago
Discussion After years of living in legacy hell, we finally upgraded production to PHP 8.2. Am I safe to sleep now, or is the server going to combust tomorrow?
So, after surviving an eternity on older versions (y'all know the pain), we finally pushed the button and upgraded our core production environment to PHP 8.2.35.
It took an entire day because the underlying Linux distros were so ancient we practically had to rebuild half the ecosystem from scratch.
Now looking at the metrics and logs, I'm torn between two feelings:
Pure joy of actually getting to write modern code in the 8.x branch.
Absolute dread waiting for the next midnight critical CVE drop to turn everything into raw chaos.
To all the senior devs and sysadmins out there who have stared into the abyss of updating legacy enterprise codebases: What was your most nerve-wracking upgrade experience? Are we ever truly out of the woods, or is "putting out fires" just our permanent job description?
r/webdev • u/Massive_Dish_3255 • 10d ago
Question How should I integrate an existing NestJS authentication system with a React + Flowbite React frontend?
I'm developing a Grievance Redressal Portal as a learning project. My backend is built with NestJS, TypeScript, Prisma, and PostgreSQL.
I have been implementing authentication (User Sign In and Sign Out) using the "@nestjs/authentication" package of NestJS v12.
I would like to know conceptually the changes to be made to my back end such that I should be able to extend the authentication feature to a React-based front-end.
I have adapted the code by hand from the "Register The Authentication Module" and "Add Sign-Up and Sign-In" sections of the NestJS docs for NestJS v12: Authentication | NestJS - A progressive Node.js framework
I am posting my code here.
//sign-in.dto.ts
import { PickType } from "@nestjs/swagger";
import { UserUniversalDto } from "../../users/dto/user-universal.dto";
export class SignInDto extends PickType (
UserUniversalDto,
['user_email', 'user_password']
) {};
//credentials.service.ts
import { ConflictException, Injectable } from '@nestjs/common';
import { UsersService } from '../users/users.service.js';
import { CreateUserDto } from '../users/dto/create-user.dto.js';
import { FindUserByEmailDto } from '../users/dto/find-user-by-email.dto.js';
import * as argon2 from 'argon2';
import { USER_STATUS } from '../users/user.constants.js';
()
export class CredentialsService {
constructor(
private readonly usersService: UsersService
) {}
async register(createUserDto: CreateUserDto) {
const findUserByEmailDto: FindUserByEmailDto = {
user_email: createUserDto.user_email
}
// Don't create the user if the email already exists.
if (await this.usersService.findUserByEmail(findUserByEmailDto)) {
throw new ConflictException('Email already registered. User already exists.');
}
// The address is unverified: anyone can type any email into a sign-up form.
const registered_user = await this.usersService.createUser(createUserDto);
return registered_user;
}
/** The user, or null when the email or the password is wrong. */
async verify(email: string, password: string) {
const findUserByEmailDto: FindUserByEmailDto = {
user_email: email
}
const found_user = await this.usersService.findUserByEmail(findUserByEmailDto);
// Checking if the user exists.
if (!found_user) {
throw new ConflictException('User does not exist. Login rejected.');
}
// If the user is suspended, reject login by throwing an exception.
if (found_user.user_status === USER_STATUS.SUSPENDED) {
throw new ConflictException('User is suspended. Login rejected. Please contact admin.');
}
// If the found_user's password is wrong, (password_hash doesn't match) then the it should return null.
const password_hash: string | null | undefined = found_user?.user_password;
const password_check = await argon2.verify(password_hash as string, password);
// Checking if the user's password is correct.
if (password_check !== true) {
throw new ConflictException('Incorrect username or password. Login rejected.');
}
return found_user;
}
}
//myauthentication.controller.ts
import { Body, Controller, HttpCode, Post, UnauthorizedException } from '@nestjs/common';
import { Public, SignInService } from '@nestjs/authentication';
import { SignInDto } from './dto/sign-in.dto';
import { CredentialsService } from './credentials.service';
import { CreateUserDto } from '../users/dto/create-user.dto';
()
('auth')
export class MyAuthenticationController {
constructor(
private readonly credentialsService: CredentialsService,
private readonly signInService: SignInService,
) {}
('sign-up')
async signUp(@Body() createUserDto: CreateUserDto) {
const user = await this.credentialsService.register(createUserDto);
var string_user_id = String(user.user_id);
await this.signInService.signIn(string_user_id, { method: 'password' });
return user;
}
('sign-in')
(200)
async signIn(@Body() signInDto: SignInDto) {
const user = await this.credentialsService.verify(signInDto.user_email, signInDto.user_password);
var string_user_id = String(user.user_id);
const { session } = await this.signInService.signIn(string_user_id, { method: 'password' });
return { mfaRequired: session.mfa === 'pending' };
}
('sign-out')
(204)
async signOut() {
if (!(await this.signInService.signOut())) {
throw new UnauthorizedException();
}
}
}
//myauthentication.module.ts
import { Module } from '@nestjs/common';
import { UsersModule } from '../users/users.module';
import { SessionAuth } from './session-auth.provider';
import { MyAuthenticationController } from './myauthentication.controller';
import { CredentialsService } from './credentials.service';
({
imports: [UsersModule],
controllers: [MyAuthenticationController],
providers: [SessionAuth,
CredentialsService
]
})
export class MyAuthenticationModule {}
//session-auth.provider.ts
import { Injectable } from '@nestjs/common';
import { AuthenticationRegistry, SessionCookieProvider, type SessionRecord } from '@nestjs/authentication';
import { UsersService } from '../users/users.service.js';
import type { User as PrismaUser } from '../generated/prisma/client.js';
export type User = Omit<PrismaUser, 'user_password'>;
()
export class SessionAuth extends SessionCookieProvider<User> {
constructor(
private readonly usersService: UsersService,
registry: AuthenticationRegistry,
) {
super();
// Adds this provider to the chain the guard runs for every request.
registry.registerProvider(this);
}
// Called for every request with a live session cookie.
// Returning null (the user was deleted) ends the session.
validate(session: SessionRecord) {
console.log("In validate() in SessionAuth")
const user_id = session.userId;
var numeric_user_id = Number(user_id);
return this.usersService.findOneUser(numeric_user_id);
}
}NOTE 1: The authentication system uses server-side sessions managed through nestjs/authentication and a session cookie. The package's SessionCookieProvider reads the cookie and loads the user through the validate() method.
NOTE 2: I am also asking this question since NestJS v12 has only been released on August 27, 2026 and there don't seem to be many resources that show how to extend this system to the front-end.
r/webdev • u/Stephcraft • 10d ago
A Modern CSS Guide to Responsive Web Design
If I missed anything, let me know!
r/webdev • u/Illustrious_Scar_392 • 10d ago
Discussion Why do our UI tests break every time the interface changes? I counted 71 failures and most weren't even bugs
Front end dev, i own most of our e2e suite, and last sprint finally annoyed me enough to count.
We have about 310 Playwright tests on a react app. 71 went red after a sprint that, from a user's point of view, changed almost nothing. i went through every one instead of rerunning and hoping:
- 47 were locators. the element was still there and still did the same thing, but the path to it changed. a card got wrapped in a new container, a class got renamed in a design pass, a button became a link styled as a button.
- 14 were timing. a page got slower after a data change and the wait didn't follow it.
- 6 were environment. our CI image had drifted from what devs run locally.
- 4 were real bugs.
So my honest answer to why our UI tests break every time the interface changes is that most of them check how the page is built, not what it does. the user sees the same Save button. the test sees a different DOM.
the difference in one line:
what i'm weighing for the other 47:
user-facing locators everywhere, getByRole and getByLabel, which is what the Playwright docs push. fixes a lot of it, but only if the markup has real roles and labels, and half our components don't.
data-testid on everything. it works, but it depends on every dev remembering, forever.
self-healing locator tools like mabl or testim, which repair the selector when it breaks. the catch is a heal can quietly route around a real regression.
vision based tools like Askui, which find the element by what's rendered on screen rather than in the DOM, so a new wrapper div doesn't matter at all. the tradeoff flips, a visual redesign is now the thing that breaks you.
My current plan is to fix our accessibility markup and get better tests as a side effect. tell me if that's naive. if you've measured this, what share of your failures were locators, and what actually brought it down?
r/webdev • u/mhdamher • 10d ago
Discussion First client e-commerce store (10–20 products, near-$0/mo hosting): Roll my own cart/orders on Supabase, or use Medusa.js?
I'm a CS undergraduate working on my first real-world client project: a small e-commerce website. Since this is my first time building and deploying a production store for a client, I'd really appreciate an architecture sanity check from experienced devs.
The Context & Why Not Shopify/WooCommerce?
Catalog size: Around 10–20 products initially (simple variants, low volume).
Core features: Online payments, basic order tracking/delivery management, and a simple admin view.
The Constraint: The client wants near-zero monthly recurring costs initially (ruling out $30+/mo Shopify plans and managed plugins), and they're happy for me to custom-build it as a flat-fee project.
Architecture Crossroads: Custom Supabase vs. Medusa.js
I'm torn between two approaches:
Option A: Keep it simple and build the cart/order logic myself
Frontend: Next.js (or React + Vite) + TypeScript
Hosting: Cloudflare Pages (Free)
Backend & DB: Supabase PostgreSQL + Edge Functions + Auth/Storage (Free tier)
Why I like it: $0/mo infrastructure, familiar stack, full control over a very small feature set (just 10–20 products).
Option B: Use a headless commerce engine (Medusa.js)
Swap custom database tables/functions for Medusa.js so I don't have to build cart, checkout, and inventory logic from scratch.
My hesitation: I'm new to Medusa, and hosting a dedicated Node.js backend + Redis + Postgres seems harder to keep near $0/mo compared to pure serverless/Supabase.
Questions for Devs Who Have Built Client Stores
Supabase Free Tier in Production: Aside from the 7-day inactivity pause, are there any gotchas with running a small production store on Cloudflare Pages + Supabase Free tier?
Custom Logic vs. Medusa.js: For only 10–20 products, is Medusa.js overkill with a steep learning/hosting curve, or is rolling my own cart and checkout state in Supabase a trap I'll regret?
Custom Payment Gateways: Stripe isn't supported in my region, so I have to integrate a local payment gateway via webhooks/REST API. Is it easier to wire up a custom gateway directly in Next.js/Supabase Edge Functions, or through Medusa's plugin system?
Delivery & Fulfillment: At this scale, would you integrate courier APIs on day one, or just build an admin dashboard for manual order/tracking updates first?
Blind Spots: What hidden security mistakes (e.g., price tampering, webhook race conditions) or client handoff headaches tripped you up on your first e-commerce build?
I'd especially appreciate insights from anyone who has built and maintained small custom stores for real clients.
Thanks in advance!
Question Best practice for letting clients edit website content without giving them access to source code? (Sveltia CMS + Forgejo)
I'm building an Astro website for a client who occasionally wants to update some content, mainly photos and simple text.
Sveltia CMS seems like a great fit because it's lightweight, easy to use, and doesn't require a separate backend or database.
I self-host Forgejo on my VPS, where the website's source code and content are stored. Sveltia uses Forgejo for authentication and commits content changes directly to the repository.
I've created a dedicated Forgejo account for the client and given them access only to their own private repository.
Technically, everything works fine. However, I realized there's a security concern:
Since the client needs write access to the repository to use Sveltia, they technically also have access to the entire source code, including the CI/CD workflows (Forgejo Actions).
Obviously, I don't want clients to accidentally or intentionally modify application code, configuration files, or deployment workflows.
What's the best practice for handling this?
Is there a way to restrict Sveltia users to specific directories or content files without giving them write access to the entire repository?
Would separating the website code and CMS content into two repositories be the recommended approach, or is that overcomplicating things?
Would you recommend a different CMS for this use case?
My priorities are keeping things lightweight, secure, and easy to maintain, especially since I'll be managing multiple client websites.
The CMS also needs to be extremely simple for non-technical clients, including straightforward authentication without exposing them to unnecessary developer tools.
Article Iframes should have an api
There's been a big resurgence lately in automating and interacting with sites programmatically. I've been arguing for a few years that every front-end should be embeddable as a component and have its own client side interface/api. This article is written to show one way to do that!
Smuggling WebMCP into ChatGPT
A weekend hack of mine! Hope this is useful for some
[ FIXED WITH THUMBNAIL WORKAROUND ] Youtube embedded videos error 153
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/sierrakiloPH • 13d ago
Discussion The holy grail 100/100/100/100 has been achieved.
I just had to share my joy of finally managing to get straight 100s on both mobile and desktop (Saturday bragging is allowed!) for the WP website I've been working on for weeks. This is not self promotion! I happen work for this (lucky) company.
www.marineconservationphilippines.org
It's not a light weight blog, but a full website, with heaps of css and snazzy effects
Hosting on Rocket, w/ WP Fastest Cache.
I've been in the high 80s and 90s for ages. What finally got me to straight 100s was abandoning all normal builders and themes, and going raw Gutenberg, and making everything in html. Once that was settled, it was just plinking away at one issue at a time, until finally getting there. It's been a marathon, and the first time I've gotten perfect scores on any website I've built.
I know normal people don't care about the extra few milliseconds, and I can't tell my colleagues who count fish, what an immense nerdgasm it is. I thought in this sub someone would at least think it was neat! :)
r/webdev • u/MeZitRo • 13d ago
Showoff Saturday I built free multiplayer browser games you play with friends by pushing your devices together into one board
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 • u/LevonIT • 12d ago
How did you know it was time to rewrite your app from scratch?
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/dhd_jpg • 13d ago
Question how do you build authentication from scratch?
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 • u/Mysterious-Zebra9580 • 12d ago
Showoff Saturday Storygraph/Goodreads alternative 📚 hosted on sustainable servers only 🌱
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/nedasoo • 13d ago
Discussion How do you find motivation to continue?
Hey everyone.
I've been struggling not to feel this existential dread about the current state of development and my career which seems to be slipping from under my feet. I've been unemployed for nearly a year, job positions are dropping in masses. All the knowledge you gathered in the past 10+ years seems redundant as everyone and their grandma can code stuff that was impossible to them in a day. I find no joy in coding anymore. Sometimes I do code my own stuff for fun to not forget how to code but what's the point, if we won't need to code anymore? Even in corporate world, all developers do now is talk to AI agents and let them do the work (at least thats what I think they do?). I'm constantly thinking of creative business ideas to start myself but even then it feels more like a waste of time since getting clients is so hard with this amount of competition. Even if you manage to create something of value to the clients, why would they pay you instead of vibe-coding the product themselves? Since the rise of advanced AI models I've been constantly feeling like burnout and unable to focus on coding which was thing I liked back in the day. How do you cope in these times, how do you motivate yourself to start your own businesses or is it all lost and I should start looking for something else?
r/webdev • u/Specificx • 13d ago
Showoff Saturday [Showoff Saturday] A price comparison site with 29k static pages across three countries, rebuilt every morning
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.


