Blancer.com Tutorials and projects

I would like to override browser’s keyboard shortcuts.
I created an Angular Service that listen the ‘keydown’ event and manage it.
I tried to use stopPropagation(), preventDefault(), stopImmediatePropagation() functions but they do not work.
That is not working because when the keyboard shortcut is one of the browser’s default combinations, it never go into my handle function.

  window.addEventListener('keydown', this.handleKeyDown);

  private handleKeyDown = (event: KeyboardEvent) => {
     event.stopPropagation();
     event.preventDefault();
     event.stopImmediatePropagation(),
     console.debug(this.classNameDebug, 'event: ', event)  // browser default shortcuts are never printed
     return false;
  };

After updating Mozilla Firefox ES to version 140.3.1 in my Debian system, every time I start Firefox I keep having the following message:

Failed to read the configuration file. Please contact your system administrator.

With some search, I’ve identified this message is related with the file autoconfig.cfg. Then I did some testing and realized the message is in fact related with the line Cu.import("resource://gre/modules/FileUtils.jsm");.

I use autoconfig.cfg to copy files from system’s profile to user’s profile. The file content is the following:

// autoconfig.cfg starts with a blank line
// https://support.mozilla.org/en-US/questions/1342800

const {classes: Cc, interfaces: Ci, utils: Cu} = Components;
//Cu.reportError("Testing autoconfig.cfg");

let Services = globalThis.Services || ChromeUtils.import("resource://gre/modules/Services.jsm").Services;
Cu.import("resource://gre/modules/FileUtils.jsm");

var profileDir = Services.dirsvc.get("ProfD", Ci.nsIFile);
var chromeDir = profileDir.clone();
chromeDir.append("chrome");

// If chrome folder isn't there, it's a new profile
if (!chromeDir.exists()) {
  Cu.reportError("chrome folder not found");
  var defaultProfileDir = Services.dirsvc.get("GreD", Ci.nsIFile);
  defaultProfileDir.append("defaults");
  defaultProfileDir.append("profile");
  try {
    Cu.reportError("copying profile folder");
    copyDir(defaultProfileDir, profileDir);
  } catch (e) {
    Cu.reportError(e);
  }
}

function copyDir(aOriginal, aDestination) {
  var enumerator = aOriginal.directoryEntries;
  while (enumerator.hasMoreElements()) {
    var file = enumerator.getNext().QueryInterface(Ci.nsIFile);
    if (file.isDirectory()) {
      var subdir = aDestination.clone();
      subdir.append(file.leafName);
      try {
        subdir.create(Ci.nsIFile.DIRECTORY_TYPE, FileUtils.PERMS_DIRECTORY);
        copyDir(file, subdir);
      } catch (e) {
        Cu.reportError(e);
      }
    } else {
      try {
        file.copyTo(aDestination, null);
      } catch (e) {
        Cu.reportError(e);
      }
    }
  }
}

How can I replace that line or the whole file content, so that the folders and files from the syste’s profile are copied and the error message goes away?

I’m trying to call the ResMan MITS API from my frontend using jQuery AJAX in Squarespace CMS, but I keep getting a CORS error in the browser console. I also tried to implement it in React js and still getting same error. I asked the ResMan support that their api response header doesn’t include the required CORS header and requested to add my domain to their CORS allowlist but they said that their APIs don’t support the manner in which I am attempting to call for data.

I am not sure what I am doing wrong in implementing the API call for the data. So posting here to get some help.

Here is my jQuery Code

jQuery(document).ready(function(){
  var settings = {
      url: "https://api.myresman.com/MITS/GetMarketing4_0",
      method: "POST",
      headers: {"Content-Type": "application/x-www-form-urlencoded"},
      data: {"IntegrationPartnerID": partnerID,"ApiKey": apiKey,"AccountID": accountID,"PropertyID": adelaneID}
  };
  jQuery.ajax(settings)
      .done(function(response){ console.log(response); })
      .fail(function(err){ console.error(err); });
});

Here is my React code:

import React, { useEffect, useState } from "react";
import axios from "axios";

const ApiCalling = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
      const fetchData = async () => {
          const formData = new URLSearchParams({
              IntegrationPartnerID: partnerID,
              ApiKey: apiKey,
              AccountID: accountID,
              PropertyID: adelaneID
          });
          try {
              const response = await axios.post(
                  "https://api.myresman.com/MITS/GetMarketing4_0",
                  formData.toString(),
                  { headers: {"Content-Type": "application/x-www-form-urlencoded"} }
              );
              setData(response.data);
          } catch(err){ console.error(err); }
      };
      fetchData();
  }, []);
  return <div>{data}</div>;
};

The api response is in XML format.

I know using proxy, I can achieve this, but adding files on separate hosting for just adding proxy will cost me more. So looking for a solution where I can have it working without need of hosting.

Please suggest me if I am following the right approach. I have spend my 3 days in researching this issue with no luck.

Here’s a singlepage HTML file that demonstrates the issue:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      height: 100vh;
      width: 100vw;
      background-color: blue;
    }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      document.addEventListener('click', () => {
        if (document.pointerLockElement === document.body) {
          document.exitPointerLock();
        } else {
          document.body.requestPointerLock();
        }
      });
    </script>
  </body>
</html>

The issue is that when pointer lock mode activates, macOS Safari shows a banner:

Your mouse pointer is hidden. Press Esc (Escape) once to dismiss this banner. Press Esc again to reveal your mouse pointer.

When you press escape (or, in my demo, click to end pointerlock mode) the banner disappears, but CSS values like 100vh still report the height that the viewport was when the banner was there. So there is a white bar along the bottom of the page the same height that the banner was.

How can I use the CSS/JavaScript/HTML I have control of to solve this issue?

When the pointerlock banner disappears, I want CSS values like vh to get updated.

I’m using React Router v7 and I want a pure SPA setup—no server-side rendering (SSR) or pre-rendered HTML at all.

I set in my router config:

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
  prerender: false,
  future: {
    v8_middleware: true,
  },
} satisfies Config;

Vite config:

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  build: {
    ssr: false,
  },
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
});

Even with this configuration, my build still generates HTML for the root route, and I get hydration mismatch errors in the browser.

The error:

Uncaught Error: Hydration failed because the server rendered text didn’t match the
client. As a result this tree will be regenerated on the client. This can happen if a
SSR-ed Client Component used:

• A server/client branch if (typeof window !== 'undefined').
• Variable input such as Date.now() or Math.random() which changes each time it’s called.
• Date formatting in a user’s locale which doesn’t match the server.
• External changing data without sending a snapshot of it along with the HTML.
• Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed
which messes with the HTML before React loaded.

I found this note in the docs:

“It’s important to note that setting ssr:false only disables runtime server rendering. React Router will still server render your root route at build time to generate the index.html file. This is why your project still needs a dependency on @react-router/node and your routes need to be SSR-safe. That means you can’t call window or other browser-only APIs during the initial render, even when server rendering is disabled.”

Is there a way to completely disable all build-time HTML generation in React Router v7 so that it behaves as a pure client-side SPA? Or do I need to bypass React Router’s build system entirely?

Our most loved dishes include Thalassery Chicken Biryani, Arabic Mandhi, Poratta & Beef, Alfaham, and classic Malabar snacks.text

Malabar Menu is best known for its flavorful Thalassery Chicken Biryani, cooked with fragrant rice, tender meat, and traditional Malabar spices. Our Arabic Mandhi is another top favorite — juicy, smoky, and perfectly seasoned. Guests also love our Poratta and Beef Roast, a timeless Kerala combo. For snack lovers, we offer Malabar-style Samosas, Unnakaya, and Pazham Nirachathu, each handmade with care. Every item on our menu reflects the rich heritage of Malabar cuisine with a modern twist.text

I’m using React Router v7 and I want a pure SPA setup—no server-side rendering (SSR) or pre-rendered HTML at all.

I set in my router config:

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
  prerender: false,
  future: {
    v8_middleware: true,
  },
} satisfies Config;

Vite config:

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  build: {
    ssr: false,
  },
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
});

Even with this configuration, my build still generates HTML for the root route, and I get hydration mismatch errors in the browser.

The error:

Uncaught Error: Hydration failed because the server rendered text didn’t match the
client. As a result this tree will be regenerated on the client. This can happen if a
SSR-ed Client Component used:

• A server/client branch if (typeof window !== 'undefined').
• Variable input such as Date.now() or Math.random() which changes each time it’s called.
• Date formatting in a user’s locale which doesn’t match the server.
• External changing data without sending a snapshot of it along with the HTML.
• Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed
which messes with the HTML before React loaded.

I found this note in the docs:

“It’s important to note that setting ssr:false only disables runtime server rendering. React Router will still server render your root route at build time to generate the index.html file. This is why your project still needs a dependency on @react-router/node and your routes need to be SSR-safe. That means you can’t call window or other browser-only APIs during the initial render, even when server rendering is disabled.”

Is there a way to completely disable all build-time HTML generation in React Router v7 so that it behaves as a pure client-side SPA? Or do I need to bypass React Router’s build system entirely?

I’m executing automation script using WebdriverIO and Appium in Android and ‘iOS’. I have automation test in javascripts. The functions in the automation scripts are working great in ‘Android’ but I have problem in executing the same functions in ‘iOS’. Suggestion that has been executed:

1. The function in ‘Android’ is working ok but amazingly not working when executed in ‘iOS’. Following are the sniped of the code that I have turn into a function to be used as gesture of scrolling and touch.

export async function performScrollGesture01({
    startX,
    startY,
    endX,
    endY,
    delay = 1000,
    tapclickdelay = 50
  }) {
    console.log("START ACTION");
    const actions = [
      {
        type: 'pointer',
        id: 'finger1',
        parameters: { pointerType: 'touch' },
        actions: [
          { type: 'pointerMove', duration: 0, x: startX, y: startY },
          { type: 'pointerDown', button: 0 },
          { type: 'pause', duration: tapclickdelay },
          { type: 'pointerMove', duration: delay, 'origin': 'viewport', x: endX, y: endY},
          { type: 'pointerUp', button: 0 }
        ]
      }
    ];
    await browser.pause(100);
    await browser.performActions(actions);
    console.log("END ACTION");
}

2. XCUITest version changes. Currently the latest.
3. WebDriverAgent version changes.
4. Using actions and touchActions functions instead of performActions.

I have a question regarding Safari’s Intelligent Tracking Prevention (ITP).

My understanding is that under Safari’s current ITP policy, any cookie created client-side using JavaScript’s document.cookie is capped at a maximum expiration of 7 days.

To test this behavior, I ran the following code in the Safari Developer Tools console to create a cookie with an expiration set to 30 days from now.

document.cookie = "cookie_test=hoge; expires=" + new Date(Date.now() + 30*24*60*60*1000).toUTCString() + "; path=/; SameSite=Lax";

After running the code, I inspected the cookie in the Developer Tools’ Storage tab. To my surprise, the Expires field for the cookie_test cookie was set to the full 30 days in the future, exactly as specified in the code.

This appears to contradict my understanding of the 7-day limit imposed by ITP.

1. Is the 30-day expiration date shown in the Developer Tools merely a display value, while ITP will still delete the cookie internally after 7 days?

2. Or, are there specific circumstances (such as running code directly from the console) where the 7-day ITP limit does not apply?

I would appreciate any clarification on the correct interpretation of this behavior.

Its a WebApp written in Delphi 12 using TMS Webcore.

At Logout (which happens by user action, or after idle timeout) I want to clear the memory

• For security
• In case there are undiscovered memory leaks
• To allow the browser to download a new version if it exists

I keep getting an exception (below) on Restarting the Application.

Question : How can I

• Either stop it form occurring (ideal)
• Or Capture it silently and attempt another restart

I have tried a few options, but I keep getting an exception in the constructor of the Main form. This indicates that the memory from the previous session has not been cleared.

Code for Log_Out

procedure Tfrm_Ops_Main.Log_Out (AAuto : Boolean = False);
begin
  TConsole.Log (msg_Logging_Out);
  if AAuto
  then Stop_Warning_User_At_Tab_Close;
  Free_Child_Form;
  Close;
  { Allowing for Form to Close }
//  THtml.Replace_Page;
  THtml.Reload_After_Delay (400);
end;

I have tried the three methods

• Replace_Page
• Reload_Page
• Reload_Page_After_Delay

THtml class code

class procedure THtml.Replace_Page  (AUrl : string = '');
var
  lUrl  : string;
  lTime : Int64;
begin
  { Add time in ms if same URL }
  if AUrl = ''
  then begin
       LTime := Trunc ((Now - UnixEpoch) * ToMS);
       LUrl := window.location.href + '?t=' + IntToStr (LTime);
  end
  else LUrl := AUrl;
  document.location.replace (LUrl);
end;

class procedure THtml.Reload_Page;
begin
  document.location.reload (True);
end;

class procedure THtml.Reload_After_Delay (ADelayMS : Integer);
var
  LTimer : TWebTimer;
begin
  LTimer          := TWebTimer.Create(nil);
  LTimer.Interval := ADelayMS;
  LTimer.Enabled  := True;
  LTimer.OnTimer  := Do_Reload;
end;

class procedure THtml.Do_Reload (Sender : Tobject);
begin
  TWebTimer (Sender).Free;
  THtml.Reload_Page;
end;

The exception fragment is

Error: Duplicate component name: "divHeading" 
at Object.Create$1 (https://example.com.au/ops-test/ops_1_0_2109.js:3634:23) 
at Object.CreateFmt (https://example.com.au/ops-test/ops_1_0_2109.js:3641:12) 
at c.$create (https://example.com.au/ops-test/ops_1_0_2109.js:366:19) 
at Object.ValidateRename (https://example.com.au/ops-test/ops_1_0_2109.js:15533:188) 
at Object.SetName (https://example.com.au/ops-test/ops_1_0_2109.js:15513:21) 
at Object.SetName (https://example.com.au/ops-test/ops_1_0_2109.js:33680:38) 
at Object.LoadDFMValues (https://example.com.au/ops-test/ops_1_0_2109.js:127837:25) 
at Object.CreateNewForm (https://example.com.au/ops-test/ops_1_0_2109.js:43375:13) 
at Object.DoFormLoad (https://example.com.au/ops-test/ops_1_0_2109.js:43010:12) 
at XMLHttpRequest.cb (https://example.com.au/ops-test/ops_1_0_2109.js:282:28)

I am using transformation matrices with jspdf to change the origin and scaling of my drawings. setCurrentTransformationMatrix has no official documentation from what I found (well, except if “sets the current transformation matrix” counts as one). Matrix, however, has one, that goes something like “Creates a Matrix. In jspdf, matrices are applied to the right, i.e vTransformed = v x M“. It is also mentionned that :

new Matrix(a,b,c,d,e,f) 
<=>
|ab0|
|cd0|
|ef1|

But there seem to be something I just don’t get. For instance, I tried drawing a circle centered at (10.5, 14.85) (on a standard a4 paper) with the following transformation matrix :

let doc = jspdf({ unit: "cm" })
let m = doc.Matrix(1,0,0,1.7,0,0)
doc.setCurrentTransformationMatrix(m)
doc.circle(10.5, 14.85, 1)

I expected the circle’s coordinates to transform as x -> x*1 and y -> y*1.7, and thus have it located at the bottom of the page. However, it actually popped at the top. Taking m = doc.Matrix(1,0,0,0.3,0,0) seemed to yield the correct result, although I’m unable to explain why. Furthermore, there is apparently no such thing as a x-reversal, as that weird behavior only affects the y-axis. Taking f != 0 makes things even more unclear, so I’m also searching for an explanation regarding the role of e and f and how does it combine with a, b, c and d.

Thanks !

First of all, I would like to point out that I am using a ready-made script and since it contained too many lines and I did not know where to split it, stackoverflow did not allow me to add it, I had to upload the codes to codepen.

https://codepen.io/Koray-Gen-/pen/YPwpKzJ

What I want to do is change the color of the scrolling text in the background with the button.

<button onclick="draw('green')">Green</button> 

I wonder where I’m doing wrong?