Category: javascript

I am looking to create a web app which will launch a web page via puppeteer in an iframe and allow me to interact with it directly through buttons in the main page UI (not the iframe page).

Let me try to explain a little more clearly.

I audit web sites a lot for my job (I work in compliance) and currently use the EDPS’s tool called Website Evidence Collector. I recently started to look at the EDPB’s Website Audit Tool which is based on WEC but is contained in an electron app.

This allows me to interact with the page directly within the Electron app for doing things like taking screenshots, click on buttons, enter user credentials etc. but the downside is that it is a desktop app so it is not particularly scaleable.

I want to reproduce the same abilities in the browser via a web app so that my team can use the same tool with all the audit data being saved to a central database instead of local JSON files but I cannot find any information on controlling Puppeteer via a web based GUI (other than running it in non-headless mode which would simply run the puppeteer processes in a new chrome instance rather than embedding it into a web app and being able to pipe processes/commands directly into puppeteer).

So I am just curious if anyone has tried this and what level of success they might have had? My plan is to create such a tool for my work but then also to release it publicly so others can do their own audits and file legal complaints when a web site is in breach of privacy laws. But I need to be able to GUIfy it otherwise this won’t be possible.

See https://code.europa.eu/edpb/website-auditing-tool

I’d like to redo this animation found on this site (the animation is: click on “Let me in” then scroll down the equivalent of a screen and you have
title: “Wood houses make for sustainable homes.
Let’s unpack the artistry behind them” and a round centered in width with a “K” logo. )
this circle with the central logo is a kind of mask/hole which, when scrolled, reveals the content.

I managed to redo part of the concept on my [codepen])https://codepen.io/jipe974/pen/gOEyyae)

window.addEventListener("DOMContentLoaded", function () {
  // Créer le conteneur pour le masque
  var mask = document.createElement('div');
  mask.id = 'mask';
  // Insérer le masque dans le document
  var maskcontainer = document.querySelector(".container.fullscreen2");
  maskcontainer.appendChild(mask);

  window.addEventListener("scroll", function () {
    var scrollPercentage =
      (document.documentElement.scrollTop + document.body.scrollTop) /
      (document.documentElement.scrollHeight -
        document.documentElement.clientHeight);
    var newSize = 1500 * (1 + scrollPercentage);
    newSize = Math.min(newSize, 3000); // Limiter la taille maximale à 3000px

    // Vérifier si l'élément avec l'ID "mask" existe
    var maskElement = document.getElementById("mask");
    if (maskElement) {
      // Mettre à jour la taille du masque
      maskElement.style.width = newSize + "px";
      maskElement.style.height = newSize + "px";

      // Vérifier si le masque a atteint une certaine taille
      if (newSize >= 2500) {
        // Supprimer le masque
        maskElement.remove();
        // Activer le défilement du contenu
        document.querySelector(".content").style.overflow = "auto";
      } else {
        // Désactiver le défilement du contenu
        document.querySelector(".content").style.overflow = "hidden";
      }
    }
  });
});

.container.fullscreen2 {
    position: relative;
    width: 100%;
    height: 2000px; 
    overflow: hidden;
}
#mask {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 10000px solid red; 
    border-radius: 50%;
    z-index: 3;
    transition: width 0.5s, height 0.5s;
}

.content {
    width: 100%;
    height: 100%;
}

<div class="container fullscreen2">
  <div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis masssda ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>

<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu odolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>

<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>

<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>

<p>Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.</p>
    
    
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattfdis vitae ornare ut, feugiat a eratd. Ut tempus diaculis augue vel pellentesque.</p>

<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>

<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>

<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>

<p>Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.</p>
  </div>
    </div>  

(perfectibly I grant you) but I have a problem, I want to put before and after the div .container?fullscreen2 other div that would not be affected by the mask (as on the example site kozowood)
can you help me please?

Many thanks

Help with graphql-subscribtions. I’m writing code on the server that increments a number every second. This number must be sent to the client every time it is changed. It changes on the server. And the client receives this {“data”:{“numberIncremented”:null}}. Why numberIncremented null? Server code https://github.com/nikitazapekin/graphql-server-for-3d-restaurant. Client code https://github.com/nikitazapekin/Restaurant-monitoring-React-and-Three.js-app

There may be a problem with the rendering of the component

I want to call a function with a callback that contains multiple lines of javascript code from a vaadin component.

When I use getElement().executeJs(...) or UI.getCurrent().getPage().executeJs(...) and I pass my code, only the first line is executed.

Here is an example in which only the first alert is called. Is there a way to call all lines from java?

@NpmPackage(value = "leaflet-image", version = "0.4.0")
@JsModule("leaflet-image/leaflet-image.js")
@Tag("leaflet-image")
public class LLeafletImage extends Div {

    private static final long serialVersionUID = 1L;

    public void print(LMap map) {
        
        UI.getCurrent().getPage().executeJs("alert('-1');"
            + "leafletImage($0, function(err, canvas) {"
            + "alert('0');"
            + "var img = document.createElement('img');"
            + "var dimensions = map.getSize();"
            + "img.width = dimensions.x;"
            + "img.height = dimensions.y;"
            + "img.src = canvas.toDataURL();"
            + "document.getElementById('images').innerHTML = '';"
            + "document.getElementById('images').appendChild(img);"
            + "});"
            + "alert('2');", map.clientComponentJsAccessor());
    }
}

enter image description hereenter image description hereI tried to make this website. in HTML, CSS AND JS. I failed.
I hope somebody can code this website for me in HTML, CSS and Javascript.
I tried very hard to make it, i spend like 5 days making it everyday nonstop.
but it just wont work the way i want it to work. Can somebody please make the website as in the picture is shown. The app was made by Tao Yu but it got removed. I use his AlgTrainer alot and i cube on Qcube mzrg alot.
It is a mobile app but i want it to be a website.
You basically control it with your fingers as in the picture.
Can somebody please code this for me!

To the person who will code it, Thank You so much!
Have a awesome day to whoever reads this and i hope to see some reactions 🙂

I can’t eliminate shaking of the box which is predict to displace by using upper buttons. What can I do to avoid the shaking? I want to control the red box by buttons placed above, so what can I do to obtain no shaking of the box? How to improve my code to and not to use setInterval command which as I suppose is main cause of shaking.

I was trying to solve the problem but nothing was coming out from this. I want to obtain smooth movement of the box using buttons.

const pluss = document.querySelector(".box");
const moveY = document.querySelector(".move-y");
const moveX = document.querySelector(".move-x");
const movexP = document.querySelector(".move-xp");
const moveyM = document.querySelector(".move-ym");
const ccol = document.querySelector(".change-color");
let counterx = 940;
let countery = 460;
let sizex = 20;
let sizey = 20;
ccol.addEventListener("click", function() {
  pluss.style.backgroundColor = `hsl(${Math.random() * 360}, 90%, 70%)`
});
moveX.addEventListener("mousedown", function() {
  setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px"
  }, 1)
});
moveX.addEventListener("mouseup", function() {
  setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 1)
});
moveY.addEventListener("mousedown", function() {
  setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 1)
})
moveY.addEventListener("mouseup", function() {
  setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 1)
})
movexP.addEventListener("mousedown", function() {
  setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 1)
})
movexP.addEventListener("mouseup", function() {
  setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px";
  }, 1)
})
moveyM.addEventListener("mousedown", function() {
  setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 1)
})
moveyM.addEventListener("mouseup", function() {
  setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 1)
})

function sizep() {
  sizex = sizex + 20;
  sizey = sizey + 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px"
}

function sizem() {
  sizex = sizex - 20;
  sizey = sizey - 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px";
}

.mdiv {
  background-color: blanchedalmond;
  padding: 10px;
  border-radius: 20px;
  width: fit-content;
  margin: 15px;
}

body {
  background-color: black;
  padding: 0;
  margin: 0;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 20px;
  background-color: orangered;
  border-radius: 4px;
}

.move-x,
.move-y,
.move-xp,
.move-ym,
.sizeplus,
.sizeminus,
.change-color {
  color: black;
  background-color: grey;
  border: none;
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
}

</style>
<div class="mdiv">
  <button class="change-color">Color</button>
  <button class="move-x">Position x</button>
  <button class="move-y">Position y</button>
  <button class="move-xp">Position  x minus</button>
  <button class="move-ym">Position y minus</button>
  <button class="sizeplus" onclick="sizep()">Increase size</button>
  <button class="sizeminus" onclick="sizem()">Decrease size</button>
</div>
<div class="box"></div>

Pen

Inside div content data not coming into the form after submit in chrome. But it’s working fine in IE

Tried with out div tags, but in my case div tags need for other java script functionality.

MODE_DATA and Service_Data elements are not available after submit. It is showing undefined in form.

selectIndex = document.frmMasterData.MODE_DATA.selectedIndex;

<TABLE WIDTH='900' ID='TableBgColor'>
            <FORM NAME='frmMasterData' METHOD=POST ACTION='MasterData.asp'>
                    <TD WIDTH='400'>
                        <!--2006/11M del: <INPUT TYPE='text' MAXLENGTH='50' SIZE='20' NAME='txtD' VALUE="<% Response.Write ValueChk(TableData) %>" TABINDEX='3'>　   -->
                        <INPUT TYPE='hidden' NAME='hdnD' VALUE="<% Response.Write ValueChk(TableData) %>" ID="HiddenD">
                            <SELECT ID="LOAD_DATA" onChange='JavaScript:loadData("LoadingFile")' NAME="LOAD_DATA">
                                <OPTION value="01" SELECTED>01SER</OPTION>
                                <OPTION value="03">02SER</OPTION>
                                <OPTION value="39">03SER</OPTION>
                            </SELECT>

                            <div ID="SPAN_MODE">
                                <SELECT ID='MODE_DATA' NAME='MODE_DATA' onChange='JavaScript:loadModeData("MODE_CHANGE")'>
                                    <OPTION VALUE='1'>12</OPTION>
                                    <OPTION VALUE='2'>21</OPTION>
                                    <OPTION VALUE='3'>22</OPTION>
                                    <OPTION VALUE='4'>23</OPTION>
                                    <OPTION VALUE='5'>31</OPTION>
                                    <OPTION VALUE='6'>32</OPTION>
                                    <OPTION VALUE='7'>43</OPTION>
                                    <OPTION VALUE='8'>44</OPTION>
                                    <OPTION VALUE='9'>05</OPTION>
                                    <OPTION VALUE='10'>06</OPTION>
                                </SELECT>
                            </div>

                            <div ID="SPAN_SERVICE">
                                <SELECT ID='Service_Data' NAME='Service_Data' >
                                    <OPTION VALUE='1'>1</OPTION>
                                    <OPTION VALUE='2'>2</OPTION>
                                </SELECT>
                            </div>

                        </TD>
                        <INPUT TYPE='submit' NAME='sbmBt' VALUE='sbm' STYLE='width:5em' TABINDEX='5' OnClick='JavaScript:return CheckingInput(this.form)'>
                        </FORM>
                        </TABLE>

I want to request a php file from Javascript. I get a error Failed to load resource: the server responded with a status of 502 (Bad Gateway)

Here are my files:
web/index.html

<html>
<head></head>
<body></body>
<script>
    const http = new XMLHttpRequest();
    let response = null;
    http.onreadystatechange = function() {
        console.log(this.readyState);
        if (this.readyState === 4 && this.status === 200) {
            response = this.responseText;
        }
    };
    http.open("GET", "resources/php/test.php", false);
    http.send();
    console.log(response);
</script>
</html>

web/resources/php/test.php

<?php
echo 'test';

And this is my output:

1
Failed to load resource: the server responded with a status of 502 (Bad Gateway)
4
null

I also tried the asynchronous approach. But when doing so the readyState will stuck at 1.

A much more simple approach looks like this:

<script>
    const http = new XMLHttpRequest();
    http.open("GET", "resources/php/test.php", false);
    http.send();
    console.log(http.response);
</script>

It also won’t work and results in the following output:

Failed to load resource: the server responded with a status of 502 (Bad Gateway)
!doctype html><title>502 Bad Gateway</title><h1 style="text-align: center">502 Bad Gateway</h1>

Im trying to read a php-file from a JavaScript file.

I am working with React-Grid-Layout to create data grid layout. The current implementation uses the cols attribute with grid units. However, I need to display the grid in pixels and introduce scrolling functionality when the pixel limit is exceeded, rather than layouts overlapping or breaking.

Here is a snippet of the relevant code:

import { Responsive, WidthProvider } from 'react-grid-layout';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

const selectedLayout = [
  {
    i: '8',
    x: 0,
    y: 0,
    w: 6,
    h: 10,
  },
  {
    i: '10',
    x: 6,
    y: 0,
    w: 7,
    h: 10,
  },
];

<div>
  <ResponsiveReactGridLayout
    layouts={{ lg: selectedLayout }}
    cols={{ lg: 12 }} {/* How can I make this in pixels instead of grid units? */}
    rowHeight={rowHeight}
    margin={[0, 0]}
  >
    {selectedLayout &&
      selectedLayout.map((layout) => (
        <div data-grid={layout} key={layout.i} >
          <Card className="board-creation-card">
            <Button
              type="tertiary"
              prefixIcon={{ name: 'add' }}
              title={'add'}
            />
          </Card>
        </div>
      ))}
  </ResponsiveReactGridLayout>
</div>

Let’s call a sequence of brackets balanced if :

Starts with an opening bracket

Ends with a closing bracket

At any point the number of closing brackets does not exceed the number of opening brackets.

The number of opening bracket is same as the number of closing bracket.

We call a balanced sequence of brackets n-balanced if there are n consecutive opening brackets followed by n closing brackets.

From the string n-balanced substrings are removed and the substring to the left and right of the deleted substring is concatenated.

You need to repeatedly remove n-balanced substrings until no more n-balanced substrings exist.

Input Input Format The input consists of multiple testcases.

The first line contains an integer t – the number of testcases.

The next 2*t lines contains the description of the t testcases.

The first line of each testcase contains a string s – the sequence of brackets.

The second line of each testcase contains the integer n.

Constraints 1 ≤ t ≤ 10^3

1 ≤ |s| ≤ 10^4

1 ≤ n ≤ 10^2

Output Output Format For each testcase print the remaining string after performing all the removals, or -1 if the string becomes empty.

Sample Input
3
((())())()
2
((()))
3
))((
2

Sample Output
()
-1
))((

i have a column in PROVIDER class model which is:

@Column({ type: DataType.STRING, allowNull: false, }) iban: string;

what i want is to migrate so when i create a new provider, my iban is automatically set to null.

the following line is the last two migration with iban(including the new migration):

1st MIGRATION:

  module.exports = {
up: async (queryInterface, Sequelize) => {
  await queryInterface.addColumn('PROVIDER', 'iban', {
    type: Sequelize.STRING,
    allowNull: false,
    hidden: true,
    });
  },

  down: async (queryInterface, Sequelize) => {
    await queryInterface.removeColumn('PROVIDER', 'iban');
  },
};

THE NEW MIGRATION:

module.exports = {
  up: async (queryInterface, Sequelize) => {
  await queryInterface.changeColumn('PROVIDER', 'iban', {
  type: Sequelize.STRING,
  allowNull: true,
  defaultValue: null,
});
await queryInterface.bulkUpdate('PROVIDER', { iban: null }, { 
  iban: 'FR0000000000' });
},

down: async (queryInterface, Sequelize) => {
  await queryInterface.bulkUpdate('PROVIDER', { iban: 
  'FR0000000000' }, { iban: null });
await queryInterface.changeColumn('PROVIDER', 'iban', {
  type: Sequelize.STRING,
  allowNull: false,
    });
  },
};

this following lines is the new value for iban in provider:

proUserFromDto(
proUserDto: ProUserDto,
user: User,
societyAddress: Address,
invoicingAddress?: Address,
): Provider {
const provider = new Provider();
provider.userId = user.id;
provider.tahiti = proUserDto.tahitiNumber;
provider.approved = !!proUserDto.approved;
provider.addressId = societyAddress.id;
provider.invoicingAdressId = invoicingAddress?.id;
provider.iban = '';
return provider;
}

here is the error i get:

[Nest] 2695  - 20/02/2024 18:05:01   ERROR [UserService] SequelizeValidationError: notNull Violation: Provider.iban cannot be null
createProUserEntity
[Nest] 2695  - 20/02/2024 18:05:01   ERROR [UserService] SequelizeValidationError: notNull Violation: Provider.iban cannot be null
createProUser
[Nest] 2695  - 20/02/2024 18:05:01   ERROR [ExceptionsHandler] notNull Violation: Provider.iban cannot be null
SequelizeValidationError: notNull Violation: Provider.iban cannot be null
    at InstanceValidator._validate (/Users/heimo/Documents/dev/tauturu-fare/backend/node_modules/sequelize/src/instance-validator.js:78:13)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at InstanceValidator._validateAndRunHooks (/Users/heimo/Documents/dev/tauturu-fare/backend/node_modules/sequelize/src/instance-validator.js:111:7)
    at InstanceValidator.validate (/Users/heimo/Documents/dev/tauturu-fare/backend/node_modules/sequelize/src/instance-validator.js:93:12)
    at Provider.save (/Users/heimo/Documents/dev/tauturu-fare/backend/node_modules/sequelize/src/model.js:4076:7)
    at UserService.createProUserEntity (/Users/heimo/Documents/dev/tauturu-fare/backend/src/user/services/user.service.ts:197:25)
    at UserService.createProUser (/Users/heimo/Documents/dev/tauturu-fare/backend/src/user/services/user.service.ts:105:7)
    at /Users/heimo/Documents/dev/tauturu-fare/backend/node_modules/@nestjs/core/router/router-execution-context.js:46:28
    at /Users/heimo/Documents/dev/tauturu-fare/backend/node_modules/@nestjs/core/router/router-proxy.js:9:17

i cant get over it 🙁

how to create navbar permanently which move page website with bootstrap 5? Cause i use code navbar by bootstrap 5 which im move page the navbar nothing view. Please help me

give me some code to help me for solving the problem. thank u

How to highlight the wrong string in textbox itself, here the textbox is “div” element with contentEditable=”true”?

I am developing text comparison tool that not only compares and highlight the text but also checks the styles of the text including bold, underline, italics and it should highlight the difference as well.

Problem: I couldn’t highlight the difference of text in textbox itself, by the way i am using diff_match_patch.js library for comparion.

Here is what i did so far:
After the user pasted the text content in textboxes i query using DOM api and separate them and push to their respective arrays like bold, italics, innertext etc. And i pull the items from those array and compare them using libray which i mentioned earlier and return the difference but how do i highlight them in textbox itself like, this character has no bold styling or this character has no underline.

Answers would be much appreciated. thanks in advance.

Salve, ho il seguente script JS. Esso fa in modo che in base al valore selezionato nella SELECT html mostri un popup.
Se l’utente clicca OK, quindi true, continua la compilazione del modulo, altrimenti fa redirect.

Come posso trasformare lo script in jQuery in modo da poter customizzare il popup, modificare tasti ecc con css? Quale librerie devo importare?

NB: non posso usare gli eventi nel codice HTML.

Grazie a chi vorrà aiutarmi.

<select name="compagnia" class="xx" id="change" aria-required="true" aria-invalid="false">
<option value="Compagnia UNO">Compagnia UNO</option>
<option value="Altra Compagnia">Altra Compagnia</option>
</select>

<script>
 document.querySelector('#change').addEventListener('change',function(e){
if (this.value == "Altra Compagnia") {
 if (window.confirm( `Avviso: Prova.  ${this.options[ this.options.selectedIndex ].text}` )); 
else {window.location = "https://www.google.it";}
} 
});
</script>

I just wanted to know if someone has already updated quill to it’s latest 2.0.0rc version and is using the plugin image-resize for it.

Before it was simply initialisable by using it like that:

var quill = new Quill('#editor', {
    modules: {
        imageResize: {
          displaySize: true
        },
        toolbar: [
          [{ header: [1, 2, 3, false] }],
          ['bold', 'italic', 'underline'],
          ['image','link', 'video']
        ]
    },
    placeholder: 'Write something...',
    readOnly: false,
    theme: 'snow'
  });

With 2.0.0rc it says, it is not able to import it. Any suggestions?