javascript – Page 252 – Blancer.com Tutorials and projects

‘This app can appear on top of other apps’ Permission. How to remove it?

I am using React Native with Expo. I posted my app on Play Store, however, in permissions section, one of the permission ‘This app can appear on top of other apps’ is listed. Although, I don’t use any features in my app which uses such permission or explicitly setting it. Below are the dependencies list.

Even it shows the permission, but upon using the app, system does not use this permission.

Please let me know if you are facing same issue or know any dependency which might be triggering this issue?
Thank you in advance.

“dependencies”: {
“@react-native-async-storage/async-storage”: “2.1.2”,
“@react-navigation/bottom-tabs”: “^7.2.0”,
“@react-navigation/native”: “^7.0.14”,
“@react-navigation/native-stack”: “^7.2.0”,
“axios”: “^1.7.9”,
“date-fns”: “^4.1.0”,
“expo”: “~53.0.7”,
“expo-build-properties”: “~0.14.6”,
“expo-font”: “~13.3.1”,
“expo-linear-gradient”: “~14.1.4”,
“expo-location”: “~18.1.4”,
“expo-splash-screen”: “~0.30.8”,
“lottie-react-native”: “7.2.2”,
“metro-react-native-babel-transformer”: “^0.77.0”,
“react”: “19.0.0”,
“react-native”: “0.79.2”,
“react-native-progress”: “^5.0.1”,
“react-native-reanimated”: “~3.17.4”,
“react-native-safe-area-context”: “5.4.0”,
“react-native-screens”: “~4.10.0”,
“react-native-svg”: “15.11.2”,
“zustand”: “^5.0.3”
},
“devDependencies”: {
“@babel/core”: “^7.20.0”,
“react-native-svg-transformer”: “^1.5.0”
},

I tried blocking the permission explicitly using below code:
“android”:
“blockedPermissions”: [“android.permissions.SYSTEM_ALERT_WINDOW”];

How do you use javascript to detect if you click on an html element and then show that change in value on the document?

I’ve been trying to run a function that adds an amount to a variable and then shows that new value using text but I can’t seem to get it to work properly.

I made a <div> element and then used the style attribute to make it a yellow square and after that I added a <script> element to use javascript to document so that when you click on the <div> it shows you an increase of one. Here’s the code from the <body> of the page.

<body>
  <div id="id" style="height: 50px; width: 50px; background-color: yellow;"></div>
  <script>
    let numberClicked = 0;
    const clicked = () => {
      numberClicked = numberClicked+1;
    };
    document.getElementById("id").onclick = clicked;
    document.write(numberClicked);
  </script>
</body>

When I ran the code the <div> and the text from document.write() showed up but clicking was unresponsive. I tried adding parentheses after the clicked on the 8th line but that simply calls the function once and then nothing happens. I can’t find anything else to do anywhere I have looked. I am also using github pages to make this if that affects it.

Why won’t my audio object play? (Vanilla Javascript)

I’m trying to learn about the web audio API. I have a simple “Recording.m4a” file in my project directory, and I am attempting to load this file into an audio object and then play it on the click of a button. Here’s my javascript file:

var ctx = new AudioContext();

let audioFileObj = new Audio("Recording.m4a");

let recordingFileStream = ctx.createMediaElementSource(audioFileObj);


//configuring the output source of the audio stream
recordingFileStream.connect(ctx.destination);

let button = document.querySelector(".playbutton");
button.addEventListener("click", function(){

    if (ctx.state === 'suspended') {
        ctx.resume().then(() => {
            audioFileObj.play();
            console.log("if triggered");
        });
    } 
    else {
        audioFileObj.play();
        console.log("else triggered");
    }
    
});

I have inserted some console logs in the conditional statement. When the page first loads, I can see “if triggered” in the console after pressing the button. Subsequent button presses make “else triggered” appear in the console.

So the code definitely is flowing there. I am receiving no other errors in my console. However I am not getting any sound on the page when I click the button.

I then attempted to hardcode in an audio element directly in the html page and when I press the button on that, then the page succesfully plays the recording.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        

        <button class="playbutton">PRESS</button>

        <audio controls>
            <source src="Recording.m4a" >
        </audio>
        
        <script src="script.js" async defer></script>
    </body>
</html>

Where could I possibly be going wrong?

Sequential interactions… Possible?

It may just be that I don’t know the proper thing to have searched for, but all of my searching hasn’t provided me with an answer yet.

I am building a bot (using discord.js) for a GW2 guild and I need to let players register a GW2 API key for their account. To do this, I need the user to provide both their (GW2) account name AND the API key. So here is my question:

Is there a way – using a slash command – to get these two pieces of information separately? Can I have them provide the account name first, verify that it is an account that is a member of our guild, and then (after successful verification) ask them for the API key in a follow up message? If so, how is this done? I know how to verify the name, I just don’t know how to then ask for the key.

I know that I can get both pieces of information together as options for the slash command, but I would prefer to get them one at a time if possible.

Discord.js – Sequential interactions… Possible?

It may just be that I don’t know the proper thing to have searched for, but all of my searching hasn’t provided me with an answer yet.

Is there a way to get these two pieces of information separately? Can I have them provide the account name first, verify that it is an account that is a member of our guild, and then (after successful verification) ask them for the API key in a follow up message? If so, how is this done? I know how to verify the name, I just don’t know how to then ask for the key.

I know that I can get both pieces of information together as options for the slash command, but I would prefer to get them one at a time if possible.

Producing types for CommonJS Modules with vite-plugin-dts?

I was reading up on how to use Vite’s library mode to produce an NPM package here and the common way to set the relevant package fields for a typescript library seems to be:

  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }

And so this produces a package that can be used both with node require and esm imports.

However I was also reading this package exports which says that types have to be declared for both commonjs and esm modules like this:

    "exports": {
        // For CJS
        "require": {
            "types": "./dist/index.d.cts", // require + types = CJS types
            "default": "./dist/index.cjs"  // require = CJS code
        },
        // For ESM
        "import": {
            "types": "./dist/index.d.mts", // import + types = ESM types
            "default": "./dist/index.mjs"  // import = ESM code
        }
    }

Does vite-plugin-dts know how to produce types for both the UMD and the ESM bundles that the vite library mode produces?

Or does anyone know if there is a different way of producing the UMD bundle types?

Why does the responsive menu appear in the desktop view when coding in JS/CSS?

I am trying to get a desktop/ responsive website working, but the menu from the responsive view appears in the desktop view…

Here is some CSS snippet:

#nav-bar{
        display: block !important;
        margin: 0 auto;
        height: 100px;
}
        
#mobile{
        display: none !important;
       }

@media only screen and (max-width: 400px){

#mobile{
                            
        display: none !important;
        height: 50px;
        min-width: 100px;
        position: absolute;
        top:50px;
        left:20px;
        z-index:100;
}
            
#nav-bar{
        display: none !important;
}
}

Here is some of the JavaScript snippet:

let doc = document.getElementById('bar');
let doc2 = document.getElementById('mobile');
let clk = false;


    doc.onclick = function(){
        clk=!clk;
        if(doc.hasAttribute('style','transform:rotate(-450deg) translate(0px,0px);') && !clk){
                doc.setAttribute('style','transform:rotate(0deg) translate(0px,0px);');
                doc2.setAttribute('style','display:none !important;');
        }else{
                doc.setAttribute('style','transform:rotate(-450deg) translate(0px,0px);');
                doc2.setAttribute('style','display:block !important;'); 
                    
            }
        };

HTML

<div id="nav-bar">
    <div class="pos" th:text="${msg}"></div>
    <div>
    <ul>
    <li>Home</li>
    <li><a href="about.html">About</a></li>
    <li><a href="prices.html">Prices</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
        
    </div>


    <div class="body">
        <div id="bar">
        </div>  
        <div id="mobile">
        <a href="about.html">Item1</a>
        <a href="prices.html">Item2</a>
        </div>

The hamburger menu works fine in responsive mode, loads and unloads the menu. But when I load the menu from responsive mode and switch to desktop mode, the menu is there (in desktop mode).

Any help on this would be appreciated…

Frida: How to send byte[] array from JavaScript to Python

I have a Frida JS script inside a Python session, and I’m trying to pass an array of bytes (from a Bitmap image) from the JavaScript environment back to the Python environment. Here is my attempt:

import frida
import sys
import os

JS_SCRIPT = '''
setTimeout(function () {{
  Java.perform(function () {{
      // declare dependencies on necessary Java classes
      const File = Java.use("java.io.File");
      const Bitmap = Java.use("android.graphics.Bitmap");
      const BitmapCompressFormat = Java.use("android.graphics.Bitmap$CompressFormat");
      const BitmapConfig = Java.use("android.graphics.Bitmap$Config");
      const ByteArrayOutputStream = Java.use("java.io.ByteArrayOutputStream");

      // instantiate a new Bitmap object
      const bitmap = Bitmap.createBitmap(100, 100, BitmapConfig.ARGB_8888.value);

      // output bitmap to a byte stream in PNG format
      const stream = ByteArrayOutputStream.$new();
      const saved = bitmap.compress(BitmapCompressFormat.PNG.value, 100, stream);
      console.log("[*] Compressed as PNG:", saved);

      // get byte array from byte stream
      const byteArray = stream.toByteArray();
      console.log("[*] Byte array length:", byteArray.length);

      // send the byte stream to the Python layer
      send({{ type: "bitmap", page: pageNum }}, byteArray);
      stream.close();
  }});
}}, 1000);
'''

def on_message(message, data):
    if message["type"] == "send" and message["payload"].get("type") == "bitmap":
        page = message["payload"].get("page")
        with open(OUTPUT_FILENAME, "wb") as f:
            f.write(data)
        print(f"[+] Saved page {page} as {OUTPUT_FILENAME}")
    else:
        print(f"[?] Unknown message: {message}")

def main():
    device = frida.get_usb_device(timeout=5)
    session = device.attach(pid)
    script = session.create_script(JS_SCRIPT)
    script.on("message", on_message)
    script.load()
    device.resume(pid)

if __name__ == "__main__":
    main()

The problem happens on the call to send() because the second argument byteArray is not a pointer:

Error: expected a pointer

It’s unclear to me how to get byteArray into a format that can be sent using the send() function, and I’m having trouble finding the solution in the Frida API docs.

Querying by _id ObjectId returns an empty array using Mongoose

I have the following function:

export const findCustomer = async (query?: FindCustomerParams) => {
  try {
    await database.connect();
  } catch (err: any) {
    throw new Error("Could not connect to the database. Root error: " + err);
  }

  if (!query) {
    return await customer.find();
  }

  findCustomerParams.parse(query);

  let returnCustomers;
  try {
    const fetchedCustomers: (Omit<Customer, "address"> & { address?: FindOneCustomerParams["address"] })[] | null =
      await customer.find(query ? removeFalsyValues({ ...query, _id: new mongoose.Types.ObjectId(query.id) }) : {});

    if (!fetchedCustomers) {
      throw new Error();
    }

    if (query.address) {
      const fetchedAddresses = await addressMethods.find(query.address);

      for (let i = 0; i < fetchedAddresses.length; i++) {
        if (!fetchedAddresses || !fetchedAddresses[i].customers.includes(fetchedCustomers[i]._id)) {
          throw new Error(`Could find address on customer ${fetchedCustomers[i]._id}`);
        }

        fetchedCustomers[i].address = fetchedAddresses[i];
      }
    }

    returnCustomers = fetchedCustomers;
  } catch (err: any) {
    throw new Error("Failed to find a customer. Root error: " + err);
  }

  await database.close();

  return returnCustomers;
};

It works for querying on everything except _id. When querying by _id I can get an empty array.

Here is a query that returns a result:

await findCustomer({firstName: "Ethan"})

Here is one that does not return a result:

await findCustomer({_id: id})

I can get an empty array when I should be seeing a single customer.

I have tried the following:

I have verified that the id is correct
Verified that I am connected to my Atlas cluster
Tried converting the _id datatype from string to ObjectId
Querying by both id and _id neither work
There are no errors in the console

How can I fix this?

setState Fails in a react component

I have this tsx file called AdminUsers. It’s designed to show all the users for an administrator of an application, so they can perform operations on them. The tsx is as follows:

import React, { useState, useEffect } from "react";
import api from "../utils/api";
import { useNavigate } from "react-router-dom";

const API_URL = "http://localhost:8000/api";
const REFRESH_URL = `${API_URL}/token/refresh/`;

interface User {
    id: number;
    name: string;
    role: "customer" | "vendor" | "admin";
}

const AdminUsers: React.FC = () => {
    const [users, setUsers] = useState<User[]>([]);
    const [searchQuery, setSearchQuery] = useState("");
    const [currentPage, setCurrentPage] = useState(0);
    const usersPerPage = 10;

    useEffect(() => {
        const accessToken = localStorage.getItem("accessToken");

        api.get("http://localhost:8000/api/users/", {
            headers: { Authorization: `Bearer ${accessToken}` },
        })
            .then((response) => {
                console.log("API Response:", response.data); // Debugging step
                setUsers(response.data);
                console.log("State Updated:", users);
            })
            .catch((error) => console.error("Error fetching users:", error));
    }, []);


    const filteredUsers = users.filter((user) =>
        user.name?.toLowerCase().includes(searchQuery.toLowerCase())
    );


    const pageCount = Math.ceil(filteredUsers.length / usersPerPage);
    const handlePageClick = ({ selected }: { selected: number }) => {
        setCurrentPage(selected);
    };

    const displayedUsers = filteredUsers.slice(
        currentPage * usersPerPage,
        (currentPage + 1) * usersPerPage
    );

    return (
        <div>
            <h1>User Management</h1>
            <input
                type="text"
                placeholder="Search users..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
            />
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Role</th>
                </tr>
                </thead>
                <tbody>
                {displayedUsers.map((user) => (
                    <tr key={user.id}>
                        <td>{user.name}</td>
                        <td>{user.role}</td>
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    );
};

export default AdminUsers;

in the useEffect()) function there are two console.log calls, one to show the response. Data from a api call, and the other to show the change of the variable users that is set at the top fo the class.

my problem is that while response.data shows the correct json outputs:

{
    "id": 1,
    "email": "[email protected]",
    "role": "admin",
    "is_active": true,
    "is_staff": true,
    "is_superuser": true
}

the second console.log does not show any change in state to users. Furthermore, the filteredUsers call afterwards fails with a null error on users. What am I missing? is `const [users, setUsers] not global enough? how do I rectify this?

Thanks

Event handler called on two buttons but is working on only one

I am building a project using Node.js, Express, JavaScript, and Postgres. It has data for users and for contacts. I have a view that is supposed to allow a user to edit their account information. There is an event handler function called updateUser that updates a user’s information in a database. I would like to use the function on two different buttons, one to update the user’s information and one to update their password, but the event handler will only work for one button. I have tried making separate variables and attaching an event listener to each button to call the event handler function, and adding a class to the buttons, creating an HTML array of the buttons ,and using a for each loop to add the event listener to each button so as to call the event handler function but in both of those approaches only the event listener attached to the submitEditUserButton variable worked as intended while the event listener attached to the updateUserPasswordButton fired the click event but would not run the event handler function. Could someone help me with this please?

 // const editUserButtons = document.querySelectorAll(".edit-user-button")
    // const editUserButtonsHTMLArr = Array.from(editUserButtons)
    // editUserButtonsHTMLArr.forEach(button => {
    //     button.addEventListener("click", updateUser)
    // })
    const updateUserPasswordButton = document.querySelector("#update-user-password-button");
    updateUserPasswordButton.addEventListener("click", updateUser)
    const submitEditUserButton = document.querySelector("#submit-edit-user-button");
    submitEditUserButton.addEventListener("click", updateUser)

<div style="display: flex; justify-content: flex-end;">
  <button id="update-user-password-button" class="edit-user-button">Update Password</button>
  </div>
                        
<div style="position: absolute; display: flex; justify-content: space-between; width: 80%;">
  <button id="delete-user-button" style="background-color: red;">Delete Account</button>
  <button id="submit-edit-user-button" class="edit-user-button" style="width: 50px;">Done</button>
  </div>

WhatsApp QR code not being shown as expected

I trying use the WhatsApp library for automated costume services. I used these 2 steps in the terminal:

npm install whatsapp-web.js
npm i qrcode-terminal

Then this code:

const { Client } = require('whatsapp-web.js');

const client = new Client();

client.on('qr', (qr) => {
  // Generate and scan this code with your phone
  console.log('QR RECEIVED', qr);
});

client.on('ready', () => {
  console.log('Client is ready!');
});

client.on('message', msg => {
  if (msg.body == '!ping') {
    msg.reply('pong');
  }
});

client.initialize();

Then I run this terminal command:

node bot.js

In theory I should receive a QR code to connect with WhatsApp but I receive text content like below:

QR RECEIVED 2@a3e/mHTflTePhKvMtXlYtFd5b77gfLl7kpXYayThZfG+DA5XzA8hO8r2PN0ASkDBxTcbXzi7hYcuA5aGcd8ieJudRzoWC5D/AXE=,4eOAbmY1RTRTMxnP/NaI1Ym02xVXdBwGr0cWy/oJ+2Q=,cHYrzuvy8Drm/zogrp89

Need a help in vs code and whatssap library

I trying use the whatsapp library, for automated costume serviçes, i used de vs code version 1.99.3.

i used this step by step on terminal:

1 (terminal)

npm install whatsapp-web.js

2 (terminal)

npm i qrcode-terminal

3 (Editor)

const { Client } = require('whatsapp-web.js');

const client = new Client();

client.on('qr', (qr) => {
    // Generate and scan this code with your phone
    console.log('QR RECEIVED', qr);
});

client.on('ready', () => {
    console.log('Client is ready!');
});

client.on('message', msg => {
    if (msg.body == '!ping') {
        msg.reply('pong');
    }
});

client.initialize();

3 (Terminal)

node bot.js

4 Ok, in thesis i should receive a qr code to connect with the whatsapp but i receive a large text content like bellow:

(terminal)

QR RECEIVED 2@a3e/mHTflTePhKvMtXlYtFd5b77gfLl7kpXYayThZfG+DA5XzA8hO8r2PN0ASkDBxTcbXzi7hYcuA5aGcd8ieJudRzoWC5D/AXE=,4eOAbmY1RTRTMxnP/NaI1Ym02xVXdBwGr0cWy/oJ+2Q=,cHYrzuvy8Drm/zogrp89

Is there a way to customise and style the input sliders of Shiny Python app differently to default blue colour?

I am trying to build a simple Shiny Python app that implments simple interactive histogram plot using matplotlib and a slider. What I want to ask is how do I get to change the default slider colour blue to some other colour, say green, and also is there a way to colour the value of the slider differently than the default white colour? So, for example, in the screenshot below, what I am aiming to do is change the default blue slider colour (as indicated by the red arrow) to green, and the text or value shown in white colour (as indicated by the purple arrow) to black colour.

screenshot from my current app’s slider

The short shiny python script I currently have is given below:

import matplotlib.pyplot as plt
import numpy as np

from shiny import App, Inputs, Outputs, Session, render, ui

app_ui = ui.page_fluid(
    ui.input_slider("obs", "Number of bins:", min=10, max=100, value=30),
    ui.output_plot("distPlot"),
)


def server(input: Inputs, output: Outputs, session: Session):
    @render.plot
    def distPlot():
        np.random.seed(42)
        x = 100 + 15 * np.random.randn(437)

        fig, ax = plt.subplots()
        ax.hist(x, input.obs(), density=True)
        return fig


app = App(app_ui, server)

Any help is much appreciated. Thanks.

Trying to update word document by inputting data ona html form

I am trying to upload a word document and I am trying to update my data on my online html form and then after the data have been input I want the word document data to change according what has been input.

I tried everything but it seems useless.

<script>
    document.addEventListener("DOMContentLoaded", function () {
    // Ensure Mammoth.js is loaded
    if (typeof Mammoth === "undefined") {
        console.error("Mammoth.js is not loaded! Check script path.");
        alert("Mammoth.js is not loaded! Check your internet connection.");
        return;
    }

    document.getElementById("uploadDataBtn").addEventListener("click", modifyDocument);
});

async function modifyDocument() {
    const fileInput = document.getElementById("fileUpload");
    if (fileInput.files.length === 0) {
        alert("Ju lutem ngarkoni një dokument DOCX.");
        return;
    }

    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = async function (event) {
        const arrayBuffer = event.target.result;

        try {
            const result = await Mammoth.extractRawText({ arrayBuffer });
            let docText = result.value;

            console.log("Extracted Text:", docText); // Debugging

            const replacements = {
                "${name}": document.getElementById("name")?.value || "",
                "${website}": document.getElementById("website")?.value || "",
                "${responsible}": document.getElementById("responsible")?.value || "",
                "${timeline}": document.getElementById("timeline")?.value || "",
                "${description}": document.getElementById("description")?.value || "",
                "${type}": document.getElementById("type")?.value || "",
                "${time}": document.getElementById("time")?.value || "",
                "${information}": document.getElementById("information")?.value || "",
                "${referenca}": document.getElementById("referenca")?.value || "",
                "${kodi}": document.getElementById("kodi")?.value || "",
            };

            // Replace placeholders with input values
            for (const key in replacements) {
                docText = docText.replace(new RegExp(key, "g"), replacements[key]);
            }

            console.log("Modified Text:", docText); // Debugging

            // Create a new DOCX file
            const doc = new docx.Document({
                sections: [
                    {
                        properties: {},
                        children: [new docx.Paragraph({ text: docText })],
                    },
                ],
            });

            const blob = await docx.Packer.toBlob(doc);
            saveAs(blob, "Updated_DST.docx");
        } catch (error) {
            console.error("Error processing document:", error);
            alert("Gabim gjatë përpunimit të dokumentit.");
        }
    };

    reader.readAsArrayBuffer(file);
}

</script>

This is my js code but I dont know if I should ask chagpt as well.