Category: javascript

I’m trying to integrate LiveKit (using LiveKit Cloud) into my web application (Python/Flask/SocketIO backend, plain JavaScript frontend), and I’m stuck on a persistent client-side error I can’t seem to resolve.

The Issue:
When my JavaScript code tries to create a room instance with new LiveKitClient.Room(...), I consistently get the following error:
ReferenceError: LiveKitClient is not defined
(Or in Firefox: ReferenceError: Can't find variable: LiveKitClient)

Environment:

• Operating System: Parrot OS Security [Add version if known, e.g., 6.1] (Debian-based Linux)
• Browsers Tested: [ Firefox, Google Chrome, Edge, DockDockGo] (Latest versions)
• LiveKit Client SDK: Tested both the latest version ( 2.11.4) and an older one ( 1.5.0) using the UMD build (livekit-client.umd.min.js)
• Loading Method: Using a <script src="..."></script> tag in the HTML, placed before my main script (chat_logic.js)
• Backend: Flask with Python 3.11 and the livekit-api library , installed via pip. Token generation via /livekit/token is working correctly (the client receives the token before the JavaScript error occurs)

Diagnostics Performed:

• Script Download: Verified in the browser “Network” tab. The livekit-client.umd.min.js file downloads successfully (200 OK), both from the CDN (jsDelivr, unpkg) and when served locally via Flask (static/js/)
• Global Variable Check: After full page load, typing LiveKitClient in the browser console results in ReferenceError: LiveKitClient is not defined
• Minimal Isolated Test: Created a minimal HTML file that only loads the UMD script from the CDN and then tries to access LiveKitClient via console.log. This minimal test also fails with the same ReferenceError, indicating the issue is not with my chat_logic.js code or app-specific conflicts
• Browser Isolation: The error persists across different browsers (Firefox, Chrome) on this OS
• Incognito / Extensions: The error persists in Private/Incognito mode and with all browser extensions temporarily disabled
• Other Console Errors: The only other message occasionally seen is a third-party cookie warning (Cookie "" has been rejected as third-party.) from the LiveKit script, but no other JavaScript errors appear during page load that might indicate a script execution failure

Conclusion:
It seems that the LiveKit Client UMD script, while downloaded correctly, is either silently failing to execute or is unable to define the global LiveKitClient object in this specific environment (Parrot OS / tested browsers).

Question:
Is this a known compatibility issue with Debian-based Linux distributions (like Parrot OS) or with specific browser privacy/security configurations on Linux? Are there particular browser or OS settings that should be checked? Is there any other debugging step you would recommend to diagnose why the script might be silently failing after a successful download?

Any help or hint would be greatly appreciated!
Thank you.

Following this link I was able to load external js files as following:

import { Component, OnInit, Renderer2 } from "@angular/core";
import { ScriptService } from "@app/element-types/_services/script.service";

const scriptPath = 'https://apis.google.com/js/api.js';
declare let gapi: any;

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    standalone: true
})
export class AppComponent implements OnInit {
    constructor(
        private renderer: Renderer2,
        private scriptService: ScriptService
    ) {}

    ngOnInit() {
        const scriptElement = this.scriptService.loadJsScript(this.renderer, scriptPath);
        scriptElement.onload = () => {
            console.log('Google API Script loaded');
            gapi.load('client', 'init');
        }        
    }
}

And ScriptService.ts

import {Inject, Injectable, Renderer2} from "@angular/core";
import { DOCUMENT } from "@angular/common";

@Injectable({
    providedIn: 'root'
})

export class ScriptService {
    constructor( @Inject(DOCUMENT) private document: Document) {}

    public loadJsScript(renderer: Renderer2, src: string): HTMLScriptElement {
        const script = renderer.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        renderer.appendChild(this.document.body, script);
        return script;
    }
}

So far so good, but I would like to change the code and instead of giving a url, I provide a script code and run it directly as follows:

const scriptPath = 'https://apis.google.com/js/api.js'; 
---> change to
const scriptPath = "alert('Hello world');";

The error that I get now is:

Uncaught SyntaxError: expected expression, got '<'

So I want to know if it is possible, to do so.

P.s. I don’t want to define a js file in assets and then import it in the angular component and then call it.

I am looking for sample code (or docs) for calculating semantic similarity of short sentences using Huggingface and Node.js. All the examples I have found so far use Python. I tried to extrapolate from Huggingface’s inference example but it seems there is no “sentence-similarity” pipeline

Error: Unsupported pipeline: sentence-transformers. Must be one of [text-classification,token-classification,question-answering,fill-mask,summarization,translation,text2text-generation,text-generation,zero-shot-classification,audio-classification,zero-shot-audio-classification,automatic-speech-recognition,text-to-audio,image-to-text,image-classification,image-segmentation,background-removal,zero-shot-image-classification,object-detection,zero-shot-object-detection,document-question-answering,image-to-image,depth-estimation,feature-extraction,image-feature-extraction]

I’m using React Flow with a custom collapsible tree structure inside a node. Each leaf node has a <Handle />. The edge that was connected to that handle stays in its previous screen position, and no longer tracks the handle.

    
              {!node.children && (
                <>
                  <Handle
                    type="source"
                    position={Position.Right}
                    id={node.id}
                    style={{
                      background: 'blue',
                      left: '88%',
                      top: '50%',
                      transform: 'translateY(-50%)',
                      position: 'absolute',
                    }}
                  />
                </>
              )}

I expected React Flow to automatically update edge positions when DOM layout of nodes changes.

I tried toggling the collapse using useState, but it doesn’t trigger any edge updates.

I also tried using useUpdateNodeInternals() from React Flow to force an update, but it didn’t seem to apply

I want to write an ExtendScript program for InDesign which creates a TextFrame, and then fills the frame with paragraphs, styling the paragraphs as it goes. I.e., add a paragraph, apply a style to that paragraph, then add another paragraph and apply a different style, etc.

Unfortunately whenever I add a new paragraph to the TextFrame’s parentStory object, InDesign applies the last Paragraph Style I used to all of the existing paragraphs.

Here’s an example of this:

// Make a document with a single frame

var doc = app.documents.add();
var frame = doc.pages[0].textFrames.add();
frame.geometricBounds = [0, 0, 20, 30];

// Make two paragraph styles

var paraStyle1 = doc.paragraphStyles.add({name: "ParagraphStyle1"});
paraStyle1.pointSize = 20;
var paraStyle2 = doc.paragraphStyles.add({name: "ParagraphStyle2"});
paraStyle2.pointSize = 8;

// Add two lines to the frame

var story = frame.parentStory;
story.contents += "Line 1rLine 2";
var para1 = frame.paragraphs[0]; 
var para2 = frame.paragraphs[1]; 

// Style the two paragraphs

para1.appliedParagraphStyle = paraStyle1;
para2.appliedParagraphStyle = paraStyle2;

// At this point, the frame contains two paragraphs, each with its own style.
// Now add a new paragraph to the story.
// This has the effect of applying paraStyle1 to paragraphs 0 and 1 !

story.contents += "rLine 3";

What am I doing wrong here?

Info

I want to press the the add color button and then the color should be added instantly to the color_list

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Tauri App</title>
    <script defer src="main.js" type="module"></script>
  </head>
  <body>
    <h1>add color</h1>
    <input id="new_color" type="text" placeholder="your color" />
    <button id="add_color_btn" type="button">add color</button>
    <ul id="color_list"></ul>
  </body>
</html>

JS

const { invoke } = window.__TAURI__.core;

const currentSettings = {
  saved_colors: []
};

window.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("new_color");
  const btn = document.getElementById("add_color_btn");

  btn.addEventListener("click", async () => {
    const color = input.value.trim();

    console.log("Input read:", color);

    if (color === "") return;

    currentSettings.saved_colors.push(color);
    input.value = "";

    updateColorUI(currentSettings.saved_colors);

    try {
      // await invoke("save_settings", { settings: currentSettings });
      console.log("saved");
    } catch (err) {
      console.error("error while saving:", err);
    }
  });
});

function updateColorUI(colors) {
  const list = document.getElementById("color_list");
  list.innerHTML = "";

  colors.forEach((color) => {
    const li = document.createElement("li");
    li.textContent = color;
    list.appendChild(li);
  });
}

The save for tauri is commented because it doenst update in the frontend even without the rust backend

I tryed the with a normal HTML Website and this works instant, NO WAITING, NO BUTTEN LOCKED etc

I think the problem that Tauri does not reload instantly because it take some time after a new Input until i can press the button. I tested it with comments. After i type something new in the input field, the button is not working for 1 / 3 secondes and when press the button after these 3 seconds, the color will get added to the color list

when i press the in those 2 seconds nothing will happen, no output to the console.

I dont know how fix this, can somebody help please?

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 }
        }
    }
)

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 }
        }
    }
)

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>

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):

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

X image (user near bottom):

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

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>
```

Take a took at the gif below, whenever I try to look at the scene from different perspective, the walls in the scene are wobbling (apparently z-index fighting issue)

Gif link : https://gifyu.com/image/bL6aq

Any idea how to eliminate this issue?
If you need any info about the scene’s configurations, please ask in the comment & I’ll provide it.

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:

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.

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'.

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.