How to reassign values to destructured function arguments?

I have a function that accepts destructed arguments (so that I can send named parameters from the calling code):

function createAccount({Param1, Param2, Param3, Param4}){
    for (let [Key, Value] of Object.entries(arguments[0])) {
    console.log(`Before transform ${Key}: ${Value}`);
        // Param1: A, Param2: B, Param3: C, Param4: D
    }
    
    // Here I need to loop over the arguments and transform their values
    let count = 0
    for (let [Key, Value] of Object.entries(arguments[0])) {
    arguments[0][Key] = count + 1;
        count += 1;
    }
    
    for (let [Key, Value] of Object.entries(arguments[0])) {
    console.log(`after transform ${Key}: ${Value}`);
        // Param1: 1, Param2: 2, Param3: 3, Param4: 4
    }

       console.log(Param1, Param2, Param3, Param4);
       // Param1: A, Param2: B, Param3: C, Param4: D
       //It hasn't transformed?!
  }
       
       createAccount({Param1: 'A', Param2: 'B', Param3: 'C', Param4: 'D'});
    

I hope the code is self-explanatory but basically I am trying to transform the argument values from A, B, C, D respestively into 1, 2, 3, 4 which appears to work when I do the final for loop to output the Key: Value of arguments[0]. It does indeed show they are converted to numbers.

But why when I output the actual individual params it shows the original values of A, B, C, D?

According to the docs I should be able to assign values to the arguments object and it should update the params in the function? I think it has something to do with it being a destructed object I’m not sure.

How do I exclude parts of html when building with Vite

I am attempting to remove parts of an html file during build. It might be easier to look at my code to understand. You will notice that in my html I have added exclude start and end comments. I want to remove this and any other fragments that have this during build.

HTML index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- EXCLUDE_START -->
    <link
      rel="stylesheet"
      href="https://www.apple.com/wss/fonts?families=SF+Pro,v3%7CSF+Pro+Icons,v3"
      type="text/css"
      media="all"
    />
    <!-- EXCLUDE_END -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>

  </body>
</html>

This is what I have attempted. I installed a plugin and tried passing it into plugins object and using the replace function. There are no errors and no results as well.

Config vite.config

import { defineConfig } from "vite";
import { glob } from "glob";

import replace from "rollup-plugin-re";

export default defineConfig({
  input: "./index.html",
  plugins: [
    replace({
      patterns: [
        {
          match: /<!--s*EXCLUDE_STARTs*-->[sS]*?<!--s*EXCLUDE_ENDs*-->/g,
          test: "./index.html", // Apply this rule to index.html
          replace: "", // Replace the matched content with an empty string
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
        loadPaths: glob.sync("./node_modules/{@tras}/*/src/scss"),
      },
    },
  },
  server: {
    proxy: {
      "/wss": {
        target: "https://www.apple.com",
        changeOrigin: true,
      },
    },
  },
});

Then I tried passing the same options into the rollup options

export default defineConfig({
  input: "./index.html",
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
        loadPaths: glob.sync("./node_modules/{@marcom,@aos}/*/src/scss"),
      },
    },
  },
  server: {
    proxy: {
      "/wss": {
        target: "https://www.apple.com",
        changeOrigin: true,
      },
    },
  },
  build: {
    rollupOptions: {
      input: "index.html",
      plugins: [
        replace({
          patterns: [
            {
              match:
                /<!--s*EXCLUDE_STARTs*-->[sS]*?<!--s*EXCLUDE_ENDs*-->/g,
              test: "index.html", // Apply this rule to index.html
              replace: "", // Replace the matched content with an empty string
            },
          ],
        }),
      ],
    },
  },
});

This also does not work. Any assistance would be appreciated.

Experience in creating a web platform: finding the perfect balance [closed]

I have recently completed the creation of a new online project and would like to share my thoughts on the process and get feedback on the result. https://in-becric.org/
The main difficulties during the work:
I can say that the most difficult part was finding the right tone. I had to create material that would instantly create a sense of reliability, but at the same time not turn into a boring official document. I spent a lot of time thinking about the architecture of the page – how to build a logical chain that naturally leads from the first impression to understanding the key benefits.
Searching for the right style:
I was torn between academic rigor and a lively conversational style. In the end, I found a middle way – the text sounds professional, but without clerical dryness. I paid attention to replacing complex concepts with simpler analogs without losing the respectability of the entire project.
Organization of the material:
Perhaps the most thoroughly worked out was the structure of information presentation. I wanted to achieve an effect where each subsequent part logically follows from the previous one, creating a complete picture. I also tried to make sure that even when reading diagonally, the main messages were not lost.
What do you think of this approach? Do you feel the author’s attempt to adapt the content to the needs of the audience as much as possible?

How to Make CryptoJS Available to External Scripts in a React App Without Using a CDN

How can I expose the CryptoJS library globally in a React project (without using a CDN) so that an external non-module script in index.html can safely access it and execute its cryptographic functions after React has loaded?

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

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
  <scipt>const keyBytes = CryptoJS.PBKDF2(
    publicKey,
    CryptoJS.enc.Hex.parse(
    Array.from(salt)
    .map((b) => b.toString(16).padStart(2, '0'))
    .join(''),
    ),
    { keySize: 12, iterations: 10000, hasher: CryptoJS.algo.SHA256 },
    );</script>
    <title>Sample</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>

Three.js shadow anomaly. Appears some dark blur on detail

I’m new in three.js and i don’t know how but when i’m using shadows with my model it gives me some anomaly to different details.enter image description here
Like on this image . I have the directional light on hole

In this image, you can see that the light is directed toward the entire structure, but for some reason only certain parts are illuminated, while others appear to have a kind of black blur or shadow.

I’m using the following function to create shadows.

func.addShadow = (meshShadowl) => {
    const scene = func.three_win.data.scene;
    const renderer = func.three_win.data.renderer;

    // Ambient light
    func.ambientLight = new THREE.AmbientLight(0xffffff, 1.5);//3
    scene.add(func.ambientLight);

    // 1. Обчислення bounding box
    const bbox = new THREE.Box3();
    for (const mesh of meshShadowl) {
        if (mesh && mesh.geometry) {
            mesh.geometry.computeBoundingBox();
            const tempBox = new THREE.Box3().setFromObject(mesh);
            bbox.union(tempBox);
        }
    }

    const center = new THREE.Vector3();
    bbox.getCenter(center);
    const size = new THREE.Vector3();
    bbox.getSize(size);
    const maxSize = Math.max(size.x, size.y, size.z);
    const shadowDistance = maxSize;

    // 2. Directional light
    const light = new THREE.DirectionalLight(0xffffff, 5);//404040/18
    light.position.set(center.x + shadowDistance, center.y + shadowDistance , center.z + shadowDistance);
    //light.position.set(center.x + 10, center.y + 20 , center.z + 10);
    light.castShadow = true;

    light.shadow.mapSize.width = 14024;//14024/4096
    light.shadow.mapSize.height = 14024;

    light.shadow.camera.near = 2;
    light.shadow.camera.far = shadowDistance * 3;
    //light.shadow.radius = 2;

    const padding = 10; // невеликий запас
    light.shadow.camera.left = -size.x / 2 - padding;
    light.shadow.camera.right = size.x / 2 + padding;
    light.shadow.camera.top = size.z / 2 + padding;
    light.shadow.camera.bottom = -size.z / 2 - padding;

    light.shadow.bias = -0.004;//-0,001
    light.shadow.normalBias = 0.01;//0,01

    // 3. Target
    const target = new THREE.Object3D();
    target.receiveShadow = false;
    target.castShadow = false;
    target.position.copy(center);
    scene.add(target);
    target.updateMatrixWorld();
    light.target = target;
    target.updateMatrixWorld();

    func.directionalLight = light;
    scene.add(light);

    // Optional: helper
    const helper = new THREE.CameraHelper(light.shadow.camera);
    scene.add(helper);

    const helperLight = new THREE.DirectionalLightHelper(light, 10, 0xff0000);
    scene.add(helperLight);



    // 4. Обробка мешів
    if (meshShadowl) {
        for (const mesh of meshShadowl) {
            if (!mesh || !mesh.geometry) continue;

            if (
                mesh.type === "LineSegments" ||
                mesh.type === "AxesHelper" ||
                mesh.type === "Line" ||
                mesh.type === "Points" ||
                mesh.type === "Line2" ||
                mesh.type === "LineLoop" ||
                mesh.name === "planeClipping" ||
                mesh.name.includes("axis_side_") ||
                mesh.name.includes("floor_mesh") ||
                mesh.name.includes("crane_floor") ||
                mesh.name.includes("planeClipped") ||
                mesh.name.includes("mesh_cr_area") ||
                mesh.name.includes("mesh_zone_") ||
                mesh.name.includes("objModel") ||
                mesh.name.includes("planeLabelCircle")
            ) continue;

            if (mesh.name === "floorImg") {
                mesh.material = func.floorTexture ?
                    new THREE.MeshStandardMaterial({ map: func.floorMap, side: THREE.DoubleSide }) :
                    new THREE.MeshStandardMaterial({ color: "#636362", side: THREE.DoubleSide });
            } else {
                if (mesh.name.includes('mesh_crane')) {
                    //mesh.geometry.computeVertexNormals();
                    //mesh.material = new THREE.MeshStandardMaterial({
                    //    color: mesh.material.color,
                    //    roughness: 0.75,
                    //    metalness: 0.25,
                    //    side: THREE.DoubleSide
                    //});
                } else {
                    //mesh.material.dispose();
                    if (mesh.material) mesh.material.dispose();
                    mesh.material = new THREE.MeshStandardMaterial({
                        vertexColors: true,
                        roughness: 0.7,
                        metalness: 0.3,
                        side: THREE.DoubleSide,
                        clippingPlanes: mesh.material?.clippingPlanes,
                    });
                }
            }

            mesh.castShadow = true;
            mesh.receiveShadow = true;
            mesh.material.needsUpdate = true;
            mesh.geometry.computeVertexNormals();
        }
    }

    // 5. Налаштування рендерера
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.autoUpdate = true;
    renderer.shadowMap.needsUpdate = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    renderer.outputEncoding = THREE.sRGBEncoding;


    func.three_win.update();

};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

I’ve already tried adjusting the metallic and roughness values of the parts, added normal normalization, and changed the bias and normalBias settings. I suspect the issue might be related to the light itself, because when I disable it, all parts appear evenly shaded without any dark spots.
enter image description here

How to auto-submit the value, entered in a text entry box, when certain conditions are met?

I am looking for JavaScript code that I can add to my Storyline project that will auto submit a value entered in a text entry box once a certain number of characters is reached.

I understand that I will need to run an ‘Execute JavaScript’ trigger at the start of the slide timeline. What I’m looking for is the specific JavaScript code I can use that will monitor the value of a text box as the text is being entered, and once a certain number of characters is reached, the JavaScript will return that value to Storyline in a variable so that I can then manipulate it with additional triggers in Storyline.

Basically, I want the ability to have a user type in a text box, and then that typed value become available in a variable once a certain number of characters is reached without the user having to click or lose focus in order to capture the value typed.

Why isnt the preview image working on whatsapp?

I am trying to handle ogImage with nuxt. I am using useSeoMeta composable

const pageTitle = t("myCertificates");
const pageDescription = t("appDescription");

useSeoMeta({
  title: pageTitle,
  ogTitle: pageTitle,
  description: pageDescription,
  ogDescription: pageDescription,
  ogImage: `${
    locale.value === "en"
      ? certificate?.value?.previewEnUrl
      : certificate?.value?.previewArUrl
  }`,
});

the og image (preview image) is viewed properly on instagram, twitter and facebook.
but when sharing the link on whatsapp. the preview image doesnt work.
I made sure ssr is on so the image is pre-rendered in the server. Also I checked the og-image meta tag in the head of the page and it do exist, I copied the image url and run it on the browser and it was previewed noramlly. I have no idea why isnt it working on whatsapp.

Changing dynamic image in Angular 19 scrolls the page unexpectedly

Issue:
Here is the video link to display what I mean:
Issue video

When the container is in not completely in viewport, if I hover between 2 list elements, the browser scrolls the page to keep image’s top edge exactly where the previous ones was. (It works perfectly when container is within viewport)

Setup:
So I am using angular 19.

  • I have a section where container is divided in 2 equal parts horizontally.

  • Left container has dynamic image (width 100%, centered by flex box)

  • Right has a list whose elements when hovered upon change the src variable used in img tag so that corresponding image is displayed.

  • The images are all of different heights but all are less heighted than the length of list (Container height)

  • I tried inspecting through dev tools but it didn’t help

  • I tried to asking it to ai tools but even they weren’t able to figure it out

  • Created a new project just to replicate the issue: Git Repo Link

I am expecting the page to not scroll when the container is partially inside viewport and we hover on the list elements

Save a position after modifying the DOM

Here it is in a modal from a picture list so I can delete a food item from another list, then the modal closes when I push validate button if I chose to delete a food item, and right after it get back automatically to the very beginning of the main list with the pictures list. How to save the position when I delete something from a picture from the bottom of the list without the list goes back to the beginning?

    const getAlimsModif = (picture) => {
        let result = [];
        for (const sample of picture.samples) {
            result.push(
                <div style={{ width: "100%", height: "20%", display: "flex", flexDirection: "row" }}
                    id={sample.mask_ref}
                    value={sample.image_ref}
                    onMouseEnter={(e) => { setHoveredAlim(e.target.id); setHoveredImg(sample.image_ref) }}
                    onMouseOut={(e) => { setHoveredAlim(null); setHoveredImg(null) }}>
                    <div className="pictures-sample-div" id={sample.mask_ref} style={{ width: "40%", height: "100%", display: "flex", flexDirection: "row" }}>
                        <div id={sample.mask_ref} style={{ width: "75%", height: "100%", display: "flex", justifyContent: "flex-start", alignItems: "center", paddingLeft: "1%" }}>
                            {getFoodName(sample)}
                        </div>
                        <div id={sample.mask_ref} style={{ width: "25%", height: "100%", display: "flex", justifyContent: "flex-end", alignItems: "center", paddingRight: "1%" }}>
                            {sample.mass.toFixed(1) + " g"}
                        </div>
                    </div>

                    <div style={{ width: "35%", height: "100%", display: "flex", justifyContent: "flex-end", alignItems: "center", paddingRight: "1%" }}>
                        <CustomAutocomplete
                            width={"90%"}
                            height={"70%"}
                            color={"#666666"}
                            maxHeightDropdown={"40vh"}
                            displayedValue={getDisplayedValueModifAlim(sample)}
                            values={getAllFoods()}
                            zIndex={parseInt(sample.aliment_id) === parseInt(dropdownModifAlimOpen) ? 100000 : 1}
                            onClick={() => dropdownModifAlimOpen ? setDropdownModifAlimOpen(null) : setDropdownModifAlimOpen(sample.aliment_id)}
                            isOpen={sample.aliment_id === dropdownModifAlimOpen}
                            onChange={(e) => updatePictureAlim(e, sample)} />
                    </div>
                    <div id={sample.mask_ref}
                        value={sample.image_ref} style={{ width: "25%", height: "100%", flexDirection: "row", display: "flex", justifyContent: "center", alignItems: "center", paddingRight: "1%" }}>
                        <CustomTextField
                            width={"50%"}
                            height={"65%"}
                            type={"number"}
                            onChange={(e) => updateMassAlim(e, sample)} />&nbsp; g
                    </div>
                </div>
            )
        }
        return result;
    }

I already modify the math random from component to set update{0}`

How to reduce jaggedness in SVG diagonal lines (anti-aliasing tips)

I’m working on a React project where I generate a dynamic SVG matrix with skewed/tilted cells. The skewing creates diagonal outer borders, but these lines have severe jaggedness (aliasing).

Here is the code for the relevant implementation:

function Matrix({rows = 3,
    cols = 3,
    cellSize = 100,
    color = 'transparent',
    textSize = 30,
    textColor = 'black',
    strokeColor = 'black',
    strokeWidth = 3,
    angle = -12}
  ){

    const width = Math.round(cellSize*Math.cos(Math.PI*(angle/180)))
    const cells = []
    for (let i =0; i<rows;i++){
      for (let j = 0; j < cols; j++) {
        
        const x = width/2+Math.round(j * width);
        const y = Math.round(cellSize+i * cellSize);

        cells.push(
          <g key={`cell-${j}-${i}`} transform={`skewY(${angle})`} className="matrix-     element">
            <rect x={x} y={y} width={width} height={cellSize} rx="0" fill={color} stroke={strokeColor}
            strokeWidth={strokeWidth} 
            style={{
              borderLeft: j === 0 ? `${strokeWidth}px solid ${strokeColor}` : 'none',
              borderTop: i === 0 ? `${strokeWidth}px solid ${strokeColor}` : 'none',
              shapeRendering: 'crispEdges'
            }}/>
            <text x={`${x+1/2*cellSize*Math.cos(Math.PI*(angle/180))}`} y={y+cellSize/2} textAnchor="middle" dominantBaseline="middle" fontSize={textSize} fill={textColor}>0</text>
        </g>       
        )
      };
    }



    return (
    <svg width ={(cols+1)*width} height = {width/2+(rows+1)*width} viewBox = {`${-strokeWidth/2} ${-strokeWidth/2} ${(cols+1)*width} ${width/2+(rows+1)*width}`} 
    preserveAspectRatio="xMidYMid" >
        {cells}
    </svg>);
  }

I’ve tried adjusting the shape-rendering CSS property, but results are inconsistent in Edge browser:

  • When set to geometricPrecision (Fig 1), the lines are smoother but still have noticeable artifacts.
  • When set to crispEdges (Fig 2), the aliasing worsens significantly.
    Expected behavior: Smooth, anti-aliased diagonal borders similar to modern browser standards.
    Actual behavior: Jagged edges, especially noticeable on skewed lines in Edge.
    Fig 1
    Fig 2

My expectation is:

  • The svg generated slashes will be less jagged and smoother, to the level of a textbook or PowerPoint,
  • The smoothness will be preserved when exporting to images is implemented later.

ASP.NET Core POST endpoint returns null DTO from jQuery but works fine from Postman

I have an ASP.NET Core Web API endpoint that receives all null values when called from jQuery/browser, but works perfectly when called from Postman with the exact same JSON payload.

The Problem

When I send a POST request from my front-end (jQuery/TypeScript), all properties in my DTO arrive as null in the backend. However, when I send the exact same JSON from Postman, all values are received correctly.

Backend Controller

[HttpPost("create-book")]
public ObjectResult CreateBook([FromBody] CreateBookDto createBookDto)
{
    try
    {
        var book = createBookDto.ToBook();
        var createdBook = _servicesFactory.BookService.CreateBook(book);
        return Ok(new BookDto().FromBook(createdBook));
    }
    catch (Exception ex)
    {
        return Fail<BookDto>(ex, "Error creating book");
    }
}

Frontend Code (TypeScript/jQuery)

public createBook(bookData: any, callback: Function) {
            const json = typeof bookData === 'string'
        ? bookData
        : JSON.stringify(bookData);

    this.ajaxCall(
        'api/book/create-book',
        HttpMethods.POST,
        json,
        [callback],
        ContentType.ApplicationJson,
        null
    );
}

What I’ve Verified

  1. The JSON is valid and identical in both cases

  2. Headers are identical

    -same Content-Type
    -same session cookie etc.
    
  3. The response is 200 OK in both cases

  4. Other POST endpoints in the same controller work fine from the browser (e.g., /api/book/property/update

I’ve added case insensitive option to Startup.cs – just in case. Same result..

        services.AddControllers()
            .AddJsonOptions(options =>
            {
                options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
            });

Real-time beat detection with Essentia.js

I’m trying to create an extension using Essentia.js library to provide a real-time detected metronome for an audio file.

Currently I’m using AudioWorklet pattern for this, retrieving onsets frame-wise (1024 frame size) using OnsetDetection function, store ODF values to the buffer, and then process it using TempoTapDegara function to get the estimated beat positions.
After processing, I’m using custom Clicker class, that automatically creates OscillatorNodes and schedules them to the retrieved ticks.

Unfortunately, detection seems to be not precise. In some parts of the song the ticks seem to be a little earlier, but with constant offset; in other parts the BPM is completely off.

Maybe someone tried making real-time beat detection with Essentia.js?

How can I dynamically highlight active navigation links based on scroll position using JavaScript? [closed]

I’m building a single-page website and want to highlight the active navigation link based on which section is currently visible as the user scrolls.

I’ve tried using window.scrollY and getBoundingClientRect(), but the behavior is inconsistent—sometimes the wrong link remains highlighted even after scrolling past a section.

What would be the most reliable approach in JavaScript to ensure that the correct navigation item is highlighted at the right time? Would using IntersectionObserver be more effective than relying on manual scroll calculations?

I’d appreciate any advice or code examples. Thanks!

Audio disconnects after call connects when app is killed — React Native + SIP.js + WebRTC [closed]

I have created a calling app in React Native using SIP.js and WebRTC. The app works fine when it is active or in the background.

However, the issue occurs when the app is killed (terminated):

I receive the incoming call notification using a foreground service (on Android).

When I accept the call, the SIP session connects.

But audio does not work—I cannot hear the other party, and they cannot hear me.

What I’ve tried:
Implemented a foreground service using react-native-foreground-service.

Ensured that permissions for microphone and background activity are granted.

Tried keeping the WebRTC connection alive with native modules.

Verified SIP session is connected and call is accepted correctly.

My Environment:
React Native version: 0.72.6
SIP.js version:0.21
Android version: 14
Testing on: Samsung Galaxy A14

WebRTC backend: Asterisk, FreeSWITCH,