export default {
    root: ({ props }) => ({
        class: [
            '!bg-[#ffffff] !text-gray-600',
            '!shadow-sm',
        ],
    }),
    panel: ({ props, state }) => ({
        class: [
            '!bg-[#ffffff] !text-gray-600',
        ],
    }),
    content: ({ props }) => ({
        class: [
            '!bg-[#ffffff] !text-gray-600',
        ],
    }),
}

I’m setting up my frontend with:

PrimeVue
VUE / Vite
Tailwind

When using a from primevue and set root styles is styled correctly. However, now I’m using the accordion component, but it remains unstyled

My Google Sheet uses an App Script with an installed trigger to extend some functionalities.

• As an owner I can deploy my App Script and run it under my account for other users, so they don’t have to install the trigger themselves.
• However, I expect users to make a copy (…of a copy) of the spreadsheet, which makes them the new owner of a new spreadsheet. This renders parts of the script out-of-bounds, requiring users to install the trigger themselves.

To make it easy for the new owner of the new spreadsheet to install a trigger, a custom menu item has been added.

I would like to inform the user about the necessity to click the custom menu item:

1. IF the script is NOT authorized THEN a warning message should be displayed onOpen
2. IF the script is authorized THEN a success message should be displayed.
3. IF the script’s permission have been revoked (e.g. due to another copy) THEN a warning message should be displayed again, see 1.

Preferably this message should be non-intrusive, e.g. inside a specific cell.

Things I have tried:

• Using a simple alert without buttons seems a bit intrusive to me.
• setValue seems to require an authorized script, correct?
• Is there a way to modify a cell, e.g. using a container-bound custom function without the need for script authorization?

How would I want to inform users, if the script is not authorized?

I’m facing a very strange and frustrating issue with my React application. I recently did a git clone of my own project from GitHub, which was working perfectly fine a few days ago. I performed npm install to install all the dependencies, and then ran npm start to run the application.

However, the application is completely unresponsive. I can’t interact with anything on the page – no buttons, no hovers, no cursor pointers, nothing. It’s as if the page is a static image. I’ve checked the browser console and terminal, and there are no errors.
I shared screen recordings of my computer with you.
https://drive.google.com/drive/folders/1eSpWdUKg8HgGlryqFrixRG01EXi8fAUP?usp=drive_link

repo: https://github.com/bycmlla/Portfolio-LastVersion.git

I’ve tried the following troubleshooting steps:

• Cleared browser cache (Opera).
• Removed node_modules and package-lock.json, and reinstalled dependencies.
• Verified that React and ReactDOM are correctly installed in
  node_modules.
• Checked for conflicting CSS or overlapping elements using browser dev
  tools.
• Disabled browser extensions.
• Added console.log statements to click event handlers, but they are
  not firing.
• Inspected the DOM, but found nothing out of the ordinary.
• Checked that there is no pointer-events: none; on any parent
  elements.
• Checked for correct conditional rendering.
• Checked for correct importations.
• Checked the correct version of node.js.
• Checked that all dependecies are correct on package.json.

Node: v22.14.0

npm: 10.9.2

─ [email protected]

If you need any code, let me know.

My package.json:

{
 "name": "camilacarvalho",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
    "@emotion/react": "^11.11.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.3",
"bootstrap": "^5.3.3",
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"framer-motion": "^11.18.2",
"gsap": "^3.12.5",
"mailgen": "^2.0.28",
"motion": "^12.4.4",
"react": "^18.2.0",
"react-awesome-reveal": "^4.2.10",
"react-bootstrap": "^2.10.2",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"scrollreveal": "^4.0.9",
"web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
     ]
   },
   "browserslist": {
     "production": [
       ">0.2%",
       "not dead",
       "not op_mini all"
     ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.17.0",
     "sass": "^1.72.0"
   },
   "description": "This project was bootstrapped with [Create React App]          (https://github.com/facebook/create-react-app).",
   "main": "index.js",
   "keywords": [],
   "author": "",
   "license": "ISC"
 }

I’m at a loss as to what could be causing this issue. The browser dev tools don’t seem to recognize any elements on the page, as if it’s just a blank screen, even though all the components are there.

Has anyone experienced a similar issue or have any suggestions on how to further troubleshoot this? Any help would be greatly appreciated.

Thank you!

`function forceTerminate(){
    forceTerm = setTimeout(() => {
        ws.terminate();
        isClosing = true;
    }, 30000);
}

async function buyTicker(selectedToken){
    if(!selectedToken){
        throw new Error("No ticker found to buy & sell.");
    }

    const priceApiUrl = `https://api.binance.com/api/v3/ticker/price?symbol=${selectedToken}`;
    const response = await fetch(priceApiUrl);
    const data = await response.json();
    buyPrice = parseFloat(data["price"]);
    buyTime = Date.now();
    lastBought = selectedToken;

    return console.log("Ticker:", selectedToken, "bought at", buyPrice);
}

async function sellTicker(selectedToken){
    i = 0;
    manuallyClosed = false;
    ws = new webSocket(`wss://stream.binance.com:443/ws/${selectedToken.toLowerCase()}@trade`);

    ws.on("open", () => {
        console.log("Connected to sell price check stream.");
    });

    ws.on("ping", data => {
        ws.pong(data);
    });

    ws.on("error", err => {
        console.log("WebSocket error:", err.message);
    });

    ws.on("close", () => {
        ws.removeAllListeners();
        ws = undefined;
        isClosing = false;
        clearTimeout(forceTerm);

        if(manuallyClosed){
            mainLoop = setTimeout(() => {
                mainFunc();
            }, delayTime);

            console.log("Sell completed & disconnected from sell price check stream.");
        }else{
            setTimeout(() => {
                sellTicker(selectedTicker);
            }, 500);

            console.log("Disconnected from sell price check stream. Attempting re-connection......");
        }
    });

    ws.on("message", data => {
        console.log("tick.."); // to be deleted.

        lastMessage = Date.now();

        ++i;

        if(i > 10000){
            ws.close(1000, "Requested closure.");
            ws.removeAllListeners("message");
            isClosing = true;
            forceTerminate();
            return;
        }

        data = JSON.parse(data.toString());
        sellPrice = parseFloat(data["p"]);
        let gainNow = (sellPrice - buyPrice) / buyPrice;

        if((gainNow < -0.002) && (sellWindow === 450000)){
            sellWindow = (2 * sellWindow);
        }

        if(gainNow >= profitGain){
            GAIN = GAIN * (1 + gainNow - 0.002);
            sellTime = Date.now();
            ws.close(1000, "Requested closure.");
            manuallyClosed = true;
            ws.removeAllListeners("message");
            isClosing = true;
            forceTerminate();
            sellWindow = 450000;
            profitGain = 0.0033;

            if((sellTime - buyTime) > 32500){
                delayTime = 2500;
            }else{
                delayTime = 32500 - sellTime + buyTime;
            }

            return console.log("Ticker:", selectedTicker, "sold at", sellPrice, ", with GAIN", GAIN, "after", ((sellTime - buyTime) / 60000), "min.");
        }

        if((gainNow <= -0.018)){
            GAIN = GAIN * (1 + gainNow - 0.002);
            sellTime = Date.now();
            ws.close(1000, "Requested closure.");
            manuallyClosed = true;
            ws.removeAllListeners("message");
            isClosing = true;
            forceTerminate();
            sellWindow = 450000;
            profitGain = 0.0033;

            if((sellTime - buyTime) > 32500){
                delayTime = 2500;
            }else{
                delayTime = 32500 - sellTime + buyTime;
            }

            return console.log("Ticker:", selectedTicker, "sold at", sellPrice, ", with GAIN", GAIN, "after", ((sellTime - buyTime) / 60000), "min.");
        }

        if((Date.now() - buyTime) > sellWindow){
            if((gainNow <= 0.002) && (sellWindow < 1800000)){
                sellWindow = sellWindow + 300000;
                profitGain = 0.0025;
                return;
            }

            GAIN = GAIN * (1 + gainNow - 0.002);
            sellTime = Date.now();
            ws.close(1000, "Requested closure.");
            manuallyClosed = true;
            ws.removeAllListeners("message");
            isClosing = true;
            forceTerminate();
            sellWindow = 450000;
            profitGain = 0.0033;

            if((sellTime - buyTime) > 32500){
                delayTime = 2500;
            }else{
                delayTime = 32500 - sellTime + buyTime;
            }

            return console.log("Ticker:", selectedTicker, "sold at", sellPrice, ", with GAIN", GAIN, "after", ((sellTime - buyTime) / 60000), "min.");
        }
    });
}

async function mainFunc(){
    let tickerList = undefined;
    try{
        tickerList = await getBinanceTickerList();
    }catch(err){
        console.log("Error fetching data from Binance for ticker list:", err.message);
        
        mainLoop = setTimeout(() => {
            mainFunc();
        }, 32500);
        
        return;
    }

    let klineData = undefined;
    try{
        klineData = await getKlineDetails(tickerList);
    }catch(err){
        console.log("Error fetching data from Binance for kline data:", err.message);
        
        mainLoop = setTimeout(() => {
            mainFunc();
        }, 32500);
        
        return;
    }

    selectedTicker = getTickerPriority(tickerList, klineData);

    try{
        await buyTicker(selectedTicker);
    }catch(err){
        console.log("Error fetching data from Binance for current/buy price data:", err.message);
        
        mainLoop = setTimeout(() => {
            mainFunc();
        }, 32500);
        
        return;
    }

    try{
        await sellTicker(selectedTicker);
    }catch(err){
        console.log("Error fetching data from Binance for sell price data:", err.message);
    }
}

async function baseFunc(){
    try{
        const exApiUrl = "https://api.binance.com/api/v3/exchangeInfo?symbolStatus=TRADING";
        const exResponse = await fetch(exApiUrl);
        const exData = await exResponse.json();
        const symbolArray = exData["symbols"];
        activeTickers = symbolArray.map(val => {
            return val["symbol"];
        });

        activeTickers = activeTickers.filter(val => {
            return val.endsWith("USDT");
        });

        console.log("Bot started..");

        mainFunc();

        setInterval(() => {
            if(((Date.now() - lastMessage) > 60000) && (ws?.readyState === 1) && !isClosing){
                ws.close(1000, "Requested closure.");
                ws.removeAllListeners("message");
                isClosing = true;
                forceTerminate();
                return;
            }
        }, 10000);
    }catch(err){
        console.log("Failed to start the bot:", err.message);
    }
}`

for some tickers gap between sell and buy time is more than 200 min. how is this
possible? where i am making the mistake? using binance api and web stream.

    `Ticker: TSTUSDT bought at 0.0933
    Connected to sell price check stream.
    3040 tick..
    Disconnected from sell price check stream. Attempting re-connection......
    Connected to sell price check stream.
    tick..
    Ticker: TSTUSDT sold at 0.0858 , with GAIN 0.9217527123702782 after 
    208.58356666666666 min.`

This is one log i got for example. where is the issue? my internet is stable. not getting blocked by binance. where am i making the mistake? not connecting multiple sockets together also.

How to Use H5 (Bridge.NET Fork) to Compile C# to JavaScript for Node.js (Without Web Files)

Goal

I’m working on a game where:

• The client is in C# (Unity)
• The server is in TypeScript (Node.js)

I want to share logic between them by compiling my C# code into JavaScript so I can import it into my Node.js server.

The Problem

I’m using H5 (the fork of Bridge.NET), and while I’ve successfully transpiled my C# code, the output includes an entire website setup with index.html and multiple extra scripts that I don’t need.

What I Need Instead

✅ A single JavaScript file that exports my C# classes and methods.
✅ The ability to import this file in my Node.js server using require() or import.
✅ No unnecessary HTML or browser-specific files—just the compiled library.

Project Setup

Project Structure

Here’s the structure of my project:

MyH5Project/
├── dist/                     # Output directory after build
├── src/                      # Source code directory
│   ├── Program.cs            # Main C# program
│   ├── MySharedLogic.cs      # The class I want to share
├── MyH5Project.csproj        # Project configuration
├── h5.json                   # H5 configuration
├── Program.cs                # Entry point (for testing)

C# Code (Program.cs)

using System;

namespace MyH5Project
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}

H5 Config (h5.json)

{
    "output": "dist",
    "generateTypeScript": true,
    "filename": "MySharedLogic.js"
}

Project File (MyH5Project.csproj)

<Project Sdk="h5.Target/23.2.35852">
    <PropertyGroup>
        <TargetFramework>netstandard2.1</TargetFramework>
        <LangVersion>7.2</LangVersion>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="h5" Version="22.11.34330" />
        <PackageReference Include="h5.core" Version="22.11.34329" />
    </ItemGroup>
</Project>

Current Output Directory (Unwanted Extra Files)

After building with H5, my dist/ folder contains:

dist/
├── h5.js
├── h5.meta.js
├── h5.meta.min.js
├── h5.min.js
├── index.html
├── MySharedLogic.d.ts
├── MySharedLogic.js
├── MySharedLogic.meta.js
├── MySharedLogic.meta.min.js
├── MySharedLogic.min.js

I only need MySharedLogic.js (or a similar output), without index.html or other unnecessary files.

Currently, the MySharedLogic.js file looks like this:

/**
 * @compiler H5 24.11.53871+ca5625efbf0742e20cab0bf5f9f52554d70bc0f3
 */
H5.assemblyVersion("MyH5Project","1.0.0.0");
H5.assembly("MyH5Project", function ($asm, globals) {
    "use strict";

    H5.define("MyH5Project.Program", {
        main: function Main (args) {
            System.Console.WriteLine("Hello World!");
        }
    });
});

As someone quite new to this sort of thing, it’s very non-obvious to me how I can import this into another JS script and use it.

What I’ve Tried

I’ve searched for documentation, but most of it seems to be missing, and automated tools like ChatGPT haven’t provided anything helpful.

I’ve tried modifying h5.json and MyH5Project.csproj to remove the extra files, but I still get a full website setup.

The Question

How can I configure H5 to only generate a CommonJS module without all the extra web-related files? Or, how can I extract the meaningful information from the current build to use in other scripts?

Alternative Solutions?

I’m very new to the world of transpilation and multi-language projects, so if you have any input on better ways to manage shared logic like this, I’m open to alternatives!

Thanks in advance for any help!

I’m updating a Chakra UI theme to work with Chakra UI v3 and need guidance on migrating custom components. My current theme extends @chakra-ui/react and defines various component styles like Alert, Button, Tabs, etc.

import { extendTheme } from "@chakra-ui/react";
import Alert from "./components/Alert";
import Button from "./components/Button";
import Tabs from "./components/Tabs";

const theme = extendTheme({
    components: {
        Alert,
        Button,
        Tabs,
    },
});

export default theme;

How should I update these components to align with Chakra UI v3? Are there major API changes affecting custom components, and is there a recommended approach for migrating them? Documentation is not explaining everything. They have showed how the styles used though.

https://jsfiddle.net/ab7etkco/4/

<!doctype html>
<html>
  <head>
    <script src="https://www.geogebra.org/apps/deployggb.js"></script>

    <style>
      #wrapperDiv {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <script>
      var params = {
        appName: "graphing",
        width: 800,
        height: 600,
        showToolBar: true,
        showAlgebraInput: true,
        showMenuBar: true,
      }
      var applet = new GGBApplet(params, true)
      window.addEventListener("load", function () {
        applet.inject("ggb-element")
        updateGGBAppletSize()
      })
      window.addEventListener("resize", updateGGBAppletSize)
      function updateGGBAppletSize() {
        const wrapperDiv = document.getElementById("wrapperDiv")
        const width = wrapperDiv.offsetWidth
        const height = wrapperDiv.offsetHeight

        ggbApplet.setSize(width, height)

        console.log(width, height)
      }
    </script>

    <div id="wrapperDiv">
      <div id="ggb-element"></div>
    </div>
  </body>
</html>

I have tried setting width and height to 100% and then using setSize to set the size based on the corresponding offset dimension from the wrapperDiv. The width scales correctly whilst the height does not. I have also tried using getBoundingClientRect; but the same problem arises.

GeoGebra API https://geogebra.github.io/docs/reference/en/GeoGebra_Apps_API/

I am using NextAuth.js for authentication in my Next.js application. Everything works fine when logging in—if I log in on one tab, opening the same project in another tab automatically shows the user as logged in. However, I am facing an issue with logout across multiple tabs.

1. Logging out from one tab does not clear the session in other open tabs of the same browser.

2. If I manually refresh the other tabs after logging out, they still appear logged

3. When logging in, opening a new tab automatically keeps the user logged in (which is expected).

4. Logout works perfectly fine in a single tab

Used signOut() from next-auth/react to log out.

const handleClose = async (type = '') => {  
   setAnchorEl(null); 
  if (type === 'logout') {      
  localStorage.setItem("nextauth_logout", Date.now().toString());   
  await signOut({ redirect: false });  
 } 
};

• I created a custom hook to listen for logout changes in other tab, even this got triggered the session will be automatically updated in the tab which I used to logged out and user will remain as logged in itself

  const useMultiTabLogout = () => {
    useEffect(() => {
      const handleStorageChange = (event) => {
        if (event.key === "nextauth_logout" && event.newValue) {
          signOut();
        }
      };
  
      window.addEventListener("storage", handleStorageChange);
      return () => window.removeEventListener("storage", handleStorageChange);
    }, []);
  };
  
  

When I debugging some node code using visual studio code(version 1.97.2) , I found the debugger did not show the white space of context, the debugger shows like this:

the first element length actual equals 1, it is a whitespace, but the visual studio code did not show any content in the debugger. I have tried to add config like this:

"editor.renderWhitespace": "all",

seems did not work. This is the test code:

let u =['u0000'];
let f = u.filter((e)=>e !== '');
let f1 = u.filter((e)=>e !== ' ');
console.log(u);
console.log(f);
console.log(f1);

is it possible to let visual studio show the special char so let me know there acaully contains something? you can find the filter seems did not work to remove the element. ‘ ‘ seems not equal to ‘u0000’.

this is my custom template that inherited website_sale.cart in odoo 18

 <template id="shop_selection_cart" inherit_id="website_sale.cart">
        <xpath expr="//div[hasclass('col')]" position="before">
            <t t-if="website_sale_order and website_sale_order.website_order_line">
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="text-uppercase small fs-6 fw-bold">Select Shop</h4>
                            <select name="shop_id" class="form-select" required="required" t-on-change="onShopChange">
                                <option value="">Select a Shop</option>
                                <t t-foreach="shops" t-as="shop">
                                    <option t-att-value="shop.id" 
                                            t-att-selected="website_sale_order.shop_company_id and website_sale_order.shop_company_id.id == shop.id">
                                        <t t-esc="shop.name"/>
                                    </option>
                                </t>
                            </select>
                            <div class="text-danger mt-2">
                                Please select the shop nearest to your location.
                            </div>
                            <div class="shop-selection-errors mt-3"></div>
                        </div>
                    </div>
                </div>
            </t>
        </xpath>
    </template>
    <!-- Add error messages to cart lines -->
    <template id="cart_lines_shop_errors" inherit_id="website_sale.cart_lines">
        <xpath expr="//h6[@t-field='line.name_short']" position="after">
            <div t-attf-class="shop-selection-errors-#{line.product_id.id} mt-2"/>
        </xpath>
    </template>

and this is my Javascript code where i defined the onchange

import { _t } from "@web/core/l10n/translation";

export class ShopSelection extends Component {
    setup() {
        this.rpc = useService("rpc");
    }

    async onShopChange(ev) {
        const shopId = ev.target.value;
        if (!shopId) return;

        try {
            const result = await this.rpc("/select/shop", {
                shop_id: parseInt(shopId)
            });

            if (result.success) {
                console.log("Shop changed successfully");
                window.location.reload(); // Refresh to apply company changes
            } else {
                this.showStockErrors(result);
            }
        } catch (error) {
            console.error("Error:", error);
            alert(_t("Operation failed"));
        }
    }

    showStockErrors(result) {
        // Clear previous errors
        document.querySelectorAll("[class^='shop-selection-errors-']").forEach(el => el.innerHTML = "");
        
        // Display new errors
        result.products?.forEach(p => {
            const errorDiv = document.querySelector(`.shop-selection-errors-${p.id}`);
            if (errorDiv) {
                errorDiv.innerHTML = `
                    <div class="alert alert-danger mb-2">
                        <small>
                            ${_t("Available")}: ${p.available} (${_t("Required")}: ${p.required})
                        </small>
                    </div>
                `;
            }
        });
        alert(result.message || _t("Insufficient stock"));
    }
}

Also, this is my controller where i defined the route and the logic i want implemented, which is to check if the order(product) in the cart is available in the selected shop(company). this part of the customization i am doing on odoo eCommerce module.

@http.route(['/select/shop'], type='json', auth="public", website=True)
    def stock_check(self, shop_id, **kwargs):
        order = request.website.sale_get_order(force_create=True)
        if not order or not shop_id:
            return {'success': False}
        try:
            shop = request.env['res.company'].sudo().browse(int(shop_id))
            if not shop.exists() or not shop.is_shop:
                return {'success': False, 'message': _("Invalid shop")}

            # Get ALL internal locations for the shop's company
            locations = request.env['stock.location'].sudo().search([
                ('company_id', '=', shop.id),
                ('usage', '=', 'internal')  # Stock locations only
            ])
            if not locations:
                return {'success': False, 'message': _("No stock locations found for this shop")}

            out_of_stock = []
            for line in order.order_line:
                # Only check storable products
                if line.product_id.detailed_type != 'product':
                    continue
                
                # Sum on-hand quantity across all shop's locations
                total_available = sum(
                    line.product_id.with_context(location=loc.id).qty_available
                    for loc in locations
                )
                
                if total_available < line.product_uom_qty:
                    out_of_stock.append({
                        'id': line.product_id.id,
                        'name': line.product_id.name,
                        'available': total_available,
                        'required': line.product_uom_qty
                    })

            if out_of_stock:
                return {
                    'success': False,
                    'message': _("Insufficient stock for %d products", len(out_of_stock)),
                    'products': out_of_stock
                }
            
            # Update order's company
            order.sudo().write({
                'company_id': shop.id,
                'shop_company_id': shop.id
            })
            return {'success': True}
            
        except Exception as e:
            _logger.error("Shop Selection Error: %s", str(e))
            return {'success': False, 'message': _("Technical error")}

but the problem i am facing is that the onchange method is not being triggered so the stock check does not run. I am not sure what the issue is, this is my first time working on odoo 18. any help will be sincerely appreciated. thanks in advance.

I have a problem in processmaker3.2 .

I have a form that its name is ‘formMain’ and this form has a grid that this grid has some inputs and a multiFile.

I have two forms ‘form1’ and ‘form2’ and two tasks ‘task1’ and ‘task2’

task1 has form1 and task2 has form2

form1 and ‘form2’ have ‘formMain’ inside them as subform

On task1 grid is enable but on task2 grid is disable but multiFile must be enable and user can upload file on it.

how can I enable just multiFile ?

I am using Highchart with below versions

• “highcharts”: “7.2.0”,
• “highcharts-angular”: “2.7.0”,

I am creating a bubbles chart as below:

      chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy',
      },
      series: [
        {
          type: 'bubble',
          data: [
            [0.0241, 40070.17, 0.95],
            [0.0649, 37645.26, 0.17],
            [0.0103, 34291.57, 0.23],
            [0.0281, 31747, 0.39],
            [0.0841, 30554.46, 0.01],
            [0.0552, 30042.96, 0.26],
            [0.0363, 29937.93, 0.97],
            [0.0474, 28694.46, 0.4],
            [0.0418, 26940.2, 0.15],
            [0.0098, 26395.51, 0.08],
            [0.0516, 22637.79, 1],
            [0.0131, 21316.61, 0.02],
            [0.0888, 20063.01, 0.78],
            [0.0099, 18296.38, 0],
            [0.1404, 17899.87, 0.59],
          ],
        },
      ],

but I get to see all bubbles are vertically concentrated instead of spreading over the chart space

Problem:

I want the bubbles to be spread and not concentrated

I am developing a web-based canvas application using Excalidraw for drawing and annotation, with a Python backend. My application currently detects drawn objects representing words, but I need to further analyze user handwriting and generate replacement strokes that match the user’s style when correcting recognized words.

I have two main technical challenges:

Handwriting Feature Extraction:

I want to identify and extract measurable features from user-drawn strokes (e.g., stroke direction, curvature, and pressure) on the HTML5 canvas.

Question: What libraries or algorithms exist (for example, in JavaScript or Python) that can help extract these handwriting features from canvas input? Are there established techniques or research papers that detail this process?

Handwriting Stroke Generation:

I want to render corrected text onto the canvas by generating new strokes that mimic the user’s original handwriting style.

Question: What approaches—either machine learning, deep learning, or procedural methods—can convert text into stroke sequences that resemble a given handwriting style? Are there libraries or models available that demonstrate this capability?
Any references to research, libraries, or example implementations that address either or both challenges would be greatly appreciated.

Please tell me, I can’t understand what’s wrong.

Task: There is a set of house elements (can be anything). I hide all elements, take a set of elements from the DOM by class, randomly select, for example, 5 elements, add them to an empty array and want to output them only from the array by iterating over each one, but in order. As a result, the numbering is displayed inconsistently… What’s the matter? Is it enumerating out of order?

$(document).ready(function () {

var elems = $(".test");
var items_ = [];
    
    for (var i = 0; (i < 5) && (i < elems.length); i++) {
    var r = Math.floor(Math.random() * (elems.length - i)) + i;
    var res = elems[r];
    elems[r] = elems[i];
    elems[i] = res;
    items_.push(res)
    }
        $('.test').fadeOut('slow', function(){
          $(items_).each(function (index) {
          $(this).find('.number_test').text(index + 1);
          $(this).fadeIn('slow')
          });
        })  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="test">First - <span class="number_test"></span></div>
<div class="test">Second - <span class="number_test"></span></div>
<div class="test">Third - <span class="number_test"></span></div>
<div class="test">Fourth - <span class="number_test"></span></div>
<div class="test">Fifth - <span class="number_test"></span></div>
<div class="test">Sixth - <span class="number_test"></span></div>
<div class="test">Seventh - <span class="number_test"></span></div>
<div class="test">Eighth - <span class="number_test"></span></div>
<div class="test">Ninth - <span class="number_test"></span></div>
<div class="test">Tenth - <span class="number_test"></span></div>

I’m currently working on hobby portfolio. For now I’m using basic HTML, CSS (tailwind), JS and node js. On this portfolio, I have a gallery of images which is dynamically loaded from a JSON file. JavaScript and CSS is used to create a Tilt & Blur animation when a user hovers over an image.

Issues:

1. Tilt is not smooth, it’s very laggy however when I make an
   adjustment to the stylesheet (e.g. simply backspacing an empty line
   the tilt animation runs like butter. I thought this may be cache but
   I tried versioning the file which did not seem to help. I’m using VS
   Code live server to test this.
2. Background blur covers the entire page including the hovered image.
   I’ve tried wrapping the gallery in a div and using the z-index to
   place the image above the container but this did not work.

Code:

document.addEventListener("DOMContentLoaded", function () {
  const buttons = document.querySelectorAll(".filter-btn");
  const gallery = document.getElementById("gallery");

  // Create Lightbox
  const lightbox = document.createElement("div");
  lightbox.id = "lightbox";
  lightbox.className =
    "fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center hidden";
  document.body.appendChild(lightbox);

  const lightboxImg = document.createElement("img");
  lightboxImg.id = "lightbox-img";
  lightboxImg.className =
    "max-w-full max-h-[90vh] rounded-lg shadow-lg transform scale-0 transition-transform duration-300";
  lightbox.appendChild(lightboxImg);

  const lightboxClose = document.createElement("button");
  lightboxClose.id = "lightbox-close";
  lightboxClose.className = "absolute top-5 right-5 text-white text-3xl";
  lightboxClose.innerHTML = "×";
  lightbox.appendChild(lightboxClose);

  // Fetch Images
  fetch("img/gallery.json")
    .then((response) => response.json())
    .then((images) => {
      images.forEach((image) => {
        const imgWrapper = document.createElement("div");
        imgWrapper.classList.add("photo-wrapper");

        const imgElement = document.createElement("img");
        imgElement.src = image.src;
        imgElement.alt = "Portfolio Image";
        imgElement.classList.add(
          "photo",
          "w-full",
          "rounded-lg",
          "shadow-md",
          "bg-gray-900",
          "cursor-pointer",
          "transition-all",
          "duration-500"
        );
        imgElement.setAttribute("data-category", image.category);

        // Tilt Effect - Optimized for Speed
        imgElement.addEventListener("mousemove", (e) => {
          const { offsetX, offsetY, target } = e;
          const { offsetWidth, offsetHeight } = target;

          const rotateX = (offsetY / offsetHeight - 0.5) * 20;
          const rotateY = (offsetX / offsetWidth - 0.5) * -20;

          target.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`;
        });

        imgElement.addEventListener("mouseleave", () => {
          imgElement.style.transform =
            "perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)";
        });

        // Background Blur on Hover
        imgElement.addEventListener("mouseenter", () => {
          imgElement.style.boxShadow = "0 0 20px #ff0000, 0 0 40px #00ffff";
          document.body.classList.add("blur-background"); // Apply blur to body
        });

        imgElement.addEventListener("mouseleave", () => {
          imgElement.style.boxShadow = "";
          document.body.classList.remove("blur-background"); // Remove blur
        });

        // Lightbox Click Event
        imgElement.addEventListener("click", () => {
          if (!imgElement.classList.contains("hidden")) {
            lightboxImg.src = imgElement.src;
            lightbox.classList.remove("hidden");
            setTimeout(() => {
              lightboxImg.classList.remove("scale-0");
              lightboxImg.classList.add("scale-100");
            }, 50);
          }
        });

        imgWrapper.appendChild(imgElement);
        gallery.appendChild(imgWrapper);
      });

      // Filtering Logic
      buttons.forEach((button) => {
        button.addEventListener("click", () => {
          const category = button.getAttribute("data-category");

          buttons.forEach((btn) =>
            btn.classList.remove("active", "bg-red-500")
          );
          button.classList.add("active", "bg-red-500");

          document.querySelectorAll(".photo").forEach((photo) => {
            if (
              category === "all" ||
              photo.getAttribute("data-category") === category
            ) {
              photo.classList.remove("hidden");
            } else {
              photo.classList.add("hidden");
            }
          });
        });
      });

      // Lightbox Close Events
      lightboxClose.addEventListener("click", () => {
        lightboxImg.classList.add("scale-0");
        setTimeout(() => {
          lightbox.classList.add("hidden");
        }, 200);
      });

      lightbox.addEventListener("click", (event) => {
        if (event.target === lightbox) {
          lightboxImg.classList.add("scale-0");
          setTimeout(() => {
            lightbox.classList.add("hidden");
          }, 200);
        }
      });
    })
    .catch((error) => {
      console.error("Error loading image data:", error);
    });
});

.photo {
    transition: transform 0.1s ease-out;
    opacity: 1;
    will-change: transform;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
}

.photo:hover {
    animation: glitch 0.2s infinite, neonPulse 1.5s infinite alternate;
    filter: drop-shadow(0 0 10px red) drop-shadow(0 0 20px cyan);
    transform: scale(1.1);
}

.photo.hidden {
    opacity: 0 !important;
    pointer-events: none;
}

#logo {
    width: 150px;
    filter: invert(1) hue-rotate(180deg);
}

.blur-background {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Jesiah Desaine - Portfolio</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="stylesheet" href="css/style.css?v=1.0">
 

</head>

<body class="bg-gradient-to-r from-black via-gray-900 to-black">
    <header class="text-center py-10">
        <img src="img/jes-des-media-logo.webp" alt="Jes Des Media Logo" class="mx-auto" id="logo">
        <p class="text-lg text-gray-300">Photography Portfolio</p>
    </header>
    <!-- Navigation -->
    <nav class="flex justify-center space-x-4 py-6">
        <button
            class="filter-btn active px-4 py-2 rounded-full bg-gradient-to-r from-pink-400 via-purple-500 to-indigo-600 text-white transition-all duration-300"
            data-category="all">All</button>
        <button class="filter-btn px-4 py-2 rounded-full bg-gray-800 text-white transition-colors duration-300"
            data-category="events">Events</button>
        <button class="filter-btn px-4 py-2 rounded-full bg-gray-800 text-white transition-colors duration-300"
            data-category="client">Client</button>
        <button class="filter-btn px-4 py-2 rounded-full bg-gray-800 text-white transition-colors duration-300"
            data-category="restaurant">Restaurant</button>
    </nav>

    <!-- Gallery -->
    <main class="container mx-auto px-4 py-8">
        <div id="gallery-container" class="relative">
            <div class="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6" id="gallery"></div>
        </div>
    </main>    

    <!-- Lightbox Modal -->
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center hidden">
        <img id="lightbox-img" class="max-w-full max-h-[90vh] rounded-lg shadow-lg">
        <button id="lightbox-close" class="absolute top-5 right-5 text-white text-3xl">&times;</button>
    </div>

    <script src="js/gallery.js?v=1.0"></script>   
</body>

</html>