itty-router and TypeScript with middleware

I’m trying to create a CloudFlare Worker using the itty-router. Following the guide on TypeScript we have to define the TypeScript types as in the code below.

The code works fine but there’s a TypeScript error in the part async...:

Argument of type '({ content }: IRequest, env: Args[0], ctx: Args[1]) => Promise<{ success: boolean; status: number; data: { [key: string]: any; }; error: null; } | { success: boolean; status: number; data: null; error: any; }>' is not assignable to parameter of type 'RequestHandler<IRequest, []>'.
   Target signature provides too few arguments. Expected 3 or more, but got 1.ts(2345)

import { createClient } from '@supabase/supabase-js'
import { AutoRouter, IRequest, withContent } from 'itty-router'

interface Env {
    SUPABASE_URL: string
    SUPABASE_KEY: string
}
type CFArgs = [Env, ExecutionContext]

const router = AutoRouter<IRequest, CFArgs>()

router.post(
    '/clients',
    withContent,
    async ({ content }, env, ctx) => {
        try {
            const body = content as { [key: string]: any }
            const newClient = { ...body }

            const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY)
            const { data, error } = await supabase.from('clients').insert(newClient)

            if (error) throw new Error(`Supabase error: ${error.message}`)

            return {
                success: true,
                status: 200,
                data: newClient,
                error: null,
            }
        } catch (error: any) {
            return { success: false, status: 500, data: null, error: error.message }
        }
    }
)

itty-router and TypeScript with middelware

I’m new to CloudFlare Workers and TypeScript and I’m trying to create my first CloudFlare Worker using the itty-router. Following the guide on TypeScript we have to define the TypeScript types as in the code below.

The code works fine but there’s a TypeScript error in the part async...:

Argument of type ‘({ content }: IRequest, env: Args[0], ctx: Args1)
=> Promise<{ success: boolean; status: number; data: { [key: string]: any; }; error: null; } | { success: boolean; status: number; data:
null; error: any; }>’ is not assignable to parameter of type
‘RequestHandler<IRequest, []>’. Target signature provides too few
arguments. Expected 3 or more, but got 1.ts(2345)

import { createClient } from '@supabase/supabase-js'
import { AutoRouter, RequestHandler, IRequest, withContent } from 'itty-router'

interface Env {
    SUPABASE_URL: string
    SUPABASE_KEY: string
}
type CFArgs = [Env, ExecutionContext]

const router = AutoRouter<IRequest, CFArgs>()

router.post(
    '/clients',
    withContent,
    // async (request: RequestHandler<IRequest, CFArgs>) => {
    // async ({ content }: IRequest, env: Env, ctx: ExecutionContext) => {
    // async ({ content }, env, ctx) => {
    async ({ content }, env, ctx) => {
        try {
            const body = content as { [key: string]: any }
            if (!body || Object.keys(body).length === 0) {
                throw new Error('Invalid request body: Empty or undefined')
            }

            const newClient = { ...body }

            const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY)
            const { data, error } = await supabase.from('clients').insert(newClient)

            if (error) throw new Error(`Supabase error: ${error.message}`)

            return {
                success: true,
                status: 200,
                data: newClient,
                error: null,
            }
        } catch (error: any) {
            return { success: false, status: 500, data: null, error: error.message }
        }
    }
)

Hide DIV en move other DIV up

I am looking for a javascript. The idea is as follows. If a DIV below is clicked, it should disappear and the divs below should move up.

Like a list in Google Keep works and this script when clicking the ‘X’: https://www.w3schools.com/howto/howto_js_todolist.asp

So if I click on test3, that DIV should disappear and test4, test5 and test6 should move up so that they are below test 2.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div>Test1</div>
<div>Test2</div>
<div>Test3</div>
<div>Test4</div>
<div>Test5</div>
<div>Test6</div>


</body>
</html>

Scroll two div at once in HTML

Problem:
I’m designing a website where both the main content and the sidebar scroll together using a single scrollbar. Since the sidebar is shorter, I’ve used position: sticky with a negative top value to keep its bottom visible and prevent showing any empty space beneath it. This works when scrolling down. However, when scrolling back up, the sidebar doesn’t scroll until the sticky position is reached, causing a delay in its upward movement.

I want the sidebar to behave like the one on X.com (Twitter) — scrolling smoothly in sync with the main content, both up and down, without relying on a sticky offset. The sidebar should always stay aligned and scroll naturally, regardless of scroll position.(for more detail go to x homepage and see how main and right side bar is scrolled and see my attached code images)

context:
I’m building an X.com (Twitter) clone with two scrollable areas: the main section and a shorter right sidebar. Since they share a single scrollbar, the sidebar finishes scrolling first, revealing undesigned space below it. I want to replicate how X.com handles this: once the sidebar reaches its max scroll, it behaves like it’s fixed in place. But when the user scrolls back up, the sidebar scrolls upward smoothly with the main content—unlike position: sticky, which keeps it stuck until a certain scroll position is reached. (See attached images for reference.)

Minimum reproducible example:

  1. Go near bottom
  2. try going up
  3. observe sidebar how in this case it is stuck when scrolling back up, the sidebar doesn’t scroll until the sticky position is reached,
  4. repeat same on x.com homepage to see how it works
for (i = 0; i < 5; i++) {
  document.querySelector(".right").insertAdjacentHTML("afterbegin", `<div class="box">${5-i}</div>`)
}
for (i = 0; i < 15; i++) {
  document.querySelector(".main").insertAdjacentHTML("afterbegin", `<div class="box">${15-i}</div>`)
}

const small = document.querySelector(".right")
const smallbot = small.getBoundingClientRect()
small.style.top = `${window.innerHeight - smallbot.height}px`;
.box {
  height: 200px;
  width: 300px;
  border: 2px solid red;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: larger;
}

.cont {
  display: flex;
}

.right {
  position: sticky;

}
<div class="cont">
  <div class="main">

  </div>
  <div>
    <div class="right" style="top: 0px;"></div>
  </div>
</div>

Previous Approaches that did not worked:

  1. I’ve tried several approaches, including dynamically applying position: absolute when scrolling up. However, this either positions the sidebar relative to the body (misaligned to the left), or, if a left value is set, it stays fixed in one spot—unlike X.com, where the sidebar appears to stick from the bottom and scrolls up smoothly with the main content once fully scrolled.

  2. When scrolling up, I tried dynamically removing the top value to unstick the sidebar, which works—but it shifts the entire div to the top of the screen, positioning it incorrectly.

Expectation:
I’m aiming for a UI like X.com, where the main content and sidebar scroll together. The shorter sidebar stops scrolling once fully scrolled—appearing fixed to avoid showing blank space—and when scrolling back up, it scrolls upward smoothly in sync with the main content—appearing fixed from bottom to avoid showing blank space above (See X’s homepage for reference.)

Image 1 (when user have scrolled to near bottom):

user near bottom

Image 2 (user is going up but side bar is stuck due to sticky) ;

user wants to go up but sidebar is stuck due to sticky

X image (user near bottom):

X image user near bottom

X image (user try to go up and are able to go up):

X image sidebar immediately goes up not stuck

code for reference:

For reference, this is the full code I’m currently using:

for (i = 0; i < 5; i++) {
  document.querySelector(".middle").insertAdjacentHTML("beforeend", `<div class="flex text-amber-50 gap-[10px] mt-auto mb-[20px] p-[13px] ">
                    <div class="bg-emerald-700  rounded-full h-[47px] w-[47px] flex flex-none box-border items-center justify-center ">V</div>
                    <div>
                        <div class="flex justify-between w-full">
                            <div class="flex">
                                <div class="font-semibold">Vatsal</div>
                                <img src="svg/blue.svg" alt="bluetk" class="h-[20px] mr-[5px] ml-[2px]">
                                <div class="text-gray-500"> @vatsal1010 . 21h </div>
                            </div>
                            <div class="flex">
                                <div class="flex">
                                    <img src="svg/grok.svg" alt="grok" class="w-[26.25px] h-[30px] mr-[3px]">
                                    <img src="svg/3dot.svg" alt="grok" class="w-[26.25px] h-[30px]">
                                </div>
                            </div>
                        </div>
                        <div class="mt-[5px]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eius,
                            amet odit alias
                            accusantium ea, natus architecto quibusdam molestias consequuntur expedita recusandae officiis
                            perferendis accusamus? Quae animi omnis explicabo iure!</div>
                        <img src="space.gif" class="w-full mt-[28px]"></img>
                    </div>
                </div>
            <div class="bg-gray-600 h-[1px] w-full"></div>`)

  document.querySelector(".yo").insertAdjacentHTML("beforeend", `<div class="flex justify-between items-center">
                    <div>
                        <div class="text-gray-600">Trending in india</div>
                        <div class="text-[15px] font-semibold">BIG BREAKING</div>
                        <div class="text-gray-600">433K posts</div>
                    </div>
                    <img src="svg/more.svg" alt="more" class="h-[26px] w-[26px]">
                </div>`)


}
document.querySelector(".yo").insertAdjacentHTML("beforeend", `<div class="font-extrabold text-[15px] text-blue-400">Show more</div>`)

const side = document.querySelector(".cont")
const sidebot = side.getBoundingClientRect()
side.style.top = `${window.innerHeight - sidebot.height}px`;
.box {
  height: fit-content;
  align-self: flex-start;
}



.size {
  height: 62px;
  width: 243px;
  gap: 20px;
  font-weight: 600;
  align-items: center;
  font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

</head>

<body class="bg-black flex justify-center h-full">
  <div class="w-[90vw]  flex ">
    <div class="w-[16vw] h-[100vh]  relative">
      <div class="flex flex-col w-[16vw] h-[100vh]  fixed">
        <div class="text-amber-50 ">
          <div class="flex size">
            <img src="svg/x.svg" alt="x" class="w-[26.25px] h-[30px]">
          </div>
          <div class="flex size">
            <img src="svg/ome.svg" alt="home" class="w-[26.25px] h-[30px]">
            <div>Home</div>
          </div>
          <div class="flex size">
            <img src="svg/search.svg" alt="search" class="w-[26.25px] h-[30px]">
            <div>Explore</div>
          </div>
          <div class="flex size">
            <img src="svg/bell.svg" alt="bell" class="w-[26.25px] h-[30px]">
            <div>Notification</div>
          </div>
          <div class="flex size">
            <img src="svg/message.svg" alt="message" class="w-[26.25px] h-[30px]">
            <div>Message</div>
          </div>
          <div class="flex size">
            <img src="svg/grok.svg" alt="grok" class="w-[26.25px] h-[30px]">
            <div>Grok</div>
          </div>
          <div class="flex size">
            <img src="svg/profiile.svg" alt="profile" class="w-[26.25px] h-[30px]">
            <div>Profile</div>
          </div>
          <div class="flex size">
            <img src="svg/more.svg" alt="more" class="w-[26.25px] h-[30px]">
            <div>More</div>
          </div>
          <div>
            <button
                            class="bg-amber-50 text-black p-[3px] rounded-[30px] w-[219px] h-[52px] font-bold mt-[7px] text-[24px]">Post
                        </button>
          </div>
        </div>
        <div class="flex text-amber-50 gap-[10px] mt-auto mb-[20px] ">
          <div class="bg-emerald-700  rounded-full h-[47px] w-[47px] flex items-center justify-center p-[15px]">
            V
          </div>
          <div>
            <div>Vatsal Sharma</div>
            <div class="text-gray-500">@vatsal101011456765</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gray-600 h-full w-[2px]"></div>
    <!-- <div class="overflow-auto flex"> -->
    <div class="w-[45vw] h-full middle  ">
      <div class="flex  h-[53px] text-amber-50 justify-around">
        <div class="flex justify-center items-center ">For you</div>
        <div class="flex justify-center items-center">Following</div>
      </div>
      <div class="bg-gray-600 h-[1px] w-full"></div>
      <div class="flex text-amber-50 gap-[10px] pt-[13px] pl-[13px] items-center ">
        <div class="bg-emerald-700  rounded-full h-[47px] w-[47px] flex items-center justify-center p-[15px]">V
        </div>
        <div class="text-gray-500 text-[20px]">What's happening?</div>
      </div>
      <div class="flex justify-end mr-[15px] mb-[10px]">
        <button
                    class="bg-amber-50 text-black p-[3px] rounded-[30px] w-[108px] h-[40px] font-bold mt-[7px] text-[19px]">Post</button>
      </div>
      <div class="bg-gray-600 h-[1px] w-full"></div>
      <div class="flex justify-center items-center text-blue-400 text-[15px] m-[7px]">Show 1,120 posts</div>
      <div class="bg-gray-600 h-[1px] w-full"></div>
    </div>
    <div class="bg-gray-600 h-h-full w-[2px]"></div>

    <div class="cont sticky h-fit">
      <div class="text-amber-50 w-[27vw] flex flex-col items-center gap-[20px]  ">
        <input type="text" class="text-amber-50 bg-black rounded-2xl border-gray-400 border-2 w-[22vw] p-[4px]"
                    placeholder="Search">
        <div class="flex flex-col pt-[12px] pb-[12px] pl-[16px] pr-[16px] gap-[7px] w-[22vw] border-gray-400 border-2">
          <div class="font-extrabold text-[20px]">Subscribe to premium</div>
          <div>Subscribe to unlock new features and if eligible, receive a share of revenue.</div>
          <button class=" bg-blue-400 rounded-[50px] w-[100px] p-[5px]">Subscribe</button>
        </div>
        <div class="text-amber-50 border-gray-400 border-2 pt-[12px] pb-[12px] pl-[16px] pr-[16px] flex flex-col gap-[20px] yo">
          <div class="font-extrabold text-[20px]">What's happening</div>
          <div class="flex gap-[15px]">
            <div>
              <img src="rand.jpg" alt="picture" class="w-[85px] h-[85px] object-none rounded-2xl">
            </div>
            <div>
              <div>FC barcelona vs Inter milano</div>
              <div class="text-gray-600">starts at 7:00pm</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>




  <script>

  </script>

</body>

</html>
```

.querySelector method returning an “is not a function” error

Been getting back into programming after a pretty ling while, I decided I would play around with http requests in javascript to build a web scraper later, I wrote this little guy to practice a bit:

  var DOMParser = require('xmldom').DOMParser;

fetch('http://books.toscrape.com/index.html')
  .then(response => {
    return response.text()
  })
  .then(html => {
    const parser = new DOMParser()

    const doc = parser.parseFromString(html, "text/html")
    const elem = doc.querySelector('.thumbnail').innerHTML

    console.log(elem)
   })
  .catch(error => {
    console.error('error:', error)
   })

This returns the following error:

error: TypeError: doc.querySelector is not a function
at /home/petal/Desktop/scrapetest.js:11:22
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

I looked around a bit online to see what I’m doing wrong but other people’s problems don’t seem to correspond to mine, so I’d appreciate any help!

Thanks and wishing you a nice day c:

Finding the bit depth of an image

I have some images with different formats (jpg, webp, png, …). I’m coding a script (in php) to gather some infos from these images (like dimensions, resolution, bit-depth and …).
Since with php built-in functions, just for jpg format (and maybe another format), it’s possible to obtain bit-depth property of an image; I tried Imagick functions to do so.
I tried this:

        $image = new Imagick($tmpName);
        $colorspace = $image->getImageColorspace();
        $bitsPerChannel = $image->getImageDepth();
        $channels = 0;
        switch ($colorspace) {
            case Imagick::COLORSPACE_SRGB:
                $channels = 3;
                break;
            case Imagick::COLORSPACE_CMYK:
                $channels = 4;
                break;
            case Imagick::COLORSPACE_GRAY:
                $channels = 1;
                break;
        }
        
        if ($image->getImageAlphaChannel()) {
            $channels += 1; // add alpha
        }
        
        $totalBitsPerPixel = $bitsPerChannel * $channels;

But the value of $totalBitsPerPixel is different with “bit-depth” property which Windows shows in “Properties” of image.

I searched stackoverflow, googled all kind of functions, chatted with Sider(chrom), but couldn’t find the reason of this.
What I’m looking for is: Windows shows a bit-depth property for each image file. How to acquire that in php?
Giving advice would be appreciated.
I attached a sample image:

enter image description here

TablesColumnsIconColumns use a fn call to alternate icons depending on value but uses LIKE, would like to use a LIKE or CONTAINS

I am using Filament admin panel in Laravel.
Filament v3.3.14, Laravel 12x

I have found this great little function to alternate my icons depending on the value (0 or 1).

             TablesColumnsIconColumn::make('paid')
                ->icon(fn (string $state): string => match ($state) {
                    '1' => 'heroicon-o-check-circle',
                    '0' => 'heroicon-o-x-circle',
                })

I would like to use it on a different function with text values as below:

TablesColumnsIconColumn::make('test_value')
                ->icon(fn (string $state): string => match ($state) {
                    'high' => 'heroicon-o-check-circle',
                    'medium' => 'heroicon-o-x-circle',
                    'low' => 'heroicon-o-x-circle',
                    'extreme' => 'heroicon-o-x-circle',
                })

But the test_value will often end up with values like “Medium (12)” or “Extreme (25)”.

Is there a way to loosen up the string match? Similar to a LIKE or CONTAINS?

I cannot locate any direction out in the wide yonder internet.
Would greatly appreciate if you have any suggestions.

Error establishing a database connection in localhost WordPress instance [duplicate]

I feel as though I did everything that I possibly could to try to get this connection to work, but it’s still not working and I don’t know where the problem could be.

I am using MAMP and have been using it for a while, but for some reason I’ve been having database connection problems recently out of nowhere. I never changed anything in MAMP until now, and now it feels as though nothing I do works.

I got the phpMyAdmin to work by changing the port number for MYSQL and Apache and adding the MYSQL port number at the end of the hostname in the config.inc.php: $cfg['Servers'][$i]['host'] = 'localhost:3310';.

When adding the new hostname to wp-config.php, it’s giving me this error:
Localhost database connection error for my website

Here is the hostname in my wp-config file: define( 'DB_HOST', 'localhost:3310' );. I also checked my firewall settings in my Mac to be sure it’s off and it is. I checked root username login info and all of it matched and I tried creating a new database user and that also didn’t solve the issue.

Any help to solve this is appreciated.

How to get closest multiple input fields value in jQuery ajax

The table have multiple items like (apple, mango, orange) i want to get the qty table data closest multiple input values on separate inputs. But i receive only single input value from it. So i can’t send it in ajax properly. I am trying to get multiple input values of closest table row but i get only one value from it.

Any help will be appreciated.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mutiple Qty Values</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="alertContainer"></div>
<table>
    <thead>
        <tr>
            <td>Id</td>
            <td>Item</td>
            <td>Qty</td>
            <td>Action</td>
        </tr>
        <tbody>
            <form method="post">
            <tr>
                <td>1</td>
                <td>apple</td>
                <td>
                    <input type="hidden" name="multi_qty[]" value="10" class="qty">
                    <input type="hidden" name="multi_qty[]" value="20" class="qty">
                </td>
                <td><button type="submit" name="delete_qty" class="deleteBtn">Delete</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>mango</td>
                <td>
                    <input type="hidden" name="multi_qty[]" value="40" class="qty">
                    <input type="hidden" name="multi_qty[]" value="50" class="qty">
                </td>
                <td><button type="submit" name="delete_qty" class="deleteBtn">Delete</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>orange</td>
                <td>
                    <input type="hidden" name="multi_qty[]" value="70" class="qty">
                    <input type="hidden" name="multi_qty[]" value="80" class="qty">
                </td>
                <td><button type="submit" name="delete_qty" class="deleteBtn">Delete</button></td>
            </tr>
            </form>
        </tbody>
    </thead>
</table>
<div class="result">
    <input type="text" class="input_result">
    <input type="text" class="input_result">
</div>
<script>
  $(document).ready(function(){ 
    $('.deleteBtn').click(function(e){ 
      e.preventDefault();
      var qtyValue = $(this).closest('tr').find('.qty').val();
      $('.input_result').val(qtyValue);

     // ajax code start
      var inputResult = $('.input_result').val();
      $.ajax({
        url:'delete-item.php',
        type:'post',
        data:'inputResult='+inputResult,
        success:function(result){
            $('.alertContainer').html('item deleted');
        }
      })
    })
})
</script>

PHPCS Warning: Incorrect number of replacements in $wpdb->prepare() with dynamic IN clause

I’m working on a WordPress plugin and keep getting a PHPCS warning that I can’t seem to resolve. The warning is:

WARNING WordPress.DB.PreparedSQLPlaceholders.ReplacementsWrongNumber
Incorrect number of replacements passed to $wpdb->prepare(). Found 3 replacement parameters, expected 2.

Here’s my code snippet:

// Check for image URL or filename in postmeta
if ($attachment_url) {
$attachment_basename = basename($attachment_url);

// Prepare the status placeholders
$placeholders = implode(',', array_fill(0, count($statuses), '%s'));

$meta_url_usage = $wpdb->get_var(
    $wpdb->prepare(
        "SELECT COUNT(*) 
        FROM $wpdb->postmeta pm
        JOIN $wpdb->posts p ON p.ID = pm.post_id
        WHERE (pm.meta_value LIKE %s OR pm.meta_value LIKE %s)
        AND p.post_status IN ($placeholders)",
        '%' . $wpdb->esc_like($attachment_url) . '%',
        '%' . $wpdb->esc_like($attachment_basename) . '%',
        ...$statuses
    )
);

if ($meta_url_usage > 0) {
    return true;
}

What I’ve tried:

  1. Verified that $statuses is a non-empty array
  2. Confirmed the generated SQL looks correct when printed
  3. The query actually works in execution
  4. Tried different placeholder approaches for the IN clause

Problem is PHPCS thinks I should only have 2 replacements (for the LIKE clauses). But I need to pass the status values for the IN clause. The spread operator (…$statuses) is adding additional parameters.

My Question: Is this a false positive in PHPCS or am I doing something wrong? What’s the proper way to handle dynamic IN clauses with $wpdb->prepare()? Or, should I suppress the Warning?

The code works as expected, but I want to make sure I’m following WordPress coding standards properly. Any insights would be greatly appreciated!

Trouble implementing ‘Overarching Project’ from Aalto’s Scalable Web Apps course – no clear errors

I’m working on Part 2, Section 8 (“Overarching Project”) of the Designing and Building Scalable Web Applications course from Aalto University (https://fitech101.aalto.fi/en/courses/designing-and-building-scalable-web-applications/part-2/8-overarching-project/).

I’ve tried implementing the project as instructed, but I’m stuck — the app doesn’t work as expected, and I don’t get any clear error messages to help debug it.

here are the code that I tried…
https://github.com/HasanUchiha/scalable-web-app-project/tree/main

. Appreciate your help.

Why I can’t use Mixins with class expressions in TypeScript

I was learning about Mixins in JavaScript and decided to implement them in TypeScript. Everything works fine when I declare classes normally, but when I assign them to variables, I encounter unexpected behavior. The Mixin methods become inaccessible on objects instantiated from a class combined with a Mixin.

I want to investigate the root cause of this issue and understand why Mixin methods become inaccessible in this scenario.

// Mixin declaration
interface SpeechMixin {
    greetings(): string;
}
const speechMixin: SpeechMixin = {
    greetings() {
        return `Hello, my name is ${this.name}`;
    },
};

// Class expression
const User = class {
    constructor(public name: string) {}
};

Object.assign(User.prototype, speechMixin);

interface User extends SpeechMixin {}

const george = new User('George');
console.log(george.greetings()); // ERROR: Property 'greetings' does not exist on type 'User'.

Why is codepen or jsfiddle and internet browser giving different results and is there a way to fix it?

I am attempting to learn JavaScript and am doing edabit challenges.
To help me work out whats going on I use codepen.io
I was using the following code and wanted to get the index of the second instance of a regex.

function findZip(str) {
 return [...str.matchAll(/zip/g)];
}

console.log(findZip("Zip is a file format used for data compression and archiving. A zip file contains one or more files that have been compressed, to reduce file size, or stored as is. The zip file format permits a number of compression algorithms."))

codepen and jsfiddle only return the value of the regex in an array [[zip],[zip]] but running the same code in the browser console returns the full array with index included.

(2) [Array(1), Array(1)]
0
: 
['zip', index: 64, input: 'Zip is a file format used for data compression and…ormat permits a number of compression algorithms.', groups: undefined]
1
: 
['zip', index: 169, input: 'Zip is a file format used for data compression and…ormat permits a number of compression algorithms.', groups: undefined]
length
: 
2
[[Prototype]]
: 
Array(0)

Im wondering why that is and can I get codepen or jsfiddle to display the full results?

Thanks for your time.

‘This app can appear on top of other apps’ Permission. How to remove it?

I am using React Native with Expo. I posted my app on Play Store, however, in permissions section, one of the permission ‘This app can appear on top of other apps’ is listed. Although, I don’t use any features in my app which uses such permission or explicitly setting it. Below are the dependencies list.

Even it shows the permission, but upon using the app, system does not use this permission.

Please let me know if you are facing same issue or know any dependency which might be triggering this issue?
Thank you in advance.

“dependencies”: {
“@react-native-async-storage/async-storage”: “2.1.2”,
“@react-navigation/bottom-tabs”: “^7.2.0”,
“@react-navigation/native”: “^7.0.14”,
“@react-navigation/native-stack”: “^7.2.0”,
“axios”: “^1.7.9”,
“date-fns”: “^4.1.0”,
“expo”: “~53.0.7”,
“expo-build-properties”: “~0.14.6”,
“expo-font”: “~13.3.1”,
“expo-linear-gradient”: “~14.1.4”,
“expo-location”: “~18.1.4”,
“expo-splash-screen”: “~0.30.8”,
“lottie-react-native”: “7.2.2”,
“metro-react-native-babel-transformer”: “^0.77.0”,
“react”: “19.0.0”,
“react-native”: “0.79.2”,
“react-native-progress”: “^5.0.1”,
“react-native-reanimated”: “~3.17.4”,
“react-native-safe-area-context”: “5.4.0”,
“react-native-screens”: “~4.10.0”,
“react-native-svg”: “15.11.2”,
“zustand”: “^5.0.3”
},
“devDependencies”: {
“@babel/core”: “^7.20.0”,
“react-native-svg-transformer”: “^1.5.0”
},

I tried blocking the permission explicitly using below code:
“android”:
“blockedPermissions”: [“android.permissions.SYSTEM_ALERT_WINDOW”];