I have a project and I have a trouble to fix this, my problem here is that my image options is moving up and down whenever I point my cursor to my image options it affects my descriptions. What should I do to fix this? I’m just starting out, so I appreciate your understanding.

I just want to fix image option to move up and down whenever I point the other images and to not affect the descriptions.
Here is the output

Here is my code.

:root {
  --text-dark: #000000;
  --text-light: #727274;
  --extra-light: #f3f4f6;
  --max-width: 1200px;
  --header-font: "Montserrat", sans-serif;
  --text-font: "Poppins", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-image: url('backg5.png');
  background-size: cover;
  background-position: center 10px;
  background-attachment: fixed;
  color: white;
  overflow-x: hidden;
  padding-top: 80px; 
}

header {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: top 0.3s ease-in-out;
  color: white;
  background: hsl(0, 100%, 100%);
  box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1), 4px 0 6px rgba(0, 0, 0, 0.1);
  padding: 10px 15px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.logo img {
  max-width: 120px;
  margin-top: 5px;
}

.product-container {
  position: absolute;
  display: inline-block;
  align-items: center;
  justify-content: flex-start;
  transform: translateY(-50%);
  left: 40px;
  top: 50%;
}

.product-icon {
  font-size: 30px;
  color: green;
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-left: auto;
  background-color: #f9f9f9;
  width: 1260px;
  top: 71%;
  padding: 0;
  left: 0;
  z-index: 1000;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  border-radius: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.dropdown:hover .dropdown-content {
  display: block;
  padding-top: 3px;
  background-color: #f9f9f9;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  opacity: 1;
  visibility: visible;
}

.dropdown-content:hover {
  display: block;
  opacity: 1;
  visibility: visible;
}

.dropdown:hover .dropdown-content {
  background-color: whitesmoke;
}

.container {
  display: flex;
  overflow-x: auto;
  margin: 10px;
  scroll-padding: 0px;
  gap: 10px;
  max-height: 100vh;
  overflow-y: hidden;
}

.container::-webkit-scrollbar {
  display: block;
}

.container::-webkit-scrollbar-track {
  background-color: #AAB99A;
  border-radius: 10px;
}

#Container {
  display: flex;
  scroll-snap-type: x mandatory;
}

.item {
  flex: 0 0 auto;
}

.category {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 5px;
}

.product-category {
  width: 100px;
  height: 100px;
  object-fit: contain;
  gap: 2px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 10px;
}

.product-category:hover {
  transform: scale(1.1);
  padding: 5px;
  z-index: 10;
}

.page-body {
  font-family: var(--header-font);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  padding: 5px;
}

.page-container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  padding: 30px;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  gap: 10px;
}

@media (min-width: 768px) {
  .page-container {
    flex-direction: row;
  }
}

.image-gallery {
  flex: 0.9;
  text-align: left;
}

.image-gallery img {
  max-width: 100%;
  height: auto;
}

.image-wrapper {
  max-width: 450px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thumbnail-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 5px 0;
  width: 100%;
}

.thumbnail-row {
  display: flex;
  gap: 4px; 
  overflow-x: auto;
  height: 80px;
  scroll-behavior: smooth;
  pointer-events: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding-top: 8px;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
}

.thumbnail-row::-webkit-scrollbar {
  display: none;
}

.thumbnail-row img {
  width: 75px;
  height: 75px;
  border: 2px solid transparent;
  transition: border 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
  scroll-snap-align: start;
  box-sizing: border-box;
  object-fit: cover;
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  z-index: 1;
  display: block;
}

.thumbnail-row img:hover {
  border-color: #5F8B4C;
  z-index: 1;
}

/* Selected state */
.thumbnail-row img.selected {
  border-color: #5F8B4C;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  font-size: 30px;
  padding: 8px;
  cursor: pointer;
  z-index: 10;
  color: white;
  background-color: rgba(87, 83, 83, 0.428);
 
}

.arrow img {
  width: 25px;
  height: 25px;
  pointer-events: none;
}

.arrow.left {
  position: absolute;
  left: -0px;
}

.arrow.right {
  position: absolute;
  right: -0px;
}

.product-details {
  flex: 1;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  margin-top: 0;
  padding-left: 0;
}

@media (min-width: 768px) {
  .product-details {
    padding-left: 0px;
    padding-top: 0;
    flex-direction: column;
  }
}

.product-details h2 {
  color: var(--text-dark);
  font-family: var(--header-font);
  text-align: left;
}

.price {
  color: #5F8B4C;
  font-weight: bold;
  font-family: var(--header-font);
  font-size: large;
  text-align: left;
}

.description {
  margin: 15px 0;
  color: #666;
  font-family: var(--text-font);
  font-size: 16px;
  text-align: left;
}

.color-name {
  color: var(--text-dark);
  font-weight: bold;
  text-align: left;
}

.colors {
  margin: 10px 0;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
  text-align: left;
}

.color-option {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;

  margin-right: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
  transform-origin: center center;
  border: 2px solid #EFF3EA;
  flex-shrink: 0; 
}

.color-option:hover {
  outline: 2px solid #EFF3EA;
  outline-offset: 0px;
  transform: scale(1.2);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GOOJODOQ</title>

 
  <link rel="stylesheet" href="productin2.css" />

  <!-- External Scripts -->
  <script src="https://unpkg.com/scrollreveal"></script>
  <script src="main.js" defer></script>

 
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Antonio:wght@700&family=Russo+One&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;700&family=Oswald:wght@400;700&family=Rajdhani:wght@400;700&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Montserrat:wght@400;700&family=Raleway:wght@400;700&display=swap" rel="stylesheet" />

  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
</head>

<body>


  <header>
    <div class="logo">
      <img src="goojodoq-logo.png" alt="Goojodoq Logo" />
    </div>
    
    <div class="product-container">
      <!-- Product Dropdown -->
      <div class="dropdown">
        <a href="#" id="product-link">
          <i class="fas fa-shopping-cart product-icon"></i>
        </a>
        <div class="dropdown-content">
          <div class="container" id="Container">
            <!-- Product Items -->
            <div class="item"><img src="fan.png" alt="Fan" class="product-category" /></div>
            <div class="item"><img src="mouse.png" alt="Mouse" class="product-category" /></div>
            <div class="item"><img src="stylus_pen.png" alt="Stylus Pen" class="product-category" /></div>
            <div class="item"><img src="USB.png" alt="USB" class="product-category" /></div>
            <div class="item"><img src="keyboard.png" alt="Keyboard" class="product-category" /></div>
            <div class="item"><img src="speaker.png" alt="Speaker" class="product-category" /></div>
            <div class="item"><img src="fan.png" alt="Fan" class="product-category" /></div>
            <div class="item"><img src="mouse.png" alt="Mouse" class="product-category" /></div>
            <div class="item"><img src="stylus_pen.png" alt="Stylus Pen" class="product-category" /></div>
            <div class="item"><img src="USB.png" alt="USB" class="product-category" /></div>
            <div class="item"><img src="keyboard.png" alt="Keyboard" class="product-category" /></div>
            <div class="item"><img src="speaker.png" alt="Speaker" class="product-category" /></div>
          </div>
        </div>
      </div>
    </div>
  </header>

  
  <main>
    <div class="page-body">
      <div class="page-container">
        <!-- Image Gallery -->
        <div class="image-gallery">
          <div class="image-wrapper">
            <img id="mainImage" src="/pictures/1.jpg" alt="Headphones" />
            <div class="thumbnail-wrapper">
              <button class="arrow left" onclick="scrollThumbnails(-1)">&#8249;</button>
              <div class="thumbnail-row" id="thumbnailRow">
                <img src="/pictures/1.jpg" onclick="changeImage(this)" />
                <img src="/pictures/2.jpg" onclick="changeImage(this)" />
                <img src="/pictures/3.jpg" onclick="changeImage(this)" />
                <img src="/pictures/4.jpg" onclick="changeImage(this)" />
                <img src="/pictures/5.jpg" onclick="changeImage(this)" />
                <img src="/pictures/7.jpg" onclick="changeImage(this)" />
                
              </div>
              <button class="arrow right" onclick="scrollThumbnails(1)">&#8250;</button>
            </div>
          </div>
        </div>

        <!-- Product Details Section -->
        <div class="product-details">
          <h2>Beats Solo3 Wireless</h2>
          <div class="price">$999.99</div>
          <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
          <div class="colors">
            <div class="color-name">Available Colors</div><br>
            <div class="color-option" style="background-color: white;"></div>
            <div class="color-option" style="background-color: pink;"></div>
            <div class="color-option" style="background-color: purple;"></div>
          </div>
        </div>

      </div>
    </div>
  </main>

</body>
</html>

document.addEventListener("DOMContentLoaded", function () {
    let lastScrollTop = 0;
    const header = document.querySelector("header");
  
    window.addEventListener("scroll", function () {
      const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
      header.style.top = currentScroll > lastScrollTop ? "-100px" : "0";
      lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
    });
  
    const container = document.getElementById("Container");
    if (container) {
      container.addEventListener("wheel", function (event) {
        event.preventDefault();
        this.scrollLeft += event.deltaY;
      });
    }
  
    function changeImage(imgElement) {
        const mainImage = document.getElementById("mainImage");
        if (mainImage) {
          mainImage.src = imgElement.src;
        }
      
        document.querySelectorAll(".thumbnail-row img").forEach(img => {
          img.classList.remove("selected");
        });
      
        imgElement.classList.add("selected");
      }
  
    function changeQty(change) {
      const qtyElement = document.getElementById("quantity");
      if (qtyElement) {
        let qty = parseInt(qtyElement.textContent) || 1;
        qty = Math.max(qty + change, 1);
        qtyElement.textContent = qty;
      }
    }
  
    const scrollContainer = document.getElementById("thumbnailRow");
    const leftArrow = document.querySelector(".arrow.left");
    const rightArrow = document.querySelector(".arrow.right");
  
    function scrollThumbnails(direction) {
      const scrollAmount = 100;
      if (scrollContainer) {
        scrollContainer.scrollBy({
          left: direction * scrollAmount,
          behavior: "smooth"
        });
      }
    }
  
    if (leftArrow && rightArrow && scrollContainer) {
      leftArrow.addEventListener("click", () => scrollThumbnails(-1));
      rightArrow.addEventListener("click", () => scrollThumbnails(1));
    }
  
    const mainImage = document.getElementById("mainImage");
    const thumbnails = document.querySelectorAll(".thumbnail-row img");
  
    thumbnails.forEach(thumbnail => {
      thumbnail.addEventListener("mouseover", () => {
        // Set as main image
        if (mainImage) {
          mainImage.src = thumbnail.src;
        }
  
        thumbnails.forEach(img => img.classList.remove("selected"));
  
        // Add selected to hovered
        thumbnail.classList.add("selected");
      });
    });

    window.img = function (src) {
      const mainImage = document.getElementById("mainImage");
      if (mainImage) {
        mainImage.src = src;
      }
    };
  
    if (typeof ScrollReveal !== "undefined") {
      ScrollReveal().reveal(".page-body", {
        origin: "bottom",
        distance: "50px",
        duration: 1000,
        delay: 100,
        reset: true
      });
    } else {
      console.warn("ScrollReveal is not defined.");
    }
  
    window.changeImage = changeImage;
    window.changeQty = changeQty;
  });

This question is about the Firefox API function:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage

Why does browser.tabs.sendMessage() not seem to return a specific error that causes the rejection of the Promise as a reason? Instead, the function appears to return a generic Error and the same message that a specific Error would have.

Is this due to the implementation of sendMessage()? Does it use the generic Error type, because it must be able to return all types of Errors?

---

I know that https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject says that:

The static Promise.reject function returns a Promise that is rejected. For debugging purposes and selective error catching, it is useful to make reason an instanceof Error.

---

I would expect to know the specific Error, because if it is just an Error, then I am not sure if it is always easy to understand what causes it.

i am using angular reactive from module to my application here is my html code

  <form *ngIf="myForm" [formGroup]="myForm" (submit)="onSubmit()">
    <mat-select *ngIf="!option.isMultiple" [formControlName]="option.id">
   <mat-option [value]="option.values">
     {{ option.values }}
   </mat-option>
 </mat-select>
 </mat-form-field>
</form>

And inside the typescript i am populating the data whatever user was selected

  ngOnInit(){
      let data = items.map(e=>e.key);
      this.form.controls[this.option.id].setValue(data);// this is talking time to render
 }

if i am not setting the values inside formcontrol its working fine however if the items length is even 100 its almost stuck for 10 seconds. What is wrong here.

Drop down is able to render 1000 records immediately then why setting formValue is getting stuck i don’t see any DOM insertion its just a single statement to set form value.

import { CSSProperties, ReactNode, useState } from 'react';

type LayoutWithSidebarProps = {
    className?: string;
    sidebar: ReactNode;
    content: ReactNode;
    maxWidth?: string;
    isPageLayout?: boolean;
};

export function LayoutWithSidebar({
    className = '',
    sidebar,
    content,
    maxWidth,
    isPageLayout = false,
}: LayoutWithSidebarProps) {
    const [isSidebarExpanded, setSidebarExpanded] = useState<boolean>(false);

    const toggleSidebar = () => {
        setSidebarExpanded(!isSidebarExpanded);
    };

    return (
        <div
            className={`quark-layout-with-sidebar ${isPageLayout ? 'quark-layout-with-sidebar--page-layout' : ''} ${className}`}
            style={style}
        >
            <div className={'quark-layout-with-sidebar__sidebar-expand'}>
                <a onClick={toggleSidebar}>{'>>'}</a>
            </div>
            {isSidebarExpanded && (
                <div
                    className={`quark-layout-with-sidebar__overlay ${isSidebarExpanded ? 'quark-layout-with-sidebar__overlay--active' : ''}`}
                    onClick={toggleSidebar}
                />
            )}

            <div
                className={`quark-layout-with-sidebar__sidebar ${isSidebarExpanded ? 'quark-layout-with-sidebar__sidebar--expanded' : ''}`}
            >
                <div className={`quark-layout-with-sidebar__sidebar-inner`}>
                    {sidebar}
                </div>
            </div>
            <div className={'quark-layout-with-sidebar__content'}>
                <div className={`quark-layout-with-sidebar__content-inner`}>
                    {content}
                </div>
            </div>
        </div>
    );
}

I have a layout wrapper component that accepts two ReactNodes as props -> sidebar and content. The result is a styled page layout, so I dont have to do it over and over again in all my apps

But I am not sure if it is a good pattern to pass this components (sidebar and content) as a props. My biggest question is, if for example I pass a component to the content prop, and the component will re-render, will it cause the whole parent to re-render?

Are there any differences in the behaviour in react 19 or older ones?

How is the best way to write such layout wrapper components, or should they be avoided completely?

Thank you

I’m working on this blog website of my university project and my team wanted to make a discord like search when for example searching for articles by its category-title-author ect … we wanted it to look like the discord one where you search by user and links he sent ect .. enter image description here

The best approach I’ve came up with so far is rendering some spans before the input but then I don’t get the form like this category : AI author : James
But I get category: author: AI James

My register server action works on local host but breaks when deployed to digitalocean. I have tried running it on the server in development mode, but that doesn’t make a difference.

I’m receiving a timeout error and I have no idea why.

Error in registerUser: [Error: Connection timeout] { code: 'ETIMEDOUT', command: 'CONN' }

Here is the server action:

"use server";

import { actionClient } from "@/lib/safe-action";
import { registerSchema } from "@/schemas/Register-schema";
import { prisma } from "@/prisma";
import bcrypt from "bcryptjs";
import crypto from "crypto";
import { sendSMS } from "@/lib/sms";
import { sendEmail } from "@/lib/email";

export const registerUser = actionClient
  .schema(registerSchema)
  .action(
    async ({
      parsedInput: {
        forename,
        surname,
        email,
        mobile,
        password,
        confirmPassword,
        role,
      },
    }) => {
      try {
        const emailLower = email.toLowerCase();
        if (password !== confirmPassword) {
          throw new Error("Passwords do not match.");
        }
        const existingUser = await prisma.user.findFirst({
          where: {
            email: emailLower,
          },
        });

        if (existingUser) {
          return { error: "User already exists" };
        }
        const salt = bcrypt.genSaltSync(10);
        const pwHash = bcrypt.hashSync(password, salt);
        const expires = new Date();
        expires.setHours(expires.getHours() + 6);
        const token = crypto.randomBytes(32).toString("hex");

        await prisma.user.create({
          data: {
            forename,
            surname,
            email: emailLower,
            mobile,
            role,
            password: pwHash,
          },
        });

        await prisma.emailToken.create({
          data: {
            token,
            expires,
            user: {
              connect: {
                email: emailLower,
              },
            },
          },
        });

        const mobileToken = (
          Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000
        ).toString();
        const mobileExpires = new Date();
        mobileExpires.setHours(mobileExpires.getHours() + 6);

        await prisma.mobileToken.create({
          data: {
            token: mobileToken,
            expires: mobileExpires,
            user: {
              connect: {
                mobile,
              },
            },
          },
        });
        await sendEmail(
          email,
          "[email protected]",
          "Verify your email",
          `Visit ${process.env.BASE_URL}/verify-email?token=${token} to verify your email address.`,
          `<a href="${process.env.BASE_URL}/verify-email?token=${token}">Verify your email</a>`
        );

        await sendSMS(
          mobile,
          "Tutacall",
          `Your verification code is: ${mobileToken}. Login and use it within 6 hours.`
        );

        return { success: "Verification Email and SMS sent!" };
      } catch (error) {
        console.error("Error in registerUser:", error);
        return { error: "An error occurred. Please try again." };
      }
    }
  );

I would be very grateful for some help with this.

I have two canvases inside the body of an HTML-file. I access the first canvas normally from an main thread script and perform an animation with requestAnimationFrame. The second canvas should draw the background and gets an array of objects per frame to draw. Because this background drawing is relativly heavy and I don’t want the animation at the first canvas to lag, I transfered the second canvas via transferControllTofOffscreen to a webworker. Every frame I send the list of objects to the webworker and he draws them directly to the second canvas. But somehow the performance on the main canvas is also getting worse, if I increase the rendering tasks on the worker? It‘s so bad that even rendering everything inside the main thread appears to be faster.

I already tried to only request another frame if the worker has rendered the previous one and I am aware that I might could increase the performance by making the rendering functions more performant but I wonder why I am getting so bad results out of the webworker.

main.js
const mainCanvas = document.getElementById("main-canvas");
const ctx = mainCanvas.getContext("2d");
let offscreenCanvas = document.getElementById("offscreen-canvas");
offscreeenCanvas = offscreenCanvas.tranferControlToOffscreen();

const worker = new Worker("worker.js");
worker.postMessage({type: "init", canvas: offscreenCanvas}, [offscreenCanvas]);

let workerIsDone = true;

function drawScene(objects){

    renderForeground(ctx);

    if (workerIsDone){
        workerIsDone = false;
        worker.postMessage({type:"render", objects: objects});
    }

    requestAnimationFrame(drawScene);
}

worker.onmessage = ()=> workerIsDone = true;

//worker.js

let offscreenCanvas;
let ctx;

onmessage = (e) => {
    if (e.data.type === 'init') {
        const { canvas } = e.data;

        offscreenCanvas = canvas;
        ctx = offscreenCanvas.getContext('2d');
    }

    if (e.data.type === 'render' && ctx) {
        renderBackground(ctx, e.data.objects);

        postMessage("Worker is finished");
    }
};

I’m writing a script that reads image files, manipulates (resets the color of fully transparent pixels to pure black, crops the images), and writes the exports the output images to the lossless WebP. I’m using the Sharp.js library.

The output image is written from a buffer which is a 1D array of RGBA pixel data (a cropped image). console.log(imgBuffer); gives:
<Buffer 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 ... 19246 more bytes>

console.log(imgBuffer.slice(imgBuffer.length - 50, imgBuffer.length)); gives the last bytes:
<Buffer 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00>

Here is the code that write the buffer to an image file:

sharp(imgBuffer, {
    raw: {
      height: bin.height,
      width: bin.width,
      channels: 4
    }})
  .webp({ lossless: true, quality: 100, alphaQuality: 100, force: true })
  .toFile('output.webp');

However, the output image contains “distorted” colors for some of the fully transparent pixels.

Here is an example of an input file. As it is seen, the fully transparent pixels have pure black color (here, I’m using GIMP to manipulate Alpha channel).

Here is an example of an output WebP file. As it is seen, the fully transparent pixels have different colors than in the input file.

Question: In Sharp.js, how to prevent transparent pixels color change during export?

I’m facing an issue with Prisma Client initialization after running npx prisma generate. Here’s the error I’m encountering:

PS C:UsersUSERDataAnalytics> node Scripts/loadData.js      
[class PrismaClient]
C:UsersUSERDataAnalyticsnode_modules.prismaclientdefault.js:43
    throw new Error('@prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.');
^

Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
    at new PrismaClient (C:UsersUSERDataAnalyticsnode_modules.prismaclientdefault.js:43:11)
    at Object.<anonymous> (C:UsersUSERDataAnalyticsScriptsloadData.js:5:16)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
    at node:internal/main/run_main_module:36:49

Node.js v22.14.0

Load Data.js

const fs = require('fs');
const csv = require('csv-parser');
const { PrismaClient } = require('@prisma/client'); 
console.log(PrismaClient); // Added this for debugging
const prisma = new PrismaClient();  

const path = require('path');

async function ImportMatches() {
    const results = [];
    fs.createReadStream(path.join(__dirname, 'matches.csv'))
        .pipe(csv())
        .on('data', (data) => {
            results.push({
                id: parseInt(data.id),
                season: parseInt(data.season),
                date: new Date(data.date),
                team1: data.team1,
                team2: data.team2,
                // (other fields trimmed for brevity)
            });
        })
        .on('end', async () => {
            for (const match of results) {
                await prisma.match.create({ data: match });
            }
            console.log('Matches imported successfully!');
            await prisma.$disconnect();
        })
        .on('error', (error) => {
            console.error('CSV read error:', error);
        });
}

ImportMatches();

when i run npx prisma generate

 PS C:UsersUSERDataAnalytics> npx prisma generate
Environment variables loaded from .env
Prisma schema loaded from prismaschema.prisma

✔ Generated Prisma Client (v6.6.0) to .generatedprisma in 102ms

Start by importing your Prisma Client (See: https://pris.ly/d/importing-client)

Tip: Easily identify and fix slow SQL queries in your app. Optimize helps you enhance your visibility: https://pris.ly/--optimize
node Scripts/loadData.js

Things I’ve tried:

Running npx prisma generate again.

Checking node_modules/@prisma/client for the generated client.

Rebuilding node_modules by deleting node_modules and package-lock.json, then running npm install.

I’m using Node.js v22.14.0, Prisma v6.6.0, and PostgreSQL as the database.

enter image description here

I’m using Flipbook to display a PDF in my application. Everything works perfectly on my local server — the PDF is correctly loaded, rendered, and printable.

However, when deployed to production, the PDF still loads (confirmed via dev tools), but the pages are not being displayed correctly, and printing the PDF doesn’t work. It just shows a blank or loading screen.

I suspect the issue might be related to how WebGL is handled in the deployment environment, or something about how PDF.js is rendering the document after deployment. The browser console logs a warning:
Warning: TT: undefined function: 32

Also, I noticed that even when I try to disable WebGL manually, it remains enabled:

js
Copier
Modifier
!!window.WebGLRenderingContext && !!document.createElement(‘canvas’).getContext(‘webgl’) // always returns true
I’ve tried switching to canvas rendering mode, but it seems Flipbook is still trying to use WebGL anyway.

I don’t have any error on console

enter image description here

I’m working on a project using Selenium (Python) where I need to programmatically fill out a form that includes credit card input fields. However, the site prevents standard JavaScript injection methods from setting values in these inputs.
Here’s the input element I’m working with:

<input type="text" class="form-text is-wide" aria-label="Name on card" value="" maxlength="80">

And here’s the JavaScript I’ve been trying to use. Keep in mind I’ve tried a bunch of other JavaScript solutions:

(() => {
  const input = document.querySelector('input[aria-label="Name on card"]');
  if (input) {
    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
    setter.call(input, 'Hello World');
    input.dispatchEvent(new Event('input', { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));
  }
})();

This doesn’t update the field as expected. However, something strange happens: if I activate the DOM inspector (Ctrl+Shift+C), click on the element, and then re-run the same JavaScript snippet, it does work. Just clicking the input normally or trying to type manually doesn’t help.

I’m assuming the page is using some sort of script (maybe Stripe.js or another payment processor) that interferes with the regular input events.

Image of what it looks like: https://imgur.com/a/WodBrHW
How can I programmatically populate this input field in a way that mimics real user input?

recently I experienced too many issues after upgrading to RN 0.77.0
the last thing is the app cannot connect to metro, or that’s what I think. And then can’t receive any logs from my app.
Using a IOS simulator (Iphone 16 pro) IOS 18.4

Metro config (in metro.config.js)

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
* Metro configuration for React Native
* https://reactnative.dev/docs/metro
*
* @type {import('@react-native/metro-config').MetroConfig}
*/
const config = {};
module.exports =mergeConfig(getDefaultConfig(__dirname), config); 

“isFF is not defined” error when scrolling in a React project

I’m experiencing the “isFF is not defined” error when scrolling in my React project. Here’s the stack trace:

ReferenceError: isFF is not defined
    at onWheelY (http://localhost:3000/static/js/bundle.js:138223:5)
    at HTMLDivElement.onWheel (http://localhost:3000/static/js/bundle.js:138268:7)

Context

• The project is built with React and uses antd for UI components.
• Dependencies related to the issue:

"dependencies": {
    "antd": "^5.24.6",
    "rc-select": "^14.16.6",
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
}

Minimal Reproducible Code

The error occurs when using this <Select> component inside <Form.Item>:

import React from "react";
import { Form, Select } from "antd";

const SkillsForm = () => {
    return (
        <Form>
            <Form.Item name="skills" label="Skills">
                <Select
                    mode="tags"
                    style={{ width: "100%" }}
                    placeholder="Enter skills and press Enter"
                    tokenSeparators={[","]}
                    options={[
                        { label: "JavaScript", value: "JavaScript" },
                        { label: "Python", value: "Python" }
                    ]}
                />
            </Form.Item>
        </Form>
    );
};

export default SkillsForm;

What I Have Tried

• Updated React, Ant Design, and rc-select to the latest versions.
• Explicitly defined isFF, but the error persists.
• Checked rc-select for any references to isFF, but didn’t find any direct mentions.

Question

Where could isFF be coming from if I’m not using it explicitly? How can I properly fix this error?

Screenshot of the error

(https://i.sstatic.net/Gd80FdQE.png)

Any help would be greatly appreciated!

My USDT flash software can send TRC20 and ERC20 tokens with confirmation, allowing them to be traded, swapped, or used on any platform. Transactions can last up to a year and include full transaction hashes and history. You can send amounts ranging from $5 to $2,000,000 per transaction, with no daily limits.

To ensure a secure and fair trade, we require the use of an escrow service. You can provide an escrow service that you trust, or we can guide you through our recommended two-party escrow process, which is designed to protect both parties. We will explain the process in detail before you proceed, allowing you to verify its security.
how can we reach the right audience?

CONTEXT:
Code projects of any kind get more and more difficult to test during creation the bigger they get. What I mean by “test during creation” is when you run code you just wrote to see if it works how you intended and scan for errors. I’m not talking about unit testing. While some may use unit testing for this process, I typically find it less overwhelming if I do the initial tests manually.

I’m sure it’s a common issue to have to deal with login screens as a developer after you implement them, because each time you run the code, it forces you to log in again. It’s for features like this, where their existence makes testing more repetitive, that I use dev scripts.

Dev scripts are just how I refer to scripts that are self contained, ignored by git, and can access and change any code for ease of testing. This is important to distinguish because it means I have to build them with the assumption I can’t change the original code for testing.

PROBLEM:
Now for the actual issue. I’m having trouble setting up a dev script for a Nuxt website. To run it automatically without modifying old code, I placed it in the public folder and used a browser extension (User JavaScript and CSS) to auto run it if I’m on a localhost website. This works great for everything the browser has direct access to, but trying to run anything else is where it becomes a problem.

Because the public folder is treated as completely static and separate from the rest of the project, it can’t access or run anything outside of itself. I first tried to get around this by using API. By setting up an API end point file and having git ignore it, it can act as a sort of “helper” file to access the rest of the project. This works for static data objects which aren’t meant to change, but it completely crumbles when you attempt to import and run any kind of function, including full modules.

I’m positive there’s a better solution here, but I’m not experienced enough to see it. The fact that Nuxt’s API folder can gain access to entire modules is great. I’m sure there must be a way to just build most of my code there and use the original dev script to run the API script, but that’s honestly where my knowledge is most lacking.

QUESTION:
Without editing any of the original code, how would you set up a dev script for Nuxt that 1) has access to the entire project, and 2) can be auto-run when the website loads?