Blancer.com Tutorials and projects

I’m using Next.js 15 and trying to access request headers in a React Server Component inside the app/ directory using the new async headers() API introduced in this version.

Here’s the start of my page.tsx:

// app/users/page.tsx

import { headers } from 'next/headers'

export const dynamic = 'force-dynamic'

const UsersPage = async () => {
  const headersList = await headers()
  console.log(headersList)
  return <div>Users Page</div>
}

export default UsersPage

However, the headersList I get is always empty:

HeadersList {
  cookies: null,
  [Symbol(headers map)]: Map(0) {},
  [Symbol(headers map sorted)]: null
}

I am trying to make a chatbot using NodeJS and NextJS, but the text stream is getting slower in production.
This snippet contains an Express, Node.js project for streaming chat messages to the client. It is working fast in localhost, but in production, it is streaming text slowly.
I have set proxy_buffering off in NGINX, but it is still slower than localhost.

export async function getChatStream(
  req: RequestWithUserAuthInfo,
  res: Response,
  next: NextFunction
): Promise<void> {
  try {
    const query = req.query?.q as string;
    const params = req.params;
    const sessionId = params.id;
    const userId = req.user.id;

    if (!query || !sessionId) {
      throw {
        status: 400,
        message: "Query and SessionId are required",
      };
    }

    if (!userId) {
      throw {
        status: 400,
        message: "User id is required",
      };
    }
    console.log("Incoming request:", { userId, sessionId, query });

    const session = await findOrCreateSession(userId, sessionId, query);

    await saveMessage(session, query, MessageSender.USER);

    // Set up SSE headers for real-time streaming
    res.setHeader("Content-Type", "text/event-stream");
    res.setHeader("Cache-Control", "no-cache");
    res.setHeader("Connection", "keep-alive");

    let botResponse = "";
    let messageId = "uuid";

    let clientDisconnected = false;

    req.on("close", () => {
      clientDisconnected = true;
      console.log("Client disconnected. Aborting stream.");
    });

    // Stream bot response in chunks
    for await (const chunk of getStreamFromAPI(query, sessionId)) {
      if (clientDisconnected) break;
      botResponse += chunk;
      res.write(`${chunk}`);
    }

    await saveMessage(
      session,
      botResponse,
      MessageSender.BOT,
      messageId,
      false
    );

    res.end();
  } catch (error) {
    next(error);
  }
}

I have the following grid of 0s and 1s (image 1). I want to be able to group each section together so that when the user hovers over a section it will make a border around the entire section (image 2). The sections can be from different lines (image 3).

Image 1

Image 2

Image 3

Here are my questions:

1. How do I structure the HTML?
2. How do I do the CSS?
3. What JavaScript, if any, needs to be added?

Here is what I thought of:

Method 1
Each 1 or 0 will be a div and use a div to group the 1s and 0s and use a div to group the entire thing such as the following:

<div>
    <div>
        <div>0</div>
    </div>
    <div>
        <div>0</div>
    </div>
    <div>
        <div>0</div>
        <div>1</div>
        <div>0</div>
    </div>
    <div>
        <div>0</div>
    </div>
</div>

That would be easier to style the border, but how would I still maintain the grid shape?

Method 2
Each 1 or 0 will be a div and each group will have the same class with each other such as the following:

<div>
    <div data-group0>0</div>
    <div data-group1>0</div>
    <div data-group2>0</div>
    <div data-group2>1</div>
    <div data-group2>0</div>
    <div data-group3>0</div>
    <div data-group4>1</div>
</div>

This would be easier to style the grid shape, but how would I style the borders?

How to call an API on before unload event in react, I have tried fetch with Keepalive true & sendbecon(doesn’t support authorization headers in headers)

Also, I want to show dialog box with custom message on unload. the behavior is in consistent.

  // Handle browser tab close or refresh
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      e.preventDefault();
      e.returnValue = '';
     // unlock user API call
      unlock();
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, []);

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!

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?

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.

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?

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.

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.

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.

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.

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…).

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?

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”…