Category: javascript

I’m trying to create an app in React using JSX and I’m a bit confused about how to distinguish my syntax (if this is even… a thing?)– I’m having some trouble knowing if I’m messing up the JSX in VSCode for a JavaScript file.

For example, in order to assign a class to something I’m trying to return w/ JSX, I know need to use className and not just “class,” — The problem I’m running into is that it’s hard to tell apart these nuances since VSCode doesn’t flag “class” as a JSX specific error (and reads it as normal JavaScript)…

Is there any way to check over JSX in VSCode for a JavaScript file or do I just have to kind of write my JSX blindly and then comb through it if there are errors?

I am currently working through a project where I am pulling all archived profiles. In order to do so we are using the after_id parameter which returns an archived flag. Currently I have the script written to where it parses the response, then filters “archivedprofiles” based on archived = true and then stores it into an environment variable “archivedProfiles” (See Image). This returns a limit of 500 users. Using this metadata we can see there are 33121 users total as well as it gives me the next URL to use. How can I set up a loop to run until there are no more users left? Or no longer an after_id value? I tried to look up some pagination examples but not getting much
enter image description here
enter image description here

I have tried to look up some pagination examples but nothing that was somewhat similar.

I’m trying to create an app in React using JSX and I’m a bit confused about how to distinguish my syntax (if this is even… a thing?)– I’m having some trouble knowing if I’m messing up the JSX in VSCode for a JavaScript file.

For example, in order to assign a class to something I’m trying to return w/ JSX, I know need to use className and not just “class,” — The problem I’m running into is that it’s hard to tell apart these nuances since VSCode doesn’t flag “class” as a JSX specific error (and reads it as normal JavaScript)…

Is there any way to check over JSX in VSCode for a JavaScript file or do I just have to kind of write my JSX blindly and then comb through it if there are errors?

Using innerHTML to set the HTML content of a node is often touted as “a bit of a problem” – but how about using it to read the HTML content of a node? Is that problematic as well and/or is there an alternative?

I’m working on creating a table component using Vuejs. The app uses laravel as the backend along with inertiajs. I have a resource that is returned for displaying a resource. In the resource I am trying to add some data that I don’t want displayed, these will be links to edit and delete the resource. I also may have to add an ID for having a checkbox on each row of the table as well.

My question is how can I exclude the links and meta from being displayed in the loop of data but then show them as a checkbox or link? It’s been a long day I hope this is clear.

PermissionResource

public function toArray($request)
{
    return [
        'name' => $this->name,
        'links' => [
            'edit' => action([PermissionController::class, 'edit'], $this),
            'delete' => action([PermissionController::class, 'destroy'], $this),
        ],
        'meta' => [
            'id' => $this->id
        ]
    ];
}

Table.vue

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
});

const hasActionLinks = ref(props.data.filter((item) => item.hasOwnProperty('links')));
const hasRowSelector = ref(props.data.filter((item) => item.hasOwnProperty('meta')));

</script>

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th v-if="hasRowSelector" scope="col">
                        <input id="selectAll" type="checkbox" v-model="selectAll" />
                    </th>

                    <th v-for="(heading, index) in Object.keys(data[0]).map((heading) => heading.replace(/_/g, ' '))" v-bind:key="index" scope="col">
                        {{ heading }}
                    </th>

                    <th v-if="hasActionLinks" scope="col">
                        Actions
                    </th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(row, index) in Object.values(data)" :key="index">

                    <td v-if="hasRowSelector">
                        <input type="checkbox" v-model="selected" :value="row.meta.id" />
                    </td>

                    <td v-for="(value, myindex) in Object.values(row)" v-bind:key="myindex">
            {{ value }}
                    </td>

                    <td v-if="hasActionLinks">
                        // EDIT AND DELETE LINKS HERE
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

This is the current result

In ReactJs, should url parameters be in useEffect array dependency? I read its unnecessary since,

1. urlParams are not being modified after page initialization.

2. Also urlParams is initialized and populated immediately when AppContainer component is rendered. This will always happens before any useEffect hooks are executed.

Is there ever a chance in Reactjs application, url parameters can be changed after page initialization?

useEffect(() => {
    if (urlParams.productId) {
      setProductId(urlParams.productId);
    }
}, [urlParams]);

I’m developing a hybrid app (WebView / Turbo Native) that uses getUserMedia to access the back camera for a PPG/heart rate measurement feature (the user places their finger on the camera).

Problem:
Even when I specify constraints like:

{
  video: {
    deviceId: '...',
    facingMode: { exact: 'environment' },
    advanced: [{ zoom: 1.0 }]
  },
  audio: false
}

On iPhone 15 (iOS 18), iOS unexpectedly switches between the wide, ultra-wide, and telephoto lenses during the measurement.

This breaks the heart rate detection, and it forces the user to move their finger in the middle of the measurement.

Question:
Is there any way, via getUserMedia/WebRTC, to force iOS to use only the wide-angle lens and prevent automatic lens switching?

I know that with AVFoundation (Swift) you can pick .builtInWideAngleCamera, but I’m hoping to avoid building a custom native layer and would prefer to stick with WebView/JavaScript if possible to save time and complexity.

Any suggestions, workarounds, or updates from Apple would be greatly appreciated!

Thanks a lot!

So I have created a plugin which essentially provides the content author to divide the CKeditor content into two columns of multiple predefined width: [50-50, 80-20, 20-80, 30-70 and so on]

The issue I am facing is that the widget is being rendered correctly the first time around but when I return to edit the content again, it doesn’t render a widget.

By widget I mean demarcations and sections inside the editor. So I have the outline, the focus on the div of the column and the small buttons on top and button to add spacing.
This is how it looks; it is a default CKEditor Widget feature

When this content is saved and the author returns back, I see that the columns are still there but the UI for the widget is no longer present. Here you can see the cursor is at the second column but there is no focus/outline of the default widget

What can I do to fix this? Is this related to editingDowncast?

conversion.for("editingDowncast").elementToElement({
  model: "twoColumns",
  view: (modelElement, { writer: viewWriter }) => {
  const className = modelElement.getAttribute("class");
  const section = viewWriter.createContainerElement("section", {
    class: className
  });
  return toWidget(section, viewWriter, {
    label: "Two col layout widget",
});


conversion.for("editingDowncast").elementToElement({
  model: "column",
  view: (modelElement, { writer: viewWriter }) => {
    const div = viewWriter.createEditableElement("div", {
      class: "layout_column",
    });
    return toWidgetEditable(div, viewWriter);
  },
});

The downcast is done through a set of classnames which are used to identify the column structure and define the css on the editor and on the front end [while rendering].

So, how do I get the CKEditor5 to recognize these elements once it is saved and bring back the Widget UI once I go back to edit the same thing again? Any direction on this issue is appreciated!

I am currently building a program that allows the user to play rock-paper-scissors against the computer through the console log. The goal is for the game to terminate after five rounds.

I was able to set up one round of the game, but I am struggling to loop it. The for loop is in line 14 of the code.

I have tried placing getComputerChoice() and getHumanChoice() both inside and outside the for loop and outside of playGame(). I was expecting the game to ask for user input, display console message with a winner and increment the round winner’s score, then repeat four more times before terminating and displaying a console message with the overall winner.

Instead, after accepting user input, no message displays in the console. There is also no error or warning to indicate issues with the code.

function playGame() {
  var humanScore = 0;
  var computerScore = 0;

  for (let i = 0; i < 5; i++) {
    function getComputerChoice() {
      let result = Math.ceil(Math.random() * 3);
      if (result === 1) {
        return "rock";
      } else if (result === 2) {
        return "paper";
      } else {
        return "scissors"
      }
    }

    const computerChoice = getComputerChoice();

    function getHumanChoice() {
      let humanResult = prompt("Let's play Rock, Paper, Scissors! Enter your choice:");
      if (humanResult.toLowerCase() === "rock") {
        return "rock";
      } else if (humanResult.toLowerCase() === "paper") {
        return "paper";
      } else if (humanResult.toLowerCase() === "scissors") {
        return "scissors";
      } else {
        return "to not follow the rules";
      }
    };

    const humanChoice = getHumanChoice();

    function playRound(humanChoice, computerChoice) {
      if (humanChoice === "rock" && computerChoice === "paper") {
        computerScore++;
        console.log(`Paper beats rock! AI wins! AI:${computerScore} Human:${humanScore}`);
      } else if (humanChoice === "rock" && computerChoice === "scissors") {
        humanScore++;
        console.log(`Rock beats scissors! You win! AI:${computerScore} Human:${humanScore}`);
      } else if (humanChoice == "rock" && computerChoice === "rock") {
        console.log("Y'all both picked rock! Let's try again!");
      } else if (humanChoice === "paper" && computerChoice === "scissors") {
        computerScore++;
        console.log(`Scissors beats paper! AI wins! AI:${computerScore} Human:${humanScore}`);
      } else if (humanChoice === "paper" && computerChoice === "rock") {
        humanScore++;
        console.log(`Paper beats rock! You win! AI:${computerScore} Human:${humanScore}`);
      } else if (humanChoice === "paper" && computerChoice === "paper") {
        console.log("Y'all both picked paper! Let's try again!");
      } else if (humanChoice === "scissors" && computerChoice === "scissors") {
        console.log("Y'all both picked scissors! Let's try again!");
      } else if (humanChoice === "scissors" && computerChoice === "rock") {
        computerScore++;
        console.log(`Rock beats scissors! AI wins! AI:${computerScore} Human:${humanScore}`);
      } else if (humanChoice === "scissors" && computerChoice === "paper") {
        humanScore++;
        console.log(`Scissors beats paper! You win! AI:${computerScore} Human:${humanScore}`);
      } else {
        console.log("Try again! That's not a choice.");
      }
    }
  }
};

playGame();

I have a table called “events_reload” inside my supabase project. In this table there is a column called “date” which is a timestampz. I want to select every events that are after the current date+time – 2 hours. So I did this in javscript (NuxtJS 3 api) :

import { serverSupabaseClient } from '#supabase/server'
import { event_type } from '~/assets/_types';

export interface event_fetch {
  code: Number;
  data: event_type[] | String;
}

export default defineEventHandler(async (event) => {
  const supabase = await serverSupabaseClient(event);

  const currentTimestampMinusTwoHours = new Date();
  currentTimestampMinusTwoHours.setHours(currentTimestampMinusTwoHours.getHours() - 2);
  const currentTimestamp = currentTimestampMinusTwoHours.toISOString();
  const timestamp = '2025-03-12T13:20:25.733Z';

  const { data, error } = await supabase
    .from("events_reload")
    .select("*")
    .gt("date", currentTimestamp)
    .order("date", { ascending: true });

  if (error) {
    return {
      code: 500,
      data: error.message
    };
  }
  return {
    code: 200,
    data: data
  };
});

It just return an empty data without any errors. But, when I execute this in SQL in the supabase panel (which is the same thing) it does return stuff SELECT * FROM "events_reload" WHERE date > '2025-03-12T13:20:25.733Z' ORDER BY date ASC LIMIT 1;
(I precise that the timestamp I’m using in the SQL query is the one that the javascript code is logging me)

I’m using Passport.js with Google OAuth 2.0 in my Node.js app to authenticate users and request access to Google Calendar events. Despite adding the calendar.events scope in both my Passport strategy and Google Cloud Console, the consent screen does not prompt for calendar access, and the returned access token is missing the calendar.events scope.

What I’ve tried:

Added calendar.events in the Passport strategy:

`passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      callbackURL: process.env.BACKEND_HOST + "/auth/google/callback",
      scope: [
        "email",
        "https://www.googleapis.com/auth/calendar.events"
      ],
      accessType: "offline",
      prompt: "consent",
    },
    async (accessToken, refreshToken, profile, done) => {
      console.log("access token", accessToken);
      const response = await fetch(
        "https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=" +
          accessToken
      );
      const data = await response.json();
      console.log("Token Info:", data);
    }
  )
);`

1. Verified that calendar.events is added in the Google Cloud Console
   under OAuth consent screen.

2. Tested with https://www.googleapis.com/oauth2/v1/tokeninfo to
   inspect the access token — only the default userinfo.email,
   userinfo.profile, and openid scopes are present.

3. Added prompt: “consent” and accessType: “offline” to force
   re-consent.

4. Revoked access via Google Permissions and retried, but still no
   prompt for calendar access.

Expected behavior:

The Google consent screen should prompt for calendar access when logging in.
The access token should include the calendar.events scope.
Actual behavior:

No calendar permission prompt is shown, and the token is missing the calendar.events scope.
What could be causing this?

Is there any additional configuration required to request calendar.events?
Could it be related to how Passport.js handles the scope?

I am calling get API which is taking more than 22s due to some expensive DB query from API. I need to call this api using web worker . Here is my current ngOnInit

    ngOnInit() {
     this.fethDetails() 
   }
 
    fetchDetails(){
             this.serviceName.getList().subscribe({
              next: (data) => {
              this.siteLists = data;
            },
           error: (error) => {
           console.log(error)
           },
          complete: () => {
          console.log('complete')
            }
          })     
         }


      /// <reference lib="webworker" />

      addEventListener('message', ({ data }) => {
      const response = // need to call fetchDetails();
      postMessage(response);
      });



      if (typeof Worker !== 'undefined') {
        // Create a new
      const worker = new Worker(new URL('./report.worker', import.meta.url));
      worker.onmessage = ({ data }) => {
      console.log(`page got message: ${data}`);
      };
      worker.postMessage('hello');
      } else {
      // Web Workers are not supported in this environment.
      // You should add a fallback so that your program still executes correctly.
      }

 

I need to call my fetchDetails() function from worker but not able to call its showing error .

   addEventListener('message', ({ data }) => {
      const reportData = // need to call fetchDetails();  //fetchDetails();
      postMessage(reportData);
   });

I have a Plain TCP socket server created using C++. I need to connect to it from the web using JavaScript.

I went through the following approaches, but they are deprecated:

• Navigator TCP Permission API (Deprecated) : Connecting to TCP Socket from browser using javascript
• Chrome Apps Sockets API (Deprecated) : https://developer.chrome.com/docs/apps/migration#:~:text=The%20preferred%20alternative%20for%20migrating,achievable%20with%20Chrome%20App%20APIs.,

Most articles suggest using WebSockets instead of plain TCP sockets. However, this is a user requirement.

Is it possible to connect to a plain TCP socket server from the web using JavaScript? If not, please provide a proper reason or an official link.

I have a page that contains 3 static/max- height divs.

The second div contain input and text area fields for users to provide response and is limited to a height of 5 inches (due to this form being printed on 8.5″x11″ paper).

Is there a way, either via JS or CSS, that I can change the background-color of this div to visually indicate when the contents have overflowed?

I have a workspace that has two sections, apps and packages. I would like to run the build command on all workspaces that are only in the packages folder. How can this be done?

The main package.json has workspaces defined like this:

{
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

The command that I tried is this, but it doesn’t execute in the child workspaces. I assume that it is trying to find this folder packages/* and not a wild card like command.

npm run build --if-present -w packages/*

Removing the --if-present flag outputs:

npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: Missing script: "build"

Placing the path in quotes results in no workspaces found:

npm ERR! No workspaces found:
npm ERR!   --workspace=packages/*