Category: javascript

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.

I am creating an authentication system and i want to send reset request using MailerSend API, the code has no errors. The entry point for the application is in app.py file. The structure of the data is correct also. The project folder includes login.html and login.js which holds both the login and the forgot password pages. Entry point for the application is on app.py

The code doesn’t even log the console out with print() used to

authentication.py

import secrets
import bcrypt
import sqlite3
import datetime
from flask import Blueprint, jsonify, request,session
from mailersend import MailerSendClient, EmailBuilder
import secrets

auth_bp = Blueprint('auth', __name__, url_prefix='/api/auth')

# creatin mail sender client
mailer = MailerSendClient(api_key='mlsn.cc7po0a13bghjgjg061960a92b85e0676e762384ba8097993cc02ac8783052849baba75d')

def get_db_connection():
    # Get database connection to the cyber-shield-linkguard database
    conn = sqlite3.connect('cyber-shield-linkguard.db')

    # return dictionary data structure from the columns of the database
    # e.g instead of column id data[2] use data['password']
    conn.row_factory = sqlite3.Row
    return conn

@auth_bp.route('/forgot-password', methods=['POST'])
def forgot_password():
    try:
        data = request.get_json()
        email = data.get('email', '').strip().lower()

        if not email:
            print('No email provided')
            return jsonify({'error': 'Email is required'}), 400
        try:
            conn = get_db_connection()
            cursor = conn.cursor()

            # Check if user exists
            cursor.execute('SELECT id FROM users WHERE email = ?', (email,))
            user = cursor.fetchone()
            print(f'Entries found: {user}')

            if not user:
                
                conn.close()
                print('Email not found in database')
                return jsonify({'error': 'Email not found'}), 404

            #generate token 
            token = secrets.token_urlsafe(32)
            print(f'Generated token: {token}')
            
            cursor.execute('''INSERT INTO password_reset_tokens (email, token, is_used) VALUES (?, ?, 0)''', (email, token))

            conn.commit()
            conn.close()

            reset_link = f'http://localhost:5000/reset-password?token={token}'
            print(f'Reset link: {reset_link}')


            mail_msg = EmailBuilder().from_email("[email protected]","theArchive").to_many([{"email":email}]).subject("Password Reset Request").html(f"<p>Click <a href='{reset_link}'>here</a> to reset your password.</p>").text(f"Use the following link to reset your password: {reset_link}").build()

            try:
                response = mailer.emails.send(mail_msg)
                print(f'Email sent successsfully: {response.json()}')

                print(f'Password reset link sent to {email}: {reset_link}')
                return jsonify({'message': 'Password reset link sent'}), 200
            except Exception as e:
                print(f'Error sending email: {e}')
                return jsonify({'error': str(e)}), 500
            
            

        except sqlite3.Error as e:
            print(f"Database error: {e}")
            return jsonify({'error': 'Database error occurred'}), 500
    except Exception as e:
        print(f"Forgot password error: {e}")
        return jsonify({'error': 'Failed to process request'}), 500
    

There is a way in css to specify relative to which scroll context a position sticky element should be floating?

<div class="main">
  <div class="row">
    <div class="cell">(0, 0)</div> <!-- I want this to be sticky -->
    <div class="cell">(0, 1)</div>
    <div class="cell">(0, 2)</div>
    ...
    <div class="subtable">
      <div class="somtehing">
        <div class="row">
          <div class="cell">(0, 0)</div> <!-- I also want this one to be sticky to the .main tag -->
          <div class="cell">(0, 1)</div>
          <div class="cell">(0, 2)</div>
          ...

check this codepen example

The first column of the nested table rows, despite of how many tags deep is inside the DOM tree always uses the .main div as it’s scroll context because is its the first one that it found going up in the tree.

// this makes the subtables less annoying enforcing a scroll
// but makes the sticky to be relative to .subtable
.subtable
  height: 100px
  overflow-y: auto

check this other codepen example

If I enforce a height and a scroll-y auto to the .subtable div, then the stickyness of the cells in the subtable are applied to this scroll context since is the first one they found in their way up.

I would like to ignore that first one scroll context and tell to the sticky columns to be aware of the second scroll context in their way up of the tree. Or maybe to specify directly to which tag is supoused to listen.