Category: javascript

I want to recreate a rocket launch animation similar to the one in this game:
https://100hp.app/astronaut/onewin/?exitUrl=https%253A%252F%252F1wufjt.life%252Fcasino&language=en&b=demo
The animation shows a rocket launching, flying up, and then flying away.
I noticed they do this using only HTML, CSS, and JavaScript, without canvas or WebGL.
I’m not sure what techniques to use to recreate this kind of smooth animation using just those technologies.

I tried using CSS animations and JavaScript to move and transform HTML elements representing the rocket, but I’m struggling to get smooth and realistic movement like the original.
I expected to have the rocket launch and fly smoothly, but my attempts look choppy or don’t have the same effects.
I’d appreciate any example or advice on the best approach to achieve this.

I’m developing a Chrome Extension that analyzes the current tab’s URL using a content script (contentKeywords.js) and saves the number of suspicious keywords found to chrome.storage.local under keyWords. I would like to pass the number of key words found to popup.js (that will display the info to index.html, the pop-up menu displayed in the top right of a browser extension).

When the popup (popup.js) opens, it tries to read keyWords, but always gets the default value (e.g. 0) — even though I can see in the console that the content script does run and correctly sets the value (I can verify this by reading it manually in the DevTools console).

Debugging notes:

1. If I hardcode a value using chrome.storage.local.set({debug: 5}) in
   the content script, the popup reads that just fine when adjusting
   the code to read ‘debug’.
2. Adding setTimeout delays in popup.js (even up to 1000ms) doesn’t reliably solve the problem (see code).
3. Content script is listed correctly in manifest.json and runs as expected (verified with console logs).
4. Permissions include “storage” and content script matches “<all_urls>”.

Can anyone help me so that popup.js can read the correct value and pass it to index.html (the pop-up extension menu)

contentKeywords.js:

const susKeywords = ["warning","urgent","login","confirm"];



function checkURLForKeywords() {
  const currentURL = window.location.href.toLowerCase();  

  let noKeywords = 0;
  for (let keyword of susKeywords) {
    if (currentURL.includes(keyword.toLowerCase())) {
      console.log(`Suspicious keyword: "${keyword}" was found in the URL.`);
      noKeywords++;
    }
  }

  if (noKeywords === 0) {
    console.log("No suspicious keywords found in the URL.");
    chrome.storage.local.set({
    keyWords: 0
  });
  }

  else if (noKeywords === 1) {
    console.log("1 suspicious keyword found");
    chrome.storage.local.set({
    keyWords: 1
  });
  }

  else if  (noKeywords === 2) {
    console.log("2 suspicious keywords found");
    chrome.storage.local.set({
    keyWords: 2
  });
  }

  else if  (noKeywords >= 3) {
    console.log("3 or more suspicious keywords found!");
    chrome.storage.local.set({
    keyWords: 3
  });
  }
}
checkURLForKeywords();

Here is popup.js;

document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
    chrome.storage.local.get(['keyWords'], (data) => {
        const imagePhish = document.getElementById("phish-image")
        const phishtext = document.getElementById("phish-text")
        const phishTitle = document.getElementById("phish-title")

    if (imagePhish && phishtext && phishTitle) {
      const susCount = Number(data.keyWords?? 0);
      console.log("susWords value from storage:", susCount);

      phishtext.textContent = `Suspicious keyword count: ${susCount}`;
      phishTitle.textContent = `Phishing Score: ${susCount}`;

      if (susCount === 5) {
        imagePhish.src = "images/yes1.png";
      } else if (susCount === 2) {
        imagePhish.src = "images/maybe1.png";
      } else if (susCount === 3) {
        imagePhish.src = "images/no1.png";
      } else {
        imagePhish.src = "images/yes1.png"; // Assume safe
      }
    }
    
  });
  }, 1000);
});

Thanks in advance for any help… 🙂

I’m working with an Electron application that uses Bytenode to compile JavaScript files into V8 bytecode (.jsc files). I need to analyze the code for security auditing purposes, but I can’t access the original source.

What I’ve tried:

1. Looking for official decompilation tools for Bytenode, but couldn’t find any
2. Using javascript-decompiler with jsd main.jsc, but it only produced incomplete/corrupted output
3. Creating a wrapper script that loads the .jsc file and attempts to use reflection:

   const bytenode = require('bytenode');
   const module = require('./main.jsc');
   console.log(Object.keys(module));
   

   But this only reveals exported objects, not the implementation details

Environment details:

• Node.js version: 16.15.0
• Electron version: 21.3.1
• Bytenode version: 1.4.1
• File details: main.jsc (4.2MB)

Questions:

1. Is there a reliable way to decompile .jsc files back to JavaScript?
2. Are there any tools that can extract function signatures or API information from V8 bytecode?
3. If full decompilation isn’t possible, are there techniques to understand the code flow or behavior without the source?

I understand that bytecode is designed to be difficult to reverse engineer, but any insights or partial solutions would be greatly appreciated.

I have ACF form to send opinions. Everything works fine, the submit button sends opinon to the server. The problem is that when the user presses the submit button, a pop-up window appears saying: “Leave the page? The changes you made may not be saved.” I will mention that after submitting the form, the user actually goes to another subpage (thank you page), but this subpage is on the same domain. Is there any safe way to prevent this window from appearing and redirect user on “thank you page” and still have proper recapcha verification?

JavaScript

function onSubmit(token) {
        document.getElementById("acf_testi").submit();
}

PHP

<main>
        <div class="container testi">
                <div class="wrapp">
                        <div class="content">
                                <?php if( have_posts() ):
                                        while( have_posts() ): the_post();
                                                the_content();
                                        endwhile;
                                endif; ?>
                        </div>
                        <div class="testi-form">
                                <h2>Add opinion</h2>
                                <?php $settings = array(
                                        'post_id' => 'new_post',
                                        'post_title' => false,
                                        'post_content' => false,
                                        'id' => 'acf_testi',
                                        'new_post' => array(
                                                'post_type' => 'testimonials',
                                                'post_status' => 'pending',
                                        ),
                                        'submit_value' => __("Send opinion", 'acf'),
                                        'html_submit_button'  => '<input id="submit-testi" type="submit" class="acf-button button button-primary button-large g-recaptcha" data-sitekey="MY_SITE_KEY" data-callback="onSubmit" data-action="submit" value="%s" />',
                                        'return' => home_url('/thank-you-page/'),
                                );
                                acf_form( $settings ); ?>
                        </div>
                </div>
        </div>
</main>

function.php

/* reCaptcha ACF */
add_filter("acf/pre_save_post", function($post_id) {
    if (!isset($_POST["g-recaptcha-response"])) {
        wp_die("Error reCAPTCHA: Missing tokena.");
    }

    $secret = "MY_SECRET_KEY";
    $response = $_POST["g-recaptcha-response"];
    $remoteip = $_SERVER["REMOTE_ADDR"];

    $url = "https://www.google.com/recaptcha/api/siteverify";
    $data = [
        "secret"   => $secret,
        "response" => $response,
        "remoteip" => $remoteip
    ];

    $options = [
        "http" => [
            "header"  => "Content-type: application/x-www-form-urlencodedrn",
            "method"  => "POST",
            "content" => http_build_query($data)
        ]
    ];

    $context  = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    $resultJson = json_decode($result);

    if (!$resultJson->success || $resultJson->score < 0.5) {
        wp_die("Error reCAPTCHA: Verification failed. Please try again.");
    }

    return $post_id;
});

I have a list of names (ul, li elements) and a hidden div on top
When a name is clicked (selected), the background color of the name should change and the div on top display block. Only when all names are deselected, the div displays none.
I’ve tried something but finding challenge with the last part (get the div display none only none of the name is selected).

const usersListItems = document.querySelectorAll(".users__list-item");
const myDiv = document.querySelector(".mydiv");
usersListItems.forEach((usersListItem) => {
  usersListItem.addEventListener("click", () => {
    usersListItem.classList.toggle("selected");
    if (usersListItem.classList.contains("selected")) {
      myDiv.classList.remove("hide");
    } else {
      myDiv.classList.add("hide");
    }
  });
});

.mydiv {
  width: 100%;
  height: 50px;
  border: 1px solid;
}

.hide {
  display: none;
}

.users__list-item,
.no-users {
  list-style: none;
  padding: 0.5em;
  background: #ddd;
  margin: 0.5em;
}

.selected {
  background: dodgerblue;
  color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>List Selection</title>
</head>

<body>
  <div class="">
    <div class="mydiv hide"></div>
    <ul class="users__list">
      <li class="no-users hide">No users</li>
      <li class="users__list-item">User 1</li>
      <li class="users__list-item">User 2</li>
      <li class="users__list-item">User 3</li>
      <li class="users__list-item">User 4</li>
      <li class="users__list-item">User 5</li>
      <li class="users__list-item">User 6</li>
      <li class="users__list-item">User 7</li>
    </ul>
  </div>
</body>

</html>

I have this code:

results = "[ { user_name: 'User 1',
    email: '[email protected]',
    userid: 'HJ10092',
    event_type: 'download',
    country: 'Venezuela',
    doc_type: 'mspowerpoint',
    total: '1' },
  { user_name: 'User 1',
    email: '[email protected]',
    userid: 'HJ10092',
    event_type: 'download',
    country: 'Venezuela',
    doc_type: 'document',
    total: '1' },
  { user_name: 'User 1',
    email: '[email protected]',
    userid: 'HJ10092',
    event_type: 'download',
    country: 'Venezuela',
    doc_type: 'msword',
    total: '2' },
  { user_name: 'User 2',
    email: '[email protected]',
    userid: 'POG0092',
    event_type: 'download',
    country: 'Spain',
    doc_type: 'png',
    total: '3' },
  { user_name: 'User 2',
    email: '[email protected]',
    userid: 'POG0092',
    event_type: 'download',
    country: 'Spain',
    doc_type: 'txt',
    total: '3' }]"


  const groupedDocs = Object.entries(
    results.reduce((acc, { country, email, doc_type, total }) => {
      // Group initialization
      grouping = email[0].v
      if (!acc[grouping]) {
        acc[grouping] = [];
      }
      // Grouping
      // FIX: only pushing the object that contains id and value
      acc[grouping].push({ doc_type, total});
      return acc;
    }, {})

  ).map(([email, count]) => ({ email, count }));
  console.log(".......................>>>>", JSON.stringify(groupedDocs));

It does what I want, but I need to also include the “country” field for each user, and I can’t. Something like that:

[
 { "email": "[email protected]",
  "country":"Venezuela",
  "count":[{"doc_type":"mspowerpoint",
  "total":"1"
},
{
  "doc_type":"document",
  "total":"1"
},
{
  "doc_type":"txt",
  "total":"69"
},
{
  "doc_type":"pdf",
  "total":"328"
   }
  ]
 },
 { "email": "[email protected]",
  "country":"Spain",
  "count":[{"doc_type":"mspowerpoint",
  "total":"1"
},
{
  "doc_type":"document",
  "total":"1"
},
{
  "doc_type":"txt",
  "total":"69"
}]}]

I could add the country field to each document type, but I don’t want to repeat it so many times. I want it to be an additional key just like “email.”
Thanks in advance

When I run my code, I get the following errors on my developers tool:

scriptb.js:9 Uncaught TypeError: Cannot read properties of null (reading 'showModal')
    at HTMLTableCellElement.<anonymous> (scriptb.js:9:46)
(anonymous) @ scriptb.js:9U
scriptb.js:17 Uncaught TypeError: Cannot read properties of null (reading 'close')
    at HTMLDocument.<anonymous> (scriptb.js:17:57)

<dialog id="dialoglist" class="popup"  style="top:50%;">
    <ul class="popuplist">
        <li> chat </li>
        <li> view </li>
        <li> edit </li>
        <li style="color: red;"> delete </li>
       <!---- <li> <button onclick="closedialog('dialoglist')">  close </button> </li> -->
    </ul>
<div class = 'mydiv'>

</div>
</dialog>
<td id="Action"><button class="action">...</button></td>

js

document.addEventListener('DOMContentLoaded', () => {
  var button = document.getElementById("Action");
  var listNo = document.getElementById(dialoglist)
  button.addEventListener('click', () => {
    listNo.showModal();
  });
  {
    const dialogclose =
      document.querySelectorAll('dialoglist')
    for (i = 0; i < dialogclose.length; i++) {
      dialogclose[i].addEventListener('click', () =>
        dialogclose[i].close());
    }
    const myDiv = document.getElementsByClassName("mydiv");
    for (i = 0; i < myDiv.length; i++) {
      myDiv[i].addEventListener('click', (event) => event.stopPropagation());
    }

I have trouble fetching my data into JS, can anyone help me please.
So here is the screenshot of the console:

console

const foodContainer = document.querySelector("#food-container");

function addToeatList() {
    const foodValue = document.getElementById("toeatInput").value.trim();

    if (foodValue === '') {
        alert("You must write something!");
        return;
    }

    fetch(`https://api.calorieninjas.com/v1/nutrition?query=${foodValue}`, {
        method: 'GET',
        headers: {
            'X-Api-Key': 'my api key'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        return response.json();
    })
    .then(res => {
        const data = res.items;
        let rows = '';

        data.forEach((item, index) => {
            rows += `
                <li class="card" style="margin-top: 8px;" id="card-${index}">
                    <div class="card-body">
                        <h5 class="card-title">${item.name}</h5>
                        <p class="card-text">Calories: ${item.calories} kcal</p>
                        <p class="card-text">Protein: ${item.protein_g} g</p>
                        <button onclick="closeToeatList('card-${index}')" class="btn btn-primary">Delete food</button>
                    </div>
                </li>
            `;
        });

        foodContainer.innerHTML += rows;
    })
    .catch(error => {
        console.error('Error:', error.message);
        alert("Failed to fetch data. Please try again.");
    });
}

function closeToeatList(cardId) {
    const card = document.getElementById(cardId);
    if (card) {
        card.remove();
    }
}

idk what did i do wrong and i need to finish my project quickly, plz someone help me fix it, thanks.

I want to build a Node.js script (or Git hook) that will only fix ESLint errors on the lines that are changed in staged JavaScript/TypeScript files. The intention is to keep the fixes minimal and limited to just what’s been modified in the current commit.

Specific Requirements:

• Only work on staged files

• Identify exact lines changed (added or modified)

• Use ESLint to detect and fix problems, but only on those changed lines

• Do not fix unrelated parts of the file

• Do not auto-stage or commit files — leave that to the developer

This is useful when multiple developers work on the same file and we want to avoid committing changes that affect lines unrelated to the current change.

What I tried:

• I extracted changed lines using:

  git diff --cached -U0 -- <file>
  
  

• I parsed changed line numbers and filtered eslint --fix-dry-run --format json output based on the line property.

• I tried applying fixes using the fix.range from ESLint’s output with string slicing:

  content = content.slice(0, start) + fix.text + content.slice(end);
  

Problems I faced:

• eslint --fix-dry-run exits with status code 1 even though it gives valid JSON output.

• Applying multiple fix.range edits causes incorrect replacements — likely due to content shifting.

I want a reliable way to fix only the modified lines while preserving line offsets and avoiding side effects.

What I expect:

• A clean solution to apply only ESLint’s fixable errors on changed lines

• Graceful handling of eslint exit codes in dry-run mode

• A method to apply multiple fixes correctly, even when multiple lines are affected

I’m writing a chrome extension. I want to generate three different entry points, but no splits to avoid imports.

I supposed that manualChunks: () => undefined was doing the magic, but it’s starting to create js assets again.

What I should do in this configuration to alwas bundle all the Javascript in one file?

This is my vote config:

export default defineConfig(({mode}) => {
    const env = loadEnv(mode, resolve(__dirname), '')

    const version = env.VITE_APP_VERSION ?? '0.0.0'

    return {
        root: 'src',
        envDir: resolve(__dirname),
        publicDir: '../public',
        plugins: [
            react(),
            tailwindcss(),
            viteStaticCopy({
                targets: [
                    // TODO: If we don't need it, we can remove it.
                    // { src: 'public/manifest.json', dest: '.' },
                    // { src: 'public/background.js', dest: '.' },
                ],
            }),
            {
                name: 'generate-manifest-json',
                apply: 'build',
                closeBundle() {
                    const manifest = createManifest(version)
                    const out = path.resolve(__dirname, 'dist/manifest.json')
                    fs.mkdirSync(path.dirname(out), {recursive: true})
                    fs.writeFileSync(out, JSON.stringify(manifest, null, 2))
                    console.log('✅ manifest.json generado con versión', version)
                },
            }
        ],
        build: {
            rollupOptions: {
                input: {
                    sidepanel: resolve(__dirname, 'src/sidepanel.html'),
                    content: resolve(__dirname, 'src/content/index.ts'),
                    background: resolve(__dirname, 'src/background/index.ts'),
                },
                output: {
                    entryFileNames: '[name].js',
                    // chunkFileNames: '[name].js',
                    // assetFileNames: '[name].[ext]',
                    manualChunks: () => undefined
                },
            },
            outDir: '../dist',
            emptyOutDir: true,
        },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "./src"),
            },
        },
        test: {
            globals: true,
            environment: 'jsdom',
        },
    }
})

When a user deletes a <p> element (or any DOM element) using browser developer tools/extensions, these changes are local and don’t notify the server. However, if the client specifically wants to make the website owner aware that they deleted that specific element, are there reliable ways to accomplish this? This could be directly notifying the server or making it obvious that the specific <p> element deleted by client when carefully observed from other side. The goal of the client is finding client-side methods to make it obvious to the other side he deleted that element. Are there ways possible to do this?

I was using javascript to make a new website using the course from supersimple.dev and found this issue right at the beginning.

i want to add bubble chart using chart.js to my project and i am trying to show image(PNG Format) background of chart.js bubbles like blow image, i saw this topic already, but doesn’t work for me … I tried this code and got no result. Please help.
Bubble flag Charts

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Users</h3>
        <ul class="box-controls pull-right">
            <li><a class="box-btn-close" href="#"></a></li>
            <li><a class="box-btn-slide" href="#"></a></li>
        </ul>
    </div>
    <div class="box-body">
        <div class="chart">
            <canvas id="chart_6" height="212"></canvas>
        </div>
    </div>
    <!-- /.box-body -->
</div>



  if ($('#chart_6').length > 0) {
        var BehpardakhtIcon = new Image();
        BehpardakhtIcon.src = "~/images/Behpardakht.png";
        BehpardakhtIcon.width = 22;
        BehpardakhtIcon.height = 22;
        var BehsazanIcon = new Image();
        BehsazanIcon.src = "~/images/Behsazan.png";
        BehsazanIcon.width = 22;
        BehsazanIcon.height = 22;
        const data = {
            datasets: [{
                data: [                 
                    { x: 30, y: 50, r: 15 }             
                ],              
                borderWidth: 2,
                pointStyle: BehpardakhtIcon,
                label: 'Company1',              
                hoverBorderWidth: 3,
            }],
        };
        const config = {
            type: 'bubble',
            data: data,
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'x'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'y'
                        }
                    },
                },
                plugins: {                  
                    tooltip: { intersect: true },
                    afterUpdate: function (chart, options) {
                        chart.getDatasetMeta(0).data.forEach((d, i) => {
                            d._model.pointStyle = BehpardakhtIcon;
    
                        })
                    }
                },
            },
        };
        const myBubbleChart =
            new Chart(document.getElementById('chart_6'), config);
        
    }

also i need to know where can i download chart.js plugins and how can i use them?

I am using Next JS version 15.3.2.

At present I am adding an external style sheet as follows in RootLayout file. It works.

But what is the proper way to add it in Next JS v15 now?

import type { Metadata } from 'next';
import './globals.css';
import React from 'react';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

const RootLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <html lang="en">
      <head>
        <link
          rel="stylesheet"
          href="https://some-cdn.com/1.2.3/stylesheets/styles.min.css"
        />
      </head>
      <body>{children}</body>
    </html>
  );
};

export default RootLayout;

Looking at docs, this seems to be the option given but this looks more like a solution for before Nextjs v13.

https://nextjs.org/docs/messages/no-stylesheets-in-head-component

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="..." />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Doesn’t work.

Complains that I can’t add a _document.js file outside pages folder which sounds outdated.

Nextjs been using app folder for some time now.

Pls advice the correct way to add external stylesheets. Thanks.

Why does Expo show a different IP than the one I set in my .env and why does the app fail to load on my iPhone even though both devices are on the same network?

Why does the Expo app on my iPhone show an error even though I set the correct IP in my .env and expected it to load successfully