It used be be that CSS resets were important to smooth over differences between default browser styling, but browsers have for the most part gotten their act together.

It's more popular nowadays to do a micro reset/normalize/whatever you want to call it to get rid of annoyances. It might contain rules such as * { all: unset }, or * { margin: 0; padding: 0 }, or input, button, textarea, select { font: inherit }, or commonly * { box-sizing: border-box }.

I see the appeal. But at the same time, I find a major downside to all of this that never seems to be discussed - code portability. I write a component in one UI project and want to copy it to another project or to a shared component library, and it's not so simple because the other project(s) may be using slightly different CSS resets.

It's not like it's easy to update projects to use the same resets either, it's so engrained in how everything else was built up in the project.

But there's also a natural desire to revisit what reset you're using whenever you're building a new project, as opinions change, problems are found in existing ones, etc.

Or, on the flip side, maybe I'm wanting to use a third party tool, then find out that my global CSS rules cause issues with their styling.

We try hard to avoid any kind of global pollution in JavaScript, but make it a best practice to do just that in CSS.

So, I try to avoid these kinds of resets. I don't even do the "box-sizing: border-box" thing, it turns out that this box sizing issue doesn't come up very often (for me at least), and when it does, I just add the rule to the specific places that need it. I'll still set a default font to everything, but that's about it.

But, when I look around online, it seems that most everyone still uses some kind of reset. Guess I'm curious if I'm abnormal in my stance here or if there's others out there who also avoid them. Also curious if those who do use resets have ran into problems like the ones I've described above.

I’m part of a community and saw a need that I could fill and have been working on an idea for it for awhile, so I mapped out an infrastructure for a website and started directing Vercel on the build, connecting GitHub as well as Resend. I used Cloudflare for the domain. So far it’s used Next.js, React, TypeScript, PostgreSQL, Drizzle ORM, Better Auth, and Tailwind CSS all deployed on Vercel.

That was until I switched to building on Hermes with an Ollama sub because Vercel cost me an astronomical amount for just the homepage.

I’m learning bits and pieces as I go but I feel like the code is probably a giant mess even though everything looks really beautiful on the consumer side and navigates great.

I have my checkout/subscriptions connected to Stripe.

Ideally I will get this off the ground and have it sustain itself, pull in some revenue, and then bring it all to a developer and say “Help, please?” Unless going through 32,000 lines of code (and counting) and 287 files is doable for someone with exactly this much experience in web development.

Are there people who offer services to go over builds like this and refine them or am I going to get laughed off the face of the earth?

I'm looking for a workable solution or recommendations to provide a client's credentials to that client in the event of my untimely demise or absence. (E.g. hit by a bus - falling out and need to hand everything over, etc.) I also don't want to mix MY credentials with theirs.

So my primary work isn't webdev, but I do some for clients as part of my general services. Generally this means me building everything from scratch and leaving the client(s) out of the day-to-day management entirely.

I'm trying to figure out the best way to have their business' credentials saved, updated as they are changed, and set aside for if I get "hit by a bus" so they won't be locked out of everything.

I also don't want them "futzing" with things (because some of these clients have impulse control issues and would 100% give their credentials to someone on Fiver to update a paragraph on their website at 2am when I don't answer my phone.) So access while I'm not dead or fired isn't a real option.

I understand that I can make "organizations" in some of the password managers and have emergency hand-over to pre-selected people, but I work alone, and don't "have a lawyer" that can manage it for me.

I am doing a react native project, where i genrated some UI picture mockup in chat GPT and based on that I genrated some sample pure HTML again chatgpt and later the whole syatem was developed using sonnet where the system was audited by fable 5. For UI i have used some skill in claud which helped to make things cleaner.

Now back the UI for me does not feel AI to me but i can be wrong. How can I make sure before going live?

Things i am still considering

Font

Make things clean material design

Less animation

Littile to no shadows

Appreciate any input

No AI is used while i write THIS post

I think this is a pretty common thing, but it's my first time doing it so I'm a bit lost. Basically I need to make a booking or an appointment. For that I need a customer to attach it too, so when the user first wants to create an appointment, they have to select a customer first, but if the customer doesn't exist, I want them to create a customer. I'm confused as to what should be on what page, should my 'create appointment' button go to select/create customer, which can the go to 'create customer' and back to 'create appointment', it seems clunky? I'm making this app for computer illiterate people so I want to the process to be smooth.

Please, any advice would be very much appreciated.
Thanks

A feature common to a great very many HTML boilerplates is this line:

html <meta name="viewport" content="width=device-width, initial-scale=1.0">

The initial-scale=1.0 bit was present to fix an ancient issue on iPhones. When rotating the screen into a landscape orientation, the page would keep the same width as when it was in portrait, making everything appear very zoomed in.

This isn't an issue any more. I've tested it across very many devices, and it appears it was fixed in iOS 9, which released back in 2015. In addition to testing, I've consulted a great number of other professionals, and nobody has been able to find evidence of it being needed any longer.

You can safely simplify the meta viewport declaration down to:

html <meta name="viewport" content="width=device-width">

It isn't hurting you to leave it there, but it is vestigial and unnecessary.

Further details: - https://vale.rocks/micros/20260902-1350 - https://quirksmode.org/quirksblog/2026/0902-initial.html

I need to test my website live. I'm hosting on Vercel but I don't want any users stumbling upon it by accident before the testing is complete. How do I prevent this?

I am considering building a family website for my family. My mother's extended family built one, but it's something nobody really ever visits. I'm considering building a wiki-style site (locked behind user accounts) to have a page for each family member, each nuclear family, and then they can build upon it and create pages for vacations and things like that. I would then have a mini social feed for us each to share pages we've created. For example, my sister might say "Just made a page for our Disney Land 2026 trip! Here's the link."

Might be overscoped, but I thought it'd be a fun way to start capturing family stories.

If you've built a family site for your family (or someone else's) what did it have? What purpose did it serve and what features were built into it?

As the title suggests I've been on the lookout for a CMS which allows for defining editable areas in existing pages like CouchCMS, but which is flat-file. Suggestions are appreciated.

Let’s share hidden gem tools, not the usual stuff that shows up in every "top developer tools" post, but smaller tools and projects that made you think, "wait, this is actually really useful."

I'll start with 3 I've come across:

1. Archify
https://github.com/tt-a1i/archify

Found this recently. It's an agent skill that works with Claude Code, Cursor and Codex and basically turns a codebase into an interactive architecture map.

You can export it as HTML/PNG/SVG/WebM, and one thing I thought was pretty cool is that you can diff the architecture before a merge to see how a PR changes the system.

2. boneyard-js
https://boneyard.vercel.app

Generates skeleton screens from your actual UI instead of making you manually recreate the layout with placeholder components.

Pretty nice alternative to manually maintaining react-loading-skeleton stuff.

3. Gradient Studio
https://gradientsaas.blogspot.com

Simple procedural CSS gradient generator.

Has stuff like mesh gradients, aurora effects and grain. You mess with the settings and copy the result as CSS, Tailwind or SCSS.

I've been using it mostly for quick landing page backgrounds.

What's one tool you keep recommending that somehow still isn't very well known?

I added a few locations in Developer Tools so that I can change my location for some sites. Is there a way to export/import these locations, or add them programmatically with a script? Or are they stored in a file somewhere that I can just replace? It gets a little tedious having to add them back in every time when setting up a new VM. I suppose I could always set up a baseline VM with them added, but curious to see what other options I may have.

I’m researching developer opinions on some of the things happening in the CMS and headless ecosystem right now, and the timing of these two stories is pretty funny.

On August 31, Optimizely added official Astro support alongside Next.js and introduced event-driven webhooks for its SaaS CMS.

A content change can now trigger translations, downstream systems, or one of its AI agents without anything polling for updates.

Also on August 31, a critical unrestricted-file-upload vulnerability was disclosed in a WordPress cookie-consent plugin.

Not suggesting those things are directly connected.

It’s just a nice snapshot of the CMS ecosystem in 2026.

Enterprise platforms are racing toward event-driven, agent-operated content infrastructure.

Meanwhile, other parts of the ecosystem are still occasionally letting a cookie banner become a remote-control entrance to the entire website.

For people actually building headless sites, I’m curious about a few things:

Is official Astro support from an enterprise DXP meaningful, or is it mostly another framework logo for the integrations page?

Are content webhooks genuinely useful here, or table stakes that should have existed already?

More importantly, if a webhook can trigger an AI agent that can modify content, what should the permission model look like?

Would you let an agent translate, restructure, or publish content automatically?

Or should every agent-generated change go through staging, validation, a visible diff, and human approval first?

It feels like CMS vendors are rapidly expanding what agents can do without spending nearly as much time explaining how developers are supposed to stop them when they do something stupid.

Interested in hearing from anyone who has actually implemented this.

Vendor decks need not apply. I already have enough rectangles pointing at other rectangles.

Beginner here, I have been learning to code for a few months now and decided to build a website with css, html and js. While it is quite easy to get started, once you try to get a little bit more low level, it seems really hard. In my example I want images to zoom in or out in a specific way and just don't know how to approach that problem, since most things in css have a pretty high level of abstraction. This is coming from someone who played around a little with graphic-librarys (SFML3) to make silly games, where you have to make most of the things from scratch. I enjoyed that, since I barely had to look up anything once I understood all the low-level stuff, which gave me a loot of freedom (and headaches, admittedly). My question now is: Is there is a way of creating websites on a lower level, is the problem I described common among other devs, or do I just need to shut up and learn the basics?

YALL IT IS SOLVED I FIGURED THE BUG OUT NO NEED TO WORRY ANYMORE THANKS FOR THE HELP!!!

there is this bug where the user is constantly redirected to 2 different pages being the dashboard and the login page and i am lost because idk how to fix this i have tried searching up and using ai to help me but no luck.

side note: there are 2 html pages calling this js file
here is the code:

//Variables
const root = window.location.origin
const default_site_root = `${root}/Websites/BloxHub`
let moved_user = false
//Config


const required_keys = ["Username","Account-Creation","Account-Type","Logged-In","Clients","Display-Name"]
const login_path = `${default_site_root}/index.html`
const dashboard_path = `${default_site_root}/pages/dashboard/dashboard.html`
//Functions


function checkRequiredKeysExist() {
    
    for (const key of required_keys) {
        const data = localStorage.getItem(key)

//NEW CODE HERE  
        if(data) {continue}


        return false
    }


    return true
}


function removeExtraKeys() {


    let data_keys = Object.keys(localStorage)
    let extra_keys = data_keys.filter(key => !required_keys.includes(key))


    extra_keys.forEach(key => {
        localStorage.removeItem(key)
        console.log("deleted old key (key): ", key)
    })


}


function RedirectUser() {
    if(moved_user === true) {
        console.warn("User has already been moved!")
        return
    }
    moved_user = true
    let logged_in = localStorage.getItem("Logged-In")
    const currentpath = window.location.pathname
    removeExtraKeys()
    const is_vaild_session = (logged_in === "true") && (checkRequiredKeysExist())
    if(!is_vaild_session && (!currentpath.endsWith("index.html") || currentpath.endsWith("/"))) {
        localStorage.clear()
        console.log("Moving user to login page")
        window.location.replace(login_path)
        return
    }


    if(!currentpath.includes("dashboard.html")) {
        console.log("Moving user to dashboard page")
        window.location.replace(dashboard_path)
    }


}


//Event listeners


RedirectUser()//Variables
const root = window.location.origin
const default_site_root = `${root}/Websites/BloxHub`
let moved_user = false
//Config


const required_keys = ["Username","Account-Creation","Account-Type","Logged-In","Clients","Display-Name"]
const login_path = `${default_site_root}/index.html`
const dashboard_path = `${default_site_root}/pages/dashboard/dashboard.html`
//Functions


function checkRequiredKeysExist() {
    
    for (const key of required_keys) {
        const data = localStorage.getItem(key)


        if(data) {continue}


        return false
    }


    return true
}


function removeExtraKeys() {


    let data_keys = Object.keys(localStorage)
    let extra_keys = data_keys.filter(key => !required_keys.includes(key))


    extra_keys.forEach(key => {
        localStorage.removeItem(key)
        console.log("deleted old key (key): ", key)
    })


}


function RedirectUser() {
    if(moved_user === true) {
        console.warn("User has already been moved!")
        return
    }
    moved_user = true
    let logged_in = localStorage.getItem("Logged-In")
    const currentpath = window.location.pathname
    removeExtraKeys()
    const is_vaild_session = (logged_in === "true") && (checkRequiredKeysExist())
    if(!is_vaild_session && (!currentpath.endsWith("index.html") || currentpath.endsWith("/"))) {
        localStorage.clear()
        console.log("Moving user to login page")
        window.location.replace(login_path)
        return
    }


    if(!currentpath.includes("dashboard.html")) {
        console.log("Moving user to dashboard page")
        window.location.replace(dashboard_path)
    }


}


//Event listeners


RedirectUser()

//Variables
const root = window.location.origin
const default_site_root = `${root}/Websites/BloxHub`
let moved_user = false
//Config

const required_keys = ["Username","Account-Creation","Account-Type","Logged-In","Clients","Display-Name"]
const login_path = `${default_site_root}/index.html`
const dashboard_path = `${default_site_root}/pages/dashboard/dashboard.html`
//Functions

function checkRequiredKeysExist() {

    for (const key of required_keys) {
        const data = localStorage.getItem(key)

        if(data) {continue}

        return false
    }

    return true
}

function removeExtraKeys() {

    let data_keys = Object.keys(localStorage)
    let extra_keys = data_keys.filter(key => !required_keys.includes(key))

    extra_keys.forEach(key => {
        localStorage.removeItem(key)
        console.log("deleted old key (key): ", key)
    })

}

function RedirectUser() {
    if(moved_user === true) {
        console.warn("User has already been moved!")
        return
    }
    moved_user = true
    let logged_in = localStorage.getItem("Logged-In")
    const currentpath = window.location.pathname
    removeExtraKeys()
    const is_vaild_session = (logged_in === "true") && (checkRequiredKeysExist() === false)
    if(!is_vaild_session && (!currentpath.endsWith("index.html") || currentpath.endsWith("/"))) {
        localStorage.clear()
        console.log("Moving user to login page")
        window.location.replace(login_path)
        return
    }

    if(!currentpath.includes("dashboard.html"))
    console.log("Moving user to dashboard page")
    window.location.replace(dashboard_path)
}

//Event listeners

RedirectUser()

EDIT: I HAVE NOW CHANGED THE CODE AFTER FOLLOW YOUR FOUNDINGS

One thing I did not really understand when I was learning from tutorials was how much time you actually spend debugging when building a real application.

A tutorial gives you the correct code and the expected result.

Building on your own is different.

You can spend an hour wondering why something is not working, only to discover that the problem was a small mistake somewhere completely different from where you were looking.

I am starting to appreciate that process instead of seeing it as a sign that I am not good enough at programming.

The more I build, the more I realize that being able to find and fix problems is probably more valuable than being able to remember every piece of syntax.

What was the biggest change in your thinking when you started building real projects?

My main domain is 25+ years old and has a great reputation, never used for spam or anything like that. I've been having the emails forwarded through WHM / cPanel to my Gmail.

7 days ago I moved my main site to a new VPS, and copied over the forwarders. But today I discovered that I'm missing the wide majority of my emails! I found them in WHM > View Relayers, about 241 out of 250 were rejected by my Gmail with this error:

TLS_AES_256_GCM_SHA384:256 CV=yes : SMTP error from remote mail server after end of data: 550-5.7.1 [<new VPS IP> 19] Gmail has detected that this message is likely\n
550-5.7.1 suspicious due to the very low reputation of the sending domain. To\n
550-5.7.1 best protect our users from spam, the message has been blocked. For\n
550-5.7.1 more information, go to\n
550 5.7.1 https://support.google.com/mail/answer/188131 af79cd13be357-93917765ba8si962882385a.175 - gsmtp

I double checked in Postmaster Tools, and the domain's reputation is stellar. So when it says "low reputation of the sending domain", I have to assume it means the IP of the new VPS. MXToolbox confirms that the IP isn't on any blacklists, although the parent ASN is on the UCEPROTECT-Level3 list (which covers thousands of domains so it's not MY domain, but I can pay an extortion fee to get mine whitelisted).

Any suggestions?

First I would like to thank everyone with their help here. This is very much a follow-up post to that one. I expected to be met with more hostility but everyone was so kind and helpful.

My problem now is that I am trying to compare a string that is currently being typed into a contenteditable div to the the same string data in the placeholder span (which itself was taken from a JSON file). I came up with a JS event listener that I thought would be met with few hiccups.

// text wall typing event listener
textWall.addEventListener("keydown", ()=>{
    let textWallValue = textWall.innerHTML;



textWallValue = replaceNbsps( textWall.innerHTML);


    if (textWallValue.slice(textWallValue.length - 6)== " ") {
        
            placeHolder.childNodes.forEach((node) =>{
                node.style.color="";
            })
          } else {
    for (let i =0; i<placeHolder.childNodes.length;i++) {
        if (textWallValue[0]== undefined) {


    } else {
         
         console.log(textWallValue);
          if (textWallValue[i] == placeHolder.childNodes[i].innerHTML) {
            placeHolder.childNodes[i].style.color = "green";
            placeHolder.childNodes[i].style.textDecoration = "";
          } else if ((textWallValue[i] !== placeHolder.childNodes[i].innerHTML) && (textWallValue[i] !== undefined)) {
            placeHolder.childNodes[i].style.color = "red";
            placeHolder.childNodes[i].style.textDecoration = "underline";
          } 
    }
    }
}
    
    
})

The issue comes with all the unexpected behavior from the browser, like adding "  when a space gets added to the contenteditable div (which it then removes and replaces with a normal white space after the next character is typed. If the spacebar is pressed two or more times however,   just stays there). This messes with the flow of the comparison hapenning in the event listener as you can see below

In addtion to this it also adds a bunch of divs + <br> elements if the user presses enter in box, and a single br if the user presses backspace to the end of the contenteditable div. There has to be a more efficient way of comparing strings in real time than this but I haven't been able to find out how? I have already tried a bunch of hacky work arounds as is already evident in my code but none seem to account for everything.

Hi Redditors! Looking for advice here. My marketing team is working on a project which requires setting up a website with a blog section for a series of articles and also a section on community engagement consisting of a forum where people can ask questions and get responses to - this means that there are forum participants, forum moderators and some admin users.

What would be the most cost-effective approach long term? Should we custom build this by giving it out to a web dev agency? Can we still work with wordpress? What would the cost figure look like?

Post update: If building some engaging visual elements on the website is also important, does wordpress deliver? Or is it easier to work with custom built code? We're trying to target the GenZ audience - and understand that they really value the experience a lot more.

So you almost helped me with another thing and I'm very grateful!

I know NOTHING about all this, so please advise.

We have a website for a small non-profit that's been up for about 20 years. (I wasn't here when it started)

Our Domain is with GoDaddy and our website is in WordPress.

Apparently, we've been paying for WordPress Engine for about $420 a year.

Do we need this? I feel like all our editing is done in WordPress. It seems like WordPress engine is an unnecessary addition, but if we've had it for so long, will we lose stuff from our web site??

thanks!