Blancer.com Tutorials and projects

I’m writing a CopyQ script to insert a timestamp into a document, while preserving the original clipboard contents.

1. Back up the current clipboard content using clipboard().
2. Format the current date and time using dateString().
3. Copy the formatted date/time to the clipboard using copy() and copySelection().
4. Paste the date/time using paste().
5. Restore the original clipboard content using copySelection() and clipboard().

Regarding sleep() in CopyQ:

CopyQ’s scripting environment seems doesn’t have a built-in sleep() function directly.

Following script sadly not restore the backup-Clipboard.

try a 50-millisecond delay:

var textBackup = clipboard()

var format = 'yyyy-MMdd-HHmm'
var dateTime = dateString(format)
copy(dateTime)
copySelection(dateTime)
paste()

// Simulate a 50ms delay
var startTime = new Date().getTime();
while (new Date().getTime() - startTime < 50) {
  // Do nothing (busy-wait)
}

copySelection(textBackup)
clipboard(textBackup) //Also try clipboard

The problem I’m encountering is that the clipboard is not restored.

My Questions:

I’m using

CopyQ 10.0.0
https://hluk.github.io/CopyQ/

I need help rendering 100+ 2D text labels in a Three.js modal in React Native. I’ve tried using Html, Text, and TextLabel components, but I’m facing issues. What would be the best approach to efficiently render these labels as 2D text in my Three.js scene? Any advice or alternative methods would be appreciated. Thanks currently i am rendering 3d Text but due to performance issue i have render a 2d text
I was expecting to render 100+ 2D labels (text) in a Three.js scene inside a React Native app, each label corresponding to a 3D model (mesh). These labels should be readable and follow the 3D models as I interact with them, without performance issues.

I’m working on a Next.js web app, and I’m trying to find a way to prompt the native iOS option to “Save to Photos” for an image when the user is in Safari.

Ideally, I’d like to replicate the behavior you get when long-pressing an image in Safari, where a menu appears with the “Save to Photos” option.

So far, I’ve tried:

• Using the Web Share API, which offers options like Messages and Mail,
  but not saving to Photos.

• Triggering a download via or blob URLs, but that only
  saves the image to the Files app—not Photos.

Is there any way (through JavaScript, specific attributes, or Safari-specific behavior) to trigger or replicate the native “Save to Photos” prompt directly in Safari on iOS?

Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘match’) TypeError: Cannot read properties of undefined (reading ‘match’) at initStripe (http://localhost:3000/static/js/bundle.js:41222:22) at http://localhost:3000/static/js/bundle.js:41264:12

I tried: analyzing the stack trace and understanding how .match() works.

I expected: that a variable you assumed was a string wasn’t actually defined at runtime.

I’m developing a real-time tracking application using ASP.NET Core with SignalR and the Google Maps JavaScript API. My app displays markers and a computed route on the map that connects two types of users. The marker color changes (for example, red for inactive, yellow for active, purple for cancelled) based on flags that are stored in my own database.

The expected behavior is that when a user refreshes the page, the map should be rebuilt exactly as it was before the refresh using only the persisted database state. In practice, after a refresh, although the marker positions are restored, the computed route disappears and, in one scenario, a marker that was previously showing as yellow reverts to red—even though the database still indicates an active state.

The controller is sending the current flag values (e.g., for an active trip) and stored locations via ViewBag.

I force the persisted flag values to lowercase before comparing them in my JavaScript.

My client-side logic correctly computes the route when the page loads in initial tests, but after a refresh the route no longer appears even though the stored values are intact.

I attempted to persist the displayed route and marker colors on my Google Maps dashboard by relying solely on state saved to my own database. In my ASP.NET Core controllers, I pass persisted values for the student’s active trip, cancelled trip, and the driver’s last location via the ViewBag. Then, in my Razor view’s JavaScript, I force these boolean flags to lowercase and compare them to “true” in order to decide which marker icon to display. For example, in my student dashboard, I initialize the flag like this:

var studentActiveTrip = ('@(ViewBag.StudentActiveTrip != null ? ViewBag.StudentActiveTrip.ToString().ToLower() : "false")' === 'true');
var studentCancelledTrip = ('@(ViewBag.StudentCancelledTrip != null ? ViewBag.StudentCancelledTrip.ToString().ToLower() : "false")' === 'true');

Later, when initializing the map, I check these flags to determine the correct marker color:

if (storedLat && storedLng) {
  let lat = parseFloat(storedLat);
  let lng = parseFloat(storedLng);
  let pos = { lat: lat, lng: lng };
  map.setCenter(pos);
  map.setZoom(posZoom);
  
  // Determine which icon to display based on the persisted state.
  let iconUrl = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
  if (studentActiveTrip) {
    iconUrl = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
    window.tripActive = true;
  } else if (studentCancelledTrip) {
    iconUrl = "http://maps.google.com/mapfiles/ms/icons/purple-dot.png";
    window.tripActive = false;
  }
  
  window.studentMarker = new google.maps.Marker({
    position: pos,
    map: map,
    icon: iconUrl
  });
}

Even though my controller is sending the correct state (for example, ActiveTrip is true), when I refresh the page the student’s marker reverts to red and the computed route disappears—despite the fact that the data in the database remains unchanged.

I expected that on a refresh the map would be rebuilt exactly as it was before, so that if ActiveTrip is true in the database the student’s marker would remain yellow and the route between the student and the driver (if the driver’s location is available) would be re-calculated and displayed.

I’m working on a simple typing effect component in React using Framer Motion. Here’s the code for my TypingText component

TypingText.jsx

import { motion } from 'framer-motion';
import React, { useEffect, useState } from 'react';

const TypingText = ({ text, speed = 100 }) => {
  const [displayedText, setDisplayedText] = useState('');

  useEffect(() => {
    if (!text) return;
    let i = 0;
    const interval = setInterval(() => {
      setDisplayedText((prev) => prev + text[i]);
      i++;

      if (i >= text.length) clearInterval(interval);
    }, speed);

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

  return (
    <motion.div className="font-mono text-2xl">{displayedText}</motion.div>
  );
};

export default TypingText;

Home.jsx
<TypingText text="Hi, I am Thulhid" />

Output: H, I am Thulhidundefined

The second character (“i”) is missing.

An undefined appears at the end.

and I changed the code inside the interval like this:

 const char = text[i];
  setDisplayedText((prev) => prev + char);

With this change, it works as expected. But now I’m confused:

Why does accessing text[i] directly inside the setDisplayedText callback cause this issue?

Why does extracting it into a separate variable (char) solve the problem?
I want to know why this happen?

Any explanation around JavaScript closures, async behavior, or how i is captured in state updates would be super helpful.

How to display hcaptcha without clicking or submitting? I am not asking about using libraries like Selenium, Pupe or Playwright. In some websites hcaptcha is hidden, unless a form is submitted, hcaptcha will be displayed. So how to display it without going through the interactions above?

I need to be able to store protected, DOM element, attributes at the UI. (For example, I want to store the DBKEY of the target database row along side the matching table row.)

As I can see no way of locking the DATA- attributes down to prevent user manipulation, I am in need of a viable alternative.

The freeze() method is only available at the Object/Element level, so the next thing that comes to mind is a minimal virtual DOM (or two-way binding) but virtualDOM are anathema to me, and surely there must be another way to do this.

So, I can keep and maintain a nodeList of DOM Elements and mutations on my current pagelet/DIV and add/modify as many protected attributes as I like. Resulting in sequential searches of the nodeList +/- making the index available to Javascript.

Or B, create a mirror, unattached DOM tree create/node, appendChild etc. But closest() is good but I know of no built-in down-tree search.

Anyway, I’ve got to be over thinking this? Is there a simple way to supply a read-only attribute to a DOM element?

I’m trying to create a script that automatically plays a video whenever it’s paused on a third party website. The issue I’m having is that the HTML elements in the page seem to be generated only as I inspect each line of code.

As an example:
document.querySelector('video')

returns “null” at first, but after using the inspect-element tool, and moving to the lines, I can get the very same JavaScript code to return the video player element, which is very perplexing honestly

The issue is the same for both Chrome and Firefox.

I tried various AI-suggested approaches to generate all the DOM via JavaScript but to be frank, I think the matter to be outside the scope of my expertise, I don’t feel competent to summarize all the things that I tried to the extent that I wouldn’t maybe mislead someone trying to help

I can confidently say that the DOM generation isn’t triggered by other means such as moving the mouse/scrolling/resizing

In javascript, I want to make a (shallow) copy of a Function, so that the properties of the new object will not be affected by the original object:

function func(...) { ... } // to say, function func(x, y) { return [x,y] }
func.a = 1
let func1 = func       // without copy, func1 and func IS the same object
let func2 = copy(func) // need to be implemented

func.a = 2
func1.a        // becomes 2
func2.a        // shall still be 1
func2("abc")   // shall return the same result as func("abc")

Is it possible?

---

The best way I’ve found at present is defining a wrapper function:

function f0(x, y) { return [x,y] }
f0.a = 1

function copy(fn){
  function wrapper(){
    return fn.apply(wrapper, arguments)
  }
  Object.assign(wrapper,fn)
  return wrapper
}

let f2 = copy(f0)

f0.a = 2
f2.a        // is still 1
f0.length   // gives 2
f2.length   // gives 0

However, there are some problems with this solution:

1. Chain appling of copy will lead to multiple levels of wrapper. for example, copy(copy(copy(fn))) will return a function with three wrappers.
2. the length of the origin function is lost, wrapper.length is alaways 0.

I’m in the process of creating my portfolio and I would like to know what data-target and data-toggle are mainly used for. I’ve used data-target in a previous project to add the data-target in the URL of specific sections, but wanted to know if there is another use for it.

I’m building a simple web app with a frontend form that sends data to a backend API (Node.js + Express, connected to MySQL). I’m using the fetch API to POST form data. The issue is: if the user accidentally double-clicks the submit button, it sends multiple requests, and duplicates are inserted into the database.

I’m looking for all possible solutions to enable F12 or “go to definition” in Visual Studio 2022 cshtml pages inside JavaScript tags. Is there any solution?

I’ve been working on a process of batch importing the data from multiple .csv files on my computer into Google Sheets without uploading all of them to Google Drive first.

I currently have the following:

index.html

<form>
  <input type="file" name="file" onchange="importCsv(this.parentNode)" accept=".csv,text/csv" multiple>
</form>
<p id="progress" style="display:none;">
  <label for="upload" style="font-family: sans-serif;">Uploadling...</label>
  <progress id="upload"></progress>
</p>
<script>
  function readFileAsBuffer(file){
    return new Promise(function(resolve,reject){
      let fr = new FileReader();

      fr.onload = function(){
          resolve(fr.result);
      };

      fr.onerror = function(){
          reject(fr);
      };

      fr.readAsArrayBuffer(file);
    });
  }
  async function importCsv(e) {
    document.getElementById("progress").style.display = "block";
    const files = e.file.files;
    let fileReaders = [];
    let fileValues = [];

    for(let i = 0;i < files.length;i++){ 
      fileReaders.push(readFileAsBuffer(files[i])); 
    }

    await Promise.all(fileReaders).then((values) => {
      fileValues.push(values);

    });

    for(let i=0; i < files.length; i++)
    {
      let file = files[i];
      await google.script.run.withSuccessHandler(google.script.host.close).importCsv([[...new Int8Array(fileValues[0][i])], file.type, file.name]);
    }    
  }
</script>

script.gs

function onOpen() {
  SpreadsheetApp.getUi().createMenu("Import").addItem("Import CSVs", "importCsv").addToUi();
}

function importCsv(e){
  if (!e) {
    SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("index"), "Import CSVs");
    return;
  }
  const lock = LockService.getScriptLock();
  lock.waitLock(30000);
  const csv = Utilities.parseCsv(Utilities.newBlob(...e).getDataAsString());
  const sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(sheet.getLastRow() + 3, 1, csv.length, csv[0].length).setValues(csv);
  lock.releaseLock();
}

I initially had it set up not using promises, but I was finding that all of the files I tried to import would get placed into the spreadsheet out of order. I thought that by using promises to wait until each file was read and processed before passing over to the spreadsheet would help with this, but I’m still running into the same issue. Other than using the LockService object like I’m doing, does anyone have any ideas on how to make the script wait until each section is finished getting added to the spreadsheet?

Thanks!

I’m developing a Chrome browser extension. In Vuetify (as well as in PrimeVue, MUI, and almost any other UI library), component font sizes are defined in rem. When integrating the library into a shadow DOM element, the rem value set within the shadow DOM’s HTML is ignored in favor of the rem from the root HTML element. This results in varying font sizes across different websites, depending on the font-size of the root HTML element. What is the best way to address this issue? Should I attempt to override the styles in the UI library, or is there another method to force the UI library to use the rem defined in the shadow DOM instead of that from the root HTML element?