Blancer.com Tutorials and projects

In this example I am swapping first and last characters of a given string .
Which approach is more faster ? provided that the string length is 3 characters long .

function concatenation(string){

    let newString = string[2]+string[1]+string[0];
    console.log(newString);
}

function swap(string) {

    let array = string.split('');
    let last = array[2];
    let temp = array[0];
    array[0]=last;
    array[2] =temp;
    console.log(array.join(''));
}


swap("ABC");
concatenation("ABC");

I have this function in Excel Script Lab:

Libraries

https://appsforoffice.microsoft.com/lib/1/hosted/office.js
@types/office-js

[email protected]/dist/css/fabric.min.css
[email protected]/dist/css/fabric.components.min.css

[email protected]/client/core.min.js
@types/core-js

[email protected]
@types/[email protected]

Script:

/**
 * Create a list.
 * @customfunction
 * @param name string
 * @param args {string[]}
 */
function datatablex(display: string, ...args: string[]): any {
  const entity = {
    type: "Entity",
    text: display,
    properties: {
      Nombre: {
        type: "String",
        basicValue: display,
        propertyMetadata: {
          excludeFrom: {
            cardView: true
          }
        }
      }
    }
  };

  for (let i = 0; i < args[0].length; i += 2) {
    const name = args[0][i + 0];
    const value = args[0][i + 1];

    entity.properties[name] = {
      type: "String",
      basicValue: value
    };
  }
  return entity;
}

This function allows me to create a DataType: Entity with the parameters given in the function as arguments. Currently, this function takes a string which will be the displayed text in the cell, and then any number of arguments. These extra arguments always come in couples. The first is the name of the value and the second is the value itself. This repeats many times if you add many more parameters. Below is an image showing an example:

Current Example

My problem is that the extra arguments are currently strings and instead I want them to be tables (two dimensions each). I tried making changes in the function:

• Replace the string[] with string[][] and even string[][][]
• Replace the property “String” type to “Array” and basicValue to elements.
• Replace the args[0][i + 0] stuff with more [].
  However, I couldn’t make it work. Sometimes it gives #Value! and others “Calc! depending on what I change. Below is an image explaining the imputs I want:

Example imputs

Below is an example of the output I want (I created it manually, not using the function cause obviously it doesn’t work)

Example output

Example when clicking one of the tables.

Example ouput inside

Can’t refresh marker only. Without refreshing whole google map. Location is sent every 10 seconds from esp32 to apache server. I just can’t refresh markers only. The only way to refresh marker position is to refresh whole map0 which is not my goal. I’d like to refresh only markers without reloading whole map or website.

Please HELP. =)

<?php foreach($rows as $row){ ?>


    var location = new google.maps.LatLng(<?php echo $row['lat']; ?>, <?php echo $row['lng']; ?>);
    function refreshMarker(){

// if marker exists and has a .setMap method, hide it
  function SetMarker(location, map) {
    //Remove previous Marker.
    if (marker == null) {
        marker.setMap(null);
    }
}
    //marker.setMap(map);
    var marker = new google.maps.Marker({
        position: location,
        icon: betw,
        title:"<?php echo $row['lat']; ?>, <?php echo $row['lng']; ?> , <?php echo $row['time']; ?> , <?php echo $row['altitude']; ?> m, <?php echo $row['speed']; ?> km/h, <?php echo $row['temperature']; ?> °C",
        map: map
    });
    
 setTimeout(refreshMarker, 1000);}
 refreshMarker();

            
<?php } ?>  

I’m a beginner in open source contributions and looking for beginner-friendly repositories where I can make meaningful contributions.
So far, I’ve contributed to freeCodeCamp and The Odin Project. Now, I’m hoping to work on projects where I can contribute more actively and improve my skills through real collaboration.

Languages I’m comfortable with:

• JavaScript

• TypeScript

If you know any good repositories (with good documentation, beginner-friendly issues, or active maintainers), I’d love your suggestions.

type here

I am creating a algo trading platform which uses tradingView lightweight chart. I have now run into a issue wherein all the time shown on x axis is correctly being displayed in IST and the tooltip correctly shows date as per IST but shows the time in UTC.

chart.subscribeCrosshairMove(param => {
  const div = document.getElementById('crosshairTimeDisplay');
  if (!param.time) {
    div.textContent = '';
    return;
  }

  const utcDate = new Date(param.time * 1000);
  const istTime = new Date(utcDate.getTime() + (5.5 * 3600 * 1000));
  const day = String(istTime.getDate()).padStart(2, '0');
  const month = istTime.toLocaleString('en-IN', { month: 'short' });
  const year = istTime.getFullYear();
  const hours = String(istTime.getHours()).padStart(2, '0');
  const minutes = String(istTime.getMinutes()).padStart(2, '0');
  const seconds = String(istTime.getSeconds()).padStart(2, '0');

  div.textContent = `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;
});

and

chart.subscribeCrosshairMove(param => {
  const div = document.getElementById('crosshairTimeDisplay');
  if (!param.time) {
    div.textContent = '';
    return;
  }

  const date = new Date(param.time * 1000);
  const options = {
    timeZone: 'Asia/Kolkata',
    year: 'numeric', month: 'short', day: '2-digit',
    hour: '2-digit', minute: '2-digit', second: '2-digit',
    hour12: false
  };
  const istString = date.toLocaleString('en-IN', options);

  div.textContent = istString;
});

and

chart.subscribeCrosshairMove(param => {
  const div = document.getElementById('crosshairTimeDisplay');
  if (!param.time) {
    div.textContent = '';
    return;
  }

  const date = new Date(param.time * 1000);
  const formatter = new Intl.DateTimeFormat('en-IN', {
    timeZone: 'Asia/Kolkata',
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });

  div.textContent = formatter.format(date);
});

This is a followup question to this one, which resolves a missing definition of TimeoutError in my puppeteer code. Thing is, I want to use puppeteer-extra, and despite being a lightweight wrapper for puppeteer it seems to be causing a difficulty in getting hold of TimeoutError. Here’s an SSCCE that should demonstrate the problem; I get TypeError: Right-hand side of 'instanceof' is not an object. My package.json states version 23.7.1 (I have no idea what version of puppeteer-extra I’m running as I don’t know where to look).

const puppeteer = require("puppeteer-extra");

let browser;
(async () => {
  const stealthPlugin = require('puppeteer-extra-plugin-stealth');
  puppeteer.use(stealthPlugin());

  browser = await puppeteer.launch();
  const [page] = await browser.pages();

  try {
    await page.goto("https://www.example.com", {timeout: 1}); // short timeout to force a throw
  }
  catch (err) {
    if (err instanceof puppeteer.TimeoutError) {
      console.log("caught timeout error", err);
    }
    else {
      console.log("caught non-timeout error", err);
    }
  }
})()
  .catch(err => console.log(err))
  .finally(() => browser?.close());
  

(I’m using console.log() instead of console.error() because my client code can’t get hold of anything in the error stream)

Grateful thanks for any help resolving this!

I’m trying to use setInterval inside a useEffect hook in a React functional component to perform a repeated task (like updating a counter or fetching data periodically). However, the callback inside setInterval seems to use stale state — it’s not accessing the most recent value of my state variable.

Even though the state updates correctly, the interval callback always logs the initial state instead of the updated one. This leads to unexpected behavior in my app.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log('Current count:', count); // This always logs 0
      setCount(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>{count}</div>;
}

In this, console.log(count) always logs 0, even though the UI shows the count increasing.

What I tried

• Moving setInterval outside the useEffect (not possible because I need lifecycle management).

• Including count in the dependency array — but that causes multiple intervals to be created.

• Using useRef to store the latest state — seems promising, but not sure how to implement it correctly.

What I want to know

• Why does this stale closure issue happen in useEffect?

• What’s the correct and efficient way to ensure that the interval callback always has access to the latest state?

• Is useRef the right approach? Are there other React best practices to handle this?

Help me make the same section as shown in the pictures.
I need to make it so that when I press the arrow, the indicated section moves out, and when I press it again, it collapses back. I piined example here. Is there any js libraries for this or easy (maybe even css only) solutions?

Hang on, you can’t upvote just yet. You’ll need to complete a few actions and gain 15 reputation points before being able to upvote

I have the following TypeScript function. It’s successfully hiding the test1 field on form load, as I’m calling the function on load and passing the execution context in a Dynamics CRM form.

However, I’m trying to achieve the following behaviour: when the testisCompleted field is changed to “Yes”, I want to show the header_process_test1date field. The issue I’m facing is that when the onChange event fires, I get an error saying: formContext.getAttribute is not a function

Could anyone help me understand why this is happening and how to fix it? Thanks in advance!

export function onContractPrepStage(executionContext: Xrm.Events.EventContext) {
    const formContext = executionContext.getFormContext();

    const testisCompleted = formContext.getAttribute("test1")?.getValue();
    const ctrl = formContext.getControl<Xrm.Controls.OptionSetControl>("header_process_test1date");

    if (testisCompleted) {
        ctrl?.setVisible(true);
    } else {
        ctrl?.setVisible(false);
    }
}

I am trying to integrate Auth0 authentication in a Next.js project using the official @auth0/nextjs-auth0 package (v4.7.0).
I carefully followed both the official documentation and several community guides.
I tried both of these setups:

1. Using the App Router, created src/app/api/auth/[…auth0]/route.ts.

• Used the documented import:
  import { handleAuth } from '@auth0/nextjs-auth0'; export const GET = handleAuth(); export const POST = handleAuth();

1. Result: Always get TypeError: handleAuth is not a function or Module ‘”@auth0/nextjs-auth0″‘ has no exported member ‘handleAuth’.

2. Using the Pages Router; vreated /pages/api/auth/[…auth0].ts (and tried .js as well)

Tried both
import { handleAuth } and const { handleAuth } = require(...)

1. Result:

If using import, Next.js throws “Module parse failed: ‘import’ and ‘export’ may appear only with ‘sourceType: module’”.

If using require, I get Module not found: ESM packages (@auth0/nextjs-auth0) need to be imported.

I also tried multiple package versions (e.g., 2.x, 4.7.0, 4.0.0), cleaning node_modules, deleting lock files, and using both JS and TS files, but always end up with either a 404, 500, or the above TypeErrors.

To be able to use Auth0’s handleAuth in either App Router or Pages Router as shown in the docs, and get a working authentication endpoint .

I’m using Parcel in a React project, and I’m running into frequent and inconsistent build issues.

The project works fine one moment, but after making a small change (like importing a hook or updating a file), Parcel suddenly throws errors such as:

Cannot find module ‘react’ – even though react is installed and present in node_modules

.env variables like process.env.BEARER_TOKEN return undefined, even though the exact same code was working before

Some examples:
I added useEffect from “react” and Parcel failed to recognize the react module, breaking the build

I used process.env.BEARER_TOKEN in my API call – initially it worked, then suddenly it broke and returned undefined; when I hardcoded the token, it worked again. But later, without any changes, process.env.BEARER_TOKEN started working fine again

Occasionally, Parcel fails to rebuild unless I:

Delete .parcel-cache

Delete and reinstall node_modules

My setup:
Parcel version: ^2.15.2

React version: 19.1.0

OS: Microsoft Windows [Version 10.0.26100.4351]

My .env file (at project root):

BEARER_TOKEN=yuJhbG… (no quotes or spaces) [this is just example token]

My API options in code:

export const API_OPTIONS = {
method: ‘GET’,
headers: {
accept: ‘application/json’,
Authorization: Bearer ${process.env.BEARER_TOKEN?.trim()},
},
};

What I’ve tried:
Restarting Parcel dev server (npx parcel index.html)

Deleting .parcel-cache

Reinstalling node_modules

Restarting my IDE (VS Code)

Confirmed .env is correctly formatted and at the root

Ensuring I’m not using stale cached tokens or module imports

My question:
Why is Parcel behaving so inconsistently with module resolution and .env variables?

Is this expected behavior? Is there a known issue with Parcel’s caching or environment variable injection?

How can I make my development environment more stable and predictable?

Any insights or best practices for working with Parcel in React projects would be appreciated!