I’m encountering a warning in my Angular application that states:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead.

I’m using a modal dialog created with the Angular Bootstrap (ng-bootstrap) library. Here’s a simplified version of the relevant code:

<div class="modal-header">
  <h4 class="modal-title">Serial Number</h4>
  <button type="button" class="btn-close" aria-label="Close" aria-label="Close" (click)="popupClose(false)">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Issue:
The warning indicates that an element with aria-hidden is blocking focus from its descendant elements. I want to ensure that my modal is accessible and does not cause issues for assistive technology users.

I considered using the inert attribute as suggested, but I’m unsure how to implement it in this context.
I’ve looked through the ng-bootstrap documentation and found no specific guidance on this warning.

I put in all the code in the html form, css form, and JavaScript form, but I can’t figure out how to connect them all. I have the code so that it will all together create a dropdown box, but it is not working. I put the links to the css and JS in the html form, but when I go to the web page created by the html form it does not show a dropdown box, it just shows the things that I put in the html form, which is just the title and the options.

I tried to put the link thing where it goes like and it didn’t work. I did the same for the stuff you put to connect the JavaScript, but that didn’t work either. In the end, the web page just showed the title and the options that were going to be in the dropdown box.

I have a route set up which works perfectly by rendering a single component. However it fails when I want to navigate back one step in history using Router.back() or Router.go(-1) (same thing according to the docs)

{
        path: '/chat/:URLSlug(-.*)?/:Info([0-9]+)?',
        name: 'Chat',
        component: () => import('../Chat.vue'),
}

1. To get to the homescreen of Chat the user goes to /chat and is shown a list of chats

2. When a user selects a chat, the Chat opens and the user is pushed to /chat/example-chat-name like such:

   VueRouter.push({ 
      name: 'Chat',
      params: {
               URLSlug: 'example-chat-name'
              }
    });
   

3. If a user clicks to see Info about the Chat, they are pushed to /chat/example-chat-name/1 like such:

   VueRouter.push({ 
      name: 'Chat',
      params: {
               URLSlug: 'example-chat-name'
               Info: 1
              }
    });
   

These steps are all using the same component Chat.vue. It just shows/hides stuff depending on what the user clicked on.

4. Now the user is finished seeing the Info screen he clicks on the Back button which runs VueRouter.go(-1); should take him from /chat/example-chat-name/1 to chat/example-chat-name:

However this throws an error of:

Uncaught (in promise) Error: No match for {“name”:””,”params”:{}}
while being at
{“fullPath”:”/chat/example-chat-name”,”path”:”/chat/example-chat-name”,”query”:{},”hash”:””,”params”:{},”matched”:[],”meta”:{},”href”:”/chat/example-chat-name”}

I also noticed that the Chat.vue component has been unmounted in Vue devtools and disappears. If the user clicks the Back button again, it returns to /chat homescreen and Chat.vue component is mounted again.

Clearly there is something up with the route when going back from chat/example-chat-name/1 to chat/example-chat-name but I can’t figure out what or why.

We use commas as our decimal seperator in my company and I am trying to incorporate this in our apex form but it’s automatically rounding the numbers up or own to a whole number when an excel is imported with that number column. I realize that a way around this is to set the column as a text field but then the issue is because these decimals are used in mathemetical functions which then don’t work it’s text and not a number.

What I’m thinking is maybe a convertion from text to decimal with a “dot” as a seperator, ergo 4,2 –> 4.2 and then use that temporary variable in our function.

Example:

var num1 = document.getElementById('P19_MENGE_1').value;
var num2Text = document.getElementById('P19_KI').value; // Get the text value
var num3 = document.getElementById('P19_PF').value;

// Replace commas with periods in num2
var num2 = parseFloat(num2Text.replace(",", ".")); // Convert to a number with the decimal point

// Convert text inputs to numbers with error handling
function toNumber(value) {
    const parsedValue = parseFloat(value);
    if (isNaN(parsedValue)) {
        console.error(`Invalid number: ${value}`);
        return 0;
    }
    return parsedValue;
}

num1 = toNumber(num1);
num2 = toNumber(num2);
num3 = toNumber(num3);

if (num1 === 0 || num2 === 0 || num3 === 0) {
    document.getElementById('P19_ANZ_PAL').value = "";
} else {
    const result = num1 / num2 / num3;
    document.getElementById('P19_ANZ_PAL').value = result.toFixed(1);
}

what happens right now is the decimal gets removed when I click on save so 42,5 goes to 425 and the result is calculated with that 425…

I’m developing a web application that plays audio or video content. I want to detect when a user disconnects their Bluetooth headset (e.g., takes off their Bluetooth headphones) while using the application, so I can automatically pause or stop the media playback.

I’ve tried several methods to achieve this, but none have worked so far:

1. Listening to Media Element Events:
   I added event listeners for pause, ended, stalled, waiting, and error events on the or element. However, none of these events fire when the Bluetooth headset is disconnected on Chrome for Android.

mediaElement.addEventListener('pause', handlePause);
mediaElement.addEventListener('ended', handleEnded);
mediaElement.addEventListener('stalled', handleStalled);
mediaElement.addEventListener('waiting', handleWaiting);
mediaElement.addEventListener('error', handleError);

2. Using navigator.mediaDevices.ondevicechange: I attempted to use the navigator.mediaDevices.ondevicechange event to detect changes in connected devices. However, this event is not available on Chrome for Android.

3. Web Bluetooth API: I considered using the Web Bluetooth API to detect when the Bluetooth headset disconnects. Unfortunately, the API is designed for Bluetooth Low Energy (BLE) devices and doesn’t support classic Bluetooth audio devices like headsets.

Interesting Observation:

I noticed that when I watch videos on YouTube in Chrome for Android and disconnect my Bluetooth headset, the video pauses automatically. This suggests that it’s possible to detect the disconnection of a Bluetooth audio device in a web application.

Question:

How can I detect the disconnection of a Bluetooth headset in a web application using JavaScript, so that I can pause or stop media playback when this happens? Are there any APIs or workarounds that can help achieve this functionality, particularly on Chrome for Android?

Additional Information:

• I’m targeting mobile users who may switch between audio output devices.
• The solution needs to work specifically on Chrome for Android.
• I understand that there might be security and privacy limitations in browsers.

I am not sure which elements are at play with the issues I am facing so I have tried to give a fairly wide outline.

We recently deployed a company SPA web application for an annual event that was based on ASP.NET MVC 5 with client-side JavaScript and jQuery. It used Windows Authentication and staff could access on a mobile phone.

The basic functionality was search for a contact, enter forms data and submit updates. After initial page load, all requests were handled using AJAX requests e.g. $.get(urlToGetContacts).done(funcHandleDone).fail(funcHandleFail)

We tested in the desktop browser before deploying to externally accessible sites so that we could test using mobiles.

We couldn’t “break it” using our own phones (a mix of various Android and iPhone), however, many staff used Company mobiles (iPhone SE 3rd Gen, forcing the user to use MS Edge browser).

There were some weird bugs exclusively with these (even though I have an iPhone SE 2nd Gen with same iOS version and the same Edge browser and build number and it was totally fine).

Firstly, there was the display – the flow of the text and graphics were different – more clunky with the company mobile.

However, more concerning were issues with searching for contacts which would not return back and users were stuck in a loading state. No server side errors were generated.

I have been told we are using Microsoft Intune to manage the company iPhone fleet.

The question is where could these issues be rooted?

How would you diagnose them?

For next year’s app I am wondering on whether we would be better off deploying a .NET MAUI app.

My objective is that when I click on the span tag icon where I am passing my method along with the “onclick=”adicionarItem()” property, the number of products are added to my cart 1 by 1, but nothing happens, what will be the error in the code?

I am creating a shopping cart and the objective is that as I add products 1 and 0, the quantity of products changes dynamically along with their total price, this is the proposal of my method made in javascript, however, even using the property onclick, nothing is happening when I test in the browser using the live server.

I already tried to look for solutions by reading the documentation about onclick or the getelementById() methods, but nothing was found and I was unable to solve this problem

var valorTotal = [0, 0]
var valorProduto = [50.00, 30.00]
var quantidade = [0, 0]



function adicionarItem(item) {

  var quantidade = document.getElementById('quantidade' + item)
  var total = document.getElementById('total' + item)
  qtd[item] += 1
  valorTotal[item] = Number.parseFloat(valorProduto[item]) * qtd[item]
  quantidade.innerHTML = qtd[item]
  total.innerHTML = valorTotal[item].toFixed(2)
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>

<div class="container bg-white rounded-top mt-5" id="zero-pad">
  <div class="row d-flex justify-content-center">
    <div class="col-lg-10 col-12 pt-3" id="carrinho">
      <div class="d-flex">
        <div class="pt-1">
          <h4>My T-shirt</h4>
        </div>
        <div class="ml-auto p-2"><a href="#" class="text-dark text-decoration-none" id="mobile-font">LOGIN</a></div>
        <div class="p-2"><a href="#" class="text-dark text-decoration-none a" id="mobile-font">HELP</a>
        </div>
      </div>
      <div class="d-flex flex-column pt-4">
        <div>
          <h5 class="text-uppercase font-weight-normal">shopping bag</h5>
        </div>
        <div class="font-weight-normal">2 items</div>
      </div>
      <div class="d-flex flex-row px-lg-5 mx-lg-5 mobile" id="heading">
        <div class="px-lg-5 mr-lg-5" id="produc">PRODUCTS</div>
        <div class="px-lg-5 ml-lg-5" id="prc">PRICE</div>
        <div class="px-lg-5 ml-lg-1" id="quantity">QUANTITY</div>
        <div class="px-lg-5 ml-lg-3" id="total">TOTAL</div>
      </div>
      <!----------------------------------------------------------------->
      <div id="produto0" class="d-flex flex-row justify-content-between align-items-center pt-lg-4 pt- 
                    2 pb-3 border-bottom mobile">
        <div class="d-flex flex-row align-items-center">
          <div><img src="https://images.unsplash.com/photo-1529374255404- 
                     311a2a4f1fd9?ixlib=rb- 
                    1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="150" height="150" alt="" id="image"></div>
          <div class="d-flex flex-column pl-md-3 pl-1">
            <div>
              <h6>COTTON T-SHIRT</h6>
            </div>
            <div>Art.No:<span class="pl-2">091091001</span></div>
            <div>Color:<span class="pl-3">White</span></div>
            <div>Size:<span class="pl-4"> M</span></div>
          </div>
        </div>
        <div class="pl-md-0 pl-1"><b>R$50,00</b></div>
        <div class="pl-md-0 pl-2">
          <span class="fa fa-minus-square text-secondary"></span>
          <span class="px-md-3 px-1" id="quantidade0">0</span>
          <!-- //Aqui estou dizendo que estou trabalhando no item 0, por isso 
              passei o 0 como argumento  -->
          <span class="fa fa-plus-square text-secondary" onclick="adicionarItem(0)"></span>
        </div>
        <div class="pl-md-0 pl-1"><b>R$</b> <span id="total0"></span></div>
        <div class="close">&times;</div>
      </div>

      <!----------------------------------------------------------------->
      <div id="produto1" class="d-flex flex-row justify-content-between align-items- 
                    center pt-4 pb-3 mobile">
        <div class="d-flex flex-row align-items-center">
          <div><img src="https://images.unsplash.com/photo-1529374255404- 
                       311a2a4f1fd9?ixlib=rb- 
                        1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="150" height="150" alt="" id="image"></div>
          <div class="d-flex flex-column pl-md-3 pl-1">
            <div>
              <h6>WHITE T-SHIRT</h6>
            </div>
            <div>Art.No:<span class="pl-2">056289891</span></div>
            <div>Color:<span class="pl-3">White</span></div>
            <div>Size:<span class="pl-4"> XL</span></div>
          </div>
        </div>
        <div class="pl-md-0 pl-1"><b>R$30,00</b></div>
        <div class="pl-md-0 pl-2">
          <span class="fa fa-minus-square text-secondary"></span>
          <span class="px-md-3 px-1" id="quantidade1">0</span>
          <!--  // Agr como estou trabalhando com o produto 1, vou colocar o 1 
                        entre parenteses -->
          <span class="fa fa-plus-square text-secondary" onclick='adicionarItem(1)'></span>
        </div>
        <div class="pl-md-0 pl-1"><b>R$</b>
          <span id="total1"></span>
        </div>
        <div class="close">&times;</div>
      </div>

    </div>
  </div>
</div>
<div class="container bg-light rounded-bottom py-4" id="zero-pad">
  <div class="row d-flex justify-content-center">
    <div class="col-lg-10 col-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <button class="btn btn-sm bg-light border border-dark">GO BACK</button>
        </div>
        <div class="px-md-0 px-1" id="footer-font">
          <b class="pl-md-4">SUBTOTAL R$<span class="pl-md-4" 
                    id="valorTotalCompra"></span></b>
        </div>
        <div>
          <button class="btn btn-sm bg-dark text-white px-lg-5 px- 
                3">CONTINUE</button>
        </div>
      </div>
    </div>
  </div>

I have eventResize and eventDrop functions like this. How to get the existing event’s old start and datetime that is being dragged to new date or is being resized?

var calendar = new Calendar(calendarEl, {

events: [
 // events here
],

editable: true,

eventDrop: function(info) {
    alert(info.event.title + " was dropped on " + info.event.start.toISOString());

    if (!confirm("Are you sure about this change?")) {
      info.revert();
    }
},
eventResize: function(info) {
  alert(info.event.title + " end is now " + info.event.end.toISOString());

  if (!confirm("is this okay?")) {
   info.revert();
  }
 }

 });

There are many ways I can think of asking this question. Let’s say we have a single-core CPU on which the OS is running two processes. Process 1 is a Node application and process 2, we don’t care about. Given that there’s only a single core, the two processes will have to share access to it, which means for roughly half the time, each process won’t be executing.

Now, if we call setTimeout(callback, 1000) in process 1, will the callback execute after exactly 1000 (real-world) ms, or will there be some unaccounted delay for the time process 1 has not been executing?

If there’s no extra delay, how can the event loop know when to precisely return the callback? Does this mean the event loop schedules an event using the CPU clock directly, rather than a process-level abstraction, such as the number of loops? And even then, how can the event loop ensure it has CPU access by the time the callback needs to be returned; are events scheduled on a CPU-level queue that can prioritise certain processes at certain times? Or would this callback be executed as soon as process 1 regains access, even if late?

If there’s an extra delay, however, what is the impact this can have on time-sensitive applications that require precise synchronisation and how could we ensure a Node process has continuous access to a CPU core?

I have a project on Serverside rendered Astro JS. I ‘m try pass variable between .astro files on runtime.

For this I use {...}.ts import/exports to share variable between files.

a.ts

export const data = {
   myVariable: false
}

x.astro

---
import { data } from "../a";

if(data.myVariable === true)
  Astro.rewrite("/404/");
---

<SomeComponents />

y.astro

---
import { data } from "../a";
...
...
if(anyVar.length < 1) data.myVariable = true;

In this case, first run the system works fine. But in later requests, AstroJS was cache data.myVariable to true. It always response 404.

How can I share variables in memory and not cacheable?

Issue

I am using a videoelement that i have created with
document.createlement('video') i have not appended it to the DOM, since i dont want it visible anywhere, i just need it so i can stream my webcam to it and then paint that to a , where i can apply filters, e.t.c live, so videoelement is detached from DOM.

This works in Firefox, but in Chromium browsers all i get is a black canvas.

I am expecting chromium browsers to be able to have a continued videostream that i can draw to my canvas, even if the videoelement is detached from DOM, if i do add the videoelement to DOM
document.body.appendChild(videoelementhere) it works and the canvas get the videofeed. only as long as videoelement is visible on view(e.g. if canvas is in top of page, and videoelement in bottom, and theres scroll content between so i cant see videoelement), if videoelement is not visible but is attached and the canvas element is, the video is paused and the canvas has whatever frame i drew last from the videoelement.

jai un probleme au niveau du SEO sur un des projets en react sur lequel je travail, jai applique tout ce quil faut, je visualise meme dans mes balises metadonnes mon opengraph , l’image la description et le title , quand je mmet en ligne tout ce qui concerne mon SEO ne s’applique pas

le seo d’un projet en reactJS

I’m working on a project using JavaScript/Angular, and I’m looking for a library that allows users to edit PDF files. Specifically, I need a solution that enables users to:

• Sign the PDF with a pen tool.
• Upload images to be included in the PDF.

Additionally, I would like to receive the edited PDF file so that I can send it to the backend for storage.

Does anyone have recommendations for libraries that can achieve this functionality? Any guidance or suggestions would be greatly appreciated!

I have tried using the ngx-pdf-editor library, but it only provides the option to download the edited PDF and does not allow me to capture the file to send to the backend.

Does anyone have recommendations for libraries that can achieve this functionality? Any guidance or suggestions would be greatly appreciated!

In FullCalendar there are events that can continue over the night, so you will have events that are in a new day, but FullCalendar makes it so that the content of the event in the first day is repeated in every other day that the event is on. What I’d like to achieve is that the content of the event starts on the first day and is hid.

I have used eventContent with success for a static FullCalendar, I made a class out of every event ID and assigned it to the event using eventClassNames and then I used eventContent to fetch all classes using the event ID and if the length of that array was 0, then I returned the event content. If the class count was not 0 but the event content was not found within the classes then it would also return the event content.

eventClassNames

function (arg) {
  return ['event-' + arg.event.id];
}

eventContent

function (arg) {
  var d1 = document.getElementsByClassName('event-' + arg.event.id);
  if (d1.length == 0) {
    return {html: arg.event.title + '' + arg.event.extendedProps.html};
  }
  console.log(d1);
  for (var i = 0; i < d1.length; i++) {
    if (d1[i].innerText.includes(arg.event.title)) {
      return false;
    }
  }
}

However the problem arises when you try to edit the event using editable, the above code works for static FullCalendar because when the first part of the event is loaded nothing with the class name will yet have been loaded so d1.length will be 0, when you start using editable all parts of the events will already have been loaded and the parts of a event when called can be 1, 2, 3 or more of the exact same event (not parts of the event, just a complete version of the event’s el), to solve this I tried to check whether the event content was already on the screen by looping through all relevant classes however that results in the event seeing itself as shown and ends up showing nothing, or showing the event content on the wrong part of the event.

before moving a event
after moving a event

I’ve also tried splitting events which worked but, it also meant that when I tried to move the events using editable the events would be 2 separate events, maybe there is a way to make them act as one, I tried looking into this but nothing of relevance showed up…

Below is my three js code;

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-0.6, 1, 1).normalize();
scene.add(directionalLight);
const backLight = new THREE.DirectionalLight(0xffffff, 1);
backLight.position.set(0.6, -1, -1).normalize();
scene.add(backLight);

This gives me shadow lke this how to fix this but when i remove the backLight it fixes.

Please Help.