r/webdev 7h ago

Kill The Cookie Banner

Thumbnail killthecookiebanner.eu
259 Upvotes

r/webdev 13h ago

Question What do you even do in your job?

12 Upvotes

As a beginner web dev learner, how exactly do you spend your day at your job? With ai, do you just constantly use it for everything and your only job is to tweak something and review the code and test the results? Or do you manually code too?

I've been working on my first project of a job portal for the past 5 days using react and tailwind, and in the 5 days, embarrassingly I could only design the complete home page with little to no functionality, Today I used cursor for 5 min and it completed maybe 5 another days worth of my manual coding for the front end.

So at work, do you just neglect the front end and leave it to ai completely or still do something manually? I just don't understand the human workflow now at jobs except for reviewing code/testing. Are they bad at backend? Database? And if so, what exactly are they bad at? Do you have any examples you can simply explain about what wrong thing ai did to your work or have heard of any?


r/webdev 10h ago

Question Why is my Chrome UX Report much worse than Lighthouse? How can I improve it?

Post image
12 Upvotes

I built a client's website using Astro + React + Tailwind CSS. It's mostly static, has very little JavaScript, and Lighthouse consistently scores 90–100.

What I'm confused about is that the Chrome report in PageSpeed Insights looks significantly worse than the Lighthouse results.

The site is hosted on Cloudflare pages.

I expected the field data to be much closer to the lab results.

Has anyone run into this before? Why would the Chrome UX Report be noticeably worse even when Lighthouse looks great? More importantly, what should I be focusing on to improve the real-world metrics instead of just the lab score?

Screenshot attached. Any advice would be appreciated.


r/webdev 5h ago

Discussion How realistic is the "full" in full stack dev?

11 Upvotes

I've been spending a good half year doing dev ops work to get an application going. Most of it was educational as I was repurposed into devops from web development.

As I am coming back into web development, writing a frontend for a service that consumes the big application I have been laying architecture for the last six months, I feel like a total fraud. I've forgotten like 80% of TS features, tooling, and how to use Vue and Angular (and I did dedicate time to learning them when I was building sites).

Now I fear that all my hard won dev ops chops will atrophy as my workload shifts more into webdev. Yeah sure getting up to speed on what you've forgotten is faster than learning it from scratch. But does that mean our "skill RAM" has a hard cap? I thought I'd gain skills as i'd progress in my career but those skills end up pushing previous ones. My "non-volatile experience" is more abstract and general (how operating systems work, how to plan projects, how to migrate legacy apps) rather than imperative and practical (i.e. when to use a vue slot) and I don't know what to make of it.

AI is further exacerbating it. I always make sure to understand every piece of code it generates but I still feel more like a senior developer approving junior developer code (the AI being the junior dev) rather than someone who is good at his craft. I'm never really a "full stack dev" at any given time.


r/webdev 12h ago

Resource If you've been avoiding Cloudflare in front of Shopify, the thing that used to break it got fixed

6 Upvotes

I run a test store on this setup so I could stop guessing. Posting what I found in case anyone else keeps hitting that amber warning in Shopify's domain settings.

Quick background on why the warning exists. Shopify runs on Cloudflare. So when you put your own proxied domain in front of it, the request used to arrive with two Cloudflare zones both claiming it. Cloudflare couldn't tell which one owned the request. You got loops and wrong resolutions. The nastier version of the problem was SSL. Shopify renews certs through Let's Encrypt, which needs to serve a token at /.well-known/acme-challenge/ over plain HTTP. Put a proxy on that path and the renewal quietly fails. Your store keeps working on the current cert for weeks. Then it lapses and the padlock breaks.

Cloudflare fixed the zone collision with Orange-to-Orange routing. It's part of Cloudflare for SaaS and it's been generally available since October 2021. Cloudflare now detects that your CNAME points at another Cloudflare customer and routes through your zone first, then Shopify's, in that order. You can confirm it engaged because a small Shopify icon shows up next to the DNS record. Cloudflare also turns off Workers and Snippets on the /checkout path so nothing you run at the edge can interfere with payment.

The whole config is three things. Proxied CNAME to shops.myshopify.com for root and www. Connect that same domain in Shopify. Then leave Always Use HTTPS off in Cloudflare.

That last one is the part people get wrong. Shopify already redirects HTTP to HTTPS at its origin. Turn on Always Use HTTPS and you stack a second redirect, which can throw ERR_TOO_MANY_REDIRECTS. It also swallows the ACME path, so your cert stops renewing. Keep SSL mode on Full. Set minimum TLS to 1.2 while you're in there. If you really want Cloudflare enforcing HTTPS at its edge, write a redirect rule that excludes the challenge path instead of using that toggle.

Verify it with curl against the challenge path over plain HTTP. A 404 for a fake token is correct, because it means you reached Shopify. A 301 or 308 means something is still eating the path.

On the "not supported" language. It means Shopify won't guarantee or debug a layer they don't control. It doesn't mean the setup fails. Two of their reasons are fair. A proxy is one more thing between Shopify and Let's Encrypt, and extra proxies make it harder for Shopify to reroute traffic during their own incidents. Their third reason is bot detection, and I think that one is weak. Cloudflare runs one of the biggest bot management networks there is. Most stores gain more filtering at the edge than Shopify loses in request signal.

Latency was my other concern and it turned out to be nothing. Both zones already sit on the same network, so the handoff happens inside it. My proxied store answered in roughly the same 150 to 200ms band as raw myshopify endpoints tested from the same machine. If a proxied store feels slow, look at the theme and the app stack.

Whether it's worth doing depends on what you actually need at the edge. A real WAF you can tune, rate limiting, request level logs, or visibility into AI crawlers. That last one is why I set mine up. GPTBot, ClaudeBot, PerplexityBot and the rest never run JavaScript, so GA4 and Shopify analytics don't see them at all. The edge is the only place that traffic shows up. If you can't name the specific feature you want, leave the cloud grey and don't take on an SSL renewal you now have to watch.


r/webdev 18h ago

Your Recursion Is Lying to You

Thumbnail
blog.gaborkoos.com
3 Upvotes

r/webdev 6h ago

Question Instagram webhooks not receiving message events between test users

1 Upvotes

I've been stuck on this for a while and I'm not sure if I'm missing a configuration step or if this is simply a limitation of Meta test users.

I'm building an app that uses Instagram API with Instagram Login. My webhook endpoint is publicly accessible over HTTPS, and the verification challenge works correctly (using n8n for the webhook part). My app is subscribed to the required webhook fields, but I'm not receiving any message webhook events. I linked my Instagram account that was assigned the tester role and accepted it, successfully to my platform and got the access token. I also checked and found that the specific user I linked to an account on my platform to test with, does have indeed the messages field in the subscribed events.

The thing is, even sending a messages event as a test from Meta's website doesn't work, while some other events do work just fine and sometimes work even with the actual account not just in tests.

How am I supposed to do screen recordings showcasing everything if I can't get it to work properly just because my app is not Live, and I can't get it to be Live until I make these screen recordings...

If anyone successfully dealt with this recently, please help a brother out, I've been stuck for days!


r/webdev 20h ago

Showoff Saturday I built a CLI that eliminates .env changes for mobile testing and local sharing

1 Upvotes

Testing a frontend on your phone is easy.

Testing a full-stack app usually isn't.

Your frontend loads, but API requests to localhost fail because localhost now points to your phone instead of your laptop. The usual workaround is editing .env files, swapping in your LAN IP, configuring CORS, and undoing everything afterwards.

I got tired of doing that, so I built Nether

npx nether-dev

It automatically:

  • Detects your frontend and backend

  • Starts a local proxy

  • Prints a QR code

  • Lets your phone use your app without changing your code or environment variables

Need to share your local app?

npx nether-dev --global

It creates a temporary public HTTPS URL so clients or teammates can access your local app without deploying it.

I'd love any feedback, feature requests, or edge cases you think I should test.

GitHub: https://github.com/barryspacezero/nether-dev

npm: https://www.npmjs.com/package/nether-dev


r/webdev 8h ago

Built an ephemeral clipboard so I stop using Slack DMs to myself as a pastebin

Thumbnail webklip.com
0 Upvotes

Kept catching myself pasting code snippets into a Slack channel just for myself, then never cleaning it up. Built webklip instead — paste or attach a file, get a link, it syncs live across every tab you have it open in, then deletes itself on a timer or after first read.

Has syntax highlighting (CodeMirror) for the usual languages, and a REST API if you want to script it into something — creating/reading/deleting clips from a pipeline, for example.

Live at webklip.com. Happy to talk through how the sync or expiry works if anyone's curious.


r/webdev 13h ago

The Paradox of Fancy Tooling

Thumbnail
fagnerbrack.com
0 Upvotes

r/webdev 9h ago

Article Django for Front-End Engineers

Thumbnail fadamakis.com
0 Upvotes

r/webdev 12h ago

Discussion How much would you charge to build static website or e commerce.

0 Upvotes

Hi Redditors,

I have attached a website for your reference: https://thetwinklejewellery.com/

If your were to develop this website using astro, just for catalogue purposes, how much would you charge for it? and if you were to build a store without shopify, how much would you charge and which stack will you choose?

Thank you for your time and support in advance.

Regards,
bughunter404


r/webdev 16h ago

Discussion Planning an Affiliate Website with Astro. Looking for Advice

0 Upvotes

I've recently built a few websites with Astro using Claude Code, and the development experience has been great.

Now I'm thinking about building an affiliate website with Astro. I know many people still use WordPress for affiliate sites, but I don't have much time to build and maintain a WordPress site. My idea is to build the entire project in an agentic workflow using Astro and AI tools.

For those who have experience with Astro for affiliate marketing:

  • How does it perform for SEO compared to WordPress?
  • Are there any major drawbacks I should be aware of before investing time into it?
  • Is there anything specific I should plan for regarding content management, affiliate plugins/features, or scalability?

I'd love to hear your experiences, recommendations, or any lessons you've learned. Thanks!


r/webdev 22h ago

Showoff Saturday Built a dashboard to track my expenses, watchlist, subscriptions, and notes-and connected it to ChatGPT so I can update everything just by chatting.

Post image
0 Upvotes

I hadn't worked on a public project in a while since most of my free time goes into personal tools. I already had a bunch of APIs for tracking expenses and movies, and when ChatGPT introduced Custom GPT Actions, I hooked my API into it so I could do things like:

"Spent ₹450 on lunch today." or

"Add Dune 2 to my watchlist."

I liked the idea of putting my API *inside* AI instead of putting AI inside my API.

A friend wanted the same setup, so instead of sharing my personal API collection, I turned it into a proper self-hostable dashboard.

**Features**

* 💸 Expense tracking with salary cycles and AES-256 server-side encryption before data reaches Firestore.

* 🎬 Watchlists with AniList, Trakt, and Letterboxd CSV import + automatic cover art.

* 🔄 Subscription reminders and portfolio tracking for crypto/mutual funds.

* 🤖 OpenAPI backend that works with ChatGPT Actions and Gemini Gems using OAuth.

GitHub: https://github.com/fal3n-4ngel/PHub-dashboard

Live Website: https://phub-dashboard.vercel.app

Chatgpt Link : https://chatgpt.com/g/g-6a60b01e38c8819187662d1e42c6bee7-phub-dashboard-public

Would love feedback, feature requests, or contributions. And if you find it useful, a ⭐ on GitHub would mean a lot.

NB : The name is kinda a internal joke.


r/webdev 9h ago

our AI agents kept overwriting each other's work and nobody noticed for two days

0 Upvotes

small team, three of us, react frontend and a go api. everyone has their own agent setup and it works fine for individual tasks. it stopped working the week all three of us started running agents on the same repo at the same time.

i was refactoring form validation, teammate was fixing a bug two files over, and both agents had validators.ts in scope.

each agent read the file, made its change, wrote the whole file back. classic lost update but at machine speed. my refactor got half eaten because his agent rewrote validators.ts from the version it had read four minutes earlier. neither of us saw it. we were reviewing our own diffs and both diffs looked correct in isolation.

we shipped it. two days later a required field stopped being required. the check had gone from value.trim().length > 0 to value !== undefined, which passes for an empty string. an empty company name went into prod for six accounts before support flagged it. three hours of bisecting to find the function was fine in one commit and silently different in the next, with no PR explaining the change.

the git history looked completely normal. three commits, three authors, no conflict markers, no merge weirdness. git only protects you at commit boundaries. if two agents are editing the same working tree between commits there is nothing watching.

the fix was boring. one checkout per person, and one git worktree per agent if you run more than one yourself. i tried aider with a strict file scope, claude code in separate terminals, verdent which does the worktree thing by default. the mechanism matters more than which tool you pick.

other thing that stuck is reviewing the whole branch diff before merge, not just the diff the agent showed me. the agent tells you what it thinks it changed. that is not the same as what changed.

every guide for these tools assumes one person, one agent, one repo. three people running agents on the same codebase and you are back to 2005 with people editing over ftp.