❌

Normal view

Where can I find cool design inspirations?

Hey everyone!

I'm looking for any websites or discussion forums that talk about design patterns, or really any cool features for web development. Etc, manipulating CSS in interesting ways to get cool designs, interesting things you can do with JavaScript etc..

I'm a bit tired of looking at AI responses and would love to hear if there's anything out there!

submitted by /u/International-Cap-13 to r/webdev
[link] [comments]

Showoff Saturday: a SQL parser in TypeScript's type system, so queries get typed with no codegen

TypeSQL type-checks SQL strings in TypeScript. The compiler parses the SQL itself and checks it against your schema type, so there are no generated files, no build step and no database connection.

// rows is { email: string; title: string | null }[] // The LEFT JOIN makes title nullable. const rows = await sql( `SELECT u.email, p.title FROM users u LEFT JOIN posts p ON p.author_id = u.id WHERE u.id = ${sql.param(userId)}`, ).execute(); // Compile error: column "emial" does not exist. Perhaps you meant the column "email"? sql("SELECT emial FROM users"); 

It supports PostgreSQL, SQLite, MySQL and MariaDB, and the runtime is under 3 kB with no dependencies. The main catch is that it needs TypeScript 7.1 or later (7.1.0-beta works), and very large queries can hit the compiler's limits (workaround-able using sql.as<>())

I used AI coding to build this. To keep the output honest, each bug fix gets a permanent test project, and the 100+ scenario tests run against real PostgreSQL, MySQL and MariaDB servers. I will try to keep it non-slop.

GitHub: https://github.com/ismailkarsli/TypeSQL Docs: https://typesql.karsli.net

submitted by /u/ismail5412 to r/webdev
[link] [comments]

Would this be a good career change for me?

I want to become a website developer. I currently have very minimal knowledge of HTML, CSS, JavaScript, and Next.js. If I dedicate 2 hours a day to learning, is it realistic to land a job within 1 to 2 years?

I’m from East Asia, where my current job pays less than $1 per hour, and as far as I know, software developers here are also paid very little. I’m hoping to find a better-paying job with a company in another country, ideally remote.

If you ran a company, would you hire someone like me? What skills and qualities would you look for?

submitted by /u/IcyOutlandishness752 to r/webdev
[link] [comments]

the web really is full of useless ai bots lol

some months ago i built and published a typical website collection site focused on design etc. as a side project where users can submit sites (nothing special, not adding a link here)

i have since just abandoned it, but it had a pretty easy domain and was discoverable through search engines. however, i disconnected the submission / contact form from it so it just throws an error on submit

funny to see, i get at least 4-5 emails per week with nearly the same message that my β€œform failed to sent with error code bla bla, that’s why iβ€˜m trying it this way bla bla, here’s the site” and its ALWAYS some kind of crap AI site promoting AI services, all of them looking worse than the other. one even included that it’s an AI agent writing on behalf of it’s owner.

the funniest thing is that the senders don’t seem to be related in any way, but the message pattern and wording is so similar. seems like they’ve all set up the same outreach agent template or something like that. dead internet theory is real

submitted by /u/chromata31 to r/webdev
[link] [comments]

Looking for an open-source E2EE browser chat with permanent rooms and invite links

I'm looking for an open-source, end-to-end encrypted (E2EE) browser chat that is simple, lightweight, and easy for non-technical people to use.

I found one project: https://chat.builtwai.com/ (Vanish), but I'm not entirely sure how trustworthy or secure it is.

Another one I really like is https://nullchat.org/. I absolutely love its clean, minimal black interface and simplicity. However, it's designed around privacy through temporary rooms and disappearing messages.

What I'd really love is Nullchat.org, but with an optional permanent mode:

  • No registration or accounts required.
  • Create a room instantly and generate a shareable invitation link.
  • The invitation link itself acts as the room access key. Someone clicks it and joins directly without manually entering a password.
  • Rooms never expire, even when nobody is online.
  • Messages never burn or automatically disappear.
  • The room and its entire message history remain available unless the creator explicitly deletes the room.
  • E2EE, so the server cannot read messages.
  • Option to set a maximum number of participants.
  • Clean, minimal black interface like Nullchat.
  • Works entirely in the browser without installing anything.

Essentially, the link should contain the room credentials securely. Anyone with that link can open it and start chatting. The room stays alive, and messages stay there, even if everyone closes their browser and returns weeks or months later.

I'd love to have this as an optional mode, while keeping the existing temporary, disappearing-chat functionality as the default for people who prefer it.

Does anything like this already exist? I'm especially interested in open-source projects, self-hosted solutions, or trustworthy hosted services.

Thanks!

submitted by /u/BrazzersAdmin to r/webdev
[link] [comments]

First time working on a startup that is 99% vibecoded. As a non-vibecoder, it seems impossible to work on.

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.

submitted by /u/tengoCojonesDeAcero to r/webdev
[link] [comments]

Intermittent ~900ms gap before first paint in mobile Lighthouse on both React and Astro. How would you isolate it?

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?
submitted by /u/techtsp to r/webdev
[link] [comments]

How do you organize your full-stack mono-repo?

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.

submitted by /u/KnowBearFeet to r/webdev
[link] [comments]

Developing serious website without any AI or libraries are still exist

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.

submitted by /u/thdr76 to r/webdev
[link] [comments]

[META] Is it even worth posting to /r/webdev at this point?

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

submitted by /u/IAmNotAnHipHopHead to r/webdev
[link] [comments]

Adding a blog to an existing HTML site in 2026

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.

submitted by /u/truecakesnake to r/webdev
[link] [comments]

Web Accessibility - Narrator bug logged.

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.

submitted by /u/code-dispenser to r/webdev
[link] [comments]

For experienced devs who now allow AI to write most of the code: what do you actually review, and what do you let slide?

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.

submitted by /u/TheOnlinePolak to r/webdev
[link] [comments]

Notes on getting native iOS web push working in Next.js without an Apple developer account

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.

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

submitted by /u/mrsoobong to r/webdev
[link] [comments]
❌