Cypress showing false positive when element is covered by a transparent element

I recently had an issue where a button was covered by a transparent element (z-index and position absolute issue) making the button visible but not clickable.

Cypress passed these tests and was able to both see and click the button.

Is there a way to get Cypress to check if there is a transparent element sitting over another element?

My code is simply:

cy.get('.btn-main').click();

I added

cy.get('.btn-main').should('be.visible');

but it still passes.

Would anyone know how I can get Cypress to make sure the button is actually clickable?

How to stream a large file on Kubernetes pod

I want to create a large file(>200GB) and store it in Min.IO store. I deploy my attempts in a web app on a Kubernetes pod.
One attempt was with a modified Redeable stream and csv-writter library using the putObject method. Somethig like this:

const { faker } = require('@faker-js/faker');
    const { createObjectCsvStringifier: createCsvStringifier } = require('csv-writer');
    const Minio = require('minio');
    const { Readable } = require('stream');
    const minioClient = new Minio.Client({...});
    
    const csvStringifier = createCsvStringifier({
       header: [
           { id: 'userId', title: 'userId' },
           { id: 'username', title: 'username' },
           .... ]});
    const generateRandomRow = () => ({
    userId: faker.database.mongodbObjectId(),
    username: faker.person.firstName(),
    ...});
    class csvGenerator extends Readable {
    #count = 0;
    #headerPushed = false;
    #numRows;

    constructor(numRows, options) {
        super(options); 
        this.#numRows = numRows; 
    }

    _read(size) {
        if (!this.#headerPushed) {
            this.push(csvStringifier.getHeaderString());
            this.#headerPushed = true;
        }

        this.push(csvStringifier.stringifyRecords([generateRandomRow()]));
        if (++this.#count === this.#numRows) {
            this.push(null);
        }
    }
} 
router.options('/BigFileCreation', cors());
router.post('/BigFileCreation', cors(), async (request, response) => {
    const NUM_ROWS = parseInt(request.body.numberOfRows, 10);
    const NAME_FILE = request.body.nameOfFile;
    const BUCKET = request.body.bucket;

    response.status(202).json({"Request status": "Reached"});
    try {
        const requestFile = await minioClient.putObject(BUCKET, NAME_FILE, new csvGenerator(NUM_ROWS, { highWaterMark: 1 }), null, metaData);
        console.log(requestFile);
    } catch (error) {
        console.error(error);
        response.status(500).json(error.toString());
    }
});

This handles files less than 1GB with no issue, it takes less than 5 min. to create and upload, but when I request a 2 GB file or more my pod just stop, I guess I just get a OOMKilled status on my pod and thats why I don’t get any error msg on the logs.

I also test it with a temporary file on disk with the same csv-writter library and then stream it with fPutObject method on MinioSDK

const csvWriter = createCsvWriter({
  path: 'StellarDB.csv',
  header: [
    { id: 'userId', title: 'userId' },
    { id: 'username', title: 'username' },
    { id: 'lastName', title: 'lastName' },
    { id: 'email', title: 'Email' },
    { id: 'column', title: 'column' },
    { id: 'float', title: 'float' },
    { id: 'jobArea', title: 'jobArea' },
    { id: 'jobTitle', title: 'jobTitle' },
    { id: 'phone', title: 'phone' },
    { id: 'alpha', title: 'alpha' }
  ]
});
const writeLargeCsvFile = async (NUM_ROWS) => {
  let batchSize = 500; 
  let batch = [];

  for (let i = 0; i < NUM_ROWS; i++) {
    batch.push(generateRandomRow());
    
    if (batch.length === batchSize || i === NUM_ROWS - 1) {
      await csvWriter.writeRecords(batch); 
      batch = []; 
    }
  }
};

After more research I notice that probably the issue was on the library I was using for csv, so I changed to fast-csv and my final attempt was something like this:

const { format } = require('fast-csv');
async function generateAndUploadCSV(name, NUM_ROWS, bucketName) {
  const pass = new PassThrough();

  const uploadPromise = minioClient.putObject(bucketName, name, pass)
    .catch(err => {
      console.error('Error subiendo objeto:', err);
      throw err;
    });

  const csvStream = format({ headers: [
    'userId', 'username', 'lastName', 'email', 'column', 'float', 'jobArea', 'jobTitle', 'phone', 'alpha'
  ]});
  csvStream.pipe(pass);

  let i = 0;

  function write() {
    let ok = true;
    while (i < NUM_ROWS && ok) {
      i++;
      const record = {
        userId: i,
        username: faker.person.firstName(),
        lastName: faker.person.lastName(),
        email: faker.internet.email(),
        column: faker.database.column(),
        float: faker.number.float(3),
        jobArea: faker.person.jobArea(),
        jobTitle: faker.person.jobTitle(),
        phone: faker.phone.imei(),
        alpha: faker.string.alpha({ length: { min: 5, max: 10 } }),
      };
      ok = csvStream.write(record);
    if (i < NUM_ROWS) {
      csvStream.once('drain', () => setImmediate(write));
    } else {
      csvStream.end();
    }
  }
  csvStream.on('error', err => {
    pass.destroy(err);
  });
  write();
  const objInfo = await uploadPromise;
}

I also assign more resources on my pod (8GB memory and 4 cores). But all of them behave the same, just one file of 1GB and no more.

Also I modified my Dockerfile on the entrypoint with CMD ["node", "--max-old-space-size=6144","index.js"]

I research more about it and found there is this option to upload the file on pieces and the merge it back together when I’m going to use it. This could be useful for csv files but what if I want to use JSON files also.
Creating and storing the file is just my first step in testing tools that should handle large files without overflow issues. All of them run on Kubernetes pods.
Just adding more info my service pod is handled by Knative with a yml file similar to this:

apiVersion: serving.knative.dev/v1
kind: Service
metadata:
  name: transformTesting
spec:
  template:
    spec:
      containers:
        - image: .../...:transform-testing-SNAPSHOT
          env:
            - name: FORCE_NEW_REVISION
              value: "true"  

Wish someone could point me towards a solution or a concept that I’m ignoring.

Is there a straight Javascript build of Rapier2D that does Not require WASM or bundling?

I’m using straight ASP.NET Standard (not CORE) with a bunch of .js scripts. I have tried several sources of imports such as import RAPIER_IMPORTED_MODULE from ‘https://cdn.jsdelivr.net/npm/@dimforge/[email protected]/+esm’;
but they fall short of “full functionality” because they don’t expose ALL of the necessary API functions to utilize EventQueue, for example. I believe the proper version of Rapier2D to use is 0.17.0. Isn’t there a single-script version available somewhere?

Why are certain parameters of the shinyWidgets::autonumericInput(…) function conflicting with other CSS in my code?

I created the below function numInputFun(...) for using the shinyWidgets::autonumericInput(...) function in various modules of a large App. Note that I included the CSS for the hover-over pop-forward feature in the numInputFun(...) function so I don’t have to keep repeating the same CSS in the UI’s of the various modules that use this function. I also try scoping the CSS per module, using session$userData, which you’ll see in the below examples, and which I believe is a safe way to store per-session, per-module states in Shiny. The numInputFun(...) works fine in most places, including in Module Example #1 below. But for some strange reason, the numInputFun(...) does not work in Module Example #2 below UNLESS I comment out the minimumValue parameter in the input_box section of numInputFun(...). In my more complete version of code that this Module Example #2 derives from, I also have to comment out the maximumValue parameter to get that module working correctly.

Why does numInputFun(...) work fine in Module Example #1 with both minimumValue and maximumValue parameters activated, but not in Module Example #2 unless both minumumValue (and maximumValue in the larger code that Module Example #2 is derived from) parameters are deactivated? Is there a CSS clash? I need to place both lower and upper input limits so I prefer retaining the minimumValue and maximumValue parameters, unless someone know of another way for placing input range limits.

Below I show on the left how Module Example #2 correctly renders when the minimumValue parameter is deactivated, and on the right how the same Module Example #2 example does not correctly render when the minimumValue parameter is activated:

enter image description here

Here is the numInputFun(...) function:

library(shiny)
library(shinyWidgets)

numInputFun <- function(
    inputId,                   
    value = 0,                 
    ns = identity,             
    session = shiny::getDefaultReactiveDomain()
) {
  if (missing(inputId)) stop("inputId is required")
  
  # Insert CSS once per module instance
  css_key <- paste0("pop_forward_css_added_", ns(""))
  insert_css <- NULL
  if (is.null(session$userData[[css_key]])) {
    insert_css <- singleton(tags$style(HTML("
      .pop-forward {
        transition: transform 0.2s ease-in-out;
      }
      .pop-forward:hover {
        transform: scale(1.05);
        z-index: 2;
      }
    ")))
    session$userData[[css_key]] <- TRUE
  }
  
  label <- tags$span("Label:")
  container_style <- paste0()
  
  input_box <- shinyWidgets::autonumericInput(
    inputId = ns(inputId),
    label = NULL,
    value = value,
    minimumValue = 1, ### DEACTIVATE TO RUN MODULE CORRECTLY!!! ###
    maximumValue = 10, ### ALSO DEACTIVATE THIS ONE TO RUN MODULE CORRECTLY IN LARGER CODE (NOT SHOWN) ###
    modifyValueOnWheel = TRUE,
    style = paste0()
  ) 
  
  tagList(
    insert_css,
    div(
      style = container_style,
      label,
      div(class = "pop-forward", input_box)
    )
  )
}

Module Example #1:

mod_numberInput_ui <- function(id, session = getDefaultReactiveDomain()) {
  ns <- NS(id)
  tagList(
    numInputFun(
      inputId = "periods",
      value = 5,
      ns = ns
    ),
    verbatimTextOutput(ns("output_text"))
  )
}

mod_numberInput_server <- function(id) {
  moduleServer(id, function(input, output, session) {
    output$output_text <- renderPrint({
      paste("Input * 2:", input$periods * 2)
    })
  })
}

# Dummy parent App for running module independently
ui <- fluidPage(
  tags$h3("Example of numInputFun in a Module"),
  mod_numberInput_ui("example")
)

server <- function(input, output, session) {
  mod_numberInput_server("example")
}

shinyApp(ui, server)

Module Example #2:

mod_curve_ui <- function(id, session = getDefaultReactiveDomain()) {
  ns <- NS(id)
  tagList(
    numInputFun(inputId = "periods",ns = ns),
    uiOutput(ns("action_bttns"))
  )
}

mod_curve_server <- function(id, test_mode = FALSE) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    
    rv <- reactiveValues(
      rotate_mode = FALSE
    )
    
    output$action_bttns <- renderUI({
      btn <- actionButton(ns("toggle_rotate"), "Rotate Mode")
      reset_btn <- actionButton(ns("reset_curve"), "Reset Curve")
      data_btn  <- actionButton(ns("open_table_modal"), "View Data")
      tagList(btn, reset_btn, data_btn)
    })
  })
}

# Dummy parent App for running module independently
ui <- fluidPage(
  mod_curve_ui("example")
)

server <- function(input, output, session) {
  mod_curve_server("example", test_mode = TRUE)
}

shinyApp(ui, server)

How to properly use JWT secret from environment variables in TypeScript (Node.js)?

I’m writing a Mongoose user schema in TypeScript, and inside the schema methods, I want to generate JWT access tokens and refresh tokens.

I installed the required packages using:

npm i jsonwebtoken  
npm i -D @types/jsonwebtoken

However, when I call jwt.sign(), I get this TypeScript error:

No overload matches this call.
  Overload 1 of 5, '(payload: string | object | Buffer<ArrayBufferLike>, secretOrPrivateKey: null, options?: (SignOptions & { algorithm: "none"; }) | undefined): string', gave the following error.
    Argument of type 'Secret' is not assignable to parameter of type 'null'.
      Type 'string' is not assignable to type 'null'.
  Overload 2 of 5, '(payload: string | object | Buffer<ArrayBufferLike>, secretOrPrivateKey: Buffer<ArrayBufferLike> | Secret | PrivateKeyInput | JsonWebKeyInput, options?: SignOptions | undefined): string', gave the following error.
    Type 'string' is not assignable to type 'number | StringValue | undefined'.
  Overload 3 of 5, '(payload: string | object | Buffer<ArrayBufferLike>, secretOrPrivateKey: Buffer<ArrayBufferLike> | Secret | PrivateKeyInput | JsonWebKeyInput, callback: SignCallback): void', gave the following error.
    Object literal may only specify known properties, and 'expiresIn' does not exist in type 'SignCallback'.

I’m passing the arguments like this (example):

jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: process.env.ACCESS_TOKEN_EXPIRY });

But TypeScript doesn’t accept it.

What is causing these overload errors? How can I fix the types or usage of jwt.sign in TypeScript to properly generate tokens inside Mongoose schema methods?

I wrote this code inside my Mongoose user schema method to generate an access token:

userSchema.methods.generateAccessToken = function (
  this: IUseSchema & mongoose.Document,
): string {
  if (!this._id) {
    throw new ApiError(400, "Payload ID is missing");
  }

  if (!env.ACCESS_TOKEN_KEY) {
    throw new ApiError(400, "ACCESS_TOKEN_KEY is missing in env");
  }

  if (!env.ACCESS_TOKEN_EXPIRY) {
    throw new ApiError(400, "ACCESS_TOKEN_EXPIRY is missing in env");
  }

  const secretKey = env.ACCESS_TOKEN_KEY as Secret;
  const expiresIn = env.ACCESS_TOKEN_EXPIRY as string;

  return jwt.sign({ id: this._id }, secretKey, { expiresIn });
};

But I get an error on the line with jwt.sign.

I don’t understand what type safety I am missing here. Can someone explain what might be wrong?

MDX+Next.js (app router) TypeError: createContext only works in Client Components. Add the “use client” directive at the top of the file to use it

I was trying to create a boilerplate for Next.js + MDX (https://mdxjs.com/) using the official guide provided on Next.js website (https://nextjs.org/docs/app/guides/mdx) and I have been facing this error

 ⨯ TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/pg/page.mdx:7:85)
    at <unknown> (rsc)/./app/pg/page.mdx (/home/baltej/Desktop/files/posts/.next/server/app/pg/page.js:33:1)
    at Function.__webpack_require__ (.next/server/webpack-runtime.js:33:42) {
  page: '/pg'
}
 GET /pg 500 in 501ms

I am using App router + Nextjs

My next.config.js

import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions` to include markdown and MDX files
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  // Optionally, add any other Next.js config below
}
 
const withMDX = createMDX({
  // Add markdown plugins here, as desired
})
 
// Merge MDX config with Next.js config
export default withMDX(nextConfig)

My source Tree:

.
├── app
│   ├── layout.js
│   ├── md-components.js
│   └── pg
│       └── page.mdx
├── eslint.config.mjs
├── jsconfig.json
├── next.config.js
├── package.json
├── package-lock.json
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
└── README.md

Swept AABB collision between circle and rectangle

I’m fairly new to javascript, and I’ve been trying to build a small game to learn new concepts. An issue I’m encountering is that projectiles in the game often have a higher velocity than the width of objects they should collide with, and so pass through without colliding when checking for collision every frame.

I’m working on implementing (what I think is called) swept AABB collision, where my program checks the path an object takes and determines if it should have hit something. My current code takes in a rectangle and a circle, along with their x any y velocities, and gets their relative velocity. It then inflates the area of the rectangle in the x and y by 2 times the circle’s radius.

This is then fed into my current sweptAABB function, which I admit I’m not entirely sure how it works (I cobbled it together from several sources):

function sweptAABB(pointx, pointy, velx, vely, deltaTime, rectx, recty, rectw, recth){
  //pointx and pointy are the circle's center, velx and vely are the relative velocities 

  //how far the "point" (this is the circle, but it's a point since we're expanding our rectangle to account for it's radius) will move during the frame:
  const movementX = velx*(deltaTime);
  const movementY = vely*(deltaTime)
  
  const invMoveX = movementX !== 0 ? 1 / movementX : Infinity;
  const invMoveY = movementY !== 0 ? 1 / movementY : Infinity;
  
  //times that the point would enter/exit the rectangle
  const tEnterXY = {x: (rectx-pointx)*invMoveX, y:(recty - pointy) * invMoveY}
  const tExitXY = {x: (rectx+rectw-pointx)*invMoveX, y:(recty+recth - pointy) * invMoveY};

  
  //the earliest posible enter/exit times
  const enterTime = Math.max(Math.min(tEnterXY.x, tExitXY.x), Math.min(tEnterXY.y, tExitXY.y));
  const exitTime = Math.min(Math.max(tEnterXY.x, tExitXY.x), Math.max(tEnterXY.y, tExitXY.y));

  return enterTime <= exitTime && exitTime >= 0 && enterTime <= 1;
  
}

The issue I’m seeing is that occasionaly the function will return true if the corner of the rectangle is near but not touching the circle, like this: (I can’t embed images yet lol)

I’m not sure whether the mistake is in the code or a logic error on my part, but any help understanding or fixing this problem would be greatly appreciated.

reactstrap AccordionItem items not expanding when rendered with map() inside a Component

I’m trying to render an reactstrap Accordion while mapping an array from JSON.

I seem to have the IDs being assigned correctly but none of the AccordionItems will expand (unless of course I remove their tags, then they all expand but won’t ever close again).

I tried bring the Component being used inside the map() loops into the parent Component but that didn’t make any difference.

I can see that the state value is being changed correctly, but it’s not flowing through to any action.

Appreciate any insight as to why this is happening. It’s all a bit crude and confusing at this point.

Component “Posts” executes the map(), and inside the map it is using the Post component to render individual posts.

Posts:

// LIST POSTS COMPONENT
export function Posts({ posts, loading }) {
  const [open, setOpen] = useState('2');
    const toggle = (id) => {
    if (open === id) {
      setOpen();
    } else {
      setOpen(id);
    }
  };

  // TRACE console output
  if (process.env.REACT_APP_TRACE === "true") {
    console.log('TRACE: Posts: Posts({posts, loading})');
  };

  if (loading) {
    return <Loading />;
  };

  console.log("!!! open: " + open);
  
  // Set i to the beginning of the loop
  i = 1;
  console.log("i init:" + i);
  

  return (
    <ul>
      <Accordion open={open} toggle={toggle}>
        {posts.map((post) => (
          <Post key={post.post_key}
            post_key={post.post_key}
            title={post.title}
            site_id={post.site_id} id={post.id}
            url={post.url} date={post.date}
            excerpt={post.excerpt}
          />
        ))}
      </Accordion>
    </ul>
  )
};

Post:

// POST PRESENTATION COMPONENT
export function Post(props) {
  // TRACE console output
  if (process.env.REACT_APP_TRACE === "true") {
    console.log('TRACE: apiTestWpCom: Post(props)');
  };

  // Store the current i for use and then iterate for next
  let iCurrent = i;
  // Two execs for each async call so halving to floor
  iCurrent = new String(Math.floor(iCurrent / 2));
  // Iterate
  i++;

  return (
      <AccordionItem>
        <AccordionHeader targetId={iCurrent}>
        {/* <AccordionHeader> */}
          <p><a href={props.url}>{props.title}</a><br />Site ID: {props.site_id}</p>
          <p>iCurrent: {iCurrent}</p>
        </AccordionHeader>
        <AccordionBody accordionId={iCurrent}>
        {/* <AccordionBody> */}
          <p>{props.excerpt}</p>
          <p>{iCurrent}</p>
        </AccordionBody>
      </AccordionItem>
  )
};

I can see in the Console that the value of the open state is being modified but there’s absolutely nothing happening on the front-end (all AccordionItems begin and remain collapsed).

I can see in the Console the value of open changing.

TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 2 Posts.js:65
i init:1 Posts.js:69
TRACE: apiTestWpCom: Post(props) 14 Posts.js:19
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 1 Posts.js:65
i init:1 Posts.js:69
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 1 Posts.js:65
i init:1 Posts.js:69
TRACE: apiTestWpCom: Post(props) 14 Posts.js:19
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 2 Posts.js:65
i init:1 Posts.js:69
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 2 Posts.js:65
i init:1 Posts.js:69
TRACE: apiTestWpCom: Post(props)

I seem to have the IDs for AccordionHead and AccordionBody being set sequentially and correctly (albeit in a very crude and offensive way), but I’m really new to this so not sure if those are being absorbed in a static fashion at-render, or if they’re also being reset every time the value of i is reset in Posts.

enter image description here

I’m still kind of learning how states are interacting between Components. Wondering if I need to pass a reference to the state into the internal Post Component, but not sure exactly what to pass it as (I did pass open, setOpen and toggle into Post as properties, but without knowing what it expects the to be called – if anything – of course it didn’t do much).

Little help? 🙂

How to filter multiple words with indexOf

I’m gonna try my best to explain it. Lets say there’s a video called Pizza Town. I not only want users to be able to find it by searching Pizza Town, but also by searching Town Pizza.

return "" + p1.split(',').filter(word => word.toLowerCase().indexOf(p2.toLowerCase().split(',')) > -1);

BaseWindow doesnt show when electron app starts

import { app, BaseWindow } from "electron";

app.whenReady().then(() => {
  const window = new BaseWindow({
    title: "main",
    show: true,
    url: "https://www.google.com",
  });
  window.setBounds({
    x: 100,
    y: 100,
    width: 800,
    height: 600,
  });
});

I am expecting a window of specified size to show when i run electron.
intead it is giving me below error

> [email protected] start
> electron ./src/main.mjs --experimental-modules

/Users/arup/programming/JS/omnia/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron exited with signal SIGSEGV

OmNxgRipple (NGXUI) full-screen wrapper blocking clicks on child elements

I am trying to create a wrapper component in Angular that shows a background ripple animation (using @omnedia/ngx-ripple) over the entire page, but leaves all inputs, links, and buttons in the foreground interactive. I have tried various solutions, but my content always gets stuck (clicks don’t propagate) or I never see the ripple. Below I describe how I set up the code and where I encounter the problem.

Context:

I am using Angular (v19) and Tailwind CSS for styles.

I installed @omnedia/ngx-ripple successfully (e.g., npm install @omnedia/ngx-ripple).

I want my entire “Coming Soon” page to be wrapped in a wrapper that shows the full-screen ripple, but does not block interactions on internal components (inputs, links, buttons, etc.).

I initially tried using directly as the parent of all content, but then the children are no longer clickable.

CODE:

coming-soon-page Template:

<app-ripple-background>
  <div class="bg-neutral-900">
    <app-topbar></app-topbar>
    <div class="min-h-screen flex flex-col items-center justify-center text-center bg-neutral-900 text-white px-4">
      <om-gradient-text [text]="'Coming Soon'"
                        [styleClass]="'mb-4 font-extrabold text-6xl md:text-8xl'"></om-gradient-text>
      <p class="text-lg md:text-xl mb-8 max-w-2xl mt-6">
        A smarter way to receive curated tech, development, and cybersecurity insights — powered by AI.
        <span class="inline-flex items-center mt-1">
        <svg height="24" width="24" fill="#FFFFFF" viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" class="sparkle">
          <path
            d="M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z"></path>
        </svg>
      </span>
      </p>
      <form class="flex flex-col sm:flex-row items-center sm:items-start gap-2 w-full max-w-md mx-auto">
        <input
          type="email"
          placeholder="Enter your email"
          class="p-3 rounded-lg text-white w-full bg-neutral-800"
          required
        />
        <button type="submit" class="notify-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bel-2" viewBox="0 0 256 256">
            <path fill="#000"
                  d="M224 71.1a8 8 0 0 1-10.78-3.42a94.13 94.13 0 0 0-33.46-36.91a8 8 0 1 1 8.54-13.54a111.46 111.46 0 0 1 39.12 43.09A8 8 0 0 1 224 71.1M35.71 72a8 8 0 0 0 7.1-4.32a94.13 94.13 0 0 1 33.46-36.91a8 8 0 1 0-8.54-13.54a111.46 111.46 0 0 0-39.12 43.09A8 8 0 0 0 35.71 72m186.1 103.94A16 16 0 0 1 208 200h-40.8a40 40 0 0 1-78.4 0H48a16 16 0 0 1-13.79-24.06C43.22 160.39 48 138.28 48 112a80 80 0 0 1 160 0c0 26.27 4.78 48.38 13.81 63.94M150.62 200h-45.24a24 24 0 0 0 45.24 0M208 184c-10.64-18.27-16-42.49-16-72a64 64 0 0 0-128 0c0 29.52-5.38 53.74-16 72Z"/>
          </svg>
          <span class="text">Notify Me</span>
          <span class="circle"></span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bel-1" viewBox="0 0 256 256">
            <path fill="#fff"
                  d="M224 71.1a8 8 0 0 1-10.78-3.42a94.13 94.13 0 0 0-33.46-36.91a8 8 0 1 1 8.54-13.54a111.46 111.46 0 0 1 39.12 43.09A8 8 0 0 1 224 71.1M35.71 72a8 8 0 0 0 7.1-4.32a94.13 94.13 0 0 1 33.46-36.91a8 8 0 1 0-8.54-13.54a111.46 111.46 0 0 0-39.12 43.09A8 8 0 0 0 35.71 72m186.1 103.94A16 16 0 0 1 208 200h-40.8a40 40 0 0 1-78.4 0H48a16 16 0 0 1-13.79-24.06C43.22 160.39 48 138.28 48 112a80 80 0 0 1 160 0c0 26.27 4.78 48.38 13.81 63.94M150.62 200h-45.24a24 24 0 0 0 45.24 0M208 184c-10.64-18.27-16-42.49-16-72a64 64 0 0 0-128 0c0 29.52-5.38 53.74-16 72Z"/>
          </svg>
        </button>
      </form>
      <div class="flex items-center justify-center text-center mt-8 gap-2">
        <a href="https://github.com/C0MPL3XDEV" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
              <path stroke-dasharray="32" stroke-dashoffset="32"
                    d="M12 4c1.67 0 2.61 0.4 3 0.5c0.53 -0.43 1.94 -1.5 3.5 -1.5c0.34 1 0.29 2.22 0 3c0.75 1 1 2 1 3.5c0 2.19 -0.48 3.58 -1.5 4.5c-1.02 0.92 -2.11 1.37 -3.5 1.5c0.65 0.54 0.5 1.87 0.5 2.5c0 0.73 0 3 0 3M12 4c-1.67 0 -2.61 0.4 -3 0.5c-0.53 -0.43 -1.94 -1.5 -3.5 -1.5c-0.34 1 -0.29 2.22 0 3c-0.75 1 -1 2 -1 3.5c0 2.19 0.48 3.58 1.5 4.5c1.02 0.92 2.11 1.37 3.5 1.5c-0.65 0.54 -0.5 1.87 -0.5 2.5c0 0.73 0 3 0 3">
                <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.7s" values="32;0"/>
              </path>
              <path stroke-dasharray="10" stroke-dashoffset="10"
                    d="M9 19c-1.41 0 -2.84 -0.56 -3.69 -1.19c-0.84 -0.63 -1.09 -1.66 -2.31 -2.31">
                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" values="10;0"/>
              </path>
            </g>
          </svg>
        </a>
        <a href="https://instagram.com/carmine.developer" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <circle cx="17" cy="7" r="1.5" fill="currentColor" fill-opacity="0">
              <animate fill="freeze" attributeName="fill-opacity" begin="1.3s" dur="0.15s" values="0;1"/>
            </circle>
            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
              <path stroke-dasharray="72" stroke-dashoffset="72"
                    d="M16 3c2.76 0 5 2.24 5 5v8c0 2.76 -2.24 5 -5 5h-8c-2.76 0 -5 -2.24 -5 -5v-8c0 -2.76 2.24 -5 5 -5h4Z">
                <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="72;0"/>
              </path>
              <path stroke-dasharray="28" stroke-dashoffset="28"
                    d="M12 8c2.21 0 4 1.79 4 4c0 2.21 -1.79 4 -4 4c-2.21 0 -4 -1.79 -4 -4c0 -2.21 1.79 -4 4 -4">
                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.6s" values="28;0"/>
              </path>
            </g>
          </svg>
        </a>
      </div>
      <footer class="mt-12 text-sm text-gray-400">
        &copy; {{ date.getFullYear() }}  C0MPL3XDEV — All rights reserved.
      </footer>
    </div>
  </div>
</app-ripple-background>```

background component template:

    <om-ripple
  [rippleBorderColor]="'rgba(255, 255, 255, 0.7)'"
  [rippleColor]="'rgba(174, 174, 174, 0.54)'">
  <ng-content></ng-content>
</om-ripple>

scrollIntoView – React working but is scrolling to the center of the element before its clicked (need it to center after click)

I am continuing to work on this and get better at REACT. I’ve spent a few days trying to figure out why it’s doing this so I’m here to ask for any insight- how would I go about triggering the executeScroll function I made to perform after the element has been clicked instead of centering the element before it was clicked?

Or am I just targeting the wrong element? It’s a gallery page that shows images of art and when you click on one of the images it pops open a modal – and the modal that pops up is the one I want to center on the page to scrollTo. Any insight is very much appreciated – thank you!!

(also I will remove the excessive console.log lines once I figure this out)

import { useState, useRef } from "react";
import { PropTypes } from "prop-types";
import GalleryData from "../data/GalleryData";
import styles from "../components/GalleryList.module.css";

function GalleryList() {
    return (
        <div className={styles.gallery}>
            <div className={styles.overlayNone}>
                {GalleryData.map((gallery) => (
                    <Gallery galleryObj={gallery} key={gallery.name} />
                ))}
            </div>
        </div>
    );
}

function Gallery({ galleryObj }) {
    const [isOpenModal, setIsOpenModal] = useState(null);

    Gallery.propTypes = {
        galleryObj: PropTypes.shape({
            name: PropTypes.string.isRequired,
            description: PropTypes.string.isRequired,
            bulletName: PropTypes.string.isRequired,
            bulletPoints: PropTypes.string.isRequired,
            bulletPoints2: PropTypes.string.isRequired,
            imagePath: PropTypes.bool.isRequired,
        }),
    };
    const myRef = useRef(null);

    const executeScroll = () => {
        const returnScroll = document.body.scrollHeight / 2;
        // console.log(returnScroll);
        const test = document.getElementById("box");
        let testBox = test.getBoundingClientRect();
        let testBoxHeight = testBox.height;
        console.log(testBox);
        console.log(returnScroll);
        let testPreview = returnScroll - testBoxHeight;
        console.log(testPreview);
        let testAgain = returnScroll - window.scrollY;
        console.log(testAgain);
        let finalExam = returnScroll + testAgain;
        console.log(finalExam);
        console.log(myRef);
        myRef.current.scrollIntoView({ behavior: 'smooth', block: 'center',})    // window.scrollTo({ top: testAgain, behavior: "smooth" });

// test.scrollIntoView({ behavior: 'smooth', block: 'center' });
// its currently centering div placement before it clicks open. need to find a way to center it AFTER modal opens
    }

    return (
        <div id="box"
            onClick={() => setIsOpenModal(!isOpenModal)}
            className={`${isOpenModal ? styles["overlay"] : styles["overlayNone"]}`}
            ref={myRef}

        >
            <div
                className={`${
                    isOpenModal
                        ? styles["modalBackground"]
                        : styles["modalBackgroundNone"]
                }`}
                onClick={executeScroll}


            >
                <img
                    src={galleryObj.imagePath}
                    alt={galleryObj.name}
                    className={`${
                        isOpenModal ? styles["galleryPrevModal"] : styles["galleryPrev"]
                    }`}
                />
                <div
                    className={`${isOpenModal ? styles["modalText"] : styles["none"]}`}
                >
                    <h2 className={`${isOpenModal ? styles["modalh2"] : styles["none"]}`}>
                        {galleryObj.name}
                    </h2>
                    <p className={`${isOpenModal ? styles["modalp"] : styles["none"]}`}>
                        {galleryObj.description}
                    </p>
                    <h3 className={`${isOpenModal ? styles["modalh3"] : styles["none"]}`}>
                        {galleryObj.bulletName}
                    </h3>                   
                    <ul className={`${isOpenModal ? styles["modalBullet"] : styles["none"]}`}>
                        <li>
                        {galleryObj.bulletPoints}
                        </li>
                        <li>
                        {galleryObj.bulletPoints2}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
}

export default GalleryList;

How do I use Parameterized configuration with Firebase Functions onSchedule?

I am trying to use environment variables with onSchedule. But it only accepts a string, not an Expression<string> or similar. Although value() makes it compile, it will not actually deploy.

Can I use onSchedule with Parameterized configuration as recommended in the docs? Or do I need to fall back to environment variables?

import { onSchedule } from "firebase-functions/v2/scheduler";
import { defineString} from "firebase-functions/params";

const schedule = defineString("REFRESH_SCHEDULE");

export const refreshSchedule = onSchedule(
  {
    schedule: schedule, // Adding .value() makes it compile, but then it doesn't deploy.
  },
  async () => {
    // Do Stuff
  }
);