I’m programming a basic chatroom using the PeerJS library, and I would like to have autocomplete functional for that library. However, I am using the web version of VSCode because I am using a shared computer that I can’t install anything on, so I can’t use TypeScript or Automatic Type Acquisition as I can’t use NPM. Is there any way for me to get autocomplete working?

Problem

Environment variables defined in nuxt.config.ts are retrieved correctly, but external scripts (e.g., Google Analytics and Chatway) relying on these variables are not working. The scripts are appended to the DOM but fail to initialize.

What Works

• Formspree form ID (config.public.FORMSPREE) works as expected.

What Fails

• Google Analytics script is appended but tracking does not work.
• Chatway script is appended but the chat widget does not appear.

Relevant Code

const loadAfterConsentScripts = () => {
  const config = useRuntimeConfig();
  const scripts = [
    `https://www.googletagmanager.com/gtag/js?id=${config.public.GOOGLE_ANALYTICS}`,
  ];
  loadScripts(scripts);

  // Initialize Google Analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", config.public.GOOGLE_ANALYTICS);
};

const loadChatwayScript = () => {
  const config = useRuntimeConfig();
  const chatwayScript = document.createElement("script");
  chatwayScript.id = "chatway";
  chatwayScript.async = true;
  chatwayScript.src = `https://cdn.chatway.app/widget.js?id=${config.public.CHATWAY}`;

  chatwayScript.onload = () => {
    console.log("Chatway script loaded.");
    if (window.Chatway && typeof window.Chatway.init === "function") {
      window.Chatway.init();
    } else {
      console.error("Chatway did not initialize.");
    }
  };

  document.body.appendChild(chatwayScript);
};

Environment

• Nuxt Version: 3.17.2

Question

Why are the Google Analytics and Chatway scripts failing to initialize, even though the environment variables are correctly retrieved and the scripts are appended to the DOM? How can I ensure these scripts initialize properly in Nuxt 3?

Thank you! Any help is appreciated.

I’m new here and I’m new in this field (still studying). I’m not sure whether and where to post this question, I apologize for that. I’ve been wanting to ask this for while, but have none to ask to. I’m curious about it though.
Which are the elements that let someone know if a code was written by a human or by AI? How can you tell? Is that a question I am allowed to ask?

I’m still in the learning process and on the way I’ve used Copilot and Gemini as tools to better understand and have things explained to me when I didn’t understand it on my own. I’m not sure if I’ve done wrong in using AI in such a way, thus I’ve wanted to ask if a code written by AI is so different and what elements make someone say “ah, yes that’s AI generated”.

Thank you in advance.

I’m encountering the following error right after I deploy my Discord.js v14 bot:

TypeError: Cannot read properties of undefined (reading 'has')
at Client.<anonymous> (/home/runner/bot/index.js:45:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)

Relevant code (simplified)

    client.on('voiceStateUpdate', async (oldState, newState) => {
  const oldChannel = oldState.channel;
  if (oldChannel && createdRooms.has(oldChannel.id)) {
    // Error is thrown on the next line:
    if (
      oldChannel.members.size === 0 ||
      (oldChannel.members.size === 1 && oldChannel.members.has(client.user.id))
    ) {
      await oldChannel.delete();
      createdRooms.delete(oldChannel.id);
    }
  }
  // ...other logic...
});

What I’ve tried:

• Logged oldChannel.members and saw GuildMemberManager { cache: Collection(1) } before the crash
• Verified the bot has both ViewChannel and ManageChannels permissions
• Tested both locally and on VPS same error every time

Questions:

• Why is oldChannel.members sometimes undefined when I expect a `GuildMemberManager?
• How can I safely check or await until oldChannel.members is ready before calling .has()?
• Is there a better pattern to auto-delete an empty voice channel without triggering this exception?
  Any guidance would be much appreciated. Thanks!

I have a PWA and a Chrome extension, which work in conjunction. I need to be able to receive notifications from BE, do not loose any of them and also be able to programmatically close them (i.e. when such notification is expired).

The most straightforward way is to leverage Push API, but the client does not want to make adjustments to their BE, so I’m stuck with websockets.

Is there something I’m missing and is there a way to make use of websockets in this manner, or I have to push for Push API?

Note: I’m not interested in conserving resources in mobile browsers, main platform will be desktop.

I tried doing this both from PWA service-worker and extension service-worker, but it seems that there is no way to guarantee that both service workers will be up and running, even if websocket is actively communicating.

I raun this code and I received error below:

Error: Error when checking target: expected dense_Dense2 to have 2 dimension(s). but got array with shape 2,5,2

Can anyone help me?

const tf = require('@tensorflow/tfjs');
let log = console.log;

let value_x = [
  [1, 1, 1, 1, 1],
  [1, 1, 1, 1, 0]
];
let value_y = [
  [
    [1, 0],
    [1, 0],
    [1, 0],
    [1, 0],
    [1, 0]
  ],
  [
    [1, 0],
    [1, 0],
    [1, 0],
    [1, 0],
    [1, 0]
  ]
];

const model = tf.sequential();
model.add(tf.layers.dense({
  inputShape: [5],
  units: 10
}));
model.add(tf.layers.dense({
  units: 5
}));
model.compile({
  loss: 'meanAbsoluteError',
  optimizer: 'sgd',
  metrics: ['mse']
}); //adam

const xs = tf.tensor2d(value_x, [2, 5]);
const ys = tf.tensor3d(value_y, [2, 5, 2]);

xs.print();
ys.print();
log();

model.fit(xs, ys, {
  epochs: 10,
  callbacks: {
    onEpochEnd: (epoch, log) => {
      console.log(epoch, '- ', log.loss);
    }
  }
}).then(() => {
  const a = model.predict(tf.tensor2d([1, 1, 1, 0, 0], [1, 5])).arraySync();
  log(a);
});

In my Angular guard I want to be able to control the arrow buttons from the browser. When the user clicks the back arrow I want to cancel the navigation and just return 1 page in my dialog.

Canceling the navigation seems to work because of the guard system in Angular. The strange part is that when my guard returns false (don’t route away) it closes my dialog. Even when setting the disableClose property to true.

Any idea on why this is happening?

public canDeactivate(component: any): Observable<boolean> | boolean {
if (this.navigationHelperService.browserBackArrowClicked && this.navigationHelperService.contentSwitcherDialogActive()) {
  this.navigationHelperService.browserBackArrowClicked = false;
  this.contentSwitcherService.dialogRef.disableClose = true;
  return false;
}

this might be silly, but not my form nor my formdata are receiving my file input’s image
i want to the image to server folder using php
but my php code never receives any image.

this is my code:

<form id="AZA-addatc-form" method="post" enctype="multipart/form-data">
        <div class="AZA-addatc-form-group">
            <label for="AZA-addatc-title" class="AZA-addatc-label">article title</label>
            <input type="text" id="AZA-addatc-title" name="AZA-addatc-title" class="AZA-addatc-input" required>
        </div>

        <div class="AZA-addatc-form-group">
            <label for="AZA-addatc-image" class="AZA-addatc-label">article picture</label>
            <input type="file" id="AZA-addatc-image" name="AZA-addatc-image" class="AZA-addatc-file-input" accept="image/*">
            <img id="AZA-addatc-preview" class="AZA-addatc-preview" src="#" alt="Image Preview">
            <small>choose image less than 5MB</small>
        </div>

        <div class="AZA-addatc-form-group">
            <label for="AZA-addatc-content" class="AZA-addatc-label">content</label>
            <div id="AZA-addatc-editor"></div>
            <textarea id="AZA-addatc-content" name="AZA-addatc-content" style="display:none;"></textarea>
        </div>

        <div class="AZA-addatc-form-group" style="visibility: hidden">
            <label class="AZA-addatc-label">
                <input type="checkbox" id="AZA-addatc-status" name="AZA-addatc-status" checked>
                Publish Immediately
            </label>
        </div>

        <button type="submit" class="AZA-addatc-submit">submit</button>
    </form>

const form = document.getElementById('AZA-addatc-form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // Get content from Quill editor
        const content = document.getElementById('AZA-addatc-content');
        content.value = quill.root.innerHTML;

        // Validate form
        const title = document.getElementById('AZA-addatc-title').value.trim();
        const image = imageInput.files[0];
        console.log(image);

        if (!title) {
            showAlert('article title required', 'error');
            return;
        }

        if (!image) {
            showAlert('choose an image', 'error');
            return;
        }

        if (!content.value || content.value === '<p><br></p>') {
            showAlert('enter content', 'error');
            return;
        }

        // Prepare form data
        const formData = new FormData(form);
        // formData.append('AZA-addatc-title', document.getElementById('AZA-addatc-title').value);
        // formData.append('AZA-addatc-image', image);
        // formData.append('AZA-addatc-content', quill.root.innerHTML);
        // formData.append('AZA-addatc-status', document.getElementById('AZA-addatc-status').checked ? '1' : '0');
        formData.append('action', 'add_article');

        // Submit via AJAX
        submitArticle(formData);
    });

    // AJAX submission
    function submitArticle(formData) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'assets/php/database/A-add-article.php', true);

        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        showAlert(response.message, 'success');
                        form.reset();
                        quill.setContents([]);
                        imagePreview.style.display = 'none';
                    } else {
                        showAlert(response.message, 'error');
                    }
                } catch (e) {
                    showAlert('Error parsing server response', 'error');
                }
            } else {
                showAlert('quest error', 'error');
            }
        };

        xhr.onerror = function() {
            showAlert('server error', 'error');
        };
        console.log(formData);
        xhr.send(formData);
    }

    // Show alert message
    function showAlert(message, type) {
        const alertDiv = document.getElementById('AZA-addatc-alert');
        alertDiv.textContent = message;
        alertDiv.className = 'AZA-addatc-alert AZA-addatc-alert-' + type;
        alertDiv.style.display = 'block';

        setTimeout(() => {
            alertDiv.style.display = 'none';
        }, 5000);
    }

i do these but at last my image input returns empty into formdata

"AZA-addatc-image" → {}

i can’t find what is wrong with this can any one help me out of this?

I am using AM charts 4, I have a chart with a value axis (y) and a date axis (x), which has a line series and a column series. You can see a copy of it here: https://stackblitz.com/edit/vue-8hpoeo6q

It works as expected and looks like this:

The config/data and chart initialization for this chart looks like this:

const xAxis = {
      type: 'DateAxis',
      title: {
        text: 'Date',
      },
      dataFields: {
        category: 'date',
      },
    };

    const yAxis = {
      type: 'ValueAxis',
      title: {
        text: 'Score',
      },
      min: 0,
      max: 25,
      calculateTotals: true,
    };

    const scoreSeries = {
      type: 'LineSeries',
      name: 'Scores',
      stroke: '#328170',
      strokeWidth: 3,
      dataFields: {
        valueY: 'score',
        dateX: 'date',
      },
      bullets: [
        {
          type: 'Bullet',
          children: [
            {
              type: 'CircleBullet',
              width: 30,
              height: 30,
            },
          ],
        },
      ],
    };

    const eventSeries = {
      type: 'ColumnSeries',
      name: 'Events',
      fill: '#000',
      stroke: '#000',
      stacked: false,
      clustered: false,
      dataFields: {
        valueY: 'eventScore',
        dateX: 'eventDate',
      },
    };

  const data = [
      {
        score: 30,
        date: '2025-04-30',
      },
      {
        score: 22,
        date: '2025-05-02',
      },
      {
        score: 17,
        date: '2025-05-08',
      },
      {
        score: 8,
        date: '2025-05-14',
      },
      {
        eventScore: 10,
        eventDate: '2025-05-02',
      },
      {
        eventScore: 10,
        eventDate: '2025-05-08',
      },
      {
        redScore: 20,
        colourDate: '2025-04-30',
      },
      {
        yellowScore: 15,
        colourDate: '2025-04-30',
      },
      {
        greenScore: 5,
        colourDate: '2025-04-30',
      },
    ];

am4core.createFromConfig(
      {
        data: data,
        xAxes: [xAxis],
        yAxes: [yAxis],
        series: series,
      },
      'chart',
      am4charts.XYChart
    );

Now what I would like to do is add a stacked bar which spans the entire full width of the chart and sits behind the existing line and column series.

I added some new series for each chunk of the stack:

const redSeries = {
      type: 'ColumnSeries',
      name: 'Red',
      fill: '#FF0000',
      stroke: '#FF0000',
      stacked: true,
      clustered: false,
      columns: {
        template: {
          width: am4core.percent(100),
        },
      },
      dataFields: {
        valueY: 'redScore',
        valueYShow: 'totalPercent',
        dateX: 'colourDate',
      },
    };

    const yellowSeries = {
      type: 'ColumnSeries',
      name: 'Yellow',
      fill: '#FFFF00',
      stroke: '#FFFF00',
      stacked: true,
      clustered: false,
      columns: {
        template: {
          width: am4core.percent(100),
        },
      },
      dataFields: {
        valueY: 'yellowScore',
        valueYShow: 'totalPercent',
        dateX: 'colourDate',
      },
    };

    const greenSeries = {
      type: 'ColumnSeries',
      name: 'Green',
      fill: '#008000',
      stroke: '#008000',
      stacked: true,
      clustered: false,
      columns: {
        template: {
          width: am4core.percent(100),
        },
      },
      dataFields: {
        valueY: 'greenScore',
        valueYShow: 'totalPercent',
        dateX: 'colourDate',
      },
    };

I added the new series to my series array:

const series = [
      redSeries,
      yellowSeries,
      greenSeries,
      scoreSeries,
      eventSeries,
    ];

And I added some new data items with the required properties:

const data = [
      rest of data...,
      {
        redScore: 20,
        colourDate: '2025-04-30',
      },
      {
        yellowScore: 15,
        colourDate: '2025-04-30',
      },
      {
        greenScore: 5,
        colourDate: '2025-04-30',
      },
    ];

The stackblitz for this one is: https://stackblitz.com/edit/vue-b9kspsqj

Now the chart looks like this:

First issue is the new stack isn’t a stack – all three bars are there but they are directly on top of each other and only the last one defined shows.

Secondly, is it possible to have the stack fill the entire with of the chart? I tried adding a template width for the three colour series, like this:

const redSeries = {
  rest of series config...,
  'template': {
    'width': am4core.percent(100),
  },

But this just makes the column take up 100% of the cell, not the entire chart. How can I fix the stacking, and make the stack take up the full width of the chart? Should I add another axis which isn’t a date axis, a category axis with just a single category perhaps?

how can i Load random javascript on page load or refresh?

example script :

i want to load one script randomly when page load or refresh from this two or more script.

this code is ads code i can’t modify. one of script come with id (data-admpid=”326985″) so that id need for ad network.

have any way to load this script randomly ?

Note : i want put full code not only .js link.

i found this on google

<script>
    const jsFiles = ['script1.js', 'script2.js', 'script3.js'];

function loadRandomJS() {
  const randomIndex = Math.floor(Math.random() * jsFiles.length);
  const randomJsFile = jsFiles[randomIndex];

  const script = document.createElement('script');
  script.src = randomJsFile;

  document.head.appendChild(script);
}

loadRandomJS();
</script>

I don’t know where the problem is occurring. And also, is there any chance that MongoDB is in another directory, which is why it’s not connecting?

how can i Load random javascript on page load or refresh?

example script :

i want to load one script randomly when page load or refresh from this two or more script.

Note : i want put full code not only .js link.

i found this on google

<script>
    const jsFiles = ['script1.js', 'script2.js', 'script3.js'];

function loadRandomJS() {
  const randomIndex = Math.floor(Math.random() * jsFiles.length);
  const randomJsFile = jsFiles[randomIndex];

  const script = document.createElement('script');
  script.src = randomJsFile;

  document.head.appendChild(script);
}

loadRandomJS();
</script>

How can I mouse hover and click the user 2?
Somehow, I am unable to find the solution, could anyone help me on this

describe('Mouse Hover', () => {                           
  it('should display the tooltip on hover', () => {
    cy.visit('https://the-internet.herokuapp.com/hovers');
    cy.get("img[alt$='User Avatar']").last().trigger('mouseenter'); // Use realHover to trigger the hover event
    //cy.get("img[alt$='User Avatar']").last().trigger('mouseover');
    cy.get('.figcaption').last().should('be.visible',{focus:true});
    cy.get('.figcaption').last().find('h5').should('contain.text', 'name: user3')
    //cy.get('.tooltip').should('be.visible');
  });
});

import NextHead from "next/head";
//...
return (
    <NextHead className="header">
      //...
    </NextHead>
)

I am doing a WCAG check on our websites, and getting warnings for redundant <noscript> tags that next/head seems to be automatically generating:

<noscript data-n-css="" style=""></noscript>
<noscript id="__next_css__DO_NOT_USE__" style=""></noscript>

Is there a way to turn off these noscript elements?

(English is not my first language btw)

---

I’m doing this school project and I’m using heroui as my component library, i thought I updated it to tailwind 4 and did the changes I thought I was supposed to do but when I run my website, and enter the /login page it loads the globalcss and normal tailwind classes, but when i import a component like:

Login.tsx

import { Container } from "@/components/container";
import { Text } from "@/components/text";
import { Input } from "@heroui/react";

export default function Login() {
  return (
    <Container className="flex min-h-[calc(100vh-140px)] items-center justify-center py-8">
      <div className="w-full max-w-md space-y-6 rounded-lg border p-8 shadow-sm">
        <Text as="h1" size="heading-4" className="text-center">
          Iniciar sesión
        </Text>

        <Input />

        <Text as="p" className="text-center">
          ¿No tienes cuenta?{" "}
          <a href="/register" className="text-primary underline">
            Regístrate
          </a>
        </Text>
      </div>
    </Container>
  );
}
 

It just doesn’t render with css .-., don’t know whats wrong but, I’d appreciate any help ^.^

Here’s my postcss config:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;
 

here’s my tsconfig:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "ES2017"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "tailwind.config.js",
    "./src/*"
  ],
  "exclude": ["node_modules"]
}

nextjs config:

const removeImports = require("next-remove-imports")();

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  pageExtensions: ["ts", "tsx", "mdx", "md"],
  experimental: {
    mdxRs: true,
  },
};

module.exports = removeImports(nextConfig);

and my global.css:

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1a1a1a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

[Here’s how it looks][1]
[1]: https://i.sstatic.net/2NQTuiM6.png