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?

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)


        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.

I want a partner with whom I can start my journey in the world of freelancing.I am ready to do the technical part ,while you have to look for the local business owners who needs our services.if sounds good dm me.

hi guys, I'm developing a new agentic product (i know there are tons out there) where I need the ai chat ui, loaders, agent stream logs etc. Now the problem is, many design systems out there mostly generic and not focusing on ai components/patterns. I tried shadcn but needed to design things manually which I'm not good at designing. So I'm looking for a design system / react library where these components/patterns are already built in.

would highly appreciate your suggestions if you know a design system like this! I'm willingly to pay as well.

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!

There is a big chunk of people who understand their domain better than a developer would, but simply fail when it comes to solving their problems using software. Now, of course, they can whip up an app (MVP or Prototype) in 5 minutes using Lovable, but they would eventually get stuck when it comes to debugging or working with complex logic. When you do not understand code, you essentially rely on AI to do that for you. Since NLP is ambiguous and given the nature of AI, this can never be done as precisely as a dev would be able to, since they do not just understand the code but can audit it and make changes deterministically.

I have been working on solving this problem for domain experts so they not only build complex apps but also make deterministic changes to them themselves. The idea that you can manage an entire app without understanding is flawed. Unless you understand something, you cannot manage it yourself; you are merely second-guessing yourself. You cannot outsource your understanding to AI to do the entire job for you.

I know that it's not just the code that the domain experts cannot deal with, but also the technical concepts that make software complex. But what if we instead of doing away with this complexity abstract it in a way such that these domain experts are able to make sense of it and work through it without having to deal with code?

0 to 1 has largely been solved, but it's the maintenance and debugging hell that makes it all the more difficult for this segment. I have worked on a potential solution for this because I am certain that it is a problem.

I would like to get the perspective of seasoned developers and domain experts on this problem, whether this is something niche or actually a real problem. Is it the code and the technical concepts of software programming that deter these people from dealing with software, or is it that they cannot articulate what they want and translate it into logic? What do you guys think?

I would also like to know how I can find the right target segment to demo my POC to validate my hypothesis on this problem.

P.S. I know a lot of what I am suggesting is abstract and may seem impossible, but let's assume there is a way to solve it. But is this problem really worth solving? (Does it capture a lot of value?)

Hello everyone! I’m not a web developer and I have limited experience with website management, but I’ve been doing some research. I’m posting here because I’d like to save some time and get advice from people with more experience.

Our company currently has a website hosted on Hostinger, and we already have our main domain (eg. storename.com) set up there.

My manager asked me to check if we can migrate another website, for example shop.storename.com to our Hostinger account. I contacted the developer of the shop.storename.com website and asked what CMS it uses. He told me that it is Next.js full stack.

So my main question is: is it possible to migrate a Next.js full stack website like shop.storename.com to hostinger, while our main domain storename.com is already hosted there?

For context, I'm the new and only IT support person in our company, so I'm trying to figure this out even though web development isn't really my area.

Thank you so much in advance for any advice!

Edit: For context, the shop.storename.com is an e-commerce website where we sell water heater products, sanitary ware, and furniture. It has an add to cart button and you can make payments.

Tech analyst and journalist Carmi Levy said although websites like Hydro One's and the LCBO's are Canadian, their maps are likely powered by Google's application programming interface (API).

APIs are not location-aware, so all maps powered by Google API have switched to Lake America.
MapQuest, a U.S. online mapping service, has posted on social media that it would not change the lake's name, while Apple has not publicly commented on the matter.

In a statement Sunday night, Google said website developers who embed Google Maps on their sites can select a region to localize the map. That determines how place names are displayed on sites, the company said.

"'Lake Ontario' will show when developers have set their region to Canada," the statement said.

Just a reminder to developers.

With AI crawlers and agents hitting websites constantly, how much of what analytics calls “direct traffic” is even human anymore?

If bots are getting counted as visits, conversion rates automatically look worse. And then decisions about landing pages, content, ad spend etc. are being made from numbers with a messed up denominator.

Blocking bots doesn't really solve it either. Some are obviously junk, but others are search crawlers, monitoring tools or AI agents that might actually send users your way.

Feels like analytics needs to get much better at telling why something is accessing a site, not just whether it looks like a bot.

Anyone seeing this noticeably mess with their analytics yet?

Hi everyone! I am working on a project from frontend mentor. It is a speed typing test and one of the requirements is that the user should be able to see errors and correctly typed text in real-time, something like this:

Problem is, when I try to achieve this on mobile it will not show some of the passage after a certain point, no matter how much text you type into the textarea field:

Here is the html for the section of interest:

<div class="wrapper">
  <textarea class="text-wall"></textarea>
  <span class="placeholder"></span>
</div>

Here is the CSS:

.text-wall {
    font-size: var(--step-2);
    display: block;
    width: 100%;
    height: 400px;
    background-color: transparent;
    resize: none;
    border: none;
    outline: none;
    color: #fff;
}

.wrapper {
    position: relative;
    overflow: hidden;
}


.placeholder {
    position: absolute;
    filter: blur(3px);
    top: 0px;
    font-size: var(--step-2);
    z-index: -2; 
}

Note: For the passage in the placeholder span element, I wrapped every character in a span element using javascript. As far as I know, this is the ony way I can style every character on an individual basis depending on if the text typed into textarea matches the passage or not:

let placeHolderText = "";
let stringArr = "";
const textWall = document.querySelector(".text-wall");
const placeHolder = document.querySelector(".placeholder")
stringArr = jsonData.hard[8].text. split('');
stringArr.forEach((character)=>{
    placeHolderText+= `<span>${character}</span>`;
});
placeHolder.innerHTML = placeHolderText;

Read about Chesterton's Fence recently and it made me think about it with AI-generated code. Had a ramble about it here if anyone's interested!

Been going back and forth on this for a while and I don't think I've landed anywhere good.

The situation is the usual one. App talks to a handful of external APIs. Some have sandbox environments, some don't. The ones that do have sandboxes that don't quite match prod, and the gap is never documented anywhere, you just find it eventually.

Options as far as I can tell:

Hit the real sandbox in tests. Slow, rate limited, and you can't run it in CI on every PR without burning through quota. The sandbox data is also usually three fake records, so pagination bugs and anything volume related never show up until a real customer hits them.

Record and replay, VCR style cassettes. Works great the day you record them. Six months later nobody remembers how to re-record, a chunk of them are for endpoints that have since changed, and the suite is green the entire time.

Hand-written mocks. This is what most places I've worked have done and I've slowly come around to thinking it's the worst of the three. You write the mock from your reading of the docs, so the mock encodes your misunderstanding of the API, and then it passes forever. The test isn't checking that your code works against the API, it's checking that your code works against your idea of the API, and those two drift apart silently.

Contract testing, pact and friends. Makes sense when both ends are yours. When the other end is Slack, nobody is publishing a contract for you.

So what do teams actually do in practice? Specifically curious about:

- whether anyone has anything that detects when the real API has drifted away from whatever you're testing against, or if you just find out from a bug report

- whether you bother making mock data realistic in volume, or accept that pagination and perf issues are things you'll only ever see in prod

- vendors that genuinely do sandboxes well, if any exist

Not looking for "just use msw" or a list of tools, I know they're out there. I'm asking what your team actually settled on and whether you'd do it that way again.

Hey, before explaining my problem i know that a lot of you guys don't like ai or 'vibe coding' in general and this is why i ask you to not take care of this and be comprehensive.

Im doing website creations, especially redesign and im hesitating with two workflows.

Untill now i was doing it this way: i search for inspiration on dribble like hero section or landing page, i take the screenshot and ask gemini to extract the content into json to get the maximum of informations on this screenshot. Like this i can after go to a no code tool like lovable to convert this screenshot and json into an actual base for the website and finally export it and finish the job with antigravity. Here the thing is that for small adjustments it's harder than a tool like framer or webflow.
This workflow has the merit of being quick and very faithful to the inspiration.

And recently i started to become interested in framer because i heard that it is better for more personalized projects, have CMS so i don't have to use sanity CMS (even if it can do the job at small scale) and also fast and begginer friendly.

I'm no GDPR lawyer in Brussels, but that term is used for making the site function and remembering your preferences, etc, right?

I happened to press the "Functional Cookies" icon instead of the checkbox, so I didn't even know this was like this.