I’m developing a web-based map interface using a sprite sheet to render various elements, as seen in my project https://bambitp.github.io/StraTAGy/ (source: https://github.com/BambiTP/StraTAGy). The intended design is to have sprites drawn from a PNG file. However, when I open the project in Brave, the areas where the sprite should be appear as black squares.

Here are some screenshots for reference:

Brave (Incorrect Rendering): https://i.sstatic.net/53VdWlNH.png

Firefox/Chrome (Correct Rendering): https://i.sstatic.net/wSJK61Y8.png

What I’ve Checked/Tried:

The sprite sheet image loads without errors (confirmed via the network panel).

No errors are reported in the browser’s console.

The issue is isolated to Brave; Firefox and Chrome render the sprite sheet as expected.

Questions:

Has anyone encountered Brave rendering issues where sprite images are replaced with black squares?

Could this be related to Brave’s handling of hardware acceleration or another graphics processing quirk?

What steps can I take to diagnose or work around this problem?

Any insights or suggestions would be greatly appreciated!

I’m creating a reusable Switch component using Material UI (MUI) and react-hook-form. I want the component to:

Be fully controlled using react-hook-form’s Controller.

Accept dynamic props.

Here’s the current implementation:

import { useFormContext, Controller } from "react-hook-form";
// @mui
import { Switch, FormControlLabel } from "@mui/material";
import { JSX } from "@emotion/react/jsx-dev-runtime";

// ----------------------------------------------------------------------

export function RHFSwitch({ name, disabled, ...other }: any): JSX.Element {
  const { control } = useFormContext();
  return (
    <FormControlLabel
      control={
        <Controller
          name={name}
          control={control}
          render={({ field }) => (
            <Switch disabled={disabled} {...field} checked={field.value} />
          )}
          {...other}
        />
      }
      {...other}
    />
  );
}

Does someone know how to tirgger a JavaScript in an HTML to only load when prompted?

The only thing I came up with is the example below.

Adding the JavaScript like this into HTML:

<div class="unit1">
  <style type="text/script">
    Some script stuff.
  </style>
</div>

And to load the script, rename the “style” tag in the “unit1” div to “script”:

<div class="unit1">
  <script>
    Some script stuff.
  </script>
</div>

I have created a redshift API that my front-end users can use to query the database. For security reasons, The system adds the word Select into before the query returned by user so only select statements can be used, For normal queries it works fine. but since im creating dynamic queries to insert millions of data. My query can be generated as follows.

  `  ${selectString}
    FROM (
   SELECT DISTINCT jsonb_array_elements('[${chunk}]'::jsonb) AS obj
      ) cd
       WHERE NOT EXISTS (
      SELECT 1
       FROM lists_data
        WHERE 
       ${whereString}
       AND list_id = '${listId}'
     AND deleted is false
      )`

Similarly i have cases for insert queries as well. where i receive special charecters in different values in the query and it breaks the syntax of my overall query. For example if i get the following value for the above query:

const chunk = [
  {
    DistributorProductID: "TEST 20'S? OK",
    DistributorID: "1000758"
  },
  {
    DistributorProductID: "X\Y\Z 10"",
    DistributorID: "1000759"
  }
];

Now in the above example, When it will parse the value “TEST 20’S? OK” the query will break because of the single quote, Now one approach is that i can escape the single quote, but i have millions of values, I dont think this is the only approach that i have to escape each value manually. Im handling the exact same situation in postgresql by using dollar signs $$ .. i enclose my query in $$ $$ and no special charecters bother me, but they dont work in redshift. Any help or approach would be appriciated as to how can i encapsulate my string or make it as string literals so i dont have to worry about special charecters in my values.

Btw im using javascript on frontend.

I have tried escaping them for now, but i want a generic and more optimised approach.

I have those links:

<div class="linksblock">
<a link href="www.google.com/1">link 1</a>
<a link href="www.google.com/2">link 2</a>
<a link href="www.google.com/3">link 3</a>
<a link href="www.google.com/4">link 4</a>
<a link href="www.google.com/5">link 5</a>
</div>

I would like to open these links in a pop-up window.
It’s important to note that I can’t modify the links, so I can’t add “onclick” or anything else. So I want to make all links in “linksblock” open in a pop-up window.

I tried this code, but it doesn’t work:

$(".linksblock a").on("click", function() {
  var share_link = $(this).prop('href');
  console.log(share_link);
window.open(share_link, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

});

I’m creating a reusable Select input component using Material UI (MUI) and react-hook-form. I want the component to:

Be fully controlled using react-hook-form’s Controller.

Accept dynamic options passed via props.

Support labels, placeholders, and custom menu styling.

Show validation errors from the form schema.

Here’s the current implementation:

import { JSX } from "@emotion/react/jsx-dev-runtime";
import {
  Select,
  FormLabel,
  FormHelperText,
  FormControl,
  MenuItem,
} from "@mui/material";
import { Controller, useFormContext } from "react-hook-form";

export function RHFCustomSelect({
  name,
  options,
  outerLabel,
  styleMenu,
  placeholder,
  fullWidth = true,
  ...others
}: any): JSX.Element {
  const { control } = useFormContext();

  const menuProps: any = {
    PaperProps: {
      sx: {
        marginTop: "10px",
      },
    },
  };

  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState: { error } }) => (
        <FormControl error={Boolean(error)} fullWidth={fullWidth}>
          {outerLabel && (
            <FormLabel sx={{ pb: "0.6rem" }}>{outerLabel}</FormLabel>
          )}
          <Select
            displayEmpty
            MenuProps={menuProps}
            inputRef={field.ref}
            {...field}
            {...others}
          >
            <MenuItem disabled value="" sx={{ display: "none" }}>
              <em style={{ fontStyle: "normal" }}>{placeholder ?? "Select"}</em>
            </MenuItem>
            {options?.map(({ id, label, value }: any) => (
              <MenuItem
                value={value}
                key={id}
                sx={{ fontSize: "1.5rem", ...styleMenu }}
              >
                {label}
              </MenuItem>
            ))}
          </Select>
          {Boolean(error) && <FormHelperText>{error?.message}</FormHelperText>}
        </FormControl>
      )}
    />
  );
}

My website has a left sidebar containing tools related to the currently displayed screen. Currently it does not stick, so if you want to make any changes, you need to scroll all the way to the top.

The natural way of solving this issue is making the sidebar sticky, but it may happen that its height will be greater than the height of screen. So I’d like to achieve the following behavior:

• If height of the container is less than screen, it should stick to the top.
• If height of the container is greater than screen, it should show at the top, then scroll along with page content until its bottom is visible and then stick to its bottom.

Can such behavior be achieved with pure CSS or do I need to involve some Javascript? I’m using TailwindCSS if it helps anyhow.

---

Edit: Sample code.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <div class="flex flex-row space-x-4 m-4">
        <div class="w-50 bg-zinc-200">
            <div class="h-500 bg-red-400/50 w-full">
                Sidebar
            </div>
        </div>
        
        <div class="grow bg-zinc-400">
            <div class="h-1000 bg-green-400/50 w-full">
                Content
            </div>
        </div>
    </div>
  </body>
</html>

When the red rectangle on the left is higher than the screen, it should stick to the bottom. If it is smaller than the screen (adjust with h-* CSS class, e.g. h-20), then it should stick to the top.

I have created a portfolio website using React js with Node js on VScode to showcase my skillset with a terminal typewriter animation. Everything works perfectly fine on laptop/pc browsers, but when I tried accessing my website on mobile it doesnt show any of the animations even when I switch to desktop website on my android device still no animations playing.

My react js code –>

import './App.css';
import React, { use, useState } from 'react';
import Windowz from './RoomWindow';
import Table from './Tables';
import Footer from './Footer';
import Contents from './ScreenContent';


function App() {
  
    return (
            <div className="App">
            <Windowz />

            <Contents />

            <Table />
            <Footer />
            </div>
        );
}

export default App;

The CSS part –>

/* TABLE ------------------------------------------------ */
svg {
  margin-left: 0;
  width: 100%;
  position: relative;
  border-radius: 3%;
  }


a {
  font-size: 1.5em;
}
footer {
  font-size: 1.3em;
}
/* TABLE------------------------------------------------ */


/* TERMINAL WINDOW ------------------------------------------------ */

/* CONTENT ----------------------------------- */

#fake__Screen:-ms-fullscreen p {
  visibility: visible;
  font-size: 2.0em;
  overflow: auto;
}
#fake__Screen:fullscreen {
  font-size: 2.0em;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

span {
  color: #fff;
  font-family: monospace;
  text-align: left;
  font-size: 1.5em;
  display: inline-flex;
}
a {
  color: #fff;
  font-family: monospace;
  text-align: left;
}
.codeHead {
  color: rgb(0, 229, 255);
  font-family: monospace;
  text-align: left;
  font-size: 1.5em;
  display: inline-flex;
}

.typewriter {
  width: fit-content;
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .7em solid rgb(0, 229, 255); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: -10 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  -webkit-animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .9s step-end infinite;
}
.typewriter1 {
  width: fit-content;
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .7em solid rgb(0, 229, 255); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: -10 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  -webkit-animation: 
    typing 1s steps(60, end),
    blink-caret .5s step-end infinite;
  animation: 
    typing 1s steps(60, end),
    blink-caret .9s step-end infinite;
}
.bio:hover {
  color: rgb(0, 229, 255);
}
.work:hover {
  color: rgb(0, 229, 255);
}
.projects:hover {
  color: rgb(0, 229, 255);
}
/* The typing effect */
@-webkit-keyframes typing {
  from { width: 0 }
  to { width: 40% }
}
@keyframes typing {
  from { width: 0 }
  to { width: 40% }
}
/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(0, 238, 255) }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(0, 208, 255) }
}

#id {
  overflow-y:auto;
}
/* CONTENT ----------------------------------- */

body {
  background-color: rgb(84, 96, 97);
  padding: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
  }
  
  .fakeButtons {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  position: relative;
  top: 6px;
  left: 6px;
  background-color: #ff3b47;
  border-color: #9d252b;
  display: inline-block;
  }
  
  .fakeMinimize {
  left: 11px;
  background-color: #ffc100;
  border-color: #9d802c;
  }
  
  .fakeZoom {
  left: 16px;
  background-color: #00d742;
  border-color: #049931;
  }
  
  .fakeMenu {
  max-width: 748px;
  box-sizing: border-box;
  height: 25px;
  background-color: #bbb;
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  text-align: left;
  }
  
  .fakeScreen {
  background-color: #151515;
  box-sizing: border-box;
  max-width: 748px;
  height: 467.50px;
  margin: 0 auto;
  padding: 20px;
  overflow: auto;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  
  }
  
  p {
  position: relative;
  left: 22%;
  margin-left: -8.5em;
  text-align: left;
  font-size: 2.5em;
  font-family: monospace;
  white-space: normal;
  overflow: hidden;
  width: 0;
  }
  
  .hide {
    display: none;
  }

  /* TERMINAL WINDOW ------------------------------------------------ */

  /* LAPTOP SYLE */

html {
  font-size: 62.5%;
  }
  
  .container {
  margin-top: 70px;
  }
  
  .laptop {
  position: relative;
  margin: auto;
  max-width: 80rem;
  
  .laptop__screen {
    position: relative;
    z-index: 1;
    padding: 3%;
    border-radius: 2rem;
    background: #ecf1f7;
    background-image: linear-gradient(to bottom, #333, #111);
    box-shadow: 0 .1rem 0 #cfcfcf;
    border: 2px solid #ccc;
    
    -webkit-box-shadow:0px 0px 105px 30px rgba(119,171,156,0.55);
    -moz-box-shadow: 0px 0px 105px 30px rgba(119,171,156,0.55);
    box-shadow: 0px 0px 105px 30px rgba(119,171,156,0.55);

  
    img {
      display: block;
      max-width: 100%;
      height: auto;
      aspect-ratio: attr(width) / attr(height);
      background: #000;
    }

  }
  
  .laptop__bottom {
    position: relative;
    z-index: 1;
    margin-right: -7%;
    margin-left: -7%;
    height: .7rem;
    background: #e9eff5;
    background-image: linear-gradient(to right, #d2dde9 0%, #f9fcff 15%, #e5ebf2 40%, #e5ebf2 60%, #f9fcff 85%, #d2dde9 100%);
    
    &::before {
      display: block;
      margin: 0 auto;
      width: 20%;
      height: .7rem;
      border-radius: 0 0 .2rem .2rem;
      background: #f6f9fc;
      background-image: linear-gradient(to right, #c3cfdb 0%, #f6f9fc 10%, #f6f9fc 90%, #c3cfdb 100%);
      content: " ";
    }
  }
  
  .laptop__under {
    position: absolute;
    top: 100%;
    left: 25%;
    display: block;
    width: 50%;
    height: 1.5rem;
    background: #e2e8f0;
    background-image: linear-gradient(to bottom, #e2e8f0, #bec7d1);
  
    &::after, &::before {
      position: absolute;
      top: 0%;
      right: 100%;
      bottom: 0;
      display: block;
      width: 50%;
      border-bottom-left-radius: 100%;
      background: inherit;
      content: " ";
    }
  
    &::after {
      right: auto;
      left: 100%;
      border-bottom-right-radius: 100%;
      border-bottom-left-radius: 0;
    }
  }
  
  .laptop__shadow {
    position: absolute;
    right: -10%;
    bottom: -2.5rem;
    left: -10%;
    z-index: 0;
    height: 2rem;
    background: radial-gradient(ellipse closest-side,#000,transparent);
    opacity: 0.5;
  }
  }
  svg {
  margin-left: 0;
  width: 100%;
  position: relative;
  }
  .bg {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: url(https://i.imgur.com/g2aFOGP.png) no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 10px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3), -5px 5px 15px rgba(0, 0, 0, 0.3);
  width: 85vw;
  height: 100vh;
  position: fixed;
  top: 2%;
  left: 7%;
  max-height: 600px;
  overflow: hidden;
  }

/* LAPTOP SYLE 000000000000000000000000000000000000000000000000*/

/* CLOUDS SYLE 000000000000000000000000000000000000000000000000*/

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
  0% {
      margin-left: -1000px;
  }
  100% {
      margin-left: 100%;
  }
}

@-moz-keyframes animateCloud {
  0% {
      margin-left: -1000px;
  }
  100% {
      margin-left: 100%;
  }
}

@keyframes animateCloud {
  0% {
      margin-left: -1000px;
  }
  100% {
      margin-left: 100%;
  }
}

/* ANIMATIONS */

.x1 {
-webkit-animation: animateCloud 35s linear infinite;
-moz-animation: animateCloud 35s linear infinite;
animation: animateCloud 35s linear infinite;

-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
}

.x2 {
-webkit-animation: animateCloud 20s linear infinite;
-moz-animation: animateCloud 20s linear infinite;
animation: animateCloud 20s linear infinite;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

.x3 {
-webkit-animation: animateCloud 30s linear infinite;
-moz-animation: animateCloud 30s linear infinite;
animation: animateCloud 30s linear infinite;

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}

.x4 {
-webkit-animation: animateCloud 18s linear infinite;
-moz-animation: animateCloud 18s linear infinite;
animation: animateCloud 18s linear infinite;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}

.x5 {
-webkit-animation: animateCloud 25s linear infinite;
-moz-animation: animateCloud 25s linear infinite;
animation: animateCloud 25s linear infinite;

-webkit-transform: scale(0.55);
-moz-transform: scale(0.55);
transform: scale(0.55);
}

/* OBJECTS */

.cloud {
background: #fff;
background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;

-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

height: 120px;
position: relative;
width: 350px;
}

.cloud:after, .cloud:before {
  background: #fff;
content: '';
position: absolute;
z-indeX: -1;
}

.cloud:after {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;

height: 100px;
left: 50px;
top: -50px;
width: 100px;
}

.cloud:before {
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;

width: 180px;
height: 180px;
right: 50px;
top: -90px;
}

/* CLOUDS SYLE 000000000000000000000000000000000000000000000000*/

    /* SUNRISE - SUNSET END ------------------------------------------- */


    @keyframes sunrise {
      from {
        transform: rotate(-45deg);
      }
      
      to {
        transform: rotate(315deg);
      }
      }
      
      @keyframes moonrise {
      from {
        transform: rotate(0deg);
      }
      
      to {
        transform: rotate(180deg);
      }
      }
      
      @keyframes dawn {
      0% {
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      60% {
        opacity: 0;
      }
      }
      
      @keyframes noon {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      75% {
        opacity: 0;
      }
      }
      
      @keyframes dusk {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0;
      }
      70% {
        opacity: 1;
      }
      90% {
        opacity: 0;
      }
      }
      
      @keyframes midnight {
      0% {
        opacity: 1;
      }
      25% {
        opacity: 0;
      }
      50% {
        opacity: 0;
      }
      80% {
        opacity: 1;
      }
      }
      
      body {
      --animation-speed: 1200s;
      background-color: #63689b;
      
      }
      
      body.pause {
      --animation-speed: 0;
      }
      
      .sky {
      width: 85vw;
      height: 100vh;
      position: fixed;
      top: 2%;
      left: 7%;
      max-height: 600px;
      overflow: hidden;
      }
      
      .sky__phase {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transition: opacity 0.2s;
      }
      
      .sky__dawn {
      background: linear-gradient(
        0deg,
        rgba(254, 215, 102, 1) 0%,
        rgba(205, 237, 246, 1) 100%
      );
      animation: linear dawn infinite var(--animation-speed);
      }
      
      .sky__noon {
      background: linear-gradient(
        0deg,
        rgba(205, 237, 246, 1) 0%,
        rgba(36, 123, 160, 1) 100%
      );
      animation: linear noon infinite var(--animation-speed);
      }
      
      .sky__dusk {
      background: linear-gradient(
        0deg,
        rgba(255, 32, 110, 1) 0%,
        rgba(10, 0, 94, 1) 100%
      );
      animation: linear dusk infinite var(--animation-speed);
      }
      
      .sky__midnight {
      background: linear-gradient(
        0deg,
        rgba(2, 0, 20, 1) 0%,
        rgba(10, 0, 94, 1) 100%
      );
      animation: linear midnight infinite var(--animation-speed);
      }
      
      .orbit {
      position: relative;
      width: 500px;
      height: 500px;
      margin: 200px auto;
      transform: rotate(-45deg);
      animation: linear sunrise infinite var(--animation-speed);
      }
      
      @media (min-width: 768px) {
      .sky {
        max-height: 600px;
      }
      .orbit {
        width: 700px;
        height: 700px;
        margin: 150px auto;
      }
      }
      
      @media (min-width: 940px) {
      .orbit {
        width: 800px;
        height: 800px;
      }
      }
      
      @media (min-width: 1200px) {
      body {
        --animation-speed: 1204s;
      }
      .orbit {
        width: 1000px;
        height: 1000px;
        margin: 200px auto;
      }
      }
      
      @media (min-width: 1500px) {
      body {
        --animation-speed: 1206s;
      }
      .orbit {
        width: 1300px;
        height: 1300px;
      }
      }
      
      .sun {
      position: absolute;
      top: -40px;
      left: -40px;
      width: 80px;
      height: 80px;
      background-color: rgb(254, 215, 102);
      border-radius: 50%;
      box-shadow: 0 0 14px 14px rgba(254, 215, 102, 0.2);
      }
      
      .moon {
      position: absolute;
      bottom: -40px;
      right: -40px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #ebf3fe;
      box-shadow: inset -40px 0px 0px #d8e8f7, inset 20px 0px 0px #ffffff, inset -50px 0px 0px 20px #e2eefa, 0px 0px 0px 20px  rgba(255, 255, 255, 0.05), 0px 0px 0px 40px  rgba(255, 255, 255, 0.025), 0px 0px 0px 60px  rgba(255, 255, 255, 0.0125);
      transition: all 0.2s ease-in;
      }
      .moon:after {
      content: "";
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background-color: #d8e8f7;
      position: absolute;
      top: 20%;
      left: 20%;
      box-shadow: 40px -20px 0px -10px #d8e8f7, 40px 10px 0px -15px #d8e8f7;
      }
      
      #sky__stars > div {
      width: 3px;
      height: 3px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      }
      
      #toggle-animation {
      position: fixed;
      bottom: 1em;
      right: 1em;
      text-transform: uppercase;
      background-color: rgb(2, 0, 20);
      color: #fff;
      border: 0;
      padding: 0.5em 1em;
      letter-spacing: 0.5px;
      }
      
      #toggle-animation:hover {
      background-color: rgb(61, 0, 21);
      cursor: pointer;
      }
      
      .paused {
      display: none;
      }
      
      .pause .paused {
      display: block;
      }
      
      .pause .playing {
      display: none;
      }
      

    /* SUNRISE - SUNSET END ------------------------------------------- */

The room window jsx code –>

import './App.css';
import React, { useState } from 'react';

function Windowz() {
    //////////////////////////////////////////////////////
    const starsArray = [];
    const stars = 40;
    let x,y = 0;

    // Generate stars randomly using absolute position
    for (let i = 0; i < stars; i++) {
        x = Math.floor(Math.random() * 100 + 1) + "%";
        y = Math.floor(Math.random() * 100 + 1) + "%";
        starsArray.push(x);
        starsArray.push(y);
    }
    //////////////////////////////////////////////////////

    return (
        <div className="bg">
        <div className="x1">
                <div className="cloud"></div>
            </div>

            <div className="x2">
                <div className="cloud"></div>
            </div>

            <div className="x3">
                <div className="cloud"></div>
            </div>

            <div className="x4">
                <div className="cloud"></div>
            </div>

            <div className="x5">
                <div className="cloud"></div>
            </div>
            <div className="sky">
            <div className="sky__phase sky__dawn"></div>
            <div className="sky__phase sky__noon"></div>
            <div className="sky__phase sky__dusk"></div>
            <div className="sky__phase sky__midnight">
                <div id="sky__stars">{starsArray.map((element,index) => {
                    return(<div key={index} style={{ position: "relative", top: element, left: element }}></div>);
                })}</div>
            </div>
        
            <div className="orbit">
                <div className="sun"></div>
                <div className="moon"></div>
            </div>
            
        </div>
        </div>
    );
}

export default Windowz;

I have developed a Visual Builder Application that includes an Action Chain responsible for processing invoice-related logic. This Action Chain is currently triggered manually by a button click on the UI and performs the following actions:

Retrieves invoice data from Oracle Fusion

Sends the data to an external REST API

Handles request signing, response handling, and error checking

Writes the result back to custom fields in Fusion

Now, I would like to automate this process and have the Action Chain run in the background without user interaction, ideally on a scheduled basis.

My questions:
Is there a supported way to run an Action Chain programmatically in the background (without UI interaction)?

Can I expose the Action Chain via a custom REST endpoint and trigger it from an ESS job or another scheduled process in Fusion?

Any advice or examples would be appreciated!

Thanks!

I have a problem with communication between flutter App and InAppWebView (for IOS/Android it works). When i build it as web it doesn’t work. Any suggestions what i did wrong or how i can get it works? Thanks in advance.

Please give me some good advice how to solve it of any other options how to make that alive.
Here is my code sample.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

var js = "console.log('Hello from JavaScript!');";
var js2 = "changeBackgroundColor();";

class _MyAppState extends State<MyApp> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;
  InAppWebViewSettings settings = InAppWebViewSettings(
      isInspectable: true,
      mediaPlaybackRequiresUserGesture: false,
      allowsInlineMediaPlayback: true,
      iframeAllow: "camera; microphone",
      iframeAllowFullscreen: true);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Official InAppWebView website")),
        body: SafeArea(
            child: Column(children: <Widget>[
          SizedBox(
            height: 100,
          ),
          Expanded(
            child: Stack(
              children: [
                InAppWebView(
                  key: webViewKey,
                  initialUrlRequest: URLRequest(
                    url: WebUri("https://jspagesample.web.app"),
                  ),
                  initialSettings: settings,
                  onWebViewCreated: (controller) {
                    webViewController = controller;
                    debugPrint("onWebViewCreated");
                  },
                  onLoadStart: (controller, url) {
                    debugPrint("onLoadStart");
                  },
                  onPermissionRequest: (controller, request) async {
                    return PermissionResponse(
                        resources: request.resources,
                        action: PermissionResponseAction.GRANT);
                  },
                  onLoadStop: (controller, url) async {
                    debugPrint("onLoadStop");
                  },
                  onReceivedError: (controller, request, error) {},
                  onConsoleMessage: (controller, consoleMessage) {
                    debugPrint(consoleMessage.message);
                  },
                ),
              ],
            ),
          ),
          ButtonBar(
            alignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                child: Text("Run JS 1"),
                onPressed: () async {
                  debugPrint("JS Result: Before");
                  if (webViewController == null) {
                    debugPrint("webViewController is null");
                    return;
                  }
                  await webViewController!.evaluateJavascript(source: js);
                  debugPrint("JS Result: After");
                },
              ),
              ElevatedButton(
                child: Text("Run JS 2"),
                onPressed: () async {
                  debugPrint("JS 2 Result: Before");
                  await webViewController!
                      .evaluateJavascript(source: js2)
                      .then((value) {
                    debugPrint("JS Result: $value");
                  });
                  debugPrint("JS 2 Result: After");
                },
              ),
            ],
          ),
        ])));
  }
}

I’m encountering the error TypeError: User.findOne.mockResolvedValue is not a function while trying to mock the Mongoose findOne method in my Jest tests. The issue occurs even though I have properly mocked the User model using jest.mock() and set up mock implementations for its methods.
Here’s my setup:

I am using ES modules with import and export in my code.

I am mocking a Mongoose model, specifically the findOne and create methods in the User.js model, to simulate the behavior of the database during tests.

I am running tests with Jest, and using the supertest package to send HTTP requests to my application.

Inside models/mocks/User.js:

const findOne = jest.fn();
const create = jest.fn();

export default {findOne, create};

Inside jest.config.js:

export default {
    testEnvironment: 'node',
    transform: {},
    moduleNameMapper: {
        '^(\.{1,2}/.*)\.js$': '$1',
    },
};

Inside auth.test.js:

import {jest} from '@jest/globals';
import request from 'supertest';
import app from '../app.js';
jest.mock('../models/User.js');
import User from '../models/User.js';
import bcrypt from "bcrypt";

let dummyUser;

beforeAll(async () => {
    dummyUser = {
        _id: 'fakeid123',
        username: 'mockuser',
        email: '[email protected]',
        password: await bcrypt.hash('password123!', 10)
    };
})




describe('Auth tanpa DB (mock)', ()=>{
    it('register user successfully', async ()=>{
        console.log(User.findOne);
        User.findOne.mockResolvedValue(null);
        User.create.mockResolvedValue(dummyUser);
        
        const res = await request(app)
            .post('/api/auth/register')
            .send({
                username: dummyUser.username,
                email: dummyUser.email,
                password: 'password123!'
            });
        expect(res.status).toBe(201);
        expect(res.body).toHaveProperty('message');
    })
    
    it('login user successfully', async ()=>{
        User.findOne.mockResolvedValue(dummyUser);
        
        const res = await request(app)
            .post('/api/auth/login')
            .send({
                email: dummyUser.email,
                password: 'password123',
            });
        expect(res.status).toBe(200);
        expect(res.body).toHaveProperty('token');
    })
})

and the this is the error:

 FAIL  tests/auth.test.js
  ● Console
                                                                                                                                                                         
    console.log
      [Function: findOne]

      at Object.<anonymous> (tests/auth.test.js:26:11)

  ● Auth tanpa DB (mock) › register user successfully
                                                                                                                                                                         
    TypeError: User.findOne.mockResolvedValue is not a function

      25 |      it('register user successfully', async ()=>{
      26 |              console.log(User.findOne);
    > 27 |              User.findOne.mockResolvedValue(null);
         |                           ^
      28 |              User.create.mockResolvedValue(dummyUser);
      29 | 
      30 |              const res = await request(app)

      at Object.<anonymous> (tests/auth.test.js:27:16)

  ● Auth tanpa DB (mock) › login user successfully

    TypeError: User.findOne.mockResolvedValue is not a function

      40 |
      41 |      it('login user successfully', async ()=>{
    > 42 |              User.findOne.mockResolvedValue(dummyUser);
         |                           ^
      43 | 
      44 |              const res = await request(app)
      45 |                      .post('/api/auth/login')

      at Object.<anonymous> (tests/auth.test.js:42:16)