Google Keep checkbox list behavior to html/css/javascript

I want to create a simple web page that works the same as the Google Keep checkbox list function.

To start:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div>Task 1</div>
<div>Task 2</div>
<div>Task 3</div>
<div>Task 4</div>
<div>Task 5</div>

</body>
</html> 

So, when clicking on Task 1, it should send the div to the bottom. Then, we clicking on Task 2 it should send that div to the bottom under Task 1.

Output:

Task 3
Task 4
Task 5

Checked items:

Task 1
Task 2

Can someone help me with the javascript? How to send a div to the bottom when you click on it.

“text has not been initialized” javascirpt error

i have this function defined in my javascirpt code:
function log(text) { printNative(text); }
and when i pass some string argument to it like: log("test") i get error text has not been initialized.
i dont know how do i fix it, maybe someone can fix it

i tried doing:
function log(text="Error") { printNative(text); }
still same error,

i tried doing:
function log(text) { printNative("test"); }
no error,

i tried doing:
function log(text) { if(text == null || text == undefined){printNative("Error")} printNative(text); }
still same error at if, exactly where first usage of text varible is.

printNative works perfectly, but there is some problem with passing arguments

How can you specify the location of captured media when using

With a popular browser (Chromium-based browsers, Firefox, Safari) on mobile platforms (Android, iOS), a web page can capture a video using the device’s camera with the following markup:

<input type="file" accept="video/*" capture="environment"/>

This produces a File object that can be used in javascript as needed. The video file is placed in a platform specific location that is essentially accessible to all apps running on the device instead of being private to the web page origin. Also, if the user refreshes the page, the File object is no longer accessible in javascript without the user re-picking the file with some manual file selection action.

Is there a way to specify where <input> writes the captured video file? Ideally for my use case I’d like to specify the directory returned by navigator.storage.getDirectory(), that way my app can call dir.getFileHandle() to re-open the file as needed.

I have thought of a couple of workarounds but they are sub-optimal, so I’m looking to see if there is a better solution or if I’ve just missed something about <input>. Those workarounds are:

  1. After getting the File object from the <input> copy its contents to a new file under navigator.storage.getDirectory(). However, this doubles the storage usage on the device, clutters the user’s platform specific video folder with these videos, and requires Safari-specific special code for copying.

  2. Use navigator.mediaDevices.getUserMedia(), MediaRecorder, and the File System API to write the captured video file under navigator.storage.getDirectory(). However, this requires a lot more overall code as well as extra Safari-specific special code.

Any suggestions appreciated. Thanks.

Control the display of a div with multiple checkboxes

I have a hidden div with some checkboxes below it. The first checkbox checks and unchecks all the others and makes the div visible. When all other checkboxes are checked the first one should be checked. It should also be unchecked when at least one other checkbox is unchecked and the div remains visible. When at least one checkbox is checked the div is visible.

I am struggling to implement this. Here is my code so far:

const checkBoxes = document.querySelectorAll(".check-boxes");
const checkAll = document.querySelector("#checkAll");
const myDiv = document.querySelector("#myDiv");

for (let i = 0; i < checkBoxes.length; i++) {
  checkAll.addEventListener("change", () => {
    checkBoxes[i].checked = checkAll.checked;
    if (checkAll.checked) {
      myDiv.classList.remove("hide");
    } else {
      myDiv.classList.add("hide");
    }
  });
  checkBoxes[i].addEventListener("change", () => {
    if (checkBoxes[i].checked) {
      myDiv.classList.remove("hide");
    } else {
      myDiv.classList.add("hide");
      checkAll.checked = false;
    }
  });
}
body {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #3fe1ff, #0047bf, #1b0055);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mydiv {
  width: 100%;
  height: 100px;
  background-color: #3fe1ff;
  margin-bottom: 2em;
}

.main-checkbox {
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid white;
}

.hide {
  visibility: hidden;
}
<div class="mydiv hide" id="myDiv"></div>
<div class="main-checkbox">
  <input type="checkbox" name="" id="checkAll" />
</div>
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />
<input class="check-boxes" type="checkbox" name="" id="" />

the requested action requires that the target document is the frontmost document

i had created a script in which first it opens a psd file and then open a image file and then place it in the psd file at certain direction and place but when i run script it shows this error the requested action requires that the target document is the frontmost document so please give me solution for this error what to edit or what to change in this code

heres the script

#target photoshop

// === MAIN FUNCTION ===
function main() {
    // === Step 1: Select the PSD ===
    var docFile = File.openDialog("Select your PSD file", "*.psd");
    if (!docFile) {
        alert("No PSD file selected. Script cancelled.");
        return;
    }

    // Open PSD and save reference
    var psd = app.open(docFile);
    
    // === Step 2: Select the PNG ===
    var imgFile = File.openDialog("Select ONE PNG image", "*.png");
    if (!imgFile) {
        alert("No PNG image selected. Script cancelled.");
        psd.close(SaveOptions.DONOTSAVECHANGES);
        return;
    }

    // === Step 3: Process image ===
    try {
        // Save current preferences
        var startRulerUnits = app.preferences.rulerUnits;
        app.preferences.rulerUnits = Units.PIXELS;

        // Open image and unlock layer
        var imgDoc = app.open(imgFile);
        var layer = imgDoc.artLayers[0];
        if (layer.isBackgroundLayer) {
            layer.isBackgroundLayer = false;
            layer.name = "Layer 0";
        }

        // === CRITICAL FIX: Duplicate and position BEFORE alert ===
        var newLayer = layer.duplicate(psd, ElementPlacement.PLACEATBEGINNING);
        
        // Calculate position (100px, 100px)
        var xPos = 100;
        var yPos = 100;
        var xOffset = xPos - newLayer.bounds[0].value;
        var yOffset = yPos - newLayer.bounds[1].value;
        newLayer.translate(xOffset, yOffset);

        // Force UI update
        app.activeDocument = psd;
        psd.activeLayer = newLayer;
        app.refresh();

        // Close source image
        imgDoc.close(SaveOptions.DONOTSAVECHANGES);

        // Restore preferences
        app.preferences.rulerUnits = startRulerUnits;

        // === Modified alert: Shows position and layer info ===
        var result = confirm(
            "✅ Image placed at (" + xPos + "px, " + yPos + "px)n" +
            "Layer: " + newLayer.name + "nn" +
            "Click OK to continue or Cancel to undo",
            false,
            "Placement Successful"
        );
        
        if (!result) {
            // Undo if user cancels
            executeAction(charIDToTypeID("Undo"), undefined, DialogModes.NO);
        }

    } catch(e) {
        alert(" Error: " + e.message);
    }
}

// Execute
main();

How to solve truncated text is highlight with background color

enter image description here

This is the issue. The truncated text is replaced with ellipsis, but the highlight background is still applied.

This is due to that highlight is with the original text, not the truncated text. But I cannot use the way to truncate text with a specific max length first, The text input can be multi languages.

Is there a way to fix the issue?

Test code in stackblitz is here
https://bolt.new/~/stackblitz-starters-rlbxchnf

<div class="message-second-line">
   <span
    class="message-text"
    [innerHTML]="(getMessageSender(message) + (getMessageContent(message))) | highlight: trimmedSearchText">
   </span>

If I applied the ellipsis way in message-second-line, then there is no ellipsis,
enter image description here

This is also not I wanted.

Is there any way to handle it to get the result like
Alice: Hello, how are you. I … ( no highlight when the highlight text is invisible)

Why reading from a storage texture 2d array always returns the same value in webGPU?

What i’m trying to do is write to a storage texture in one render pass, and then read from this texture in a second pass, but value i get in the second pass is always the same, regardless of what i write in the first pass.

This is what setup code looks like:

const storageTexture = this._device.createTexture({
    dimension: '2d',
    size: [512, 512, 1],
    format: 'r32float',
    usage: GPUTextureUsage.STORAGE_BINDING
})

const textureView = storageTexture.createView({
    dimension: '2d-array',
    format: 'r32float',
})

const bindGroup = this.device.createBindGroup({
      layout: this.lightsBindGroupLayout,
      entries: [
                .....irrelevant stuff
                {
                    binding: 3,
                    resource: textureView,
                },
            ],
        })

const firstPass = commandEncoder.beginRenderPass(this._renderPassDescriptor)
......
firstPass.setBindGroup(2, bindGroup)
......
firstPass.end()

const secondPass = commandEncoder.beginRenderPass(this._renderPassDescriptor)
.....
secondPass.setBindGroup(3, bindGroup)
.....
secondPass.end()

Fragment shader code for first pass:

@fragment
fn fragment_main(in: VertexOutput) -> @location(0) float4 {

    textureStore(texture, vec2u(0, 0), 0, vec4f(1, 1, 1, 1));

    return in.position;
} 

Fragment shader code for second pass:

@fragment
fn fragment_main(in: VertexOutput) -> @location(0) float4 {

    let a = textureLoad(texture, vec2u(0, 0), 0);

    return vec4(a.r, 0, 0, 0);
} 

What i expected to get in the second pass is a.r == 1, therefore all fragments of the resulting image should be red, but what i actually get is a.r == 0, and all fragments are black.

I read about default value for r32float that is returned in case there is a reading error, and it’s also mentioned that if there’s a writing error, the textureStore function is not called. Right now, i can`t even understand which of this cases i have, but i can’t see how could there be read/write error with a predefined location.

Any help in diagnosing what is wrong would be much appreciated.

Fabric.js does not produce red square

I am developing a web based application using Dancer2. I want to use Fabric.js to make an interactive drawing. However, I am unable to execute even the simplest drawing.

I can make a drawing as a stand-alone page with

<!DOCTYPE html>
<html>
<head> 
        <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> 
</head>

<body>
        <canvas id="canvas" width="500" height="300" style="border:1px solid #000000"> </canvas>
        <script> 
                var canvas = new fabric.Canvas("canvas");
                var rect = new fabric.Rect({
                  left: 100,
                  top: 100,
                  fill: 'red',
                  width: 20,
                  height: 20
                });
                canvas.add(rect);
        </script>
</body>
</html>

However, if I want to place it in the Dancer2 application, using the template

<!-- START: network_drawing.tt-->
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script src="/javascripts/networkDrawing.js"></script>
<!-- END: network_drawing.tt-->

and the javascript

document.addEventListener("DOMContentLoaded", function () {
    console.log("Fabric.js initialized:", window.fabric);
    console.log("Canvas element:", document.getElementById("canvas"));
    if (!window.fabric) {
        console.error("Fabric.js not found!");
        return;
    }
    const canvasElement = document.getElementById("canvas");
    if (!canvasElement) {
        console.error("Canvas element not found!");
        return;
    }
    const canvas = new fabric.Canvas("canvas", {
        width: 1000,
        height: 1000
    });
    const redSquare = new fabric.Rect({
        left: 475,
        top: 475,
        fill: "red",
        width: 50,
        height: 50
    });

    canvas.add(redSquare);
    canvas.renderAll();
});

I get no red square.

The Javascript console of Chrome tells me:

Fabric.js initialized: networkDrawing.js:2
Canvas element:        networkDrawing.js:3
canvas#canvas

which should mean that the javascript is executed, that Fabric.js is loaded and that the canvas element is available.

What am I missing?

ReferenceError: LiveKitClient is not defined when loading JS SDK (UMD) on Parrot OS

I’m trying to integrate LiveKit (using LiveKit Cloud) into my web application (Python/Flask/SocketIO backend, plain JavaScript frontend), and I’m stuck on a persistent client-side error I can’t seem to resolve.

The Issue:
When my JavaScript code tries to create a room instance with new LiveKitClient.Room(...), I consistently get the following error:
ReferenceError: LiveKitClient is not defined
(Or in Firefox: ReferenceError: Can't find variable: LiveKitClient)


Environment:

  • Operating System: Parrot OS Security [Add version if known, e.g., 6.1] (Debian-based Linux)
  • Browsers Tested: [ Firefox, Google Chrome, Edge, DockDockGo] (Latest versions)
  • LiveKit Client SDK: Tested both the latest version ( 2.11.4) and an older one ( 1.5.0) using the UMD build (livekit-client.umd.min.js)
  • Loading Method: Using a <script src="..."></script> tag in the HTML, placed before my main script (chat_logic.js)
  • Backend: Flask with Python 3.11 and the livekit-api library , installed via pip. Token generation via /livekit/token is working correctly (the client receives the token before the JavaScript error occurs)

Diagnostics Performed:

  • Script Download: Verified in the browser “Network” tab. The livekit-client.umd.min.js file downloads successfully (200 OK), both from the CDN (jsDelivr, unpkg) and when served locally via Flask (static/js/)
  • Global Variable Check: After full page load, typing LiveKitClient in the browser console results in ReferenceError: LiveKitClient is not defined
  • Minimal Isolated Test: Created a minimal HTML file that only loads the UMD script from the CDN and then tries to access LiveKitClient via console.log. This minimal test also fails with the same ReferenceError, indicating the issue is not with my chat_logic.js code or app-specific conflicts
  • Browser Isolation: The error persists across different browsers (Firefox, Chrome) on this OS
  • Incognito / Extensions: The error persists in Private/Incognito mode and with all browser extensions temporarily disabled
  • Other Console Errors: The only other message occasionally seen is a third-party cookie warning (Cookie "" has been rejected as third-party.) from the LiveKit script, but no other JavaScript errors appear during page load that might indicate a script execution failure

Conclusion:
It seems that the LiveKit Client UMD script, while downloaded correctly, is either silently failing to execute or is unable to define the global LiveKitClient object in this specific environment (Parrot OS / tested browsers).

Question:
Is this a known compatibility issue with Debian-based Linux distributions (like Parrot OS) or with specific browser privacy/security configurations on Linux? Are there particular browser or OS settings that should be checked? Is there any other debugging step you would recommend to diagnose why the script might be silently failing after a successful download?

Any help or hint would be greatly appreciated!
Thank you.


How to run an external js code in angular

Following this link I was able to load external js files as following:

import { Component, OnInit, Renderer2 } from "@angular/core";
import { ScriptService } from "@app/element-types/_services/script.service";

const scriptPath = 'https://apis.google.com/js/api.js';
declare let gapi: any;

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    standalone: true
})
export class AppComponent implements OnInit {
    constructor(
        private renderer: Renderer2,
        private scriptService: ScriptService
    ) {}

    ngOnInit() {
        const scriptElement = this.scriptService.loadJsScript(this.renderer, scriptPath);
        scriptElement.onload = () => {
            console.log('Google API Script loaded');
            gapi.load('client', 'init');
        }        
    }
}

And ScriptService.ts

import {Inject, Injectable, Renderer2} from "@angular/core";
import { DOCUMENT } from "@angular/common";

@Injectable({
    providedIn: 'root'
})

export class ScriptService {
    constructor( @Inject(DOCUMENT) private document: Document) {}

    public loadJsScript(renderer: Renderer2, src: string): HTMLScriptElement {
        const script = renderer.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        renderer.appendChild(this.document.body, script);
        return script;
    }
}

So far so good, but I would like to change the code and instead of giving a url, I provide a script code and run it directly as follows:

const scriptPath = 'https://apis.google.com/js/api.js'; 
---> change to
const scriptPath = "alert('Hello world');";

The error that I get now is:

Uncaught SyntaxError: expected expression, got '<'

So I want to know if it is possible, to do so.

P.s. I don’t want to define a js file in assets and then import it in the angular component and then call it.

Sentence similarity with Node.js

I am looking for sample code (or docs) for calculating semantic similarity of short sentences using Huggingface and Node.js. All the examples I have found so far use Python. I tried to extrapolate from Huggingface’s inference example but it seems there is no “sentence-similarity” pipeline

Error: Unsupported pipeline: sentence-transformers. Must be one of [text-classification,token-classification,question-answering,fill-mask,summarization,translation,text2text-generation,text-generation,zero-shot-classification,audio-classification,zero-shot-audio-classification,automatic-speech-recognition,text-to-audio,image-to-text,image-classification,image-segmentation,background-removal,zero-shot-image-classification,object-detection,zero-shot-object-detection,document-question-answering,image-to-image,depth-estimation,feature-extraction,image-feature-extraction]

React Flow edge not updating position after collapsing node section with nested handles

I’m using React Flow with a custom collapsible tree structure inside a node. Each leaf node has a <Handle />. The edge that was connected to that handle stays in its previous screen position, and no longer tracks the handle.

    
              {!node.children && (
                <>
                  <Handle
                    type="source"
                    position={Position.Right}
                    id={node.id}
                    style={{
                      background: 'blue',
                      left: '88%',
                      top: '50%',
                      transform: 'translateY(-50%)',
                      position: 'absolute',
                    }}
                  />
                </>
              )}

I expected React Flow to automatically update edge positions when DOM layout of nodes changes.

I tried toggling the collapse using useState, but it doesn’t trigger any edge updates.

I also tried using useUpdateNodeInternals() from React Flow to force an update, but it didn’t seem to apply

How to append to a TextFrame’s story without losing previously applied Paragraph Styles?

I want to write an ExtendScript program for InDesign which creates a TextFrame, and then fills the frame with paragraphs, styling the paragraphs as it goes. I.e., add a paragraph, apply a style to that paragraph, then add another paragraph and apply a different style, etc.

Unfortunately whenever I add a new paragraph to the TextFrame’s parentStory object, InDesign applies the last Paragraph Style I used to all of the existing paragraphs.

Here’s an example of this:

// Make a document with a single frame

var doc = app.documents.add();
var frame = doc.pages[0].textFrames.add();
frame.geometricBounds = [0, 0, 20, 30];

// Make two paragraph styles

var paraStyle1 = doc.paragraphStyles.add({name: "ParagraphStyle1"});
paraStyle1.pointSize = 20;
var paraStyle2 = doc.paragraphStyles.add({name: "ParagraphStyle2"});
paraStyle2.pointSize = 8;

// Add two lines to the frame

var story = frame.parentStory;
story.contents += "Line 1rLine 2";
var para1 = frame.paragraphs[0]; 
var para2 = frame.paragraphs[1]; 

// Style the two paragraphs

para1.appliedParagraphStyle = paraStyle1;
para2.appliedParagraphStyle = paraStyle2;

// At this point, the frame contains two paragraphs, each with its own style.
// Now add a new paragraph to the story.
// This has the effect of applying paraStyle1 to paragraphs 0 and 1 !

story.contents += "rLine 3";

What am I doing wrong here?

input reading instant with Tauri 2.0 not working

Info

I want to press the the add color button and then the color should be added instantly to the color_list

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Tauri App</title>
    <script defer src="main.js" type="module"></script>
  </head>
  <body>
    <h1>add color</h1>
    <input id="new_color" type="text" placeholder="your color" />
    <button id="add_color_btn" type="button">add color</button>
    <ul id="color_list"></ul>
  </body>
</html>

JS

const { invoke } = window.__TAURI__.core;

const currentSettings = {
  saved_colors: []
};

window.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("new_color");
  const btn = document.getElementById("add_color_btn");

  btn.addEventListener("click", async () => {
    const color = input.value.trim();

    console.log("Input read:", color);

    if (color === "") return;

    currentSettings.saved_colors.push(color);
    input.value = "";

    updateColorUI(currentSettings.saved_colors);

    try {
      // await invoke("save_settings", { settings: currentSettings });
      console.log("saved");
    } catch (err) {
      console.error("error while saving:", err);
    }
  });
});

function updateColorUI(colors) {
  const list = document.getElementById("color_list");
  list.innerHTML = "";

  colors.forEach((color) => {
    const li = document.createElement("li");
    li.textContent = color;
    list.appendChild(li);
  });
}

The save for tauri is commented because it doenst update in the frontend even without the rust backend

I tryed the with a normal HTML Website and this works instant, NO WAITING, NO BUTTEN LOCKED etc

I think the problem that Tauri does not reload instantly because it take some time after a new Input until i can press the button. I tested it with comments. After i type something new in the input field, the button is not working for 1 / 3 secondes and when press the button after these 3 seconds, the color will get added to the color list

when i press the in those 2 seconds nothing will happen, no output to the console.

I dont know how fix this, can somebody help please?