Blancer.com Tutorials and projects

I’m developing a simple web app using HTML and vanilla JavaScript. The app allows users to upload an image, which is then sent to Firebase Storage. My web app is hosted at https://esstsas.net.

The Problem:

When I try to upload an image to my Firebase Storage bucket (gs://checksst-faster.firebasestorage.app), the request fails with a CORS preflight error in the browser console:

Access to XMLHttpRequest at ‘…’ from origin ‘https://esstsas.net‘ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

This is the relevant JavaScript code that handles the image upload: I am using the Firebase JS SDK (v11.6.1). The storage object has been correctly initialized.

JavaScript

// This function is called when the "Save" button is clicked
async function saveInspection() {
    const file = lastSelectedFile; // lastSelectedFile is the user's selected image File object
    const userId = auth.currentUser.uid;

    if (!file || !userId) {
        console.error("File or User ID is missing.");
        return;
    }

    try {
        console.log("Step 1: Resizing image...");
        const resizedImageBlob = await resizeImage(file); // Resizes image to a Blob
        console.log("Step 2: Uploading to Storage...");

        const fileName = `${Date.now()}-${file.name}`;
        const storageRef = ref(storage, `images/${userId}/${fileName}`);
        
        // This is the line that fails
        const uploadTask = await uploadBytes(storageRef, resizedImageBlob);
        
        console.log("Step 3: Getting download URL...");
        const downloadURL = await getDownloadURL(uploadTask.ref);

        // ... code to save the downloadURL to Firestore would go here
        console.log("Upload successful:", downloadURL);

    } catch (error) {
        console.error("DETAILED UPLOAD ERROR:", error);
    }
}

What I’ve already tried (Troubleshooting Steps):

I am certain this is not a simple configuration error because I have performed extensive troubleshooting:

• CORS Configuration: I used the gcloud CLI to set the CORS policy on my bucket. The command gsutil cors get gs://checksst-faster.firebasestorage.app confirms the policy is set correctly with my origin: [{"origin": ["https://esstsas.net", "https://www.esstsas.net"], "method": ["GET", "POST", "OPTIONS"], ...}]

• Wildcard Test: As a test, I also applied a wildcard policy with "origin": ["*"]. The error still persisted.

• Client-Side Caching: I have ruled out browser caching by performing a hard refresh (Ctrl+Shift+R), testing in incognito mode, using a completely different browser, and testing on a different network (mobile hotspot).

• Firebase Rules: My Firestore and Storage security rules are correctly configured to allow access for authenticated users (allow read, write: if request.auth != null && request.auth.uid == userId;).

Even with the server-side CORS configuration confirmed as correct and after eliminating all client-side caching possibilities, the browser still receives a failed preflight response. I cannot create a formal Google Cloud support ticket as I am on the free plan.

Is there any other project-level setting, network issue, or known bug that could be overriding the bucket’s CORS policy?

How can I reliably detect the end of the page in Safari on macOS 15 using plain JavaScript, in a way that works across zoom levels and dynamic content?

I have the following code that scrolls the page downward smoothly:

window.__scrollInterval = setInterval(() => {window.scrollBy(0, 0.3, 'smooth');}, 0);

What I need is a reliable way to detect when the page has reached the bottom. The detection must work regardless of zoom level, which is where most solutions fail—especially in Safari.

When the end of the page is reached, I want to trigger:

alert('End');

Requirements:

• Must work in Safari on macOS 15

• Must be written in plain JavaScript (no libraries)

• Must be robust against zoom level changes

Pages to test on:

• https://www.mi.com/

• https://www.apple.com/

• https://www.apple.com/iphone-17-pro/

• https://www.google.com/search?q=iphone+17

• Legacy websites from 1999–2007 (static HTML, minimal JS)

I am working on a react front-end project want to add a loading icon for data loading time. It worked well at the initial time, but did not work if the data changed, here is the useEffect to handle this:

useEffect(() => {
  setLoading(true);
  if (!frameResults.length) {
    return;
  }
  if (typeof graphSetting?.movementDomain[1] === 'string') {
    if (graphSetting.movementDomain[1] === 'dataMax+5') {
      yAxisDomainRef.current = [0, getDataMax(frameResults) + 5];
    }
  } else if (typeof graphSetting?.movementDomain[1] === 'number') {
    yAxisDomainRef.current = graphSetting.movementDomain;
  }
}, [frameResults]);

useEffect(() => {
  setLoading(true);

  if (frameResults.length < 1) {
    return;
  }
  Boolean(selectedIdx)
  const options = new Array({ value: 0, label: t("Overview") })
    .concat(frameSectionStartTime.map(
      (time, idx) => ({
        value: idx + 1,
        label: `${t("Section")} ${idx + 1}: ${time.split(" ")[1]}`
      })
    ));
  setSectionOption(options);
  setSelected(1);
  setLoading(false);
}, [frameResults]);

useEffect(() => {
  setLoading(true);

  if (frameResults.length < 1) {
    return;
  } else if (selectedIdx == 0) {
    const sectionStart = new Date(frameSectionStartTime[0]);
    const lastframe = frameResults[frameResults.length - 1].length - 1;
    const lastStamp =
      frameResults[frameResults.length - 1][lastframe].timestamp;
    const sectionEnd = new Date(`${date} ${lastStamp}`);

    setMinimapDomain({
      x: [sectionStart, sectionEnd],
      y: yAxisDomainRef.current
    });
    setZoomDomain({
      x: [sectionStart, sectionEnd],
      y: yAxisDomainRef.current
    });
    setLoading(true);
  } else {
    const domainStart = new Date(frameSectionStartTime[selectedIdx - 1]);
    const lastframe = frameResults[selectedIdx - 1].length - 1;
    const lastStamp = frameResults[selectedIdx - 1][lastframe].timestamp;
    const sectionEnd = new Date(`${date} ${lastStamp}`);
    const sectionLength = sectionEnd - domainStart;
    const domainLength = 15000;
    const domainEnd = new Date();
    domainEnd.setTime(domainStart.getTime() + domainLength);

    setMinimapDomain({
      x: [domainStart, sectionLength >= 15000 ? sectionEnd : domainEnd],
      y: yAxisDomainRef.current
    });
    setZoomDomain({
      x: [domainStart, domainEnd],
      y: yAxisDomainRef.current
    });
    setLoading(false);
  }
}, [selectedIdx, frameResults]);

components part is like:

<Spin spinning={loading}>
  <VictoryChart>...</VictoryChart>
</Spin>

I think it may due to the fact that rendering time is too quick, so the loading state cannot got back to true again. I added a timeout, it can render every time frameResult data changed, but has a slightly delay. It should render immediately once the frameResult data changed, but it now has a slightly delay and then render the loading icon.

I have a problem with vitest + coverage via V8. I want to run tests with vitest on many browsers, but i cannot even run tests because of error below

I have Vitest config like this for browser instances:

browser: {
  enabled: true,
  provider: 'playwright',
  instances: [
    { name: 'chromium', browser: 'chromium' },
    { name: 'firefox', browser: 'firefox' }
  ]
},

and coverage:

coverage: {
  provider: 'v8',
  reporter: ['html', 'cobertura'],
  reportsDirectory:'./coverage/chromium',

And when I run tests I see an error

Error: @vitest/coverage-v8 does not work with
{
  "browser": {
    "provider": "playwright",
    "instances": [
      {
        "browser": "chromium"
      },
      {
        "browser": "firefox"
      }
    ]
  }
}

Use either:
{
  "browser": {
    "provider": "playwright",
    "instances": [
      {
        "browser": "chromium"
      }
    ]
  }
}

...or change your coverage provider to:
{
  "coverage": {
    "provider": "istanbul"
  }
}

The main question is how to run test on all browsers but gather coverage only for Chromium?

I met a JS regex used for Joi validation. It is hard to understand and may I ask your help to explain it?

Joi.string().regex(/^(?=.*S).+$/).required()

It did work for validating none blank string. But don’t know how it works?

The Chaining section of the Node.js documentation mentions that the registered hooks will form chains.

Based on the load hook section, I’ve tried it myself.

I found that if the load hook wants to return an object with a processed source, shortCircuit must be set to true, otherwise it will throw an error:

"./my-hook.mjs 'load'" did not call the next hook in its chain and did not explicitly signal a short circuit. If this is intentional, include `shortCircuit: true` in the hook's return.

If I call the nextLoad function, its parameters also don’t seem to allow passing the processed result of my hook; the parameter can only pass a URL, but my hook’s processed result is in memory.

Does this mean my hook cannot pass its processed result to other hooks?
Am I misunderstanding something?

My code:

// my-hook.mjs
export async function load(url, context, nextLoad) {
  if (url.endsWith(".js")) {
    let source = await readFile(fileURLToPath(url), "utf-8");
    source = source.replace("hello", "123");
    return {
      source: source,
      shortCircuit: true, // cannot be false
      format: "module",
    };
  }
  return nextLoad(url);
}

// register-hooks.mjs
import { register } from "node:module";
register("./my-hook.mjs", import.meta.url);

node --import ./register-hooks.mjs a.js

---

Context:

I want to add a new syntax to TypeScript.

My idea is to write a load hook that processes .ts files and converts my syntax into standard TypeScript syntax. Then, I would pass the converted code to tsx.

Like this: node --import my-hook --import tsx a.ts

Is this feasible? If not, could you recommend other methods?

I’m trying to send an email using the Outlook’s office.js API’s item.sendAsync() method which triggers on custom send button added on taskpane from a task pane add-in. However, I’m getting a Host Error with the following response:

{
  "code": 5000,
  "message": "The operation is not supported.",
  "name": "Host Error"
}

Here is the code snippet I am using

item.sendAsync((result) => {
    if (result.status === Office.AsyncResultStatus.Succeeded) {
        document.getElementById('review-message').innerHTML = 
            '<p class="ms-font-xs" style="color: green;">✅ Email sent successfully via sendAsync!</p>';
        
        // Close task pane after short delay
        setTimeout(() => {
            if (window.close) {
                window.close();
            }
        }, 2000);
    } else {
        console.error('sendAsync failed:', result.error);
        const error = result.error;
    }
});

I am using it on Outlook for Mac (version 16.102)
Also I have added below permission in mainfest.xml

  <Permissions>ReadWriteMailbox</Permissions>

I want to acheive below functionality in my addIn

1. Display email data on taskpane also having custom send button
2. send from custom send button available in taskpane (so above code snippet is triggered on button click)

I have an API where the status of a user changes.
After exactly 10 minutes of the status change, I need to send an email to that user.

Constraints:

I cannot use setTimeout or setInterval (not reliable, won’t survive server restarts).

I don’t want to use Redis-based schedulers (like Bull, Agenda, etc.).

I don’t want to use cron jobs.

The event must fire only once (no duplicate sends).

I want to keep server load minimal.

Example flow:

User’s status is updated at 12:00.

At 12:10, system should automatically send them an email.

What are the best alternatives for this scenario?

Should I handle this inside the database (delayed execution, scheduled events)?

Or is there a pattern for “delayed single execution” without timers/cron/Redis?

I’m using Node.js (Sequelize + MySQL) but open to general solutions.

What I tried:

First, I tried using setTimeout in Node.js to delay the email send by 10 minutes.

setTimeout(() => sendEmail(userId), 10 * 60 * 1000);

But this fails if the server restarts or scales horizontally (timers are lost).

Then I looked into node-cron and Redis-based schedulers like Bull/Agenda.
These work, but I want to avoid running extra schedulers/Redis to reduce server load and complexity

Related to Properly simulate “pattern” attribute with javascript:
How do I set an input pattern using JavaScript?

when I try element.pattern = 'aS' (as a trivial example), then the pattern ends up in aS (with the backslash being removed).
The same happens with

element.pattern = `aS`

Of course I could double the backslash, but I’d like to create the javascript using a string constant that is used in CGI’s textfield({-pattern => PATTERN}).

A bit like this:

#...perl part to create initial HTML element...
textfield(-pattern => PERL_PATTERN, ...);

#...creating JavaScript to add or remove pattern dynamically
element = document.getElementById(...);
if (...)
    element.pattern = `${PERL_PATTERN}`;
else
    element.removeAttribute('pattern');

I’d like to avoid something ugly as

use constant PERL_PATTERN => 'aS';
use constant JAVASCRIPT_PATTERN => PERL_PATTERN =~ s/\/\\/gr;

to duplicate the pattern, but with backslashes doubled.
Is there a way to keep the backslash in JavaScript?

I want to recreate the svg animation using gsap as shown here:

[Before]
(https://i.sstatic.net/7oXflNxe.png)

on hover

you can check out orginal animation on their official website : https://www.rejouice.com/ below there is marque container you can pan left or right till you see the clock card

Can anyone tell me exactly how to create this animation using gsap I am pretty confused right now.

I dont know how to animate svg components just want to learn it

I am trying to write a google ads script where for two specific keywords, I turn them both ON and then both OFF in alternating hours for six weeks in a specific country. All users should be able to see these ads when the keywords are on, and no users should be able to see them when they are off. So the rhythm should be:

Monday
00:00 – 00:59 Keywords ON
01:00 – 01:59 Keywords OFF
02:00 – 02:59 Keywords ON

Tuesday
00:00 – 00:59 Keywords OFF
01:00 – 01:59 Keywords ON
02:00 – 02:59 Keywords OFF

And so on. If this routine is followed, Monday on week 2 should start with keywords OFF from 00:00 – 00:59 and so on.

I only have some javascript experience and am totally new to google ads specifically, so I’m a bit afraid of just implementing my script without prior consulting someone else. It also feels needlessly complicated as of right now. Here’s what I have so far:

function main() {
  var account = AdsApp.currentAccount();
  var tz = account.getTimeZone();

  // only run for austria accounts
  if (tz !== "Europe/Vienna") {
    Logger.log("Not Austria (" + tz + "), exiting.");
    return;
  }

  // define start date
  var startDate = new Date(2025, 0, 1); // Example: Jan 1, 2025
  var today = new Date();
  
  // get "today" in account time zone
  var todayStr = Utilities.formatDate(today, tz, "yyyy-MM-dd");
  var todayLocal = new Date(todayStr); // midnight local

  // days since start
  var msPerDay = 1000 * 60 * 60 * 24;
  var daysSinceStart = Math.floor((todayLocal - startDate) / msPerDay) + 1;

  // odd days start ON, even days start OFF
  var startingOn = (daysSinceStart % 2 === 1);

  // current hour in AT
  var hour = parseInt(Utilities.formatDate(today, tz, "H"), 10);

  // flip every hour
  var isOn = (hour % 2 === 0) ? startingOn : !startingOn;

  Logger.log("Day " + daysSinceStart + " (startingOn=" + startingOn + 
             "), hour " + hour + " → " + (isOn ? "ON" : "OFF"));

  // select keywords by label
  var selector = AdsApp.keywords()
    .withCondition("LabelNames CONTAINS 'EXPLabel'");

  var keywords = selector.get();
  while (keywords.hasNext()) {
    var kw = keywords.next();
    if (isOn && kw.isPaused()) {
      kw.enable();
      Logger.log("Enabled: " + kw.getText());
    } else if (!isOn && !kw.isPaused()) {
      kw.pause();
      Logger.log("Paused: " + kw.getText());
    }
  }
}

I’ve implemented a temporary debug dialog for a web page which displays any error messages using an event listener:

window.addEventListener("error", function (event) {
        $('#debugDialogModalBody').append('<h5>' + event.error + '</h5>');
        $('#debugDialogModalBody').append('<p>' + event.error.stack.replace(/n/g, '<br/>') + '</p>');
});

I am now trying to catch any warning messages to append to the dialog, but it appears that there are no event types which correspond to warnings. Is it possible to get any warnings through event listeners, or do I need to find these using any other method?

I am trying to add a context menu component to my React flow app so when you right click on a node a context menu shows up next to it. I am using React Flow and have been trying to convert the
example they give in JavaScript to typescript.

the context component works with no errors, but after I add this logic for positioning the menu, I am getting this error message Type 'void' is not assignable to type 'string | number | undefined'. The expected type comes from this index signature.

this is my App.tsx

import { ReactFlow, type Node,  useNodesState, addEdge, useEdgesState,  type Edge } from '@xyflow/react';
import {Controls, Background, BackgroundVariant} from '@xyflow/react'
import ContextMenu, { type Menu } from './ContextMenu';
import React from 'react'
import { useCallback, useRef, useState} from 'react';
import ExtendableNode from './extendable-node'


 const nodeTypes = {
  extendableNode: ExtendableNode 

};
 
const initialNodes: Node[] = [
  {
    id: '1',
    position: {x: 10, y: 10},
    data: {label: "default label"
    },
    type: 'extendableNode',

  }
  
];
 
const initialEdges: Edge[] = []
//const NewNodeId = () => `randomnode_${new Date()}`


function Flow() {

  const [nodes, setNodes , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [menu,  setMenu] = useState<Menu | null>(null);
  const ref = useRef<HTMLDivElement | null>(null);



  const onNodeContextMenu = useCallback(
    (event: React.MouseEvent, node: { id: string }) => {
      // Prevent native context menu from showing
      event.preventDefault();

      // Calculate position of the context menu so it doesn't get rendered off screen

      const pane = ref.current?.getBoundingClientRect();
      if (pane) {
        setMenu({
          id: node.id,
          top: event.clientY < pane.height - 200 ? event.clientY : false,
          left: event.clientX < pane.width - 200 ? event.clientX : false,
          right: event.clientX >= pane.width - 200 ? pane.width - event.clientX : false,
          bottom: event.clientY >= pane.height - 200 ? pane.height - event.clientY : false,
        });
      }
    },
    [setMenu],
  );

  // Close the context menu if it's open whenever the window is clicked.
  const onPaneClick = useCallback(() => setMenu(null), [setMenu]);

  return (
    <div className="h-screen w-screen p-8 bg-gray-50 rounded-xl">
      <ReactFlow
        nodes={nodes}
        nodeTypes={nodeTypes}
        onNodesChange={onNodesChange}
       onPaneClick={onPaneClick}
       onNodeContextMenu={onNodeContextMenu}
  
        fitView>
           {menu && <ContextMenu onClick={onPaneClick} {...menu} />}
        <Background color="#ccc" variant={BackgroundVariant.Cross} />
       
      
        <Controls/>
        </ReactFlow>
      
    
      
    </div>
  );
}
export function App() {
  return <Flow />;
}

This is the interface

import  {type FC, useCallback } from 'react';
import { useReactFlow, type Node } from '@xyflow/react';


interface ContextMenuProps  {
    id: string;
    top: number;
    left: number;
    right: number;
    bottom: number;
    [key: string]:  string | number | undefined ;

}


const ContextMenu: FC<ContextMenuProps> =  ({
        id,
        top,
        left,
        right,
        bottom,
        ...props

}) =>

{
  const { getNode, setNodes, addNodes, setEdges } = useReactFlow();
  const duplicateNode = useCallback(() => {
    const node: Node | undefined  = getNode(id)!;
    if(node) {
    const position = {
      x: node.position.x + 50,
      y: node.position.y + 50,
   
 };
    addNodes({
      ...node,
      selected: false,
      dragging: false,
      id: `${node.id}-copy`,
      position,
    });
    }
  }, [id, getNode, addNodes]);

  const deleteNode = useCallback(() => {
    setNodes((nodes) => nodes.filter((node) => node.id !== id));
    setEdges((edges) => edges.filter((edge) => edge.source !== id));
  }, [id, setNodes, setEdges]);



  return (
    <div
      style={{ top, left, right, bottom }}
      className="context-menu"
      {...props}
    >
      <p style={{ margin: '0.5em' }}>
        <small>node: {id}</small>
      </p>
      <button onClick={duplicateNode}>duplicate</button>
      <button onClick={deleteNode}>delete</button>
    </div>
  );    
}
export default ContextMenu;
export type Menu = {
  id: string;
  top: number | boolean;
  left: number | boolean;
  right: number | boolean;
  bottom: number | boolean;


};

I know typescript has strict expectations around being explicit with return types so I tried to add the onclick to the index signature.

interface ContextMenuProps  {
    id: string;
    top: number;
    left: number;
    right: number;
    bottom: number;
    onClick: ()=> void;
    [key: string]:  string | number | undefined | (()=>void);

}

that then lead to another error type '() => void'.The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & ContextMenuProps'*

I feel I must have made a glaring mistake that I am missing.

Please how can i place a transparent element over a video on the page where it’s embedded. I want the transparent to act as a shield element to intercept the clicks. This prevents the clicks from having an effect on the video. The video is hosted on wistia.

I have zero knowledge on coding, and i am using free Elementor version. please i need help.
Here is the page i want to edit
https://www.bloghoursstudio.com/demo-class/

I found some codes:

.yourDiv {pointer-events: none;} but i dont know how to use it correctly

const transformCoord = function (_, z, x, y) {
  const zoomStr = "L" + (z - 2).toString().padStart(2, "0");
  const { lng, lat } = this.map.unproject({ x, y });
  const convertLnglat = proj4("EPSG:3857", "EPSG:3395", [lng, lat]);
  const convertedObj = this.map.project(convertLnglat);
  const xStr =
    "C" + Number(Math.round(convertedObj.x)).toString(16).padStart(8, "0");
  const yStr =
    "R" + Number(Math.round(convertedObj.y)).toString(16).padStart(8, "0");
  return `/${zoomStr}/${yStr}/${xStr}`;
};

I’m using maplibre-gl map engine. i can’t get the right tile when switch from EPSG:3857 to EPSG:3395. it looks the the only difference is the y value.

any help is appreciat