I have about 2000 markers on my v3 map.

Often, but not always, there will be a significant delay (~30s) when clearing the map.
Markers are removed by looping through them and calling setMap(null).

I have measured the time it takes to remove each marker using the delta between Date.now() calls. This is usually 0 to 1 ms.
In the slow case however, there is a significant number of markers that take 30 to 50 ms to remove.

Using the Firefox profiler, I can see that the time is spent on Node.compareDocumentPosition within

setMap
 dispose
  lS
   _.O
    Sg/<
     pI
      oI
       _.cB
        Node.compareDocumentPosition (~50%)
        $ha
         Node.compareDocumentPosition (~50%)

What could be the cause of this and what can be done about it?

I am trying to automate some functionality in Acrobat PDFs. I use Adobe Acrobat (version shows 2025.001.20693, 64 bit). I prepare many reports that have words in them on which I have to set hyperlinks manually. The hyperlinks are URLs to the Web, and they don’t change.

Here’s a brief explanation for adding one of the links: I want to add a hyperlink to microsoft.com, on word 268 on the user’s page 7 (page 6 in the code). I want to automate this in JavaScript which I can add to a document, so I can click a button and it’ll add the hyperlink.

I have searched for answers here, on Adobe, and using other resource. I want to know: is it even possible to set these hyperlinks programmatically? I’m neither a programmer nor able to force my firm to change its IT/security protocol. So if an answer is already out there, but it is very technical or it tells me to create a whole new setup, then I can’t use it.

If there is not a way to do this under these constraints, can you tell me why? For instance, perhaps hyperlinks have some security requirement so that they can’t be added from JavaScript without further permissions or security access.

If there is a way to do this, what am I doing wrong, and can you suggest anything? Here’s the code I have so far, with comments. The button which calls this function is in the same document where I want to add the hyperlinks.

var link;

function selectWords()
{
    var whichWord = app.response("Enter the word number:", "Which word:", 268);
    this.selectPageNthWord(6, whichWord);

    //first, get coordinates
    var bBox = this.getPageNthWordQuads(6, whichWord); //quads returns x1, y1, x2, y2, x3, y3, x4, y4 - left-bottom, left-top, right-bottom, right-top
    var quadStr = bBox.toString();
    var quadArray = quadStr.split(",");

    var wordRect = [quadArray[0], quadArray[1], quadArray[6], quadArray[7]]; //wordRect needs left, bottom, right, top

    //then, use this to create the link
    link = this.addAnnot({
        page: 6,
        rect: wordRect,
        borderStyle: "solid",
        color: color.transparent,
        action: {
            url: "https://www.microsoft.com/",
            type: "Launch"
        }
    });
    link.type = "Link"; //when you use this in the addAnnot call, the object returned is null! Why?

    // I've also tried to set a link action HERE but this line fails
//link.setAction("app.launchURL('https://www.microsoft.com/', true);");

}

I’m working on a Leaflet-based map where users can draw polygons and get the area measurement displayed on the map.

When I use a print/export tool (based on html2canvas/jsPDF), the labels with area values don’t appear in the generated print/PDF.

Distance measurement tooltips (line length) do appear in the print.

But the area measurement labels (polygon) do not.

It seems the plugin injects HTML elements into the DOM (not canvas-compatible), so html2canvas ignores them.

What I’ve tried so far:

Checking the printing plugin docs (they mention this limitation).

Inspecting the polygon measurement plugin: it creates divs instead of drawing on canvas/SVG.

Tried forcing CSS classes to match distance tooltips → no success.

What I need:

A way to make polygon measurement labels appear in the map print/export, without forking and editing the original plugin if possible.

Suggestions for workarounds (e.g., intercepting measurement events and redrawing labels in a canvas/SVG layer that html2canvas can capture).

CSS

Let’s say there are multiple elements inside our HTML having same ID now I wanna select the element using ID then it will select the entire element having same ID in CSS.

JavaScript

Same thing if I do in JavaScript. Let’s say I wanna fetch element having id from HTML and same scenario here also means multiple elements having same ID at that time it selects only the first matching element.

How is it working??

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Duplicate ID Example</title>
</head>
<body>
  <div id="myDiv">This is the first div with ID "myDiv"</div>
  <div id="myDiv">This is the second div with the SAME ID "myDiv"</div>
</body>
</html>

#myDiv{
color: red; /*It will be selecting the both div*/
}

let div = document.getElementById("myDiv") //it will be returning the first div

i am running a code to convert tempretures to each other at the same time .
when i am running my codes part of js code is running but part of it doesnt.

const celvalue = document.getElementById('cel-num');
const farvalue = document.getElementById('far-num');
const kelvalue = document.getElementById('kel-num');

function tempfunccel() {
  const tempfar = celvalue.value * (9 / 5) + 32;
  const tempkel = celvalue.value + 273.32;
  farvalue.value = tempfar.toFixed(2);
  kelvalue.value = tempkel.toFixed(2);
}

<div class="box">
  <label for="" >celsius:</label>
  <input  type="number" class="inp" id="cel-num" onchange="tempfunccel()">
</div>
<div class="box">
  <label for="">fahrenheit:</label>
  <input type="number" class="inp" id="far-num" onchange="tempfuncfar()">
</div>
<div class="box">
  <label for="">kelvin:</label>
  <input type="number" class="inp" id="kel-num" onchange="tempfunckel()">
</div>

in function line 1 and 3 are working but line 2 and 4 are not working

Here is the function:

export function generateId(): string {
  const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let result = "";

  const randomArray = new Uint8Array(8);
  crypto.getRandomValues(randomArray);

  for (let i = 0; i < 8; i++) {
    result += chars[randomArray[i] % 36];
  }

  return result;
}

It should generate 8-character random base36 IDs, e.g. QZ08HNDL. Base36 uses 0-9 and A-Z (36 characters). If the id is 8 characters = 36^8 = ~2.8 trillion possibilities.

But I’ve had some “INVALID_RECORD: record is invalid and can’t be saved. ID is not unique” errors reported in the last few days, and I’m not sure if it’s because this function is generating duplicates. How likely is it? Are there flaws in this function?

I have a data aggregation function that collects statistics from multiple sources. The problem is that whenever I add a new metric, I need to manually update the code in three different places, which is error-prone and hard to maintain.

Current Code Structure:

// Part 1: Initialize data object
const storeData = {
    collectors_count: 0,
    toys_count: 0,
    toys_inspected: 0,
    toys_cleaned: 0,
    inspection_percent: 0,
    cleaning_percent: 0,
};

// Part 2: Accumulate data from each source
for (const collector of collectors) {
    const details = await db.getCollectorDetails(collector.id);
    
    if (!details) continue;

    storeData.collectors_count++;
    storeData.toys_count += details.toy_count;
    storeData.toys_inspected += details.inspected_count;
    storeData.toys_cleaned += details.cleaned_count;
}

// Part 3: Calculate derived metrics
storeData.inspection_percent = (storeData.toys_inspected / storeData.toys_count) * 100;
storeData.cleaning_percent = (storeData.toys_cleaned / storeData.toys_count) * 100;

return storeData;

The Problem:

• When I want to add a new metric (e.g., toys_repaired), I have to:
• Add it to the initial object with value 0
• Add accumulation logic in the loop: storeData.toys_repaired += details.repaired_count
• Possibly add calculation logic if it’s a derived metric: storeData.repair_percent = ...

This becomes tedious with many metrics and I sometimes forget to update all three places.

Is there a way to refactor this code to be more extensible and maintainable?

I am trying to make a loop that will fill in an array of arrays that will contain every possible colour value in rgb form given the bit depth. However, I have noticed that even after an array is pushed into the larger array, whenever the code adds to a new array, it also increments by the same value. I believe this is because technically all the arrays have the same name, but I don’t have an alternative to that.

this is the code I’m using:

var colours = []
var c = [0, 0, 0]
for (let x = 0; x < 4; x++) {
  c[1] = 0
  for (let y = 0; y < 4; y++) {
    c[2] = 0
    for (let z = 0; z < 4; z++) {
      const v = c
      colours.push(v)
      c[2] += 85
    }
    c[1] += 85
  }
  c[0] += 85
}
console.log(colours)

previously there were another bunch of errors, but I resolved them by resetting certain things after every loop. I also tried to duplicate the array using const v but it doesn’t work. currently, when I run this the console shows this:

// [object Array] (64)
[// [object Array] (3)
[340,340,340],// [object Array] (3)
[340,340,340],// [object Array] (3)
[340,340,340],// [object Array] (3)

for 64 rows, but what I’m looking for is something like this:

[[0,0,0],[0,0,85],[0,0,170],[0,0,255],[85,0,0]]

containing every combination until [255,255,255]

I want to work in the latest “Wasm” 3.0
But the latest version of “wabt” doesn’t convert “wat” which is for the “wasm” 3.0.
Is there is ant other alternative way? and i also want that way to be in the browser, as i am also making a thing which needs “wat” content to converted to “wasm” 3.0 in the browser itself

I tried “wabt”, and “wasm-tools”

“Wasm-tools” have “wat” to “wasm” 3.0 but it doesn’t have the browser conversion.

I’m starting a new production-grade fintech app in 2025 (similar to a payments/marketplace product).

I’m confused whether I should use Expo or stick with React Native CLI.

My requirements include:

1. OTA updates for faster bug fixes and translations

2. Biometric authentication (Face ID / Fingerprint)

3. Payment gateway integration (using WebView, but possibly native SDKs in the future)

4. Webhooks, redirects, and deep linking support

5. Long-term maintainability and enterprise-grade stability (financial product use case)

From what I know, Expo has improved a lot in 2025 with config plugins and prebuilds, but I want to be sure:

• Are there still any limitations of Expo compared to bare RN?

• Is Expo stable enough for fintech/enterprise apps in 2025?

• Which approach is better for a long-term project with heavy native dependencies?

When the user selects the country code from the dropdown. It gets populated in the local number part. I have to reconstruct the phone number for

import Keyboard from 'react-simple-keyboard';
import 'react-simple-keyboard/build/css/index.css';
import { MuiTelInput } from 'mui-tel-input';
    const getCountryCode = (phoneStr) => {
    const match = phoneStr.match(/^+d+/);
    return match ? match[0] : '';
};

const getLocalNumber = (phoneStr) => {
    const countryCode = getCountryCode(phoneStr);
    return phoneStr.replace(countryCode, '').replace(/D/g, '');
};
<MuiTelInput
                key={telInputKey}
                fullWidth
                value={formData.phone}
                onChange={(value) => {
                const countryCode = getCountryCode(value) || '+39';
                let localNumber = getLocalNumber(value);
                localNumber = localNumber.replace(/D/g, '').slice(0, 10); // Force 10 digits max
                const newPhone = `${countryCode} ${localNumber}`;
                setFormData({ ...formData, phone: newPhone });
                }}
                onFocus={() => setFocusedField('phone')}
                defaultCountry={country}
                forceCallingCode
                label={t('labelPhone')}
                sx={{ width: '25rem'}}
            />

I have a onscreen keyboard to get the input from the user

if (button === '{bksp}') {
      if (focusedField.startsWith('phone')) {
        setFormData(prev => {
          const countryCode = getCountryCode(prev.phone) || "+39";
          let localNumber = getLocalNumber(prev.phone);
          localNumber = localNumber.slice(0, -1);
          const newPhone = localNumber ? `${countryCode} ${localNumber}` : countryCode;
          return { ...prev, [focusedField]: newPhone };
        });
      }

I want to add a custom BlockFeature and for that i need a modal window for input. I don’t understand how to make a modal input window so that the entred data will go straight to my custom blockfeature props.

The feature i’m working on is an ordered list that starts with a given number (). So yeah, basically, i need that modal window to enter the starting number

@hooks.register('register_rich_text_features')
def register_ol_custom_feature(features):
    feature_name = "ol-custom"
    type_ = "ol-custom"
    control = {
        "type": type_,
        "label": "ol+",
        "element": "ol",
        "description": "Set start",
    }

    features.register_editor_plugin(
        'draftail',
        feature_name,
        BlockFeature(
            control,
            js=["static/js/orderedListCustom.js"],
        ),
    )

    db_conversion = {
        "from_database_format": {
            "ol[start]": BlockElementHandler(type_)
        },
        "to_database_format": {
            'block_map': {
                type_: lambda props: DOM.create_element(
                    "ol",
                    {"start": props.get("start") if "start" in props else 1}
                )
            }
        },
    }

    features.register_converter_rule("contentstate", feature_name,  db_conversion)
    features.default_features.append(feature_name)

I tried several js codes that i found online or got from ai, none of them worked (my bad, i suck at js). Also came across one post on here, but it didn’t help (:
In the end, i’m not even sure what things i need to consider/add/alter, what’s the workflow here.
Can anyone help?

this is kind of a continuation of an improved version of an old question of mine
so basically I have a recursive Angular form and I’m using to manage a folder hierarchy. Each folder has a radio button for selecting between Exclusive and Regular folder.

Now I’m trying to add a validation so that

• When a folder is selected as Exclusive at any level in the hierarchy the Exclusive button should be disabled for all other folders at any level. (basically 1 exclusive folder in the folder hierarchy)
• The Regular option should remain available at all levels regardless of whether Exclusive is selected at any other level

How should I even approach a problem like this because the notification should happen from parent to child level and also from child level to parent level. Is this possible to be done with @Input() or is there a better approach.

I present demo version here for clarity. still a bit long to read but here is reproducible demo in stackblitz with same code

form component

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, AbstractControl } from '@angular/forms';
import { duplicateFolderName } from '../validators/duplicate-folder-name.validator';

@Component({
  selector: 'my-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
  myForm!: FormGroup;
  isHierarchyVisible = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      folderHierarchy: this.fb.array([]),
    });
    if (!this.folderHierarchy.length) this.isHierarchyVisible = false;
  }

  addFolder() {
    this.folderHierarchy.push(
      this.fb.group({
        name: [null, [Validators.required, duplicateFolderName()], { updateOn: 'blur' }],
        isExclusive: false,
        subFolders: this.fb.array([]),
        level: 0,
      })
    );
    this.isHierarchyVisible = true;
  }

  removeFolder(index: number) {
    this.folderHierarchy.removeAt(index);
    if (!this.folderHierarchy.length) this.isHierarchyVisible = false;
  }

  get folderHierarchy() { return this.myForm.get('folderHierarchy') as FormArray; }
  getForm(control: AbstractControl) { return control as FormGroup; }
}

<p>folder form. type in form name and press enter</p>
<form [formGroup]="myForm">
  <div formArrayName="folderHierarchy">
    <label for="folderHierarchy">create folder </label>
    <div>
      <button type="button" class="btn btn-custom rounded-corners btn-circle mb-2" 
              (click)="addFolder()" [disabled]="!folderHierarchy.valid">Add</button>
      <span class="pl-1">new folder</span>
    </div>
    <div *ngIf="!folderHierarchy.valid" class="folder-hierarchy-error">invalid folder hierarchy</div>
    <div class="folderContainer">
      <div *ngFor="let folder of folderHierarchy.controls; let i = index" [formGroupName]="i">
        <folder-hierarchy (remove)="removeFolder(i)" [folder]="getForm(folder)" [index]="i"></folder-hierarchy>
      </div>
    </div>
  </div>
</form>

folder-hierarchy component

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { duplicateFolderName } from '../validators/duplicate-folder-name.validator';

@Component({
  selector: 'folder-hierarchy',
  templateUrl: './folder-hierarchy.component.html',
  styleUrls: ['./folder-hierarchy.component.css'],
})
export class FolderHierarchyComponent {
  @Output() remove = new EventEmitter();
  @Input() folder!: FormGroup;
  @Input() index!: number;
  @Input() parentDirectory?: FormGroup;

  constructor(private fb: FormBuilder) {}

  addSubFolder(folder: FormGroup): void {
    (folder.get('subFolders') as FormArray).push(
      this.fb.group({
        name: [null, [Validators.required, duplicateFolderName(this.parentDirectory)]],
        isExclusive: false,
        subFolders: this.fb.array([]),
        level: folder.value.level + 1,
      })
    );
  }

  updateIsExclusive(folder: FormGroup, value: Event, isExclusive: boolean): void {
    folder.get('isExclusive')?.setValue(isExclusive ? (value.target as HTMLInputElement).checked : !(value.target as HTMLInputElement).checked);
  }

  getControls(folder: FormGroup): FormArray {
    return folder.get('subFolders') as FormArray;
  }

  removeSubFolder(folder: FormGroup, index: number): void {
    (folder.get('subFolders') as FormArray).removeAt(index);
  }

  removeFolder(folder: FormGroup): void { this.remove.emit(folder); }

  disableAdd(folder: FormGroup): boolean { return this.folder.invalid || folder.invalid; }

  get nameControl(): FormControl { return this.folder.get('name') as FormControl; }
}

<div *ngIf="folder" #folderRow class="folder-row" [formGroup]="folder">
  <div class="folder-header">
    <div class="folder-name-container">
      <label for="folderName" class="folder-name-label">Name:</label>
      <input #folderName id="folderName" [ngClass]="nameControl.errors ? 'invalid-input' : ''"
        class="folder-name-input" placeholder="Folder Name" type="text" maxlength="50" autocomplete="off"
        name="name" formControlName="name" (keyup.enter)="folderName.blur()" />
    </div>
    <div class="folder-type-container">
      <div class="folder-type-option">
        <input type="radio" [value]="true" [checked]="folder.value.isExclusive" (change)="updateIsExclusive(folder, $event, true)" />
        <label for="exclusive">Exclusive</label>
      </div>
      <div class="folder-type-option">
        <input type="radio" [value]="false" [checked]="!folder.value.isExclusive" (change)="updateIsExclusive(folder, $event, false)" />
        <label for="regular">Regular</label>
      </div>
    </div>
    <button type="button" class="btn-remove-folder" (click)="removeFolder(folder)">Remove</button>
    <button type="button" class="btn-add-subfolder" [disabled]="disableAdd(folder)" (click)="addSubFolder(folder)">Add Subfolder</button>
  </div>
  <div *ngIf="folder && folder.value.subFolders.length > 0" class="subfolder-container">
    <div *ngFor="let subFolder of getSubFoldersControls(folder); let i = index" class="subfolder-item">
      <folder-hierarchy (remove)="removeSubFolder(folder, i)" [folder]="subFolder" [parentDirectory]="getSubFolderParent(subFolder)"></folder-hierarchy>
    </div>
  </div>
  <div *ngIf="nameControl.errors?.required" class="folder-hierarchy-error">Name is required.</div>
  <div *ngIf="nameControl.errors?.duplicateName" class="folder-hierarchy-error">Name already exists</div>
</div>

Help is much appreciated

I’m mapping the images to display them. I’m using fill prop of Next Image but the images are not showing in the browser. It’s showing the moment I use width and height props.
I could have gone with the height and width props but that doesn’t help in maintaining consistent dimensions for the images.

I’m not getting what’s the issue

Here’s the code:

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
  {japandiImages.map((image, index) => (
    <div key={index} className="relative w-full h-64">
      <Image
        src={image.src}
        alt={image.alt}
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 33vw"
        className="object-cover rounded-lg shadow"
      />
    </div>
  ))}
</div>

Here’s the link to the GitHub repo in case you wanna see the whole code. The problem is in the route folder named Japandi:
Link to the repo

1. I tried using width and height props of Next Image and it works. However, I can’t use them because they make the dimensions inconsistent for the images.

2. On some YT video, they say to use sizes props along with fill. I tried that too, but it’s still not working.