Category: javascript

I was trying to create Anchor Link or Bookmark for some contents. My issue is on click bookmark href link it scroll and take me to content right but my problem is some content goes hidden inside Appbar area and Unhandled Error throws on Blazor Page. Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot parse the value ‘7900#headerC’ as type ‘System.Int32’ for ‘Wid’.
System.InvalidOperationException: Cannot parse the value ‘7900#headerC’ as type ‘System.Int32’ for ‘Wid’.

Reproduction Link : https://try.mudblazor.com/snippet/wOmevkccSpKqHzBw

I tried same as trysnippet for my blazor demo page just add AnchorNavigation tag to my demo page and added javascript BlazorScrollToId in index.html others all same as trysnippet and its working is same in both.

reference for blazor Anchor link : https://www.meziantou.net/anchor-navigation-in-a-blazor-application.htm

When using a component in a vue context and a custom-element context – the styles in the vue context stop working, although they work fine for custom-element, is there a way to make the component styles work in both contexts?

webpack config:

module: {
            rules: [
                {
                    test: /.vue$/,
                    loader: 'vue-loader',
                    options: {
                        shadowMode: true
                    }
                },
                {
                    test: /.scss$/,
                    include: path.resolve(__dirname, 'js/components'),
                    use: [
                        {
                            loader: 'vue-style-loader',
                            options: {
                                shadowMode: true
                            }
                        },
                    ]
                },
            ]
        },

declaration custom element:

import '@webcomponents/custom-elements';
import Vue from "vue";
import wrap from "@vue/web-component-wrapper"
import Element from "../components/Element.vue";

const _Element = wrap(Vue, Element)
window.customElements.define('element-select', _Element);

I have an input with an amount inside, it either comes from the backend, or the user manually enters the amount
There is also a block with the EUR currency.

How can I make the block with the EUR currency move dynamically to the right, based on the symbols entered by the input

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

        <Wrapper className={wrapClassName}>
            <div className='input_content_wrapper'>
                <div className='input_content'>
                    <h4 className='title'>{title}</h4>
                    <label className="input_wrapper">
                        <input
                            placeholder='0'
                            {...rest}
                            value={value}
                            type="text"
                            className={cn('input', { error: Boolean(error) })}
                            onBlur={handleBlur}
                            onChange={type !== 'text' ? handleChange : (e: any) => onChange(e.target.value)}
                    
                        />
                        {currency && <div className={cn('currency', { error: Boolean(error) })}>{currency}</div>}
                    </label>
                </div>
                {extra && <div className='extra'>{extra}</div>}
            </div>
            {error && <div className='validation'>{error}</div>}
        </Wrapper>

Let’s say I have a category for which I need to pull out the values.

const users = ["user1","user2","user 3"];

The main object structure is

       const userInfo = [
        {"name":"user1", "gender":"female","ageGroup":"millenial", "subjects":["physics","history"], "value": 0.3
        },
        {"name":"user2", "gender":"male","ageGroup":"gen z", "subjects":["physics","history"], "value": 0.3
        },
    {"name":"user1", "gender":"female","ageGroup":"millenial", "subjects":["math","history"], "value": 0.5
        },
{"name":"user3", "gender":"male","ageGroup":"gen a", "subjects":["history","math"], "value": 0.4
        }
        {"name":"user2", "gender":"male","ageGroup":"gen z", "subjects":["physics","math"], "value": 0.7
        },
        
        ];

Now I want to I take a category variable “users” for example, and it should, in the same order of the variable output the value in an array of arrays.
If I pass users, the expected output is:

[
[0.3,0.5],//user1
[0.3,0.7],//user2
[0.4]//user3
]

The order cannot be user 2, and then user 1.

I think this would work best as a function, but I’m open to simple operations as well. If you could explain the code it’d be great so I can learn to do this on my own in the future 🙂

I am currently working on a loaded ifc model that has some custom propeties. I have a search field and my goal is it that the user of my application can enter the custom designator into the field and the element will blink to be identified in the screen.

I managed to implement the search field and the identification of the element. This is the relevant search function:

function performSearchIfc() {
    let searchInput = document.getElementById("uuidsearchinput").value;
    let expressId = designatorToExpressId.get(searchInput);
    let arrayOfParts = loadedFragmentsGroup.data.get(expressId)[0];

    console.log(arrayOfParts);

    for (let i = 0; i < arrayOfParts.length; i++) {
        let partId = arrayOfParts[i];

        let children = loadedFragmentsGroup.children;
        let item = children.find(item => item.id === partId);

        if (!item) {
            console.log("Skipping item: " + partId);
            continue;
        }

        console.log(item);

        (async () => { //Something doesnt work with the colors - scale works
            try {
                let r = item.instanceColor.array[0] + 1 - 1;
                let g = item.instanceColor.array[1] + 1 - 1;
                let b = item.instanceColor.array[2] + 1 - 1;
                let copyOfOrigColor =  new Float32Array([r, g, b]);

                let intenseGreen = new Float32Array([0, 1, 0]);

                while (true) {
                    console.log("Setting color to " + intenseGreen);
                    item.instanceColor.set(intenseGreen);
                    item.scale.set(2.2, 2.2, 2.2);
                    await sleep(1000);
                    console.log("Setting color to " + copyOfOrigColor);
                    item.instanceColor.set(copyOfOrigColor);
                    item.scale.set(1, 1, 1);
                    await sleep(1000);
                }
            } catch (error) {
                console.error(error);
            }
        })();

    }
}

The funny thing is the behaviour of the blinking. My stuff works perfectly fine, the elements that belong to my identifier are found and are adressed perfectly. What works is that i change the scale of the objects, and the color is also set to the bright green. The outputs of the console are as expected:

However, for some reason, resetting the color back to the old color is not working. The elements just stay green.

Can anyone explain this?

EDIT:

Shortly after posting, I noticed that sometimes only parts become colored, then it looks like this:

So this coloring method seems to be unreliable altogether.

I have this weird bug on my website when I try to draw on a canvas. I’m using cameras to “take a picture” of walls and draw them on canvases. I have 4 of these, but for some reason only this canvas is acting weird and I have no idea why. This is how it would look normally. I recently started learning three.js, pls help guys…

Here is the code of how I draw them:

const wallDirections = [
    { position: { x: 0, y: 495, z: 500 }, lookAt: { x: 0, y: 495, z: -1 } },  
    { position: { x: -500, y: 495, z: 0 }, lookAt: { x: 1, y: 495, z: 0 } },   
    { position: { x: 0, y: 495, z: -500 }, lookAt: { x: 0, y: 495, z: 1 } }, 
    { position: { x: 500, y: 495, z: 0 }, lookAt: { x: -1, y: 495, z: 0 } } 
];

wallDirections.forEach(direction => {
    const distanceFromWall = roomSize;
    const verticalFOV = 2 * Math.atan((roomSize / 2) / distanceFromWall) * (180 / Math.PI);
    const wallCamera = new THREE.PerspectiveCamera(verticalFOV, 1, 0.1, 1800);
    wallCamera.position.set(direction.position.x, direction.position.y, direction.position.z);
    wallCamera.lookAt(direction.lookAt.x, direction.lookAt.y, direction.lookAt.z);

    const renderTarget = new THREE.WebGLRenderTarget(1000, 1000);
    wallCameras.push(wallCamera);
    wallTextures.push(renderTarget.texture);
    wallRenderTargets.push(renderTarget);
});

function renderWallPreviews() {
    wallCameras.forEach((camera, index) => {
        renderer.setRenderTarget(wallRenderTargets[index]);
        renderer.render(scene, camera);
        renderer.setRenderTarget(null);
    });
}

function updateWallPreviews() {
    const previewCanvases = getPreviewCanvases();
    const letters = ['A','B','C','D'];
    previewCanvases.forEach((canvas, index) => {
        if (canvas) {
            const context = canvas.getContext("2d");
            const canvasWidth = canvas.width;
            const canvasHeight = canvas.height;

            const width = wallRenderTargets[index].width;
            const height = wallRenderTargets[index].height;
            const pixels = new Uint8Array(width * height * 4); // RGBA format

            // Read the pixels from the render target
            renderer.readRenderTargetPixels(wallRenderTargets[index], 0, 0, width, height, pixels);

            // Manually flip the image data
            const flippedPixels = new Uint8Array(width * height * 4);
            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    const srcIndex = (y * width + x) * 4;
                    const destIndex = ((height - y - 1) * width + x) * 4;

                    flippedPixels[destIndex] = pixels[srcIndex];
                    flippedPixels[destIndex + 1] = pixels[srcIndex + 1];
                    flippedPixels[destIndex + 2] = pixels[srcIndex + 2];
                    flippedPixels[destIndex + 3] = pixels[srcIndex + 3];
                }
            }

            // Create ImageData from the flipped pixel buffer
            const imageData = new ImageData(new Uint8ClampedArray(flippedPixels), width, height);

            // Create an off-screen canvas to resize the image data
            const offScreenCanvas = document.createElement('canvas');
            offScreenCanvas.width = width;
            offScreenCanvas.height = height;
            const offScreenContext = offScreenCanvas.getContext('2d');

            // Draw ImageData onto the off-screen canvas
            offScreenContext.putImageData(imageData, 0, 0);

            // Calculate aspect ratios for resizing
            const imgAspectRatio = width / height;
            const canvasAspectRatio = canvasWidth / canvasHeight;

            let renderWidth, renderHeight;
            if (imgAspectRatio > canvasAspectRatio) {
                renderWidth = canvasWidth;
                renderHeight = canvasWidth / imgAspectRatio;
            } else {
                renderHeight = canvasHeight;
                renderWidth = canvasHeight * imgAspectRatio;
            }

            // Clear the canvas before drawing
            context.clearRect(0, 0, canvasWidth, canvasHeight);

            // Center the resized image on the canvas
            const offsetX = (canvasWidth - renderWidth) / 2;
            const offsetY = (canvasHeight - renderHeight) / 2;

            // Draw the resized image from the off-screen canvas onto the main canvas
            context.drawImage(offScreenCanvas, 0, 0, width, height, offsetX, offsetY, renderWidth, renderHeight);
            context.font = "bold 30px Arial";
            context.fillStyle = "white";
            context.fillText(letters[index], 10, 40);
        }
    });
}

I want to create a reusable component using NextJs and tailwind where information will be fetched from an api and a map function will be used to display into a two column staggered layout. On the right hand side column the divs should start at the middle of the left hand side div and the left hand side div should start at the end of the right hand side div and so on.

I have achieved this layout with grid but I am unsure if my code for this layout is best practice. Please help.

 <div className="grid grid-cols-2 w-full justify-items-center">
          {array.map((value, index) => (
            <div
              key={index}
              className={`${
                index % 2 === 0
                  ? index === 0
                    ? "mt-0"
                    : ""
                  : "mt-64"
              } 
               bg-white px-4 pb-5 flex flex-col justify-between items-center font-medium text-sm tablet:text-[1.0625rem] w-[60%] largeMobile:w-[377px] pc:h-[500px] pc:w-[600px] text-justify`}
            >
              **Content**
            </div>
          ))}
        </div>

I’m learning about JavaScript’s Promise function and I expect to run the following in sequence:

• Do_System_Refresh(); –> In this function, I call the AJAX function within System_Refresh() for some purposes.
• Do_Refresh_UI();

I tried the following, but I encountered an exception: Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received.

async function Do_System_Refresh()
{
 let p = new Promise(function(Do_Refresh) {
     Do_Refresh_UI();
 });

 await System_Refresh();
}

async function System_Refresh()
{
   call ajax here
}

function Do_Refresh_UI()
{
   alert('here do refresh called');
} 

What did I do wrong?

I need advice, many thanks in advance.

I’am trying to call this API
https://cwe-api.mitre.org/api/v1/cwe/weakness/all
from node.js server, this suppose to get data of 8MB, However I get this error

Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20) { errno: -4077, code: ‘ECONNRESET’, syscall: ‘read’ }

I have tried to make timeout 5 min and using Axios but nothing seems to work, However when I use postman to send this Requests it fetch the request in about 2.5 sec without any problem.

 const sendHttpRequest = async (method, url, timeout = null) => {
 const https = require('https');
        return new Promise((resolve, reject) => {
            const agent = new https.Agent({
                keepAlive: true,
                maxSockets: 100
            });
            const options = {
                method: method,
                timeout: timeout,
                agent: agent
            };
            const req = https.request(url, options, (res) => {
                let data = '';
                // Handle incoming data
                res.on('data', (chunk) => {
                    data += chunk;
                });
                // Resolve the promise with the full data once the response ends
                res.on('end', () => {
                    resolve(data);
                });
            });
            req.on('error', (error) => {
                reject(error);
            });
            req.on('timeout', () => {
                reject(new Error('Request timed out'));
            });
            req.end();
        });



 Using Service 

const cweThreatArrayDbURL = 'https://cwe-api.mitre.org/api/v1/cwe/weakness/all';

let apiData = sendHttpRequest("GET", cweThreatArrayDbURL, (30*1000))
    .then((data)=> console.log('response', data))
    .catch(err => console.log(err));

I’m building a NestJS application where users upload multiple files via an API. These files are uploaded to an S3 bucket, but the upload process takes time, so I decided to use BullMQ to process the uploads in the background. This way, the client doesn’t have to wait for the S3 upload. Problem: The files are uploaded as Buffer objects, and I add them to the queue as part of a job. However, when passing these Buffer objects through Redis (via BullMQ), they are automatically converted into JSON, which results in the following format:

{
  type: 'Buffer',
  data: [137, 80, 78, 71, 13, ...]
}

In the worker, I have to manually recreate the buffer from this JSON object using:

const buffer = Buffer.from(job.data.file.data);

This works, but I’m wondering if it’s the best practice for handling binary data in BullMQ. I’m especially concerned about the efficiency of storing and retrieving large file buffers in Redis. My Requirements: I don’t want the client to wait for the file to be uploaded to S3. The client uploads multiple files, and I want the API to respond quickly after receiving the files, while the actual file upload happens in the background.

My Requirements:

• I don’t want the client to wait for the file to be uploaded to S3.
• The client uploads multiple files, and I want the API to respond quickly after receiving the files, while the actual file upload happens in the background.

Current Implementation:

• Client uploads files: The client sends multiple files to the API.
• Files are received as Buffers: The server temporarily stores the Buffer and adds it to a BullMQ job.
• Recreate Buffers in Worker: On the worker side, I manually recreate the Buffer using Buffer.from() from the JSON data before uploading to S3.

My Questions:

• Is recreating the Buffer from JSON data the most efficient way to handle binary data in BullMQ?
• Are there any performance concerns with storing large buffers in Redis as JSON (e.g., increased memory usage or serialization overhead)?
• Is there a better approach that keeps the client from waiting while efficiently handling the file upload to S3 in the background?

Any insights, recommendations, or best practices would be appreciated!

I’m working on a SAMLResponse generator in JavaScript without using server-side solutions.
The response is generated, but the signing process seems to fail, as I get the following error:
XMLJS0013: Cryptographic error: Invalid digest for URI '#_n1rwnf4r2'. Calculated digest is * but the xml to validate supplies digest *
I’m using the following libraries to handle the signature and digest:
jsrsasign.js
forge.js
Here is the part of my code responsible for signing the response:

const canonicalizedAssertion = canonicalize(assertion);
const digestValue = generateDigestValue(canonicalizedAssertion);

let signedInfo = `
<SignedInfo xmlns="http://www.w3.org/2000/09/xmldsig#">
    <CanonicalizationMethod Algorithm="http://www.w3.org/TR/2001/REC-xml-c14n-20010315"/>
    <SignatureMethod Algorithm="http://www.w3.org/2001/04/xmldsig-more#rsa-sha256"/>
    <Reference URI="#_${assertionID}">
        <Transforms>
            <Transform Algorithm="http://www.w3.org/2000/09/xmldsig#enveloped-signature"/>
            <Transform Algorithm="http://www.w3.org/2001/10/xml-exc-c14n#"/>
        </Transforms>
        <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"/>
        <DigestValue>${digestValue}</DigestValue>
    </Reference>
</SignedInfo>`;

const canonicalizedSignedInfo = canonicalize(signedInfo);
const signatureValue = generateSignature(canonicalizedSignedInfo);

That will added to the signature:

let signedAssertion = assertion.replace('</saml2:Assertion>', `
    <Signature xmlns="http://www.w3.org/2000/09/xmldsig#">
        ${signedInfo}
        <SignatureValue>${signatureValue}</SignatureValue>
        <KeyInfo>
            <X509Data>
                <X509Certificate>${certificateStr.replace(/-----BEGIN CERTIFICATE-----/g, "")
            .replace(/-----END CERTIFICATE-----/g, "")
            .replace(/n/g, "")}</X509Certificate>
            </X509Data>
        </KeyInfo>
    </Signature>
</saml2:Assertion>`);

Here’s how I canonicalize the XML and generate the digest:

function canonicalize(xmlString) {
    return xmlString.replace(/ss+/g, ' ').trim();
}

function generateDigestValue(content) {
    const sha256 = forge.md.sha256.create();
    sha256.update(content, 'utf8');
    return forge.util.encode64(sha256.digest().bytes());
}

Does anyone have experience with this issue? How can I ensure the digest matches correctly? Any help would be appreciated!

When dragging things on the edge of an overflowing page, the page will start scrolling. How to prevent this behavior with native browser functions / styling? It’s OK to work only on Firefox. (I’m writing some userChrome.js script)

For example, open www.wikipedia.org, when there is a vertical scrollbar (which the full page size is larger than the viewport, aka overflowing), if you drag a file from desktop, folder, or whatever onto the top or bottom edge of the viewport, the page will start scrolling. I want to prevent that.

I’ve tried calling event.preventDefault() on the dragover event, but it does not work. Using overflow:hidden can stop it, but I need the page to be scrollable (at least visually). I’m thinking to create a box that with 0 width but only a scrollbar, then synchronize the scroll behavior of them to fake the users, but I’m wondering is there an elegant way.

I’m facing an issue where the UI freezes and the js FPS drops significantly during API calls in my React Native app (using MobX for state management). Despite setting isLoading in MobX, the UI doesn’t update because of the freeze. Interestingly, the app works smoothly on iOS with no such UI blocking.

What I’ve tried so far:

1. useCallback and useMemo: Optimized functions and memoized values to prevent unnecessary re-renders.
2. Lazy loading: Attempted to load components and data only when necessary to minimize initial load time.
3. FlatList optimization: Used keyExtractor, getItemLayout, and initialNumToRender to improve FlatList performance.
4. runInAction in MobX: Ensured state changes are wrapped in runInAction to batch updates and reduce observable changes.
5. Disabled Hermes: Disabled Hermes engine, but no significant improvement.
   Enabled IPv6 in server: Tweaked server settings, ensuring faster connection times for mobile clients.
6. Tested in release mode with console.log removed using babel-plugin-transform-remove-console.
7. Used Pure Components

Despite these, the UI still freezes during the API calls. Below is the code that performs the API calls within useEffect, and MobX enables isLoading. However, the UI doesn’t reflect this update due to the freeze:

    async initializeHomeScreen() {
    console.log('Initializing Home Screen');
    console.time('Home Screen Initialization');

    // API call to load nearest restaurants
    await this.root.restaurantStore.loadAndRefreshNearestRestaurants(true);
    
    // Looping through Experience types to load data length - 5
    for (const exp of Object.values(ExperienceType)) {
      await this.root.restaurantStore.loadAndRefreshExpRestaurants(exp, true);
    }
    
    // API calls to load favorite and popular restaurants
    await this.root.restaurantStore.loadAndRefreshFavoriteRestaurants(true);
    await this.root.restaurantStore.loadAndRefreshPopularRestaurants(true);
    
    console.timeEnd('Home Screen Initialization END');

}

Hi I’m new with react and I have some problem to build my website for macOS and IOS.

I created a website in react three, when I upload the project to my domain I have problems with iOS and macOS only on safari . I created div with iframes and images (with react-three/drei) inside and in safari It loads the files but doesn’t display them, also it’s strange that the contents appear only after moving the scene with orbit control. In the console there are no error messages.

From the same Mac if I open with Chrome or firefox there are no problems.

here is the website link: https://martarobiglio.com

Do you have any suggestions?

I tried to add this to my <canvas>

gl={{ powerPreference: 'high-performance', antialias: false }}

and loading={‘lazy’} in my iframe and images

I have editable table:

<div id="myTable">
   <b-table class="overflow-auto" :items="filtered" :fields="visibleFields" :filter="filter">
        <template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="{ item }">
            <b-input v-model="item[field.key]" placeholder="--" @@change="update" />
        </template>
    </b-table>
</div>

Vue script(cdn)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>


        new Vue({
            el: "#myTable",
            computed: {
                editableFields() {
                    return this.fields.filter(field => field.editable);
                },
                visibleFields() {
                    return this.fields.filter(field => field.visible)
                }
            },
            data: {
                filter: '',
                filtered: JSON.parse(`@Html.Raw(Model.SportBudgetsJson)`),
                fields: [
                    { key: 'Id', label: 'Id', visible: false },
                    { key: 'Field1', label: 'Field1', editable: true, visible: true, class: "percentageFormat pValue", thStyle: { width: "5%" } },
                    { key: 'Field2', label: 'Field2', editable: true, visible: true, class: "moneyFormat mValue", thStyle: { width: "10%" } },

                ]
            }
        });
...

And js functions for formatting values in the table:

 function formatValue(value, event, isPercent) {
     ... // returns value in ###.##% or $###,###.## format
     return formattedValue;
 }

 function copyValue(element, isPercent) { //update in % value if $'s value have changed and vise versa
     var selector = isPercent ? '.mValue' : '.pValue';
     var input = $(element).parent('td').parent('tr').children(selector).first().children('input');
     var value = element.value.replace(/[^d]+/g, '');
     value = converValue([value.slice(0, -2), '.', value.slice(-2)].join(''), isPercent);
     $(input).val(formatValue(value, 'input', !isPercent));
 }

 function converValue(value, isPercent) {
     value = parseFloat(value);
     var totalBudget = parseFloat(`@Model.TotalBudget`);
     if (isPercent) {
         return parseFloat(totalBudget * (value / 100)).toFixed(2);
     }
     else {
         return parseFloat(value / totalBudget * 100).toFixed(2);
     }
 }
     
 $(document).ready(function () { // apply format events
     $('.moneyFormat input').each(function (index, el) {
         $(el).val(formatValue(el, "input", false));
         $(el).on("input change", function (event) {
             $(this).val(formatValue($(this).val(), event, false));
             if ($(el).parent('td').first().hasClass('mValue'))
                 copyValue(this, false);
         });
     });

     $('.percentageFormat input').each(function (index, el) {
         $(el).val(formatValue(this, "input", true));
         $(el).on("input change", function (event) {
             $(this).val(formatValue($(this).val(), event, true));
             if ($(el).parent('td').first().hasClass('pValue')) {
                 copyValue(this, true);
             }
         });
     });
 });

when I use $(input).val(formatValue(value, ‘input’, !isPercent)) value in the table updates, but v-model not.
but when I type the value to input manually – v-model updates

I want to implement real-time values update:
Total sum $100.00
Field1: changes from 12.00% to 13.00% so Field2 automaticly changes from $12.00 to $13.00

Total sum $100.00
Field2: changes from $50.00 to $45.00 so Field1 automaticly changes from 50.00% to 45.00%

The values should calculates and pastes to their inputs

How can I update v-model to inputs values?