Blancer.com Tutorials and projects

Failed to save ‘main.jsx’: Insufficient permissions. Select ‘Retry as Admin’ to retry as administrator.

I tried to ‘Run as administrator’ but it still cannot save. All the files cannot be saved therefore I cannot continue programming. Please help, how do I get rid of this?

I am using class based react application..

From the main component i was passing the data as chartdata and i was using real time data where data is passing continusly and i need to provide smooth hover and responsive for payoffchart component

Can anyone provide me the code with responsive

PayoffChartComponent.tsx

import Highcharts, { color } from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartMore from 'highcharts/highcharts-more'
import { Button } from 'primereact/button';
import * as math from 'mathjs';
import { Utility } from '../../utils/Utility';
import { Calendar, Checkbox, Dropdown, InputNumber, InputText } from 'primereact';
import { WhatIf } from '../../entity/OptData';
import moment from 'moment';
import { PLCalc } from '../../utils/PLCalc';
import 'highcharts/modules/accessibility';


import * as fs from 'fs';

HighchartMore(Highcharts)
interface Props {
    passedStateData,
    callback,
    callbackShow
}

interface State {
    price;
    farprice;
    IV;
    days;
    finalPrice;
    finalIV;
    finalDays;
}

export class PayoffChartComponent extends React.Component<Props, State> {
    whatif: WhatIf = new WhatIf();

    constructor(props) {
        super(props);

        this.state = {
            price: 0,
            farprice: 0,
            IV: 0,
            days: 0,
            finalPrice: 0,
            finalIV: 0,
            finalDays: 0,
            // spotPrice: this.props.spotPrice
        };

        this.whatif.days = 0;
        this.whatif.IV = 0;
        this.whatif.price = 0;
        this.whatif.allowLegAdjustment = false;
    }


    render() {

        if (this.props.passedStateData.chartData == null) return null;
        if (this.props.passedStateData.legEntityList.length == 0) return null;
        let lastUpdate = this.props.passedStateData?.expiryDataMap[this.props.passedStateData?.selectedExpiryDate]?.lastUpdate;
        let spotPrice = this.props.passedStateData?.expiryDataMap[this.props.passedStateData?.selectedExpiryDate]?.spotPrice;
        if (spotPrice === undefined) return null;

        const { chartData, legEntityList, fundsRequired, selectedsymbol, latestRefreshDate } = this.props.passedStateData;

        // console.log("fundsReq",fundsRequired)




        if (this.whatif.days == 0) {
            let formattedDateTime = new Date(latestRefreshDate);
            formattedDateTime.setSeconds(formattedDateTime.getSeconds() + 1);


            this.whatif.days = formattedDateTime;
            //this.whatif.days = this.props.passedStateData.latestRefreshDate;

        }
        if (this.whatif.days < lastUpdate) {
            let formattedDateTime = new Date(lastUpdate);
            formattedDateTime.setSeconds(formattedDateTime.getSeconds() + 1);

            this.whatif.days = formattedDateTime;
        }


        let arr1 = [];
        let arr2 = [];


        let xAxisData = chartData[0] as Array<number>;
        let len = xAxisData.length;
        const sd = chartData[3]?.sd || 0;
        const farprice = chartData[5]?.farprice || 0;

        // Update whatif days if needed
        if (!this.whatif.days || this.whatif.days < lastUpdate) {
            let formattedDateTime = new Date(lastUpdate);
            formattedDateTime.setSeconds(formattedDateTime.getSeconds());
            this.whatif.days = formattedDateTime;
        }

        // Calculate expiration info
        const legs = legEntityList;
        const allActiveLegs = legs.filter(p => p.enable !== false);
        const allActiveExitedLegs = allActiveLegs.filter(p => p.exited === true);
        const allNotExitedActiveLegs = allActiveLegs.filter(p => !p.exited);
        const leglistActiveStatus = Utility.expiredLegListArrayStatus(allNotExitedActiveLegs);
        const neareastExp = PLCalc.GetEarliestExpiryDateDMY_v2(legs);
        const minExpiry = moment(neareastExp).format('DDMMMYY').toUpperCase();
        const parsedDate = Utility.parseCustomDate(minExpiry);
        const year = parsedDate.getFullYear();
        const month = (parsedDate.getMonth() + 1).toString().padStart(2, '0');
        const day = parsedDate.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}T15:30:00`;
        let isPastDate = new Date(formattedDate) < new Date();

        if (!isPastDate) {
            if (allActiveLegs.length === allActiveExitedLegs.length || leglistActiveStatus === false) {
                isPastDate = true;
            }
        }



        let leftSigma1 = 0;
        let leftSigma2 = 0;
        let rightSigma1 = 0;
        let rightSigma2 = 0;
        if (sd > 0) {
            let sdMul: number = 2 * sd;
            leftSigma1 = parseFloat(spotPrice) - sd;
            leftSigma2 = parseFloat(spotPrice) - sdMul;
            rightSigma1 = parseFloat(spotPrice) + sdMul;
            rightSigma2 = parseFloat(spotPrice) + sd;
        }


        for (let i = 0; i < len; i++) {
            let item1 = [];
            let item2 = [];

            item1.push(chartData[0][i], chartData[1][i]);
            arr1.push(item1);

            item2.push(chartData[0][i], chartData[2][i]);
            arr2.push(item2);
        }


        let options = {
            chart: {
                zoomType: 'xy',
                height: 350,
                spacingBottom: 2,
                spacingTop: 5,
                spacingLeft: 2,
                spacingRight: 2,
            },


            title: {
                text: selectedsymbol,
                margin: 30,
                align: 'center',
                x: 50,
                style: {
                    color: 'black',
                    fontSize: '14px',
                }
            },
            accessibility: {
                enabled: false, // Disables accessibility features
            },
            credits: {
                text: 'iCharts.in',
                href: '/',
                position: {
                    verticalAlign: 'top',
                    y: 25

                },
                style: {
                    fontSize: '13px'
                }
            },

            xAxis: {
                gridLineWidth: 1,
                title: {
                    text: 'Price',
                    style: {
                        fontWeight: 'Bold',
                        color: 'Black'
                    },

                },
                labels: {
                    style: {
                        color: 'black'
                    }
                },

                plotBands: [{
                    color: 'rgba(197, 210, 200,0.1)',
                    from: leftSigma1, // Start of the plot band
                    to: rightSigma1, // End of the plot band
                    label: {
                        text: '-1σ',
                        y: -18,
                        align: 'left',
                        style: {
                            color: '#606060'
                        }
                    }
                }
                    , {

                    color: 'rgba(197, 210, 200,0.1)',
                    fillOpacity: 0.2,
                    from: leftSigma1, // Start of the plot band
                    to: rightSigma1, // End of the plot band
                    label: {
                        text: '+2σ',
                        y: -18,
                        align: 'right',
                        style: {
                            color: '#606060'
                        }
                    }
                },
                {

                    color: 'rgba(197, 210, 200,0.1)',
                    from: leftSigma2, // Start of the plot band
                    to: rightSigma2, // End of the plot band

                    label: {
                        text: '-2σ',
                        // x: 100,
                        y: -18,
                        align: 'left',
                        // rotation: -45,
                        style: {
                            color: '#606060'
                        }
                    }
                },
                {

                    color: 'rgba(197, 210, 200,0.1)',
                    from: leftSigma2, // Start of the plot band
                    to: rightSigma2, // End of the plot band
                    label: {
                        text: '+1σ',
                        // x: 100,
                        y: -18,
                        align: 'right',

                        style: {
                            color: '#606060'
                        }
                    }
                }],
                plotLines: [
                 
                    {
                        color: 'red',
                        fillOpacity: 0.2,
                        lineWidth: 3,
                        dashStyle: 'shortdot',
                        zIndex: 3,
                        value: spotPrice,
                        label: {
                            text: spotPrice,
                            rotation: 0,
                            x: -20,
                            y: 0,
                            style: {
                                fontSize: '11.5px',
                                color: '#606060'
                            }
                        }
                    }
                ],
                crosshair: {
                    label: {
                        enabled: true,

                        padding: 8
                    }
                }
            },

            yAxis: [

                {
                    gridLineColor: 'rgba(50,205,50,0.15)',
                    startOnTick: false,
                    lineWidth: 1,

                    title: {
                        text: 'P/L',
                        style: {
                            fontWeight: 'Bold',
                            color: 'Black'
                        },
                    },
                    labels: {

                        style: {
                            color: 'black'
                        },

                    },
                    crosshair: {
                        label: {
                            enabled: true,
                        },
                        dashStyle: 'longdash',
                        color: 'gray',
                    },

                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: '#aaa',

                    }],


                },
                { // Secondary yAxis

                    gridLineColor: 'rgba(50,205,50,0.15)',

                    lineWidth: 1,
                    startOnTick: false,
                    endOnTick: false,
                    title: {
                        text: '',
                        style: {
                            fontWeight: 'Bold'
                        },
                    },
                    label: {
                        enabled: true,
                    },

                    opposite: true,
                }


            ],

            legend: {
                align: 'right',
                verticalAlign: 'top',

            },
            
            tooltip: {
                useHTML: true, // Allows custom HTML content
                shared: true, // Show shared tooltip
                borderColor: 'grey', // Set border color to grey
                borderWidth: 1, // Set border width for better visibility
                backgroundColor: 'white', // Optional: Set background color to white
                
                formatter: function (this: Highcharts.TooltipFormatterContextObject) {
                    let xaxisPoint: any = this.x;
                    const percentageChange = (((xaxisPoint) / spotPrice) - 1) * 100;
                    const percentageColor = percentageChange > 0 ? '#02d302' : (percentageChange < 0 ? 'red' : 'black');

                    let rupeeSymbol = '₹';

                    return ` 
                    <b>${this.x} (<span style="color:${percentageColor}">${percentageChange.toFixed(2)}%</span>)</b><br/>
                    ${this.points
                            ?.map(
                                point => {
                                    // Round point.y to the nearest integer
                                    const roundedY = Math.round(point.y);

                                    const fundRequired = fundsRequired !== 0.00 || fundsRequired !== 0 ? `(${((roundedY / fundsRequired) * 100).toFixed(2)}%)` : ``;


                                    return `
                        <span style="color:${point.color}">u25CF</span> ${point.series.name}: 
                        <b>${roundedY > 0 ? `<span style="color:#02d302;fontSize:10px;fontFamily: "Helvetica","Arial",sans-serif;">${rupeeSymbol} ${roundedY} ${fundRequired}</span>` :
                                            (roundedY === 0 ? `<span style="color:black;fontSize:10px;fontFamily: "Helvetica","Arial",sans-serif;">${rupeeSymbol} ${roundedY} ${fundRequired}</span>` : `<span style="color:red;fontSize:10px;fontFamily: "Helvetica","Arial",sans-serif;">${rupeeSymbol} ${roundedY} ${fundRequired}</span>`)
                                        } 
                            </b><br/>`;
                                })
                            .join('') || ''}
                `;
                },
                valueDecimals: 2, // Specify decimal places for numbers
            },


            series: [{
                showInLegend: false,
                type: 'line',
                name: 'T+0',
                data: arr1,
                color: 'rgb(0,0,255)',
                fillOpacity: 0.1,
                connectNulls: true,
                lineWidth: 1.5,
                dashStyle: 'shortdot',
                marker: {
                    enabled: false
                }
            }, {
                type: 'area',
                name: 'Expiry',
                fillOpacity: 0.1,
                showInLegend: false,
                negativeColor: 'rgb(255,127,127)',
                color: 'rgb(50,205,50)',
                data: arr2,
                connectNulls: true,
                lineWidth: 1.5,
                marker: {
                    enabled: false
                }
            },
            ]

        };

        return <div key={'payoffChart_' + selectedsymbol + this.props.passedStateData.selectedExpiryDate}>
            <div style={{ display: this.props.passedStateData.chainShowed ? 'none' : 'flex' }} className='alignedLeft' >Option Chain<img src='./show_left.svg' onClick={this.props.callbackShow}></img></div>
            <div className='border-chat'>
                <HighchartsReact highcharts={Highcharts} options={options} containerProps={{ style: { hight: '100%', width: '100%' } }} />
            </div>
            <div>
                <div className="main-check">
                    <div className='checkbox-allow'>
                        <Checkbox inputId="allowId"
                            disabled={isPastDate}
                            checked={this.whatif.allowLegAdjustment} onChange={(e) => {
                                this.whatif.allowLegAdjustment = e.checked;
                                this.whatif.IV = 0;

                                this.props.callback(this.whatif);
                            }} />
                        {/* <label htmlFor="allowId">Allow  Leg IV Adjustments</label> */}
                        <label style={{ color: isPastDate ? 'grey' : 'black' }} htmlFor="allowId">Allow Leg IV Adjustments</label>

                    </div>

                    <div className="leglot-dropdown">
                        <InputNumber
                            disabled={isPastDate}
                            value={this.whatif.price}

                            onInput={(e) => {
                                let inputValue = e.value || e.target?.value || "";

                                const newValue: number = inputValue;
                                const oldValue: number = this.whatif.price;
                                const isIncrement = newValue > oldValue;

                                this.whatif.price = newValue;
                                let fp = this.getFarprice(farprice, isIncrement, newValue)

                                this.whatif.farprice = fp;
                                this.setState({ price: newValue, farprice: fp },
                                    () => this.props.callback(this.whatif))
                            }}


                            onValueChange={(e) => {
                                // console.log(spotPrice)

                                const newValue: number = e.value;
                                const oldValue: number = this.whatif.price;
                                const isIncrement = newValue > oldValue;

                                this.whatif.price = newValue;
                                let fp = this.getFarprice(farprice, isIncrement, newValue)

                                this.whatif.farprice = fp;
                                // console.log(this.whatif)
                                // prefix={`${spotPrice}`}
                                // prefix={`${spotPrice.toFixed(2)}`}
                                // prefix = {`${spotPrice.toFixed(2)} (0.1%)`}

                                this.setState({ price: newValue, farprice: fp },
                                    () => this.props.callback(this.whatif))
                            }


                            } showButtons
                            buttonLayout="horizontal" step={0.1} prefix={`${spotPrice}   `} max={20} min={-20}
                            decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="%"
                        />
                    </div>


                    <div className="leglot-dropdown">
                        <Calendar value={this.whatif.days}
                            disabled={isPastDate}
                            onChange={(e) => {
                                // console.log(this.whatif.days)
                                // console.log(e.value)
                                // console.log(formattedDate)

                                this.whatif.days = e.value;
                                // this.setState({ days: e.value },
                                //     () => this.props.callback(this.whatif))
                                // console.log(this.whatif.days);

                                this.setState({ days: e.value }, () => this.props.callback(this.whatif))

                            }}

                            //`${year}-${month}-${day}

                            //  showTime hourFormat="12" dateFormat="dd/mm/yy" maxDate={new Date(formattedDate)} minDate={new Date()}/>

                            showTime hourFormat="12" dateFormat="dd/mm/yy" maxDate={new Date(formattedDate)} minDate={new Date()} />
                    </div>


                    <div className="leglot-dropdown" >
                        <InputNumber value={this.whatif.IV} disabled={this.whatif.allowLegAdjustment || isPastDate} onValueChange={(e) => {
                            this.whatif.IV = e.value;
                            // console.log(this.whatif)
                            this.setState({ IV: e.value },
                                () => this.props.callback(this.whatif))
                        }
                        }
                            onInput={(e) => {
                                let inputValue = e.value || e.target?.value || "";

                                this.whatif.IV = inputValue;
                                // console.log(this.whatif)
                                this.setState({ IV: inputValue },
                                    () => this.props.callback(this.whatif))
                            }}
                            showButtons
                            buttonLayout="horizontal" step={1} prefix='IV  ' max={20} min={-20}
                            decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success"
                            incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="%" />
                    </div>
                    <div>
                        <Button label="Reset" className="p-button-primary smallButton" onClick={() => {
                            this.setState({
                                price: 0,
                                IV: 0,
                                days: 0,
                                finalPrice: 0,
                                finalIV: 0,
                                finalDays: 0
                            }, () => {

                                // console.log(this.props.passedStateData.lastUpdate)
                                let formattedDateTime = new Date(lastUpdate);


                                formattedDateTime.setSeconds(formattedDateTime.getSeconds() + 1);

                                // console.log('formattedDateTime reset',formattedDateTime)
                                this.whatif.days = formattedDateTime;
                                // this.whatif.days = this.props.passedStateData.markethours;
                                this.whatif.price = 0;
                                this.whatif.farprice = farprice;
                                this.whatif.IV = 0;
                                this.whatif.allowLegAdjustment = false;
                                legEntityList.forEach(p => p.iv_adjustment = null);
                                let Reset = true;
                                // this.props.callback(this.whatif,this.props.passedStateData.legEntityList,Reset)
                                if (this.props.passedStateData.whatif !== null) this.props.callback(this.whatif, legEntityList, Reset)

                            });
                        }} />
                    </div>
                </div>



            </div>
        </div>
    }


    getFarprice = (farprice, isIncrement, newPrice) => {
        let farPrice: any;
        if (isIncrement) {
            // alert()
            farPrice = parseFloat(farprice + (farprice * newPrice) / 100).toFixed(2);
        } else {
            farPrice = farprice - (farprice * newPrice) / 100;
        }

        return farPrice;

    }


    GetFarExp = (legs) => {

        let mexpdt = '';

        legs.forEach(optleg => {
            let legdt: string = optleg.Expiry
            if (mexpdt == "" || Utility.parseFormattedCustomDate(legdt) > Utility.parseFormattedCustomDate(mexpdt)) {
                mexpdt = optleg.Expiry;
            }
        });

        // console.log(mexpdt);

        return mexpdt;
    }
}

Could someone help me correct this error.

I was hoping to install and use tailwindcss in my project

npx tailwindcss init

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:UsersPC lenovoAppDataLocalnpm-cache_logs2025-05-29T07_28_09_340Z-debug-0.log

I’m learning JavaScript and I’ve seen both == and === used in conditionals. They seem to do something similar, but I’m not sure what the exact difference is.

For example:

console.log(5 == ‘5’); // true
console.log(5 === ‘5’); // false

Why does == return true and === return false in this case? When should I use each one?

Ive been writing a tampermonkey userscript to convert an ebook to a pdf in google play books. However, whenever i try to use the jsPDF object, it throws an error. This is my the part of the code that is throwing an error:

// ==UserScript==
// @name         tampermonkey userscript
// @namespace    http://tampermonkey.net/
// @version      2025-05-26
// @description  try to take over the world!
// @author       You
// @match        https://play.google.com/books/*
// @match        *://*.googleusercontent.com/*
// @match        *://books.google.com/ebooks/reader*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @require      https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @grant        none
// @run-at       document-idle
// ==/UserScript==
/* global jsPDF */

(function() {
    'use strict';

    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    doc.save("example.pdf");
})();

Frankly, I don’t even know if i am supposed to do it like this as i just asked chatgpt for this part.
I am getting this error message in my console:
Console Error Message

And right after that this:
Console Error Message

So, from the console messages, as well from the tampermonkey extension ui, I can see that my script is also being executed twice for some reason? Is jsPDF causing this?

As per chatGPT’s instructions, ive tried injecting the script tag directly into the HTML as well, tried to use just jspdf.min.js instead of jspdf.umd.min.js in my code and ignored the const { jsPDF } = window.jspdf part, tried making a global alias by window.jsPDF = window.jspdf.jsPDF. But all of them say that either jsPDF is an undefined object or that cannot destructure property jsPDF as window.jspdf is undefined.

Can someone point out the mistake im making?

I am running windshaft-cartodb with redis inside Kubernates. windshaft runs with four replicas (pods), however we have been having problems with the millstone.js library for a long time, in particular when restarting kubernates during the first calls to windshaft an error is always returned:

“ENOENT: No such file or directory, rename ‘/tmp/millstone/cache/41fca2a8-072-myimage.svg.download’ -> ‘/tmp/millstone/cache/41fca2a8-072-myimage.svg'”

The error occurs 4 times each time.

I have tried several times to debug and log internally but I can’t find the source of the error.

I have also tried to run windhshaft on a single pod but nothing has changed and I still have the error.

I want to create a brush with a hardness option like in PhotoShop.

I tried to use ctx.createRadialGradient to create a radial transparent circle, but the result was not satisfactory.

function createBrush(size, hardness) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  [canvas.width, canvas.height] = [size, size];

  const outerRadius = size / 2;
  const innerRadius = outerRadius * (1 - hardness); // how to apply the hardness option?
  const x = size / 2;
  const y = size / 2;
  const gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
  gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
  gradient.addColorStop(1, "rgba(0, 0, 0, 0)");

  ctx.fillStyle = gradient;
  ctx.clearRect(0, 0, size, size);
  ctx.beginPath();
  ctx.arc(x, y, outerRadius, 0, 2 * Math.PI);
  ctx.fill();

  return canvas;
}

bursh with hardness

drawing

My question is how to create a hardness effect similar to the brush in PhotoShop?

PS: photopea and onemotion implement similar brush hardness, but they are not open source, so I don’t know how they are made.

My example:

function createBrush(size, hardness) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  [canvas.width, canvas.height] = [size, size];

  const outerRadius = size / 2;
  const innerRadius = outerRadius * (1 - hardness); // how to apply the hardness option?
  const x = size / 2;
  const y = size / 2;
  const gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
  gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
  gradient.addColorStop(1, "rgba(0, 0, 0, 0)");

  ctx.fillStyle = gradient;
  ctx.clearRect(0, 0, size, size);
  ctx.beginPath();
  ctx.arc(x, y, outerRadius, 0, 2 * Math.PI);
  ctx.fill();

  return canvas;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let brush, isDrawing, lastPoint;

function drawBrush(x, y) {
  ctx.drawImage(brush, x - brush.width / 2, y - brush.height / 2);
}

canvas.onmousedown = function (e) {
  brush = createBrush(50, 1);
  isDrawing = true;
  lastPoint = { x: e.offsetX, y: e.offsetY };
  drawBrush(lastPoint.x, lastPoint.y);
};

canvas.onmousemove = function (e) {
  if (!isDrawing) return;

  const currentPoint = { x: e.offsetX, y: e.offsetY };
  const dist = distanceBetween(lastPoint, currentPoint);
  const angle = angleBetween(lastPoint, currentPoint);

  for (let i = 0; i < dist; i++) {
    const x = lastPoint.x + Math.sin(angle) * i;
    const y = lastPoint.y + Math.cos(angle) * i;
    drawBrush(x, y);
  }

  lastPoint = currentPoint;
};

canvas.onmouseup = function () {
  isDrawing = false;
};

function distanceBetween(point1, point2) {
  return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
  return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}

canvas {
  border: #000 solid 1px;
}

<canvas id="canvas" width="400" height="300"></canvas>

I’m building a browser-based screen recorder using Next.js. It records the screen and webcam simultaneously. I use canvas.captureStream() for rendering and MediaRecorder to export the video. Audio from both the screen and background music is added using captureStream().

In the preview, everything works as expected — both screen and webcam play smoothly. But during export, the webcam video either blinks, goes black, or desyncs.

What I’ve tried so far:

• Using MediaRecorder on a canvas that renders screen + webcam
• Syncing webcamVideo.currentTime with video.currentTime
• Using waitForSeek() and calling play() on the webcam element
• Rendering frame-by-frame using requestAnimationFrame
• A frame-by-frame processing approach (also failed)

Here’s a simplified version of my export code:
https://onecompiler.com/typescript/43k4htgng

What could be causing the webcam stream to behave like this only during export?
Are there known limitations with MediaRecorder or captureStream() when combining multiple media sources?

Looking for insights from anyone who has handled browser-based video compositing or webcam stream export.

enter image description here

authController.js under backend> controllers file 

const User = require('../models/User');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

exports.register = async (req,res) => {
  try {
    const {username, email, mobile, password, role} = req.body;

    // Hash password
    const salt = await bcrypt.genSalt(10);
    const hashed = await bcrypt.hash(password, salt);
    
    // Save user
    const user = new User({username, email, mobile, password: hashed, role});
    await user.save();

    res.status(201).json({message: "User registered"});
  } catch (err) {
    res.status(500).json({error:err.message});
  }
};

exports.login = async (req, res) => {
  try {
    const {email, password} = req.body;
    const user = await User.findOne({ email });
    if (!user) return res.status(404).json({ message: "User not found" });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(401).json({ message: "Wrong password" });

    const token = jwt.sign({id: user._id, role: user.role }, process.env.JWT_SECRET, { expiresIn: '2d'});
    res.status(200).json({token, user: { id: user._id, username: user.username, role: user.role } });
  } catch (err) {
    res.status(500).json({ rror:err.message});
  }
};

pls help with my auth controller code if possible and a suggested frontend code site for my register.jsx using react.js cause i have real issues man and i only learnt the basics of react only

im trying to Learn but is kind of hard cant find a good website do you know?

I’m automating a shipping form using Selenium and running into an issue where clicking a button fails because of a persistent overlay. The application uses jQuery UI for modals and overlays.

The error I’m getting is:

Message: element click intercepted: Element <a class="..."> is not clickable at point (...). Other element would receive the click: <div class="ui-widget-overlay ui-front"></div>

Despite trying to remove this overlay and dialog using JavaScript, the click is still blocked or doesn’t perform the desired action. Sometimes it looks like the page resets or the browser quits. Other times, I get a JavaScript error like:

javascript error: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions...

Or:

Message: element not interactable

Here’s what I tried:

# 1. Using Selenium's click directly
try:
    driver.find_element(By.ID, 'ctl00_CPPC_ConfirmMessage_OSNR_btnOk').click()
except Exception as e:
    print(f"❌ Failed: {e}")

Fails with element click intercepted.

# 2. Removing overlay and modal manually
try:
    driver.execute_script("""
        let overlay = document.querySelector('.ui-widget-overlay');
        let dialog = document.querySelector('.ui-dialog');
        if (overlay) overlay.remove();
        if (dialog) dialog.remove();
    """)
    time.sleep(1)
except Exception as e:
    print(f"❌ Overlay remove failed: {e}")

Still gets intercepted. Sometimes the browser shuts down instantly.

# 3. Clicking via JavaScript after removal
try:
    driver.execute_script("""
        const btn = document.getElementById('ctl00_CPPC_ConfirmMessage_OSNR_btnOk');
        if (btn) btn.click();
    """)
except Exception as e:
    print(f"❌ JavaScript click failed: {e}")

Sometimes this throws Cannot read properties of null (reading 'click').

# 4. Forcing the postback directly
try:
    driver.execute_script("DoButtonPostBack('ctl00$CPPC$btnShip');")
except Exception as e:
    print(f"❌ Postback failed: {e}")

This can reload or completely close the page.

# 5. Disabling jQuery dialog itself
try:
    driver.execute_script("""
        if (window.jQuery) {
            jQuery.fn.dialog = function() { return this; };
        }
    """)
except Exception as e:
    print(f"❌ jQuery disable failed: {e}")

Still no effect. Overlay blocks action.

Debug Insight:

I logged success messages after each script like this:

print("✅ Removed overlay")
print("✅ Clicked OK button")

But sometimes it prints these and still does nothing visible, or instantly quits. I even tried combinations of waiting and interacting. Example:

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.ID, 'ctl00_CPPC_ConfirmMessage_OSNR_btnOk'))).click()

Still failed.

My environment:

Chrome: 136.0.7103.114
Selenium: 4.x
Python: 3.11+
chromedriver used

What I need help with:

1. A reliable way to remove the overlay and modal dialog completely.

2. A working method to click the OK and Ship buttons afterward.

3. Prevent the browser from closing or resetting after running the script.

Any help would be appreciated. I’ve exhausted all reasonable ways I know. If you’ve dealt with persistent overlays or jQuery dialogs, your suggestions are welcome!

Note: English is not my first language, so some parts of this post were helped by AI to better explain my issue. I’ve done my best to make everything clear.

¿Cuál seria la mejor aplicación o lenguaje para aprender?

trate de empezar por mi cuenta pero no supe por donde empezar la verdad, por lo que me gustaría empezar de la mejor manera y tambien me gustaria saber consejos y tips

Intl.DisplayNames can’t recognize certain languages when running on mobile.

Running the following code:

const displayNames=new Intl.DisplayNames(["en-US"], {type:"language"})
console.log(displayNames.of("bs-BA"))
console.log(displayNames.of("ps-AF"))

I see that it works properly on desktop but not on mobile. On mobile, it outputs “bs (Bosnia & Herzegovina)” instead of “Bosnian (Bosnia & Herzegovina)”.

I used Chrome to run both snippets.
My desktop Chrome version is 136.0.7103.114.
My mobile Chrome version is 136.0.7103.127.

I have a folder with this structure:

root
|- folderA
|- folderB
|- folderC

I want to apply two sets of rules to eslint to each folderA and folderB and completely skip folderC. so I have this:

export default defineConfig([
    {
        files: ["folderA/**/*.{vue,ts}", "folderB/**/*.{vue,ts}"],
        ignore: ["folderC"],
    },
    eslintPluginPrettierRecommended,
    {
        files: ["folderA/**/*.{vue,ts}"],
        settings: {
            "vue/setup-compiler-macros": true,
            "import/parsers": {
                "@typescript-eslint/parser": [".ts", ".tsx"],
            },
        },
        plugins: {
            vue: fixupPluginRules(vuePlugin),
            "@typescript-eslint": fixupPluginRules(typescriptEslint),
        },
        languageOptions: {
            globals: {
                ...globals.browser,
            },
            parser: vueParser,
            parserOptions: {
                ecmaVersion: "latest",
                extraFileExtensions: [".vue"],
                parser: tsParser,
                sourceType: "module",
                ecmaFeatures: {
                    jsx: true,
                },
            },
        },
        extends: ["plugin:prettier/recommended"],
        rules: {
            "prettier/prettier": [
                "error",
                {
                    tabWidth: 2,
                },
            ],
            eqeqeq: "error",
        },
    },
    {
        files: ["folderB/**/*.{vue,ts,tsx}"],
        extends: ["plugin:prettier/recommended"],
        settings: {
            "vue/setup-compiler-macros": true,
            "import/parsers": {
                "@typescript-eslint/parser": [".ts", ".tsx"],
            },
        },
        plugins: {
            vue: fixupPluginRules(vuePlugin),
            "@typescript-eslint": fixupPluginRules(typescriptEslint),
        },
        languageOptions: {
            globals: {
                ...globals.browser,
            },
            parser: vueParser,
            parserOptions: {
                ecmaVersion: "latest",
                extraFileExtensions: [".vue"],
                parser: tsParser,
                sourceType: "module",
                ecmaFeatures: {
                    jsx: true,
                },
            },
        },
        rules: {
            "prettier/prettier": [
                "error",
                {
                    tabWidth: 4,
                },
            ],
        },
    },
]);

However when I execute the above, things in folderC still get executed. My theory is eslintPluginPrettierRecommended is not bound with the files and ignore defined right before it.

The question is how can I achieve my goal to have different rules for folderA and folderB while completely ignore folderC?