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

I’m little bit confused with docker and containers, let’s say I have 2 folders

• front
• back

on front folder i use purgecss to delete unused css from my scripts and also from my .pug filels inside back without docker this is easy to just do something like

../back/src/ui/views/**/*.pug

now I’m trying to migrate my setup to docker and docker compose

services:
  nginx:
    build:
      context: ../nginx
      dockerfile: Dockerfile
    container_name: nginx
    ports:
      - '3000:80'
      - '443:443'
    volumes:
      - ../../core/front/static:/usr/share/nginx/static:ro
    networks:
      - app-network

  front:
    build:
      context: ../../core/front
      dockerfile: infra/Dockerfile.dev
    container_name: front
    volumes:
      - ../../core/front/:/app
    networks:
      - app-network

  back:
    build:
      context: ../../core/back
      dockerfile: infra/Dockerfile.dev
    container_name: back
    environment:
      NODE_ENV: development
    volumes:
      - ../../core/back/:/app
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

now the path ../back/src/ui/views/**/*.pug won’t work anymore since front and back are running in different containers not locally anymore, is it possible to do that or it’s not possible if both running in different containers ?

I have a simple web page with some divs with data in them, and I would like to make some of the text editable by using Malle.js. This is super simple in theory, and it works perfectly for any text that is put directly into the HTML with the attribute data-malleable.

However, I am generating all that HTML with another bit of javascript. I thought doing that with a promise and then initialising Malle in the then clause should do the trick, but it doesn’t.

This is what I’ve got:

let promise = new Promise(function(resolve, reject) {
    let t = "test";
    createOutput();
    resolve(t);
}).then((t) => {
    console.log(t); //this works!
    console.log(document.querySelectorAll('.percent')); // this works as well
    // this still only targets the element that I put directly in the HTML
    let malle = new Malle({
        fun: (value, original, event, input) => {
            console.log(`New text: ${value}`);
            console.log(`Original element:`);
            console.log(original);
            return myFunctionReturningAPromiseString();
        },
    }).listen();
});

So the question is, how can I get Malle to grab all those lovely generated spans that have the data-malleable attribute?

I was reading the MDN documentation on this in DOM event handlers which states:

When a function is used as an event handler, its this parameter is bound to the DOM element on which the listener is placed.

However, in practice this seems to be slightly misleading, because the listener’s this is actually bound to whatever EventTarget you attached it to—even if it isn’t an HTML element. For example:

// 'document' is not an Element node, but an EventTarget
document.addEventListener('visibilitychange', function() {
  // `this` === document
  console.log(this.hidden, document.hidden); // both true/false
});

Here, inside the handler, this.hidden behaves exactly like document.hidden. Similarly, if I do:

window.addEventListener('resize', function() {
  console.log(this === window); // true
});

…the same principle applies: this is the EventTarget (in this case, window), not necessarily a DOM Element.

---

1. Is the MDN wording inaccurate or just informal?
2. What is the precise specification language for what this refers to in an event listener callback?
3. Should MDN’s phrasing be updated to mention “EventTarget” rather than “DOM element”?

Any references to the DOM/EventTarget spec or other authoritative sources would be greatly appreciated!

I am trying to implement a simple Okta PKCE authentication. I am getting redirected to my callback URL with this error:

error=invalid_request&error_description=PKCE+code+challenge+contains+illegal+characters.

There is an article describing it, but it is not really helpful. The problem seems to be that my code_challenge contains the characters + and =, which is totally normal for base64. The okta docs say:

The code_challenge is a Base64-encoded SHA256 hash of the code_verifier

This is how I generate the hash, for testing I just use constant string:

import * as node_crypto from 'node:crypto';

class OktaAccessManager {
    constructor() {
        // todo: remember and periodically purge
        this.challenges = new Map();
    }

    createChallenge() {
        const randomString = "ddd";
        const hash = node_crypto.createHash('sha256')
               .update(randomString)
               .digest('base64');
        const challenge = {
            hash: hash,
            method: 'sha256',
            secretString: randomString
        };
        return challenge;
    }

Then I just generate simple redirect in my Express server:

const redirectUrl = `https://${SERVER_HOSTNAME}/auth/okta-callback`;
const challenge = oktaManager.createChallenge();
const params = new URLSearchParams({
    client_id: "XXXXXXXXXXXXXXXXX",
    state: "state-AAAAAAA-AAAA-AAAA-25cf-386e3d8967e9",
    redirect_uri: redirectUrl,
    response_type: "code",
    scope: "email openid",
    code_challenge: challenge.hash,
    code_challenge_method: "S256",
});
const fullURL = new URL(`https://${OKTA_SERVER}/oauth2/v1/authorize`);
fullURL.search = params.toString();
res.header("Cache-Control", "no-store");
res.header("Pragma", "no-cache");
res.header("X-Content-Type-Options", "nosniff");
res.header("X-Frame-Options", "DENY");
res.header("X-XSS-Protection", "1; mode=block");
res.redirect(301, fullURL.toString());

When I do this, I get redirected to my redirect_uri with the GET params describing the error.

So what exactly do I do with the base64 so that okta accepts it?

I have the following HTML structure (simplified JSX output):

<span>
  <div className="employment-detail">
    <span className="tuple-details_subDetail__ntttw">
      <span title="Developer III - Full Stack Web Development">
        <span>Developer III - Full Stack Web Development</span>
      </span>
      at
      <span title="UST Global">
        <span>UST Global</span>
      </span>
    </span>
  </div>

  <span>, since Dec ‘25</span>
</span>

Issue is this is being rendered as –

Developer III - Full Stack Web Development at UST Global
, since Dec ‘25

which looks very tacky
I want this to behave as it is one single line and output to be –

Developer III - Full Stack Web Development at UST Global, since Dec ‘25

I cannot change the HTML structure (i.e., can’t replace the with a ), but I can modify the CSS.

Is there a pure CSS solution to ensure everything appears on the same line and avoids this awkward line break before the comma?

Thanks in advance!