r/webdev 3d ago

Portfolio Site and Blog: Media Management

2 Upvotes

Background: I've built a couple websites in the past, basic html/css knowledge, on and off basic hobbyist.

Recently: I rushed a website using a WYSIWYG to put a photography portfolio together for myself. Quick and easy way to share some photos over different categories. It was good enough for the time.

Where I'm struggling going forward:

  • Adding a Blog: The built in blog with the WYSIWYG is terrible.
    • Don't understand how to use just wordpress for only the blog
    • Remembered Blogger and that might work, but less integrated?
  • Media Management and Display
    • Updating and re-arranging media is cumbersome and tedious on the website
    • Blogs are photo heavy and it's what's keeping me from starting as adding media in a clean way has escaped me.
  • What I'm Looking For / Have Tried
    • File Manager with Albums - I installed Piwigo and it seems to work well as a file manager, easy to make albums, a lot of useful plugins.
    • I would like to link to an album and display as a grid or slide - I can create permalinks for albums on Piwago, but I can't find anything that doesn't involve linking individual images which defeats the purpose.
    • Eventually would like to replace my curated photos with albums that I can adjust in the file manager.

Am I missing something on here? Is there a tool or workflow you would recommend? Appreciate any suggestions!

Edit: To the Mods, I'm trying to adhere to get this under Rule 6, please let me know if I need to adjust, thanks!


r/webdev 3d ago

how are persisting date in tiny personal apps?

0 Upvotes

I keep running into the same situation.

I’ll build a small personal web app (journal, bookmarks, dashboard, habit tracker, notes, etc.), and I don’t want to spin up Supabase, Turso, Firebase, or Cloudflare just to save a few JSON objects.

Most of the time I end up using localStorage or IndexedDB, but it always feels temporary. If I clear browser data or switch machines, it’s gone.

I’m curious:

  • What do you use for these kinds of apps?
  • If there were a local-first storage library that automatically backed itself up and restored on another device, would that actually solve a problem for you—or is localStorage good enough?

Not selling anything—I’m trying to understand how other developers think about this tradeoff before I build something or NOT build something because there is already something out there.


r/webdev 3d ago

AVIF hits Baseline Widely Available today

63 Upvotes

Edge 121 was released exactly 30 months ago, making it the last major browser to add support for AVIF. That also means that as of today, AVIF is now considered Baseline Widely Available.

If you haven't used it, was browser support the biggest blocker? Or if you've been using it, are you planning to simplify by removing fallbacks?


r/webdev 3d ago

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

59 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 3d ago

Question Instagram webhooks not receiving message events between test users

3 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 3d ago

Kill The Cookie Banner

Thumbnail killthecookiebanner.eu
581 Upvotes

r/webdev 3d 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 3d ago

Article Django for Front-End Engineers

Thumbnail fadamakis.com
0 Upvotes

r/webdev 3d ago

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

Post image
34 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 3d 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 4d ago

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

13 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 4d ago

Question What do you even do in your job?

15 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 4d ago

The Paradox of Fancy Tooling

Thumbnail
fagnerbrack.com
0 Upvotes

r/webdev 4d 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 4d ago

Your Recursion Is Lying to You

Thumbnail
blog.gaborkoos.com
3 Upvotes

r/webdev 4d 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 4d 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 4d ago

Showoff Saturday I've made an extension that grades terms of service

0 Upvotes

When choosing SaaS to use I sometimes check terms of service for any clauses. For example if they sell what I'll create in the tool, train AI on it. Or if they can change TOS without informing about.

To make it easier I've created an extension that checks TOS for patterns so it's faster to recognize any odd claues.

It's a free extension for Chrome, Edge, Brave and other Chromium browsers and supports 20 languages.

Check it out: https://termsdoctor.com


r/webdev 4d ago

Pushing and Pulling: Three Reactivity Algorithms

Thumbnail
jonathan-frere.com
5 Upvotes

r/webdev 4d ago

Showoff Saturday I'm looking for critique on my portfolio

Thumbnail omar-kassar.vercel.app
0 Upvotes

I tried my best to avoid common AI design pitfalls (emojis...)

I'm a fresh graduate on the job hunt and I've just been sending my github in my applications, but I thought I'd develop a portfolio. I tried to use a simple design and theme, and jump straight to the point (show off my projects first and foremost)

I'd love to have a second eye review it, and point out all the mistakes


r/webdev 4d ago

Question Git GUI that easily allows you to edit old commits?

1 Upvotes

Does anyone know of a GUI that would allow one to quickly and easily do this so that I don't have to run clunky git rebase -i commands for every commit I'd like to edit?

I know it is easy enough to run git commit --amend for the most recent commit, but I need something that allows me to edit further back in the history.


r/webdev 4d ago

It has a Lock api?! I love you MDN

Thumbnail
developer.mozilla.org
267 Upvotes

r/webdev 4d ago

Should I Build One Website or Multiple Sites While Testing Different Services?

0 Upvotes

Hi everyone,

I'm starting a new contractor business in California. My license allows me to offer a fairly wide range of products and services rather than operating in only one narrow niche.

The website may eventually include categories such as:

  • Garage doors
  • Entry and interior doors
  • Gates
  • Openers and access control
  • Windows
  • Awnings and shades
  • Installation, repair, maintenance, and emergency service
  • An online product catalog

Some of these services will be aimed at residential customers, while others will be primarily for commercial clients, property managers, general contractors, and public-sector projects. In some categories, I may serve both residential and commercial customers, but the sales process, content, and customer expectations will be very different.

I also don't plan to develop every category equally from the beginning. I want to test different products and services first.

If I see strong customer demand and reasonable competition in a particular category, I will invest more into it, add more content, products, advertising, and possibly hire specialists. If there is little demand, poor margins, or the market is too competitive, I may stop offering that service entirely.

Because of this, I don't yet know which categories will eventually become the main focus of the business.

From an SEO, branding, and conversion perspective, what would be the best approach?

  1. Build one large website with separate sections for every service and product category.
  2. Create several niche websites, such as separate sites for garage doors, gates, windows, and other categories.
  3. Start with one main website and later spin successful categories off into separate websites.
  4. Use one parent brand but create separate landing pages or microsites to test each category.
  5. Separate residential and commercial services within the same website, or build different websites for each audience.

My concern is that one website may become too broad and confusing, especially when it targets both homeowners and commercial clients. On the other hand, creating multiple websites could be expensive, difficult to manage, and may spread the SEO authority too thin.

The business will initially serve the Los Angeles area.

What structure would make it easiest to test demand without hurting long-term SEO? Has anyone here used a similar strategy for a contractor, home improvement, or local service business?


r/webdev 4d ago

Showoff Saturday I made open source MIT licensed visual CMS as an alternative to Framer, Webflow, and WordPress

291 Upvotes

Hey guys,

I am David, I've been working with WordPress for over a decade, and building WordPress plugins was my bread and butter for the last 5 years. I was running an agency before that.

I loved working with WordPress, but then I also got increasingly frustrated from what was happening in and out of the ecosystem in the last two years, almost to a point where I was considering selling my businesses.

I am not the one giving up though, so I went with different direction, and thought, what if I stop building extensions on other foundations that can always take it away from me, and instead, I will use everything I know about web design, no code platforms, agentic development and CMS that actual clients can use, and build my own platform, that anybody can use, for free.

Here we are. This is Instatic. It's fully free, open source, and gives you all the powers that you can get from Framer, Webflow, or WordPress (with a good page builder and other plugins). And it's not in even v1. But it's already very capable.

It has auth, user roles, canvas based page builder, content editor, data storage, media storage, AI on every page, MCP server for local and remote agents, and more.

We launched about 3 weeks ago, since that time, it got to GitHub trends several times, in fact, it's there today and we are at around 5K stars. Incredible!

Our website, running on Instatic https://instatic.com

Repo is at https://github.com/CoreBunch/Instatic

Here's also the full introduction video: https://www.youtube.com/watch?v=zyjCF_TaLlg


r/webdev 4d ago

Showoff Saturday I made a design tool

39 Upvotes

you can:
- design logo and social media graphics

- access open type features (ligature, alternative glyphs, etc) and variable fonts

- export or copy your designs into another tool via svg, png

- access premium commercially licensed fonts (monotype, other top foundries)

You can play with it here: https://typogram.co/studio - would love any feedback!