Category: javascript

So I am working on a web-based point of sales project and I want to integrate a Customer Display device to show amount due, amount paid etc. The device is connected through serial (COM Port) connection. I am trying to use JavaScript on google chrome to pass the messages to the device. So far I am able to pass and display plain texts to the device but I am not able to pass actual commands (as listed and described by the manufacturer) to control the device. Whenever I try to pass a command, the command itself is shown on the device instead of controlling the device.

Customer Display Device

This is the simple JavaScript code I am using to communicate with the device

document.querySelector('#myButton').addEventListener('click', async () => {
 
  const port = await navigator.serial.requestPort();

  const textEncoder = new TextEncoderStream();
  
  const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);

  const writer = textEncoder.writable.getWriter();

  await writer.write("CLR"); 

  /* CLR is the command to clear display screen. Instead of clearing the screen, the CLR command is shown on the screen */

});

Anyone that has experience using Customer Display Devices should please guide me on how to properly send control commands to the device.

In below that how facebook previews its images which is very dynamic and sometimes the layout is even different.

I tried to replicate it using Flexbox or Grids but it is always ‘fixed’ in layout

I were able to replicate it using javascript by checking the number of images and by that I decide the grid size for each of them, but I am still unable to figure how to make it dynamic like facebook (example with 3 and 4 pictures sometimes has the dominant picture on left if it is tall, unlike how it is on top because wider)

is there a library for that or can it be done using CSS?

HTML doesn’t work, no file where it should be stored, anyone who’s set one up, do I need to make a html file or have I installed it wrong, I followed all of the steps on the Github project. please help 🙂

I’ve set it up as it said (installed npm, and node.js, , got all the APIs and I load it and nothing happens, I’ve followed the step that allows you to access it from another machine and, low and behold, nothing happened, I cant test it on the pi because its on pi OS lite so no chromium or desktop. any tips?

I have a slider-container that has a slider-content inside it, the container is set to overflow-x: hidden; , the idea is to scroll the elements inside the slider-content to the very end of the scroll by increasing the scrollLeft, but for some reason the scrolling does not work to the end – you can clearly see this if you set the overflow value to scroll.

const sliderContainer = document.querySelector(".slider-container");
const sliderContent = document.querySelector(".slider-content");
const slides = document.querySelectorAll(".slide");

function main() {
  let scrollX = 0;

  setInterval(() => {
    if (sliderContainer && sliderContent) {
      scrollX += 0.5;
      sliderContent.scroll(scrollX, 0);

      if (sliderContainer.scrollLeft >= sliderContent.clientWidth) {
        scrollX = 0; // this code is not reached
        sliderContainer.scrollLeft = 0;
      }
    }
  }, 5);
}

main();

I need it when the maximum scroll is reached element – set its position to 0. How can this be done?
Codepen:
https://codepen.io/MadnessTony/pen/jOQaWyy

So im trying to create a whitelist for ip adresses in my api but when i do request.socket.remoteAddress
in express.js i get back a ipv6 address (i think) like this one:
::ffff:127.0.0.1
My question is how do i only get the address behind the ::ffff:

Thanks in advance!

Tried using request.headers['x-forwarded-for']

  
//Define States
const [userAnswer, setUserAnswer] = useState(0);
const [userAnswers, setUserAnswers] = useState([]);

  
//This function gets the input delegates the another function  
function getUserInputValue(input, question, idx) {
    const inpAsInt = parseInt(input);
    if (inpAsInt < 0) {
      return;
    }
    setUserAnswer(input);
  }
  const updateIndex = (newIndex, question, isNext) => {
    if (newIndex < 0) {
      newIndex = 0;
    } else if (newIndex >= questionListLength) {
      newIndex = questionListLength - 1;
    }

    setActiveIndex(newIndex);

    if (isNext) {
      const qAndAObj = {
        id: question._id,
        answer: userAnswer,
        question: question,
      };
      handleUserAnswers(qAndAObj);  //This handle the update state
    }
  };


//This update the state but not working !!!
function handleUserAnswers(obj) {
    setUserAnswers((prevState) => {
      const updatedQuestions = prevState.map((item) => {
        if (item.id === obj.id) {
          return { ...item, obj };
        }
        return item;
      });
      return {
        updatedQuestions,
      };
    });
  }


return (
    <CarouselItem>
      <div></div>
      <div></div>
      <CarouselItemText>
        {question.question}
        <QuestionInput
          name="answer"
          type="number"
          value={userAnswer}
          placeholder="Rakamsal Bir Değer Girin"
          onChange={(ev) =>
            getUserInputValue(ev.target.value, question.question, index)
          }
        />
      </CarouselItemText>
      <CarouselButtons>
        <CarouselNavButton>
          <Button
            onClick={() => updateIndex(activeIndex - 1)}
            primary
            size={"m"}
          >
            Önceki
          </Button>
          <Indicator>
            {activeIndex + 1} / {questionListLength}
          </Indicator>
          <Button
            onClick={() => updateIndex(activeIndex + 1, question, true)}
            primary
            size={"m"}
          >
            Sonraki
          </Button>
        </CarouselNavButton>
        <div>
          <Button primary size={"m"}>
            Hesaplamayı Bitir
          </Button>
        </div>
      </CarouselButtons>
    </CarouselItem>
  );

Here is the case : User enter a value from Input and after hit the next button which name is ‘Sonraki’ the state won’t update. The userAnswers array always stays as an empty array. I struggled for 2 hours but can not find the problem.

I resarched and found some solutions already just like below but can not work this time ;

Updating React state when state is an array of objects

I use fetch every 1 second with setInterval to check whether the session of the current signed url has ended, and when ok is not 200, I consider that the session has ended and notify that the session has ended. However, if you use this method, get network error 404 will occur to the user, and too many fetches may be sent, which may result in rejection.
Is there any good way using supabase api to replace this?

setInterval(function() {
   try {
    const response = await fetch(File's signed url);
    if (!response.ok) {
      throw new Error('Request faild');
    }
  } catch (error) {
    // file is excessed
    .....
  }
}, 1000);

i wanted to add a userinput in a todo list using keypress but only one character is taken by the input filed.

this is the code:

input.addEventListener("keypress", function(event){
    
    if(input.value.length>0 && event.key === 'Enter'){
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    } else input.value = "";

i tried using keyup but using Keyup does not take any input rather it just show the input for an instance but then the input filed deletes it automatically

I have a Symfony backend (BoltCMS) with a custom CaddyServer with the Mercure plugin and I am trying to send a message to my Angular 16 frontend on the event when I save something in the backend so that I can refresh the cache in the Angular application.

I am able to successfully publish the SSE from Symfony to the Mercure/CaddyServer.

However I am having some trouble subscribing to said event. Because I want to authenticate client side subscriptions I cannot use the built in mechanism in Angular if I am understood correctly?

On my search through the internet I found the ng-sse-client package with which – according to the README – I should be able to pass a authentication token in the header:

...
import { SseClient } from 'ngx-sse-client';
...

constructor(private sseClient: SseClient) {
    const headers = new HttpHeaders().set('Authorization', `Basic YWRtaW46YWRtaW4=`);

    this.sseClient.stream('/subscribe', { keepAlive: true, reconnectionDelay: 1_000, responseType: 'event' }, { headers }, 'POST').subscribe((event) => {
      if (event.type === 'error') {
        const errorEvent = event as ErrorEvent;
        console.error(errorEvent.error, errorEvent.message);
      } else {
        const messageEvent = event as MessageEvent;
        console.info(`SSE request with type "${messageEvent.type}" and data "${messageEvent.data}"`);
      }
    });
}

However, when I try to call the mentioned function, I get an error, indicating that the function call only accepts 2 erguments instead of 4: Expected 1-2 arguments, but got 4.

When I ctrl+click on the stream function to navigate to the function definition, located in node_modules/ngx-sse-client/lib/sse-client.service.d.ts, it indeed shows a function which only accepts 2 arguments:

stream(url: string, options?: {
        keepAlive?: boolean;
        reconnectionDelay?: number;
        responseType?: 'event';
    }):

The weird thing is I am able to find a function definition in another location sse-client.service.ts which does in fact have 4 arguments. So it looks like I am importing the wrong function or something?

I have looked online, but saw nobody else having similar issues, so I’m thinking I must be doing something wrong, but I’ve been unable to figure it out.

Any help would be appreciated, either in pointing me in the right direction for an alternative solution/package, or an indication regarding to what I am doing wrong in using this package.

For me it feels weird that something like this is not natively supported in Angular, but I am rather new to Angular, and its quite difficult to find consistent information online, since there are so many different versions with their respective changes.

I have also read about WebSockets, but from what I understood this would be quite overkill for my use-case. But since I have no experience with either SSE or WebSockets, I might be mistaken, and this might be a viable solution?

What I’ve tried:

I tried calling the SseClient.stream() function with 4 arguments, expecting it to work, but I got an error that it only accepts 2 arguments.

I have a client software program and in it I have a variable, can be used as a string, split, etc, which I want to use within an if statement.
So it may be A|B, in which case I want to run if(A|B)
It may be A|B|C, in which case I want to run if(A|B|C) and so on

I can’t use eval as 1, it’s a bad thing, and 2, their software blocks it
Any help appreciated.

I’ve tried splitting, rebuilding into a string, passing via another function, but it won’t play like I want it to.

Anybody ?

I’ve tried splitting, rebuilding into a string, passing via another function, but it won’t play like I want it to.

Is there an easy solution to do this? Without using multiple if, else, or case statements ?

I am trying to write an extension that will search the webpage for a specific text element and write my const into it.

Some additional context: The process flow is essentially;

1. Pop up prompts user to provide input
2. User provides input and presses submit
3. Some changes are made to the input and it is stored as ‘data’
4. Extension then searches webpage for specific text element called ‘title’
5. Extension then writes my ‘data’ const to this text element.

Here is what I have at the moment;

`

const titleInput = document.querySelectorAll('input[name="title"], textarea[name="title"]')[0];
if (titleInput.value[0]) {
  titleInput.value = titleWithoutQuotes;
} else {
  console.error('Title input field not found');
}

`

I cannot get this to write. Not sure if it is not identifying the element or not writing correctly.

‘clock.js’ is supposed to put a real-time clock in the top right corner of the webpage, and ‘sparkles.js’ puts sparkles under your cursor every time it moves.

<!DOCTYPE html>
<html>
  <head>
      <script src="/clock.js"></script>

         <link rel="shortcut icon" href="icon.ico">
    <link rel="apple-touch-icon" href="icon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    
      <script src="/sparkles.js"></script>
</head>
</html>

However I can only get one to work, I could put the whole code in for both (or just one) and it prioritizes only one of them. I could have them as far or close together as I want but it still doesn’t work. It doesn’t matter if I compress the javascript within the js file or not. I’ve looked everywhere for answers and have seen nothing.

I have this error when i lauchn eslint.

PS C:UsersutilisateurWebstormProjectsPortfolio> npx eslint .

Oops! Something went wrong! 🙁

ESLint: 8.44.0

ESLint couldn’t find the config “plugin:regex/recommended” to extend from. Please check that the name of the config is correct.

The config “plugin:regex/recommended” was referenced from the config file in “C:UsersutilisateurWebstormProjectsPortfolio.eslintrc.js”.

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

here is file eslintrc :

    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:regex/recommended",
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "regex",
    ],
    "rules": {
    },
    "settings": {
        "react": {
            "version": "9.5.0"
        }
    }

}```
Thank you for your help in advance !

I was coding my website on my laptop which 1080p laptop which has a scale of 150% in windows display settings. When I open the website on my PC, everything is too small because I used px and rem units for sizes. I don’t wanna use percentages and vw or vh for the sizes especially for the font sizes. How can I make my website look the same on both devices? They are both 1080p

The error occurred unexpectedly, without any recent changes made to the codebase. It suggests that the required module ‘core-js/modules/es.typed-array.set.js’ cannot be resolved, indicating a possible problem with the versions of the dependencies.
Here is the relevant code snippet where the error is triggered:

// Example code where the error occurs
new Uint8Array();

If anyone has encountered a similar problem or has suggestions on how to resolve this specific ‘core-js’ version conflict, I would greatly appreciate your assistance. Any insights or recommendations would be invaluable in helping me overcome this issue.

I have installed the latest version of ‘core-js’