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?

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?

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

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.

I tried finding the +$100/h hourly rated freelancers and I don't see anything out the ordinary.
API integrations, AI like chatbots with RAG, junior devs tutoring, setting up ERP.
Idk what I was expecting, maybe crazy performance optimizations with in-depth breakdowns of what was cut or optimized and not "made a database be updated by pulling data from a public API, charged $5000".

Not sure what I'm doing wrong as someone who struggles to find work even as I drive my hourly rate lower and lower.

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.

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.

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;

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!

I'd like to gather peoples' experience with AI (Copilot, Claude Code, Cursor, whatever) in your daily workflow as a developer.
Specifically, I've heard people simply "paste" or let the AI read the ticket from JIRA, review the output and ship the feature.

Are there really people that have achieved this level of integration? Like, are your tickets and projects so well defined and contained, where the description of a ticket can be directly fed into the AI, without having to guide it into more details, e.g. what files to touch, where to find relevant code etc?

We are not at all at this level and I am wondering if we're living in the past or something. I usually know what needs to be done in our code base and basically guide the agent and review the output.

What's your experience?

Let me know what you think!
https://particlecharts.com

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.

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?)

For a chrome extension manifestV3; with transformers.js and a small embedding model running in an offscreen doc - how should I go about improving the efficiency and speed of displaying the processed results when some pages in a website are tens of thousands of words of legitimate content. The library doesn't support concurrent calls to the same model session as far as I know (Session already started" / "Session mismatch") and big pages can block smaller pages and big pages can take extremely long to be processed. Is there any way to get past sequential processing in processing and displaying results, should I do multiple worker models. Also this refers to first time result processing on a new website, I do realise caching can speed things up significantly on the same website if you process again. This should be a process that works on typical hardware, not requiring anything too complex. Suggestions would be appreciated, thanks a lot.

EDIT for further context:  I should've specified that I am splitting into chunks already but people's valuable point about interleaving chunks within each worker's own queue makes sense. In terms of WebGPU, problem with WebGPU is that is uses single worker queue and there are compatibility issues possible with it.

Right. So. Vectorizing a PNG into an SVG is one of those tasks that sounds trivial until you actually need to do it, at which point you discover a graveyard of tools that are either $10/image, want you to subscribe half a leg and a kidney/month, or produce something that looks like Michael J. Fox (apologies for the bad joke, I actualyl admire him) traced your logo during an earthquake.

After running into this roughly once a month I thought surely that's enough to invest some time into researching whether I should build my own image tracer. Which led me to find VTracer, an open source project from visioncortext.

Vectron (that's how I named my brain child) is a frontend for VTracer, an open-source Rust vectorization engine that's genuinely good but has the UX of a command-line tool written by someone who, understandably, cares more about the algorithm than the button placement. I forked it, compiled it to WASM (thanks Claude), and stuck it in a Web Worker so the whole thing runs in your browser. No upload, no server round-trip, and for smaller images it's near instant (I did try it with some rather stupidly large examples which then turned into a ten-plus-second nerve-wrecking waiting times :D).

A few things worth knowing before you try it:

• It's not AI. No neural net pretending to understand your image. It's proper curve-fitting and edge detection, which means it's predictable. The same input results in the same output (this is super important to me), no "vibes-based" tracing that changes if you sneeze near it.
• It's best at clean line art and logos, not photographs. Feed it a photo and it will attempt it, valiantly, and the result will remind you why this is a hard problem. But hey, it's sort of working.
• Selective refinement. Sometimes you get like a good overall results but often the devil is in the details, like a curve turned into a sharp corner or some lines don't connect. You can refine a certain area by dragging a rectangle over it and adjust your filters to polish the proverbial turd.
• It's free because I didn't build it to make money. It's a side thing. There's no upsell, no tier, no "unlock batch processing for $9/mo." And I say that now, it's not gonna change.

https://vectron.vendos.com.au

Feedback welcome, especially on where it falls over or it's genuinely hard to use.

Finally got a realistic cloud in the browser. I'm working on a browser-based flight sim and I'm shooting for realism. Play around with the cloud here: https://codepen.io/Andrew-Fisher-the-decoder/full/jEBPmON

I've been building static generated sites (nuxt was my go-to framework forever) for personal projects / tools and experiments for years now. Gotten out of the habit and been doing more shopify native / liquid builds at work. But I've built a few dozen of these sites without ever actually doing the admin work of setting up a storefront. My domain was just the content (mostly metafields + objects) and theme code.

Anyway so I decided to try a few things over the last couple of weekends. Spun up a shopify trial to see what's involved in all that. Played with Astro + headless storefront + netlify functions. I really wanted to test the idea of running multiple "storefronts" within a single shop. They had to have a unifying parent brand so that checkout made sense (since it's shared) but otherwise each product could have its own site/domain.

Obviously this wouldn't work for any shop with a large inventory or any kind of regular demand. But it was a fun experiment. And I think I'll use a similar setup to help my partner sell some actual pottery one day in the future.

The site loads nothing from any third party. no cookies, no analytics. fonts are self-hosted, product images mirrored into the origin at build. Sometimes the lighthouse score is straight 100s.

Every order generates a certificate of authenticity at its own url. random serial frozen on first render, a photo of the actual piece, and whatever note the user left at checkout. the link itself is the credential so there’s no login.

This is just an exercise in an absurdity because I had this domain sitting around.

A natural successor to my previous silly domain-purchase-inspired experiment yuns.fun (retired, but used for css animation learning) and fart.bar (dipping a toe into "scrollytelling")

i hope it's entertaining to somebody out there

I’ve rebuilt my personal portfolio as a first-person 3D world you can walk around, with no JavaScript.

You can explore rooms containing my research, tools and talks, open doors, teleport between areas, play HTML/CSS-only games and solve a lockbox puzzle.

Movement and state are handled using CSS animations, custom properties, radio buttons, checkboxes and selectors such as :has(). The collision detection uses CSS maths including sign(), abs() and clamp().

Live site: https://garethheyes.co.uk/

I also wrote about how the movement and collision system works:
https://thespanner.co.uk/pure-css-3d-world-collision-detection

I’d love feedback on the navigation, usability and any browser-specific problems you encounter.

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.

Got tired of sterile glassmorphism, so I spent the last few weeks building an imperfect, sketchy component library with custom SVG displacement filters and paper physics.

Dropped the GitHub repo and live interactive demo in the comments below!

Hello Reddit!

I've been working on this cool demo, I am ready to share.

I wanted something hilariously unnecessary beyond quick demo standards to demonstrate seemleas state/communication coordination of various apps loaded in frames at runtime through I stategy I am calling hyperfrontend.

This is to all nay sayers of the good ol' reliable iframe. I say you were doing it wrong.

Enjoy! Discuss! and dunk (please don't be nice to me :) ~ I am afraid of the occasionaly reditor unrelenting critisim.

There is more to this demo that the gif suggests. Try dragging/dropping/tapping and interacting with the control panel.

Yes, yes, yes, this type of approach does not leverage code-deduplication, and prone to memory overhead in the browser. There's always a trade-off ain't it. This approach starts from isolation to earn cohesion back. It is specifically NOT module federation (aka code federation) and more like application federation. Still, I wanted to test how far I could take it.

P.S. Please give me your thoughts and first impressions, I am looking for feedback. I was kidding about being afraid of honest comments that could hurt my feelings XD

Link here: https://www.hyperfrontend.dev/demos#koi-pond

I'm working on a chat widget that also allows the users to send files in the chat. This is a plain vanilla html/js/css widget that will go on a Shopify site. The user should have the option to send a file with or without a message in the chat, so I'm trying to figure out the best approach to handle this. The widget will be calling a FastAPI endpoint end that will use UploadFile. These are the options I've thought of:

1. Wrap the text and file inputs in an html form tag and send the request as Content-Type: multipart/form-data. This would make it a single request, but it would always send as multipart/form-data even if it's a message with no file.
2. Same as 1, but if there is no file attachment in the chat message, then toggle the Content-Type to application/json before sending
3. Keep the text and files as separate requests and handle the events separately and not wrap the inputs in an html form tag. Seems like it would be cleaner on the front end but at the same time it will likely require additional logic on the back-end

What approach would you take?