I want to automate deleting my ChatGPT chats because I have about 244 of them, and I’m not going to do that manually. What I want to do is scroll down to the bottom until there are no more chat items, then delete them from last to first. The deletion part works, but I’m having some issues with the scrolling part.
console.log(“scrollToBottom has been called”);

await page.evaluate(async () => {
    const delay = 10000;
    const wait = (ms) => new Promise(res => setTimeout(res, ms));
    const sidebar = document.querySelector('#stage-slideover-sidebar');

    const count = () => document.querySelectorAll('#history aside a').length;

    const scrollDown = async () => {
        const lastChild = document.querySelector('#history aside a:last-child');
        if (lastChild) {
            lastChild.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
        }
    }

    let preCount = 0;
    let postCount = 0;
    let attempts = 0;
    do {
        preCount = count(); 
        await scrollDown();
        await wait(delay);
        postCount = count(); 
        console.log("preCount", preCount, "postCount", postCount, "attempts", attempts);
        if (postCount === preCount) {
            attempts++;
        } else {
            attempts = 0;
        }
    }  while (attempts < 10);

    console.log("Reached bottom. Total items:", postCount);

    // await wait(delay);
});

}
This works better than when I set the delay to 1, 2, or 3 seconds and the attempts to 3. When I use this, it stops loading at 84.
However, the issue I have with a 10-second delay and 10 attempts is that I run into this error after everything has loaded.

    #error = new Errors_js_1.ProtocolError();
             ^

ProtocolError: Runtime.callFunctionOn timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed.
    at <instance_members_initializer> (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/CallbackRegistry.js:102:14)
    at new Callback (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/CallbackRegistry.js:106:16)
    at CallbackRegistry.create (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/CallbackRegistry.js:24:26)
    at Connection._rawSend (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/cdp/Connection.js:99:26)
    at CdpCDPSession.send (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/cdp/CdpSession.js:73:33)
    at #evaluate 
(/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/cdp/ExecutionContext.js:363:50)
    at ExecutionContext.evaluate (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/cdp/ExecutionContext.js:277:36)
    at IsolatedWorld.evaluate (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/cdp/IsolatedWorld.js:100:30)
    at CdpFrame.evaluate (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/api/Frame.js:364:43)
    at CdpFrame.<anonymous> (/Users/pc/WebstormProjects/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/util/decorators.js:109:27)

Node.js v22.19.0

How best can I approach this

I’m working on a React application and am trying to understand the fundamental difference between Redux and Zod. I’ve seen both mentioned in discussions about managing state, and I’m confused about how they relate, if at all.

My current understanding is that:

Redux (specifically with React-Redux hooks like useSelector and useDispatch) is a state management library that provides a predictable container for your application’s global state.

Zod is a validation library, often used with form management libraries like React Hook Form.

Where I’m getting mixed up is the term “state.” I have two separate code snippets below and would appreciate an explanation of how they handle “state” differently.

Redux Code Example

Here’s how I’m using Redux to manage a simple counter’s state:

# store.js
import { createStore } from 'redux';

const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

export default store;

# CounterComponent.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const CounterComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Increment
      </button>
    </div>
  );
};

export default CounterComponent;

In this example, the count is the application’s state.

Zod Code Example

Here’s how I’m using Zod to validate a user form input:

import { z } from 'zod';

// Define the schema for our form data
const userSchema = z.object({
  username: z.string().min(3, { message: "Username must be at least 3 characters." }),
  email: z.string().email({ message: "Invalid email address." }),
});

// A sample piece of 'state' (form data) I might want to validate
const userData = {
  username: "jo", // This is invalid
  email: "not-an-email", // This is also invalid
};

try {
  userSchema.parse(userData);
} catch (e) {
  console.log(e.errors);
}

In this case, userData is the state I’m trying to validate.

My Core Questions
How do Redux’s state (the count) and Zod’s “state” (the userData) differ conceptually?

In a typical application, where would you use Redux vs. Zod, and why?

Are there scenarios where they can be used together, and if so, how do they complement each other? For example, would I validate Redux state with Zod?

I’m looking for an answer that clarifies the separate roles and responsibilities of these libraries, not just a list of features.

I’m trying to implement a flip card animation in React with Tailwind.
The rotation works (the card flips in 3D), but the back image does not appear: when the card rotates, it stays blank or still shows the front.

I tried using both backgroundImage and with rotateY(180deg) and backface-visibility: hidden, but the back side never shows.
How can I make the back side of the card (CardBack) visible when the card rotates 180°?

Here’s a minimal example of my code:

import { useState } from "react";
import CardCover from "../cardImages/cardCover.png";
import CardBack from "../cardImages/cardBack.png";

export default function TestCard() {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <div
      className="w-[200px] h-[300px] cursor-pointer [perspective:1000px]"
      onClick={() => setIsFlipped(!isFlipped)}
    >
      <div
        className="relative w-full h-full transition-transform duration-500"
        style={{
          transformStyle: "preserve-3d",
          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
        }}
      >
        {/* Front */}
        <div
          className="absolute w-full h-full rounded-xl bg-cover bg-center"
          style={{
            backgroundImage: `url(${CardCover})`,
            backfaceVisibility: "hidden",
          }}
        ></div>

        {/* Back */}
        <div
          className="absolute w-full h-full rounded-xl bg-cover bg-center"
          style={{
            backgroundImage: `url(${CardBack})`,
            transform: "rotateY(180deg)",
            backfaceVisibility: "hidden",
          }}
        ></div>
      </div>
    </div>
  );
}

I recently started learning Tailwind CSS. As per my instructor’s setup, I am using PowerShell to configure a Node.js project.

When I run the following command:

PS C:UsersABHISHEKProjects> npx tailwindcss init

I get this error:

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:UsersABHISHEKAppDataLocalnpm-cache_logs2025-09-12T10_03_13_713Z-debug-0.log

Before that, I ran these commands (all without errors):

npm init -y
npm install -D tailwindcss postcss autoprefixer
npm install vite

But npx tailwindcss init still fails.

Why does npx tailwindcss init fail with this error even though Tailwind CSS is installed, and how can I fix it?

I want to make a video call in which one side will be AI and the other side will be a real user

And in it, the user will show his identity card in a video call, and as soon as the user shows his identity card he should capture a screen shot. Screen short should be captured automatically that is when user shows identity card in video call then it will be captured only if other wise it will not happen and it should be passed in backend side

I want to become AI

i try using media pipe throw detect but not work

Cannot import @google-apps/meet from Google Meet API

Hello,

i’am trying just one line of code

import {SpacesServiceClient } from ‘@google-apps/meet’;

and i have this error

Uncaught ReferenceError: require is not defined

i have done

npm install @google-apps/meet @google-cloud/[email protected] –save

I have imported

import { initializeApp } from ‘firebase/app’;
and it works fine

im using “@whiskeysockets/baileys”: “^6.7.18”, and when i connect using qr code and log in, all the event emmiter works fine, i store my auth state in db to reconnect again.

if i scan and log in my account call makwascoket, every thing works fine,
after some time / whenever my sever restarts and i reconnect with my auth state without scanning qr all the events does not work expect creds.update event. im using calling the connect function both time, where my socket is stored with makwwasock function.

im able to use all events after reconnecting to bailys, but this not working

I want to retain progress-bar functionality for file uploads to the server so, at the moment, my belief is that Javascript FETCH is out of the question.

So I’m implementing the traditional XMLHttpRequest. The problem is Ajax does not support the CancellationToken in it’s API. So I looked at HTTP Headers etc for how the CancellationToken gets communicated to the server.

Judging by a whole lot of SO posts and posts elsewhere, “It simply doesn’t”. The consensus is, just like closing the browser, or losing a network connection, simply calling the XHR.Abort() method will activate the appropriate CancellationToken on the server side. Is this true? (I imagine the server wishing to distinguish between various abort scenarios.)

But then why would .NET support “CancellationToken myToken =default )” if there is no association to the clients corresponding value? And worse, I’d be forced to poll the cancellation token in JS to work out when to call the Abort() 🙁

So I guess a precise question would be “What value get’s stored in the .NET HttpContext.RequestAborted field and how does it relate, if at all, to the client’s value supplied in a FETCH?

And finally, how can I manipulate th XHR so that my CancellationToken gets communicated to the server’s .NET controller?

EDIT 1

Just thinking that HTTP has been multiplexing TCP/IP sockets since I think 1.1 so there must be some Packet ID, Request ID, Socket ID thing going on

I need a self-contained (that is, based only on the built-in functionality, with no external dependencies and no use of the system shell functionality, except the command-line interface itself) Node.js solution to the following problem:

Given a set of paths to directories, find all files in these directories, assuming that: (1) a filename must match a particular regex; (2) limit the depth of scanning to M levels and ignore all elements whose position in the hierarchy is less than N, which is supposed to emulate the maxdepth and mindepth options of the Linux find command. Merge all found files into one file and put the string (in some XML format) identifying the path to the corresponding file before its content (in a separate line).

For example, I have the following structure:

a
>b
>>cd
>>>>e.txt
>>f
>>>g00.txt
>>g
>>>h
>>>>ea.txt
>>>ea.txt
b
>g
>>eo.txt
f
>5
>>ef.txt
>a
>>e3
>>>>i2.txt
>b
>>cd
>>>>eoe.txt
>g
>>h
>>>ij
>>>>>ke
>>>>>>>e1.txt
>h
>>a1.txt
>t
>>1
>>>1
>>>>a10.txt

The set of paths to directories is ["a/", "f/"]. The regex for filenames is ^e. The maximum depth is 3. The minimum depth is 0.

Then the output file output/file.txt must contain the following:

<path>/a/b/cd/e.txt</path>
...data from the file whose path is "a/b/cd/e.txt"...
<path>/a/b/g/ea.txt</path>
...data from the file whose path is "a/b/g/ea.txt"...
<path>/f/5/ef.txt</path>
...data from the file whose path is "f/5/ef.txt"...
<path>/f/b/cd/eoe.txt</path>
...data from the file whose path is "f/b/cd/eoe.txt"...

Note that, for example, the file whose path is "a/b/g/h/ea.txt" is ignored because it is located at the fourth (a/b/g/h/) level of hierarchy.

I have found some examples of how to merge files (for example, a/64513108), but I have not found how to limit the depth of scanning the directories.

Minimization of memory consumption and maximization of performance are important: the number of files can be very big (and the size of the output file may be much larger than the available RAM). I realize that it is possible to obtain the needed output if I make a list of all directories and files, then filter the files with a special regex, but this looks like a naive, inefficient way because it does not limit the depth of scanning, it simply makes a needlessly huge list of all elements.

I have an issue with the data within an extension class does not change when I change data within the super class.

This might be an XY issue or caused by the fact that I’m still not used to using class. I already read into mixin, but I don’t see yet how it would help me.

As an example:

I have a class “container” with the methods: height, depth, width, and volume. The defaults are set within the constructor by a settings file. height, width, and depth can be changed through setters, while the volume is always calculated. A container always exists; it can also exist without a product.

I also have a class with products that have a quantity and density. There is actually more to it, but to simplify it, I am limiting it to this in the example.
Basically, I call the extension class product that can only exist within a container. it calculates the quantity based on the densityand the volume of the super class.

That is the part that works fine.
The issue now is that the container size might change, and therefore also the volume. Which means the quantity of the product should change too, but it doesn’t. The extended class does not recognize an update of the super class data.

How can I make it work?

class Container {
  #height;
  #depth;
  #width;
  
  constructor() {
    this.#height = 10;
    this.#depth = 10;
    this.#width = 10;
  }
  
  set width(length) {
    this.#width = length;
  }
  
  get volume() {
    return this.#width * this.#height * this.#depth;
  }
}

class Product extends Container {
  #density;
  
  constructor(volume) {
    super(volume);
    this.#density = 4;
  }
  
  get quantity() {
    return this.volume * this.#density;
  }
}



const container = new Container();
const product = new Product();

// expectin 4,000 - true
console.log(product.quantity);

// expecting 6,000 - false
container.width = 15;
console.log(product.quantity);

I have a Next.js project with typescript.

1. It’s a page router instead of app router
2. No babel config file(.babelrc etc) in the project

The error occurs when I run npm test. jost seems to be one of the package used by auth0.

XXXX/node_modules/jose/dist/browser/index.js:1
    export { compactDecrypt } from './jwe/compact/decrypt.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

I tried below 2 solutions, but it gave me the same error.

jest.config.ts

import type { Config } from 'jest';
import nextJest from 'next/jest.js';

const createJestConfig = nextJest({
  dir: './',
});

const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  roots: ['<rootDir>/tests/unit'],
  // Solution 1
  transformIgnorePatterns: [
     "/!node_modules\/jose/"
  ],
  // Solution 2
  moduleNameMapper: {
    "^jose$": "jose"
  }
};

export default createJestConfig(config);

package.json

{
  ...,
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "next": "^15.2.5",
    "react-dom": "^18.2.0",
    "auth0": "^4.4.0",
    ...
  },
  "devDependencies": {
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.8.0",
    "@testing-library/react": "^16.3.0",
    "@types/jest": "^30.0.0",
    "@types/react": "^18.3.20",
    "@types/react-dom": "^18.3.6",
    "jest": "^30.1.3",
    "jest-environment-jsdom": "^30.1.2",
    "node-mocks-http": "^1.17.2",
    "ts-jest": "^29.4.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.3"
  }
}

api.test.ts

import handler from '@pages/api/users';
import { createMocks, createRequest, createResponse } from 'node-mocks-http';

  it('returns 405 on non-POST', async () => {
    const { req, res } = createMocks({
        method: 'GET',
      });
  
      await handler(req, res);
      ...
  });

Can you briefly explain what is middleware and how it works?
and what is the use of next function parameter and how it works.

I know a little bit about middleware that it works in between the client and the server but i don’t know how

I am learning backend dev and I am stuck at the concept of next and middleware.

I’m using Clerk Sign In and Sign Up components in my Next.js app. When a user signs up for the first time, everything works fine. However, if the user tries to sign up again (for example, using a Google account that already exists), Clerk treats it as a sign in and lets the user proceed, but the redirection breaks and I get a 404 in my Next.js app. The same issue happens with sign in: the user can sign in with a Google account (but not with regular email + password), and Clerk treats it as a new user. In that case, it doesn’t trigger the user.created event in my backend, which is a problem. Basically, I would like to prevent Clerk from allowing (1) a sign up attempt with an already existing user, and (2) a sign in attempt with an unregistered user. I already tried configuring the force redirect environment variables and passing them as props to the components, but it does not work. Everything works fine when the user signs up as a new user and when they sign in as an existing user.

I’m serving MP4 video files from a Strapi backend, and they play fine in Chrome but fail in Safari.

In Chrome:
The video loads and plays without issues.

In Safari:
I see this error in the console:

Unhandled Promise Rejection: AbortError: The operation was aborted.

What I’ve tried so far:

1. tried to adjust cors in strapi middlewares.js

{
  name: 'strapi::cors',
  config: {
    origin: ['http://localhost:3000'], or //origin: ['*'],
    methods: ['GET', 'HEAD', 'OPTIONS'],
    headers: ['Content-Type', 'Authorization', 'Range'],
    exposeHeaders: ['Content-Length', 'Content-Range'],
    credentials: false,
    keepHeaderOnError: true,
  },
}

1. added playsinline and muted attributes to video tag
2. added ?ngsw-bypass=true as a query string in the mp4 url
3. replaced native video tag with react-player VideoPlayer

But obviously nothing helped

code below:

'use client';
// imports...

export const VideoComponent: FC<VideoComponentProps> = ({
    video,
    poster,
    isVideoOnGrid,
    maxWidthMobile,
    maxWidthDesktop,
}) => {
    const videoRef = useRef<HTMLVideoElement>(null);
    const [isPlaying, setIsPlaying] = useState(false);
    const data = video.data.attributes;
    const posterData = poster?.data?.attributes;
    const src = data.url ? getAssetUrlPrefix() + data.url : '';

    useEffect(() => {
        const videoElement = videoRef.current;
        if (!videoElement) return;

        const handlePlay = () => setIsPlaying(true);
        const handlePause = () => setIsPlaying(false);

        videoElement.addEventListener('play', handlePlay);
        videoElement.addEventListener('pause', handlePause);

        return () => {
            videoElement.removeEventListener('play', handlePlay);
            videoElement.removeEventListener('pause', handlePause);
        };
    }, []);

    const togglePlay = () => {
        if (videoRef.current) {
            if (isPlaying) {
                videoRef.current.pause();
            } else {
                videoRef.current.play();
            }
            setIsPlaying(!isPlaying);
        }
    };
    return (
        <div>
            <video
                controls
                crossOrigin="anonymous"
                muted
                onCanPlayThrough={() => console.log('Video can play through')}
                onError={(e) => console.error('Video Error:', e)}
                playsInline
                preload="auto"
                ref={videoRef}
                width="100%"
                poster={`${posterData?.url ? getAssetUrlPrefix() + posterData.url : ''}`}
            >
                <source src={src} type={`${data.mime ? data.mime : 'video/mp4'}`} />
                Your browser does not support the video tag.
            </video>
            <Button
                className={`${isPlaying ? styles.isPlaying : ''}`}
                kind="primary"
                renderIcon={isPlaying ? Pause : Play}
                iconDescription={isPlaying ? 'Pausieren' : 'Abspielen'}
                hasIconOnly
                onClick={togglePlay}
            />
        </div>
    );
};

What can I try next?

I’m building a Vue 3 frontend (deployed on Vercel at example.com) with a Django REST Framework backend (deployed on Railway at api.example.com).

Authentication uses JWT access/refresh tokens stored in HttpOnly cookies (access, refresh).

Access token lifetime = 30 minutes

Refresh token lifetime = 1 day

Cookies are set with: HttpOnly; Secure; SameSite=None; Domain=.example.com

Django timezone settings:

LANGUAGE_CODE = “en-us”

TIME_ZONE = “Africa/Lagos”

USE_I18N = True

USE_TZ = True

The problem

When the frontend calls multiple API endpoints simultaneously (e.g. 5 requests fired together), some succeed but others fail with:

401 Unauthorized

{“detail”:”Authentication credentials were not provided.”}

In the failing requests I can see the cookies are sent:

cookie: access=…; refresh=…

But SimpleJWT still rejects the access token, sometimes immediately after login.

It looks like the exp claim in the access token is already in the past when Django validates it.

What I’ve tried

Verified cookies are set with correct domain and withCredentials: true.

Implemented an Axios response interceptor with refresh token retry.

Ensured CookieJWTAuthentication checks both Authorization header and access cookie.