Recently I've joined a project with a group of 4, that has been super frustrating to work on.

So far whatever we have, has been 99% vibecoded from the ground up, and that 1% is me. At first I thought this would be fun, we would be making something in a weeks time, but like a month passed and we haven't really moved anywhere. There's literally a login screen that works (no Oauth) and some fancy UI, but that's it. Trying to debug or add new features by hand is impossible, because the code is not readable by humans. There's like 50 lines in the .env file, yet nothing works.

With all this in mind, the absurd thing is that it takes a full minute to deploy any changes to production. In comparison, my hand-crafted Django platform, with real users and tons of features, deploys in seconds.

Don't get me wrong, I am all for using AI to build projects. It's a very powerful tool and I use it to help me code all the time. But in my opinion, to make vibecoding work, you have to know the project structure and the architecture of a website, because then you can avoid massive tech debt in the future.

I can already tell that this experience will be funny to look back on.

I'm comparing a React site against an Astro rebuild of the same page. In mobile Lighthouse, both sometimes sit blank for a long time before first paint, and other runs of the exact same page paint fast.

Setup: Lighthouse 13.0.1, Chrome 156, cold loads in separate fresh profiles, default mobile simulated throttling. I kept the traces, network logs and filmstrips.

Here's one matched pair (observed trace timings, not Lighthouse's simulated FCP):

Astro

• CSS done: 203ms
• Last preloaded font done: 286ms
• DOMContentLoaded: 426ms
• First Paint: 1301ms
• FCP: 1320ms

React

• CSS done: 573ms
• Last preloaded font done: 494ms
• DOMContentLoaded: 584ms
• First Paint: 1525ms
• FCP: 1540ms

The filmstrips stay blank right up to those first-paint times. Once painting starts, Paint to DrawFrame is only 10-13ms. So on Astro there's close to 900ms where everything's loaded and nothing shows up.

I don't see a long task on the renderer main thread covering that gap, though I know that doesn't prove the browser was actually idle.

I wondered about animations, so I ran one normal-motion vs reduced-motion pair on the Astro page. Both came back fast (FCP 318ms and 311ms), and the normal one still had its reveal animations, so that told me nothing either way. Desktop loads and a different page also painted quickly in the runs I checked.

One more thing: the fast traces show Scheduler::SetDeferBeginMainFrame events with short true-to-false spans. But the slow traces were captured with Lighthouse's default trace categories, which don't include those scheduler events, so I can't compare yet.

Has anyone run into this? A few things I'd like to figure out:

1. How do I tell whether the page is causing the delay, or whether it's Chrome's scheduling or something in the test environment?
2. Which trace categories or events would show why the first paint starts late, and not just that it did?

Just as the title asks. I am curious how you organize the various parts. I have been on teams that both do and don't use mono-repos. For the ones that did, there has been a wide variety of choices across the app and how it's organized.

Just as a small example: naming conventions. Sometimes the the repo is named for the app (let's say "OurApp") and the various parts of the file structure are "OurApp-", like OurApp-ui and OurApp-api and OurApp-db. Or there might just be a top-level folder for "frontend", "backend" and "database", etc.

I'm not talking about a debate of mono-repo vs. multi-repo approaches, but in a mono-repo, what are some of the code organization techniques you've liked and disliked in your experience?

UPDATE: The community turned out! Thanks for sharing your thoughts in the comments. I appreciate the discussions.

Websites built from scratch (no AI, no frameworks or libraries) that are more than just simple toy projects are becoming very rare, but i want to remind you guys that they still exist.

Three years ago, I posted this https://www.reddit.com/r/webdev/comments/161q3w8/i_coded_a_site_from_zero_without_any_libraries_it/, and that website is still being actively developed. I haven't used any AI-generated code or external libraries in all this time, even as it has become more complex with features like accounts, articles, comments, reviews, and just a few weeks ago forums.

I think the main reason why i stick with this is because features aren't planned in advance, they're just built bit by bit as the content needs them. I won't deny if AI could do better, but with a spread-out timeline and an unknown end result, it's easy to skip using AI as development mostly consists of small, precise tweaks with no definitive end goal. Coding also only small portion of time spent on developing the site so i don't feel the need to optimize it.

Anyway this is just me saying that i'm still here, not everything in this space become AI.

*note : i'm not saying that this is the better way to develop website. I just enjoy what i already used to do, and didn't bother to change it.

Looking at the posts in /hot they're just filled with AI-generated comments, which just aren't removed by moderators.

Is it even worth posting here when reading the comments they're just AI slop followed by more AI slop.

Do the users who submit interesting topics even realize they're just replying to AI comments?

Looking at this post for example, there's this user whose comments all follow the same pattern: start with tbh/ngl and most of the time introduce an em-dash in the middle of the comment. In the same post you have this other user whose comments all have 3-4 paragraphs, and just have an off tone. Another user and same story: 3-4 paragraphs, an off tone, weirdly worded comments which end up summarizing the topic they're replying to.

Another comment

I want to add a blog to my site to jump on this GEO train. WordPress feels like overkill, and I've seen some plug-and-play solutions that would live on a subdomain or outside the main directory, which doesn't sound good for SEO/GEO.

I don't want to vibe code as there would be multiple people publishing, and not all of them are tech savvy.

Anyone has a good way to solve this? I know I should've started blogging already, so really want to solve this quick. Some sort of headless CMS could work, but the ones I looked at come with way too much bloat that I don't need. Hope someone here went through the same thing.

If, like me, you have the Narrator screen reader in your test matrix, you may want to check your disclosures.

I’ve found that when a disclosure button uses aria-expanded together with aria-controls (which had, or has, limited support in JAWS), Narrator sometimes doesn’t announce the expanded/collapsed state in Edge or Chrome. It’s fine in Firefox.

If you omit aria-controls, Narrator announces the state correctly in Edge and Chrome.

I’ve reported this to both Microsoft (via Feedback Hub) and Chromium (via the issue tracker).

Personally, I wouldn’t add aria-controls to disclosures unless you have a specific need for it.

Hopefully that’s useful to some of you.

I’ve been a casual developer across many languages for ~10ish years but got a degree in mechanical engineering. I pivoted and started an analytics engineering job around 3 years ago and starting doing web development for side projects.

Lately my team has leaned heavily into AI-assisted programming primarily using Claude Code to build React Apps in Databricks. These are primarily CRUD apps but sometimes they do write back to our ERP so they affect the business greatly. The AI writes most of the code now, and I’m trying to figure out where my review time is best spent.

Options I’m weighing:

• Full line-by-line review (quality, readability, structure)
• Mainly reviewing the tests, and trusting the code if the tests are solid
• Testing through the UI, then checking the DB/tables to confirm data was written correctly

Does code readability still matter if AI is the one maintaining it? What has bitten you when you skipped review? If you have a concrete review checklist, I’d love to see it.

Ran into a bunch of weird quirks wiring up web push on iOS for my habit app, figured I'd write down what actually worked so nobody else wastes a weekend digging through stale threads.

You don't need a $99 Apple developer account or Capacitor/Cordova to send push notifications to iPhones anymore. Web push works on iOS 16.4+, but Apple has specific constraints that aren't obvious until you test on a physical device:

1. Safari hides PushManager unless the PWA is installed

In regular Mobile Safari, window.PushManager is literally undefined. It only exists when the web app is running in standalone mode (display-mode: standalone). If you just check for "Notification" in window, your UI will break on iOS. You have to check for standalone mode first, and if they're in Mobile Safari, show instructions to tap Share -> "Add to Home Screen".

2. No silent background pushes

If your service worker receives a push event and doesn't call self.registration.showNotification(), Apple will quietly invalidate the device subscription. Every push must result in a visible notification.

3. Cleaning up dead subscriptions

When someone deletes the PWA icon or turns off notifications in iOS Settings, Apple's APNs endpoint returns an HTTP 410 Gone or 404 Not Found on the next send attempt. If your backend doesn't delete those database rows immediately, you'll end up hammering dead endpoints on every broadcast.

4. Service worker caching quirks

Make sure your next.config.ts sends Cache-Control: no-cache for /sw.js. If the browser caches the service worker script aggressively, updates to your push handler won't ship to installed PWAs without manual cache clears.

The Implementation

1. Service Worker (public/sw.js)

self.addEventListener("push", (event) => { let payload = {}; try { payload = event.data ? event.data.json() : {}; } catch { payload = {}; } const title = payload.title || "DROPPDD"; const body = payload.body || ""; // Guard against protocol-relative open redirects (//evil.com) const url = payload.url?.startsWith("/") && !payload.url?.startsWith("//") ? payload.url : "/checkin"; // Mandatory on iOS: showNotification must be called event.waitUntil( self.registration.showNotification(title, { body, data: { url } }) ); }); self.addEventListener("notificationclick", (event) => { event.notification.close(); const targetUrl = event.notification.data?.url || "/"; event.waitUntil( self.clients.matchAll({ type: "window", includeUncontrolled: true }).then((windows) => { for (const client of windows) { if ("focus" in client) { return client.focus().then((focused) => { if (focused && "navigate" in focused) return focused.navigate(targetUrl); return self.clients.openWindow(targetUrl); }); } } return self.clients.openWindow(targetUrl); }) ); }); 

2. Cache-Control in next.config.ts

import type { NextConfig } from "next"; const nextConfig: NextConfig = { async headers() { return [ { source: "/sw.js", headers: [{ key: "Cache-Control", value: "no-cache" }], }, ]; }, }; export default nextConfig; 

3. Backend delivery with Node web-push (src/lib/push.ts)

import webpush from "web-push"; webpush.setVapidDetails( process.env.VAPID_SUBJECT!, process.env.VAPID_PUBLIC_KEY!, process.env.VAPID_PRIVATE_KEY! ); interface PushSub { id: string; endpoint: string; p256dh: string; auth: string; } export async function sendPush(subscription: PushSub, payload: object) { try { await webpush.sendNotification( { endpoint: subscription.endpoint, keys: { p256dh: subscription.p256dh, auth: subscription.auth }, }, JSON.stringify(payload) ); } catch (err: any) { if (err.statusCode === 404 || err.statusCode === 410) { // User uninstalled or revoked permission: prune immediately await prisma.pushSubscription.delete({ where: { id: subscription.id } }); } } } 

The code is from my habit & wager app, droppdd.

• GitHub repo: https://github.com/nunchimangchi-dev/droppdd
• (Check public/sw.js, src/lib/push.ts, and src/app/profile/PushSettings.tsx for the full setup).
• Live build: https://droppdd.alwaysgivealwaysget.com
• (Note: The live site is currently capped at a 33-user closed beta while I dial in the reminders, but the repo is open if you want to inspect the files or run it locally).

Rock on party people. Happy to answer questions about the permission flow, VAPID key generation, or scheduling triggers.

Each of pages have like 20-25 photos ,2Mb<size<5Mb.
The website loads only when user explores the that pages which makes the website looks bad(due to the loading animation)

im trying to get better at debugging production issues faster. right now when something goes wrong i kind of just grep through logs hoping something jumps out, which works eventually but feels inefficient

curious what other backend devs actually check first. like do you have a mental checklist you run through? specific log patterns you look for? or do you mostly rely on monitoring/alerting tools to point you in the right direction?

our setup is pretty basic (node backend, postgres, some redis) and im wondering if im missing obvious stuff that would speed up the "wtf just happened" phase

I feel this may seem like a very strange question to ask given the circumstances, and hopefully this isn't breaking any rules. A few days ago I had a falling out with someone who happened to be hosting my website on their rented server. It's a very basic portfolio website with HTML and some JS for dynamically generating HTML elements from a Json file.

I'm pretty decent in HTML and JS but by no means a web developer, it's simply not my career. This means I can make a decent website but figuring out how to host it is beyond me. Are there any services that simplify this sort of thing, or is the process of renting and setting up my own basic server for a website straightforward? Github Pages maybe? Forms etc are not required.

I also own my domain, but it's currently still set up to link to that server. Once I get my own sorted out, will I have to worry about the two conflicting?

Due to a growing influx of questions on this topic, it has been decided to commit a monthly thread dedicated to this topic to reduce the number of repeat posts on this topic. These types of posts will no longer be allowed in the main thread.

Many of these questions are also addressed in the sub FAQ or may have been asked in previous monthly career threads.

Subs dedicated to these types of questions include r/cscareerquestions for general and opened ended career questions and r/learnprogramming for early learning questions.

A general recommendation of topics to learn to become industry ready include:

• HTML/CSS/JS Bootcamp
• Version control
• Automation
• Front End Frameworks (React/Vue/Etc)
• APIs and CRUD
• Testing (Unit and Integration)
• Common Design Patterns

You will also need a portfolio of work with 4-5 personal projects you built, and a resume/CV to apply for work.

Plan for 6-12 months of self study and project production for your portfolio before applying for work.

https://david.alvarezrosa.com/ Hope you like it :)