Category: javascript

My application is separate backend and frontend, this app is about managing stok, manage product, transaction purchase or sales, reporting and etc

At first, client have 1 store we called “STORE A”

Client open 3 store in different place, like store branch that have main branch, and in current condition my app is used by main branch which is “STORE A” and client request to cloning my app to 3 in last year, so ya currently in one server running 4 backend app, STORE A, STORE B, STORE C, STORE D with 1 frontend

this is my current structure

FRONTEND 1 (login page choose the branch with contain url backend that user want)
 -> BACKEND A -> DATABASE A
 -> BACKEND B -> DATABASE B
 -> BACKEND C -> DATABASE C
 -> BACKEND D -> DATABASE D

This is the challenge: client request want to have reporting all of their store, which is stock and transaction report like profit loss, the problem is the app is separate by different database, should I create new project with multiple database connection to connecting all of store to get the data reporting ? I know this isn’t best practice, but client want to request fast in 1-2 month from now

Actually this is same condition when I cloning the store A to D, they want me to work fast so yeah I aggre to cloning rather than enhance backend to making just 1 backend 1 database, of course so much effort to do that

And right now client want me to create reporting that connecting all of data, so how I do that ? Should I merge all of database then just use select ? It’s bad practice, maybe in future the app will slow and I’ m sure that client will complain, why the app is slow etc.

In additional, client also want to add new feature that each store can transfer in another store, ie:

STORE A -> STORE B
product
- product A, 
- product B,

Either STORE A or STORE B have historical data that can increasing or decreasing stock each product, and not all of product in STORE B available in STORE A, so can be different product

how ? should I making 4 app backend to 1 again ? then enchance the database structure ? maybe create new column in each table like warehouse_id or branch_id or store_id, but I’m not sure will complete in 1 month, its to many effort.

I create new app how about the relation in main app?

Given

function foo(x:number, y:number) {}

TypeScript inherently has the names of Parameters, and they inherently can’t have dups, which matches the requirements of a Record. So is it possible to derive a Record type from a Parameters type? Such that:

RecordFromTuple<Parameters<typeof foo>> === { x:number, y:number }

I am not sure how to fix this, as all parameters are being met and and imports are taken into account and decencies have been installed can someone please provide some insight and or a solution. for context. I am building a project from a that was uploaded in early 2024 and it is march 2025 if that may help. here are pictures.

Error

./src/app/api/quizz/generate/route.ts:94:48
Type error: Type 'HumanMessage' is not assignable to type 'BaseMessageLike'.
  Type 'HumanMessage' is not assignable to type 'BaseMessage'.
    The types returned by '_getType()' are incompatible between these types.
      Type 'import("/Users/connormullins/Documents/Quiz iteration saves/quizz-ai-tutorial latest/node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@langchain/core/dist/messages/base").MessageType' is not assignable to type 'import("/Users/connormullins/Documents/Quiz iteration saves/quizz-ai-tutorial latest/node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@langchain/core/dist/messages/base").MessageType'.
        Type '"developer"' is not assignable to type 'MessageType'.

  92 |     });
  93 |
> 94 |     const result: any = await runnable.invoke([message]);
     |                                                ^
  95 |     console.log(result);
  96 |
  97 |     const { quizzId } = await saveQuizz(result.quizz);

I am running HummanMessage from Langchain for a AI quiz Generator and cannot run my build properly due to this error. making it so I cannot deploy onto vercel.

import { NextRequest, NextResponse } from "next/server";

import { ChatOpenAI } from "@langchain/openai";
import { HumanMessage } from "@langchain/core/messages";

import { PDFLoader } from "langchain/document_loaders/fs/pdf";
import { JsonOutputFunctionsParser } from "langchain/output_parsers";

import saveQuizz from "./saveToDb";

export async function POST(req: NextRequest) {
  const body = await req.formData();
  const document = body.get("pdf");

  try {
    const pdfLoader = new PDFLoader(document as Blob, {
      parsedItemSeparator: " ",
    });
    const docs = await pdfLoader.load();

    const selectedDocuments = docs.filter(
      (doc) => doc.pageContent !== undefined
    );
    const texts = selectedDocuments.map((doc) => doc.pageContent);

    const prompt =
      "given the text which is a summary of the document, generate a quiz based on the text. Return json only that contains a quizz object with fields: name, description and questions. The questions is an array of objects with fields: questionText, answers. The answers is an array of objects with fields: answerText, isCorrect.";

    if (!process.env.OPENAI_API_KEY) {
      return NextResponse.json(
        { error: "OpenAI API key not provided" },
        { status: 500 }
      );
    }

    const model = new ChatOpenAI({
      openAIApiKey: process.env.OPENAI_API_KEY,
      modelName: "gpt-4-1106-preview",
    });

    const parser = new JsonOutputFunctionsParser();
    const extractionFunctionSchema = {
      name: "extractor",
      description: "Extracts fields from the output",
      parameters: {
        type: "object",
        properties: {
          quizz: {
            type: "object",
            properties: {
              name: { type: "string" },
              description: { type: "string" },
              questions: {
                type: "array",
                items: {
                  type: "object",
                  properties: {
                    questionText: { type: "string" },
                    answers: {
                      type: "array",
                      items: {
                        type: "object",
                        properties: {
                          answerText: { type: "string" },
                          isCorrect: { type: "boolean" },
                        },
                      },
                    },
                  },
                },
              },
            },
          },
        },
      },
    };

    const runnable = model
      .bind({
        functions: [extractionFunctionSchema],
        function_call: { name: "extractor" },
      })
      .pipe(parser);

    const message = new HumanMessage({
      content: [
        {
          type: "text",
          text: prompt + "n" + texts.join("n"),
        },
      ],
    });

    const result: any = await runnable.invoke([message]);
    console.log(result);

    const { quizzId } = await saveQuizz(result.quizz);

    return NextResponse.json({ quizzId }, { status: 200 });
  } catch (e: any) {
    return NextResponse.json({ error: e.message }, { status: 500 });
  }
}

I am using Reactos to create an application.

My task is to get up-to-date information about the cryptocurrency (price in USD and changes in 24 hours, for example +1.24%)

I need to do this accordingly using websocket.

Here is the url of the web socket that I was given by wss://stream.binance.com:9443/stream?streams

And so, I need to get up-to-date information not only about one cryptocurrency, but several at once (for example, BTC, USDT, SOL, etc.)

I’m new to WebSocket development, so I need your help.

I am trying to deploy my Next JS 14 app to AWS with OpenNext. Here are the OpenNext docs regarding Next JS middlware, but unfortunately the documentation is not very thorough:

https://opennext.js.org/aws/inner_workings/components/middleware

OpenNext previously was not a great option for deploying Next JS 14 sites (according to my understanding) because they did not treat middleware real great. From what I have found, they just packaged middleware up with any other server side code and cached it (I think in cloudfront). This would create problems, because it meant that middleware would get cached and stop running – a major problem if middleware is handling any authentication / authorization and protected routes (which are primary candidate usages for middleware).

However, with the semi-recent release of OpenNext v.3, they created a way to create external middleware, meaning that middleware can be separated from the rest of the server side code so that it runs prior to each request.

This is an option, but must be configured in the open-next.config.ts file:

const config = {
    default: {},
    middleware: {
        external: true,
    }
}

export default config;

Upon deploying, I am running into a problem. OpenNext is attempting to put the middleware function on Lambda@edge, and Lambda@edge does not support environment variables (as far as I can tell). This seems like yet another major shortcoming of the OpenNext deployment process – for example, since one primary usage of middleware is authentication, I need to make an api call in my middleware to my authentication route, meaning I have an environment variable.

So my question is, what do I do? I need the environment variable in my middleware, but this is preventing OpenNext from deploying the middleware to Lambda@edge. Is there some way to configure an environment variables store on Lambda@edge functions? Or maybe some way to tell OpenNext to deploy middleware to a normal Lambda function, as opposed to a Lambda@edge function? But also, if that is possible, will removing the middleware from Lambda@edge cause problems with any client component that are hosted in cloudfront?

I now this explanation may sound a bit tedious, but I am not an AWS expert and haven’t deployed to this before (I have always used vercel prior to now), so any tips or explanations to help me understand this better sure would be appreciated.

I am trying to add a background image to my page.

index.html:

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/styles/main_style.css">
    <title>HTMX Demo Javascript Web-App</title>
</head>
<body>

</body>
</html>

The CSS is as follows:

body {
    width: 100%;
    margin: 0 auto;
    background-image: url(/images/background.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
}

The index.html is in the root of the web app:

index.html
styles
   -- main_style.css
images
   -- background.jpg

• I have tried with and without spaces in the URL
• I have tried with and without single and double quotes
• I have tried with several various urls:

  url('images/background.jpg');
  url('/images/background.jpg');
  url('../images/background.jpg');
  

None of these work.

This is not working when I use WebStorm, or even when I just open the index.html. If I do go to the link file:///C:/Users/tom/git/htmx-demo-frontend-javascript/images/background.jpg then I can see the image in the browser.

The index.html that’s created by a React app looks like:

<!doctype html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/assets/index-DO1VeTRM.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-D8b4DHJx.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

My understanding is that the browser parses top to bottom, and since the tag doesn’t have the defer attribute it first gets the Javascript file before loading body. Is that correct or not? If it is, how does the Javascript run so that React then gets the root element when it doesn’t exist? Also since things are run in order, wouldn’t it make sense for the .css file to be loaded before the Javascript file? Please help me understand.

I have a parent component with two nested child components: parent->child1->child2. parent sending api values down through child1 component and to the child2 component. parent is also receiving events from both child components. Obviously child2 is sending the event to it’s parent, child1; and child1 is forwarding the event to `parent. So they can communicate.

I need a boolean value to reach child2. I am printing out the value of my api showModal on all three html files for each component. Only the children’s components value for showModal initial value shows. When the value is updated, the children’s values don’t change and the parent value never shows. The change never even makes it to child1.

You can see what I tried below, after the code

parent.html

{showModal}
<c-child1 show-modal={showModal}>
</c-child1>

parent.js

_showModal;
set showModal(value) {
  this._showModal = value || false;
}

get showModal() {
  return this._showModal;
}

saveEvent(event) {
  this.showModal = {...this.showModal, Boolean:true};
  // other things I've tried...
  /*
  this.showModal = true;
  this.showModal = Object.assign({}, true);

  in combination with this.showModal = true;...
  this.dispatchEvent(new RefreshEvent());
  */
}

child1.html

{showModal}
<c-child2 show-modal={showModal}>
</c-child2>

child1.js

_showModal;
@api
set showModal(value) {
  this._showModal = value || false;
}

get showModal() {
  return this._showModal;
}

child2.html

{showModal}
<div if:true={showModal}>
  <p>Hi, I'm a modal</p>
</div>

child2.js

_showModal;
@api
set showModal(value) {
  this._showModal = value || false;
}

get showModal() {
  return this._showModal;
}

I have experimented with:

• having the values on child1 & child2 be @apis without getters and setters
• having showModal on parent be a @track instead getters and setters
• calling an event in child2 instead of using an @api variable to set the value by doing: this.template.querySelector('c-child2').showModal();

I built an Rshiny app that works fine in both my computer and after publishing. It basically loads data from our SQL database based on the input selection in the ui > do calculations > show the final report with some tables and graphs. But once a week on average, the app does not work with the below error ‘Error: no field, method or inner class called ‘parent’:

I do not use any function called ‘parent’ in both the ui and server. Libraries used are as below. In order to fix this error, I have to make a copy of the report folder and give it a different name. Then the Shiny app that uses the new folder would work. Anyone has any idea why this is happenning every now and then? Thank you very much

library(shinyalert)
library(plotly)
library(dplyr)
library(lubridate)
library(RJDBC)
library(raster)
library(RODBC)
library(openxlsx)

I was trying to understand the prototype chain of the code below

const parentObject = {
    name: "Parent",
    nested: {
        key: "value"
    },
    greet: function () {
        return `Hello from ${this.name}`;
    }
};


const childObject = Object.create(parentObject);
childObject.name = "Child"; 

console.log(childObject); 

from which I get the following in the console:

Nonetheless, expanding constructor’s prototype, then __proto__ I get

which points to a different __proto__, null. Isn’t the prototype of a constructor supposed to point to the original Object (in this case “parentObject”)? If that is so, why they differ their proto?
If possible, is there a reliable diagram that well depicts what is going on?

the html file:

<meta charset="UTF-8" />
<title>AJAX calls xml</title>


<script>
function display(word)
{
if (word.length==0) { 
    document.getElementById("show_char").innerHTML="";
    return;
} else {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("show_char").innerHTML=xmlhttp.responseText;
        }
    }
   
    xmlhttp.open("GET","quiz2.php?q="+word,true);
    xmlhttp.send();
}    
}

</script>
</head>
<body style="background-color:lightgreen;color:black">


<form > 
Find the number <input type="text"  onkeyup="display(this.value)">
  
</form>

<p id="show_char"> </p> 

</body>
</html>

The quiz2.php file:

<?php

$r = 239;
$q = $_REQUEST["q"];

echo "Your number is $q";
if (intval($q) > $r) {
    echo "Your number is bigger from the number we are searching";
}
if (intval($q) == $r) {
    echo "Congrads you found the number!!!!!!!!";
}
if (intval($q) < $r) {
    echo "Your number is smaller from the number we are searching";
}

?>

The error on the html and console:
console and html

When you enter a number you are supposed to get a response form the php file with echo, compairing your number with the default number r. But instead php code is returned. You can see the error in the image. It is supposed to return “Your number is”+the number you typed etc. I use phoenix code and win 11. Perhaps it works on other machines??

the html file:

<meta charset="UTF-8" />
<title>AJAX calls xml</title>


<script>
function display(word)
{
if (word.length==0) { 
    document.getElementById("show_char").innerHTML="";
    return;
} else {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("show_char").innerHTML=xmlhttp.responseText;
        }
    }
   
    xmlhttp.open("GET","quiz2.php?q="+word,true);
    xmlhttp.send();
}    
}

</script>
</head>
<body style="background-color:lightgreen;color:black">


<form > 
Find the number <input type="text"  onkeyup="display(this.value)">
  
</form>

<p id="show_char"> </p> 

</body>
</html>

The quiz2.php file:

<?php

$r = 239;
$q = $_REQUEST["q"];

echo "Your number is $q";
if (intval($q) > $r) {
    echo "Your number is bigger from the number we are searching";
}
if (intval($q) == $r) {
    echo "Congrads you found the number!!!!!!!!";
}
if (intval($q) < $r) {
    echo "Your number is smaller from the number we are searching";
}

?>

The error on the html and console:
console and html

When you enter a number you are supposed to get a response form the php file with echo, compairing your number with the default number r. But instead php code is returned. You can see the error in the image. It is supposed to return “Your number is”+the number you typed etc. I use phoenix code and win 11. Perhaps it works on other machines??

I have this page and I made a button and a function to copy a hidden text whenever someones clicks the button.

Here’s my code:

<script>
function copyWArat() {
  var copyText = document.getElementById("nsDBfunctions");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Weak Aura string copied");
}
</script>

Some people reported back to me that the text is not being copied, even though I tested in and on my end it works on all browsers.
Any idea what’s wrong?

Thank you

I’m writing an JS application that is connecting to a mongodb database. This database is working and is connectable using MongoDB Compass. I even wrote a python script that connects to the database with no issue.

For some reason when I am trying to interface it with my javascript code

const {MongoClient} = require('mongodb');

async function main(){
    const uri = "mongodb://MyUserName:P@[email protected]:27017/?retryWrites=true&w=majority";
 

    const client = new MongoClient(uri);
 
    try {
        // Connect to the MongoDB cluster
        await client.connect();
 
        // Make the appropriate DB calls
        await  listDatabases(client);
 
    } catch (e) {
        console.error(e);
    } finally {
        await client.close();
    }
}

async function listDatabases(client){
    databasesList = await client.db().admin().listDatabases();
 
    console.log("Databases:");
    databasesList.databases.forEach(db => console.log(` - ${db.name}`));
};
 

main().catch(console.error);

I get this output:

MongoServerSelectionError: getaddrinfo ENOTFOUND tor!
    at Topology.selectServer (
...
...
  test.js:16:9) {
  errorLabelSet: Set(0) {},
  reason: TopologyDescription {
    type: 'Unknown',
    servers: Map(1) { 'tor!:27017' => [ServerDescription] },
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    localThresholdMS: 15,
    setName: null,
    maxElectionId: null,
    maxSetVersion: null,
    commonWireVersion: 0,
    logicalSessionTimeoutMinutes: null
  },
  code: undefined,
  [cause]: MongoNetworkError: getaddrinfo ENOTFOUND tor!
      at Socket.<anonymous> (.....libcmapconnect.js:285:44)
      at Object.onceWrapper (node:events:633:26)
      at Socket.emit (node:events:518:28)
      at emitErrorNT (node:internal/streams/destroy:170:8)
      at emitErrorCloseNT (node:internal/streams/destroy:129:3)
      at process.processTicksAndRejections (node:internal/process/task_queues:90:21) {
    errorLabelSet: Set(1) { 'ResetPool' },
    beforeHandshake: false,
    [cause]: Error: getaddrinfo ENOTFOUND tor!
        at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:120:26) {
      errno: -3008,
      code: 'ENOTFOUND',
      syscall: 'getaddrinfo',
      hostname: 'tor!'
    }
  }
}

The one thing that sticks out to me is that the hostname is not 192.168.1.10 but is tor! I’m not sure what is going on.

I have a website that uses a text input box with a pre-generated list to auto complete data. At some point, the mobile version of chrome switched the rendering of list items to one line directly above the keyboard which lists items in a single row where the desktop version lists items as a vertical list, like a normal dropdown box.

My question is does anyone know how to revert this behavior through the server side of the website? If I can’t change this behavior back to the original way, I’ll have to change my website, as it defeats the purpose of the list to have all the data shown on a single line.