Category: javascript

I want to know if flashlist will create all vdom nodes ahead of time in js thread. Just like flatList will create all nodes in advance.

Because I want to know if it will create all vdom nodes in advance and thus block the js thread.

How do i send a request to the discord API without a backend (in js or anything web pages support)?
This is my code:

var discordUrl = 'https://discord.com/api/users/818109259048157226'; //discord url to the get user api

var request = new XMLHttpRequest();
request.open("GET", discordUrl);
request.setRequestHeader('Content-type', 'application/json'); //set the header idk its stolen code
request.setRequestHeader('Authorization', 'Bot thebottoken'); //tell discord to authenticate with a bot

(async () => {
  try {
    const success = true; // this was here im not gonna change it because it works (kind of)

    if (success === true) { // idk
        
      const Payload = { // the thing being sent
        
      };
      request.send(JSON.stringify(Payload));// send the request

    } else {
      console.error('status: ', data.status, ' message: ', data.message); //if error then dont explode
    }
  } catch (error) {
    console.error('erm merror: ', error);//if error then dont explode #2
  }
})();

Error with CORS.
I DO have node.js installed on vercel so a backend isn’t technically a problem but i’d need a complete walktrough cuz i don’t even know how to install node.js on vercel, my friend installed it for me.

Code for fetching avatars on the teampage of my site, so i only need the "avatar":"<avatarhash>" field.

I tried to use cors-anywhere.herokuapp.com, returned 403 Forbidden.

In the Edge browser, I am opening the file specified in the src of an iframe as shown below. However, when trying to save it as a PDF, the file name appears correctly in the Chrome browser, but in the Edge browser, it defaults to “index.pdf.”

Despite my attempts, I haven’t been able to change this file name. Could you please assist me?

`…

    var objFra = document.getElementById(iframeName);

    if (isChrome || isOpera) {
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
    else if (isEdge || isInternetExplorer || isFirefox) {
        objFra.onload = function () {
            objFra.contentWindow.focus();
            objFra.contentWindow.print();
            return;
        }
        if (isEdge) {
            window.setTimeout(printDocument, 100);
        }
    ...}`

<iframe src="../../File/TEMP/e42c2279-1363-4d87-933f-625ff20eec7d/ExampleDocument.pdf#zoom=100&amp;toolbar=0" class="m-3" style="height: 95% !important; width: 99%" frameborder="0" id="iDoc" name="iDoc"></iframe>

I expect the PDF file name to appear correctly here, just as it does in the Chrome browser. I tried changing the iframe title and other information, but I couldn’t achieve the desired result.

How to properly access the elements in data views based on the data type?

Consider the following example code:

const data = new Uint16Array([7, 12, 100]);
const view = new DataView(data.buffer);

console.log(view.getUint16(0), view.getUint16(1), view.getUint16(3));

The output is 1792 12 100. The first element is wrong, and the other element offsets are not multiples of 2 as 16 bit types would suggest. Using view.getUint8(0) does output 7.

What is the correct way to access elements in a data view using .getTYPE()?

The real use-case is a binary file that is read in as an ArrayBuffer of mixed sized values.

I’m using HTML select in my react application. Whenever I open the page, the select shows no options on click like this:

When I searched for the reason, I couldn’t find anything. But sometimes the options are showing properly like this:

I don’t know why the HTML select is behaving like this.

I’m new at computer science and game development. I have a mid computer and only python, javascript and java are accessible. I also want to get into game development. So which language is better?

i have a quite experience with python, javascript and java (mainly python with pygame). I also dont want to use an engine.

I have created a routes file which has following code,

import express, { NextFunction, Request, Response } from "express";

const router = express.Router();

router.post(
  "/product",
  async (req: Request, res: Response, next: NextFunction) => {
    return res.status(200).json({});
  }
);

export default router;

See pretty simple just one route in there. But am having a red line under the 7th line of above code, let me show you how,

Running it locally works fine but when I try to build the code and try running the build code it throws an error,

Can anyone help if faced something similar before or know why is this happening? I have tried putting return type like Promise but that do not fixes the error I was thinking this might be an issue because of that.

I Wrote This Code To Make An Image Input & output:

• Html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Upload Image</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <h1>Click Button To Add Image</h1>
    <input type="file" id="imageInput" accept="image/*" name="imageinput">
    <button id="Return">Return Image</button><br>
    <img src="" alt="" id="MyImage" height="200px" width="200px">
</body>
</html>

• javaScript :

document.getElementById("Return").onclick = function() {
    document.getElementById("MyImage").src = document.getElementById("imageInput").value;
}

But When I Run My Website :

1. I click اختيار الملف (Upload File in English Because I Use Arabic).
2. I Choose Any Image.
3. I Click the Return Button.
4. Nothing Happens!

My Teacher Tells Me that it works only on backend coding, But when I tried PHP, I Wrote Some Code And It shows My Written Code!

list.html

<p>Active Status: {% if datas.employee.is_active %}Active{% else %}Inactive{% endif %}</p>

models.py

class Employee(models.Model):

is_active = models.BooleanField(default=True)
def delete(self):
    self.is_active = True
    self.save()
)

I’m using the open-source version of Appsmith and have two apps (App1 and App2) embedded on the same HTML page using iframes. I want these apps to communicate with each other, such as by exchanging data or triggering actions, similar to what’s possible with the Appsmith Enterprise feature for custom messaging integrations.

The Appsmith documentation on messaging covers inter-app messaging, but it’s limited to the Enterprise version. Since the open-source version allows customization, I’m exploring ways to implement this functionality by modifying the open-source codebase.

Questions:

1.  Is it feasible to modify the open-source Appsmith code to create a messaging layer for inter-app communication?
2.  Has anyone implemented cross-iframe messaging or postMessage functionality within the open-source version of Appsmith?
3.  Are there any specific parts of the codebase I should focus on to add this functionality without requiring Enterprise features?

Any guidance or pointers to relevant parts of the Appsmith codebase would be very helpful!

I have Angular on Front – End,
I have a very weird issue:
I am connecting to a Mercure – server events with EventSource in Javascript.
In case of an error for example when I simulate wrong authorization or whatever, the only thing that I receive via browser is:
{isTrusted: true}

I have red this blog: https://blog.sentry.io/what-is-script-error/
And according to the blog and other sources the issue is caused by Browser it is a Script Error.

But I tried catching the error in try catch blog,

I setup the headers according to that article.

This is how the error is handled.
How I can get some normal error format?

    this.eventSource.onerror = (error: ErrorEvent): void => {
      console.log(error);
      if (attempts === 0) {
        this._logger
          .sendToRemote$({
            id: traceId,
            log_level: 'ERROR',
            log_message: `Mercure connection dropped, after ${EVENT_SOURCE_RECONNECT_ATTEMPTS} failed attempts`,
            BODY: JSON.stringify({ message: error.message, fileName: error.filename, lineNumber: error.lineno }),
            STEP: 'ERROR',
            traceId,
            context_data: {
              sessionUid
            }
          })
          .pipe(take(1))
          .subscribe();
      }

      if (attempts > 0) {
        setTimeout(() => {
          this.startEventSource(attempts - 1);
        }, 2000);
      }
      throw error;
    };

I have the following HTML structure that replicates a pie chart:

$('#clickthis').click(function(e){
    e.preventDefault();
  $('.circle-chart').css('background: conic-gradient(green 0% 60%, grey 60% 100%)')
});

.circle-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(green 0% 30%, grey 30% 100%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.circle-segment {
  width: 0%;
  height: 0%;
  background-color: grey;
  border-radius: 50%;
}*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="circle-chart">
  <!--<div class="circle-segment"></div>-->
</div>
<button id="clickthis">
Click Me
</button>

The value of the percentage in conic-gradient is coming from a JS variable. So if the value is 30% then:

background: conic-gradient(green 0% 30%, grey 30% 100%);

but if the value is 60% it should be:

background: conic-gradient(green 0% 60%, grey 60% 100%);

How can I update the conic gradient value using JS? The JS I tried is not doing anything and is not giving any error.

I am creating a website on wix studio and this error shows up. The logic is

$w.onReady(function () {
    // Add click event handler for the register button
    $w('#registerButton').onClick(() => {
        const email = $w('#email').value;
        const password = $w('#password').value;

        // Validate inputs
        if (!email || !password) {
            $w('#errorMessage').text = "Please enter both email and password.";
            return;
        }
    })
})

I tried to add the code directly in the admin page code panel but it says that the onReady property does not exist on type '(selector: string).

I’d like to ask is there a way to “hide” a div while showing the button inside a div when the mouse is over the div, while “showing” the div again without the buttons when the mouse is not over the div?

Update: I’d clarify again more precisely what effect I want to achieve. When I move my mouse over the div, I want the text “a” to be hidden, showing up all the buttons and the text of the button inside the div, while turning the background color into light blue, and the text color into black. When I move away my mouse from the div, I want all the buttons and the text of the buttons in the div to be hidden, showing up again the text “a” only, while turning the bg color into black, and the text color into white.

const a = document.getElementById("a");
let btns = document.getElementsByTagName("#firstItem > .a > button");
let btnsA = Array.from(btns);

a.addEventListener('mouseover', () => {

  btnsA.forEach((element) => {
    element.style["display"] = "flex";
  });
  
  a.style["color"] = "#56F1FF";
});

a.addEventListener('mouseout', () => {

  btnsA.forEach((element) => {
    element.style["display"] = "none";
  });
  
  a.style["color"] = "#FFFFFF";
});

* {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

section {
  display: flex;
}

#firstItem {
  width: 10%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

#frame {
  width: 90%;
  height: 100%;
}

section #firstItem div {
  color: #FFFFFF;
  background-color: #000000;
  border: 0;
  text-align: center;
}

section #firstItem div:hover {
  color: #000000;
  background-color: #56F1FF;
}

section #firstItem #a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

section #firstItem #a button {
  display: none;
  background-color: #56F1FF;
  color: #000000;
}

<section>
  <div id="firstItem">
    <div id="a">a
      <button>a1</button>
      <button>a2</button>
      <button>a3</button>
      <button>a4</button>
      <button>a5</button>
      <button>a6</button>
    </div>
    <div class="b">b</div>
    <div class="b">c</div>
    <div class="b">d</div>
    <div class="b">e</div>
    <div class="b">f</div>
    <div class="b">g</div>
    <div class="b">h</div>
  </div>
  <div id="frame">
  </div>
</section>

I want to inject my remote script to chrome extenstion, but I think manifest V3 don’t let me do that. How to overcome that barrier?.
Here are the option I have tried.

const dynamicScript = fetch(...);
const data = {}   // to pass into dynamic script

chrome.scripting.executeScript(
   {
      target: { tabId: details.tabId },
      world: "MAIN",     // most important part
      func: data => {
         (new Function('data', dynamicScript))(data);
      },
      args: [data]  // passing app into func above
   }
); 

Thank you for your help