Blancer.com Tutorials and projects

I am using web workers for my heavy computations. Passing data to the worker is implicitly done by serializing the objects, so their types are narrowed down to simple objects, meaning that an object Foo defined like this:

class Foo {
  name: string
  child: Bar

  constructor(name: string, child: Bar) {
    this.name = name
    this.child = child
  }
}

class Bar {
  name: string

  constructor(name: string) {
    this.name = name
  }

  sayHello() {
    console.log("Hello!")
  }
}

is narrowed down to an object like this:

{ name: "foo", child: { name: "bar" } }

So to use the method sayHello, the actual type has to be restored in the worker, e.g. by using the constructor:

const newFoo = new Foo(other.name, new Bar(other.child.name)

Which, as you can see, can become very verbose and a likely source of errors.

You could also define copy constructors in the actual constructors or static methods like:

class Foo {
  // ...
  static from(other: Foo) {
    const child = Bar.from(other.child)
    return new Foo(other.name, child)
  }
}

class Bar {
  // ...
  static from(other: Bar) {
    return new Bar(other.name)
  }
}

This might be possible, but is also very verbose and prone to errors.

Therefore I have created a copy function, that creates a new class instance from the prototype and copies the properties:

function copy<T>(obj: any, prototype: T): T {
    if (!obj) return obj

    const clone = Object.create(prototype)
    Reflect.ownKeys(obj).forEach((key) => {
        const desc = Object.getOwnPropertyDescriptor(obj as T, key)
        if (desc) {
            Object.defineProperty(clone, key, desc)
        }
    })
    return clone as T
}

This works well for flat classes, but nested types are still narrowed to plain objects, meaning the function sayHello in Bar is missing, when calling:

const fooFromObj = copy({ name: "foo", child: { name: "bar" } }, Foo.prototype)

because this creates this object:

Foo { name: "foo", child: { name: "bar" } }
// instead of:
Foo { name: "foo", child: Bar { name: "bar" } }

Can I get the type of a nested class from the parent type to recursively restore the nested types?

I’m working on a WordPress site using Elementor and I want to add some advanced animations using GSAP. I’ve successfully loaded the GSAP library, but I’m running into issues with responsive behavior and performance.

Current setup:

• WordPress 6.3
• Elementor Pro 3.16
• GSAP 3.12 loaded via CDN

Code I’m using:

gsap.registerPlugin(ScrollTrigger);

gsap.from(".elementor-widget-heading h2", {
  duration: 1,
  y: 50,
  opacity: 0,
  scrollTrigger: ".elementor-widget-heading"
});

Issues I’m facing:

1. Animations don’t work properly on mobile devices
2. Sometimes animations trigger multiple times when scrolling back up
3. Performance seems sluggish on older devices

I’ve seen some impressive implementations on sites like https://laplumerp.com/ or https://studiojae.fr/ where GSAP animations work flawlessly with Elementor. Their animations are smooth and responsive across all devices.

Questions:

• What’s the best way to ensure GSAP animations are responsive in Elementor?
• How can I optimize performance for mobile devices?
• Should I use Elementor’s custom CSS or add scripts in functions.php?
• Is Any Plugin Can make it easier.

Any help or code examples would be greatly appreciated!

Tags: javascript, wordpress, elementor, gsap, css-animations

I attempted to implement GSAP ScrollTrigger animations on Elementor heading widgets. I loaded GSAP via CDN and added the animation code in Elementor’s custom CSS section.

I expected smooth fade-in animations from bottom to top when elements come into viewport, working consistently across all devices and screen sizes.

I have built an application in React and suddenly it just won’t connect to LMStudio, no reaction in the logs of the app. Curl requests for models do reply, CORS is turned on and never gave me any issues.

Here is my code:

 const llmModelName = "lmstudio-community/gpt-oss-20b-MXFP4.gguf/"
  const [chatHistory, setChatHistory] = useState([]);
  const [chatInput, setChatInput] = useState('');
  const [isChatting, setIsChatting] = useState(false);

  const handleFetch = () => {
    fetch('http://127.0.0.1:1234/v1/chat/completions')
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  };

messages.push({
  "role": "user",
  "content": userMessageContent
});

try {
  setStatus("Sending to LLM...");
  const response = await fetch(lmStudioApiUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      model: llmModelName,
      messages: messages,
      temperature: 0.7,
    }),
  });
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  const data = await response.json();
  const llmSummary = data.choices[0].message.content;

  setReport(llmSummary);
  setChatHistory([
    ...messages,
    { "role": "assistant", "content": llmSummary }
  ]);

} catch (error) {
  console.error("Failed to call local LLM API:", error);
  setReport(`Failed to get summary from local LLM. Error: ${error.message}`);
} finally {
  setLoading(false);
  setStatus("Final report ready. You can now chat below.");
  setIsChatting(true);
}
  };

I overrided the default js method onDownloadButtonClicked (odoo/addons/web/static/src/views/pivot/pivot_render.js) for downloading xlsx files

(it`s my method) statis/src/js/views/my_render.js

/** @odoo-module **/

import { patch } from "@web/core/utils/patch";
import { PivotRenderer } from "@web/views/pivot/pivot_renderer";
import { _t } from "@web/core/l10n/translation";
import { download } from "@web/core/network/download";

patch(PivotRenderer.prototype, {
    onDownloadButtonClicked() {
        if (this.model.getTableWidth() > 16384) {
            throw new Error(
                _t(
                    "For Excel compatibility, data cannot be exported if there are more than 16384 columns.nnTip: try to flip axis, filter further or reduce the number of measures."
                )
            );
        }
        const table = this.model.exportData();
        download({
            url: "/web/pivot/export_xlsx1",  
            data: { data: JSON.stringify(table) },
        });
    },
});

I need this to add a string field to a report generated from a pivot table (it is not possible to add a string field to it directly in views).
Therefore, I wrote my own http.route(export_xlsx1) (copied from the original odoo/addons/web/controllers/pivot.py and modified).

controllers/my_pivot.py

from collections import deque
import io
import json

from werkzeug.datastructures import FileStorage

from odoo import http, _
from odoo.http import content_disposition, request
from odoo.tools import osutil
from odoo.tools.misc import xlsxwriter

from my_import import get_all_picking_notes

class TableExporter(http.Controller):

    @http.route('/web/pivot/export_xlsx1', type='http', auth="user", readonly=True)
    def export_xlsx(self, data, **kw):
        jdata = json.load(data) if isinstance(data, FileStorage) else json.loads(data)
        output = io.BytesIO()
        workbook = xlsxwriter.Workbook(output, {'in_memory': True})
        worksheet = workbook.add_worksheet(jdata['title'])

        header_bold = workbook.add_format({'bold': True, 'pattern': 1, 'bg_color': '#AAAAAA'})
        header_plain = workbook.add_format({'pattern': 1, 'bg_color': '#AAAAAA'})
        bold = workbook.add_format({'bold': True})

        measure_count = jdata['measure_count']
        origin_count = jdata['origin_count']

        # Step 1: writing col group headers
        col_group_headers = jdata['col_group_headers']

        # x,y: current coordinates
        # carry: queue containing cell information when a cell has a >= 2 height
        #      and the drawing code needs to add empty cells below
        x, y, carry = 1, 0, deque()
        for i, header_row in enumerate(col_group_headers):
            worksheet.write(i, 0, '', header_plain)
            for header in header_row:
                while (carry and carry[0]['x'] == x):
                    cell = carry.popleft()
                    for j in range(measure_count * (2 * origin_count - 1)):
                        worksheet.write(y, x+j, '', header_plain)
                    if cell['height'] > 1:
                        carry.append({'x': x, 'height': cell['height'] - 1})
                    x = x + measure_count * (2 * origin_count - 1)
                for j in range(header['width']):
                    worksheet.write(y, x + j, header['title'] if j == 0 else '', header_plain)
                if header['height'] > 1:
                    carry.append({'x': x, 'height': header['height'] - 1})
                x = x + header['width']
            while (carry and carry[0]['x'] == x):
                cell = carry.popleft()
                for j in range(measure_count * (2 * origin_count - 1)):
                    worksheet.write(y, x+j, '', header_plain)
                if cell['height'] > 1:
                    carry.append({'x': x, 'height': cell['height'] - 1})
                x = x + measure_count * (2 * origin_count - 1)
            x, y = 1, y + 1

        # Step 2: writing measure headers
        measure_headers = jdata['measure_headers']
        measure_headers.append({'title': 'My header','width': 1, 'height': 1, 'is_bold': True}) <--custom

        if measure_headers:
            worksheet.write(y, 0, '', header_plain)
            for measure in measure_headers:
                style = header_bold if measure['is_bold'] else header_plain
                worksheet.write(y, x, measure['title'], style)
                for i in range(1, 2 * origin_count - 1):
                    worksheet.write(y, x+i, '', header_plain)
                x = x + (2 * origin_count - 1)
            x, y = 1, y + 1
            # set minimum width of cells to 16 which is around 88px
            worksheet.set_column(0, len(measure_headers), 16)

        # Step 3: writing origin headers
        origin_headers = jdata['origin_headers']

        if origin_headers:
            worksheet.write(y, 0, '', header_plain)
            for origin in origin_headers:
                style = header_bold if origin['is_bold'] else header_plain
                worksheet.write(y, x, origin['title'], style)
                x = x + 1
            y = y + 1

        notes = get_all_picking_notes(request.env) <--custom

        # Step 4: writing data
        x = 0
        for row in jdata['rows']:
            worksheet.write(y, x, f"{row['indent'] * '     '}{row['title']}", header_plain)
            if row['title'] in notes:    <-- custom 
                row['values'].append({'is_bold': True, 'value': notes[row['title']]})
            for cell in row['values']:
                x = x + 1
                if cell.get('is_bold', False):
                    worksheet.write(y, x, cell['value'], bold)
                else:
                    worksheet.write(y, x, cell['value'])
            x, y = 0, y + 1

      
        workbook.close()
        xlsx_data = output.getvalue()
        filename = osutil.clean_filename(_("Pivot %(title)s (%(model_name)s)", title=jdata['title'], model_name=jdata['model']))
        response = request.make_response(xlsx_data,
            headers=[('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'),
                    ('Content-Disposition', content_disposition(filename + '.xlsx'))],
        )

        return response

In devtools console only one error, and it exists even if i off debug mode (this error occurs even if remove my_render from manifest file)

Content Security Policy of your site blocks the use of 'eval' in JavaScript`  
The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.

To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.

⚠️ Allowing string evaluation comes at the risk of inline script injection.

1 directive
Source location Directive   Status
script-src  blocked

An error in the client (maybe module conflict or somthing else)

web.assets_web.min.js:26 The following modules could not be loaded because they have unmet dependencies, this is a secondary error which is likely caused by one of the above problems: 
Array(1)
0
: 
"@module_name/js/views/my_render.js"
length
: 
1
[[Prototype]]
: 
Array(0)
at
: 
ƒ at()
concat
: 
ƒ concat()
constructor
: 
ƒ Array()
copyWithin
: 
ƒ copyWithin()
entries
: 
ƒ entries()
every
: 
ƒ every()
fill
: 
ƒ fill()
filter
: 
ƒ filter()
find
: 
ƒ find()
findIndex
: 
ƒ findIndex()
findLast
: 
ƒ findLast()
findLastIndex
: 
ƒ findLastIndex()
flat
: 
ƒ flat()
flatMap
: 
ƒ flatMap()
forEach
: 
ƒ forEach()
includes
: 
ƒ includes()
indexOf
: 
ƒ indexOf()
join
: 
ƒ join()
keys
: 
ƒ keys()
lastIndexOf
: 
ƒ lastIndexOf()
length
: 
0
map
: 
ƒ map()
pop
: 
ƒ pop()
push
: 
ƒ push()
reduce
: 
ƒ reduce()
reduceRight
: 
ƒ reduceRight()
reverse
: 
ƒ reverse()
shift
: 
ƒ shift()
slice
: 
ƒ slice()
some
: 
ƒ some()
sort
: 
ƒ sort()
splice
: 
ƒ splice()
toLocaleString
: 
ƒ toLocaleString()
toReversed
: 
ƒ toReversed()
toSorted
: 
ƒ toSorted()
toSpliced
: 
ƒ toSpliced()
toString
: 
ƒ toString()
unshift
: 
ƒ unshift()
values
: 
ƒ values()
with
: 
ƒ with()
Symbol(Symbol.iterator)
: 
ƒ values()
Symbol(Symbol.unscopables)
: 
{at: true, copyWithin: true, entries: true, fill: true, find: true, …}
[[Prototype]]
: 
Object

Maybe someone know how to fix this problem, or know different method to add strings to pivot value

I have tried using ng-draw-flow and cytoscape but both fail when i try to curve the connectors.

Like for example, i cannot get the connector originate from left of parent to left of child, no .less modifications are helping. Please suggest something.

Cannot post my code as its confidential.

I made a search panel component, searchPanel.tsx. On it, a button grabs the details from the form (Flight From, Flight To, Flight Date, and some other data), then sends that to a new page.

Here’s the searchPanel.tsx:

'use client';    
import "./searchPanel.css";
import React, { useState } from "react";
import { useRouter } from "next/navigation";

export default function SearchPanel() {
  const router = useRouter();
  const [isUsingFlightNum, setIsUsingFlightNum] = useState(false);
  const [locFromValue, setLocFromValue] = useState('');
  const [locToValue, setLocToValue] = useState('');
  const [flightNumValue, setFlightNumValue] = useState('');
  const [flightDateValue, setFlightDateValue] = useState('');


  const locFromChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLocFromValue(e.target.value);
  };

  const locToChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLocToValue(e.target.value);
  };

  const flightNumChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFlightNumValue(e.target.value);
  };

  const flightDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFlightDateValue(e.target.value);
  };

  const handleSubmit = async (formData: FormData) => {
    const flightFrom = formData.get('flightFrom')?.toString() || "";
    const flightTo = formData.get('flightTo')?.toString() || "";
    const flightNumber = formData.get('flightNumber')?.toString() || "";
    const flightDate = formData.get('flightDate')?.toString() || "";

    if (flightDate !== "" && (flightFrom !== "" && flightTo !== "" || flightNumber !== "")) {
      const params = new URLSearchParams();

      params.set('is_using_flight_number', isUsingFlightNum.toString());
      params.set('flight_from', flightFrom);
      params.set('flight_to', flightTo);
      params.set('flight_num', flightNumber);
      params.set('flight_date', flightDate);

      router.push(`/flight/choose?${params.toString()}`)
    } else {
      alert("One or more required fields are missing.");
    }
  }

  return (
    <div>
      Front end code here
    </div>
  );
}

That routes to another page, flight/choose/page.tsx. This page now takes the parameters from the search panel, and uses those as parameters for an API call:

export default async function SelectFlight( {searchParams} : MyPageProps ) {
  // const [selectedFlightCardId, setSelectedFlightCardId] = useState(-1);
  // ^^ Code that I need
  const params = await searchParams;
  const isUsingFlightNum = params!.is_using_flight_number || "";
  const flightFrom = params!.flight_from || "";
  const flightTo = params!.flight_to || "";
  const flightNumber = params!.flight_num || "";
  const flightDate = params!.flight_date || "";

  const url = new URL(`${BASE_API_URL}/api/flights`);
  const options = {
    method: "GET",
  };

  url.searchParams.append('is_using_flight_number', isUsingFlightNum.toString());
  url.searchParams.append('flight_from', flightFrom);
  url.searchParams.append('flight_to', flightTo);
  url.searchParams.append('flight_num', flightNumber);
  url.searchParams.append('flight_date', flightDate);
  const response = await fetch(url, options);
  const result = await response.json();
  const flightData = result.data;

  const handleClick = (event) => {
    const clickedId = event.target.id;
    console.log(`clickedId`, clickedId);
  }

  return (
    <div>
      Front end code here
    </div>
  );
}

This works, until I add "use client" at the very top, which I need for a useState to update a clicked <div> styling and store the ID.

Then the page just repeatedly calls the fetch code, until I kill the project or navigate elsewhere.

I have no idea what to do. Removing my code and simply adding something like a console.log("help") would see help printed repeatedly in the console as well.

No matter what I try, this keeps failing:

await youtube.captions.insert({
    part: ['snippet'],
    media: {
        body: fs.createReadStream('/Users/wannes/Desktop/tmp.srt')
    },
    requestBody: {
        snippet: {
            videoId: "2PRkCBZeihE",
            language: 'nl',
            name: '',
            isDraft: false,
        }
    }
});

Output:

{
    "kind": "youtube#caption",
    "etag": "horsekxpp-GkByDDIDPKuANDDCA",
    "id": "AUieDab4qxyEzvh1AyOlXzJG-2ZSK3TiqwUoRyxyUGfy",
    "snippet": {
        "videoId": "2PRkCBZeihE",
        "lastUpdated": "2025-09-05T08:17:00.002571Z",
        "trackKind": "standard",
        "language": "nl",
        "name": "",
        "audioTrackType": "unknown",
        "isCC": false,
        "isLarge": false,
        "isEasyReader": false,
        "isDraft": false,
        "isAutoSynced": false,
        "status": "failed",
        "failureReason": "processingFailed"
    }
}

I have one website which has few JavaScript code to copy the Instagram hashtags dynamically, initially it was working, but after sometime it suddenly stopped working. I don’t know the reason; but when I check the console I can see the following error:

parsing error: invalid sfntVersion

symbolCards.forEach(card => {
    card.addEventListener('click', function() {
        const symbol = this.getAttribute('data-symbol');
        
        // Copy to clipboard
        navigator.clipboard.writeText(symbol).then(() => {
            // Show notification
            notification.classList.add('show');
            
            // Hide notification after 2 seconds
            setTimeout(() => {
                notification.classList.remove('show');
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy: ', err);
            alert('Failed to copy symbol. Please try again.');
        });
    });
});

How can I solve this?

i have one website which has few javascript code to copy the instagram hashtags dynamically , initialy it was working but after sometime it sudeely stop working i dont know the reason when i am checking in console it says “parsing error: invalid sfntVersion”, below is the copy code

` symbolCards.forEach(card => {
card.addEventListener(‘click’, function() {
const symbol = this.getAttribute(‘data-symbol’);

                // Copy to clipboard
                navigator.clipboard.writeText(symbol).then(() => {
                    // Show notification
                    notification.classList.add('show');
                    
                    // Hide notification after 2 seconds
                    setTimeout(() => {
                        notification.classList.remove('show');
                    }, 2000);
                }).catch(err => {
                    console.error('Failed to copy: ', err);
                    alert('Failed to copy symbol. Please try again.');
                });
            });`

Site url: https://rb.gy/nga2h1

Please give me a solution to fix it. i have researched all over internet tries muktiple things but could not fix it.

i am looking for a fix to make it work.

I have a Vue 2 project where I’m using both Vuetify and Driver.js. On one page, a v-dialog opens and I use the scrollable attribute. Since the dialog content is very long, it becomes scrollable. Inside the same dialog, I need to highlight certain areas with Driver.js. However, some of these areas are located far down in the content and are only visible after scrolling.

When defining the Driver steps, I use a for loop to dynamically generate them. I create an object like the one below, push it into an array, and then set the steps with setSteps:

let obj = {
  element: item.element ?? null,
  popover: {
    title: item.title ?? '',
    description: item.description ?? '',
    side: 'left',
    align: 'start',
  },
  onHighlightStarted: (element) => {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      container: 'nearest'
    });
  },
}

When I reach the elements inside the dialog that require highlighting and need scrolling, the dialog scrolls correctly but then immediately scrolls back to the top on its own. What is the reason for this?

Even when I set smoothScroll: true, I face the same issue.

If I wrap the scrollIntoView function in a setTimeout, the highlighted area appears in the wrong position.

Reminder: Before opening the dialog, the different elements are also shown on the page. After a certain action, the dialog opens and the
steps continue from there.

Lets a div has position: relative; If any of the child div has position: absolute, and the height of that absolute positioned div is higher, that div gets clipped by the parent div. I mean, if you use a max-height on any of the parent divs, you need to scroll to go to the end of that position: absolute div. For example: lets see the screenshot.

You can see that a scrollbar has appeared in the accordion-body when opening the dropdown button. But I don’t want the scrollbar there at that event. .dropdown-menu has position: absolute; and .dropdown has position: relative; If we change the .dropdown to position: absolute;, then the issue will be solved, actually (no more scrollbar at the accordion-body). But, for some reason, in the future, if any parent div, for example, .extra-block (a parent) div may have some positioned div and for that we may need to make .extra-block to position: relative, then the issue will appear again. You can also turn the .dropdown-menu to position: fixed;. But then, when you open the dropdown button and scroll the outer body content, the placement of the dropdown breaks. So, is there any good solution?

Demo Fiddle