Category: javascript

We have ionic angular app and firebase signInWithPhoneNumber was working good before.
but now suddenly its stopped working. always giving internal server error.
Seince we are on Blaze plan and billing is enabled. and domain is also added in the domain list.
we have searched also but no success.
also we have enabled phone auth.
also added the country to allow list.

please let us know about the issue.

we are getting below error

{“error”:{“code”:500,”message”:”Internal error encountered.”,”errors”:[{“message”:”Internal error encountered.”,”domain”:”global”,”reason”:”backendError”}],”status”:”INTERNAL”}}

makeCaptcha() {
    const component = this;
    this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'invisible',
      'callback': (response) => {
        console.log(response);
        component.captchanotvarified = true;
      }
    });
    this.recaptchaVerifier.render();
  }

  sendOtpBrowser(phone) {
    const component = this;
    this.uiElementService.presentLoading('Sending otp');
    this.makeCaptcha();
    firebase.auth().signInWithPhoneNumber(phone, this.recaptchaVerifier)
      .then((confirmationResult) => {
        console.log('otp_send_success', confirmationResult);
        component.result = confirmationResult;
        component.uiElementService.dismissLoading();
        component.uiElementService.presentToast('OTP Sent');
        if (component.isDemoNumber === 'true') {
          component.otp = component.config.demoLoginCredentials.otp;
          component.verify();
        }
        component.otpNotSent = false;
        if (component.intervalCalled) {
          clearInterval(component.timer);
        }
        component.createInterval();
      })
      .catch((error) => {
        console.log('otp_send_fail', error);
        component.resendCode = true;
        component.uiElementService.dismissLoading();
        component.uiElementService.presentToast(error.message || 'OTP Sending failed');
      });
  }

This is my academic question.

Why are we using use client on the top of the error.js file in the next.js ?

I’m migrating from ES5 to ES6 and as a result I’m implementing modules. I have a Core.ts file that has a class Core that holds functions that are used in many .ts files. I migrated Core.ts to be compliant with ES6 and I’m exporting an instance of that class in the file. I want to import the instance in every file in a certain directory so I tried using a gulp script to do this task. I’m using gulp 5.0.1.

Said script: (I have installed and imported all the npm packages that I need)

gulp.task('updateFiles', function (done) {
    gulp.src("Scripts/Controllers/AlarmMobile/*.ts", )
        .on('data', file => console.log('Matched:', file.path))
        .pipe(insert.prepend("import { core } from '../../Utilities/Core';n"))
        .pipe(gulp.dest(file => file.base));
    done();
});

When I run the gulp task it goes through no problem but it doesn’t find the file/s. However when I change the src to this: gulp.src("Scripts/Controllers/AlarmMobile/AlarmMobile.ts"), gulp finds the file and prepends the import.

I searched everywhere but I couldn’t find a solution or an explanation. I also tried gulp.src("./Scripts/Controllers/AlarmMobile/AlarmMobile.ts") and the behaviour was the same.

Thanks in advance for the help!!!

need review on this code error-

App.jsx:37 GoogleGenerativeAIFetchError: [GoogleGenerativeAI Error]: Error fetching from https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent: [404 ] models/gemini-pro is not found for API version v1beta, or is not supported for generateContent. Call ListModels to see the list of available models and their supported methods.

In the following code, I understand that if (loading) return; is used to prevent repeated calls to setPage, which is what would happen if lastItemRef is allowed to create and attach a new observer to an already-intersecting element.

However, the only reason why the callback ref (lastItemRef ) gets invoked in the first place is because its loading dependency changes (I know hasMore is there as well, but it remains true until there’s no more).

Now if we didn’t put the loading dependency there in the first place, the same instance of the callback ref will be returned by useCallback and the callback ref won’t even run, so there’s no chance of attaching a new observer to an already-intersecting element

It seems to me that doing this just creates the problem and solves it, but there was no problem to begin with, so I don’t understand the significance of if (loading) return; (because it seems to me, and I believe I’m wrong, that it just creates a problem and solves it), so I need help understanding it:

import { useState, useEffect, useRef, useCallback } from 'react';  
  
const InfiniteScrollList = () => {  
  const [items, setItems] = useState([]);  
  const [page, setPage] = useState(1);  
  const [loading, setLoading] = useState(false);  
  const [hasMore, setHasMore] = useState(true);  
  const observer = useRef();  
  
  // Fetch data function  
  const fetchItems = async (pageNum) => {  
    setLoading(true);  
    try {  
      // Replace with your actual API call  
      const response = await fetch(https://api.example.com/items?page=${pageNum});  
      const data = await response.json();  
        
      setItems(prev => [...prev, ...data.items]);  
      setHasMore(data.hasMore); // Assuming your API indicates if there's more data  
    } catch (error) {  
      console.error('Error fetching data:', error);  
    } finally {  
      setLoading(false);  
    }  
  };  
  
  // Intersection Observer callback  
  const lastItemRef = useCallback(node => {  
    if (loading) return;  
    if (observer.current) observer.current.disconnect();  
      
    observer.current = new IntersectionObserver(entries => {  
      if (entries[0].isIntersecting && hasMore) {  
        setPage(prev => prev + 1);  
      }  
    });  
      
    if (node) observer.current.observe(node);  
  }, [loading, hasMore]);  
  
  // Initial fetch and fetch when page changes  
  useEffect(() => {  
    fetchItems(page);  
  }, [page]);  
  
  return (  
    <div className="list-container">  
      {items.map((item, index) => {  
        if (index === items.length - 1) {  
          return (  
            <div ref={lastItemRef} key={item.id} className="list-item">  
              {item.name}  
            </div>  
          );  
        }  
        return (  
          <div key={item.id} className="list-item">  
            {item.name}  
          </div>  
        );  
      })}  
      {loading && <div className="loading">Loading more items...</div>}  
      {!hasMore && <div className="no-more">No more items to load</div>}  
    </div>  
  );  
};  
  
export default InfiniteScrollList;

I am using this for version 15 via an FTP server. I am trying to fetch and save attachments. I wanted to know if this problem is caused by the version. Because I have used this method for version 19 as well. But I tried to use this method for version 15 as well. Then I have to face this problem.

i tried base64ToFile this method in version 15, and it worked

In the following code, I understand that if (loading) return; is used to prevent repeated calls to setPage, which is what would happen if lastItemRef is allowed to create and attach a new observer to an already-intersecting element. However, the only reason why the callback ref (lastItemRef ) gets invoked in the first place is because its loading dependency changes (I know hasMore is there as well, but it remains true until there’s no more). Now if we didn’t put the loading dependency there in the first place, the same instance of the callback ref will be returned by useCallback and the callback ref won’t even run, so there’s no chance of attaching a new observer to an already-intersecting element, so it seems to me that doing this just creates the problem and solves it, but there was no problem to begin with:

import { useState, useEffect, useRef, useCallback } from 'react';  
  
const InfiniteScrollList = () => {  
  const [items, setItems] = useState([]);  
  const [page, setPage] = useState(1);  
  const [loading, setLoading] = useState(false);  
  const [hasMore, setHasMore] = useState(true);  
  const observer = useRef();  
  
  // Fetch data function  
  const fetchItems = async (pageNum) => {  
    setLoading(true);  
    try {  
      // Replace with your actual API call  
      const response = await fetch(https://api.example.com/items?page=${pageNum});  
      const data = await response.json();  
        
      setItems(prev => [...prev, ...data.items]);  
      setHasMore(data.hasMore); // Assuming your API indicates if there's more data  
    } catch (error) {  
      console.error('Error fetching data:', error);  
    } finally {  
      setLoading(false);  
    }  
  };  
  
  // Intersection Observer callback  
  const lastItemRef = useCallback(node => {  
    if (loading) return;  
    if (observer.current) observer.current.disconnect();  
      
    observer.current = new IntersectionObserver(entries => {  
      if (entries[0].isIntersecting && hasMore) {  
        setPage(prev => prev + 1);  
      }  
    });  
      
    if (node) observer.current.observe(node);  
  }, [loading, hasMore]);  
  
  // Initial fetch and fetch when page changes  
  useEffect(() => {  
    fetchItems(page);  
  }, [page]);  
  
  return (  
    <div className="list-container">  
      {items.map((item, index) => {  
        if (index === items.length - 1) {  
          return (  
            <div ref={lastItemRef} key={item.id} className="list-item">  
              {item.name}  
            </div>  
          );  
        }  
        return (  
          <div key={item.id} className="list-item">  
            {item.name}  
          </div>  
        );  
      })}  
      {loading && <div className="loading">Loading more items...</div>}  
      {!hasMore && <div className="no-more">No more items to load</div>}  
    </div>  
  );  
};  
  
export default InfiniteScrollList;

I’m working on two Photoshop JavaScript (JSX) scripts using Photoshop 23.1.1 on Windows to automate sprite processing. The first script aims to count unique colors in sprite frames (extracted with Alferd Spritesheet Unpacker version 19) by converting images to Indexed Color mode and logging results to C:/Video Factory/color_log.txt. The second script is intended to open sprites and center them on a 512×512 canvas, optionally processing multiple files from a folder. Both scripts are encountering persistent errors, and I need help resolving them.

Issue 1: Counting Unique Colors with Indexed Color Mode
What I’ve Tried:

1. Basic changeMode Call: Used doc.changeMode(ChangeMode.INDEXEDCOLOR) to convert images, followed by doc.colorTable.length to count colors. Resulted in Error 8107: The specified conversion to indexed color mode requires conversion options.

2.Adding Conversion Options: Passed an options object ({ dither: Dither.NONE, palette: Palette.EXACT, colors: 256 }) to changeMode, leading to Error 1243: Illegal argument – argument 2 – Object expected.

3.IndexedColorMode Object: Attempted var options = new IndexedColorMode(); options.palette = Palette.EXACT; options.dither = Dither.NONE; options.colors = 256;, but got Error 22: IndexedColorMode does not have a constructor.

4.RGB Pre-Conversion: Added if (doc.mode != ChangeMode.RGB) doc.changeMode(ChangeMode.RGB) before conversion, still resulting in Error 8107.

5.Action Manager: Tried executeAction(charIDToTypeID(“CnvM”), new ActionDescriptor().putClass(charIDToTypeID(“T “), charIDToTypeID(“IndC”)), DialogModes.NO), but it also failed with Error 8107.

Current Script (Color Count):

    #target photoshop
    
    function getUniqueColorCount(doc) {
        if (doc.mode != ChangeMode.RGB) {
            doc.changeMode(ChangeMode.RGB);
        }
        var idconvertMode = charIDToTypeID("CnvM");
        var desc = new ActionDescriptor();
        var idtoMode = charIDToTypeID("T   ");
        desc.putClass(idtoMode, charIDToTypeID("IndC"));
        executeAction(idconvertMode, desc, DialogModes.NO);
        var colorTable = doc.colorTable;
        return colorTable.length;
    }
    
    function processSprites(folder) {
        var logFile = new File("C:/Video Factory/color_log.txt");
        logFile.open("w");
        logFile.writeln("FilenametColor Count");
        var files = folder.getFiles(function(file) {
            return file instanceof File && (file.name.match(/.(jpg|jpeg|png|tiff)$/i));
        });
        if (files.length === 0) {
            alert("No image files found in the selected folder.");
            return;
        }
        for (var i = 0; i < files.length; i++) {
            var doc = app.open(files[i]);
            try {
                var colorCount = getUniqueColorCount(doc);
                logFile.writeln(files[i].name + "t" + colorCount);
            } catch (e) {
                logFile.writeln(files[i].name + "tError: " + e.message);
            }
            doc.close(SaveOptions.DONOTSAVECHANGES);
        }
        logFile.close();
    }
    
    var folder = Folder.selectDialog("Select the folder with sprites");
    if (folder != null) {
        processSprites(folder);
    } else {
        alert("No folder selected. Exiting script.");
    }

Problems:

• Error 8107 persists, indicating Photoshop requires conversion options that I can’t successfully provide.

• Manual conversion (Image > Mode > Indexed Color) works but prompts for settings, which I can’t replicate in the script.

• The API seems to reject both object-based options and Action Manager calls for this purpose.

Issue 2: Centering Sprites on 512×512 Canvas

What I’ve Tried:
Single Sprite Script: Created a script to open a sprite, create a 512×512 canvas, and center it using doc.activeLayer.translate((doc.width – spriteWidth) / 2, (doc.height – spriteHeight) / 2) after copying and pasting. This worked for a single file but required a hardcoded path.
Batch Processing: Modified the script to loop through a folder using Folder.selectDialog and process multiple sprites. The script runs but fails to center sprites correctly, often placing them off-center or throwing errors like Error 8802: General Photoshop error when handling multiple files.
Current Script (Canvas Centering):

#target photoshop

function createCanvas() {
    var doc = app.documents.add(512, 512, 72, "Sprite Canvas", NewDocumentMode.RGB, DocumentFill.TRANSPARENT);
    return doc;
}

function openSpriteAndPlace(spritePath) {
    var sprite = app.open(new File(spritePath));
    var doc = createCanvas();
    var spriteWidth = sprite.width;
    var spriteHeight = sprite.height;
    var x = (doc.width - spriteWidth) / 2;
    var y = (doc.height - spriteHeight) / 2;
    sprite.selection.selectAll();
    sprite.selection.copy();
    doc.paste();
    doc.activeLayer.translate(x, y);
    sprite.close(SaveOptions.DONOTSAVECHANGES);
}

var folder = Folder.selectDialog("Select the folder with sprites");
if (folder != null) {
    var files = folder.getFiles(function(file) {
        return file instanceof File && (file.name.match(/.(jpg|jpeg|png|tiff)$/i));
    });
    for (var i = 0; i < files.length; i++) {
        openSpriteAndPlace(files[i]);
    }
}

Problems:
Centering Issues: The translate method sometimes misaligns sprites, especially with varying sizes, and the script doesn’t always maintain a new canvas per sprite in batch mode, leading to overlap.

Error 8802: Occurs intermittently during batch processing, possibly due to document state conflicts or layer handling.

No Export: The script lacks a save function, and adding doc.saveAs with a custom filename causes further errors (e.g., Error 1302: File already exists without overwrite handling).

Questions:
Color Count: How can I correctly pass conversion options to changeMode or Action Manager to convert to Indexed Color mode without Error 8107?

Is there a way to simulate the manual dialog settings in script?

Canvas Centering: How can I ensure each sprite is centered on a new 512×512 canvas in batch mode, avoiding Error 8802 and enabling export with unique filenames (e.g., appending an index or original name)?

Alternative Methods: Are there better approaches (e.g., Action recording) to achieve these tasks in Photoshop scripting?

I got the following code here:

<script>
    var scr = "</script>";
    console.log(scr);
</script>

However, if you open about:blank and replace the whole HTML with that code, it will actually not parse the script normally, and it will show:

"; console.log(scr);

I tested this in both Chrome and Firefox, and I am wordering why it will perform this way.

Hello please excuse the novice question but I need some guidance.

I have a webpage (php) that will include a field and action button.

On click I want to pass the field name/value pair to a php page I have already. Then return the status message to display on original page before submitting a form with the original field value.

Imagine a domain availability lookup before submitting a page. If that makes sense?

I’ve never done any ajax or json or jquery before so no idea where to start!

Nothing to start with. Sorry.

I’m working on this game where user from any country can play. When they loose all 4 hearts, they have to wait till the next day to play ie. 12.00AM of next day to play. I dont want it to happen on local device (client side script) itself. this reset should happen from the server. Online game. The problem is as i’m dealing with mutiple time zones how can i map this ?. If i run a cron job at particular time, which time it should be ? I cant find a good answer for this. I dont know about this day light saving timezones. So frustating. Please help

I’m working on this game where user from any country can play. When they loose all 4 hearts, they have to wait till the next day to play ie. 12.00AM of next day to play. I dont want it to happen on local device (client side script) itself. this reset should happen from the server. Online game. The problem is as i’m dealing with mutiple time zones how can i map this ?. If i run a cron job at particular time, which time it should be ? I cant find a good answer for this. I dont know about this day light saving timezones. So frustating. Please help

I am building an app with ts, node, expressjs and pugjs as my tech stack.
My problem is, like the title says, that my html does not see my js code.
I have a simple button in my html webpage that looks like this:

button(onclick="fooFunc()")

which transpiles to this html code:

<button onclick="fooFunc()"><button/>

And when I check the sources in my browser I correctly see the function

But when I click on the button instead of seeing “This worked it seems” on the console I get an error saying Uncaught ReferenceError: fooFunc is not defined.

This is my the relevant part of my pugjs file

body
    script( type="module" src='/dist/middlewares/login.js' onload='load()' onerror="error()")
    button(onclick="fooFunc()")

Any help would be appreciated because I did not seem to find a relevant question on the web and I have been stuck on this for a week now.

_{Please bare with me, I haven’t been programming very long and this is my first post}

Context: I have been working on my first serious side project to improve my skills and possibly to start my portfolio. The project is a web app for AI tattoo design generation that allows for advances customization. I am about 50% done.

Current Goal: Implement a graphic of an example tattoo that changes live based on the users inputs. The purpose it will serve is to give the user an idea of how input choices might effect their final generated tattoo.

Example: As the user increases/decreases the slider on the “Line Thickness” option, the line thickness on the example tattoo changes in real time.

Inputs That Will Affect Graphic:

• Detail
• Contrast
• Shading
• Line Thickness/Weight
• Color Complexity/Range

Current Tech Stack:

• React _{Create React App}
• Python/Flask
• Bootstrap _{Regret 🙁}
• IDE: VS Code

Please tell me general ideas for ways that you would recommend accomplishing this. I just want some ideas that I can look into and decide for myself what will be the best. The main priorities I am trying to balance are efficiency in development time/effort, effectiveness, and finding a solution that will teach me good tools/skills for future projects or jobs. Any advice is appreciated!

From the research I’ve done, I can tell there are a lot of different ways to accomplish this. I believe he most appealing type of solution for me would be something to do with adjusting SVGs CSS attributes using react, if possible.

I am open to other types of solutions. I am also open to adding to my tech stack as long as it doesn’t require too much backtracking to change already completed parts of my project.

I have ruled out throttled API calls (way too slow and resource intensive) and I think I am also ruling out using a pre-rendered image set (limited customizations)

I have a linked list implemented in JS for an exercise and the exercise asks me to create a method that returns the index of the value inputted in this method.

The thing is I have a head in the linked list, so should I count the head as an index or skip it and count only the indexes of “value containing nodes” ?

To better see, in the following linked list if I do my custom method find(‘dog’), what will be the index I should output (3 or 2) ? Thank’s 🙂

{
  "head": {
    "value": "shark",
    "nextNode": {
      "value": "rabbit",
      "nextNode": {
        "value": "dog",
        "nextNode": {
          "value": "cat",
          "nextNode": null
        }
      }
    }
  }
}

I am developing a smart energy monitoring application using node.js and gridDB Cloud WebAPI.I am trying to insert data into container called energy_data,but I consistently receive the following error:

sadaf@LAPTOP-DQHRJ3A0:~/smart-energy-node$ node insertData.js

I have tried the following:
1.I created my container successfully with this schema:
timestamp:TIMESTAMP (row key)
value:DOUBLE
device_id:STRING

2.The code snippet I’m using for data insertion (insertData.js)

const axios = require('axios');

const authHeader = 'Basic xxxxxxxxM0wxei1hZG1pbjxxxxxxxxx=';
const baseURL = 'https://xxxxxxx.griddb.com:xxxx/griddb/v2/gs_clustxxxxxx7/dbs/xxxxxxx';

const payload = {
  rows: [
    [new Date().toISOString(), 12.5, "device_001"],
    [new Date(Date.now() + 60000).toISOString(), 18.2, "device_002"]
  ]
};

axios.post(`${baseURL}/containers/energy_data/rows`, payload, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': authHeader
  }
})
.then(response => {
  console.log("✅ Data inserted successfully!");
  console.log("Status:", response.status);
})
.catch(error => {
  console.error("❌ Error inserting data:");
  if (error.response) {
    console.error("Status       :", error.response.status);
    console.error("Status Text  :", error.response.statusText);
    console.error("Error Code   :", error.response.data?.errorCode || "N/A");
    console.error("Error Message:", error.response.data?.errorMessage || "No message");
    console.error("Full Data    :", JSON.stringify(error.response.data, null, 2));
  } else if (error.request) {
    console.error("No response received from the server.");
    console.error("Request details:", error.request);
  } else {
    console.error("Error setting up the request:", error.message);
  }

3.When i run the node insertData.js I get the following error

sadaf@LAPTOP-DQHRJ3A0:~/smart-energy-node$ node insertData.js
❌ Error inserting data:
Status       : 400
Status Text  : Bad Request
Error Code   : N/A
Error Message: Mapping JSON data error at  field 'rows'
Full Data    : {
  "version": "v2",
  "errorCode": 0,
  "errorMessage": "Mapping JSON data error at  field 'rows'"
}
Stack Trace:
 AxiosError: Request failed with status code 400
    at settle (/home/sadaf/smart-energy-node/node_modules/axios/dist/node/axios.cjs:2053:12)
    at IncomingMessage.handleStreamEnd (/home/sadaf/smart-energy-node/node_modules/axios/dist/node/axios.cjs:3170:11)
    at IncomingMessage.emit (node:events:530:35)
    at endReadableNT (node:internal/streams/readable:1698:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:90:21)
    at Axios.request (/home/sadaf/smart-energy-node/node_modules/axios/dist/node/axios.cjs:4280:41)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

I confirmed that container is correctly created ,verified that fiels names and types match and tried sending both string and date formats for timestamp.

Environment:
Ubuntu 20.04.6 LTS (WSL2 on Windows 10 Pro)
Node.js v20.x
Axios 1.6
GridDB Cloud WebAPI version 2(v2)

Any help in how to fix the error the GridDB WebAPI: Error inserting rows “Mapping JSON data error at field ‘rows’ “ will highly appreciated