javascript – Page 81 – Blancer.com Tutorials and projects

How to integrate react-native-health with Swift AppDelegate in React Native 0.77+?

I’m trying to integrate react-native-health into my React Native 0.77+ project, but the documentation only shows setup instructions for Objective-C AppDelegate. My project uses Swift AppDelegate (which is the default for RN 0.77+).

The Problem
The react-native-health documentation shows this Objective-C setup:
objc

The Problem
The react-native-health documentation shows this Objective-C setup:
objc#import "AppDelegate.h"
#import "RCTAppleHealthKit.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self
                                            launchOptions:launchOptions];
  
  /* Add Background initializer for HealthKit  */
  [[RCTAppleHealthKit new] initializeBackgroundObservers:bridge];
  
  return YES;
}
What I've Tried

Added #import "RCTAppleHealthKit.h" to my bridging header
Installed the pod and added HealthKit capabilities
Added HealthKit usage descriptions to Info.plist

But I'm struggling with how to properly initialize the background observers in Swift, especially with my custom React Native setup using RCTReactNativeFactory.
Questions

How do I properly initialize RCTAppleHealthKit background observers in Swift AppDelegate?
How do I get access to the RCT bridge instance from my custom factory setup?
Is there a different approach needed for React Native 0.77+ projects?

What I’ve Tried

Added #import “RCTAppleHealthKit.h” to my bridging header
Installed the pod and added HealthKit capabilities
Added HealthKit usage descriptions to Info.plist

But I’m struggling with how to properly initialize the background observers in Swift, especially with my custom React Native setup using RCTReactNativeFactory.
Questions

How do I properly initialize RCTAppleHealthKit background observers in Swift AppDelegate?
How do I get access to the RCT bridge instance from my custom factory setup?
Is there a different approach needed for React Native 0.77+ projects?

Any help would be greatly appreciated!

Dynamically adding/modifying an HTML element with other elements/attributes

I am not sure if this is possible or not but I am receiving an element from the backend and I am trying to modify it to convert a word to a link. This is all in Vue3/Typescript.

Example of backend data I can receive:

<p class="random-class">
  Foo bar bash is zoo monster <span class="different-class">poop zebra</span>
</p>

Attempt
Let’s say that I am trying to convert all words that start with z to an href

const convertWordToHashtag = (element: BackendDataSample) => {
  // extracts the text portion of the content to an array of words
  const textArray = element.textContent.split(' ');
  // checks if anything starts with z
  textArray.forEach((word: string) => {
    if (word && word.charAt(0) === 'z') {
      let newElement = document.createElement('a');
      newElement.href = `https://www.google.com/${word}`;
      newElement.textContent = word;
      
      // go back to the original element 
      element.textContent.replace(word, newElement);
    }
  });
}

My goal is to essentially transform the Element to be used so that it will read:

<p class="random-class">
  Foo bar bash is <a href="https://www.google.com/zoo">zoo</a> monster <span class="different-class">poop <a href="https://www.google.com/zebra">zebra</a></span>
</p>

But this doesn’t seem to work the replace errors out. Is this the right approach or is there an easier way to do this?

Kendo drawing drawDOM weird behaviour

Currently I’m using kendo ui version -> 2022.3.1109

And I want to download pdf from html so here’s my simple code.

<body>
  <div id="pdf-scope">
    <p>
        Assignment Order - <strong>Interview</strong> - Review & Submit
    </p>

    <p>
        Assignment Order - <span class="bold-text">Interview</span> - Review & Submit
    </p>
  </div>

  <button id="btn-download-pdf">
    download
  </button>

</body>
</html>

<script>
  $("#btn-download-pdf").on("click", () => {
      let pdfDom = $("#pdf-scope");
    
      kendo.drawing.drawDOM(pdfDom, {
          /*margin: "2px",*/
          paperSize: "A4",
          scale: 0.4,
          margin: 50,
          keepTogether: ".prevent-split",
          forcePageBreak: ".page-break",
          landscape: true,
          multiPage: true
      }).then(function (group) {
          kendo.drawing.pdf.saveAs(group, "file.pdf");
      });
  });
</script>

Everything’s fine on html view

But when I clicked the pdf button, a strange result shown below in downloaded pdf

The question is why this is happened ? Is it something wrong with my code ?I know the problem is not bold style but the tag inside p is being recognized as tab character, fyi I also tried another workaround such putting 2 div in-line and gave me the same result.

How can I achieve a radial layout in Mermaid?

I am trying to build a Turtle diagram, using Mermaid. I was able to get very close (image below). However, I am not able get a radial layout – all nodes should surround ‘Process’ in a circular manner.

What I am getting – “Proto” Turtle diagram

What I want

flowchart TB
    %% Central Process
    Process@{ shape: hex, label: "<b>Process X:</b>" }
    %% Surrounding Elements
    What(["<b>WHAT:</b>"])
    Who(["<b>WhO:</b>"])
    How(["<b>HOW:</b>"])
    Criteria(["<b>CRITERIA:</b>"])
    Inputs@{ shape: lean-r, label: "<b>INPUTS</b>" }
    Outputs@{ shape: lean-r, label: "<b>OUTPUTS</b>" }

    %% Positioning
    What --> Process
    Who --> Process
    How --> Process
    Criteria --> Process
    Inputs --> Process
    Process --> Outputs
        %% Styling (optional)
    style Process fill:#2f7e3e,stroke:#333,stroke-width:2,color:#fff
    style What fill:#ffff88,stroke:#333
    style Who fill:#ffff88,stroke:#333
    style How fill:#ffff88,stroke:#333
    style Criteria fill:#ffff88,stroke:#333
    style Inputs fill:#ffffff,stroke:#333
    style Outputs fill:#ffffff,stroke:#333

From I can find, Mermaid does not allow granular control over the positioning of individual nodes. The recommended approach is D3. Are there any solutions to achieving a radial layout before I check out D3?

Webpage does not load properly sometimes ASP.NET MVC, ANGULAR

I am facing issue with web page not loading sometimes reported by clients.

I have a login page where UI is angular and BL is Asp.net MVC.

The issue is after loging in, few users report that few of the main page components doesn’t load properly.

It gets resolved when I clear cache of browser and try again but clients are hesitant to do that and also share their screen due to policies.

Also this issue is repeating frequently.

Hence, wanted help on how to find the error in browser of the user.
Also wanted to know if there is a possible way to solve this by clearing cookies from Asp.net MVC code itself if there is error.

Or any other solution which helps.

How can I visualize physics formulas (NKTg₁ and NKTg₂) using Chart.js and JavaScript?

I’m working on a physics simulation involving two quantities:

p = m * v
NKTg1 = x * p
NKTg2 = dmdt * p

These describe momentum, position × momentum, and mass-change × momentum.

What did you try?

I wrote this HTML + JavaScript to input values and show the results:

php-template

<input id="x" value="100"> <input id="v" value="5"> <input id="m" value="10"> <input id="dmdt" value="0.2"> <button onclick="calculate()">Run</button> <div id="output"></div> <script> function calculate() { const x = parseFloat(document.getElementById('x').value); const v = parseFloat(document.getElementById('v').value); const m = parseFloat(document.getElementById('m').value); const dmdt = parseFloat(document.getElementById('dmdt').value); const p = m * v; const NKTg1 = x * p; const NKTg2 = dmdt * p; document.getElementById('output').innerText = `NKTg₁ = ${NKTg1}, NKTg₂ = ${NKTg2}`; } </script>

What were you expecting?

I want to integrate Chart.js to show a real-time bar chart of NKTg1 and NKTg2. Each time the user clicks “Run”, the chart should update with the new values, and ideally track a short history of results.

What actually happened?

I’m stuck on how to:

Set up Chart.js with my existing inputs
Add/update data points dynamically
Avoid reloading or overwriting the whole chart

Question:

How can I visualize NKTg1 and NKTg2 using Chart.js and update the chart dynamically with each calculation?

I’m new to Chart.js and would really appreciate a small working example or guidance on how to hook it into my existing code.

Remove anchor links using jQuery for WordPress website [closed]

My HTML code:

<div class="service-wrap-layout4">
  <div class="row">

    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay=".2s">
      <div class="service-box-layout4">
        <figure class="item-img">
          <a href="https://www.google.com">
            <img
              loading="lazy"
              decoding="async"
              width="308"
              height="199"
              src="#"
              class="attachment-medilink-size2 size-medilink-size2 wp-post-image"
              alt="ecg"
              srcset="#, #"
              sizes="(max-width: 308px) 100vw, 308px">
          </a>
          <div class="item-icon">
            <img loading="lazy" decoding="async" width="64" height="64" src="#" class="attachment-full size-full" alt="">
          </div>
        </figure>
        <div class="item-content">
          <h3 class="item-title"><a href="https://www.google.com">Google</a></h3>
          <p>Quick and painless test to monitor your heart’s electrical activity and rhythm.</p>
        </div>
      </div>      
    </div>
    
  </div>
</div>

How will I hide anchor link with image click and h3 tag anchor link(h3.item-title a)?

And also, no one see my link; they only see “#” only.

Can’t overwrite Divi Builder’s #page-container padding-top

There are lots of posts about this but none of the mentioned solutions works for me. All my

Any ide what the hell should I do? No matter what I try, it appears in DevTools, but the default padding-top: 80px overrides it…

I tried with Theme Option CSS, Header CSS, Code Snippet CSS:

#page-container { padding-top: 0px !important; }

---

.et_fixed_nav #page-container { padding-top: 0px !important; }

I tried Js solutions that apply the css after page loads etc… No luck.

How do I get the current value of `prefers-contrast` or similar matchMedia() queries?

Using JavaScript, I want to get the current value of prefers-contrast. The possible values are 'more', 'less', 'custom' and 'no-preference'.

Doing a

window.matchMedia(`prefers-contrast: ${value}`)

for each of the values doesn’t seem very smart. It’s guessing until you get it right. Technically, it’s brute force.

I’m guessing (hoping?) internally CSSOM holds this value in some property which can be queried without having to run window.matchMedia 4 times (or once for every possible value, to be exact). Besides, a solution going through all known possible values breaks whenever the standard gets added a new value. (For example, 'custom' wasn’t initially a legal value for this media query, it only had the other 3).

Is there an API for this? I want a solution which is future proof, if possible. One which doesn’t need to know in advance all possible values of each media query out there, present and future.

Please consider it a more general question, as it also applies to other such media queries (e.g: prefers-color-scheme, prefers-reduced-motion, prefers-reduced-data, orientation, hover, etc…).

InteractionRequiredAuthError: Application requested a user which does not exists

I’m using the following two modules to integrate Azure authentication into my application:

import { MsalAuthenticationTemplate, MsalProvider, useMsal, useAccount } from '@azure/msal-react';
import { AuthenticationResult, IPublicClientApplication, InteractionType } from '@azure/msal-browser';

Occasionally (though not every time), I encounter the following error:

InteractionRequiredAuthError: Application requested a user which does not exist.

What could be causing this, and how should I handle it?

Scrollbars and zoom button is not announced by screenreader

I am using AM Charts 4 in a large Vue 3 application.

I am trying to make the screenreader announce all of the elements inside an XYChart.

The chart container has aria-live="polite" and when I use keyboard and tab to the columns in the chart, the series category and value is announced by the screenreader. But when I tab to one of the zooming scrollbars, the screenreader is silent.

When I inspect the scrollbar object, I can see it has readerTitle set to Use TAB to select grip buttons or left and right arrows to change selection

Why is this text not read aloud by the screenreader? What do I need to do to make the screenreader read out the readerText because according to the am charts documentation this is “all you need to do”…

Is it possible to somehow interact with DOM during the beforeunload event? [closed]

I want to track page refresh or tab closing via the beforeunload event, but I don’t quite understand how it works? I can’t track the user’s cancellation and apply the DOM change before the pop-up window, maybe this is not possible?

I want to do the following. When trying to reload the page or leave it, I call beforeunload with the functions e.preventDefault() and e.returnValue = false, I want to blur the page content, and when the user cancels the action (i.e. he remains on the page further) remove the blur. Is this even possible to do?

For example, the confirm() function can return true or false, and I can track this, so what should I do with beforeunload?

In this example, the styles are applied after “Cancel” the page update in the dialog box. Is it possible to somehow change the styles BEFORE the dialog box appears, or is it impossible to do this? And is it possible to track the cancellation of the update, i.e. pressing the “Cancel” button in the dialog box, to remove these styles.
The example in the link in the comment gives a policy error.

UPD:
Here’s what I tried to do:

$(window).on('beforeunload', function(e) {
  if ($('#switch').is(':checked')) {
    e.preventDefault()
    e.returnValue = false
    $('.box').css({
      'filter': 'blur(10px)',
      '-webkit-filter': 'blur(10px)',
      '-moz-filter': 'blur(10px)',
      '-o-filter': 'blur(10px)',
      '-ms-filter': 'blur(10px)'
    });
  }
})

<label><input type="checkbox" id="switch" checked> Switch</lable>
<button onclick="location.reload()">Reload Page</button>
<h2 class="box">Page Content</h2>

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

Performance difference between ObjectAssignmentPattern and ArrayAssignmentPattern [duplicate]

is there any performance or optimisation in v8 lvl difference between these two blocks of code?

// ArrayAssignmentPattern
const [firts, second] = await Promise.all([
  fetch('https://api.example.com/first'),
  fetch('https://api.example.com/second')
])

And

// ObjectAssignmentPattern
const { 0: third, 1: fourth } = await Promise.all([
  fetch('https://api.example.com/first'),
  fetch('https://api.example.com/second')
])

I’m not big fun of benchmarking via loop with 1_000_000 iteration, and not really can read bytecode, so i would like to clarify whether these two will work similarly or not.

AM Charts 4 scrollbars and zoom button is not announced by screenreader

I am using AM Charts 4 in a large Vue 3 application.

I am trying to make the screenreader announce all of the elements inside an XYChart.

When I inspect the scrollbar object, I can see it has readerTitle set to Use TAB to select grip buttons or left and right arrows to change selection

Is it possible to somehow interact with DOM during the beforeunload event?

For example, the confirm() function can return true or false, and I can track this, so what should I do with beforeunload?