Blancer.com Tutorials and projects

I’m getting the message in console:

Circular dependency detected for MyService. Source: Environment

…however, that service is being injected in only one component, and obviously – that component isn’t injected in service.

This message is listed in console few times, but stack-trace says nothing. Any ideas?

Angular version: 20.x, Vite

I have a FileMaker file, which uses a web-viewer as a Rich Text Editor. I also have a ‘Slide Control’ which slides a layout object in from one side. When this happens, I run a Function in the RTE which resizes it by adding Padding to one side. I’d like to do the same thing, for a web-viewer that’s being used for browsing the internet.

So essentially, I’m trying to have a clear space to one side of any given web page.

Is this possible to achieve with a Viewport???

This is what I use to resize my RTE:

function changeStyle(PadLeft, PadRight){
var element = document.getElementById('defaultRTE');
element.style.paddingLeft = (PadLeft);
element.style.paddingRight = (PadRight);
}

(NB.. I’m an amateur)

I recently installed a fresh Laravel 10 project with Vite as the frontend build tool. After running composer install and npm install, I tried to start the development server with:

npm run dev

But I get this error on Windows:

'vite' is not recognized as an internal or external command,
operable program or batch file.

I have:

• Deleted node_modules and re-run npm install.

• Ensured that vite is listed in devDependencies inside package.json.

• Tried running npx vite directly, but it shows the same error.

• Cleared cache with npm cache clean --force.

Expected result: running npm run dev should start the Laravel Vite dev server and compile my assets.

Actual result: it throws the “vite is not recognized” error and does not run.

What is the correct way to fix this issue and ensure npm run dev works properly with Laravel 10 and Vite?

when i put rate limiting on my server , and when rate exceeds the preflight request fails so code execution stops and interceptor error is also not shown is there any way to handle it in axios , in axios interceptor

 api.interceptors.response.use(
  res => res,
  err => {
    }
  }
);

I want to obtain the notificationState data, then use an automated process to execute e2e tests, and through notificationState + AI to conduct intelligent performance perception and provide modification suggestions.

I use getReport, but it is unwork
notifications
getReport

I want get the data and send it to AI

1st, click this Contact, then it pop up a modal, 2nd, we need to click on whatsapp, then it will show up the contact below. how to do extract the number in pop up modal by python ?

enter image description here
enter image description here

please help,help, so many thanks.

I’ve tested and uploaded my code to the link https://github.com/Dio-Damar-Danendra-Portofolio/Chatbot-Dio-Damar-Danendra (I recently updated on 9:24 A.M in Western Indonesian Time). I have tested with different usernames and I test the messages but it come with the same error message (No reply from Gemini). Please check and revise the errors. (Note: I already set the API key from the https://aistudio.google.com/app/apikey)

I have tested with different usernames and I test the messages but it come with the same error message (No reply from Gemini). I expected to be functional as any other chatbots, but in reality it comes with that Error message from invalid authentication credentials until the reply reads “Error: No reply from Gemini”. I have tried so many solutions.

How can i make an array of veriables using a while loop

I am using osclass for a uni project and i find no way whatsoever to make a variable for the custom catagory fields.

I have made Identifiers for the custom catagories and have tried many different approaches to grab and echo the custom catagory value elsewhere on the page other than in the current catagory.

I cannot isolate the custom catagory values by any means.

My only option i am thinking is making or buying a plugin , OR using a PHP veriable array

Below is the code used to display the custom catagory values on my osclass page

<?php if( osc_count_item_meta() >= 1 ) { ?> 
   
          <?php while ( osc_has_item_meta() ) { ?>
          
                    <?php if(osc_item_meta_value()!='') { ?> 
                   
                   
                    // I WOULD LIKE TO MAKE MAKE AN ARRAY OF VERIABLES SO I CAN USE THE CUSTOM CATAGORY DATA 
                    // TRIED SO FAR if(osc_item_meta_name()!='') {  $caughtcountry = osc_item_meta_value('country'); } 
                    // BUT THIS APPROACH DOES NOT WORK 

                    <?php } ?>
            
          <?php } ?>
          
          
      
    <?php } ?>`
    

I have tried using the identifiers that i added to the catagory in Admin panel

I have also tried using the Current PHP but cannot grab the values of specific custom catagories

Below is an example of one of my attempts to grab a custom catagory value but it only shows the 1st value within the values instead of cataching the ‘age’ value using the ‘age’ identifier i used.

 <?php if( osc_count_item_meta() >0 ) {  // The If osc_count_item_meta() >=1 
      if(osc_item_meta_value('age')!='') {  $caughtage = osc_item_meta_value('age'); }  else { $caughtage=''; }
                
    }   else { $caughtage=''; }
     ?>

I am building a signup feature in React. My API is working fine — when I hit the endpoint in Postman or cURL, I get a 201 Created response with JSON.

But in Chrome DevTools → Network tab, when I trigger the API from React, I see 201 Created in the Headers, but in Preview/Response it shows:
Failed to load response data: No data found for resource with given identifier
My Code This is for Sign up Request.

import axios from "axios";
import { useState } from "react";

export default function Signup() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: ""
  });

  const handleSignUp = async () => {
    try {
      const res = await axios.post("http://localhost:3000/app/users/sign-up", formData);
      console.log("Response:", res.data);
      alert("User created successfully");
    } catch (err) {
      console.error("Signup failed:", err);
    }
  };

  return (
   <form className="mt-8 space-y-6" >
    <div className="rounded-md -space-y-px">
     <div>
      <input
        type="text"
        placeholder="Name"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />
      <input
        type="email"
        placeholder="Email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
      />
      <input
        type="password"
        placeholder="Password"
        value={formData.password}
        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
      />
      <button type="submit" onClick={handleSignUp}>
        Sign Up
      </button>
    </div>
   </div>
  </form>
     
  );
}

• What I expected:

  To see the JSON response in the Preview/Response tab in Network DevTools after the request succeeds.

• What I got:

  The request shows 201 Created in Headers, but Preview/Response says

  Failed to load response data: No data found for resource with given identifier

Why is this happening, and how can I fix it?

I’m trying to add upgrades to my clicker game so that when you buy an upgrade it adds 1 to a variable every 3 seconds how do I do this! HELP

I uploaded a kml file to my website and viewed the result in Google Chrome. Then I noticed a waypoint was missing. I added that point to the kml file using Google Earth and then re-uploaded the file. When I reopened the new file in my browser, the added point wasn’t visible. I think it was because a cache (but not the browser cache) was still showing the old version. What should I do to always see the latest version in my browser?

I wrote this code that uses Google’s Cloud API to get an object from my bucket and download it. It works perfectly when I had my bucket set to public (allUsers added to Principal w/ all the required roles, then I could just redirect to the mediaLink) but I need it to be more secure. Now I can’t just use the mediaLink to redirect to another tab since that results in an Anonymous user error.

downloadSubmittalBucket(item) {
            this.loading = true

                axios
                .get(`https://storage.googleapis.com/storage/v1/b/bucket-name-here/o/` + item, 
                {
                    headers: { 
                        'Authorization': 'Bearer ' + sessionStorage.getItem("access_token")
                    }
                })
                .then((response) => {
                    // window.open(response.data.mediaLink)
                    this.saveSubmittalBucket(response.data)
                    // console.log(response)
                    

                })
                .catch((err) => {
                    console.log(err)
                });
        },  

saveSubmittalBucket(item){
            axios
                .get(item.mediaLink, 
                {
                    headers: { 
                        'Authorization': 'Bearer ' + sessionStorage.getItem("access_token")
                    }
                })
                .then((response) => {
                    console.log(response)
                    // A bunch of stuff that didn't work:
                    // I've tried using: 
                    // new blob -> filesaver.js
                    // window.open(response.data) -> ends up with anonymous user
                    // base64 -> blob
                    // I've also tried using @google-cloud/storage, unfortunately it doesn't match my use case, since it requires gcloud auth login.
                    // Same with signed URLs, also requires gcloud auth login

                    //Not really sure how this response works too. What is it even?

                })
                .catch((err) => {
                    console.log(err)
                });
}

response.data

So basically the code right now just results in the response above, and I don’t really know how to save it locally. I’ve also looked into using @google-cloud/storage but unfortunately it doesn’t really fit my use case.

Funnily enough, I can download the output just fine using the mediaLink on Postman with the required token, so I’m pretty sure authorization is not an issue.

I’m basically stuck now, don’t really know how to proceed from here.

Any help will be appreciated.

I’m new to React, so when I finished the Tic-Tac-Toe Tutorial from the documentation, I started doing the challenges to improve the game and practice. I got stuck at the second challenge:

“2. Rewrite Board to use two loops to make the squares instead of hardcoding them.”

This was the Board component before i started the challenge.

function Board({xIsNext, squares, onPlay}) {

  function handleClick(i) {
    if (squares[i] || calculateWinner(squares)) return;
  
    const nextSquares = squares.slice();
    xIsNext ? (nextSquares[i] = "X") : (nextSquares[i] = "O");
    onPlay(nextSquares)
  }

  const winner = calculateWinner(squares);
  let status;
  status = winner ? "Winner: "+winner : "Next player: "+(xIsNext ? "X" : "O");

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

Seeing the pattern that there was in the repetition of the rows and squares, I rewrote the code into this.

function Board({xIsNext, squares, onPlay}) {

  function handleClick(i) {
    if (squares[i] || calculateWinner(squares)) return;
  
    const nextSquares = squares.slice();
    xIsNext ? (nextSquares[i] = "X") : (nextSquares[i] = "O");
    onPlay(nextSquares)
  }

  const squareComponents = []
  const rowComponents = []

  for (i = 0; i < 9; i++) {
    squareComponents.push(<Square key={i} value={squares[i]} onSquareClick={() => handleClick(i)}/>);
  }
  
  for (i = 0; i < 3; i++) {
    rowComponents.push(
      <Row key={i}>
        {squareComponents.splice(0,3)}
      </Row>
    )
  }

  const winner = calculateWinner(squares);
  let status;
  status = winner ? "Winner: "+winner : "Next player: "+(xIsNext ? "X" : "O");

  return (
    <>
      <div className="status">{status}</div>
      {rowComponents}
    </>
  );
}

The page renders, but when you click in any of the squares in the board, the “X” appears only in the fourth square. It’s like all of the click handlers of the Square components are referencing the fourth square. Why does that happen?

My solution to this, after trying many different things, was passing the parameter of the event handler function as a prop to be used in the Square component. So I changed the first for loop in the Board component to this:

squareComponents.push(<Square key={i} value={squares[i]} onSquareClick={handleClick} onSquareClickArgument={i}/>);

And I changed the Square component to this:

function Square(props) {
  return (
    <button className="square" onClick={() => props.onSquareClick(props.onSquareClickArgument)}> 
      {props.value}
    </button>
  );
}

It worked. But why my first solution to this challenge did not and this does?